livecode-static/docs/assets/js/6804bced.ef6f30bc.js

"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8477"],{4144:function(e,t,s){s.r(t),s.d(t,{importsDemo:()=>g,multiFiles:()=>x,frontMatter:()=>a,customRoot:()=>y,metadata:()=>n,cssModulesDemo:()=>p,assets:()=>d,scopedCssDemo:()=>h,toc:()=>w,contentTitle:()=>c,importExternalWithImportMap:()=>f,multi:()=>j,importExternal:()=>v,jsxDemo:()=>m,processorsDemo:()=>u,default:()=>Z,importDataUrls:()=>b});var n=JSON.parse('{"id":"languages/vue","title":"Vue SFC","description":"Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.","source":"@site/docs/languages/vue.mdx","sourceDirName":"languages","slug":"/languages/vue","permalink":"/docs/languages/vue","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/vue.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Vento","permalink":"/docs/languages/vento"},"next":{"title":"Vue 2 SFC","permalink":"/docs/languages/vue2"}}'),o=s("5893"),i=s("65"),r=s("3365"),l=s("8500");let a={},c="Vue SFC",d={},h={vue:`<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>`},p={vue:`<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>`},u={vue:`<template lang="pug">
h1 {{ msg }}
</template>

<script lang="ts" setup>
  const msg: string = 'Hello!'
</script>

<style lang="scss">
  $primary-color: #666;
  body {
    color: $primary-color;
  }
</style>
`},m={vue:`<script>
  export default {
    data() {
      return {
        counter: 0,
        align: "center",
      };
    },
    methods: {
      increment() {
        this.counter += 1;
      },
    },
    render() {
      return (
        <div class="container">
          <h1>Hello, Vue!</h1>
          <p>You clicked {this.counter} times.</p>
          <button onClick={this.increment}>Click me</button>
        </div>
      );
    },
  };
</script>

<style scoped>
  .container,
  .container button {
    text-align: v-bind("align");
    font: 1em sans-serif;
  }
  .logo {
    width: 150px;
  }
</style>`},g={vue:`<script setup>
   import { ref } from 'vue';
   import confetti from 'canvas-confetti';
   import "bootstrap/dist/css/bootstrap.css"

   const count = ref(0);
   function increment() {
     count.value++;
     confetti();
   }
</script>

<template>
  <div class="m-5 text-center">
    <p>You clicked {{ count }} times.</p>
    <button @click="increment()">Click me</button>
  </div>
</template>
`},j={markup:{language:"vue",content:`<script setup>
import Counter from './Counter.vue';
</script>

<template>
  <div class="w-full text-center">
    <Counter start="5" />
  </div>
</template>
`},script:{language:"vue",content:`<script setup lang="ts">
  import { ref } from "vue";
  const props = defineProps({
    start: {
      type: Number,
      default: 0,
    },
  });
  const count = ref(props.start);
</script>

<template>
  <div class="mt-8">
    <span ref="counter" class="text-3xl font-bold">{{ count }}</span>
  </div>
  <div class="mt-4 space-x-4">
    <button title="-" @click="count--" class="text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl">-</button>
    <button title="+" @click="count++" class="text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl">+</button>
  </div>
  <div class="mt-4 space-x-4">
    <button @click="count = props.start" class="text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl">Reset</button>
  </div>
</template>
`},style:{language:"css",content:'@import "tailwindcss";\n'},processors:["tailwindcss"]},x={...j,markup:{...j.markup,title:"App.vue"},script:{...j.script,title:"Counter.vue"},style:{...j.style,title:"styles.css",order:3}},v={activeEditor:"script",script:{language:"vue",content:`<script setup>
import Counter from 'https://raw.githubusercontent.com/hatemhosny/simple-vue-counter/main/src/App.vue';
</script>

<template>
  <Counter />
</template>
`},style:{language:"css",content:'@import "tailwindcss";\n'},processors:["tailwindcss"]},f={activeEditor:"script",script:{language:"vue",content:`<script setup>
import App from 'https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/App.vue';
</script>

<template>
<App />
</template>
`},imports:{"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList":"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js","https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition":"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"}},b={activeEditor:"script",script:{language:"vue",content:`<script setup>
import Counter from 'data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+';
</script>

<template>
  <Counter />
</template>
`},style:{language:"css",content:'@import "tailwindcss";\n'},processors:["tailwindcss"]},y={markup:{language:"html",content:`<h1>Custom Root Element</h1>
<div id="livecodes-app"></div>
<p>...other page content</p>
`},script:{language:"vue",content:"<template>I'm a Vue SFC</template>"}},w=[{value:"Usage",id:"usage",level:2},{value:"Demo",id:"demo",level:3},{value:"Scoped CSS",id:"scoped-css",level:3},{value:"CSS Modules",id:"css-modules",level:3},{value:"CSS Frameworks",id:"css-frameworks",level:3},{value:"Languages and Pre-Processors",id:"languages-and-pre-processors",level:3},{value:"JSX",id:"jsx",level:3},{value:"<code>src</code> Imports",id:"src-imports",level:3},{value:"Module Imports",id:"module-imports",level:3},{value:"Multiple Components",id:"multiple-components",level:3},{value:"Importing External SFCs",id:"importing-external-sfcs",level:3},{value:"Importing Data URLs",id:"importing-data-urls",level:3},{value:"Root Element",id:"root-element",level:3},{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:"Limitations",id:"limitations",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function C(e){let t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"vue-sfc",children:"Vue SFC"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://vuejs.org/",children:"Vue.js"}),", The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces."]}),"\n",(0,o.jsxs)(t.p,{children:["This is the documentation for LiveCodes language support for Vue ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-spec.html",children:"Single-File Component (SFC)"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["The support for Vue 2 SFC (the older, EOL version) is ",(0,o.jsx)(t.a,{href:"/docs/languages/vue2",children:"documented separately"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsxs)(t.p,{children:["Vue SFC can be used as documented in the ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-spec.html",children:"specs"}),", including support for ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-css-features.html#scoped-css",children:"Scoped CSS"}),", ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-css-features.html#css-modules",children:"CSS Modules"}),", ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-spec.html#pre-processors",children:"pre-processors"}),", ",(0,o.jsx)(t.a,{href:"https://vuejs.org/guide/extras/render-function.html#jsx-tsx",children:"JSX"})," and ",(0,o.jsxs)(t.a,{href:"https://vuejs.org/api/sfc-spec.html#src-imports",children:[(0,o.jsx)(t.code,{children:"src"})," imports"]}),". See below for usage."]}),"\n",(0,o.jsx)(t.h3,{id:"demo",children:"Demo"}),"\n","\n",(0,o.jsx)(r.Z,{template:"vue",height:"400"}),"\n",(0,o.jsx)(t.h3,{id:"scoped-css",children:"Scoped CSS"}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.p,{children:["When a ",(0,o.jsx)(t.code,{children:"<style>"})," tag has the scoped attribute, its CSS will apply to elements of the current component only."]}),"\n",(0,o.jsxs)(t.p,{children:["\u2014 ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-css-features.html#scoped-css",children:"docs"})]}),"\n"]}),"\n","\n",(0,o.jsx)(l.Z,{params:h,code:h.vue,language:"html",formatCode:!1}),"\n",(0,o.jsx)(t.h3,{id:"css-modules",children:"CSS Modules"}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.p,{children:["A ",(0,o.jsx)(t.code,{children:"<style module>"})," tag is compiled as CSS Modules and exposes the resulting CSS classes to the component as an object under the key of ",(0,o.jsx)(t.code,{children:"$style"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["\u2014 ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-css-features.html#css-modules",children:"docs"})]}),"\n"]}),"\n","\n",(0,o.jsx)(l.Z,{params:p,code:p.vue,language:"html",formatCode:!1}),"\n",(0,o.jsx)(t.h3,{id:"css-frameworks",children:"CSS Frameworks"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"/docs/features/css#css-processors",children:"CSS Frameworks"})," supported in LiveCodes (e.g. ",(0,o.jsx)(t.a,{href:"/docs/languages/tailwindcss",children:"Tailwind CSS"}),", ",(0,o.jsx)(t.a,{href:"/docs/languages/unocss",children:"UnoCSS"}),", ",(0,o.jsx)(t.a,{href:"/docs/languages/windicss",children:"WindiCSS"}),") can detect class names added in Vue SFCs. Make sure that the required utility is enabled (from style editor menu or in ",(0,o.jsx)(t.code,{children:"processors"})," property of ",(0,o.jsx)(t.a,{href:"/docs/configuration/configuration-object#processors",children:"configuration object"}),")."]}),"\n",(0,o.jsxs)(t.p,{children:["See ",(0,o.jsx)(t.a,{href:"#multiple-components",children:"example below"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"languages-and-pre-processors",children:"Languages and Pre-Processors"}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.p,{children:["Blocks can declare pre-processor languages using the ",(0,o.jsx)(t.code,{children:"lang"})," attribute."]}),"\n",(0,o.jsxs)(t.p,{children:["\u2014 ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-spec.html#pre-processors",children:"docs"})]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["Many of the ",(0,o.jsx)(t.a,{href:"/docs/languages/",children:"languages supported in LiveCodes"})," can be used. The value of ",(0,o.jsx)(t.code,{children:"lang"})," attribute can be the language name (specified in its documentation page) or any of its aliases (extensions)."]}),"\n","\n",(0,o.jsx)(l.Z,{params:u,code:u.vue,language:"html",formatCode:!1}),"\n",(0,o.jsx)(t.h3,{id:"jsx",children:"JSX"}),"\n",(0,o.jsx)(t.p,{children:"JSX can be used in render functions without needing any configuration."}),"\n","\n",(0,o.jsx)(l.Z,{params:m,code:m.vue,language:"html",formatCode:!1}),"\n",(0,o.jsxs)(t.h3,{id:"src-imports",children:[(0,o.jsx)(t.code,{children:"src"})," Imports"]}),"\n",(0,o.jsx)(t.p,{children:"The src attribute can be used to import an external file for a language block:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",children:'<template src="https://my-website.com/template.html"></template>\n<style src="https://my-website.com/style.css"></style>\n<script src="https://my-website.com/script.js"><\/script>\n'})}),"\n",(0,o.jsxs)(t.p,{children:["The value of ",(0,o.jsx)(t.code,{children:"src"})," attribute can be either:"]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["Absolute URL (e.g. ",(0,o.jsx)(t.code,{children:"https://unpkg.com/todomvc-app-css/index.css"}),")"]}),"\n",(0,o.jsxs)(t.li,{children:["Path in npm package (e.g. ",(0,o.jsx)(t.code,{children:"todomvc-app-css/index.css"}),")"]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["Relative paths (e.g. ",(0,o.jsx)(t.code,{children:"./my-styles.css"}),") cannot be used (because there is no file system in LiveCodes)."]}),"\n",(0,o.jsxs)(t.p,{children:["The imported sources can use any of the supported languages/pre-processors (identified by the file extension or can be specified by ",(0,o.jsx)(t.code,{children:"lang"})," attribute)."]}),"\n",(0,o.jsx)(t.h3,{id:"module-imports",children:"Module Imports"}),"\n",(0,o.jsxs)(t.p,{children:["npm modules can be imported as described in the section about ",(0,o.jsx)(t.a,{href:"/docs/features/module-resolution",children:"module resolution"}),", including bare module imports and importing from different CDNs. Stylesheets imported in the ",(0,o.jsx)(t.code,{children:"script"})," block are added as ",(0,o.jsx)(t.code,{children:'<link rel="stylesheet">'})," tags in the page ",(0,o.jsx)(t.code,{children:"head"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,o.jsx)(l.Z,{params:g,code:g.vue,language:"html",formatCode:!1}),"\n",(0,o.jsxs)(t.p,{children:["Module imports can be customized using import maps as described in ",(0,o.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"module resolution"})," documentations."]}),"\n",(0,o.jsx)(t.h3,{id:"multiple-components",children:"Multiple Components"}),"\n",(0,o.jsxs)(t.p,{children:["Vue is supported in both ",(0,o.jsx)(t.a,{href:"/docs/features/projects#markup-editor",children:"markup"})," and ",(0,o.jsx)(t.a,{href:"/docs/features/projects#script-editor",children:"script"})," editors."]}),"\n",(0,o.jsx)(t.p,{children:"This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported."}),"\n",(0,o.jsxs)(t.p,{children:["This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor,\ne.g. ",(0,o.jsx)(t.code,{children:"./script.vue"}),", ",(0,o.jsx)(t.code,{children:"./Component.vue"}),", ",(0,o.jsx)(t.code,{children:"./Counter.vue"}),", etc."]}),"\n","\n",(0,o.jsx)(r.Z,{config:j}),"\n",(0,o.jsxs)(t.p,{children:["Please note that LiveCodes ",(0,o.jsx)(t.a,{href:"/docs/features/projects",children:"does not have the concept of a file system"}),". However, you can configure ",(0,o.jsx)(t.a,{href:"/docs/configuration/configuration-object#markup",children:"editor options"})," like ",(0,o.jsx)(t.code,{children:"title"}),", ",(0,o.jsx)(t.code,{children:"order"})," and ",(0,o.jsx)(t.code,{children:"hideTitle"})," to simulate multiple files, change editor order or even hide editors."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,o.jsx)(r.Z,{config:x}),"\n",(0,o.jsxs)(t.p,{children:["When both markup and script editors use Vue, the component in the markup editor is used as the main component rendered in the ",(0,o.jsx)(t.a,{href:"#root-element",children:"root element"}),".\nTo render the component in the script editor, it has to be imported and used by the main component."]}),"\n",(0,o.jsx)(t.h3,{id:"importing-external-sfcs",children:"Importing External SFCs"}),"\n",(0,o.jsxs)(t.p,{children:["External Vue SFCs can be imported. The import URL has to be an absolute URL ending with ",(0,o.jsx)(t.code,{children:".vue"})," extension. Any bare or relative imports in the imported files are resolved and compiled recursively."]}),"\n",(0,o.jsx)(t.p,{children:"This is an example of importing a Vue SFC, which in turn imports other Vue SFCs (the imported components use Tailwind CSS, which is enabled in this project as a CSS preprocessor):"}),"\n","\n",(0,o.jsxs)("div",{style:{marginBottom:"2em"},children:[(0,o.jsx)(l.Z,{config:v,style:{display:"inline"}})," - ",(0,o.jsx)("a",{href:"https://github.com/hatemhosny/simple-vue-counter",target:"_blank",rel:"noopener noreferrer",children:(0,o.jsx)(o.Fragment,{children:"view source on GitHub"})})]}),"\n",(0,o.jsx)(r.Z,{config:v}),"\n",(0,o.jsxs)(t.p,{children:["Please note that extensionless imports are not supported. However, you may customize the import URL using import maps as described in ",(0,o.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"module resolution"})," section."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n  "imports": {\n    "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js",\n    "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"\n  }\n}\n'})}),"\n","\n",(0,o.jsxs)("div",{style:{marginBottom:"2em"},children:[(0,o.jsx)(l.Z,{config:f,style:{display:"inline"}})," "," - ",(0,o.jsx)("a",{href:"https://github.com/hatemhosny/vue3-samples",target:"_blank",rel:"noopener noreferrer",children:(0,o.jsx)(o.Fragment,{children:"view source on GitHub"})})]}),"\n",(0,o.jsx)(t.h3,{id:"importing-data-urls",children:"Importing Data URLs"}),"\n",(0,o.jsxs)(t.p,{children:["You may want to import other SFCs without having to host them on a server.\nThese components can be encoded as ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data",children:"data URLs"})," and imported as usual."]}),"\n",(0,o.jsxs)(t.p,{children:["The data URL has to start with ",(0,o.jsx)(t.code,{children:"data:text/vue"})," to be recognized as a Vue SFC. Any imports in the imported URLs (even if they are also data URLs) are resolved and compiled recursively."]}),"\n",(0,o.jsx)(t.admonition,{type:"info",children:(0,o.jsx)(t.p,{children:'The code in any code editor can be encoded as data URL from the LiveCodes UI using the "Copy code as data URL" button below the code editor.'})}),"\n",(0,o.jsx)(t.p,{children:"This is the previous demo that uses data URLs (with nested imports) instead of external URLs:"}),"\n","\n",(0,o.jsx)("div",{style:{marginBottom:"1em"},children:(0,o.jsx)(l.Z,{config:b,style:{display:"inline"}})}),"\n",(0,o.jsx)(r.Z,{config:b}),"\n",(0,o.jsx)(t.p,{children:"In the above demo, this component is imported:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{children:"data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+\n"})}),"\n",(0,o.jsx)(t.p,{children:"which imports these:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{children:"data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctZ3JheS01MDAgaG92ZXI6YmctZ3JheS02MDAgdHJhbnNpdGlvbiBweS0xIHB4LTQgdGV4dC13aGl0ZSByb3VuZGVkIGRyb3Atc2hhZG93LXhsIg0KICA+DQogICAge3sgdGl0bGUgfX0NCiAgPC9idXR0b24+DQo8L3RlbXBsYXRlPg==\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{children:"data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNjAwIHRyYW5zaXRpb24gcHktMSBweC00IHRleHQtd2hpdGUgcm91bmRlZCBkcm9wLXNoYWRvdy14bCINCiAgPg0KICAgIHt7IHRpdGxlIH19DQogIDwvYnV0dG9uPg0KPC90ZW1wbGF0ZT4=\n"})}),"\n",(0,o.jsx)(t.h3,{id:"root-element",children:"Root Element"}),"\n",(0,o.jsxs)(t.p,{children:["To ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/application.html#app-mount",children:"mount"})," the application instance to a specific DOM element use ",(0,o.jsx)(t.code,{children:'"livecodes-app"'})," as the element ",(0,o.jsx)(t.code,{children:"id"})," in the HTML. Otherwise, if that element is not found, a new ",(0,o.jsx)(t.code,{children:"div"})," element is added to ",(0,o.jsx)(t.code,{children:"document.body"})," and is used to mount the instance."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,o.jsx)(r.Z,{config:y}),"\n",(0,o.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"vue"})}),"\n",(0,o.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".vue"}),", ",(0,o.jsx)(t.code,{children:".vue3"})]}),"\n",(0,o.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"script"}),", ",(0,o.jsx)(t.code,{children:"markup"})]}),"\n",(0,o.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(t.p,{children:["The official ",(0,o.jsx)(t.a,{href:"https://github.com/vuejs/core/tree/main/packages/compiler-sfc",children:"@vue/compiler-sfc"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"@vue/compiler-sfc"}),": v3.5.13"]}),"\n",(0,o.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,o.jsxs)(t.p,{children:["Using ",(0,o.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"limitations",children:"Limitations"}),"\n",(0,o.jsx)(t.p,{children:"Currently, Vue support has the following limitations:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"SSR is not supported."}),"\n",(0,o.jsxs)(t.li,{children:["The ",(0,o.jsx)(t.a,{href:"https://vuejs.org/guide/components/props#props-declaration",children:(0,o.jsx)(t.code,{children:"defineProps()"})})," macro cannot infer props from TypeScript types not defined in the same file."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/issues/757",children:"PRs are welcome"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://livecodes.io/?template=vue",children:"https://livecodes.io/?template=vue"})}),"\n",(0,o.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://vuejs.org/",children:"Vue.js"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-spec.html",children:"Vue SFC specs"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://github.com/css-modules/css-modules",children:"CSS Modules"})}),"\n"]})]})}function Z(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(C,{...e})}):C(e)}},3365:function(e,t,s){s.d(t,{Z:()=>j});var n=s("5893"),o=s("4200"),i=s("7294"),r=s("8294");function l(e){let t=(0,i.useRef)(null),[s,o]=(0,i.useState)(e.className||""),[l,a]=(0,i.useState)(e.style||{}),[c,d]=(0,i.useState)(e.height),[h,p]=(0,i.useState)(),[u,m]=(0,i.useState)(JSON.stringify(e.config||"")),[g,j]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:l,config:c,...x}=e;if(o(s||""),a(n||{}),d(i),h&&g===JSON.stringify(x)){if(u===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 j(JSON.stringify(x)),h?.destroy(),(0,r.T)(t.current,{config:c,...x}).then(e=>{p(e),"function"==typeof l&&l(e)})},[e]),(0,i.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"),p=s("8168"),u=s("8228"),m=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[o,r]=(0,i.useState)(e.ts),[l,a]=(0,i.useState)(e.react),[g,j]=(0,i.useState)(e.vue),[x,v]=(0,i.useState)(e.svelte),f="3.7rem",[b,y]=(0,i.useState)(!0),[w,C]=(0,i.useState)(f),Z=(0,i.useRef)(null),S=()=>{setTimeout(()=>{C(`calc(${Z.current.offsetHeight}px + ${f})`)},5),setTimeout(()=>{C(`calc(${Z.current.offsetHeight}px + ${f})`)},255)};return(0,i.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")),r(e(o,"ts")),a(e(l,"jsx")),j(e(g,"html")),v(e(x,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":b,style:{height:b?f:w,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{y(!b),S()},children:"show code"}),(0,n.jsx)("div",{ref:Z,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:S},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:S},children:(0,n.jsx)(d.Z,{language:"ts",children:o})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:S},children:(0,n.jsx)(d.Z,{language:"jsx",children:l})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:S},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:S},children:(0,n.jsx)(d.Z,{language:"html",children:x})})]})})})]})}function j(e){let{className:t,style:s,showCode:i,height:r,...c}=e,{colorMode:d}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),p=`
import { createPlayground } from 'livecodes';

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

`.trimStart(),u=`
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(),j=`
<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:r||"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:p,ts:u,react:m,vue:j,svelte:x})]})}},8500:function(e,t,s){s.d(t,{Z:()=>c});var n=s("5893");s("7294");var o=s("6735");function i(e){let{children:t,fallback:s}=e;return(0,o.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var r=s("1705"),l=s("8294"),a=s("1858");function c(e){let{params:t,config:s,code:o,language:c="js",codeTitle:d="",showLineNumbers:h=!1,formatCode:p=!0,linkText:u="Run in LiveCodes",style:m={},className:g=""}=e,j=(0,l.r)({appUrl:a.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...m},className:g,children:[o&&(0,n.jsx)(i,{children:()=>(0,n.jsx)(r.Z,{language:c,title:d,showLineNumbers:h,children:p?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})}(o,c):o})}),(0,n.jsxs)("a",{href:j,target:"_blank",rel:"noreferrer",children:[u,(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 o},r:function(){return i}});var n=s(7728);async function o(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:o="lazy",view:r}=t,l=n||"headless"===r,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)S(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":o);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.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,g="Cannot call API methods after calling `destroy()`.",j=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",i=a.querySelector(`iframe.${n}`),r=i||document.createElement("iframe");r.classList.add(n),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"===o?"eager":"lazy"),l?S(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===r.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===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),r.onload=()=>{e(r)},r.src=d.href,i||a.appendChild(r)}),x=new Promise(e=>{addEventListener("message",function t(s){s.source===j.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),x.settled=!0)})}),v=()=>m?Promise.reject(g):new Promise(async e=>{x.settled&&e(),j.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),f=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await v();let o=R();addEventListener("message",function t(i){if(i.source===j.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===o&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),j.contentWindow?.postMessage({method:e,id:o,args:t},h)}),b={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return y.includes(e)?(f("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&f("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=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=C(e.data?.type??"");if(e.source!==j.contentWindow||e.origin!==h||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let Z=()=>{Object.values(b).forEach(e=>{e.length=0}),j?.remove?.(),m=!0};function S(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,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let R=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>f("run"),format:e=>f("format",[e]),getShareUrl:e=>f("getShareUrl",[e]),getConfig:e=>f("getConfig",[e]),setConfig:e=>f("setConfig",[e]),getCode:()=>f("getCode"),show:(e,t)=>f("show",[e,t]),runTests:()=>f("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 f("exec",[e,...s])},destroy:()=>x.settled?f("destroy").then(Z):m?Promise.reject(g):(Z(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:i={},headless:r,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 p="headless"===t.view||r;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.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 i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));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(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),p&&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 r}});var n=s(7294);let o={},i=n.createContext(o);function r(e){let t=n.useContext(i);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(o):e.components||o:r(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]);