"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5951"],{8607:function(e,n,t){t.r(n),t.d(n,{default:()=>u,frontMatter:()=>a,metadata:()=>o,assets:()=>l,toc:()=>d,contentTitle:()=>c});var o=JSON.parse('{"id":"configuration/query-params","title":"Query Parameters","description":"A flexible and convenient way to configure the app is to use URL query parameters.","source":"@site/docs/configuration/query-params.mdx","sourceDirName":"configuration","slug":"/configuration/query-params","permalink":"/docs/configuration/query-params","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/configuration/query-params.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Configuration Object","permalink":"/docs/configuration/configuration-object"},"next":{"title":"LiveCodes SDK","permalink":"/docs/sdk/"}}'),s=t("5893"),i=t("65"),r=t("3365");let a={},c="Query Parameters",l={},d=[{value:"Usage",id:"usage",level:2}];function h(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"query-parameters",children:"Query Parameters"})}),"\n","\n",(0,s.jsxs)(n.p,{children:["A flexible and convenient way to configure the app is to use URL query parameters.\nIt allows configuration of a wide range of options, including those of the ",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," and ",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"}),"."]}),"\n",(0,s.jsx)("div",{style:{clear:"both"}}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"https://livecodes.io?js=console.log('Hello World!')&console=open\n"})}),"\n",(0,s.jsx)(r.Z,{params:{js:"console.log('Hello World!')",console:"open"}}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["All properties of ",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," and ",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," that have values of primitive types (e.g. string, number, boolean) can be assigned to a query parameter with the same name."]}),"\n",(0,s.jsxs)(n.p,{children:["These include:\n",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#config",children:"config"}),",\n",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#import",children:"import"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#mode",children:"lite"}),",\n",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#loading",children:"loading"}),",\n",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#template",children:"template"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#view",children:"view"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#title",children:"title"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#description",children:"description"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#activeeditor",children:"activeEditor"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#csspreset",children:"cssPreset"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#readonly",children:"readonly"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#allowlangchange",children:"allowLangChange"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#mode",children:"mode"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#autoupdate",children:"autoupdate"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#autosave",children:"autosave"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#delay",children:"delay"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#formatonsave",children:"formatOnsave"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#theme",children:"theme"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#themecolor",children:"themeColor"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#applanguage",children:"appLanguage"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#recoverunsaved",children:"recoverUnsaved"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#welcome",children:"welcome"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#showspacing",children:"showSpacing"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#layout",children:"layout"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#editor",children:"editor"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#editortheme",children:"editorTheme"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#fontfamily",children:"fontFamily"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#fontsize",children:"fontSize"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#usetabs",children:"useTabs"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#tabsize",children:"tabSize"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#linenumbers",children:"lineNumbers"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#wordwrap",children:"wordWrap"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#closebrackets",children:"closeBrackets"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#emmet",children:"emmet"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#editormode",children:"editorMode"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#semicolons",children:"semicolons"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#singlequote",children:"singleQuote"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#trailingcomma",children:"trailingComma"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"?theme=light&delay=500&lineNumbers=false\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Any value given for booleans except ",(0,s.jsx)(n.code,{children:'"false"'})," (including no value) will be considered ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Example: all these are considered ",(0,s.jsx)(n.code,{children:"true"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"?lite=true\n?lite=1\n?lite=any\n?lite\n"})}),"\n",(0,s.jsxs)(n.p,{children:["while this is considered ",(0,s.jsx)(n.code,{children:"false"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"?lite=false\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Parameters that expect array of values can be supplied with comma separated values. These include:\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#tags",children:"tags"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#languages",children:"languages"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#processors",children:"processors"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#stylesheets",children:"stylesheets"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#scripts",children:"scripts"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"?languages=html,md,css,ts\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Values set in the URL query parameters override those set in ",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Unlike ",(0,s.jsx)(n.a,{href:"/docs/features/user-settings",children:"user settings"})," that are set in the UI which are saved and subsequently used, those that are set in query parameters are not automatically saved."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Additional query parameters include:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"no-defaults"}),": ",(0,s.jsx)(n.code,{children:"boolean"})," (Default: ",(0,s.jsx)(n.code,{children:"false"}),")."]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", the app will not load the ",(0,s.jsx)(n.a,{href:"/docs/features/default-template-language",children:"default template/language"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"x"}),": ",(0,s.jsx)(n.code,{children:"string"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Alias to ",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#import",children:(0,s.jsx)(n.code,{children:"import"})})," (a URL to ",(0,s.jsx)(n.a,{href:"/docs/features/import",children:"import"}),")."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"files"}),": ",(0,s.jsx)(n.code,{children:"string"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["A comma-separated ",(0,s.jsx)(n.a,{href:"/docs/features/import#file-selection",children:"list of files to import"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"raw"}),": ",(0,s.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,s.jsx)(n.code,{children:"Language"})}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["When used with ",(0,s.jsx)(n.code,{children:"import"})," or ",(0,s.jsx)(n.code,{children:"x"}),", imports the URL as code of the provided language."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"language"}),": ",(0,s.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,s.jsx)(n.code,{children:"Language"})}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The language to load by default in the editor."}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"lang"}),": ",(0,s.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,s.jsx)(n.code,{children:"Language"})}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Alias to ",(0,s.jsx)(n.code,{children:"language"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"active"}),": ",(0,s.jsx)(n.code,{children:'"markup" | "style" | "script" | 0 | 1 | 2'}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Alias to ",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#activeeditor",children:(0,s.jsx)(n.code,{children:"activeEditor"})}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"tools"}),": ",(0,s.jsx)(n.code,{children:'"open" | "full" | "closed" | "console" | "compiled" | "tests" | "none"'})]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"/docs/features/tools-pane",children:"tools pane"})," status."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"console"}),": ",(0,s.jsx)(n.code,{children:'"open" | "full" | "closed" | "none"'})]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"/docs/features/console",children:"console"})," status."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"compiled"}),": ",(0,s.jsx)(n.code,{children:'"open" | "full" | "closed" | "none"'})]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"/docs/features/compiled-code",children:"compiled code viewer"})," status."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"tests"}),": ",(0,s.jsx)(n.code,{children:'"open" | "full" | "closed" | "none"'})]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"/docs/features/tests",children:"tests panel"})," status."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"scrollPosition"}),": ",(0,s.jsx)(n.code,{children:"boolean"})," (Default: ",(0,s.jsx)(n.code,{children:"true"}),")."]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"false"}),", the ",(0,s.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," ",(0,s.jsx)(n.a,{href:"/docs/features/result#scroll-position",children:"scroll position"})," will not be maintained after reload."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Any ",(0,s.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,s.jsx)(n.code,{children:"Language"})})," can used as a query parameter, and the value will be used as its code."]}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"https://livecodes.io?js=console.log('Hello World!')\n"})}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.admonition,{title:"Examples",type:"info",children:(0,s.jsxs)(n.p,{children:["For usage examples, check ",(0,s.jsx)(n.a,{href:"pathname:///../stories/?path=/story/embed-options-params--select-language",children:"storybook"})," and ",(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/__tests__/build-config.spec.ts",children:"unit tests"}),"."]})})]})}function u(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},3365:function(e,n,t){t.d(n,{Z:()=>j});var o=t("5893"),s=t("4200"),i=t("7294"),r=t("8294");function a(e){let n=(0,i.useRef)(null),[t,s]=(0,i.useState)(e.className||""),[a,c]=(0,i.useState)(e.style||{}),[l,d]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[f,g]=(0,i.useState)(JSON.stringify(e.config||"")),[p,j]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!n.current)return;let{className:t,style:o,height:i,sdkReady:a,config:l,...m}=e;if(s(t||""),c(o||{}),d(i),h&&p===JSON.stringify(m)){if(f===JSON.stringify(l))return;g(JSON.stringify(l)),"string"==typeof l?fetch(l).then(e=>e.json()).then(e=>{h?.setConfig(e)}):l&&h.setConfig(l)}else j(JSON.stringify(m)),h?.destroy(),(0,r.T)(n.current,{config:l,...m}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,o.jsx)("div",{ref:n,className:t,style:a,"data-height":l})}var c=t("1858"),l=t("3262"),d=t("1705"),h=t("7645"),u=t("8168"),f=t("8228"),g=t("5050");function p(e){let[n,t]=(0,i.useState)(e.js),[s,r]=(0,i.useState)(e.ts),[a,c]=(0,i.useState)(e.react),[p,j]=(0,i.useState)(e.vue),[m,x]=(0,i.useState)(e.svelte),y="3.7rem",[b,v]=(0,i.useState)(!0),[w,S]=(0,i.useState)(y),E=(0,i.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${y})`)},255)};return(0,i.useEffect)(()=>{if(l.Z.canUseDOM){let e=function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===n?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};t(e(n,"js")),r(e(s,"ts")),c(e(a,"jsx")),j(e(p,"html")),x(e(m,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${f.Z.details}`,"data-collapsed":b,style:{height:b?y:w,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{v(!b),C()},children:"show code"}),(0,o.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:g.Z.collapsibleContent,children:(0,o.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,o.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"js",children:n})}),(0,o.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"ts",children:s})}),(0,o.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"html",children:p})}),(0,o.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"html",children:m})})]})})})]})}function j(e){let{className:n,style:t,showCode:i,height:r,...l}=e,{colorMode:d}=(0,s.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(),g=`
import LiveCodes from 'livecodes/react';

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

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

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

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