sandpack-vue3
Version:
Vue3 components that give you the power of editable sandboxes that run in the browser.
949 lines (845 loc) • 132 kB
JavaScript
"use strict";var No=Object.defineProperty,Co=Object.defineProperties;var wo=Object.getOwnPropertyDescriptors;var qt=Object.getOwnPropertySymbols;var xo=Object.prototype.hasOwnProperty,So=Object.prototype.propertyIsEnumerable;var _t=(e,o,n)=>o in e?No(e,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[o]=n,w=(e,o)=>{for(var n in o||(o={}))xo.call(o,n)&&_t(e,n,o[n]);if(qt)for(var n of qt(o))So.call(o,n)&&_t(e,n,o[n]);return e},T=(e,o)=>Co(e,wo(o));var he=(e,o,n)=>new Promise((s,a)=>{var c=f=>{try{r(n.next(f))}catch(g){a(g)}},u=f=>{try{r(n.throw(f))}catch(g){a(g)}},r=f=>f.done?s(f.value):Promise.resolve(f.value).then(c,u);r((n=n.apply(e,o)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),Vo=require("dequal");require("@stitches/core");const ie=require("@codesandbox/sandpack-client"),To=require("lz-string"),Eo=require("ansi-to-vue3"),ko=require("clean-set"),$t=require("@codemirror/autocomplete"),nt=require("@codemirror/language"),$=require("@codemirror/view"),Ao=require("@codemirror/lang-css"),Lo=require("@codemirror/lang-html"),Ut=require("@codemirror/lang-javascript"),I=require("@lezer/highlight"),ye=require("@codemirror/state"),ge=require("@codemirror/commands"),Mo={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[]}}};function Oo(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}const Fo=typeof window<"u",Ro=Fo?window:void 0;function Ht(e){var n;const o=t.unref(e);return(n=o==null?void 0:o.$el)!=null?n:o}const Ge=()=>{};function jo(e,o,n={}){const{root:s,rootMargin:a="0px",threshold:c=.1,window:u=Ro}=n,r=u&&"IntersectionObserver"in u;let f=Ge;const g=r?t.watch(()=>({el:Ht(e),root:Ht(s)}),({el:h,root:d})=>{if(f(),!h)return;const N=new IntersectionObserver(o,{root:d,rootMargin:a,threshold:c});N.observe(h),f=()=>{N.disconnect(),f=Ge}},{immediate:!0,flush:"post"}):Ge,m=()=>{f(),g()};return Oo(m),{isSupported:r,stop:m}}const Ie=e=>{const o=e.lastIndexOf("/");return e.slice(o+1)},Io=(e,o)=>{const n=(e[0]==="/"?e.slice(1):e).split("/"),s=[];if(n.length===1)s.unshift(n[0]);else for(let a=0;a<o.length;a++){const c=o[a].split("/");for(let u=1;u<=n.length;u++){const r=n[n.length-u],f=c[c.length-u];if(s.length<u&&s.unshift(r),r!==f)break}}return s.length<n.length&&s.unshift(".."),s.join("/")},zt=e=>{let o=0,n=0,s=0;if(e.startsWith("#")){if(e.length<7)return!0;o=parseInt(e.substr(1,2),16),n=parseInt(e.substr(3,2),16),s=parseInt(e.substr(5,2),16)}else{const c=e.replace("rgb(","").replace("rgba(","").replace(")","").split(",");if(c.length<3)return!0;o=parseInt(c[0],10),n=parseInt(c[1],10),s=parseInt(c[2],10)}return(o*299+n*587+s*114)/1e3<128};let Po=0;const Pe=()=>(+(Date.now().toString(10).substr(0,4)+Po++)).toString(16),Se=()=>"",ot=()=>Se,vn=Object.getOwnPropertyDescriptors({toString:Se});Object.defineProperties(Se,vn);Object.defineProperties(ot,vn);const Do={createTheme:Se,css:ot,getCssText:Se,keyframes:ot},ve={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"}},De={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"}};var mn;const hn={light:ve,dark:De,auto:typeof window<"u"&&(mn=window==null?void 0:window.matchMedia)!=null&&mn.call(window,"(prefers-color-scheme: dark)").matches?De:ve},B="sp",{createTheme:Jt,css:Ba,getCssText:Bo,keyframes:gn}=Do,qo={space:new Array(11).fill(" ").reduce((e,o,n)=>T(w({},e),{[n+1]:`${(n+1)*4}px`}),{}),border:{radius:"4px"},layout:{height:"300px",headerHeight:"40px"},transitions:{default:"150ms ease"},zIndices:{base:"1",overlay:"2",top:"3"}},Yt=e=>{const n=Object.entries(e.syntax).reduce((s,[a,c])=>{let u={[`color-${a}`]:c};return typeof c=="object"&&(u=Object.entries(c).reduce((r,[f,g])=>T(w({},r),{[`${f}-${a}`]:g}),{})),w(w({},s),u)},{});return T(w({},qo),{colors:e.colors,font:e.font,syntax:n})},Zt=e=>{var g,m,h,d,N;const o="default";if(e=e||"light",typeof e=="string"){const l=hn[e];if(!l)throw new Error(`[sandpack-vue3]: invalid theme '${e}' provided.`);return{theme:l,id:e,mode:zt(l.colors.surface1)?"dark":"light"}}const n=zt((m=(g=e==null?void 0:e.colors)==null?void 0:g.surface1)!=null?m:ve.colors.surface1)?"dark":"light",s=n==="dark"?De:ve,a=w(w({},s.colors),(h=e==null?void 0:e.colors)!=null?h:{}),c=w(w({},s.syntax),(d=e==null?void 0:e.syntax)!=null?d:{}),u=w(w({},s.font),(N=e==null?void 0:e.font)!=null?N:{}),r={colors:a,syntax:c,font:u},f=e?_o(JSON.stringify(r)):o;return{theme:r,id:`sp-${f}`,mode:n}},_o=e=>{let o=0;for(let n=0;n<e.length;o&=o)o=31*o+e.charCodeAt(n++);return Math.abs(o)},y=()=>"";y.toString=y;const st=(e,{line:o,column:n})=>e.line(o).from+(n!=null?n:0)-1,$o=()=>$.EditorView.theme({"&":{backgroundColor:`var(--${B}-colors-surface1)`,color:`var(--${B}-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(--${B}-colors-surface3)`,borderRadius:`var(--${B}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${B}-colors-errorSurface)`,borderRadius:`var(--${B}-border-radius)`},".cm-content":{caretColor:`var(--${B}-colors-accent)`,padding:`0 var(--${B}-space-4)`},".cm-scroller":{fontFamily:`var(--${B}-font-mono)`,lineHeight:`var(--${B}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${B}-colors-surface1)`,color:`var(--${B}-colors-disabled)`,border:"none",paddingLeft:`var(--${B}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${B}-font-lineHeight)`,minWidth:`var(--${B}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${B}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),se=e=>`${B}-syntax-${e}`,Uo=e=>nt.HighlightStyle.define([{tag:I.tags.link,textDecoration:"underline"},{tag:I.tags.emphasis,fontStyle:"italic"},{tag:I.tags.strong,fontWeight:"bold"},{tag:I.tags.keyword,class:se("keyword")},{tag:[I.tags.atom,I.tags.number,I.tags.bool],class:se("static")},{tag:I.tags.variableName,class:se("plain")},{tag:I.tags.function(I.tags.variableName),class:se("definition")},{tag:I.tags.standard(I.tags.tagName),class:se("tag")},{tag:[I.tags.function(I.tags.variableName),I.tags.definition(I.tags.function(I.tags.variableName)),I.tags.tagName],class:se("definition")},{tag:I.tags.propertyName,class:se("property")},{tag:[I.tags.literal,I.tags.inserted],class:se(e.syntax.string?"string":"static")},{tag:I.tags.punctuation,class:se("punctuation")},{tag:[I.tags.comment,I.tags.quote],class:se("comment")}]),Ho=(e,o,n)=>{if(!e&&!o)return"javascript";let s=o;if(!s&&e){const a=e.lastIndexOf(".");s=e.slice(a+1)}for(const a of n)if(s===a.name||a.extensions.includes(s||""))return a.name;switch(s){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"}},zo=(e,o)=>{const n={javascript:Ut.javascript({jsx:!0,typescript:!1}),typescript:Ut.javascript({jsx:!0,typescript:!0}),html:Lo.html(),css:Ao.css()};for(const s of o)if(e===s.name)return s.language;return n[e]};function Jo(e){return $.ViewPlugin.fromClass(class{constructor(o){this.decorations=this.getDecoration(o)}update(o){}getDecoration(o){if(!e)return $.Decoration.none;const n=e.map(s=>{var r,f,g;const a=$.Decoration.line({attributes:{class:(r=s.className)!=null?r:""}}),c=$.Decoration.mark({class:(f=s.className)!=null?f:"",attributes:(g=s.elementAttributes)!=null?g:void 0}),u=st(o.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){const m=st(o.state.doc,{line:s.line,column:s.endColumn})+1;return c.range(u,m)}return a.range(u)});return $.Decoration.set(n)}},{decorations:o=>o.decorations})}function Yo(){return Wo}const Zo=$.Decoration.line({attributes:{class:"cm-errorLine"}}),Wo=$.ViewPlugin.fromClass(class{constructor(){this.decorations=$.Decoration.none}update(e){e.transactions.forEach(o=>{const n=o.annotation("show-error");if(n!==void 0){const s=st(e.view.state.doc,{line:n})+1;this.decorations=$.Decoration.set([Zo.range(s)])}else o.annotation("remove-errors")&&(this.decorations=$.Decoration.none)})}},{decorations:e=>e.decorations}),Wt=(e,o)=>{if(e.length!==o.length)return!1;let n=!0;for(let s=0;s<e.length;s++)if(e[s]!==o[s]){n=!1;break}return n},yn=Symbol("classNamesProvider"),Go=t.defineComponent({name:"ClassNamesProvider",props:{classes:{type:Object,required:!1,default(){return{}}}},setup(e,{slots:o}){return t.provide(yn,e.classes),()=>t.createVNode(t.Fragment,null,[o.default?o.default():null])}}),L=()=>{const e=qe(yn,{});return function(n,s=[]){const a=`${B}-${n}`;return Ko(...s,a,e[a])}},Ko=(...e)=>e.filter(Boolean).join(" "),j={"/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;
}`}},Xo={files:{"/src/styles.css":j["/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"},Qo={files:T(w({},j),{"/styles.css":j["/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"},es={files:T(w({},j),{"/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"},ts={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"},ns={files:T(w({},j),{"/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"},bn={files:T(w({},j),{"/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"},Nn={files:T(w({},j),{"/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"},Cn={files:T(w({},j),{"/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"},wn={files:T(w({},j),{"/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"},xn={files:T(w({},j),{"/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"},Sn={files:{"/src/styles.css":j["/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"},Vn={files:{"/src/styles.css":j["/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"},Tn={files:{"/src/styles.css":j["/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"},En={files:{"/src/styles.css":j["/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"},kn={files:{"/src/app/app.component.css":j["/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"},An={files:T(w({},j),{"/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"},Ln={files:T(w({},j),{"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"},Mn={files:T(w({},j),{"/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"},On={files:T(w({},j),{"/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"},Fn={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"},Rn={files:T(w({},j),{"/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"},jn={files:T(w({},j),{"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"},at={files:{"/src/styles.css":j["/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"},it={files:{"/src/styles.css":j["/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"},In={files:{"/src/styles.css":j["/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"},Pn={files:{"/src/styles.css":j["/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"},os={files:T(w({},j),{"/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"},Be={react:An,"react-ts":Ln,vue2:In,"vue2-ts":Pn,vue:at,"vue-ts":it,vue3:at,"vue3-ts":it,vanilla:Rn,"vanilla-ts":jn,static:os,angular:kn,svelte:On,solid:Mn,"test-ts":Fn,node:ts,nextjs:es,vite:bn,"vite-react":Nn,"vite-react-ts":Cn,"vite-preact":wn,"vite-preact-ts":xn,"vite-vue":Tn,"vite-vue-ts":En,"vite-svelte":Sn,"vite-svelte-ts":Vn,"vite-solid":ns,"vite-lit":Qo,astro:Xo},Ce=e=>{var r,f,g,m,h,d;const o=ie.normalizePath(e.files),n=ss({template:e.template,customSetup:e.customSetup,files:o});let s=ie.normalizePath((f=(r=e.options)==null?void 0:r.visibleFiles)!=null?f:[]),a=(g=e.options)!=null&&g.activeFile?Gt((m=e.options)==null?void 0:m.activeFile,n.files):void 0;s.length===0&&o&&Object.keys(o).forEach(N=>{const l=o[N];if(typeof l=="string"){s.push(N);return}!a&&l.active&&(a=N,l.hidden===!0&&s.push(N)),l.hidden||s.push(N)}),s.length===0&&(s=[n.main]),n.entry&&!n.files[n.entry]&&(n.entry=Gt(n.entry,n.files)),!a&&n.main&&(a=n.main),(!a||!n.files[a])&&(a=s[0]),s.includes(a)||s.push(a);const c=ie.addPackageJSONIfNeeded(n.files,(h=n.dependencies)!=null?h:{},(d=n.devDependencies)!=null?d:{},n.entry);return{visibleFiles:s.filter(N=>c[N]),activeFile:a,files:c,environment:n.environment,shouldUpdatePreview:!0}},Gt=(e,o)=>{const n=ie.normalizePath(o),s=ie.normalizePath(e);if(s in n)return s;if(!e)return null;let a=null,c=0;const u=[".js",".jsx",".ts",".tsx"];for(;!a&&c<u.length;){const f=`${s.split(".")[0]}${u[c]}`;n[f]!==void 0&&(a=f),c++}return a},ss=({files:e,template:o,customSetup:n})=>{if(!o){if(!n){const a=Be.vanilla;return T(w({},a),{files:w(w({},a.files),je(e))})}if(!e||Object.keys(e).length===0)throw new Error("[sandpack-vue3]: without a template, you must pass at least one file");return T(w({},n),{files:je(e)})}const s=Be[o];if(!s)throw new Error(`[sandpack-vue3]: invalid template "${o}" provided`);return!n&&!e?s:{files:je(w(w({},s.files),e)),dependencies:w(w({},s.dependencies),n==null?void 0:n.dependencies),devDependencies:w(w({},s.devDependencies),n==null?void 0:n.devDependencies),entry:ie.normalizePath((n==null?void 0:n.entry)||s.entry),main:s.main,environment:(n==null?void 0:n.environment)||s.environment}},je=e=>e?Object.keys(e).reduce((o,n)=>(typeof e[n]=="string"?o[n]={code:e[n]}:o[n]=e[n],o),{}):{},as=3e4,ut=Symbol("sandpackStateContext"),ft=t.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:n}){var X,oe,re,le,ce,Ne,Lt;const{activeFile:s,visibleFiles:a=[],files:c,environment:u}=Ce(e),r=((X=e.options)==null?void 0:X.initMode)||"lazy",f=t.ref(null),g=t.ref(null),m=t.ref({}),h=t.ref(null),d=t.ref(),N=t.ref(),l=t.reactive({visibleFiles:a,activeFile:s,files:c,environment:u,visibleFilesFromProps:a,shouldUpdatePreview:!0,editorState:"pristine",teamId:e.teamId,openFile:O,resetFile:q,resetAllFiles:H,setActiveFile:S,updateFile:M,updateCurrentFile:J,addFile:M,closeFile:ee,deleteFile:k,autoReload:(re=(oe=e.options)==null?void 0:oe.autoReload)!=null?re:!0,reactDevTools:void 0,startRoute:(le=e.options)==null?void 0:le.startRoute,initMode:((ce=e.options)==null?void 0:ce.initMode)||"lazy",bundlerState:{entry:"",transpiledModules:{}},error:{message:""},status:(Lt=(Ne=e.options)==null?void 0:Ne.autorun)==null||Lt?"initial":"idle",clients:{},lazyAnchorRef:null,unsubscribeClientListenersRef:{},queuedListenersRef:{global:{}},initializeSandpackIframe:te,runSandpack:K,registerBundler:x,unregisterBundler:E,registerReactDevTools:R,addListener:v,dispatchMessage:C,listen:v,dispatch:C});function R(p){l.reactDevTools=p}function O(p){const{visibleFiles:b}=l,V=b.includes(p)?b:[...b,p];l.activeFile=p,l.visibleFiles=V}function q(p){const{files:b}=Ce(e);l.files=T(w({},t.toRaw(l.files)),{[p]:b[p]})}function H(){const{files:p}=Ce(e);l.files=p}function S(p){l&&l.files[p]&&(l.activeFile=p)}function M(p,b,V=!0){typeof p=="string"&&typeof b=="string"?l.files=T(w({},t.toRaw(l.files)),{[p]:{code:b}}):typeof p=="object"&&(l.files=ie.normalizePath(w(w({},t.toRaw(l.files)),je(p)))),l.shouldUpdatePreview=V}function J(p,b=!0){M(l.activeFile,p,b)}function ee(p){if(l.visibleFiles.length===1)return;const b=l.visibleFiles.indexOf(p),V=l.visibleFiles.filter(_=>_!==p);l.activeFile=p===l.activeFile?b===0?l.visibleFiles[1]:l.visibleFiles[b-1]:l.activeFile,l.visibleFiles=V}function k(p,b=!0){const{visibleFiles:V,files:_,activeFile:Y}=l,G=w({},_);delete G[p];const F=V.filter(z=>z!==p);if(F.length===0){const z=Object.keys(_)[Object.keys(_).length-1];l.visibleFiles=[z],l.activeFile=z}else l.visibleFiles=F,l.activeFile=p===Y?