livecode-static/docs/assets/js/b7743934.38617417.js

"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4420"],{473:function(e,t,s){s.r(t),s.d(t,{basicJsxDemo:()=>h,importsDemo:()=>g,stylesDemo:()=>x,frontMatter:()=>a,styledComponentsDemo:()=>v,metadata:()=>n,exportsDemo:()=>f,assets:()=>d,cssModulesDemo:()=>j,rootDemo:()=>p,contentTitle:()=>c,disableAutoRenderDemo:()=>m,toc:()=>y,default:()=>S,reactDomDemo:()=>u,tailwindcssDemo:()=>b});var n=JSON.parse('{"id":"languages/react","title":"React","description":"React Compiler is a build-time only tool that automatically optimizes React apps.","source":"@site/docs/languages/react.mdx","sourceDirName":"languages","slug":"/languages/react","permalink":"/docs/languages/react","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/react.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"React (TSX)","permalink":"/docs/languages/react-tsx"},"next":{"title":"Reason","permalink":"/docs/languages/reason"}}'),r=s("5893"),o=s("65"),i=s("3365"),l=s("8500");let a={},c="React",d={},h={react:`export default function App() {
  return <h1>Hello World!</h1>;
}`},u={react:`import { createRoot } from "react-dom/client";

function App() {
  return <h1>Hello World!</h1>;
}

const root = createRoot(document.querySelector("#root"));
root.render(<App />);`,html:'<div id="root"></div>'},p={html:'<div id="livecodes-app">Loading...</div>',react:`export default function App() {
  return <h1>Hello World!</h1>;
}`},m={markup:{language:"html",content:`JSX auto-rendering is disabled. Set from Project menu \u{2192} Custom Settings.`},script:{language:"react",content:`export default function App() {
  return <h1>Hello World!</h1>;
}`},customSettings:{react:{disableAutoRender:!0}}},g={react:`import { useState, useEffect } from "react";
import confetti from "canvas-confetti";
import "bootstrap/dist/css/bootstrap.css";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count > 0) {
      confetti();
    }
  }, [count]);

  return (
    <div className="m-5 text-center">
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
`},f={mdx:`import Greeting from "./script";

<Greeting name="MDX" />
`,react:`export default function(props) {
  return <h1>Greeting from {props.name}!</h1>;
}
`},x={react:`import "bootstrap/dist/css/bootstrap.css";

export default () => <h1 className="m-5 text-center">Hello World!</h1>;
`},j={activeEditor:"script",style:{language:"css",content:`.title {
  color: green;
  font-family: sans-serif;
}
`},script:{language:"react",content:`import classes from './style.module.css';

export default function() {
  return <h1 className={classes.title}>Hello, CSS Modules!</h1>;
}
`},processors:["cssmodules"]},b={activeEditor:"script",style:{language:"css",content:`@tailwind base;
@tailwind components;
@tailwind utilities;
`},script:{language:"react",content:`export default function() {
  return <h1 className="text-3xl font-bold text-gray-500 text-center m-4">Hello, Tailwind CSS!</h1>;
}
`},processors:["tailwindcss"]},v={react:"import styled from 'styled-components';\n\nconst Title = styled.h1`\n text-align: center;\n font-family: sans-serif;\n color: palevioletred;\n`;\n\nexport default function () {\n return <Title>Hello, styled-components!</Title>;\n}\n"},y=[{value:"Demo:",id:"demo",level:2},{value:"Usage",id:"usage",level:2},{value:"Auto-rendering",id:"auto-rendering",level:3},{value:"Root Element",id:"root-element",level:4},{value:"Disabling Auto-rendering",id:"disabling-auto-rendering",level:4},{value:"Importing Modules",id:"importing-modules",level:3},{value:"Types for Imported Modules",id:"types-for-imported-modules",level:4},{value:"Exports",id:"exports",level:3},{value:"Styles",id:"styles",level:3},{value:"Style Editor",id:"style-editor",level:4},{value:"Importing Stylesheets",id:"importing-stylesheets",level:4},{value:"CSS Modules",id:"css-modules",level:4},{value:"CSS Frameworks",id:"css-frameworks",level:4},{value:"CSS-in-JS",id:"css-in-js",level:4},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function w(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"react",children:"React"})}),"\n","\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://react.dev/learn/react-compiler",children:"React Compiler"})," is a build-time only tool that automatically optimizes ",(0,r.jsx)(t.a,{href:"https://react.dev/",children:"React"})," apps."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that using React compiler with TypeScript (TSX) is also supported in LiveCodes and is ",(0,r.jsx)(t.a,{href:"/docs/languages/react-tsx",children:"documented here"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Also note that LiveCodes supports running ",(0,r.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,r.jsx)(t.a,{href:"/docs/languages/tsx",children:"TSX"})," which are compiled to JavaScript using the ",(0,r.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"}),". This was the traditional way of running React and other JSX/TSX apps in LiveCodes before React compiler support was added."]}),"\n",(0,r.jsx)(t.h2,{id:"demo",children:"Demo:"}),"\n",(0,r.jsx)(i.Z,{template:"react",height:"400px"}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["The easiest way is to ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-render"})," a component by exporting it as the ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#using_the_default_export",children:"default export"}),":"]}),"\n","\n",(0,r.jsx)(l.Z,{params:h,code:h.jsx,language:"react",formatCode:!1}),"\n",(0,r.jsxs)(t.p,{children:["You may, however, be more explicit and render the component yourself using ",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react-dom/client",children:"React DOM"}),":"]}),"\n","\n",(0,r.jsx)(l.Z,{params:u,code:u.jsx,language:"react",formatCode:!1}),"\n",(0,r.jsxs)(t.admonition,{title:"note",type:"info",children:[(0,r.jsxs)(t.p,{children:["React's ",(0,r.jsx)(t.a,{href:"https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",children:"new JSX transform"})," is utilized. So there is no need to import React."]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-jsx",children:"// this is not needed:\n// import React from 'react';\n\nexport default function App() {\n  return <h1>Hello World!</h1>;\n}\n"})})]}),"\n",(0,r.jsx)(t.h3,{id:"auto-rendering",children:"Auto-rendering"}),"\n",(0,r.jsx)(t.p,{children:"A component is rendered automatically as a React component (without having to manually use React Dom to render it) if the following conditions are met:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"The component is exported as the default export."}),"\n",(0,r.jsxs)(t.li,{children:["No ",(0,r.jsxs)(t.a,{href:"#exports",children:["imports from ",(0,r.jsx)(t.code,{children:'"./script"'})]})," in markup editor."]}),"\n",(0,r.jsxs)(t.li,{children:["Auto-rendering is not ",(0,r.jsx)(t.a,{href:"#disabling-auto-rendering",children:"disabled"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"root-element",children:"Root Element"}),"\n",(0,r.jsxs)(t.p,{children:["To render the React components to a specific ",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react-dom/client/createRoot",children:"root"})," DOM element use ",(0,r.jsx)(t.code,{children:'"livecodes-app"'})," as the element ",(0,r.jsx)(t.code,{children:"id"}),". Otherwise, if that element is not found, a new ",(0,r.jsx)(t.code,{children:"div"})," element is added to ",(0,r.jsx)(t.code,{children:"document.body"})," and is used as the root."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(l.Z,{params:p,code:p.html,language:"html",formatCode:!1}),"\n",(0,r.jsx)(t.h4,{id:"disabling-auto-rendering",children:"Disabling Auto-rendering"}),"\n",(0,r.jsxs)(t.p,{children:["To disable auto-rendering, set the ",(0,r.jsx)(t.a,{href:"#custom-settings",children:"custom settings"})," ",(0,r.jsx)(t.code,{children:"disableAutoRender"})," property to ",(0,r.jsx)(t.code,{children:"true"}),"."]}),"\n","\n",(0,r.jsx)(l.Z,{config:m,code:JSON.stringify(m.customSettings,null,2),language:"json",codeTitle:"Custom Settings",formatCode:!1}),"\n",(0,r.jsx)(t.h3,{id:"importing-modules",children:"Importing Modules"}),"\n",(0,r.jsxs)(t.p,{children:["npm modules can be imported as described in the section about ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution",children:"module resolution"}),", including bare module imports and importing from different CDNs. Stylesheet imports are added as ",(0,r.jsx)(t.code,{children:'<link rel="stylesheet">'})," tags in the page ",(0,r.jsx)(t.code,{children:"head"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(l.Z,{params:g,code:g.jsx,language:"react",formatCode:!1}),"\n",(0,r.jsxs)(t.p,{children:["Module imports can be customized using import maps as described in ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"module resolution"})," documentations."]}),"\n",(0,r.jsx)(t.h4,{id:"types-for-imported-modules",children:"Types for Imported Modules"}),"\n",(0,r.jsxs)(t.p,{children:["Types for imported modules are loaded automatically (if available) to provide ",(0,r.jsx)(t.a,{href:"/docs/features/intellisense",children:"Intellisense"}),", auto-completion and type information."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:s(9203).Z+"",width:"1128",height:"754"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:s(313).Z+"",width:"1126",height:"713"})}),"\n",(0,r.jsxs)(t.p,{children:["Moreover, you can provide custom type definitions for modules that do not have types available on npm. See ",(0,r.jsx)(t.a,{href:"/docs/features/intellisense#custom-types",children:"Custom Types"})," for details."]}),"\n",(0,r.jsx)(t.h3,{id:"exports",children:"Exports"}),"\n",(0,r.jsxs)(t.p,{children:["Values exported from script editor (default or named) can be imported in the markup editor by importing from ",(0,r.jsx)(t.code,{children:'"./script"'})," (with no extension)."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be useful, for example, when using ",(0,r.jsx)(t.a,{href:"/docs/languages/mdx",children:"MDX"})," to import components exported form JSX."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{params:f}),"\n",(0,r.jsx)(t.admonition,{title:"note",type:"info",children:(0,r.jsxs)(t.p,{children:["When values are imported from ",(0,r.jsx)(t.code,{children:'"./script"'}),", ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-rendering"})," is disabled, because it is assumed that you want to take control over component rendering."]})}),"\n",(0,r.jsx)(t.h3,{id:"styles",children:"Styles"}),"\n",(0,r.jsx)(t.p,{children:"CSS can be applied to the component using various ways:"}),"\n",(0,r.jsx)(t.h4,{id:"style-editor",children:"Style Editor"}),"\n",(0,r.jsxs)(t.p,{children:["Styles added in the style editor is applied globally to the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),". This can use different ",(0,r.jsx)(t.strong,{children:"languages/processors"})," supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See ",(0,r.jsx)(t.a,{href:"/docs/features/css",children:"style documentation"})," for more details."]}),"\n",(0,r.jsx)(t.p,{children:"And of course, styles and stylesheets added in markup editor are also applied globally."}),"\n",(0,r.jsx)(t.h4,{id:"importing-stylesheets",children:"Importing Stylesheets"}),"\n",(0,r.jsxs)(t.p,{children:["Stylesheets imported in script editor are added as ",(0,r.jsx)(t.code,{children:'<link rel="stylesheet">'})," tags in the page ",(0,r.jsx)(t.code,{children:"head"}),".\nThe stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with ",(0,r.jsx)(t.code,{children:'".css"'}),"."]}),"\n",(0,r.jsx)(t.p,{children:"example:"}),"\n","\n",(0,r.jsx)(l.Z,{params:x,code:x.react,language:"react",formatCode:!1}),"\n",(0,r.jsx)(t.h4,{id:"css-modules",children:"CSS Modules"}),"\n",(0,r.jsxs)(t.p,{children:["CSS modules are supported and are ",(0,r.jsx)(t.a,{href:"/docs/languages/cssmodules",children:"documented separately"}),". Make sure to enable CSS modules (from style editor menu or in ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#processors",children:(0,r.jsx)(t.code,{children:"processors"})})," property of ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),")."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{config:j}),"\n",(0,r.jsx)(t.h4,{id:"css-frameworks",children:"CSS Frameworks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/features/css#css-processors",children:"CSS Frameworks"})," supported in LiveCodes (e.g. ",(0,r.jsx)(t.a,{href:"/docs/languages/tailwindcss",children:"Tailwind CSS"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/unocss",children:"UnoCSS"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/windicss",children:"WindiCSS"}),") can detect class names added in JSX. Make sure that the required utility is enabled (from style editor menu or in ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#processors",children:(0,r.jsx)(t.code,{children:"processors"})})," property of ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),") and that required ",(0,r.jsx)(t.a,{href:"https://tailwindcss.com/docs/functions-and-directives#tailwind",children:"directives"})," are added to the style editor."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{config:b}),"\n",(0,r.jsx)(t.h4,{id:"css-in-js",children:"CSS-in-JS"}),"\n",(0,r.jsx)(t.p,{children:"CSS-in-JS libraries can be imported and used as usual."}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{params:v}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"react"})}),"\n",(0,r.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:".react.jsx"}),", ",(0,r.jsx)(t.code,{children:".react-jsx"})]}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"}),", which is a ",(0,r.jsx)(t.a,{href:"/docs/languages/babel",children:"babel"})," plugin (",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),")."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"babel-plugin-react-compiler"}),": v19.1.0-rc.1"]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(t.p,{children:["React compiler is implemented as a babel plugin (",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),"). In addition the following babel presets are used:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-env",children:"@babel/preset-env"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-react",children:"@babel/preset-react"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-typescript",children:"@babel/preset-typescript"})}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," can be used to add configuration under the following keys:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"react"}),": the option ",(0,r.jsx)(t.code,{children:"disableAutoRender"})," can be set to ",(0,r.jsx)(t.code,{children:"true"})," to disable ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"babel"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/options",children:"babel"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"babel-plugin-react-compiler"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"@babel/preset-env"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-env",children:"@babel/preset-env"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"@babel/preset-react"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-react",children:"@babel/preset-react"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"@babel/preset-typescript"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-typescript",children:"@babel/preset-typescript"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Example:"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n  "react": {\n    "disableAutoRender": true\n  }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=react",children:"https://livecodes.io/?template=react"})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"})}),"\n"]})]})}function S(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(w,{...e})}):w(e)}},9203:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/intellisense-1-bbc692078d1b88aaf8d2be72beb49849.jpg"},313:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/intellisense-2-ffdab70d10948aa165e3332a58d37827.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),o=s("7294"),i=s("8294");function l(e){let t=(0,o.useRef)(null),[s,r]=(0,o.useState)(e.className||""),[l,a]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:l,config:c,...x}=e;if(r(s||""),a(n||{}),d(o),h&&g===JSON.stringify(x)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(x)),h?.destroy(),(0,i.T)(t.current,{config:c,...x}).then(e=>{u(e),"function"==typeof l&&l(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:l,"data-height":c})}var a=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[l,a]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[x,j]=(0,o.useState)(e.svelte),b="3.7rem",[v,y]=(0,o.useState)(!0),[w,S]=(0,o.useState)(b),C=(0,o.useRef)(null),R=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},255)};return(0,o.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}};s(e(t,"js")),i(e(r,"ts")),a(e(l,"jsx")),f(e(g,"html")),j(e(x,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":v,style:{height:v?b:w,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{y(!v),R()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"jsx",children:l})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"html",children:x})})]})})})]})}function f(e){let{className:t,style:s,showCode:o,height:i,...c}=e,{colorMode:d}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=`
import { createPlayground } from 'livecodes';

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

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

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

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

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

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

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

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

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

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

`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:x})]})}},8500:function(e,t,s){s.d(t,{Z:()=>c});var n=s("5893");s("7294");var r=s("6735");function o(e){let{children:t,fallback:s}=e;return(0,r.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var i=s("1705"),l=s("8294"),a=s("1858");function c(e){let{params:t,config:s,code:r,language:c="js",codeTitle:d="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:m={},className:g=""}=e,f=(0,l.r)({appUrl:a.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...m},className:g,children:[r&&(0,n.jsx)(o,{children:()=>(0,n.jsx)(i.Z,{language:c,title:d,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,c):r})}),(0,n.jsxs)("a",{href:f,target:"_blank",rel:"noreferrer",children:[p,(0,n.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,n.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,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(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:n,loading:r="lazy",view:i}=t,l=n||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)R(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":r);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).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 m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",o=a.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),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"===r?"eager":"lazy"),l?R(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&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===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,o||a.appendChild(i)}),x=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),x.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{x.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),b=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await j();let r=E();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),v={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return y.includes(e)?(b("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&b("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!==f.contentWindow||e.origin!==h||!t||!v[t])return;let s=e.data?.payload;v[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(v).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function R(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return b("exec",[e,...s])},destroy:()=>x.settled?b("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.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 o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]);