sandpack-vue3
Version:
Vue3 components that give you the power of editable sandboxes that run in the browser.
2,214 lines (2,117 loc) • 170 kB
JavaScript
var zn = Object.defineProperty, Jn = Object.defineProperties;
var Yn = Object.getOwnPropertyDescriptors;
var Ft = Object.getOwnPropertySymbols;
var Zn = Object.prototype.hasOwnProperty, Wn = Object.prototype.propertyIsEnumerable;
var jt = (e, n, t) => n in e ? zn(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, x = (e, n) => {
for (var t in n || (n = {}))
Zn.call(n, t) && jt(e, t, n[t]);
if (Ft)
for (var t of Ft(n))
Wn.call(n, t) && jt(e, t, n[t]);
return e;
}, O = (e, n) => Jn(e, Yn(n));
var ke = (e, n, t) => new Promise((o, l) => {
var c = (f) => {
try {
a(t.next(f));
} catch (y) {
l(y);
}
}, d = (f) => {
try {
a(t.throw(f));
} catch (y) {
l(y);
}
}, a = (f) => f.done ? o(f.value) : Promise.resolve(f.value).then(c, d);
a((t = t.apply(e, n)).next());
});
import { watch as H, getCurrentScope as Gn, onScopeDispose as Kn, unref as Xn, defineComponent as A, provide as Je, createVNode as s, Fragment as Q, ref as T, reactive as pt, toRaw as V, onMounted as xe, nextTick as Ie, computed as k, onBeforeMount as Qn, onBeforeUnmount as ae, onUnmounted as se, inject as es, createTextVNode as w, mergeProps as me, isVNode as ts, watchEffect as Rt } from "vue";
import { dequal as ns } from "dequal";
import "@stitches/core";
import { normalizePath as Ae, addPackageJSONIfNeeded as ss, loadSandpackClient as is, extractErrorDetails as os } from "@codesandbox/sandpack-client";
import ls from "lz-string";
import as from "ansi-to-vue3";
import rs from "clean-set";
import { closeBrackets as cs, closeBracketsKeymap as us } from "@codemirror/autocomplete";
import { HighlightStyle as ds, syntaxHighlighting as fs, bracketMatching as ps } from "@codemirror/language";
import { EditorView as He, ViewPlugin as pn, Decoration as be, keymap as It, highlightSpecialChars as ms, highlightActiveLine as vs, lineNumbers as hs } from "@codemirror/view";
import { css as ys } from "@codemirror/lang-css";
import { html as gs } from "@codemirror/lang-html";
import { javascript as Dt } from "@codemirror/lang-javascript";
import { tags as _, highlightTree as bs } from "@lezer/highlight";
import { StateEffect as Bt, EditorState as Cs, EditorSelection as ws, Annotation as Pt } from "@codemirror/state";
import { history as Ss, defaultKeymap as xs, historyKeymap as Es, indentMore as ks, indentLess as Ts, deleteGroupBackward as As } from "@codemirror/commands";
const Ls = {
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 Ns(e) {
return Gn() ? (Kn(e), !0) : !1;
}
const Os = typeof window < "u", Ms = Os ? window : void 0;
function qt(e) {
var t;
const n = Xn(e);
return (t = n == null ? void 0 : n.$el) != null ? t : n;
}
const et = () => {
};
function Fs(e, n, t = {}) {
const { root: o, rootMargin: l = "0px", threshold: c = 0.1, window: d = Ms } = t, a = d && "IntersectionObserver" in d;
let f = et;
const y = a ? H(() => ({
el: qt(e),
root: qt(o)
}), ({ el: h, root: u }) => {
if (f(), !h)
return;
const C = new IntersectionObserver(n, {
root: u,
rootMargin: l,
threshold: c
});
C.observe(h), f = () => {
C.disconnect(), f = et;
};
}, {
immediate: !0,
flush: "post"
}) : et, m = () => {
f(), y();
};
return Ns(m), {
isSupported: a,
stop: m
};
}
const Ue = (e) => {
const n = e.lastIndexOf("/");
return e.slice(n + 1);
}, js = (e, n) => {
const t = (e[0] === "/" ? e.slice(1) : e).split("/"), o = [];
if (t.length === 1)
o.unshift(t[0]);
else
for (let l = 0; l < n.length; l++) {
const c = n[l].split("/");
for (let d = 1; d <= t.length; d++) {
const a = t[t.length - d], f = c[c.length - d];
if (o.length < d && o.unshift(a), a !== f)
break;
}
}
return o.length < t.length && o.unshift(".."), o.join("/");
}, $t = (e) => {
let n = 0, t = 0, o = 0;
if (e.startsWith("#")) {
if (e.length < 7)
return !0;
n = parseInt(e.substr(1, 2), 16), t = parseInt(e.substr(3, 2), 16), o = parseInt(e.substr(5, 2), 16);
} else {
const c = e.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",");
if (c.length < 3)
return !0;
n = parseInt(c[0], 10), t = parseInt(c[1], 10), o = parseInt(c[2], 10);
}
return (n * 299 + t * 587 + o * 114) / 1e3 < 128;
};
let Rs = 0;
const ze = () => (+(Date.now().toString(10).substr(0, 4) + Rs++)).toString(16), je = () => "", lt = () => je, mn = Object.getOwnPropertyDescriptors({
toString: je
});
Object.defineProperties(je, mn);
Object.defineProperties(lt, mn);
const Is = {
createTheme: je,
css: lt,
getCssText: je,
keyframes: lt
}, Te = {
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"
}
}, at = {
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 fn;
const Ds = {
light: Te,
dark: at,
auto: typeof window < "u" && (fn = window == null ? void 0 : window.matchMedia) != null && fn.call(window, "(prefers-color-scheme: dark)").matches ? at : Te
}, U = "sp", { createTheme: _t, css: $l, getCssText: _l, keyframes: vn } = Is, Bs = {
space: new Array(11).fill(" ").reduce((e, n, t) => O(x({}, 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"
}
}, Ht = (e) => {
const t = Object.entries(e.syntax).reduce((o, [l, c]) => {
let d = {
[`color-${l}`]: c
};
return typeof c == "object" && (d = Object.entries(c).reduce((a, [f, y]) => O(x({}, a), {
[`${f}-${l}`]: y
}), {})), x(x({}, o), d);
}, {});
return O(x({}, Bs), {
colors: e.colors,
font: e.font,
syntax: t
});
}, Vt = (e) => {
var y, m, h, u, C;
const n = "default";
if (e = e || "light", typeof e == "string") {
const r = Ds[e];
if (!r)
throw new Error(`[sandpack-vue3]: invalid theme '${e}' provided.`);
return {
theme: r,
id: e,
mode: $t(r.colors.surface1) ? "dark" : "light"
};
}
const t = $t((m = (y = e == null ? void 0 : e.colors) == null ? void 0 : y.surface1) != null ? m : Te.colors.surface1) ? "dark" : "light", o = t === "dark" ? at : Te, l = x(x({}, o.colors), (h = e == null ? void 0 : e.colors) != null ? h : {}), c = x(x({}, o.syntax), (u = e == null ? void 0 : e.syntax) != null ? u : {}), d = x(x({}, o.font), (C = e == null ? void 0 : e.font) != null ? C : {}), a = {
colors: l,
syntax: c,
font: d
}, f = e ? Ps(JSON.stringify(a)) : n;
return {
theme: a,
id: `sp-${f}`,
mode: t
};
}, Ps = (e) => {
let n = 0;
for (let t = 0; t < e.length; n &= n)
n = 31 * n + e.charCodeAt(t++);
return Math.abs(n);
}, g = () => "";
g.toString = g;
const rt = (e, { line: n, column: t }) => e.line(n).from + (t != null ? t : 0) - 1, qs = () => He.theme({
"&": {
backgroundColor: `var(--${U}-colors-surface1)`,
color: `var(--${U}-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(--${U}-colors-surface3)`,
borderRadius: `var(--${U}-border-radius)`
},
".cm-errorLine": {
backgroundColor: `var(--${U}-colors-errorSurface)`,
borderRadius: `var(--${U}-border-radius)`
},
".cm-content": {
caretColor: `var(--${U}-colors-accent)`,
padding: `0 var(--${U}-space-4)`
},
".cm-scroller": {
fontFamily: `var(--${U}-font-mono)`,
lineHeight: `var(--${U}-font-lineHeight)`
},
".cm-gutters": {
backgroundColor: `var(--${U}-colors-surface1)`,
color: `var(--${U}-colors-disabled)`,
border: "none",
paddingLeft: `var(--${U}-space-1)`
},
".cm-gutter.cm-lineNumbers": {
fontSize: ".6em"
},
".cm-lineNumbers .cm-gutterElement": {
lineHeight: `var(--${U}-font-lineHeight)`,
minWidth: `var(--${U}-space-5)`
},
".cm-content .cm-line": {
paddingLeft: `var(--${U}-space-1)`
},
".cm-content.cm-readonly .cm-line": {
paddingLeft: 0
}
}), fe = (e) => `${U}-syntax-${e}`, $s = (e) => ds.define([{
tag: _.link,
textDecoration: "underline"
}, {
tag: _.emphasis,
fontStyle: "italic"
}, {
tag: _.strong,
fontWeight: "bold"
}, {
tag: _.keyword,
class: fe("keyword")
}, {
tag: [_.atom, _.number, _.bool],
class: fe("static")
}, {
tag: _.variableName,
class: fe("plain")
}, {
tag: _.function(_.variableName),
class: fe("definition")
}, {
tag: _.standard(_.tagName),
class: fe("tag")
}, {
tag: [_.function(_.variableName), _.definition(_.function(_.variableName)), _.tagName],
class: fe("definition")
}, {
tag: _.propertyName,
class: fe("property")
}, {
tag: [_.literal, _.inserted],
class: fe(e.syntax.string ? "string" : "static")
}, {
tag: _.punctuation,
class: fe("punctuation")
}, {
tag: [_.comment, _.quote],
class: fe("comment")
}]), _s = (e, n, t) => {
if (!e && !n)
return "javascript";
let o = n;
if (!o && e) {
const l = e.lastIndexOf(".");
o = e.slice(l + 1);
}
for (const l of t)
if (o === l.name || l.extensions.includes(o || ""))
return l.name;
switch (o) {
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";
}
}, Hs = (e, n) => {
const t = {
javascript: Dt({
jsx: !0,
typescript: !1
}),
typescript: Dt({
jsx: !0,
typescript: !0
}),
html: gs(),
css: ys()
};
for (const o of n)
if (e === o.name)
return o.language;
return t[e];
};
function Vs(e) {
return pn.fromClass(class {
constructor(n) {
this.decorations = this.getDecoration(n);
}
update(n) {
}
getDecoration(n) {
if (!e)
return be.none;
const t = e.map((o) => {
var a, f, y;
const l = be.line({
attributes: {
class: (a = o.className) != null ? a : ""
}
}), c = be.mark({
class: (f = o.className) != null ? f : "",
attributes: (y = o.elementAttributes) != null ? y : void 0
}), d = rt(n.state.doc, {
line: o.line,
column: o.startColumn
}) + 1;
if (o.startColumn && o.endColumn) {
const m = rt(n.state.doc, {
line: o.line,
column: o.endColumn
}) + 1;
return c.range(d, m);
}
return l.range(d);
});
return be.set(t);
}
}, {
decorations: (n) => n.decorations
});
}
function Us() {
return Js;
}
const zs = be.line({
attributes: {
class: "cm-errorLine"
}
}), Js = pn.fromClass(class {
constructor() {
this.decorations = be.none;
}
update(e) {
e.transactions.forEach((n) => {
const t = n.annotation("show-error");
if (t !== void 0) {
const o = rt(e.view.state.doc, {
line: t
}) + 1;
this.decorations = be.set([zs.range(o)]);
} else
n.annotation("remove-errors") && (this.decorations = be.none);
});
}
}, {
decorations: (e) => e.decorations
}), Ut = (e, n) => {
if (e.length !== n.length)
return !1;
let t = !0;
for (let o = 0; o < e.length; o++)
if (e[o] !== n[o]) {
t = !1;
break;
}
return t;
}, hn = Symbol("classNamesProvider"), Ys = A({
name: "ClassNamesProvider",
props: {
classes: {
type: Object,
required: !1,
default() {
return {};
}
}
},
setup(e, { slots: n }) {
return Je(hn, e.classes), () => s(Q, null, [n.default ? n.default() : null]);
}
}), R = () => {
const e = mt(hn, {});
return function(t, o = []) {
const l = `${U}-${t}`;
return Zs(...o, l, e[l]);
};
}, Zs = (...e) => e.filter(Boolean).join(" "), q = {
"/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;
}`
}
}, Ws = {
files: {
"/src/styles.css": q["/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"
}, Gs = {
files: O(x({}, q), {
"/styles.css": q["/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"
}, Ks = {
files: O(x({}, q), {
"/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"
}, Xs = {
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"
}, Qs = {
files: O(x({}, q), {
"/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"
}, ei = {
files: O(x({}, q), {
"/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"
}, ti = {
files: O(x({}, q), {
"/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"
}, ni = {
files: O(x({}, q), {
"/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"
}, si = {
files: O(x({}, q), {
"/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"
}, ii = {
files: O(x({}, q), {
"/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"
}, oi = {
files: {
"/src/styles.css": q["/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"
}, li = {
files: {
"/src/styles.css": q["/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"
}, ai = {
files: {
"/src/styles.css": q["/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"
}, ri = {
files: {
"/src/styles.css": q["/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"
}, ci = {
files: {
"/src/app/app.component.css": q["/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"
}, ui = {
files: O(x({}, q), {
"/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"
}, di = {
files: O(x({}, q), {
"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"
}, fi = {
files: O(x({}, q), {
"/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"
}, pi = {
files: O(x({}, q), {
"/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"
}, mi = {
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"
}, vi = {
files: O(x({}, q), {
"/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"
}, hi = {
files: O(x({}, q), {
"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"
}, zt = {
files: {
"/src/styles.css": q["/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"
}, Jt = {
files: {
"/src/styles.css": q["/styles.css"],
"/src/App.vue": {
code: `<template>
<h1>Hello {{ msg }}</h1>
</template>
<script setup lang="ts">
import { ref } from 'vue';
co