45 lines
15 KiB
JavaScript
45 lines
15 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4007"],{6544:function(e,t,o){o.r(t),o.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>d,toc:()=>c,contentTitle:()=>l});var s=JSON.parse('{"id":"features/lite","title":"Lite Mode","description":"In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That\'s why the LiveCodes playground has a lite mode.","source":"@site/docs/features/lite.mdx","sourceDirName":"features","slug":"/features/lite","permalink":"/docs/features/lite","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/lite.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Embedded Playgrounds","permalink":"/docs/features/embeds"},"next":{"title":"Read-Only","permalink":"/docs/features/read-only"}}'),n=o("5893"),r=o("65"),i=o("3365");let a={},l="Lite Mode",d={},c=[{value:"Using SDK",id:"using-sdk",level:2},{value:"Using query params",id:"using-query-params",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"lite-mode",children:"Lite Mode"})}),"\n","\n",(0,n.jsx)(t.p,{children:"In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That's why the LiveCodes playground has a lite mode."}),"\n",(0,n.jsxs)(t.p,{children:["In lite mode, a light-weight, minimal code editor is used (",(0,n.jsx)(t.a,{href:"/docs/features/editor-settings#code-editor",children:"CodeJar"}),"). ",(0,n.jsx)(t.a,{href:"/docs/features/emmet",children:"Emmet abbreviations"})," and ",(0,n.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"})," are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code edits are compiled and shown in the ",(0,n.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," as usual."]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(i.Z,{template:"react",config:{mode:"lite"}}),"\n",(0,n.jsx)(t.h2,{id:"using-sdk",children:"Using SDK"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#mode",children:(0,n.jsx)(t.code,{children:"EmbedOptions.config.mode"})})," to ",(0,n.jsx)(t.code,{children:'"lite"'}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', { config: { mode: 'lite' } });\n"})}),"\n",(0,n.jsx)(t.h2,{id:"using-query-params",children:"Using query params"}),"\n",(0,n.jsxs)(t.p,{children:["Add the ",(0,n.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query parameter"})," ",(0,n.jsx)(t.code,{children:"?mode=lite"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://livecodes.io?mode=lite",children:"https://livecodes.io?mode=lite"})}),"\n",(0,n.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"/docs/features/read-only",children:"Read-only"}),"."]}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},3365:function(e,t,o){o.d(t,{Z:()=>g});var s=o("5893"),n=o("4200"),r=o("7294"),i=o("8294");function a(e){let t=(0,r.useRef)(null),[o,n]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[m,p]=(0,r.useState)(JSON.stringify(e.config||"")),[f,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:o,style:s,height:r,sdkReady:a,config:d,...y}=e;if(n(o||""),l(s||{}),c(r),u&&f===JSON.stringify(y)){if(m===JSON.stringify(d))return;p(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(y)),u?.destroy(),(0,i.T)(t.current,{config:d,...y}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:o,style:a,"data-height":d})}var l=o("1858"),d=o("3262"),c=o("1705"),u=o("7645"),h=o("8168"),m=o("8228"),p=o("5050");function f(e){let[t,o]=(0,r.useState)(e.js),[n,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[f,g]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),w="3.7rem",[b,j]=(0,r.useState)(!0),[x,S]=(0,r.useState)(w),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,r.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}};o(e(t,"js")),i(e(n,"ts")),l(e(a,"jsx")),g(e(f,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${m.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,s.jsx)("summary",{onClick:()=>{j(!b),E()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:p.Z.collapsibleContent,children:(0,s.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,s.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"ts",children:n})}),(0,s.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:f})}),(0,s.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:o,showCode:r,height:i,...d}=e,{colorMode:c}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),h=`
|
|
import { createPlayground } from 'livecodes';
|
|
|
|
const options = ${u(d)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),m=`
|
|
import { createPlayground, type EmbedOptions } from 'livecodes';
|
|
|
|
const options: EmbedOptions = ${u(d)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),p=`
|
|
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>
|
|
|
|
`,y=`
|
|
<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,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(f,{js:h,ts:m,react:p,vue:g,svelte:y})]})}},8294:function(e,t,o){o.d(t,{T:function(){return n},r:function(){return r}});var s=o(7728);async function n(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:o={},headless:s,loading:n="lazy",view:i}=t,a=s||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),u=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":n);let h=globalThis.process;c.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof o&&Object.keys(o).length>0&&c.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(m[e])))});let p=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===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===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:o},u))}),i.onload=()=>{e(i)},i.src=c.href,r||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(o){o.source===g.contentWindow&&o.origin===u&&o.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>p?Promise.reject(f):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),w=(e,t)=>new Promise(async(o,s)=>{if(p)return s(f);await v();let n=P();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):o(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),b={},j=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(p)throw Error(f);return j.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let o=e.data?.payload;b[t]?.forEach(e=>{e(o)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,o=Array(t>1?t-1:0),s=1;s<t;s++)o[s-1]=arguments[s];return w("exec",[e,...o])},destroy:()=>y.settled?w("destroy").then(C):p?Promise.reject(f):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:o="https://livecodes.io",params:n={},config:r={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(o)}catch{throw Error(`${o} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(c).forEach(t=>{let[o,s]=t;void 0!==s&&e.searchParams.set(o,String(s))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.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 r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[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,o){o.d(t,{Z:function(){return a},a:function(){return i}});var s=o(7294);let n={},r=s.createContext(n);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); |