"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5961"],{8930:function(e,n,s){s.r(n),s.d(n,{getPlaygroundUrlDemo:()=>h,sdkDemo:()=>p,default:()=>j,frontMatter:()=>d,metadata:()=>r,assets:()=>c,toc:()=>u,contentTitle:()=>a});var r=JSON.parse('{"id":"sdk/js-ts","title":"JS/TS SDK","description":"This is the core SDK on which others (React, Vue, and Svelte SDKs) are build on top. It is a light-weight (less than 5kb gzipped), zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds.","source":"@site/docs/sdk/js-ts.mdx","sourceDirName":"sdk","slug":"/sdk/js-ts","permalink":"/docs/sdk/js-ts","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/js-ts.mdx","tags":[],"version":"current","frontMatter":{"title":"JS/TS SDK"},"sidebar":"docsSidebar","previous":{"title":"LiveCodes SDK","permalink":"/docs/sdk/"},"next":{"title":"React SDK","permalink":"/docs/sdk/react"}}'),o=s("5893"),t=s("65"),l=s("3365"),i=s("8500");let d={title:"JS/TS SDK"},a="JavaScript/TypeScript SDK",c={},h={html:`<pre><code
class="language-markdown"># Hello World!</code></pre>
<a href="#" id="playground-link" target="_blank">Open in playground</a>
<script type="module">
  import { getPlaygroundUrl } from 'livecodes';
  const config = {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  };
  const url = getPlaygroundUrl({ config });
  document.querySelector('#playground-link').href = url;
</script>`},p={js:`import { createPlayground } from "livecodes";

const params = {
  html: "<h1>Hello World!</h1>",
  css: "h1 {color: blue;}",
  js: 'console.log("Hello, LiveCodes!")',
  console: "open",
};

createPlayground('#container', { params });
`,html:'<div id="container"></div>'},u=[{value:"Installation",id:"installation",level:2},{value:"TypeScript Types",id:"typescript-types",level:2},{value:"<code>createPlayground</code>",id:"createplayground",level:2},{value:"Multiple Sources",id:"multiple-sources",level:3},{value:"<code>getPlaygroundUrl</code>",id:"getplaygroundurl",level:2},{value:"Embed Options",id:"embed-options",level:2},{value:"<code>appUrl</code>",id:"appurl",level:3},{value:"<code>config</code>",id:"config",level:3},{value:"<code>headless</code>",id:"headless",level:3},{value:"<code>import</code>",id:"import",level:3},{value:"<code>loading</code>",id:"loading",level:3},{value:"<code>params</code>",id:"params",level:3},{value:"<code>template</code>",id:"template",level:3},{value:"SDK Methods",id:"sdk-methods",level:2},{value:"<code>load</code>",id:"load",level:3},{value:"<code>run</code>",id:"run",level:3},{value:"<code>format</code>",id:"format",level:3},{value:"<code>getShareUrl</code>",id:"getshareurl",level:3},{value:"<code>getConfig</code>",id:"getconfig",level:3},{value:"<code>setConfig</code>",id:"setconfig",level:3},{value:"<code>getCode</code>",id:"getcode",level:3},{value:"<code>show</code>",id:"show",level:3},{value:"<code>runTests</code>",id:"runtests",level:3},{value:"<code>watch</code>",id:"watch",level:3},{value:"<code>onChange</code>",id:"onchange",level:3},{value:"<code>exec</code>",id:"exec",level:3},{value:"<code>destroy</code>",id:"destroy",level:3},{value:"Styles",id:"styles",level:2},{value:"Default Styles",id:"default-styles",level:3},{value:"Height",id:"height",level:3},{value:"Demo",id:"demo",level:2},{value:"Related",id:"related",level:2}];function g(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsxs)(n.h1,{id:"javascripttypescript-sdk",children:["JavaScript/",(0,o.jsx)("wbr",{}),"TypeScript SDK"]})}),"\n","\n",(0,o.jsxs)(n.p,{children:["This is the core SDK on which others (",(0,o.jsx)(n.a,{href:"/docs/sdk/react",children:"React"}),", ",(0,o.jsx)(n.a,{href:"/docs/sdk/vue",children:"Vue"}),", and ",(0,o.jsx)(n.a,{href:"/docs/sdk/svelte",children:"Svelte"})," SDKs) are build on top. It is a light-weight (",(0,o.jsx)(n.a,{href:"https://bundlephobia.com/package/livecodes",children:"less than 5kb gzipped"}),"), zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds."]}),"\n",(0,o.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsxs)(n.p,{children:["Please refer to the ",(0,o.jsx)(n.a,{href:"/docs/sdk/#installation",children:"SDK installation"})," section."]}),"\n",(0,o.jsx)(n.admonition,{type:"info",children:(0,o.jsxs)(n.p,{children:["In the full ",(0,o.jsx)(n.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"}),", the JavaScript SDK is accessible via the global variable ",(0,o.jsx)(n.code,{children:"livecodes"}),", which can be interacted with in the browser console."]})}),"\n",(0,o.jsx)(n.h2,{id:"typescript-types",children:"TypeScript Types"}),"\n",(0,o.jsxs)(n.p,{children:["TypeScript types are ",(0,o.jsx)(n.a,{href:"/docs/api/globals",children:"documented here"})," and can be imported from the library."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"import type { EmbedOptions, Playground } from 'livecodes';\n"})}),"\n",(0,o.jsx)(n.p,{children:"The following 2 functions are exported by the library:"}),"\n",(0,o.jsx)(n.h2,{id:"createplayground",children:(0,o.jsx)(n.code,{children:"createPlayground"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/functions/createPlayground",children:(0,o.jsx)(n.code,{children:"(container: string | Element, options?: EmbedOptions) => Promise<Playground>"})})]}),"\n",(0,o.jsxs)(n.p,{children:["The library exports the function ",(0,o.jsx)(n.code,{children:"createPlayground"})," which has 2 parameters:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"container"})," (required): ",(0,o.jsx)(n.code,{children:"HTMLElement"})," or a string representing a CSS selector. This is the container where the playground is rendered.\nIf not found, an error is thrown (except in ",(0,o.jsx)(n.a,{href:"/docs/sdk/headless",children:"headless mode"}),", in which this parameter is optional and can be omitted)."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"options"})," (optional): an object with embed options (",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions",children:"EmbedOptions"}),")."]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"createPlayground"})," function returns a promise which resolves to an object that exposes the SDK methods (",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:"Playground"}),")."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"import { createPlayground, type EmbedOptions } from 'livecodes';\n\nconst options: EmbedOptions = {\n  // appUrl: ...\n  // config: ...\n  // headless: ...\n  // import: ...\n  // loading: ...\n  // params: ...\n  // template: ...\n};\n\ncreatePlayground('#container', options).then((playground) => {\n  // the `playground` object exposes the SDK methods\n  // e.g. playground.run()\n});\n"})}),"\n",(0,o.jsxs)(n.admonition,{title:"Throws",type:"caution",children:[(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"createPlayground"})," function throws an error (promise is rejected) in any of the following conditions:"]}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["The first parameter (",(0,o.jsx)(n.a,{href:"#createplayground",children:(0,o.jsx)(n.code,{children:"container"})}),") is not an element or not found (by CSS selector), except in ",(0,o.jsx)(n.a,{href:"/docs/sdk/headless",children:"headless mode"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:["The embed option ",(0,o.jsx)(n.a,{href:"#appurl",children:(0,o.jsx)(n.code,{children:"appUrl"})})," is supplied and is not a valid URL."]}),"\n",(0,o.jsxs)(n.li,{children:["The embed option ",(0,o.jsx)(n.a,{href:"#config",children:(0,o.jsx)(n.code,{children:"config"})})," is supplied and is not an object or a valid URL."]}),"\n",(0,o.jsxs)(n.li,{children:["Any of the ",(0,o.jsx)(n.a,{href:"#sdk-methods",children:"SDK methods"})," was called after calling the ",(0,o.jsx)(n.a,{href:"#destroy",children:(0,o.jsx)(n.code,{children:"destroy"})})," method."]}),"\n"]})]}),"\n",(0,o.jsx)(n.h3,{id:"multiple-sources",children:"Multiple Sources"}),"\n",(0,o.jsxs)(n.p,{children:["When multiple sources are provided in the ",(0,o.jsx)(n.a,{href:"#embed-options",children:"embed options"}),", each is converted to a ",(0,o.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," and the properties are merged.\nIn case there are conflicts between the properties of the configurations, they are overridden in the following order:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"#template",children:(0,o.jsx)(n.code,{children:"template"})})," (lowest precedence)"]}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"#import",children:(0,o.jsx)(n.code,{children:"import"})})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"#config",children:(0,o.jsx)(n.code,{children:"config"})})}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"#params",children:(0,o.jsx)(n.code,{children:"params"})})," (highest precedence)"]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"getplaygroundurl",children:(0,o.jsx)(n.code,{children:"getPlaygroundUrl"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/functions/getPlaygroundUrl",children:(0,o.jsx)(n.code,{children:"(options?: EmbedOptions) => string"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Gets the URL to playground (as a string) from the provided ",(0,o.jsx)(n.a,{href:"#embed-options",children:"options"}),". This can be useful for providing links to run code in playgrounds."]}),"\n",(0,o.jsx)(n.p,{children:"Example:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<pre><code class="language-markdown"># Hello World!</code></pre>\n<a href="#" id="playground-link" target="_blank">Open in playground</a>\n<script type="module">\n  // highlight-next-line\n  import { getPlaygroundUrl } from \'livecodes\';\n  const config = {\n    markup: {\n      language: \'markdown\',\n      content: \'# Hello World!\',\n    },\n  };\n  // highlight-next-line\n  const url = getPlaygroundUrl({ config });\n  document.querySelector(\'#playground-link\').href = url;\n<\/script>\n'})}),"\n","\n",(0,o.jsx)(i.Z,{params:h}),"\n",(0,o.jsx)(n.h2,{id:"embed-options",children:"Embed Options"}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions",children:(0,o.jsx)(n.code,{children:"EmbedOptions"})})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.a,{href:"#createplayground",children:(0,o.jsx)(n.code,{children:"createPlayground"})})," and ",(0,o.jsx)(n.a,{href:"#getplaygroundurl",children:(0,o.jsx)(n.code,{children:"getPlaygroundUrl"})})," functions accept an optional object that allows providing different options to the playground. This object can have the following optional properties:"]}),"\n",(0,o.jsx)(n.h3,{id:"appurl",children:(0,o.jsx)(n.code,{children:"appUrl"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions#appurl",children:(0,o.jsx)(n.code,{children:"string"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Default: ",(0,o.jsx)(n.code,{children:'"https://livecodes.io/"'})]}),"\n",(0,o.jsxs)(n.p,{children:["Allows loading the playground from a custom URL (e.g. a ",(0,o.jsx)(n.a,{href:"/docs/features/self-hosting",children:"self-hosted app"})," or a ",(0,o.jsx)(n.a,{href:"/docs/features/permanent-url",children:"permanent URL"}),")."]}),"\n",(0,o.jsx)(n.p,{children:"If supplied with an invalid URL, an error is thrown."}),"\n",(0,o.jsx)(n.h3,{id:"config",children:(0,o.jsx)(n.code,{children:"config"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions#config",children:(0,o.jsx)(n.code,{children:"string | Partial<Config>"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Default: ",(0,o.jsx)(n.code,{children:"{}"})]}),"\n",(0,o.jsxs)(n.p,{children:["A ",(0,o.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," or a URL to a JSON file representing a configuration object to load."]}),"\n",(0,o.jsx)(n.p,{children:"If supplied and is not an object or a valid URL, an error is thrown."}),"\n",(0,o.jsx)(n.h3,{id:"headless",children:(0,o.jsx)(n.code,{children:"headless"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions#headless",children:(0,o.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Default: ",(0,o.jsx)(n.code,{children:"false"})]}),"\n",(0,o.jsxs)(n.p,{children:["When set to ",(0,o.jsx)(n.code,{children:"true"}),", the playground is loaded in ",(0,o.jsx)(n.a,{href:"/docs/sdk/headless",children:"headless mode"}),"."]}),"\n",(0,o.jsx)(n.h3,{id:"import",children:(0,o.jsx)(n.code,{children:"import"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions#import",children:(0,o.jsx)(n.code,{children:"string"})})]}),"\n",(0,o.jsxs)(n.p,{children:["A resource to ",(0,o.jsx)(n.a,{href:"/docs/features/import",children:"import"})," (from any of the supported ",(0,o.jsx)(n.a,{href:"/docs/features/import#sources",children:"sources"}),")."]}),"\n",(0,o.jsx)(n.h3,{id:"loading",children:(0,o.jsx)(n.code,{children:"loading"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions#loading",children:(0,o.jsx)(n.code,{children:'"eager" | "lazy" | "click"'})})]}),"\n",(0,o.jsxs)(n.p,{children:["Default: ",(0,o.jsx)(n.code,{children:'"lazy"'})]}),"\n",(0,o.jsx)(n.p,{children:"Sets how the playground loads:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"eager"'}),": The playground loads immediately."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"lazy"'}),": A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"click"'}),': The playground does not load automatically. Instead, a "Click-to-load" screen is shown.']}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"params",children:(0,o.jsx)(n.code,{children:"params"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions#params",children:(0,o.jsx)(n.code,{children:"UrlQueryParams"})})]}),"\n",(0,o.jsxs)(n.p,{children:["An object that represents ",(0,o.jsx)(n.a,{href:"/docs/configuration/query-params",children:"URL Query parameters"}),", that can be used to configure the playground."]}),"\n",(0,o.jsx)(n.p,{children:"These 2 snippets produce similar output:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\n// use config\ncreatePlayground('#container', {\n  config: {\n    markup: {\n      language: 'markdown',\n      content: '# Hello World!',\n    },\n  },\n});\n\n// use params\ncreatePlayground('#container', { params: { md: '# Hello World!' } });\n"})}),"\n",(0,o.jsx)(n.h3,{id:"template",children:(0,o.jsx)(n.code,{children:"template"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions#template",children:(0,o.jsx)(n.code,{children:"TemplateName"})})]}),"\n",(0,o.jsxs)(n.p,{children:["A ",(0,o.jsx)(n.a,{href:"/docs/features/templates",children:"starter template"})," to load. Allowed valued can be found ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions#template",children:"here"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"sdk-methods",children:"SDK Methods"}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.a,{href:"#createplayground",children:(0,o.jsx)(n.code,{children:"createPlayground"})})," function returns a promise which resolves to an object (",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:(0,o.jsx)(n.code,{children:"Playground"})}),") that exposes some useful SDK methods that can be used to interact with the playground. These methods include:"]}),"\n",(0,o.jsx)(n.h3,{id:"load",children:(0,o.jsx)(n.code,{children:"load"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#load",children:(0,o.jsx)(n.code,{children:"() => Promise<void>"})})]}),"\n",(0,o.jsxs)(n.p,{children:["When the embed option ",(0,o.jsx)(n.code,{children:"loading"})," is set to ",(0,o.jsx)(n.code,{children:"click"}),', the playground is not loaded automatically. Instead, a screen is shown with "Click to load" button.\nCalling the SDK method ',(0,o.jsx)(n.code,{children:"load()"})," allows loading the playground."]}),"\n",(0,o.jsx)(n.p,{children:"If the playground was not loaded, calling any other method will load the playground first before executing."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  await playground.load();\n  // playground loaded\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"run",children:(0,o.jsx)(n.code,{children:"run"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#run",children:(0,o.jsx)(n.code,{children:"() => Promise<void>"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Runs the ",(0,o.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," (after any required compilation for code)."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  await playground.run();\n  // new result page is displayed\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"format",children:(0,o.jsx)(n.code,{children:"format"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#format",children:(0,o.jsx)(n.code,{children:"(allEditors?: boolean) => Promise<void>"})})]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.a,{href:"/docs/features/code-format",children:"Formats the code"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["By default, the code in all editors (markup, style and script) is formatted.\nIf you wish to format only the active editor, pass the value ",(0,o.jsx)(n.code,{children:"false"})," as an argument."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  await playground.format();\n  // code in editors is formatted\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"getshareurl",children:(0,o.jsx)(n.code,{children:"getShareUrl"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#getshareurl",children:(0,o.jsx)(n.code,{children:"(shortUrl?: boolean) => Promise<string>"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Gets a ",(0,o.jsx)(n.a,{href:"/docs/features/share",children:"share url"})," for the current project."]}),"\n",(0,o.jsxs)(n.p,{children:["By default, the url has a long query string representing the compressed encoded config object. If the argument ",(0,o.jsx)(n.code,{children:"shortUrl"})," was set to ",(0,o.jsx)(n.code,{children:"true"}),", a short url is generated."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  const longUrl = await playground.getShareUrl();\n  const shortUrl = await playground.getShareUrl(true);\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"getconfig",children:(0,o.jsx)(n.code,{children:"getConfig"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#getconfig",children:(0,o.jsx)(n.code,{children:"(contentOnly?: boolean) => Promise<Config>"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Gets a config object representing the playground state. This can be used to restore state if passed as ",(0,o.jsx)(n.a,{href:"#createplayground",children:"embed option"})," property on creating playground, or can be manipulated and loaded in run-time using ",(0,o.jsx)(n.a,{href:"#setconfig",children:(0,o.jsx)(n.code,{children:"setConfig"})})," method."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  const config = await playground.getConfig();\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"setconfig",children:(0,o.jsx)(n.code,{children:"setConfig"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#setconfig",children:(0,o.jsx)(n.code,{children:"(config: Partial<Config>) => Promise<Config>"})})]}),"\n",(0,o.jsx)(n.p,{children:"Loads a new project using the passed configuration object."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  const config = {\n    markup: {\n      language: 'html',\n      content: 'Hello World!',\n    },\n  };\n  const newConfig = await playground.setConfig(config);\n  // new project loaded\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"getcode",children:(0,o.jsx)(n.code,{children:"getCode"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#getcode",children:(0,o.jsx)(n.code,{children:"() => Promise<Code>"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Gets the playground code (including source code, source language and compiled code) for each editor (",(0,o.jsx)(n.code,{children:"markup"}),", ",(0,o.jsx)(n.code,{children:"style"}),", ",(0,o.jsx)(n.code,{children:"script"}),"), in addition to result page HTML."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  const code = await playground.getCode();\n\n  // source code, language and compiled code for the script editor\n  const { content, language, compiled } = code.script;\n\n  // result page HTML\n  const result = code.result;\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"show",children:(0,o.jsx)(n.code,{children:"show"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#show",children:(0,o.jsx)(n.code,{children:"(panel: 'editor' | 'markup' | 'style' | 'script' | 'console' | 'compiled' | 'tests' | 'result' | 'toggle-result', options?: { full?: boolean; line?: number; column?: number; zoom?: 1 | 0.5 | 0.25 }) => Promise<void>"})})]}),"\n",(0,o.jsx)(n.p,{children:"Shows the selected panel, which is either:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Active Editor: ",(0,o.jsx)(n.code,{children:"editor"})]}),"\n",(0,o.jsxs)(n.li,{children:["Specific Editor: ",(0,o.jsx)(n.code,{children:"markup"}),", ",(0,o.jsx)(n.code,{children:"style"})," or ",(0,o.jsx)(n.code,{children:"script"})]}),"\n",(0,o.jsxs)(n.li,{children:["Tool: ",(0,o.jsx)(n.code,{children:"console"}),", ",(0,o.jsx)(n.code,{children:"compiled"})," or ",(0,o.jsx)(n.code,{children:"tests"})]}),"\n",(0,o.jsxs)(n.li,{children:["Result page: ",(0,o.jsx)(n.code,{children:"result"})," or ",(0,o.jsx)(n.code,{children:"toggle-result"})]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"The second optional argument is an object:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["It may have the boolean property ",(0,o.jsx)(n.code,{children:"full"}),", which If ",(0,o.jsx)(n.code,{children:"true"}),", selected editor or result page will take the full vertical and horizontal space of the playground, while tools will take the full vertical and half the horizontal space, leaving some space for the active editor."]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["The optional properties ",(0,o.jsx)(n.code,{children:"line"})," and ",(0,o.jsx)(n.code,{children:"column"})," allow scrolling to line/column number in the shown editor."]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["The optional property ",(0,o.jsx)(n.code,{children:"zoom"})," sets the result page ",(0,o.jsx)(n.a,{href:"/docs/features/result#result-page-zoom",children:"zoom level"})," (the selected panel must be ",(0,o.jsx)(n.code,{children:"result"}),")."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  const delay = (duration) =>\n    new Promise((resolve) => {\n      setTimeout(resolve, duration);\n    });\n\n  await playground.show('toggle-result');\n  await delay(2000);\n  await playground.show('style');\n  await delay(2000);\n  await playground.show('result', { full: true });\n  await delay(2000);\n  await playground.show('script');\n  await delay(2000);\n  await playground.show('result', { zoom: 0.5 });\n  await delay(2000);\n  await playground.show('console', { full: true });\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"runtests",children:(0,o.jsx)(n.code,{children:"runTests"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#runtests",children:(0,o.jsx)(n.code,{children:"() => Promise<{ results: TestResult[] }>"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Runs project ",(0,o.jsx)(n.a,{href:"/docs/features/tests",children:"tests"})," (if present) and gets test results."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  const { results } = await playground.runTests();\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"watch",children:(0,o.jsx)(n.code,{children:"watch"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#watch",children:"docs"})]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"((event: 'load', fn: () => void) => { remove: () => void }) &\n((event: 'ready', fn: (data: { config: Config }) => void) => { remove: () => void }) &\n((event: 'code', fn: (data: { code: Code; config: Config }) => void) => { remove: () => void }) &\n((event: 'console', fn: (data: { method: string; args: any[] }) => void) => { remove: () => void }) &\n((event: 'tests', fn: (data: { results: TestResult[]; error?: string }) => void) => { remove: () => void }) &\n((event: 'destroy', fn: () => void) => { remove: () => void });\n"})}),"\n",(0,o.jsx)(n.p,{children:"Allows to watch for various playground events. It takes 2 arguments: event name and a callback function that will be called on every event."}),"\n",(0,o.jsx)(n.p,{children:"In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results)."}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"watch"})," method returns an object with a single method ",(0,o.jsx)(n.code,{children:"remove"}),", which when called will remove the callback from watching further events."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then((playground) => {\n  const codeWatcher = playground.watch('code', ({ code, config }) => {\n    // this will run on every code change\n    console.log('code:', code);\n    console.log('config:', config);\n  });\n\n  const consoleWatcher = playground.watch('console', ({ method, args }) => {\n    // this will run on every console output\n    console[method](...args);\n  });\n\n  const testsWatcher = playground.watch('tests', ({ results }) => {\n    // this will run when tests run\n    results.forEach((testResult) => {\n      console.log('status:', testResult.status); // \"pass\", \"fail\" or \"skip\"\n      console.log(testResult.errors); // array of errors as strings\n    });\n  });\n\n  // then later\n  codeWatcher.remove();\n  consoleWatcher.remove();\n  testsWatcher.remove();\n  // events are no longer watched\n});\n"})}),"\n",(0,o.jsx)(n.p,{children:"These are the events that can be watched and the description of their callback functions:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:'"load"'}),": Called when the playground first loads."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'(\n  event: "load",\n  fn: () => void\n) => { remove: () => void }\n'})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:'"ready"'}),": Called when a new project is loaded (including when ",(0,o.jsx)(n.a,{href:"/docs/features/import",children:"imported"}),") and the playground is ready to run."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'(\n  event: "ready",\n  fn: (data: { config: Config }) => void\n) => { remove: () => void }\n'})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:'"code"'}),': Called when the playground "content" is changed (see ',(0,o.jsx)(n.a,{href:"/docs/sdk/js-ts#getcode",children:(0,o.jsx)(n.code,{children:"getCode"})})," and ",(0,o.jsx)(n.a,{href:"/docs/sdk/js-ts#getconfig",children:(0,o.jsx)(n.code,{children:"getConfig"})}),")."]}),"\n",(0,o.jsx)(n.p,{children:"This includes changes in:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Code (in editors)"}),"\n",(0,o.jsx)(n.li,{children:"Editor languages"}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"/docs/features/css#css-processors",children:"CSS processors"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"/docs/features/external-resources",children:"External resources"})}),"\n",(0,o.jsxs)(n.li,{children:["Project info (e.g. allows adding content in page head and attributes to ",(0,o.jsx)(n.code,{children:"<html>"})," element)"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," (e.g. allows changing ",(0,o.jsx)(n.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"import maps"}),")"]}),"\n",(0,o.jsx)(n.li,{children:"Project title"}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"/docs/features/tests",children:"Test"})," code"]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'(\n  event: "code",\n  fn: (data: { code: Code; config: Config }) => void\n) => { remove: () => void }\n'})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:'"console"'}),": Called when the playground console gets new outputs. The callback method is passed an object with 2 properties: ",(0,o.jsx)(n.code,{children:'"method"'})," (e.g. ",(0,o.jsx)(n.code,{children:'"log"'}),", ",(0,o.jsx)(n.code,{children:'"error"'}),", etc.) and ",(0,o.jsx)(n.code,{children:'"args"'})," (the arguments passed to the method, as an array)."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'(\n  event: "console",\n  fn: (data: { method: string; args: any[] }) => void\n) => { remove: () => void }\n'})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:'"tests"'}),": Called when tests run and test results are available (see ",(0,o.jsx)(n.a,{href:"/docs/sdk/js-ts#runtests",children:(0,o.jsx)(n.code,{children:"runTests"})}),")."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'(\n  event: "tests",\n  fn: (data: { results: TestResult[]; error?: string }) => void\n) => { remove: () => void }\n'})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:'"destroy"'}),": Called when the playground is destroyed."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'(\n  event: "destroy",\n  fn: () => void\n) => { remove: () => void }\n'})}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"onchange",children:(0,o.jsx)(n.code,{children:"onChange"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Deprecated"}),": Use ",(0,o.jsx)(n.a,{href:"#watch",children:(0,o.jsx)(n.code,{children:"watch"})})," method instead."]}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#onchange",children:(0,o.jsx)(n.code,{children:"(fn: ChangeHandler) => { remove: () => void }"})})]}),"\n",(0,o.jsx)(n.p,{children:"Allows to watch the playground for changes. It takes a callback function that will be called on every change."}),"\n",(0,o.jsxs)(n.p,{children:["The callback function will be called with an object that has 2 properties: ",(0,o.jsx)(n.code,{children:"code"})," and ",(0,o.jsx)(n.code,{children:"config"}),", representing the current codes and configuration objects (see ",(0,o.jsx)(n.a,{href:"#getcode",children:(0,o.jsx)(n.code,{children:"getCode"})})," and ",(0,o.jsx)(n.a,{href:"#getconfig",children:(0,o.jsx)(n.code,{children:"getConfig"})}),")."]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"onChange"})," method returns an object with a single method ",(0,o.jsx)(n.code,{children:"remove"}),", which when called will remove the callback from watching changes."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then((playground) => {\n  const watcher = playground.onChange(({ code, config }) => {\n    // this will run on every code change\n    console.log('code:', code);\n    console.log('config:', config);\n  });\n\n  // then later\n  watcher.remove();\n  // changes are no longer watched\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"exec",children:(0,o.jsx)(n.code,{children:"exec"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#exec",children:(0,o.jsx)(n.code,{children:"(command: APICommands, ...args: any[]) => Promise<{ output: any } | { error: string }>"})})]}),"\n",(0,o.jsx)(n.p,{children:"Execute custom commands, including:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"setBroadcastToken"'}),": Sets ",(0,o.jsxs)(n.a,{href:"/docs/features/broadcast#technical-details",children:["broadcast ",(0,o.jsx)(n.code,{children:"userToken"})]}),"."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"// in browser console of full app (e.g. https://livecodes.io)\nawait livecodes.exec('setBroadcastToken', 'my-token');\n"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"showVersion"'}),": Logs the current LiveCodes app version, SDK version, git commit SHA, ",(0,o.jsx)(n.a,{href:"/docs/features/permanent-url",children:"permanent app URL"})," and SDK URL in the browser console."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"// in browser console of full app (e.g. https://livecodes.io)\nawait livecodes.exec('showVersion');\n"})}),"\n",(0,o.jsx)(n.h3,{id:"destroy",children:(0,o.jsx)(n.code,{children:"destroy"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground#destroy",children:(0,o.jsx)(n.code,{children:"() => Promise<void>"})})]}),"\n",(0,o.jsx)(n.p,{children:"Destroys the playground instance, and removes event listeners. Further call to any SDK methods throws an error."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container').then(async (playground) => {\n  await playground.destroy();\n  // playground destroyed\n  // any further SDK call throws an error\n});\n"})}),"\n",(0,o.jsx)(n.h2,{id:"styles",children:"Styles"}),"\n",(0,o.jsx)(n.h3,{id:"default-styles",children:"Default Styles"}),"\n",(0,o.jsxs)(n.p,{children:["By default, the container element is styled when the SDK is initialized (including width, height, border, etc.). To disable default styles, set the container element attribute ",(0,o.jsx)(n.code,{children:"data-default-styles"})," to ",(0,o.jsx)(n.code,{children:'"false"'})," before initializing."]}),"\n",(0,o.jsx)(n.p,{children:"Example:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<div id="container" data-default-styles="false" class="custom"></div>\n<script type="module">\n  import { createPlayground } from \'livecodes\';\n  createPlayground(\'#container\');\n<\/script>\n'})}),"\n",(0,o.jsx)(n.h3,{id:"height",children:"Height"}),"\n",(0,o.jsxs)(n.p,{children:["By default, the playground container height is set to ",(0,o.jsx)(n.code,{children:'"300px"'}),". To change the height, either disable the default styles and override them, or simply set the ",(0,o.jsx)(n.code,{children:"data-height"})," attribute to a number (in pixels) or any valid CSS value (e.g. ",(0,o.jsx)(n.code,{children:'"100%"'})," to take the full height of its parent element)."]}),"\n",(0,o.jsx)(n.p,{children:"Example:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<div id="container" data-height="500"></div>\n<script type="module">\n  import { createPlayground } from \'livecodes\';\n  createPlayground(\'#container\');\n<\/script>\n'})}),"\n",(0,o.jsx)(n.h2,{id:"demo",children:"Demo"}),"\n","\n",(0,o.jsx)(l.Z,{params:p,height:"80vh"}),"\n",(0,o.jsx)(n.h2,{id:"related",children:"Related"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"/docs/sdk/react",children:"React SDK"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"/docs/sdk/vue",children:"Vue SDK"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"/docs/sdk/svelte",children:"Using SDK in Svelte"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"/docs/features/embeds",children:"Embedded Playgrounds"})}),"\n"]})]})}function j(e={}){let{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(g,{...e})}):g(e)}},3365:function(e,n,s){s.d(n,{Z:()=>x});var r=s("5893"),o=s("4200"),t=s("7294"),l=s("8294");function i(e){let n=(0,t.useRef)(null),[s,o]=(0,t.useState)(e.className||""),[i,d]=(0,t.useState)(e.style||{}),[a,c]=(0,t.useState)(e.height),[h,p]=(0,t.useState)(),[u,g]=(0,t.useState)(JSON.stringify(e.config||"")),[j,x]=(0,t.useState)("");return(0,t.useEffect)(()=>{if(!n.current)return;let{className:s,style:r,height:t,sdkReady:i,config:a,...m}=e;if(o(s||""),d(r||{}),c(t),h&&j===JSON.stringify(m)){if(u===JSON.stringify(a))return;g(JSON.stringify(a)),"string"==typeof a?fetch(a).then(e=>e.json()).then(e=>{h?.setConfig(e)}):a&&h.setConfig(a)}else x(JSON.stringify(m)),h?.destroy(),(0,l.T)(n.current,{config:a,...m}).then(e=>{p(e),"function"==typeof i&&i(e)})},[e]),(0,t.useEffect)(()=>()=>{h?.destroy()},[]),(0,r.jsx)("div",{ref:n,className:s,style:i,"data-height":a})}var d=s("1858"),a=s("3262"),c=s("1705"),h=s("7645"),p=s("8168"),u=s("8228"),g=s("5050");function j(e){let[n,s]=(0,t.useState)(e.js),[o,l]=(0,t.useState)(e.ts),[i,d]=(0,t.useState)(e.react),[j,x]=(0,t.useState)(e.vue),[m,f]=(0,t.useState)(e.svelte),y="3.7rem",[v,w]=(0,t.useState)(!0),[b,P]=(0,t.useState)(y),S=(0,t.useRef)(null),k=()=>{setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${y})`)},255)};return(0,t.useEffect)(()=>{if(a.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}};s(e(n,"js")),l(e(o,"ts")),d(e(i,"jsx")),x(e(j,"html")),f(e(m,"html"))}},[]),(0,r.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${u.Z.details}`,"data-collapsed":v,style:{height:v?y:b,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,r.jsx)("summary",{onClick:()=>{w(!v),k()},children:"show code"}),(0,r.jsx)("div",{ref:S,style:{display:"block",overflow:"hidden"},children:(0,r.jsx)("div",{className:g.Z.collapsibleContent,children:(0,r.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,r.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"js",children:n})}),(0,r.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"ts",children:o})}),(0,r.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"jsx",children:i})}),(0,r.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"html",children:j})}),(0,r.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"html",children:m})})]})})})]})}function x(e){let{className:n,style:s,showCode:t,height:l,...a}=e,{colorMode:c}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),p=`
import { createPlayground } from 'livecodes';

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

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

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

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

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

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

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

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

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

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

`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i,{className:`container_Egsj ${e.className}`,style:{height:l||"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,r.jsx)(j,{js:p,ts:u,react:g,vue:x,svelte:m})]})}},8500:function(e,n,s){s.d(n,{Z:()=>a});var r=s("5893");s("7294");var o=s("6735");function t(e){let{children:n,fallback:s}=e;return(0,o.Z)()?(0,r.jsx)(r.Fragment,{children:n?.()}):s??null}var l=s("1705"),i=s("8294"),d=s("1858");function a(e){let{params:n,config:s,code:o,language:a="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:p=!0,linkText:u="Run in LiveCodes",style:g={},className:j=""}=e,x=(0,i.r)({appUrl:d.G,params:n,config:s});return(0,r.jsxs)("div",{style:{marginBottom:"30px",...g},className:j,children:[o&&(0,r.jsx)(t,{children:()=>(0,r.jsx)(l.Z,{language:a,title:c,showLineNumbers:h,children:p?function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===n?"html":"babel",plugins:window.prettierPlugins})}(o,a):o})}),(0,r.jsxs)("a",{href:x,target:"_blank",rel:"noreferrer",children:[u,(0,r.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,r.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,n,s){s.d(n,{T:function(){return o},r:function(){return t}});var r=s(7728);async function o(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:s={},headless:r,loading:o="lazy",view:l}=n,i=r||"headless"===l,d=null,a=null;if("string"==typeof e)d=document.querySelector(e);else if(e instanceof HTMLElement)d=e;else if(!(i&&"object"==typeof e))throw Error("A valid container element is required.");if(!d){if(i)S(d=document.createElement("div")),document.body.appendChild(d);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(t(n)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",i?"eager":o),c.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let p=n.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 u=!1,g="Cannot call API methods after calling `destroy()`.",j=await new Promise(e=>{if(!d)return;let n=d.dataset.height||d.style.height;if(n&&!i){let e=isNaN(Number(n))?n:n+"px";d.style.height=e}"false"===d.dataset.defaultStyles||i||(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 r="livecodes",t=d.querySelector(`iframe.${r}`),l=t||document.createElement("iframe");l.classList.add(r),l.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),l.setAttribute("allowtransparency","true"),l.setAttribute("allowpaymentrequest","true"),l.setAttribute("allowfullscreen","true"),l.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),l.setAttribute("loading","eager"===o?"eager":"lazy"),i?S(l):(l.style.height="100%",l.style.minHeight="200px",l.style.width="100%",l.style.margin="0",l.style.border="0",l.style.borderRadius=d.style.borderRadius),addEventListener("message",function e(n){n.source===l.contentWindow&&n.origin===h&&n.data?.type==="livecodes-init"&&(removeEventListener("message",e),a=Number(n.data.payload.appVersion.replace(/^v/,"")))}),(!a||a<46)&&addEventListener("message",function e(n){n.source===l.contentWindow&&n.origin===h&&n.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),l.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),l.onload=()=>{e(l)},l.src=c.href,t||d.appendChild(l)}),x=new Promise(e=>{addEventListener("message",function n(s){s.source===j.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",n),e(),x.settled=!0)})}),m=()=>u?Promise.reject(g):new Promise(async e=>{x.settled&&e(),j.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),f=(e,n)=>new Promise(async(s,r)=>{if(u)return r(g);await m();let o=k();addEventListener("message",function n(t){if(t.source===j.contentWindow&&t.origin===h&&t.data?.type==="livecodes-api-response"&&t.data?.id===o&&t.data.method===e){removeEventListener("message",n);let e=t.data.payload;e?.error?r(e.error):s(e)}}),j.contentWindow?.postMessage({method:e,id:o,args:n},h)}),y={},v=["load","ready","code","console","tests","destroy"],w=(e,n)=>{if(u)throw Error(g);return v.includes(e)?(f("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(n),{remove:()=>{y[e]=y[e]?.filter(e=>e!==n),y[e]?.length===0&&f("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},b=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=b(e.data?.type??"");if(e.source!==j.contentWindow||e.origin!==h||!n||!y[n])return;let s=e.data?.payload;y[n]?.forEach(e=>{e(s)})});let P=()=>{Object.values(y).forEach(e=>{e.length=0}),j?.remove?.(),u=!0};function S(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,n)=>{e.forEach(async e=>{e.isIntersecting&&(await m(),n.unobserve(d))})},{rootMargin:"150px"}).observe(d);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>m(),run:()=>f("run"),format:e=>f("format",[e]),getShareUrl:e=>f("getShareUrl",[e]),getConfig:e=>f("getConfig",[e]),setConfig:e=>f("setConfig",[e]),getCode:()=>f("getCode"),show:(e,n)=>f("show",[e,n]),runTests:()=>f("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var n=arguments.length,s=Array(n>1?n-1:0),r=1;r<n;r++)s[r-1]=arguments[r];return f("exec",[e,...s])},destroy:()=>x.settled?f("destroy").then(P):u?Promise.reject(g):(P(),Promise.resolve())}}function t(){let e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:t={},headless:l,import:i,lite:d,view:a,...c}=n;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(n=>{let[s,r]=n;void 0!==r&&e.searchParams.set(s,String(r))});let p="headless"===n.view||l;if(d&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof t&&null==t.mode?t.mode="lite":e.searchParams.set("lite","true")),a&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof t&&null==t.view&&"headless"!==a?t.view=a:e.searchParams.set("view",a)),"string"==typeof t)try{new URL(t),e.searchParams.set("config",encodeURIComponent(t))}catch{throw Error('"config" is not a valid URL or configuration object.')}else t&&"object"==typeof t&&Object.keys(t).length>0&&(t.title&&"Untitled Project"!==t.title&&e.searchParams.set("title",t.title),t.description&&t.description.length>0&&e.searchParams.set("description",t.description),h.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(t))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(n=>{e.searchParams.set(n,encodeURIComponent(String(o[n])))})}return i&&e.searchParams.set("x",encodeURIComponent(i)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,n,s){s.d(n,{Z:function(){return i},a:function(){return l}});var r=s(7294);let o={},t=r.createContext(o);function l(e){let n=r.useContext(t);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]);