"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1310"],{2018:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>l,metadata:()=>r,assets:()=>c,params:()=>d,toc:()=>u,contentTitle:()=>a});var r=JSON.parse('{"id":"languages/clojurescript","title":"ClojureScript","description":"ClojureScript is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool.","source":"@site/docs/languages/clojurescript.mdx","sourceDirName":"languages","slug":"/languages/clojurescript","permalink":"/docs/languages/clojurescript","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/clojurescript.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Clio","permalink":"/docs/languages/clio"},"next":{"title":"CoffeeScript","permalink":"/docs/languages/coffeescript"}}'),n=s("5893"),o=s("65"),i=s("3365");let l={},a="ClojureScript",c={},d={cljs:`(ns demo
  ;; you can use npm modules
  (:require ["canvas-confetti$default" :as confetti]))

(let [el (js/document.getElementById "test")]
  (.addEventListener el "click"
    (fn []
      (confetti)
      (println "test"))))
`,html:'<button id="test">test</button>',console:"open"},u=[{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"clojurescript",children:"ClojureScript"})}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"https://clojurescript.org/",children:"ClojureScript"})," is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool."]}),"\n",(0,n.jsxs)(t.p,{children:["ClojureScript is a compiler for ",(0,n.jsx)(t.a,{href:"https://clojure.org/",children:"Clojure"})," that targets\nJavaScript. ",(0,n.jsx)("br",{}),"In LiveCodes, it runs in the browser using\n",(0,n.jsx)(t.a,{href:"https://github.com/squint-cljs/cherry",children:"Cherry"}),"."]}),"\n",(0,n.jsx)(t.admonition,{title:"Note",type:"info",children:(0,n.jsxs)(t.p,{children:["Lisp language family supported in LiveCodes includes ",(0,n.jsx)(t.a,{href:"/docs/languages/commonlisp",children:"Common Lisp"}),", ",(0,n.jsx)(t.a,{href:"/docs/languages/scheme",children:"Scheme"}),", ",(0,n.jsx)(t.a,{href:"/docs/languages/clojurescript",children:"ClojureScript"})," and ",(0,n.jsx)(t.a,{href:"/docs/languages/fennel",children:"Fennel"}),"."]})}),"\n",(0,n.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,n.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.code,{children:"clojurescript"})}),"\n",(0,n.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"cljs"}),", ",(0,n.jsx)(t.code,{children:"cljc"}),", ",(0,n.jsx)(t.code,{children:"clj"}),", ",(0,n.jsx)(t.code,{children:"edn"}),", ",(0,n.jsx)(t.code,{children:"clojure"})]}),"\n",(0,n.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.code,{children:"script"})}),"\n",(0,n.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://github.com/squint-cljs/cherry",children:"Cherry"})}),"\n",(0,n.jsxs)(t.p,{children:["If ",(0,n.jsx)(t.code,{children:"JSX"})," is used (using ",(0,n.jsx)(t.code,{children:"#jsx"})," reader tag - ",(0,n.jsx)(t.a,{href:"https://github.com/squint-cljs/cherry/blob/60adcf6e3a8fb940a80c6a193599da0272fe3058/examples/jsx/pages/component.cljs",children:"example"}),"), it is also compiled (",(0,n.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"}),"). See ",(0,n.jsx)(t.a,{href:"#example-usage",children:"example usage"}),"."]}),"\n",(0,n.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"cherry-cljs"}),": v0.2.18"]}),"\n",(0,n.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,n.jsxs)(t.p,{children:["Using ",(0,n.jsx)(t.a,{href:"https://shaunlebron.github.io/parinfer/",children:"Parinfer"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,n.jsx)(i.Z,{params:d}),"\n",(0,n.jsx)(t.p,{children:"Using React (with JSX):"}),"\n",(0,n.jsx)(i.Z,{template:"clojurescript"}),"\n",(0,n.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://livecodes.io/?template=clojurescript",children:"https://livecodes.io/?template=clojurescript"})}),"\n",(0,n.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://clojurescript.org/",children:"ClojureScript official website"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://clojure.org/",children:"Clojure official website"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/squint-cljs/cherry",children:"Cherry repo"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var r=s("5893"),n=s("4200"),o=s("7294"),i=s("8294");function l(e){let t=(0,o.useRef)(null),[s,n]=(0,o.useState)(e.className||""),[l,a]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[u,h]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[f,g]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:r,height:o,sdkReady:l,config:c,...j}=e;if(n(s||""),a(r||{}),d(o),u&&f===JSON.stringify(j)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(j)),u?.destroy(),(0,i.T)(t.current,{config:c,...j}).then(e=>{h(e),"function"==typeof l&&l(e)})},[e]),(0,o.useEffect)(()=>()=>{u?.destroy()},[]),(0,r.jsx)("div",{ref:t,className:s,style:l,"data-height":c})}var a=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),m=s("5050");function f(e){let[t,s]=(0,o.useState)(e.js),[n,i]=(0,o.useState)(e.ts),[l,a]=(0,o.useState)(e.react),[f,g]=(0,o.useState)(e.vue),[j,v]=(0,o.useState)(e.svelte),y="3.7rem",[x,b]=(0,o.useState)(!0),[w,S]=(0,o.useState)(y),C=(0,o.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(n,"ts")),a(e(l,"jsx")),g(e(f,"html")),v(e(j,"html"))}},[]),(0,r.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?y:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,r.jsx)("summary",{onClick:()=>{b(!x),E()},children:"show code"}),(0,r.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,r.jsx)("div",{className:m.Z.collapsibleContent,children:(0,r.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,r.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"js",children:t})}),(0,r.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"ts",children:n})}),(0,r.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"jsx",children:l})}),(0,r.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"html",children:f})}),(0,r.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"html",children:j})})]})})})]})}function g(e){let{className:t,style:s,showCode:o,height:i,...c}=e,{colorMode:d}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),h=`
import { createPlayground } from 'livecodes';

const options = ${u(c)};
createPlayground('#container', options);

`.trimStart(),p=`
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = ${u(c)};
createPlayground('#container', options);

`.trimStart(),m=`
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = ${u(c)};
  return (<LiveCodes {...options}></LiveCodes>);
}

`.trimStart(),g=`
<script setup>
import LiveCodes from "livecodes/vue";

const options = ${u(c)};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

`,j=`
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state(${u(c)});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,r.jsx)(f,{js:h,ts:p,react:m,vue:g,svelte:j})]})}},8294:function(e,t,s){s.d(t,{T:function(){return n},r:function(){return o}});var r=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:r,loading:n="lazy",view:i}=t,l=r||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)E(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":n);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let r="livecodes",o=a.querySelector(`iframe.${r}`),i=o||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),l?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,o||a.appendChild(i)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),v=()=>m?Promise.reject(f):new Promise(async e=>{j.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await j,e()}),y=(e,t)=>new Promise(async(s,r)=>{if(m)return r(f);await v();let n=P();addEventListener("message",function t(o){if(o.source===g.contentWindow&&o.origin===u&&o.data?.type==="livecodes-api-response"&&o.data?.id===n&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?r(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(f);return b.includes(e)?(y("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),r=1;r<t;r++)s[r-1]=arguments[r];return y("exec",[e,...s])},destroy:()=>j.settled?y("destroy").then(C):m?Promise.reject(f):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:o={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,r]=t;void 0!==r&&e.searchParams.set(s,String(r))});let h="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),u.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var r=s(7294);let n={},o=r.createContext(n);function i(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]);