1 line
30 KiB
JavaScript
1 line
30 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4001"],{5361:function(e,n,r){r.r(n),r.d(n,{default:()=>h,frontMatter:()=>l,metadata:()=>s,assets:()=>o,toc:()=>t,contentTitle:()=>c});var s=JSON.parse('{"id":"api/interfaces/Playground","title":"Interface: Playground","description":"An object that represents the LiveCodes playground instance.","source":"@site/docs/api/interfaces/Playground.md","sourceDirName":"api/interfaces","slug":"/api/interfaces/Playground","permalink":"/docs/api/interfaces/Playground","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/interfaces/Playground.md","tags":[],"version":"current","frontMatter":{}}'),d=r("5893"),i=r("65");let l={},c="Interface: Playground",o={},t=[{value:"Extends",id:"extends",level:2},{value:"Properties",id:"properties",level:2},{value:"destroy()",id:"destroy",level:3},{value:"Returns",id:"returns",level:4},{value:"Example",id:"example",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"exec()",id:"exec",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"format()",id:"format",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Example",id:"example-1",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"getCode()",id:"getcode",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Example",id:"example-2",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"getConfig()",id:"getconfig",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-4",level:4},{value:"Example",id:"example-3",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"getShareUrl()",id:"getshareurl",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-5",level:4},{value:"Example",id:"example-4",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"load()",id:"load",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"<del>onChange()</del>",id:"onchange",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-7",level:4},{value:"<del>remove()</del>",id:"remove",level:5},{value:"Returns",id:"returns-8",level:6},{value:"Deprecated",id:"deprecated",level:4},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"run()",id:"run",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Example",id:"example-5",level:4},{value:"Inherited from",id:"inherited-from-7",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"runTests()",id:"runtests",level:3},{value:"Returns",id:"returns-10",level:4},{value:"results",id:"results",level:5},{value:"Example",id:"example-6",level:4},{value:"Inherited from",id:"inherited-from-8",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"setConfig()",id:"setconfig",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Example",id:"example-7",level:4},{value:"Inherited from",id:"inherited-from-9",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"show()",id:"show",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-12",level:4},{value:"Example",id:"example-8",level:4},{value:"Inherited from",id:"inherited-from-10",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"watch",id:"watch",level:3},{value:"Example",id:"example-9",level:4},{value:"Inherited from",id:"inherited-from-11",level:4},{value:"Defined in",id:"defined-in-12",level:4}];function a(e){let n={a:"a",blockquote:"blockquote",code:"code",del:"del",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"interface-playground",children:"Interface: Playground"})}),"\n",(0,d.jsx)(n.p,{children:"An object that represents the LiveCodes playground instance."}),"\n",(0,d.jsxs)(n.p,{children:["The object exposes multiple ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts/#sdk-methods",children:"methods"})," that can be used to interact with the playground."]}),"\n",(0,d.jsxs)(n.p,{children:["See ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts",children:"docs"})," for details."]}),"\n",(0,d.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})})}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,d.jsx)(n.h3,{id:"destroy",children:"destroy()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"destroy"}),": () => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Destroys the playground instance, and removes event listeners."}),"\n",(0,d.jsx)(n.p,{children:"Further call to any SDK methods throws an error."}),"\n",(0,d.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",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,d.jsx)(n.h4,{id:"inherited-from",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#destroy",children:(0,d.jsx)(n.code,{children:"destroy"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:211"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"exec",children:"exec()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"exec"}),": (",(0,d.jsx)(n.code,{children:"command"}),", ...",(0,d.jsx)(n.code,{children:"args"}),") => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"object"})," | ",(0,d.jsx)(n.code,{children:"object"}),">"]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Executes custom commands, including: ",(0,d.jsx)(n.code,{children:'"setBroadcastToken"'})," and ",(0,d.jsx)(n.code,{children:'"showVersion"'}),"."]}),"\n",(0,d.jsxs)(n.p,{children:["See ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#exec",children:"docs"})," for details."]}),"\n",(0,d.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"command"}),": ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/APICommands",children:(0,d.jsx)(n.code,{children:"APICommands"})})]}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ...",(0,d.jsx)(n.strong,{children:"args"}),": ",(0,d.jsx)(n.code,{children:"any"}),"[]"]}),"\n",(0,d.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"object"})," | ",(0,d.jsx)(n.code,{children:"object"}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"inherited-from-1",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#exec",children:(0,d.jsx)(n.code,{children:"exec"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:194"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"format",children:"format()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"format"}),": (",(0,d.jsx)(n.code,{children:"allEditors"}),"?) => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Formats the code."}),"\n",(0,d.jsxs)(n.p,{children:["By default, the code in all editors (markup, style and script) is formatted.\nTo format only the active editor, the value ",(0,d.jsx)(n.code,{children:"false"})," should be passed as an argument."]}),"\n",(0,d.jsx)(n.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"allEditors?"}),": ",(0,d.jsx)(n.code,{children:"boolean"})]}),"\n",(0,d.jsx)(n.h4,{id:"returns-2",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"example-1",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",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,d.jsx)(n.h4,{id:"inherited-from-2",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#format",children:(0,d.jsx)(n.code,{children:"format"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:31"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"getcode",children:"getCode()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"getCode"}),": () => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.a,{href:"/docs/api/interfaces/Code",children:(0,d.jsx)(n.code,{children:"Code"})}),">"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML."}),"\n",(0,d.jsxs)(n.p,{children:["See ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/api/interfaces/Code",children:"Code"})," for the structure of the returned object."]}),"\n",(0,d.jsx)(n.h4,{id:"returns-3",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.a,{href:"/docs/api/interfaces/Code",children:(0,d.jsx)(n.code,{children:"Code"})}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"example-2",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",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,d.jsx)(n.h4,{id:"inherited-from-3",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#getcode",children:(0,d.jsx)(n.code,{children:"getCode"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:105"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"getconfig",children:"getConfig()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"getConfig"}),": (",(0,d.jsx)(n.code,{children:"contentOnly"}),"?) => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,d.jsx)(n.code,{children:"Config"})}),">"]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Gets a ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object",children:"configuration object"})," representing the playground state."]}),"\n",(0,d.jsxs)(n.p,{children:["This can be used to restore state if passed as an ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#embed-options",children:"EmbedOptions"})," property when ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts/#createplayground",children:"creating playgrounds"}),",\nor can be manipulated and loaded in run-time using ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#setconfig",children:(0,d.jsx)(n.code,{children:"setConfig"})})," method."]}),"\n",(0,d.jsx)(n.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"contentOnly?"}),": ",(0,d.jsx)(n.code,{children:"boolean"})]}),"\n",(0,d.jsx)(n.h4,{id:"returns-4",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,d.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"example-3",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const config = await playground.getConfig();\n});\n'})}),"\n",(0,d.jsx)(n.h4,{id:"inherited-from-4",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#getconfig",children:(0,d.jsx)(n.code,{children:"getConfig"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:64"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"getshareurl",children:"getShareUrl()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"getShareUrl"}),": (",(0,d.jsx)(n.code,{children:"shortUrl"}),"?) => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Gets a ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/share",children:"share url"})," for the current project."]}),"\n",(0,d.jsxs)(n.p,{children:["By default, the url has a long query string representing the compressed encoded config object.\nIf the argument ",(0,d.jsx)(n.code,{children:"shortUrl"})," was set to ",(0,d.jsx)(n.code,{children:"true"}),", a short url is generated."]}),"\n",(0,d.jsx)(n.h4,{id:"parameters-3",children:"Parameters"}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"shortUrl?"}),": ",(0,d.jsx)(n.code,{children:"boolean"})]}),"\n",(0,d.jsx)(n.h4,{id:"returns-5",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"string"}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"example-4",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",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,d.jsx)(n.h4,{id:"inherited-from-5",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#getshareurl",children:(0,d.jsx)(n.code,{children:"getShareUrl"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:48"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"load",children:"load()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"load"}),": () => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Loads the playground, if not already loaded."}),"\n",(0,d.jsxs)(n.p,{children:["When the embed option ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#loading",children:"loading"})," is set to ",(0,d.jsx)(n.code,{children:'"click"'}),', the playground is not loaded automatically.\nInstead, a screen is shown with "Click to load" button. Calling the SDK method ',(0,d.jsx)(n.code,{children:"load()"})," allows loading the playground."]}),"\n",(0,d.jsx)(n.p,{children:"If the playground was not loaded, calling any other method will load the playground first before executing."}),"\n",(0,d.jsx)(n.h4,{id:"returns-6",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-6",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:298"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"onchange",children:(0,d.jsx)(n.del,{children:"onChange()"})}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"onChange"}),": (",(0,d.jsx)(n.code,{children:"fn"}),") => ",(0,d.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Runs a callback function when code changes."}),"\n",(0,d.jsx)(n.h4,{id:"parameters-4",children:"Parameters"}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"fn"})]}),"\n",(0,d.jsx)(n.h4,{id:"returns-7",children:"Returns"}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.code,{children:"object"})}),"\n",(0,d.jsx)(n.h5,{id:"remove",children:(0,d.jsx)(n.del,{children:"remove()"})}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"remove"}),": () => ",(0,d.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,d.jsx)(n.h6,{id:"returns-8",children:"Returns"}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.code,{children:"void"})}),"\n",(0,d.jsx)(n.h4,{id:"deprecated",children:"Deprecated"}),"\n",(0,d.jsxs)(n.p,{children:["Use ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#watch",children:(0,d.jsx)(n.code,{children:"watch"})})," method instead."]}),"\n",(0,d.jsx)(n.h4,{id:"inherited-from-6",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#onchange",children:(0,d.jsx)(n.code,{children:"onChange"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-7",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:142"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"run",children:"run()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"run"}),": () => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Runs the ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," (after any required compilation for code)."]}),"\n",(0,d.jsx)(n.h4,{id:"returns-9",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"example-5",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",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,d.jsx)(n.h4,{id:"inherited-from-7",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#run",children:(0,d.jsx)(n.code,{children:"run"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-8",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:14"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"runtests",children:"runTests()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"runTests"}),": () => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"object"}),">"]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Runs project ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/tests",children:"tests"})," (if present) and gets test results."]}),"\n",(0,d.jsx)(n.h4,{id:"returns-10",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"object"}),">"]}),"\n",(0,d.jsx)(n.h5,{id:"results",children:"results"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"results"}),": ",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/TestResult",children:(0,d.jsx)(n.code,{children:"TestResult"})}),"[]"]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"example-6",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const { results } = await playground.runTests();\n});\n'})}),"\n",(0,d.jsx)(n.h4,{id:"inherited-from-8",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#runtests",children:(0,d.jsx)(n.code,{children:"runTests"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-9",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:135"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"setconfig",children:"setConfig()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"setConfig"}),": (",(0,d.jsx)(n.code,{children:"config"}),") => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,d.jsx)(n.code,{children:"Config"})}),">"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Loads a new project using the passed configuration object."}),"\n",(0,d.jsx)(n.h4,{id:"parameters-5",children:"Parameters"}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"config"}),": ",(0,d.jsx)(n.code,{children:"Partial"}),"<",(0,d.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,d.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"returns-11",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,d.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"example-7",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",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,d.jsx)(n.h4,{id:"inherited-from-9",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#setconfig",children:(0,d.jsx)(n.code,{children:"setConfig"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-10",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:84"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"show",children:"show()"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"show"}),": (",(0,d.jsx)(n.code,{children:"panel"}),", ",(0,d.jsx)(n.code,{children:"options"}),"?) => ",(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Shows the selected panel."}),"\n",(0,d.jsxs)(n.p,{children:["See ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#show",children:"docs"})," for details."]}),"\n",(0,d.jsx)(n.h4,{id:"parameters-6",children:"Parameters"}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"panel"}),": ",(0,d.jsx)(n.code,{children:'"result"'})," | ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorId",children:(0,d.jsx)(n.code,{children:"EditorId"})})," | ",(0,d.jsx)(n.code,{children:'"console"'})," | ",(0,d.jsx)(n.code,{children:'"compiled"'})," | ",(0,d.jsx)(n.code,{children:'"tests"'})," | ",(0,d.jsx)(n.code,{children:'"editor"'})," | ",(0,d.jsx)(n.code,{children:'"toggle-result"'})]}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"options?"})]}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"options.column?"}),": ",(0,d.jsx)(n.code,{children:"number"})]}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"options.full?"}),": ",(0,d.jsx)(n.code,{children:"boolean"})]}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"options.line?"}),": ",(0,d.jsx)(n.code,{children:"number"})]}),"\n",(0,d.jsxs)(n.p,{children:["\u2022 ",(0,d.jsx)(n.strong,{children:"options.zoom?"}),": ",(0,d.jsx)(n.code,{children:"1"})," | ",(0,d.jsx)(n.code,{children:"0.5"})," | ",(0,d.jsx)(n.code,{children:"0.25"})]}),"\n",(0,d.jsx)(n.h4,{id:"returns-12",children:"Returns"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"Promise"}),"<",(0,d.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,d.jsx)(n.h4,{id:"example-8",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",children:'await playground.show("style");\nawait playground.show("toggle-result");\nawait playground.show("result", { full: true });\nawait playground.show("script");\nawait playground.show("result", { zoom: 0.5 });\nawait playground.show("console", { full: true });\n'})}),"\n",(0,d.jsx)(n.h4,{id:"inherited-from-10",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#show",children:(0,d.jsx)(n.code,{children:"show"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-11",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:119"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"watch",children:"watch"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"watch"}),": ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchLoad",children:(0,d.jsx)(n.code,{children:"WatchLoad"})})," & ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchReady",children:(0,d.jsx)(n.code,{children:"WatchReady"})})," & ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchCode",children:(0,d.jsx)(n.code,{children:"WatchCode"})})," & ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchConsole",children:(0,d.jsx)(n.code,{children:"WatchConsole"})})," & ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchTests",children:(0,d.jsx)(n.code,{children:"WatchTests"})})," & ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchDestroy",children:(0,d.jsx)(n.code,{children:"WatchDestroy"})})]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Allows to watch for various playground events.\nIt takes 2 arguments: event name and a callback function that will be called on every event."}),"\n",(0,d.jsxs)(n.p,{children:["event name can be one of: ",(0,d.jsx)(n.code,{children:'"load" | "ready" | "code" | "console" | "tests" | "destroy"'})]}),"\n",(0,d.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,d.jsxs)(n.p,{children:["The watch method returns an object with a single method (",(0,d.jsx)(n.code,{children:"remove"}),"), which when called will remove the callback from watching further events."]}),"\n",(0,d.jsxs)(n.p,{children:["See ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#watch",children:"docs"})," for details."]}),"\n",(0,d.jsx)(n.h4,{id:"example-9",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",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,d.jsx)(n.h4,{id:"inherited-from-11",children:"Inherited from"}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,d.jsx)(n.code,{children:"API"})}),".",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#watch",children:(0,d.jsx)(n.code,{children:"watch"})})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-12",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:"models.ts:187"})]})}function h(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},65:function(e,n,r){r.d(n,{Z:function(){return c},a:function(){return l}});var s=r(7294);let d={},i=s.createContext(d);function l(e){let n=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); |