"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9723"],{8663:function(e,t,n){n.r(t),n.d(t,{default:()=>p,frontMatter:()=>a,customModules:()=>c,assets:()=>d,metadata:()=>s,toc:()=>h,contentTitle:()=>l});var s=JSON.parse('{"id":"features/intellisense","title":"IntelliSense","description":"The code editor provides a rich experience with intellisense and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files.","source":"@site/docs/features/intellisense.mdx","sourceDirName":"features","slug":"/features/intellisense","permalink":"/docs/features/intellisense","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/intellisense.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Module Resolution","permalink":"/docs/features/module-resolution"},"next":{"title":"AI Code Assistant \uD83E\uDE84","permalink":"/docs/features/ai"}}'),r=n("5893"),o=n("65"),i=n("3365");let a={},l="IntelliSense",d={},c={editor:"monaco",activeEditor:"script",script:{language:"typescript",content:"import { Greeter } from 'my-greeter';\n\nconst greeter = new Greeter();\n// now `greeter` has autocomplete\n\ndocument.body.innerText = greeter.morning();\n\n// this should show error in the editor\n// Property 'morningGreetings' is private and only accessible within class 'Greeter'\nconsole.log(greeter.morningGreetings);"},imports:{"my-greeter":"data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNsYXNzIEdyZWV0ZXIgew0KICAgIGNvbnN0cnVjdG9yKCkgew0KICAgICAgICB0aGlzLm1vcm5pbmdHcmVldGluZ3MgPSBbJ0dvb2QgbW9ybmluZycsICdIYXZlIGEgZ29vZCBkYXknLCAnSG93IGFyZSB5b3UgdG9kYXk/J107DQogICAgICAgIHRoaXMuZXZlbmluZ0dyZWV0aW5ncyA9IFsnR29vZCBldmVuaW5nJywgJ0dvb2QgbmlnaHQnLCAnU2xlZXAgd2VsbCddOw0KICAgIH0NCiAgICByYW5kb21TZWxlY3RvcihhcnJheSkgew0KICAgICAgICByZXR1cm4gYXJyYXlbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogYXJyYXkubGVuZ3RoKV07DQogICAgfQ0KICAgIG1vcm5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMubW9ybmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KICAgIGV2ZW5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMuZXZlbmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KfQ0K"},types:{"my-greeter":"data:text/typescript;charset=UTF-8;base64,ZXhwb3J0IGRlY2xhcmUgY2xhc3MgR3JlZXRlciB7DQogIHByaXZhdGUgbW9ybmluZ0dyZWV0aW5nczsNCiAgcHJpdmF0ZSBldmVuaW5nR3JlZXRpbmdzOw0KICBwcml2YXRlIHJhbmRvbVNlbGVjdG9yOw0KICBtb3JuaW5nKCk6IHN0cmluZzsNCiAgZXZlbmluZygpOiBzdHJpbmc7DQp9DQo="}},h=[{value:"Types for imported npm packages",id:"types-for-imported-npm-packages",level:2},{value:"TypeScript TwoSlash",id:"typescript-twoslash",level:2},{value:"Custom Types",id:"custom-types",level:2},{value:"Demo",id:"demo",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",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:"intellisense",children:"IntelliSense"})}),"\n","\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.a,{href:"/docs/features/editor-settings#code-editor",children:"code editor"})," provides a rich experience with ",(0,r.jsx)(t.a,{href:"https://code.visualstudio.com/docs/editor/intellisense",children:"intellisense"})," and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files."]}),"\n",(0,r.jsx)(t.p,{children:"This not only works when the editor language is TypeScript, but also works with others like JavaScript and JSX."}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Autocomplete",src:n(6368).Z+"",width:"1127",height:"621"})}),"\n",(0,r.jsx)(t.h2,{id:"types-for-imported-npm-packages",children:"Types for imported npm packages"}),"\n",(0,r.jsx)(t.p,{children:"LiveCodes will try to automatically find type definitions for npm modules imported in the editor."}),"\n",(0,r.jsx)(t.p,{children:"These are examples for automatically loading React types with autocomplete and hover info:"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:n(9203).Z+"",width:"1128",height:"754"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:n(313).Z+"",width:"1126",height:"713"})}),"\n",(0,r.jsx)(t.h2,{id:"typescript-twoslash",children:"TypeScript TwoSlash"}),"\n",(0,r.jsxs)(t.p,{children:["The code editor supports ",(0,r.jsx)(t.a,{href:"https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher",children:"TypeScript TwoSlash"}),". This can be very useful for debugging, sharing and teaching TypeScript."]}),"\n",(0,r.jsxs)(t.p,{children:["This is supported in ",(0,r.jsx)(t.a,{href:"/docs/languages/javascript",children:"JavaScript"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,r.jsx)(t.a,{href:"/docs/languages/tsx",children:"TSX"}),". This also includes ",(0,r.jsx)(t.a,{href:"/docs/languages/babel",children:"Babel"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/sucrase",children:"Sucrase"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/solid",children:"Solid"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/react-native",children:"React Native"}),", etc."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.img,{alt:"TypeScript TwoSlash",src:n(258).Z+"",width:"1150",height:"878"})," "]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.img,{alt:"TwoSlash in JSX",src:n(9481).Z+"",width:"1147",height:"939"})," "]}),"\n",(0,r.jsx)(t.h2,{id:"custom-types",children:"Custom Types"}),"\n",(0,r.jsx)(t.p,{children:"If no type definitions are found, or if you want to provide your own (e.g. for a module that is not hosted on npm), custom type definition files can be used."}),"\n",(0,r.jsxs)(t.p,{children:["In the standalone app, these can be provided in ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," using the ",(0,r.jsx)(t.code,{children:"types"})," property. This takes an object with the key representing the module name and the value representing the URL of the file."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "types": {\n "my-module": "https://cdn.jsdelivr.net/npm/my-module@1.0.0/types/my-module.d.ts",\n "my-other-module": "https://my-website.com/my-other-module/my-other-module.d.ts"\n }\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["For embedded playgrounds, these can be provided in the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," using the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#types",children:(0,r.jsx)(t.code,{children:"types"})})," property."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be combined with the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#imports",children:(0,r.jsx)(t.code,{children:"imports"})})," property to provide ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"importmap"})," for runtime implementation of your custom modules."]}),"\n",(0,r.jsxs)(t.p,{children:["This is an example of how to create a playground that provides the implementation of the custom module: ",(0,r.jsx)(t.code,{children:"my-module"})," and its type definition to provide editor intellisense:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\nconst config = {\n activeEditor: 'script',\n script: {\n language: 'javascript',\n content: `import { foo } from 'my-module';\\n\\nconsole.log(foo());`\n };\n imports: {\n 'my-module': 'https://my-website.com/my-module/index.js',\n },\n types: {\n 'my-module': 'https://my-website.com/my-module/my-module.d.ts',\n },\n};\n\ncreatePlayground('#container', {config});\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Please note that the URLs used for ",(0,r.jsx)(t.code,{children:"types"})," and ",(0,r.jsx)(t.code,{children:"imports"})," properties may be full URLs or ",(0,r.jsx)(t.a,{href:"/docs/features/data-urls",children:"data URLs"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"This can be of great use for library authors who want to provide playgrounds for documenting their libraries that are not (yet) published to npm."}),"\n",(0,r.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,r.jsx)(t.p,{children:"Let's assume we have this TypeScript module:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="Greeter.ts"',children:"export class Greeter {\n private morningGreetings = ['Good morning', 'Have a good day', 'How are you today?'];\n private eveningGreetings = ['Good evening', 'Good night', 'Sleep well'];\n\n private randomSelector(array: string[]) {\n return array[Math.floor(Math.random() * array.length)];\n }\n\n public morning() {\n return this.randomSelector(this.morningGreetings);\n }\n\n public evening() {\n return this.randomSelector(this.eveningGreetings);\n }\n}\n"})}),"\n",(0,r.jsx)(t.p,{children:"which compiles to this JavaScript:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="Greeter.js"',children:"export class Greeter {\n constructor() {\n this.morningGreetings = ['Good morning', 'Have a good day', 'How are you today?'];\n this.eveningGreetings = ['Good evening', 'Good night', 'Sleep well'];\n }\n randomSelector(array) {\n return array[Math.floor(Math.random() * array.length)];\n }\n morning() {\n return this.randomSelector(this.morningGreetings);\n }\n evening() {\n return this.randomSelector(this.eveningGreetings);\n }\n}\n"})}),"\n",(0,r.jsx)(t.p,{children:"and this type definition:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="Greeter.d.ts"',children:"export declare class Greeter {\n private morningGreetings;\n private eveningGreetings;\n private randomSelector;\n morning(): string;\n evening(): string;\n}\n"})}),"\n",(0,r.jsxs)(t.p,{children:["The JavaScript output (Greeter.js) and the data definition file (Greeter.d.ts) should be hosted online or converted to data URLs (see ",(0,r.jsx)(t.a,{href:"/docs/features/assets",children:"assets"})," and ",(0,r.jsx)(t.a,{href:"/docs/features/data-urls",children:"data URLs"}),")."]}),"\n",(0,r.jsx)(t.p,{children:"Then, they can be used like that:"}),"\n","\n",(0,r.jsx)(i.Z,{config:c,height:"80vh"}),"\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/features/module-resolution",children:"Module Resolution"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/data-urls",children:"Data Urls"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/assets",children:"Assets"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom Settings"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"Configuration Object"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},6368:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/autocomplete-54ec86de500afd076e2948246f4bf434.jpg"},9203:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/intellisense-1-bbc692078d1b88aaf8d2be72beb49849.jpg"},313:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/intellisense-2-ffdab70d10948aa165e3332a58d37827.jpg"},9481:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/twoslash-jsx-dce9c452f6f57be25c0145a3471c25d9.jpg"},258:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/twoslash-129fce4a76fef85f9c655b3d0278c216.jpg"},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),r=n("4200"),o=n("7294"),i=n("8294");function a(e){let t=(0,o.useRef)(null),[n,r]=(0,o.useState)(e.className||""),[a,l]=(0,o.useState)(e.style||{}),[d,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:o,sdkReady:a,config:d,...y}=e;if(r(n||""),l(s||{}),c(o),h&&g===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 f(JSON.stringify(y)),h?.destroy(),(0,i.T)(t.current,{config:d,...y}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[a,l]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[y,v]=(0,o.useState)(e.svelte),b="3.7rem",[j,x]=(0,o.useState)(!0),[w,S]=(0,o.useState)(b),C=(0,o.useRef)(null),Z=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},255)};return(0,o.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}};n(e(t,"js")),i(e(r,"ts")),l(e(a,"jsx")),f(e(g,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?b:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{x(!j),Z()},children:"show code"}),(0,s.jsx)("div",{ref:C,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:Z},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"ts",children:r})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function f(e){let{className:t,style:n,showCode:o,height:i,...d}=e,{colorMode:c}=(0,r.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 (); } `.trimStart(),f=` `,y=`
`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:y})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return o}});var s=n(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:n={},headless:s,loading:r="lazy",view:i}=t,a=s||"headless"===i,l=null,d=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)Z(l=document.createElement("div")),document.body.appendChild(l);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 n&&Object.keys(n).length>0&&c.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=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="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 s="livecodes",o=l.querySelector(`iframe.${s}`),i=o||document.createElement("iframe");i.classList.add(s),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?Z(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===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===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=c.href,o||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>m?Promise.reject(g):new Promise(async e=>{y.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await y,e()}),b=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await v();let r=I();addEventListener("message",function t(o){if(o.source===f.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?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),j={},x=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return x.includes(e)?(b("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[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!==f.contentWindow||e.origin!==h||!t||!j[t])return;let n=e.data?.payload;j[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function Z(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 v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let I=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),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,n=Array(t>1?t-1:0),s=1;sy.settled?b("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:o={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||i;if(l&&(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")),d&&(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"!==d?o.view=d:e.searchParams.set("view",d)),"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,s.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,s.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,n){n.d(t,{Z:function(){return a},a:function(){return i}});var s=n(7294);let r={},o=s.createContext(r);function i(e){let t=s.useContext(o);return s.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),s.createElement(o.Provider,{value:t},e.children)}}}]);