sandpack-vue3
Version:
Vue3 components that give you the power of editable sandboxes that run in the browser.
976 lines (867 loc) • 148 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var autocomplete = require('@codemirror/autocomplete');
var language = require('@codemirror/language');
var view = require('@codemirror/view');
var langCss = require('@codemirror/lang-css');
var langHtml = require('@codemirror/lang-html');
var langJavascript = require('@codemirror/lang-javascript');
var highlight = require('@lezer/highlight');
var core = require('@stitches/core');
var dequal = require('dequal');
var sandpackClient = require('@codesandbox/sandpack-client');
var state = require('@codemirror/state');
var commands = require('@codemirror/commands');
var _a = require('lz-string');
var Wa = require('ansi-to-vue3');
var Fc = require('clean-set');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var _a__default = /*#__PURE__*/_interopDefault(_a);
var Wa__default = /*#__PURE__*/_interopDefault(Wa);
var Fc__default = /*#__PURE__*/_interopDefault(Fc);
var Or=Object.defineProperty,Rr=Object.defineProperties;var _r=Object.getOwnPropertyDescriptors;var qn=Object.getOwnPropertySymbols;var Ir=Object.prototype.hasOwnProperty,Pr=Object.prototype.propertyIsEnumerable;var Hn=(e,o,t)=>o in e?Or(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,y=(e,o)=>{for(var t in o||(o={}))Ir.call(o,t)&&Hn(e,t,o[t]);if(qn)for(var t of qn(o))Pr.call(o,t)&&Hn(e,t,o[t]);return e},E=(e,o)=>Rr(e,_r(o));var _e=(e,o,t)=>new Promise((n,s)=>{var l=u=>{try{r(t.next(u));}catch(g){s(g);}},d=u=>{try{r(t.throw(u));}catch(g){s(g);}},r=u=>u.done?n(u.value):Promise.resolve(u.value).then(l,d);r((t=t.apply(e,o)).next());});var jr={onCodeUpdate:{type:Function},code:{type:String,required:!0},filePath:{type:String},fileType:{type:String},showLineNumbers:{type:Boolean,default:!1},showInlineErrors:{type:Boolean,default:!1},wrapContent:{type:Boolean,default:!1},editorState:{type:String,default:"pristine"},readOnly:{type:Boolean,default:!1},showReadOnly:{type:Boolean,default:!0},decorators:{type:Array,default(){return []}},initMode:{type:String,default:"lazy"},extensions:{type:Array,default(){return []}},extensionsKeymap:{type:Array,default(){return []}},additionalLanguages:{type:Array,default(){return []}}},Un=jr;function Hr(e){return vue.getCurrentScope()?(vue.onScopeDispose(e),!0):!1}var Ur=typeof window!="undefined",zr=Ur?window:void 0;function zn(e){var t;let o=vue.unref(e);return (t=o==null?void 0:o.$el)!=null?t:o}var po=()=>{};function fo(e,o,t={}){let{root:n,rootMargin:s="0px",threshold:l=.1,window:d=zr}=t,r=d&&"IntersectionObserver"in d,u=po,g=r?vue.watch(()=>({el:zn(e),root:zn(n)}),({el:h,root:c})=>{if(u(),!h)return;let x=new IntersectionObserver(o,{root:c,rootMargin:s,threshold:l});x.observe(h),u=()=>{x.disconnect(),u=po;};},{immediate:!0,flush:"post"}):po,f=()=>{u(),g();};return Hr(f),{isSupported:r,stop:f}}var Ie=e=>{let o=e.lastIndexOf("/");return e.slice(o+1)},Yn=(e,o)=>{let t=(e[0]==="/"?e.slice(1):e).split("/"),n=[];if(t.length===1)n.unshift(t[0]);else for(let s=0;s<o.length;s++){let l=o[s].split("/");for(let d=1;d<=t.length;d++){let r=t[t.length-d],u=l[l.length-d];if(n.length<d&&n.unshift(r),r!==u)break}}return n.length<t.length&&n.unshift(".."),n.join("/")};var vo=e=>{let o=0,t=0,n=0;if(e.startsWith("#")){if(e.length<7)return !0;o=parseInt(e.substr(1,2),16),t=parseInt(e.substr(3,2),16),n=parseInt(e.substr(5,2),16);}else {let l=e.replace("rgb(","").replace("rgba(","").replace(")","").split(",");if(l.length<3)return !0;o=parseInt(l[0],10),t=parseInt(l[1],10),n=parseInt(l[2],10);}return (o*299+t*587+n*114)/1e3<128},Yr=0,Pe=()=>(+(Date.now().toString(10).substr(0,4)+Yr++)).toString(16);var tt=()=>"",ho=()=>tt,Jn=Object.getOwnPropertyDescriptors({toString:tt});Object.defineProperties(tt,Jn);Object.defineProperties(ho,Jn);var Wn={createTheme:tt,css:ho,getCssText:tt,keyframes:ho};var ke={colors:{surface1:"#ffffff",surface2:"#EFEFEF",surface3:"#F3F3F3",disabled:"#C5C5C5",base:"#323232",clickable:"#808080",hover:"#4D4D4D",accent:"#3973E0",error:"#EA3323",errorSurface:"#FCF1F0",warning:"#6A4516",warningSurface:"#FEF2C0"},syntax:{plain:"#151515",comment:{color:"#999",fontStyle:"italic"},keyword:"#7C5AE3",tag:"#0971F1",punctuation:"#3B3B3B",definition:"#85A600",property:"#3B3B3B",static:"#3B3B3B",string:"#2E6BD0"},font:{body:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',mono:'"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',size:"13px",lineHeight:"20px"}},Et={colors:{surface1:"#151515",surface2:"#252525",surface3:"#2F2F2F",disabled:"#4D4D4D",base:"#808080",clickable:"#999999",hover:"#C5C5C5",accent:"#E5E5E5",error:"#FFB4A6",errorSurface:"#690000",warning:"#E7C400",warningSurface:"#3A3000"},syntax:{plain:"#FFFFFF",comment:{color:"#757575",fontStyle:"italic"},keyword:"#77B7D7",tag:"#DFAB5C",punctuation:"#ffffff",definition:"#86D9CA",property:"#77B7D7",static:"#C64640",string:"#977CDC"},font:{body:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',mono:'"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',size:"13px",lineHeight:"20px"}},Xn,Zn={light:ke,dark:Et,auto:typeof window!="undefined"&&(Xn=window==null?void 0:window.matchMedia)!=null&&Xn.call(window,"(prefers-color-scheme: dark)").matches?Et:ke};var L="sp",Wr=()=>typeof __UNSTYLED_COMPONENTS__!="undefined"&&!!__UNSTYLED_COMPONENTS__,{createTheme:go,css:m,getCssText:Xr,keyframes:wt}=Wr()?Wn:core.createStitches({prefix:L}),Zr={space:new Array(11).fill(" ").reduce((e,o,t)=>E(y({},e),{[t+1]:`${(t+1)*4}px`}),{}),border:{radius:"4px"},layout:{height:"300px",headerHeight:"40px"},transitions:{default:"150ms ease"},zIndices:{base:"1",overlay:"2",top:"3"}},yo=e=>{let t=Object.entries(e.syntax).reduce((n,[s,l])=>{let d={[`color-${s}`]:l};return typeof l=="object"&&(d=Object.entries(l).reduce((r,[u,g])=>E(y({},r),{[`${u}-${s}`]:g}),{})),y(y({},n),d)},{});return E(y({},Zr),{colors:e.colors,font:e.font,syntax:t})},bo=e=>{var g,f,h,c,x;let o="default";if(e=e||"light",typeof e=="string"){let a=Zn[e];if(!a)throw new Error(`[sandpack-vue3]: invalid theme '${e}' provided.`);return {theme:a,id:e,mode:vo(a.colors.surface1)?"dark":"light"}}let t=vo((f=(g=e==null?void 0:e.colors)==null?void 0:g.surface1)!=null?f:ke.colors.surface1)?"dark":"light",n=t==="dark"?Et:ke,s=y(y({},n.colors),(h=e==null?void 0:e.colors)!=null?h:{}),l=y(y({},n.syntax),(c=e==null?void 0:e.syntax)!=null?c:{}),d=y(y({},n.font),(x=e==null?void 0:e.font)!=null?x:{}),r={colors:s,syntax:l,font:d},u=e?Gr(JSON.stringify(r)):o;return {theme:r,id:`sp-${u}`,mode:t}},Gr=e=>{let o=0;for(let t=0;t<e.length;o&=o)o=31*o+e.charCodeAt(t++);return Math.abs(o)},Gn=()=>"";Gn.toString=Gn;var ot=(e,{line:o,column:t})=>e.line(o).from+(t!=null?t:0)-1,Qn=()=>view.EditorView.theme({"&":{backgroundColor:`var(--${L}-colors-surface1)`,color:`var(--${L}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${L}-colors-surface3)`,borderRadius:`var(--${L}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${L}-colors-errorSurface)`,borderRadius:`var(--${L}-border-radius)`},".cm-content":{caretColor:`var(--${L}-colors-accent)`,padding:`0 var(--${L}-space-4)`},".cm-scroller":{fontFamily:`var(--${L}-font-mono)`,lineHeight:`var(--${L}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${L}-colors-surface1)`,color:`var(--${L}-colors-disabled)`,border:"none",paddingLeft:`var(--${L}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${L}-font-lineHeight)`,minWidth:`var(--${L}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${L}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),he=e=>`${L}-syntax-${e}`,es=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((o,t)=>E(y({},o),{[`.${he(t)}`]:{color:`$syntax$color$${t}`,fontStyle:`$syntax$fontStyle$${t}`}}),{}),ts=e=>language.HighlightStyle.define([{tag:highlight.tags.link,textDecoration:"underline"},{tag:highlight.tags.emphasis,fontStyle:"italic"},{tag:highlight.tags.strong,fontWeight:"bold"},{tag:highlight.tags.keyword,class:he("keyword")},{tag:[highlight.tags.atom,highlight.tags.number,highlight.tags.bool],class:he("static")},{tag:highlight.tags.variableName,class:he("plain")},{tag:highlight.tags.function(highlight.tags.variableName),class:he("definition")},{tag:highlight.tags.standard(highlight.tags.tagName),class:he("tag")},{tag:[highlight.tags.function(highlight.tags.variableName),highlight.tags.definition(highlight.tags.function(highlight.tags.variableName)),highlight.tags.tagName],class:he("definition")},{tag:highlight.tags.propertyName,class:he("property")},{tag:[highlight.tags.literal,highlight.tags.inserted],class:he(e.syntax.string?"string":"static")},{tag:highlight.tags.punctuation,class:he("punctuation")},{tag:[highlight.tags.comment,highlight.tags.quote],class:he("comment")}]),os=(e,o,t)=>{if(!e&&!o)return "javascript";let n=o;if(!n&&e){let s=e.lastIndexOf(".");n=e.slice(s+1);}for(let s of t)if(n===s.name||s.extensions.includes(n||""))return s.name;switch(n){case"ts":case"tsx":return "typescript";case"html":case"svelte":case"vue":case"astro":return "html";case"css":case"less":case"scss":return "css";case"js":case"jsx":case"json":default:return "javascript"}},ns=(e,o)=>{let t={javascript:langJavascript.javascript({jsx:!0,typescript:!1}),typescript:langJavascript.javascript({jsx:!0,typescript:!0}),html:langHtml.html(),css:langCss.css()};for(let n of o)if(e===n.name)return n.language;return t[e]};function ss(e){return view.ViewPlugin.fromClass(class{constructor(o){this.decorations=this.getDecoration(o);}update(o){}getDecoration(o){if(!e)return view.Decoration.none;let t=e.map(n=>{var r,u,g;let s=view.Decoration.line({attributes:{class:(r=n.className)!=null?r:""}}),l=view.Decoration.mark({class:(u=n.className)!=null?u:"",attributes:(g=n.elementAttributes)!=null?g:void 0}),d=ot(o.state.doc,{line:n.line,column:n.startColumn})+1;if(n.startColumn&&n.endColumn){let f=ot(o.state.doc,{line:n.line,column:n.endColumn})+1;return l.range(d,f)}return s.range(d)});return view.Decoration.set(t)}},{decorations:o=>o.decorations})}function rs(){return ri}var si=view.Decoration.line({attributes:{class:"cm-errorLine"}}),ri=view.ViewPlugin.fromClass(class{constructor(){this.decorations=view.Decoration.none;}update(e){e.transactions.forEach(o=>{let t=o.annotation("show-error");if(t!==void 0){let n=ot(e.view.state.doc,{line:t})+1;this.decorations=view.Decoration.set([si.range(n)]);}else o.annotation("remove-errors")&&(this.decorations=view.Decoration.none);});}},{decorations:e=>e.decorations});var xo=(e,o)=>{if(e.length!==o.length)return !1;let t=!0;for(let n=0;n<e.length;n++)if(e[n]!==o[n]){t=!1;break}return t};var is=Symbol("classNamesProvider"),as=vue.defineComponent({name:"ClassNamesProvider",props:{classes:{type:Object,required:!1,default(){return {}}}},setup(e,{slots:o}){return vue.provide(is,e.classes),()=>vue.createVNode(vue.Fragment,null,[o.default?o.default():null])}}),S=()=>{let e=He(is,{});return function(t,n=[]){let s=`${L}-${t}`;return di(...n,s,e[s])}},di=(...e)=>e.filter(Boolean).join(" ");var $={"/styles.css":{code:`body {
font-family: sans-serif;
-webkit-font-smoothing: auto;
-moz-font-smoothing: auto;
-moz-osx-font-smoothing: grayscale;
font-smoothing: auto;
text-rendering: optimizeLegibility;
font-smooth: always;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
h1 {
font-size: 1.5rem;
}`}};var ls={files:{"/src/styles.css":$["/styles.css"],"/src/pages/index.astro":{code:`---
import "../styles.css";
const data = "world";
---
<h1>Hello {data}</h1>
<style>
h1 {
font-size: 1.5rem;
}
</style>`},"/src/env.d.ts":{code:'/// <reference types="astro/client" />'},".env":{code:'ASTRO_TELEMETRY_DISABLED="1"'},"/astro.config.mjs":{code:`import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({});`},"/tsconfig.json":{code:`{
"extends": "astro/tsconfigs/base"
}`},"/package.json":{code:JSON.stringify({dependencies:{astro:"^1.9.2","esbuild-wasm":"^0.17.19"},scripts:{dev:"astro dev",start:"astro dev",build:"astro build",preview:"astro preview",astro:"astro"}},null,2)}},main:"/src/pages/index.astro",environment:"node"};var cs={files:E(y({},$),{"/styles.css":$["/styles.css"],"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit + TS</title>
<link rel="stylesheet" href="/styles.css" />
<script type="module" src="/main.ts"></script>
</head>
<body>
<my-element />
</body>
</html>
`},"/main.ts":{code:`import { LitElement, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
@customElement('my-element')
export class MyElement extends LitElement {
@property()
msg = 'Hello world'
render() {
return html\`<h1>\${this.msg}</h1>\`
}
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement
}
}
`},"/vite-env.d.ts":{code:'/// <reference types="vite/client" />'},"/tsconfig.json":{code:`{
"compilerOptions": {
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"declaration": true,
"emitDeclarationOnly": true,
"outDir": "./types",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "Node",
"isolatedModules": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": false,
"skipLibCheck": true
},
"references": [{ "path": "./tsconfig.node.json" }]
}
`},"/tsconfig.node.json":{code:`{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
`},"/vite.config.ts":{code:`import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: '/main.ts',
formats: ['es'],
},
rollupOptions: {
external: /^lit/,
},
},
})
`},"/package.json":{code:`{
"name": "vite-lit",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build"
},
"dependencies": {
"lit": "^2.7.4"
},
"devDependencies": {
"typescript": "^5.0.4",
"vite": "4.2.2",
"esbuild-wasm": "^0.17.19"
}
}
`}}),entry:"/main.ts",main:"/main.ts",environment:"node"};var ds={files:E(y({},$),{"/pages/_app.js":{code:`import '../styles.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}`},"/pages/index.js":{code:`export default function Home({ data }) {
return (
<div>
<h1>Hello {data}</h1>
</div>
);
}
export function getServerSideProps() {
return {
props: { data: "world" },
}
}
`},"/next.config.js":{code:`/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig
`},"/package.json":{code:JSON.stringify({name:"my-app",version:"0.1.0",private:!0,scripts:{dev:"NEXT_TELEMETRY_DISABLED=1 next dev",build:"next build",start:"next start",lint:"next lint"},dependencies:{next:"12.1.6",react:"18.2.0","react-dom":"18.2.0","@next/swc-wasm-nodejs":"12.1.6"}},null,2)}}),main:"/pages/index.js",environment:"node"};var us={files:{"/index.js":{code:`const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end('Hello world');
});
server.listen(port, hostname, () => {
console.log(\`Server running at http://\${hostname}:\${port}/\`);
});`},"/package.json":{code:JSON.stringify({dependencies:{},scripts:{start:"node index.js"},main:"index.js"},null,2)}},main:"/index.js",environment:"node"};var ms={files:E(y({},$),{"/App.tsx":{code:`import { Component } from "solid-js";
const App: Component = () => {
return <h1>Hello world</h1>
};
export default App;`},"/index.tsx":{code:`import { render } from "solid-js/web";
import App from "./App";
import "./styles.css";
render(() => <App />, document.getElementById("app"));`},"/index.html":{code:`<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/index.tsx"></script>
</body>
</html>`},"/vite.config.ts":{code:`/// <reference types="vite/client" />
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
export default defineConfig({
plugins: [solidPlugin()],
build: {
target: 'esnext',
},
resolve: {
conditions: ['development', 'browser'],
},
});`},"/tsconfig.json":{code:`{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vite/client", "@testing-library/jest-dom"]
}
}`},"/package.json":{code:JSON.stringify({type:"module",scripts:{dev:"vite",build:"tsc && vite build",serve:"vite preview"},dependencies:{"solid-js":"^1.7.5"},devDependencies:{vite:"4.2.2",typescript:"^5.0.4","vite-plugin-solid":"^2.7.0","esbuild-wasm":"^0.17.19"},main:"/index.tsx"},null,2)}}),main:"/App.tsx",environment:"node"};var Co={files:E(y({},$),{"/index.js":{code:`import "./styles.css";
document.getElementById("app").innerHTML = \`
<h1>Hello world</h1>
\`;
`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/index.js"></script>
</body>
</html>
`},"/package.json":{code:JSON.stringify({scripts:{dev:"vite",build:"vite build",preview:"vite preview"},devDependencies:{vite:"4.2.2","esbuild-wasm":"^0.17.19"}},null,2)}}),main:"/index.js",environment:"node"};var So={files:E(y({},$),{"/App.jsx":{code:`export default function App() {
const data = "world"
return <h1>Hello {data}</h1>
}
`},"/index.jsx":{code:`import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import App from "./App";
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.jsx"></script>
</body>
</html>
`},"/package.json":{code:JSON.stringify({scripts:{dev:"vite",build:"vite build",preview:"vite preview"},dependencies:{react:"^18.2.0","react-dom":"^18.2.0"},devDependencies:{"@vitejs/plugin-react":"^3.1.0",vite:"4.2.2","esbuild-wasm":"^0.17.19"}},null,2)},"/vite.config.js":{code:`import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});
`}}),main:"/App.jsx",environment:"node"};var Eo={files:E(y({},$),{"/App.tsx":{code:`export default function App() {
const data: string = "world"
return <h1>Hello {data}</h1>
}
`},"/index.tsx":{code:`import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import App from "./App";
import React from "react";
const root = createRoot(document.getElementById("root") as HTMLElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.tsx"></script>
</body>
</html>
`},"/tsconfig.json":{code:JSON.stringify({compilerOptions:{target:"ESNext",useDefineForClassFields:!0,lib:["DOM","DOM.Iterable","ESNext"],allowJs:!1,skipLibCheck:!0,esModuleInterop:!1,allowSyntheticDefaultImports:!0,strict:!0,forceConsistentCasingInFileNames:!0,module:"ESNext",moduleResolution:"Node",resolveJsonModule:!0,isolatedModules:!0,noEmit:!0,jsx:"react-jsx"},references:[{path:"./tsconfig.node.json"}]},null,2)},"/tsconfig.node.json":{code:JSON.stringify({compilerOptions:{composite:!0,module:"ESNext",moduleResolution:"Node",allowSyntheticDefaultImports:!0},include:["vite.config.ts"]},null,2)},"/package.json":{code:JSON.stringify({scripts:{dev:"vite",build:"tsc && vite build",preview:"vite preview"},dependencies:{react:"^18.2.0","react-dom":"^18.2.0"},devDependencies:{"@types/react":"^18.0.28","@types/react-dom":"^18.0.11","@vitejs/plugin-react":"^3.1.0","vite-plugin-checker":"^0.5.6",typescript:"^5.0.4",vite:"4.2.2","esbuild-wasm":"^0.17.19"}},null,2)},"/vite-env.d.ts":{code:'/// <reference types="vite/client" />'},"/vite.config.ts":{code:`import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
],
})
`}}),main:"/App.tsx",environment:"node"};var wo={files:E(y({},$),{"/App.jsx":{code:`export default function App() {
const data = "world"
return <h1>Hello {data}</h1>
}
`},"/index.jsx":{code:`import { render } from "preact";
import "./styles.css";
import App from "./App";
const root = document.getElementById("root");
render(<App />, root);
`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.jsx"></script>
</body>
</html>
`},"/package.json":{code:JSON.stringify({scripts:{dev:"vite",build:"vite build",preview:"vite preview"},dependencies:{preact:"^10.16.0"},devDependencies:{"@preact/preset-vite":"^2.5.0",vite:"4.2.2","esbuild-wasm":"0.17.12"}})},"/vite.config.js":{code:`import { defineConfig } from "vite";
import preact from '@preact/preset-vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
});
`}}),main:"/App.jsx",environment:"node"};var To={files:E(y({},$),{"/App.tsx":{code:`export default function App() {
const data: string = "world"
return <h1>Hello {data}</h1>
}
`},"/index.tsx":{code:`import { render } from "preact";
import "./styles.css";
import App from "./App";
const root = document.getElementById("root") as HTMLElement;
render(<App />, root);
`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.tsx"></script>
</body>
</html>
`},"/tsconfig.json":{code:JSON.stringify({compilerOptions:{target:"ESNext",useDefineForClassFields:!0,lib:["DOM","DOM.Iterable","ESNext"],allowJs:!1,skipLibCheck:!0,esModuleInterop:!1,allowSyntheticDefaultImports:!0,strict:!0,forceConsistentCasingInFileNames:!0,module:"ESNext",moduleResolution:"Node",resolveJsonModule:!0,isolatedModules:!0,noEmit:!0,jsx:"react-jsx",jsxImportSource:"preact"},include:["src"],references:[{path:"./tsconfig.node.json"}]},null,2)},"/tsconfig.node.json":{code:JSON.stringify({compilerOptions:{composite:!0,module:"ESNext",moduleResolution:"Node",allowSyntheticDefaultImports:!0},include:["vite.config.ts"]},null,2)},"/package.json":{code:JSON.stringify({scripts:{dev:"vite",build:"tsc && vite build",preview:"vite preview"},dependencies:{preact:"^10.16.0"},devDependencies:{"@preact/preset-vite":"^2.5.0",typescript:"^4.9.5",vite:"4.2.2","esbuild-wasm":"^0.17.12"}},null,2)},"/vite-env.d.ts":{code:'/// <reference types="vite/client" />'},"/vite.config.ts":{code:`import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
})
`}}),main:"/App.tsx",environment:"node"};var $o={files:{"/src/styles.css":$["/styles.css"],"/src/App.svelte":{code:`<script>
const data = "world";
</script>
<h1>Hello {data}</h1>
<style>
h1 {
font-size: 1.5rem;
}
</style>`},"/src/main.js":{code:`import App from './App.svelte'
import "./styles.css"
const app = new App({
target: document.getElementById('app'),
})
export default app`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
`},"svelte.config.js":{code:`import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}
`},"/vite.config.js":{code:`import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
})`},"/package.json":{code:JSON.stringify({type:"module",scripts:{dev:"vite"},dependencies:{svelte:"^3.59.1"},devDependencies:{"@sveltejs/vite-plugin-svelte":"2.1.1",vite:"4.2.2","esbuild-wasm":"^0.17.19"}},null,2)}},main:"/src/App.svelte",environment:"node"};var No={files:{"/src/styles.css":$["/styles.css"],"/src/App.svelte":{code:`<script lang="ts">
const data: string = "world";
</script>
<h1>Hello {data}</h1>
<style>
h1 {
font-size: 1.5rem;
}
</style>`},"/src/main.ts":{code:`import App from './App.svelte'
import "./styles.css"
const app = new App({
target: document.getElementById('app'),
})
export default app`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
`},"/vite-env.d.ts":{code:`/// <reference types="svelte" />
/// <reference types="vite/client" />`},"svelte.config.js":{code:`import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}
`},"/vite.config.ts":{code:`import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
})`},"tsconfig.json":{code:JSON.stringify({extends:"@tsconfig/svelte/tsconfig.json",compilerOptions:{target:"ESNext",useDefineForClassFields:!0,module:"ESNext",resolveJsonModule:!0,allowJs:!0,checkJs:!0,isolatedModules:!0},include:["src/**/*.d.ts","src/**/*.ts","src/**/*.js","src/**/*.svelte"],references:[{path:"./tsconfig.node.json"}]},null,2)},"tsconfig.node.json":{code:JSON.stringify({compilerOptions:{composite:!0,module:"ESNext",moduleResolution:"Node"},include:["vite.config.ts"]},null,2)},"/package.json":{code:JSON.stringify({type:"module",scripts:{dev:"vite"},devDependencies:{"@sveltejs/vite-plugin-svelte":"2.1.1","@tsconfig/svelte":"^4.0.1",svelte:"^3.59.1","svelte-check":"^3.3.2",typescript:"^5.0.4",tslib:"^2.5.0",vite:"4.2.2","esbuild-wasm":"^0.17.19"}},null,2)}},main:"/src/App.svelte",environment:"node"};var ko={files:{"/src/styles.css":$["/styles.css"],"/src/App.vue":{code:`<script setup>
import { ref } from "vue";
const data = ref("world");
</script>
<template>
<h1>Hello {{ data }}</h1>
</template>
<style>
h1 {
font-size: 1.5rem;
}
</style>`},"/src/main.js":{code:`import { createApp } from 'vue'
import App from './App.vue'
import "./styles.css"
createApp(App).mount('#app')
`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
`},"/vite.config.js":{code:`import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
`},"/package.json":{code:JSON.stringify({scripts:{dev:"vite",build:"vite build",preview:"vite preview"},dependencies:{vue:"^3.3.2"},devDependencies:{"@vitejs/plugin-vue":"^4.2.3",vite:"4.2.2","esbuild-wasm":"^0.17.19"}},null,2)}},main:"/src/App.vue",environment:"node"};var Lo={files:{"/src/styles.css":$["/styles.css"],"/src/App.vue":{code:`<script setup lang="ts">
import { ref } from "vue";
const data = ref<string>("world");
</script>
<template>
<h1>Hello {{ data }}</h1>
</template>
<style>
h1 {
font-size: 1.5rem;
}
</style>`},"/src/main.ts":{code:`import { createApp } from 'vue'
import App from './App.vue'
import "./styles.css"
createApp(App).mount('#app')
`},"/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
`},"/vite-env.d.ts":{code:'/// <reference types="vite/client" />'},"/vite.config.ts":{code:`import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
`},"tsconfig.json":{code:JSON.stringify({compilerOptions:{target:"ESNext",useDefineForClassFields:!0,module:"ESNext",moduleResolution:"Node",strict:!0,jsx:"preserve",resolveJsonModule:!0,isolatedModules:!0,esModuleInterop:!0,lib:["ESNext","DOM"],skipLibCheck:!0,noEmit:!0},include:["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],references:[{path:"./tsconfig.node.json"}]},null,2)},"tsconfig.node.json":{code:JSON.stringify({compilerOptions:{composite:!0,module:"ESNext",moduleResolution:"Node",allowSyntheticDefaultImports:!0},include:["vite.config.ts"]},null,2)},"/package.json":{code:JSON.stringify({scripts:{dev:"vite",build:"tsc && vite build",preview:"vite preview"},dependencies:{vue:"^3.3.2"},devDependencies:{"@vitejs/plugin-vue":"^4.2.3",vite:"4.2.2","vue-tsc":"^1.6.5",typescript:"^5.0.4","esbuild-wasm":"^0.17.19"}},null,2)}},main:"/src/App.vue",environment:"node"};var Ao={files:{"/src/app/app.component.css":$["/styles.css"],"/src/app/app.component.html":{code:`<div>
<h1>{{ helloWorld }}</h1>
</div>
`},"/src/app/app.component.ts":{code:`import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
helloWorld = "Hello world";
}
`},"/src/app/app.module.ts":{code:`import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
`},"/src/index.html":{code:`<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
`},"/src/main.ts":{code:`import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));
`},"/src/polyfills.ts":{code:`import "core-js/proposals/reflect-metadata";
import "zone.js/dist/zone";
`},"/package.json":{code:JSON.stringify({dependencies:{"@angular/core":"^11.2.0","@angular/platform-browser":"^11.2.0","@angular/platform-browser-dynamic":"^11.2.0","@angular/common":"^11.2.0","@angular/compiler":"^11.2.0","zone.js":"0.11.3","core-js":"3.8.3",rxjs:"6.6.3"},main:"/src/main.ts"},null,2)}},main:"/src/app/app.component.ts",environment:"angular-cli"};var Mo={files:E(y({},$),{"/App.js":{code:`export default function App() {
return <h1>Hello world</h1>
}
`},"/index.js":{code:`import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import App from "./App";
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);`},"/public/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},main:"/index.js"},null,2)}}),main:"/App.js",environment:"create-react-app"};var Fo={files:E(y({},$),{"tsconfig.json":{code:`{
"include": [
"./**/*"
],
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"lib": [ "dom", "es2015" ],
"jsx": "react-jsx"
}
}`},"/App.tsx":{code:`export default function App(): JSX.Element {
return <h1>Hello world</h1>
}
`},"/index.tsx":{code:`import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import App from "./App";
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);`},"/public/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"},null,2)}}),main:"/App.tsx",environment:"create-react-app"};var Oo={files:E(y({},$),{"/App.tsx":{code:`import { Component } from "solid-js";
const App: Component = () => {
return <h1>Hello world</h1>
};
export default App;`},"/index.tsx":{code:`import { render } from "solid-js/web";
import App from "./App";
import "./styles.css";
render(() => <App />, document.getElementById("app"));`},"/index.html":{code:`<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.tsx"></script>
</body>
</html>`},"/package.json":{code:JSON.stringify({dependencies:{"solid-js":"1.3.15"},main:"/index.tsx"},null,2)}}),main:"/App.tsx",environment:"solid"};var Ro={files:E(y({},$),{"/App.svelte":{code:`<style>
h1 {
font-size: 1.5rem;
}
</style>
<script>
let name = 'world';
</script>
<main>
<h1>Hello {name}</h1>
</main>`},"/index.js":{code:`import App from "./App.svelte";
import "./styles.css";
const app = new App({
target: document.body
});
export default app;
`},"/public/index.html":{code:`<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width" />
<title>Svelte app</title>
<link rel="stylesheet" href="public/bundle.css" />
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>`},"/package.json":{code:JSON.stringify({dependencies:{svelte:"^3.0.0"},main:"/index.js"},null,2)}}),main:"/App.svelte",environment:"svelte"};var _o={files:{"tsconfig.json":{code:`{
"include": [
"./**/*"
],
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"lib": [ "dom", "es2015" ],
"jsx": "react-jsx"
}
}`},"/add.ts":{code:"export const add = (a: number, b: number): number => a + b;"},"/add.test.ts":{code:`import { add } from './add';
describe('add', () => {
test('Commutative Law of Addition', () => {
expect(add(1, 2)).toBe(add(2, 1));
});
});`},"package.json":{code:JSON.stringify({dependencies:{},devDependencies:{typescript:"^4.0.0"},main:"/add.ts"},null,2)}},main:"/add.test.ts",environment:"parcel",mode:"tests"};var Io={files:E(y({},$),{"/index.js":{code:`import "./styles.css";
document.getElementById("app").innerHTML = \`
<h1>Hello world</h1>
\`;
`},"/index.html":{code:`<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="index.js">
</script>
</body>
</html>`},"/package.json":{code:JSON.stringify({dependencies:{},main:"/index.js"},null,2)}}),main:"/index.js",environment:"parcel"};var Po={files:E(y({},$),{"tsconfig.json":{code:`{
"compilerOptions": {
"strict": true,
"module": "commonjs",
"jsx": "preserve",
"esModuleInterop": true,
"sourceMap": true,
"allowJs": true,
"lib": [
"es6",
"dom"
],
"rootDir": "src",
"moduleResolution": "node"
}
}`},"/index.ts":{code:`import "./styles.css";
document.getElementById("app").innerHTML = \`
<h1>Hello world</h1>
\`;
`},"/index.html":{code:`<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="index.ts">
</script>
</body>
</html>`},"/package.json":{code:JSON.stringify({dependencies:{},devDependencies:{typescript:"^4.0.0"},main:"/index.ts"},null,2)}}),main:"/index.ts",environment:"parcel"};var Nt={files:{"/src/styles.css":$["/styles.css"],"/src/App.vue":{code:`<template>
<h1>Hello {{ msg }}</h1>
</template>
<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>`},"/src/main.js":{code:`import { createApp } from 'vue'
import App from './App.vue'
import "./styles.css";
createApp(App).mount('#app')
`},"/public/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>codesandbox</title>
</head>
<body>
<noscript>
<strong
>We're sorry but codesandbox doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
`},"/package.json":{code:JSON.stringify({name:"vue3",version:"0.1.0",private:!0,main:"/src/main.js",scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build"},dependencies:{"core-js":"^3.30.2",vue:"^3.3.2"},devDependencies:{"@vue/cli-plugin-babel":"^5.0.8","@vue/cli-service":"^5.0.8"}},null,2)}},main:"/src/App.vue",environment:"vue-cli"};var kt={files:{"/src/styles.css":$["/styles.css"],"/src/App.vue":{code:`<template>
<h1>Hello {{ msg }}</h1>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>`},"/src/main.ts":{code:`import { createApp } from 'vue'
import App from './App.vue'
import "./styles.css";
createApp(App).mount('#app')
`},"/src/shims-vue.d.ts":`/* eslint-disable */
declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}`,"/public/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>codesandbox</title>
</head>
<body>
<noscript>
<strong
>We're sorry but codesandbox doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
`},"/package.json":{code:JSON.stringify({name:"vue3-ts",version:"0.1.0",private:!0,main:"/src/main.ts",scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build"},dependencies:{"core-js":"^3.30.2",vue:"^3.3.2"},devDependencies:{"@vue/cli-plugin-babel":"^5.0.8","@vue/cli-plugin-typescript":"^5.0.8","@vue/cli-service":"^5.0.8",typescript:"^4.9.5"}},null,2)},"/tsconfig.json":{code:JSON.stringify({compilerOptions:{target:"esnext",module:"esnext",strict:!0,jsx:"preserve",moduleResolution:"node",experimentalDecorators:!0,skipLibCheck:!0,esModuleInterop:!0,allowSyntheticDefaultImports:!0,forceConsistentCasingInFileNames:!0,useDefineForClassFields:!0,sourceMap:!1,baseUrl:".",types:["webpack-env"],paths:{"@/*":["src/*"]},lib:["esnext","dom","dom.iterable","scripthost"]},include:["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],exclude:["node_modules"]},null,2)}},main:"/src/App.vue",environment:"vue-cli"};var jo={files:{"/src/styles.css":$["/styles.css"],"/src/App.vue":{code:`<template>
<div id="app">
<h1>Hello {{ msg }}</h1>
<button @click="add">add</button>
<p>count: {{ count }}</p>
</div>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
name: "App",
data() {
return {
msg: "",
count: 1,
};
},
methods: {
add() {
this.count += 1;
},
},
mounted() {
this.msg = "world";
},
});
</script>`},"/src/main.js":{code:`import Vue from "vue";
import App from "./App.vue";
import "./styles.css";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
`},"/public/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>codesandbox</title>
</head>
<body>
<noscript>
<strong
>We're sorry but codesandbox doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
`},"/package.json":{code:JSON.stringify({name:"vue",version:"0.1.0",private:!0,main:"/src/main.js",scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build"},dependencies:{"core-js":"^3.26.1",vue:"^2.7.14"},devDependencies:{"@vue/cli-plugin-babel":"^5.0.8","@vue/cli-service":"^5.0.8","vue-template-compiler":"^2.7.14"}},null,2)}},main:"/src/App.vue",environment:"vue-cli"};var Bo={files:{"/src/styles.css":$["/styles.css"],"/src/App.vue":{code:`<template>
<div id="app">
<h1>Hello {{ msg }}</h1>
<button @click="add">add</button>
<p>count: {{ count }}</p>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "App",
data() {
return {
msg: "",
count: 1,
};
},
methods: {
add() {
this.count += 1;
},
},
mounted() {
this.msg = "world";
},
});
</script>`},"/src/main.ts":{code:`import Vue from "vue";
import App from "./App.vue";
import "./styles.css";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
`},"/public/index.html":{code:`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>codesandbox</title>
</head>
<body>
<noscript>
<strong
>We're sorry but codesandbox doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
`},"/src/shims-vue.d.ts":`declare module '*.vue' {
import Vue from 'vue'
export default Vue
}`,"/package.json":{code:JSON.stringify({name:"vue-ts",version:"0.1.0",private:!0,main:"/src/main.ts",scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build"},dependencies:{"core-js":"^3.26.1",vue:"^2.7.14"},devDependencies:{"@vue/cli-plugin-babel":"^5.0.8","@vue/cli-plugin-typescript":"^5.0.8","@vue/cli-service":"^5.0.8",typescript:"^4.9.3","vue-template-compiler":"^2.7.14"}},null,2)},"/tsconfig.json":{code:JSON.stringify({compilerOptions:{target:"esnext",module:"esnext",strict:!0,jsx:"preserve",moduleResolution:"node",skipLibCheck:!0,esModuleInterop:!0,allowSyntheticDefaultImports:!0,forceConsistentCasingInFileNames:!0,useDefineForClassFields:!0,sourceMap:!0,baseUrl:".",types:["webpack-env"],paths:{"@/*":["src/*"]},lib:["esnext","dom","dom.iterable","scripthost"]},include:["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],exclude:["node_modules"]},null,2)}},main:"/src/App.vue",environment:"vue-cli"};var ps={files:E(y({},$),{"/index.html":{code:`<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<h1>Hello world</h1>
</body>
</html>`},"/package.json":{code:JSON.stringify({dependencies:{},main:"/index.html"})}}),main:"/index.html",environment:"static"};var nt={react:Mo,"react-ts":Fo,vue2:jo,"vue2-ts":Bo,vue:Nt,"vue-ts":kt,vue3:Nt,"vue3-ts":kt,vanilla:Io,"vanilla-ts":Po,static:ps,angular:Ao,svelte:Ro,solid:Oo,"test-ts":_o,node:us,nextjs:ds,vite:Co,"vite-react":So,"vite-react-ts":Eo,"vite-preact":wo,"vite-preact-ts":To,"vite-vue":ko,"vite-vue-ts":Lo,"vite-svelte":$o,"vite-svelte-ts":No,"vite-solid":ms,"vite-lit":cs,astro:ls};var Ue=e=>{var r,u,g,f,h,c;let o=sandpackClient.normalizePath(e.files),t=mi({template:e.template,customSetup:e.customSetup,files:o}),n=sandpackClient.normalizePath((u=(r=e.options)==null?void 0:r.visibleFiles)!=null?u:[]),s=(g=e.options)!=null&&g.activeFile?fs((f=e.options)==null?void 0:f.activeFile,t.files):void 0;n.length===0&&o&&Object.keys(o).forEach(x=>{let a=o[x];if(typeof a=="string"){n.push(x);return}!s&&a.active&&(s=x,a.hidden===!0&&n.push(x)),a.hidden||n.push(x);}),n.length===0&&(n=[t.main]),t.entry&&!t.files[t.entry]&&(t.entry=fs(t.entry,t.files)),!s&&t.main&&(s=t.main),(!s||!t.files[s])&&(s=n[0]),n.includes(s)||n.push(s);let l=sandpackClient.addPackageJSONIfNeeded(t.files,(h=t.dependencies)!=null?h:{},(c=t.devDependencies)!=null?c:{},t.entry);return {visibleFiles:n.filter(x=>l[x]),activeFile:s,files:l,environment:t.environment,shouldUpdatePreview:!0}},fs=(e,o)=>{let t=sandpackClient.normalizePath(o),n=sandpackClient.normalizePath(e);if(n in t)return n;if(!e)return null;let s=null,l=0,d=[".js",".jsx",".ts",".tsx"];for(;!s&&l<d.length;){let u=`${n.split(".")[0]}${d[l]}`;t[u]!==void 0&&(s=u),l++;}return s},mi=({files:e,template:o,customSetup:t})=>{if(!o){if(!t){let s=nt.vanilla;return E(y({},s),{files:y(y({},s.files),st(e))})}if(!e||Object.keys(e).length===0)throw new Error("[sandpack-vue3]: without a template, you must pass at least one file");return E(y({},t),{files:st(e)})}let n=nt[o];if(!n)throw new Error(`[sandpack-vue3]: invalid template "${o}" provided`);return !t&&!e?n:{files:st(y(y({},n.files),e)),dependencies:y(y({},n.dependencies),t==null?void 0:t.dependencies),devDependencies:y(y({},n.devDependencies),t==null?void 0:t.devDependencies),entry:sandpackClient.normalizePath((t==null?void 0:t.entry)||n.entry),main:n.main,environment:(t==null?void 0:t.environment)||n.environment}},st=e=>e?Object.keys(e).reduce((o,t)=>(typeof e[t]=="string"?o[t]={code:e[t]}:o[t]=e[t],o),{}):{};var Si=3e4,hs=Symbol("sandpackStateContext"),Lt=vue.defineComponent({name:"SandpackProvider",props:{files:{type:Object,required:!1,default:void 0},template:{type:String,required:!1,default:void 0},customSetup:{type:Object,required:!1,default:void 0},theme:{type:[String,Object],required:!1,default:void 0},options:{type:Object,required:!1,default:void 0}},setup(e,{attrs:o,slots:t}){var me,ye,Te,$e,Ne,et,Fn;let{activeFile:n,visibleFiles:s=[],files:l,environment:d}=Ue(e),r=((me=e.options)==null?void 0:me.initMode)||"lazy",u=vue.ref(null),g=vue.ref(null),f=vue.ref({}),h=vue.ref(null),c=vue.ref(),x=vue.ref(),a=vue.reactive({visibleFiles:s,activeFile:n,files:l,environment:d,visibleFilesFromProps:s,shouldUpdatePreview:!0,editorState:"pristine",teamId:e.teamId,openFile:I,resetFile:q,resetAllFiles:W,setActiveFile:k,updateFile:_,updateCurrentFile:K,addFile:_,closeFile:fe,deleteFile:F,autoReload:(Te=(ye=e.options)==null?void 0:ye.autoReload)!=null?Te:!0,reactDevTools:void 0,startRoute:($e=e.options)==null?void 0:$e.startRoute,initMode:((Ne=e.options)==null?void 0:Ne.initMode)||"lazy",bundlerState:{entry:"",transpiledModules:{}},error:{message:""},status:(Fn=(et=e.options)==null?void 0:et.autorun)==null||Fn?"initial":"idle",clients:{},lazyAnchorRef:null,unsubscribeClientListenersRef:{},queuedListenersRef:{global:{}},initializeSandpackI