"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8118"],{8050:function(e,t,s){s.r(t),s.d(t,{default:()=>f,frontMatter:()=>d,metadata:()=>n,assets:()=>c,toc:()=>h,contentTitle:()=>l});var n=JSON.parse('{"id":"features/embeds","title":"Embedded Playgrounds","description":"Overview","source":"@site/docs/features/embeds.mdx","sourceDirName":"features","slug":"/features/embeds","permalink":"/docs/features/embeds","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/embeds.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Mobile Support","permalink":"/docs/features/mobile"},"next":{"title":"Lite Mode","permalink":"/docs/features/lite"}}'),r=s("5893"),o=s("65"),i=s("3365"),a=s("8500");let d={},l="Embedded Playgrounds",c={},h=[{value:"Overview",id:"overview",level:2},{value:"Create Embedded Playground",id:"create-embedded-playground",level:2},{value:"App Embed Screen",id:"app-embed-screen",level:3},{value:"SDK",id:"sdk",level:3},{value:"Avoid Breaking Changes",id:"avoid-breaking-changes",level:2},{value:"Differences from Full App",id:"differences-from-full-app",level:2},{value:"Features Not Available",id:"features-not-available",level:3},{value:"Features Not Shown by Default",id:"features-not-shown-by-default",level:3},{value:"Security",id:"security",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"embedded-playgrounds",children:"Embedded Playgrounds"})}),"\n","\n",(0,r.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes playgrounds can be embedded in any web page. The playground can be ",(0,r.jsx)(t.a,{href:"/docs/features/code-prefill",children:"prefilled with code"})," in any supported language. This can be very useful in documentation websites, technical blogs, educational websites and others."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n",(0,r.jsx)(i.Z,{template:"javascript"}),"\n",(0,r.jsxs)(t.p,{children:["The embedding web page can communicate with the playground using a powerful ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," (e.g. edit/format code, watch for code changes, get the compiled code or result page HTML, run tests, change layout, ...etc)."]}),"\n",(0,r.jsx)(t.h2,{id:"create-embedded-playground",children:"Create Embedded Playground"}),"\n",(0,r.jsx)(t.h3,{id:"app-embed-screen",children:"App Embed Screen"}),"\n",(0,r.jsxs)(t.p,{children:["In the ",(0,r.jsx)(t.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"}),", the Embed Screen can be accessed from Project menu \u2192 Embed."]}),"\n","\n",(0,r.jsx)(a.Z,{params:{screen:"embed"},linkText:"direct link"}),"\n",(0,r.jsxs)(t.p,{children:["It shows a preview of the embedded playground, allows customizations of ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," and provides generated code that can be added to the web page that will embed the playground."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.img,{alt:"LiveCodes embed",src:s(6054).Z+"",width:"2240",height:"1400"}),"\n",(0,r.jsx)(t.img,{alt:"LiveCodes embed",src:s(6494).Z+"",width:"2240",height:"1400"}),"\n",(0,r.jsx)(t.img,{alt:"LiveCodes embed",src:s(7254).Z+"",width:"2240",height:"1400"})]}),"\n",(0,r.jsx)(t.admonition,{title:"Note",type:"info",children:(0,r.jsxs)(t.p,{children:["Please note that the Embed Screen sends the project code to ",(0,r.jsx)(t.a,{href:"/docs/features/share",children:"LiveCodes share service"})," to generate a short URL for usage in the embed code."]})}),"\n",(0,r.jsx)(t.p,{children:'The setting "Embed Type" allows selection from different variations of the generated code:'}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Using the SDK from CDN."}),"\n",(0,r.jsx)(t.li,{children:"Using the SDK with a bundler (e.g. vite, parcel, webpack, etc)."}),"\n",(0,r.jsx)(t.li,{children:"Using the React SDK."}),"\n",(0,r.jsx)(t.li,{children:"Using the Vue SDK."}),"\n",(0,r.jsxs)(t.li,{children:["Using iframe and ",(0,r.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query params"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:["Using HTML code that the SDK can use to ",(0,r.jsx)(t.a,{href:"/docs/features/code-prefill#auto-prefill-from-page-dom",children:"auto-prefill"})," the playground."]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"sdk",children:"SDK"}),"\n",(0,r.jsxs)(t.p,{children:["The LiveCodes ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," can be used to embed playgrounds, specify ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed"})," and ",(0,r.jsx)(t.a,{href:"/docs/configuration/",children:"configuration"})," options and allows communication with the embedded playground with many ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"This method provides more control and allows advanced scenarios."}),"\n",(0,r.jsx)(t.h2,{id:"avoid-breaking-changes",children:"Avoid Breaking Changes"}),"\n",(0,r.jsx)(t.p,{children:"To avoid breaking changes that would cause the embedded playgrounds to stop working as expected with later updates, follow these recommendations:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Use a ",(0,r.jsx)(t.a,{href:"/docs/features/permanent-url",children:"permanent URL"})," to a pinned version of the LiveCodes app for ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#appurl",children:(0,r.jsx)(t.code,{children:"EmbedOptions.appUrl"})}),". The code generated in the Embed screen uses that by default."]}),"\n",(0,r.jsx)(t.li,{children:"Specify the version of the SDK used. The code generated in the Embed screen also does that."}),"\n",(0,r.jsxs)(t.li,{children:["For project code, ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#package-version",children:"specify the versions"})," of the imported packages and ",(0,r.jsx)(t.a,{href:"/docs/features/external-resources",children:"external resources"}),". ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"Custom import maps"})," can be set to control the module import behavior."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["Check the ",(0,r.jsx)(t.a,{href:"/docs/features/permanent-url",children:"Permanent URL"})," section for more details."]}),"\n",(0,r.jsx)(t.h2,{id:"differences-from-full-app",children:"Differences from Full App"}),"\n",(0,r.jsx)(t.p,{children:"Some of the features of the full standalone app are not available or shown by default in embedded playgrounds, either because of security reasons, being not useful when embedded or because of space limitations."}),"\n",(0,r.jsx)(t.h3,{id:"features-not-available",children:"Features Not Available"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["All features that require saving/loading from browser storage:\ne.g. ",(0,r.jsx)(t.a,{href:"/docs/features/projects",children:"projects"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/assets",children:"assets"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/snippets",children:"code snippets"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/user-settings",children:"user settings"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/default-template-language",children:"default template/language"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/recover",children:"recover unsaved"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/backup-restore",children:"backup/restore"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:["All features that require authentication:\ne.g. ",(0,r.jsx)(t.a,{href:"/docs/features/github-integration",children:"login/logout"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/sync",children:"sync"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/deploy",children:"deploy"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/import",children:"importing"})," from private github repos."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/broadcast",children:"Broadcast"}),"."]}),"\n",(0,r.jsx)(t.li,{children:"App menus."}),"\n",(0,r.jsxs)(t.li,{children:["Some tools in ",(0,r.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"}),":\ne.g. open result page in new window, broadcast status."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/welcome",children:"Welcome screen"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"features-not-shown-by-default",children:"Features Not Shown by Default"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/external-resources",children:"External resources"})," button (below the editor) and external resources screen are only shown if the loaded project has external resources (e.g. via ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#stylesheets",children:(0,r.jsx)(t.code,{children:"EmbedOptions.config.stylesheets"})})," and ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#scripts",children:(0,r.jsx)(t.code,{children:"EmbedOptions.config.scripts"})}),")."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/tests",children:"Tests"})," are not shown in ",(0,r.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"})," unless the loaded project has tests (e.g. via ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#tests",children:(0,r.jsx)(t.code,{children:"EmbedOptions.config.tests"})}),"). Test editor is not available."]}),"\n",(0,r.jsxs)(t.li,{children:["Loading ",(0,r.jsx)(t.a,{href:"/docs/features/templates",children:"starter templates"})," can be achieved by the ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," (",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#template",children:(0,r.jsx)(t.code,{children:"EmbedOptions.template"})}),"), not from the UI."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/import",children:"Importing"})," from external sources can be achieved by the ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," (",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#import",children:(0,r.jsx)(t.code,{children:"EmbedOptions.import"})}),"), not from the UI."]}),"\n",(0,r.jsxs)(t.li,{children:["Getting a ",(0,r.jsx)(t.a,{href:"/docs/features/share",children:"share"})," URL can be achieved by the ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," (",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#getshareurl",children:(0,r.jsx)(t.code,{children:"getShareUrl"})})," method), not from the UI."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"security",children:"Security"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["All user code, ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," and compilers run in ",(0,r.jsx)(t.a,{href:"https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/",children:"sandboxed iframes"})," with a unique origin."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Embedded playgrounds do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin. Communications with the SDK occur by means of ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage",children:(0,r.jsx)(t.code,{children:"postMessage"})})," calls."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/code-prefill",children:"Code prefill"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/",children:"Configuration"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"Embed options"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/permanent-url",children:"Permanent URL"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/lite",children:"Lite mode"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/read-only",children:"Read-only"})}),"\n"]})]})}function f(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},6054:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/embed-1-408ede1485d4bc08a9d49ae7c79dd077.jpg"},6494:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/embed-2-1a99c4db9d201fd7d7a928cccc31b1b6.jpg"},7254:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/embed-3-c90eef02803a8609e7c39ccb48bbe5a6.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>g});var n=s("5893"),r=s("4200"),o=s("7294"),i=s("8294");function a(e){let t=(0,o.useRef)(null),[s,r]=(0,o.useState)(e.className||""),[a,d]=(0,o.useState)(e.style||{}),[l,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[f,p]=(0,o.useState)(JSON.stringify(e.config||"")),[m,g]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:a,config:l,...j}=e;if(r(s||""),d(n||{}),c(o),h&&m===JSON.stringify(j)){if(f===JSON.stringify(l))return;p(JSON.stringify(l)),"string"==typeof l?fetch(l).then(e=>e.json()).then(e=>{h?.setConfig(e)}):l&&h.setConfig(l)}else g(JSON.stringify(j)),h?.destroy(),(0,i.T)(t.current,{config:l,...j}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":l})}var d=s("1858"),l=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),f=s("8228"),p=s("5050");function m(e){let[t,s]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[a,d]=(0,o.useState)(e.react),[m,g]=(0,o.useState)(e.vue),[j,x]=(0,o.useState)(e.svelte),b="3.7rem",[v,y]=(0,o.useState)(!0),[w,S]=(0,o.useState)(b),k=(0,o.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${b})`)},255)};return(0,o.useEffect)(()=>{if(l.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")),d(e(a,"jsx")),g(e(m,"html")),x(e(j,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${f.Z.details}`,"data-collapsed":v,style:{height:v?b:w,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{y(!v),E()},children:"show code"}),(0,n.jsx)("div",{ref:k,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:j})})]})})})]})}function g(e){let{className:t,style:s,showCode:o,height:i,...l}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=`
import { createPlayground } from 'livecodes';

const options = ${h(l)};
createPlayground('#container', options);

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

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

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

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

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

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

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

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

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

`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:d.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:f,react:p,vue:g,svelte:j})]})}},8500:function(e,t,s){s.d(t,{Z:()=>l});var n=s("5893");s("7294");var r=s("6735");function o(e){let{children:t,fallback:s}=e;return(0,r.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var i=s("1705"),a=s("8294"),d=s("1858");function l(e){let{params:t,config:s,code:r,language:l="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:u=!0,linkText:f="Run in LiveCodes",style:p={},className:m=""}=e,g=(0,a.r)({appUrl:d.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...p},className:m,children:[r&&(0,n.jsx)(o,{children:()=>(0,n.jsx)(i.Z,{language:l,title:c,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,l):r})}),(0,n.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[f,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=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:n,loading:r="lazy",view:i}=t,a=n||"headless"===i,d=null,l=null;if("string"==typeof e)d=document.querySelector(e);else if(e instanceof HTMLElement)d=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!d){if(a)E(d=document.createElement("div")),document.body.appendChild(d);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let f=t.params;"object"==typeof f&&Object.keys(f).length>0&&JSON.stringify(f).length<1800&&Object.keys(f).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(f[e])))});let p=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!d)return;let t=d.dataset.height||d.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";d.style.height=e}"false"===d.dataset.defaultStyles||a||(d.style.backgroundColor||="#fff",d.style.border||="1px solid black",d.style.borderRadius||="8px",d.style.boxSizing||="border-box",d.style.padding||="0",d.style.width||="100%",d.style.height||=d.style.height||"300px",d.style.minHeight="200px",d.style.flexGrow="1",d.style.overflow||="hidden",d.style.resize||="vertical");let n="livecodes",o=d.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),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?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=d.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=c.href,o||d.appendChild(i)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),x=()=>p?Promise.reject(m):new Promise(async e=>{j.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),b=(e,t)=>new Promise(async(s,n)=>{if(p)return n(m);await x();let r=C();addEventListener("message",function t(o){if(o.source===g.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:r,args:t},h)}),v={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(p)throw Error(m);return y.includes(e)?(b("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&b("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!==h||!t||!v[t])return;let s=e.data?.payload;v[t]?.forEach(e=>{e(s)})});let k=()=>{Object.values(v).forEach(e=>{e.length=0}),g?.remove?.(),p=!0};function E(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 x(),t.unobserve(d))})},{rootMargin:"150px"}).observe(d);let C=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return b("exec",[e,...s])},destroy:()=>j.settled?b("destroy").then(k):p?Promise.reject(m):(k(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:a,lite:d,view:l,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(d&&(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")),l&&(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"!==l?o.view=l:e.searchParams.set("view",l)),"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),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.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)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.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),n.createElement(o.Provider,{value:t},e.children)}}}]);