"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5767"],{2162:function(e,t,o){o.r(t),o.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>c,toc:()=>d,contentTitle:()=>l});var s=JSON.parse('{"id":"features/console","title":"Console","description":"Console messages are shown in the integrated console (in the tools pane, below the result page), without having to open the native browser console.","source":"@site/docs/features/console.mdx","sourceDirName":"features","slug":"/features/console","permalink":"/docs/features/console","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/console.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Tools Pane","permalink":"/docs/features/tools-pane"},"next":{"title":"Compiled Code","permalink":"/docs/features/compiled-code"}}'),n=o("5893"),r=o("65"),i=o("3365");let a={},l="Console",c={},d=[];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"console",children:"Console"})}),"\n","\n",(0,n.jsxs)(t.p,{children:["Console messages are shown in the integrated console (in the ",(0,n.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"}),", below the result page), without having to open the native browser console."]}),"\n",(0,n.jsxs)(t.p,{children:["Messages can be sent to the console using the standard ",(0,n.jsx)(t.code,{children:"console"})," methods in the code editor (e.g. ",(0,n.jsx)(t.code,{children:"console.log"}),", ",(0,n.jsx)(t.code,{children:"console.warn"}),", ",(0,n.jsx)(t.code,{children:"console.error"}),", ",(0,n.jsx)(t.code,{children:"console.table"}),", ...etc). The console can also be used as REPL (read\u2013eval\u2013print loop) using the integrated console input."]}),"\n",(0,n.jsx)(t.p,{children:"The code is evaluated in the context of the result page (i.e. variables defined in the script editor are accessible for evaluation in the console input). Also code completion works in the console input."}),"\n",(0,n.jsxs)(t.p,{children:["e.g. ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?ts&console=full",children:"https://livecodes.io/?ts&console=full"})," ",(0,n.jsx)("br",{}),"\nsets TypeScript as the active editor and shows the console maximized."]}),"\n",(0,n.jsx)(t.p,{children:"Demo: (console=full)"}),"\n",(0,n.jsx)(i.Z,{params:{console:"full",js:`const x = 5;
console.log('x:', x);
console.log({x, y: 6});
console.table({x, y: 6});
console.warn('take care!');
const z = x * y;`}}),"\n",(0,n.jsx)("p",{children:"\xa0"}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["Setting the querystring ",(0,n.jsx)(t.code,{children:"languages"})," only shows these languages.\nSelecting one language and setting console to ",(0,n.jsx)(t.code,{children:"full"})," gives an environment similar to a REPL."]})}),"\n",(0,n.jsx)(t.p,{children:"Demo: (Python - print to console)"}),"\n",(0,n.jsx)(i.Z,{params:{languages:"py",console:"full",py:"print('hello from python')"}})]})}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||{}),[c,d]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[p,f]=(0,r.useState)(JSON.stringify(e.config||"")),[m,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:o,style:s,height:r,sdkReady:a,config:c,...y}=e;if(n(o||""),l(s||{}),d(r),u&&m===JSON.stringify(y)){if(p===JSON.stringify(c))return;f(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...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":c})}var l=o("1858"),c=o("3262"),d=o("1705"),u=o("7645"),h=o("8168"),p=o("8228"),f=o("5050");function m(e){let[t,o]=(0,r.useState)(e.js),[n,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[m,g]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),w="3.7rem",[b,x]=(0,r.useState)(!0),[j,S]=(0,r.useState)(w),C=(0,r.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,r.useEffect)(()=>{if(c.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(m,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${f.Z.details} ${p.Z.details}`,"data-collapsed":b,style:{height:b?w:j,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{x(!b),P()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:f.Z.collapsibleContent,children:(0,s.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,s.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"js",children:t})}),(0,s.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"ts",children:n})}),(0,s.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"jsx",children:a})}),(0,s.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"html",children:m})}),(0,s.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:o,showCode:r,height:i,...c}=e,{colorMode:d}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),h=`
import { createPlayground } from 'livecodes';

const options = ${u(c)};
createPlayground('#container', options);

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

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

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

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

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

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

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

let options = $state(${u(c)});
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:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(m,{js:h,ts:p,react:f,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,c=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)P(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof o&&Object.keys(o).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="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?P(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),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<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=d.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=()=>f?Promise.reject(m):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(f)return s(m);await v();let n=E();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={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(m);return x.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?.(),f=!0};function P(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 E=()=>(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=>j("code",e),watch:j,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):f?Promise.reject(m):(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:c,...d}=t;try{e=new URL(o)}catch{throw Error(`${o} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).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")),c&&(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"!==c?r.view=c:e.searchParams.set("view",c)),"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)}}}]);