45 lines
24 KiB
JavaScript
45 lines
24 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7516"],{7635:function(e,s,t){t.r(s),t.d(s,{default:()=>g,frontMatter:()=>c,metadata:()=>n,assets:()=>h,params:()=>u,toc:()=>m,contentTitle:()=>d});var n=JSON.parse('{"id":"languages/cssmodules","title":"CSS Modules","description":"A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.","source":"@site/docs/languages/cssmodules.mdx","sourceDirName":"languages","slug":"/languages/cssmodules","permalink":"/docs/languages/cssmodules","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/cssmodules.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"CSS","permalink":"/docs/languages/css"},"next":{"title":"cssnano","permalink":"/docs/languages/cssnano"}}'),o=t("5893"),l=t("65"),i=t("8168"),r=t("7645"),a=t("3365");let c={},d="CSS Modules",h={},u={activeEditor:"style",html:'<div class="page">\n <h1>Page Title</h1>\n <p class="small-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.</p>\n</div>\n',css:":global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n",js:"import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n",processors:"cssmodules",compiled:"open"},m=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Type",id:"type",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Limitations",id:"limitations",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Links",id:"links",level:2}];function p(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.header,{children:(0,o.jsx)(s.h1,{id:"css-modules",children:"CSS Modules"})}),"\n",(0,o.jsxs)(s.p,{children:["A ",(0,o.jsx)(s.a,{href:"https://github.com/css-modules/css-modules",children:"CSS Module"})," is a CSS file in which all class names and animation names are scoped locally by default."]}),"\n",(0,o.jsx)(s.p,{children:"The selector names are unique to avoid naming collision. They can then be imported as a JavaScript object."}),"\n",(0,o.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(s.p,{children:"CSS Modules can be enabled from the style editor menu."}),"\n",(0,o.jsx)(s.p,{children:"Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and are injected into the HTML elements."}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Example:"})}),"\n","\n",(0,o.jsxs)(i.Z,{children:[(0,o.jsx)(r.Z,{value:"src-css",label:"Source CSS",default:!0,children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:":global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n"})})}),(0,o.jsx)(r.Z,{value:"compiled-css",label:"Compiled CSS",children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:".page {\n padding: 20px;\n}\n\n._text_1ygro_9 {\n color: black;\n font-family: sans-serif;\n}\n\n._small-text_1ygro_19 {\n font-size: 20px;\n}\n\n._large-text_1ygro_29 {\n font-size: 40px;\n}\n\n._large-text_1ygro_29:hover {\n color: red;\n}\n\n._title_1ygro_47 {\n color: green;\n}\n"})})}),(0,o.jsx)(r.Z,{value:"json",label:"JSON Object",children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-json",children:'{\n "text": "_text_1ygro_9",\n "small-text": "_small-text_1ygro_19 _text_1ygro_9",\n "large-text": "_large-text_1ygro_29 _text_1ygro_9",\n "title": "_title_1ygro_47 _large-text_1ygro_29 _text_1ygro_9",\n "smallText": "_small-text_1ygro_19 _text_1ygro_9",\n "largeText": "_large-text_1ygro_29 _text_1ygro_9"\n}\n'})})}),(0,o.jsx)(r.Z,{value:"src-html",label:"Source HTML",children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-html",children:'<div class="page">\n <h1>Page Title</h1>\n <p class="small-text">\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non\n beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur\n similique facere facilis minima tempora.\n </p>\n</div>\n'})})}),(0,o.jsx)(r.Z,{value:"compiled-html",label:"Compiled HTML",children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-html",children:'<div class="page">\n <h1>Page Title</h1>\n <p class="small-text _small-text_1ygro_19 _text_1ygro_9">\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non\n beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur\n similique facere facilis minima tempora.\n </p>\n</div>\n'})})})]}),"\n",(0,o.jsxs)(s.p,{children:["In the script editor, the JSON object representing the transformed classes can be imported from the relative URLs ",(0,o.jsx)(s.code,{children:"'./style.module.css'"})," or ",(0,o.jsx)(s.code,{children:"'./styles.module.css'"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import",children:"Default"}),", ",(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import",children:"named"})," and ",(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import",children:"namespace"})," imports are supported. Class names are also available in camelCase (e.g ",(0,o.jsx)(s.code,{children:".large-text"})," becomes ",(0,o.jsx)(s.code,{children:"largeText"}),"). This can be changed by setting ",(0,o.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules#localsconvention",children:(0,o.jsx)(s.code,{children:"localsConvention"})})," in ",(0,o.jsx)(s.a,{href:"#custom-settings",children:"custom settings"}),"."]}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Example:"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",metastring:'title="In script editor (using JS in this case):"',children:"import classes from './style.module.css';\nimport { smallText } from './styles.module.css';\nimport * as allClasses from './styles.module.css';\n\nconsole.log(classes.title);\n\n// .small-text -> smallText\nconsole.log(smallText);\n\n// .large-text -> largeText\nconsole.log(allClasses.largeText);\n\n// bracket notation for class with dash\nconsole.log(allClasses['large-text']);\n"})}),"\n",(0,o.jsxs)(s.p,{children:["For full example, see ",(0,o.jsx)(s.a,{href:"#example-usage",children:"example usage"})," below."]}),"\n",(0,o.jsxs)(s.admonition,{type:"info",children:[(0,o.jsx)(s.p,{children:"CSS Modules has to be enabled (from style editor menu), to be able to import classes in the script editor."}),(0,o.jsxs)(s.p,{children:["Importing a URL that does not include ",(0,o.jsx)(s.code,{children:".module"})," (e.g. ",(0,o.jsx)(s.code,{children:"./style.css"}),") gets the processed CSS ",(0,o.jsx)(s.strong,{children:"string"})," as the module's default export."]}),(0,o.jsxs)(s.p,{children:["The extension of the style editor language can also be used, in addition to ",(0,o.jsx)(s.code,{children:".css"}),". For example, when using SCSS, importing from any of the following URLs is the same:"]}),(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.code,{children:"./style.module.css"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.code,{children:"./styles.module.css"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.code,{children:"./style.module.scss"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.code,{children:"./styles.module.scss"})}),"\n"]})]}),"\n",(0,o.jsx)(s.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(s.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.code,{children:"cssmodules"})}),"\n",(0,o.jsx)(s.h3,{id:"type",children:"Type"}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.a,{href:"/docs/features/css#css-processors",children:"Processor"})}),"\n",(0,o.jsx)(s.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.code,{children:"style"})}),"\n",(0,o.jsx)(s.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(s.p,{children:["The CSS Modules processor is provided using ",(0,o.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules",children:"postcss-modules"})," as a ",(0,o.jsx)(s.a,{href:"/docs/languages/postcss",children:"PostCSS"})," plugin."]}),"\n",(0,o.jsx)(s.h3,{id:"version",children:"Version"}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"postcss-modules"}),": v6.0.1"]}),"\n",(0,o.jsx)(s.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,o.jsx)(s.code,{children:"cssmodules"})," are passed as a JSON object to the ",(0,o.jsx)(s.code,{children:"postcss-modules"})," plugin during compile. Please check the ",(0,o.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules#usage",children:"documentation"})," for full reference."]}),"\n",(0,o.jsx)(s.p,{children:"In addition, the following settings are available:"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.code,{children:"addClassesToHTML"})}),"\n",(0,o.jsxs)(s.p,{children:["Type: ",(0,o.jsx)(s.code,{children:"boolean"}),". Default: ",(0,o.jsx)(s.code,{children:"true"}),"."]}),"\n",(0,o.jsx)(s.p,{children:"The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript."}),"\n"]}),"\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.code,{children:"removeOriginalClasses"})}),"\n",(0,o.jsxs)(s.p,{children:["Type: ",(0,o.jsx)(s.code,{children:"boolean"}),". Default: ",(0,o.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["When enabled, the original classes are removed from HTML, keeping only the generated classes. Only applies if ",(0,o.jsx)(s.code,{children:"addClassesToHTML"})," is enabled."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(s.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Example:"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-json",children:'{\n "cssmodules": {\n "exportGlobals": true,\n "localsConvention": "camelCaseOnly",\n "addClassesToHTML": false\n }\n}\n'})}),"\n",(0,o.jsx)(s.h2,{id:"limitations",children:"Limitations"}),"\n",(0,o.jsxs)(s.p,{children:["Currently, loading external sources in ",(0,o.jsx)(s.a,{href:"https://github.com/css-modules/css-modules#composing-from-other-files",children:(0,o.jsx)(s.code,{children:"composes"})})," is not supported."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* you cannot do this */\n.title {\n composes: title from 'https://example.com/styles.css';\n}\n"})}),"\n",(0,o.jsxs)(s.p,{children:["If you get this working, ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/pulls",children:"please create a pull request"}),"."]}),"\n",(0,o.jsx)(s.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,o.jsx)(a.Z,{params:u,height:"400"}),"\n",(0,o.jsx)(s.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.a,{href:"https://github.com/css-modules/css-modules",children:"CSS Modules"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules",children:"postcss-modules"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.a,{href:"https://postcss.org/",children:"PostCSS"})}),"\n"]})]})}function g(e={}){let{wrapper:s}={...(0,l.a)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3365:function(e,s,t){t.d(s,{Z:()=>x});var n=t("5893"),o=t("4200"),l=t("7294"),i=t("8294");function r(e){let s=(0,l.useRef)(null),[t,o]=(0,l.useState)(e.className||""),[r,a]=(0,l.useState)(e.style||{}),[c,d]=(0,l.useState)(e.height),[h,u]=(0,l.useState)(),[m,p]=(0,l.useState)(JSON.stringify(e.config||"")),[g,x]=(0,l.useState)("");return(0,l.useEffect)(()=>{if(!s.current)return;let{className:t,style:n,height:l,sdkReady:r,config:c,...f}=e;if(o(t||""),a(n||{}),d(l),h&&g===JSON.stringify(f)){if(m===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else x(JSON.stringify(f)),h?.destroy(),(0,i.T)(s.current,{config:c,...f}).then(e=>{u(e),"function"==typeof r&&r(e)})},[e]),(0,l.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:s,className:t,style:r,"data-height":c})}var a=t("1858"),c=t("3262"),d=t("1705"),h=t("7645"),u=t("8168"),m=t("8228"),p=t("5050");function g(e){let[s,t]=(0,l.useState)(e.js),[o,i]=(0,l.useState)(e.ts),[r,a]=(0,l.useState)(e.react),[g,x]=(0,l.useState)(e.vue),[f,j]=(0,l.useState)(e.svelte),y="3.7rem",[v,b]=(0,l.useState)(!0),[S,w]=(0,l.useState)(y),C=(0,l.useRef)(null),_=()=>{setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,l.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===s?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};t(e(s,"js")),i(e(o,"ts")),a(e(r,"jsx")),x(e(g,"html")),j(e(f,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${m.Z.details}`,"data-collapsed":v,style:{height:v?y:S,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!v),_()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"js",children:s})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"ts",children:o})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"jsx",children:r})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"html",children:f})})]})})})]})}function x(e){let{className:s,style:t,showCode:l,height:i,...c}=e,{colorMode:d}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),u=`
|
|
import { createPlayground } from 'livecodes';
|
|
|
|
const options = ${h(c)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),m=`
|
|
import { createPlayground, type EmbedOptions } from 'livecodes';
|
|
|
|
const options: EmbedOptions = ${h(c)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),p=`
|
|
import LiveCodes from 'livecodes/react';
|
|
|
|
export default function App() {
|
|
const options = ${h(c)};
|
|
return (<LiveCodes {...options}></LiveCodes>);
|
|
}
|
|
|
|
`.trimStart(),x=`
|
|
<script setup>
|
|
import LiveCodes from "livecodes/vue";
|
|
|
|
const options = ${h(c)};
|
|
</script>
|
|
<template>
|
|
<LiveCodes v-bind="options" />
|
|
</template>
|
|
|
|
`,f=`
|
|
<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)(r,{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:m,react:p,vue:x,svelte:f})]})}},8294:function(e,s,t){t.d(s,{T:function(){return o},r:function(){return l}});var n=t(7728);async function o(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(s=e,e=null);let{config:t={},headless:n,loading:o="lazy",view:i}=s,r=n||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(r&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(r)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(l(s)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",r?"eager":o),d.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof t&&Object.keys(t).length>0&&d.searchParams.set("config","sdk");let u=s.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,p="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let s=a.dataset.height||a.style.height;if(s&&!r){let e=isNaN(Number(s))?s:s+"px";a.style.height=e}"false"===a.dataset.defaultStyles||r||(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",l=a.querySelector(`iframe.${n}`),i=l||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"===o?"eager":"lazy"),r?C(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(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(s.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:t},h))}),i.onload=()=>{e(i)},i.src=d.href,l||a.appendChild(i)}),x=new Promise(e=>{addEventListener("message",function s(t){t.source===g.contentWindow&&t.origin===h&&t.data?.type==="livecodes-ready"&&(removeEventListener("message",s),e(),x.settled=!0)})}),f=()=>m?Promise.reject(p):new Promise(async e=>{x.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),j=(e,s)=>new Promise(async(t,n)=>{if(m)return n(p);await f();let o=_();addEventListener("message",function s(l){if(l.source===g.contentWindow&&l.origin===h&&l.data?.type==="livecodes-api-response"&&l.data?.id===o&&l.data.method===e){removeEventListener("message",s);let e=l.data.payload;e?.error?n(e.error):t(e)}}),g.contentWindow?.postMessage({method:e,id:o,args:s},h)}),y={},v=["load","ready","code","console","tests","destroy"],b=(e,s)=>{if(m)throw Error(p);return v.includes(e)?(j("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(s),{remove:()=>{y[e]=y[e]?.filter(e=>e!==s),y[e]?.length===0&&j("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 s=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==h||!s||!y[s])return;let t=e.data?.payload;y[s]?.forEach(e=>{e(t)})});let w=()=>{Object.values(y).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,s)=>{e.forEach(async e=>{e.isIntersecting&&(await f(),s.unobserve(a))})},{rootMargin:"150px"}).observe(a);let _=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>f(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,s)=>j("show",[e,s]),runTests:()=>j("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var s=arguments.length,t=Array(s>1?s-1:0),n=1;n<s;n++)t[n-1]=arguments[n];return j("exec",[e,...t])},destroy:()=>x.settled?j("destroy").then(w):m?Promise.reject(p):(w(),Promise.resolve())}}function l(){let e,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:t="https://livecodes.io",params:o={},config:l={},headless:i,import:r,lite:a,view:c,...d}=s;try{e=new URL(t)}catch{throw Error(`${t} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(s=>{let[t,n]=s;void 0!==n&&e.searchParams.set(t,String(n))});let u="headless"===s.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof l&&null==l.mode?l.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 l&&null==l.view&&"headless"!==c?l.view=c:e.searchParams.set("view",c)),"string"==typeof l)try{new URL(l),e.searchParams.set("config",encodeURIComponent(l))}catch{throw Error('"config" is not a valid URL or configuration object.')}else l&&"object"==typeof l&&Object.keys(l).length>0&&(l.title&&"Untitled Project"!==l.title&&e.searchParams.set("title",l.title),l.description&&l.description.length>0&&e.searchParams.set("description",l.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(l))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(s=>{e.searchParams.set(s,encodeURIComponent(String(o[s])))})}return r&&e.searchParams.set("x",encodeURIComponent(r)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,s,t){t.d(s,{Z:function(){return r},a:function(){return i}});var n=t(7294);let o={},l=n.createContext(o);function i(e){let s=n.useContext(l);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(l.Provider,{value:s},e.children)}}}]); |