45 lines
15 KiB
JavaScript
45 lines
15 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9079"],{3472:function(e,t,s){s.r(t),s.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>o,assets:()=>d,toc:()=>c,contentTitle:()=>l});var o=JSON.parse('{"id":"features/default-view","title":"Default View","description":"The playground can be loaded in one of the following views:","source":"@site/docs/features/default-view.mdx","sourceDirName":"features","slug":"/features/default-view","permalink":"/docs/features/default-view","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/default-view.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Display Modes","permalink":"/docs/features/display-modes"},"next":{"title":"Themes","permalink":"/docs/features/themes"}}'),i=s("5893"),n=s("65"),r=s("3365");let a={},l="Default View",d={},c=[{value:"<code>split</code>",id:"split",level:2},{value:"<code>editor</code>",id:"editor",level:2},{value:"<code>result</code>",id:"result",level:2},{value:"Display Mode vs Default View",id:"display-mode-vs-default-view",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"default-view",children:"Default View"})}),"\n","\n",(0,i.jsx)(t.p,{children:"The playground can be loaded in one of the following views:"}),"\n",(0,i.jsx)(t.h2,{id:"split",children:(0,i.jsx)(t.code,{children:"split"})}),"\n",(0,i.jsx)(t.p,{children:"Both the code editor and the result page are visible. This is the default."}),"\n",(0,i.jsxs)(t.p,{children:["Example: ",(0,i.jsx)(t.a,{href:"https://livecodes.io/?view=split",children:"https://livecodes.io/?view=split"})]}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n",(0,i.jsx)(r.Z,{config:{view:"split"}}),"\n",(0,i.jsx)(t.h2,{id:"editor",children:(0,i.jsx)(t.code,{children:"editor"})}),"\n",(0,i.jsx)(t.p,{children:'The code editor is visible, while the result page is collapsed. The result page can be shown by dragging the split gutter, or clicking the "Toggle Result" button.'}),"\n",(0,i.jsxs)(t.p,{children:["Example: ",(0,i.jsx)(t.a,{href:"https://livecodes.io/?view=editor",children:"https://livecodes.io/?view=editor"})]}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n",(0,i.jsx)(r.Z,{config:{view:"editor"}}),"\n",(0,i.jsx)(t.h2,{id:"result",children:(0,i.jsx)(t.code,{children:"result"})}),"\n",(0,i.jsx)(t.p,{children:"The result page is visible, while the code editor is collapsed. The code editor can be shown by dragging the split gutter, or clicking one of the editor tabs."}),"\n",(0,i.jsxs)(t.p,{children:["Example: ",(0,i.jsx)(t.a,{href:"https://livecodes.io/?view=result",children:"https://livecodes.io/?view=result"})]}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n",(0,i.jsx)(r.Z,{config:{view:"result"}}),"\n",(0,i.jsx)(t.h2,{id:"display-mode-vs-default-view",children:"Display Mode vs Default View"}),"\n",(0,i.jsxs)(t.admonition,{type:"info",children:[(0,i.jsxs)(t.p,{children:['"',(0,i.jsx)(t.a,{href:"/docs/features/display-modes",children:"Display Mode"}),'" is different from "Default View".']}),(0,i.jsxs)(t.p,{children:["In ",(0,i.jsx)(t.code,{children:"editor"})," display mode, only the editor is loaded and the result page is not available. While ",(0,i.jsx)(t.code,{children:"editor"})," default view shows the editor by default, and the result page can be shown by dragging the split gutter."]}),(0,i.jsxs)(t.p,{children:["The same applies for ",(0,i.jsx)(t.code,{children:"result"})," display mode and default view."]})]})]})}function h(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),i=s("4200"),n=s("7294"),r=s("8294");function a(e){let t=(0,n.useRef)(null),[s,i]=(0,n.useState)(e.className||""),[a,l]=(0,n.useState)(e.style||{}),[d,c]=(0,n.useState)(e.height),[u,h]=(0,n.useState)(),[p,f]=(0,n.useState)(JSON.stringify(e.config||"")),[m,g]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:n,sdkReady:a,config:d,...v}=e;if(i(s||""),l(o||{}),c(n),u&&m===JSON.stringify(v)){if(p===JSON.stringify(d))return;f(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{u?.setConfig(e)}):d&&u.setConfig(d)}else g(JSON.stringify(v)),u?.destroy(),(0,r.T)(t.current,{config:d,...v}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,n.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),f=s("5050");function m(e){let[t,s]=(0,n.useState)(e.js),[i,r]=(0,n.useState)(e.ts),[a,l]=(0,n.useState)(e.react),[m,g]=(0,n.useState)(e.vue),[v,y]=(0,n.useState)(e.svelte),w="3.7rem",[b,j]=(0,n.useState)(!0),[x,S]=(0,n.useState)(w),E=(0,n.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${w})`)},255)};return(0,n.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}};s(e(t,"js")),r(e(i,"ts")),l(e(a,"jsx")),g(e(m,"html")),y(e(v,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${f.Z.details} ${p.Z.details}`,"data-collapsed":b,style:{height:b?w:x,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{j(!b),C()},children:"show code"}),(0,o.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:f.Z.collapsibleContent,children:(0,o.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"ts",children:i})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"jsx",children:a})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"html",children:m})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function g(e){let{className:t,style:s,showCode:n,height:r,...d}=e,{colorMode:c}=(0,i.I)(),u=e=>JSON.stringify(e,null,2),h=`
|
|
import { createPlayground } from 'livecodes';
|
|
|
|
const options = ${u(d)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),p=`
|
|
import { createPlayground, type EmbedOptions } from 'livecodes';
|
|
|
|
const options: EmbedOptions = ${u(d)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),f=`
|
|
import LiveCodes from 'livecodes/react';
|
|
|
|
export default function App() {
|
|
const options = ${u(d)};
|
|
return (<LiveCodes {...options}></LiveCodes>);
|
|
}
|
|
|
|
`.trimStart(),g=`
|
|
<script setup>
|
|
import LiveCodes from "livecodes/vue";
|
|
|
|
const options = ${u(d)};
|
|
</script>
|
|
<template>
|
|
<LiveCodes v-bind="options" />
|
|
</template>
|
|
|
|
`,v=`
|
|
<script>
|
|
import { onMount } from 'svelte';
|
|
import { createPlayground } from 'livecodes';
|
|
|
|
let options = $state(${u(d)});
|
|
let container = $state(null);
|
|
onMount(() => {
|
|
createPlayground(container, options);
|
|
});
|
|
</script>
|
|
|
|
<div bind:this="{container}"></div>
|
|
|
|
`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(m,{js:h,ts:p,react:f,vue:g,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return n}});var o=s(7728);async function i(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:s={},headless:o,loading:i="lazy",view:r}=t,a=o||"headless"===r,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)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(n(t)),u=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":i),c.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let h=t.params;"object"==typeof h&&Object.keys(h).length>0&&JSON.stringify(h).length<1800&&Object.keys(h).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(h[e])))});let p=!1,f="Cannot call API methods after calling `destroy()`.",m=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 o="livecodes",n=l.querySelector(`iframe.${o}`),r=n||document.createElement("iframe");r.classList.add(o),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===i?"eager":"lazy"),a?E(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),r.onload=()=>{e(r)},r.src=c.href,n||l.appendChild(r)}),g=new Promise(e=>{addEventListener("message",function t(s){s.source===m.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),g.settled=!0)})}),v=()=>p?Promise.reject(f):new Promise(async e=>{g.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},u),await g,e()}),y=(e,t)=>new Promise(async(s,o)=>{if(p)return o(f);await v();let i=C();addEventListener("message",function t(n){if(n.source===m.contentWindow&&n.origin===u&&n.data?.type==="livecodes-api-response"&&n.data?.id===i&&n.data.method===e){removeEventListener("message",t);let e=n.data.payload;e?.error?o(e.error):s(e)}}),m.contentWindow?.postMessage({method:e,id:i,args:t},u)}),w={},b=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(p)throw Error(f);return b.includes(e)?(y("watch",[e]),w[e]||(w[e]=[]),w[e]?.push(t),{remove:()=>{w[e]=w[e]?.filter(e=>e!==t),w[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},x=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=x(e.data?.type??"");if(e.source!==m.contentWindow||e.origin!==u||!t||!w[t])return;let s=e.data?.payload;w[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(w).forEach(e=>{e.length=0}),m?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let C=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;o<t;o++)s[o-1]=arguments[o];return y("exec",[e,...s])},destroy:()=>g.settled?y("destroy").then(S):p?Promise.reject(f):(S(),Promise.resolve())}}function n(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:n={},headless:r,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let h="headless"===t.view||r;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof n&&null==n.mode?n.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 n&&null==n.view&&"headless"!==d?n.view=d:e.searchParams.set("view",d)),"string"==typeof n)try{new URL(n),e.searchParams.set("config",encodeURIComponent(n))}catch{throw Error('"config" is not a valid URL or configuration object.')}else n&&"object"==typeof n&&Object.keys(n).length>0&&(n.title&&"Untitled Project"!==n.title&&e.searchParams.set("title",n.title),n.description&&n.description.length>0&&e.searchParams.set("description",n.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(n))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return r}});var o=s(7294);let i={},n=o.createContext(i);function r(e){let t=o.useContext(n);return o.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(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); |