68 lines
21 KiB
JavaScript
68 lines
21 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8875"],{7240:function(e,t,o){o.r(t),o.d(t,{default:()=>p,frontMatter:()=>l,metadata:()=>s,assets:()=>d,simpleConfig:()=>c,toc:()=>h,contentTitle:()=>a});var s=JSON.parse('{"id":"features/display-modes","title":"Display Modes","description":"The configuration option mode, also available as query param, can be used to select different display modes.","source":"@site/docs/features/display-modes.mdx","sourceDirName":"features","slug":"/features/display-modes","permalink":"/docs/features/display-modes","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/display-modes.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Code to Image","permalink":"/docs/features/code-to-image"},"next":{"title":"Default View","permalink":"/docs/features/default-view"}}'),n=o("5893"),i=o("65"),r=o("3365");let l={},a="Display Modes",d={},c={mode:"simple",layout:"vertical",activeEditor:"script",editor:"monaco",tools:{status:"none"},script:{language:"jsx",content:`import { atom, useAtom } from 'jotai';
|
|
|
|
const countAtom = atom(0);
|
|
|
|
const Counter = () => {
|
|
const [count, setCount] = useAtom(countAtom);
|
|
const inc = () => setCount((c) => c + 1);
|
|
return (
|
|
<>
|
|
{count} <button onClick={inc}>+1</button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const App = () => (
|
|
<div className="App">
|
|
<h1>Hello Jotai</h1>
|
|
<h2>Enjoy coding!</h2>
|
|
<Counter />
|
|
</div>
|
|
);
|
|
|
|
export default App;
|
|
`},style:{language:"css",content:".App {\n font-family: sans-serif;\n text-align: center;\n}\n".trimStart()}},h=[{value:"<code>full</code>",id:"full",level:2},{value:"<code>focus</code>",id:"focus",level:2},{value:"<code>simple</code>",id:"simple",level:2},{value:"<code>lite</code>",id:"lite",level:2},{value:"<code>editor</code>",id:"editor",level:2},{value:"<code>codeblock</code>",id:"codeblock",level:2},{value:"<code>result</code>",id:"result",level:2},{value:"Display Mode vs Default View",id:"display-mode-vs-default-view",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",p:"p",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"display-modes",children:"Display Modes"})}),"\n","\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration"})," option ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#mode",children:(0,n.jsx)(t.code,{children:"mode"})}),", also available as ",(0,n.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query param"}),", can be used to select different display modes.\nThe following display modes are supported:"]}),"\n",(0,n.jsx)(t.h2,{id:"full",children:(0,n.jsx)(t.code,{children:"full"})}),"\n",(0,n.jsx)(t.p,{children:"This is the default mode with toolbars, editor and result panes."}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?template=react",children:"https://livecodes.io/?template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Screenshot: (App in full mode)"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"full-mode",src:o(4590).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.p,{children:"Demo: (Embedded playground in full mode)"}),"\n",(0,n.jsx)(r.Z,{template:"react"}),"\n",(0,n.jsx)(t.h2,{id:"focus",children:(0,n.jsx)(t.code,{children:"focus"})}),"\n",(0,n.jsxs)(t.p,{children:["This hides most of UI buttons and menus and keeps only the essential elements: editors, editor titles, result page, console, and run and share buttons. It can be toggled during runtime from the full mode through the UI from a button in the lower left corner. Also the query param ",(0,n.jsx)(t.code,{children:"?mode=focus"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?template=react&mode=focus",children:"https://livecodes.io/?template=react&mode=focus"})]}),"\n",(0,n.jsx)(t.p,{children:"Screenshot: (focus mode)"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"focus-mode",src:o(6251).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.h2,{id:"simple",children:(0,n.jsx)(t.code,{children:"simple"})}),"\n",(0,n.jsxs)(t.p,{children:["This mode is mainly useful for embedded playgrounds.\nIt shows only 1 editor with the output (result page +/- console). The content of other editors can be set using ",(0,n.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"config"})," even though the editors are not shown.\nBy default, ",(0,n.jsx)(t.code,{children:"codemirror"})," editor is used, however, this can be changed by the ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#editor",children:(0,n.jsx)(t.code,{children:"editor"})})," option.\nBy default, the layout is ",(0,n.jsx)(t.code,{children:"responsive"})," but can also be overridden by the ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#layout",children:(0,n.jsx)(t.code,{children:"layout"})})," option to ",(0,n.jsx)(t.code,{children:"vertical"})," or ",(0,n.jsx)(t.code,{children:"horizontal"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"Demo: JS with console"}),"\n",(0,n.jsx)(r.Z,{params:{mode:"simple",js:'console.log("hello world")',layout:"vertical",console:"full"}}),"\n",(0,n.jsx)(t.p,{children:"Demo: JSX & Result page (Monaco editor, add CSS)"}),"\n","\n",(0,n.jsx)(r.Z,{config:c,height:"400px"}),"\n",(0,n.jsx)(t.h2,{id:"lite",children:(0,n.jsx)(t.code,{children:"lite"})}),"\n",(0,n.jsxs)(t.p,{children:["Loads a light-weight, minimal code editor, with limited playground features.\nSee the section about ",(0,n.jsx)(t.a,{href:"/docs/features/lite",children:"lite mode"})," for details"]}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=lite&template=react",children:"https://livecodes.io/?mode=lite&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{config:{mode:"lite"},template:"react"}),"\n",(0,n.jsx)(t.h2,{id:"editor",children:(0,n.jsx)(t.code,{children:"editor"})}),"\n",(0,n.jsx)(t.p,{children:"Hides the results pane and works as editor only."}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=editor&template=react",children:"https://livecodes.io/?mode=editor&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{config:{mode:"editor"},template:"react"}),"\n",(0,n.jsx)(t.h2,{id:"codeblock",children:(0,n.jsx)(t.code,{children:"codeblock"})}),"\n",(0,n.jsx)(t.p,{children:"A read-only mode showing only the code block without editor interface. On mouse-over a copy button appears that allows to copy the code. This is specially useful when embedded."}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=codeblock&template=react",children:"https://livecodes.io/?mode=codeblock&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{config:{mode:"codeblock"},template:"react"}),"\n",(0,n.jsxs)(t.p,{children:["By default, in ",(0,n.jsx)(t.code,{children:"codeblock"})," mode, the light-weight ",(0,n.jsx)(t.code,{children:"CodeJar"})," editor is used (in read-only mode). You can override this by setting the ",(0,n.jsx)(t.code,{children:"editor"})," option. Refer to ",(0,n.jsx)(t.a,{href:"/docs/features/editor-settings#code-editor",children:"Editor Settings"})," for details."]}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=codeblock&editor=monaco&template=react",children:"https://livecodes.io/?mode=codeblock&editor=monaco&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{config:{mode:"codeblock",editor:"monaco"},template:"react"}),"\n",(0,n.jsx)(t.h2,{id:"result",children:(0,n.jsx)(t.code,{children:"result"})}),"\n",(0,n.jsx)(t.p,{children:"Shows the result page only, with a drawer at the bottom (which can be closed) that allows opening the project in the full playground."}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=result&template=react",children:"https://livecodes.io/?mode=result&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{params:{mode:"result",template:"react"}}),"\n",(0,n.jsxs)(t.p,{children:["The tools pane (e.g. console/compiled code viewer) is hidden by default in ",(0,n.jsx)(t.code,{children:"result"})," mode. It can be shown if set to ",(0,n.jsx)(t.code,{children:"open"})," or ",(0,n.jsx)(t.code,{children:"full"}),". Refer to ",(0,n.jsx)(t.a,{href:"/docs/features/tools-pane",children:"Tools pane"})," documentation for details."]}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=result&tools=console%7Cfull&&js=console.log(%22Hello%20World",children:'https://livecodes.io/?mode=result&tools=console|full&&js=console.log("Hello%20World'}),'!")']}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{params:{mode:"result",tools:"console|full",js:'console.log("Hello World!")'}}),"\n",(0,n.jsx)(t.h2,{id:"display-mode-vs-default-view",children:"Display Mode vs Default View"}),"\n",(0,n.jsxs)(t.admonition,{type:"info",children:[(0,n.jsxs)(t.p,{children:['"Display Mode" is different from "',(0,n.jsx)(t.a,{href:"/docs/features/default-view",children:"Default View"}),'".']}),(0,n.jsxs)(t.p,{children:["In ",(0,n.jsx)(t.code,{children:"editor"})," display mode, only the editor is loaded and the result page is not available. While ",(0,n.jsx)(t.code,{children:"editor"})," default view shows the editor by default, and the result page can be shown by dragging the split gutter."]}),(0,n.jsxs)(t.p,{children:["The same applies for ",(0,n.jsx)(t.code,{children:"result"})," display mode and default view."]})]})]})}function p(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},6251:function(e,t,o){o.d(t,{Z:function(){return s}});let s=o.p+"assets/images/mode-focus-cfaa1455bdd069375859aa7cefbbc82d.jpg"},4590:function(e,t,o){o.d(t,{Z:function(){return s}});let s=o.p+"assets/images/mode-full-25f311a4ee364ffd5331c99c03160894.jpg"},3365:function(e,t,o){o.d(t,{Z:()=>g});var s=o("5893"),n=o("4200"),i=o("7294"),r=o("8294");function l(e){let t=(0,i.useRef)(null),[o,n]=(0,i.useState)(e.className||""),[l,a]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[p,m]=(0,i.useState)(JSON.stringify(e.config||"")),[f,g]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:o,style:s,height:i,sdkReady:l,config:d,...y}=e;if(n(o||""),a(s||{}),c(i),h&&f===JSON.stringify(y)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else g(JSON.stringify(y)),h?.destroy(),(0,r.T)(t.current,{config:d,...y}).then(e=>{u(e),"function"==typeof l&&l(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:o,style:l,"data-height":d})}var a=o("1858"),d=o("3262"),c=o("1705"),h=o("7645"),u=o("8168"),p=o("8228"),m=o("5050");function f(e){let[t,o]=(0,i.useState)(e.js),[n,r]=(0,i.useState)(e.ts),[l,a]=(0,i.useState)(e.react),[f,g]=(0,i.useState)(e.vue),[y,j]=(0,i.useState)(e.svelte),v="3.7rem",[x,b]=(0,i.useState)(!0),[w,S]=(0,i.useState)(v),E=(0,i.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${v})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${v})`)},255)};return(0,i.useEffect)(()=>{if(d.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}};o(e(t,"js")),r(e(n,"ts")),a(e(l,"jsx")),g(e(f,"html")),j(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?v:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{b(!x),C()},children:"show code"}),(0,s.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"ts",children:n})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"jsx",children:l})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"html",children:f})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:o,showCode:i,height:r,...d}=e,{colorMode:c}=(0,n.I)(),h=e=>JSON.stringify(e,null,2),u=`
|
|
import { createPlayground } from 'livecodes';
|
|
|
|
const options = ${h(d)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),p=`
|
|
import { createPlayground, type EmbedOptions } from 'livecodes';
|
|
|
|
const options: EmbedOptions = ${h(d)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),m=`
|
|
import LiveCodes from 'livecodes/react';
|
|
|
|
export default function App() {
|
|
const options = ${h(d)};
|
|
return (<LiveCodes {...options}></LiveCodes>);
|
|
}
|
|
|
|
`.trimStart(),g=`
|
|
<script setup>
|
|
import LiveCodes from "livecodes/vue";
|
|
|
|
const options = ${h(d)};
|
|
</script>
|
|
<template>
|
|
<LiveCodes v-bind="options" />
|
|
</template>
|
|
|
|
`,y=`
|
|
<script>
|
|
import { onMount } from 'svelte';
|
|
import { createPlayground } from 'livecodes';
|
|
|
|
let options = $state(${h(d)});
|
|
let container = $state(null);
|
|
onMount(() => {
|
|
createPlayground(container, options);
|
|
});
|
|
</script>
|
|
|
|
<div bind:this="{container}"></div>
|
|
|
|
`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(f,{js:u,ts:p,react:m,vue:g,svelte:y})]})}},8294:function(e,t,o){o.d(t,{T:function(){return n},r:function(){return i}});var s=o(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:o={},headless:s,loading:n="lazy",view:r}=t,l=s||"headless"===r,a=null,d=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 c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":n),c.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof o&&Object.keys(o).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let p=!1,m="Cannot call API methods after calling `destroy()`.",f=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 s="livecodes",i=a.querySelector(`iframe.${s}`),r=i||document.createElement("iframe");r.classList.add(s),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===n?"eager":"lazy"),l?E(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:o},h))}),r.onload=()=>{e(r)},r.src=c.href,i||a.appendChild(r)}),g=new Promise(e=>{addEventListener("message",function t(o){o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),g.settled=!0)})}),y=()=>p?Promise.reject(m):new Promise(async e=>{g.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await g,e()}),j=(e,t)=>new Promise(async(o,s)=>{if(p)return s(m);await y();let n=C();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===n&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?s(e.error):o(e)}}),f.contentWindow?.postMessage({method:e,id:n,args:t},h)}),v={},x=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(m);return x.includes(e)?(j("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},w=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=w(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!v[t])return;let o=e.data?.payload;v[t]?.forEach(e=>{e(o)})});let S=()=>{Object.values(v).forEach(e=>{e.length=0}),f?.remove?.(),p=!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 y(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let C=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,o=Array(t>1?t-1:0),s=1;s<t;s++)o[s-1]=arguments[s];return j("exec",[e,...o])},destroy:()=>g.settled?j("destroy").then(S):p?Promise.reject(m):(S(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:o="https://livecodes.io",params:n={},config:i={},headless:r,import:l,lite:a,view:d,...c}=t;try{e=new URL(o)}catch{throw Error(`${o} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[o,s]=t;void 0!==s&&e.searchParams.set(o,String(s))});let u="headless"===t.view||r;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(i))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{h.set("params",(0,s.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)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,o){o.d(t,{Z:function(){return l},a:function(){return r}});var s=o(7294);let n={},i=s.createContext(n);function r(e){let t=s.useContext(i);return s.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:r(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); |