"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1220"],{2327:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>o,assets:()=>c,toc:()=>d,contentTitle:()=>l});var o=JSON.parse('{"id":"features/compiled-code","title":"Compiled Code","description":"The resulting compiled/transpiled code can be seen in the compiled code viewer (in the tools pane) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.).","source":"@site/docs/features/compiled-code.mdx","sourceDirName":"features","slug":"/features/compiled-code","permalink":"/docs/features/compiled-code","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/compiled-code.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Console","permalink":"/docs/features/console"},"next":{"title":"Tests","permalink":"/docs/features/tests"}}'),r=s("5893"),n=s("65"),i=s("3365");let a={},l="Compiled Code",c={},d=[];function u(e){let t={a:"a",h1:"h1",header:"header",img:"img",p:"p",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"compiled-code",children:"Compiled Code"})}),"\n","\n",(0,r.jsxs)(t.p,{children:["The resulting compiled/transpiled code can be seen in the compiled code viewer (in the ",(0,r.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"}),") in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.)."]}),"\n",(0,r.jsx)(t.p,{children:"This can be a great tool for learning. As you write code, you see the compiled code and the resulting page at the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by CSS processors (e.g. Autoprefixer), if enabled."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Compiled Code Viewer",src:s(7429).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsxs)(t.p,{children:["e.g. ",(0,r.jsx)(t.a,{href:"https://livecodes.io/?ts&compiled=full",children:"https://livecodes.io/?ts&compiled=full"})," ",(0,r.jsx)("br",{}),"\nsets TypeScript as the active editor and shows compiled code viewer maximized."]}),"\n",(0,r.jsxs)(t.p,{children:["This demo shows TypeScript code along with the compiled Javascript code, similar to the ",(0,r.jsx)(t.a,{href:"https://www.typescriptlang.org/play",children:"official TypeScript Playground"}),":"]}),"\n",(0,r.jsx)(i.Z,{import:"https://gist.github.com/hatemhosny/4bed283ef9757a6a541aee685c710dc7",params:{"ts-selector":"playground.ts",activeEditor:"script",compiled:"full"}})]})}function p(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},7429:function(e,t,s){s.d(t,{Z:function(){return o}});let o=s.p+"assets/images/compiled-code-1-bf18468708e8da3bb486780bdc5310b0.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),r=s("4200"),n=s("7294"),i=s("8294");function a(e){let t=(0,n.useRef)(null),[s,r]=(0,n.useState)(e.className||""),[a,l]=(0,n.useState)(e.style||{}),[c,d]=(0,n.useState)(e.height),[u,p]=(0,n.useState)(),[h,m]=(0,n.useState)(JSON.stringify(e.config||"")),[f,g]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:n,sdkReady:a,config:c,...y}=e;if(r(s||""),l(o||{}),d(n),u&&f===JSON.stringify(y)){if(h===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(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,n.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),p=s("8168"),h=s("8228"),m=s("5050");function f(e){let[t,s]=(0,n.useState)(e.js),[r,i]=(0,n.useState)(e.ts),[a,l]=(0,n.useState)(e.react),[f,g]=(0,n.useState)(e.vue),[y,v]=(0,n.useState)(e.svelte),w="3.7rem",[b,j]=(0,n.useState)(!0),[x,S]=(0,n.useState)(w),C=(0,n.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,n.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(r,"ts")),l(e(a,"jsx")),g(e(f,"html")),v(e(y,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${h.Z.details}`,"data-collapsed":b,style:{height:b?w:x,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{j(!b),P()},children:"show code"}),(0,o.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:m.Z.collapsibleContent,children:(0,o.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"ts",children:r})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"html",children:f})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:s,showCode:n,height:i,...c}=e,{colorMode:d}=(0,r.I)(),u=e=>JSON.stringify(e,null,2),p=`
import { createPlayground } from 'livecodes';

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

`.trimStart(),h=`
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>

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