@codesandbox/sandpack-react
Version:
<img style="width:100%" src="https://user-images.githubusercontent.com/4838076/143581035-ebee5ba2-9cb1-4fe8-a05b-2f44bd69bb4b.gif" alt="Component toolkit for live running code editing experiences" />
1,307 lines (1,283 loc) • 213 kB
JavaScript
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import * as React from 'react';
import { createContext, useContext, useState, useRef, useCallback, useEffect, createElement, forwardRef } from 'react';
import { dequal } from 'dequal';
import { normalizePath, addPackageJSONIfNeeded, loadSandpackClient, extractErrorDetails } from '@codesandbox/sandpack-client';
import { closeBracketsKeymap, closeBrackets } from '@codemirror/autocomplete';
import { defaultKeymap, historyKeymap, history, indentMore, indentLess, deleteGroupBackward } from '@codemirror/commands';
import { HighlightStyle, syntaxHighlighting, bracketMatching } from '@codemirror/language';
import { EditorState, StateEffect, EditorSelection, Annotation } from '@codemirror/state';
import { EditorView, ViewPlugin, Decoration, keymap, highlightSpecialChars, highlightActiveLine, lineNumbers } from '@codemirror/view';
import useIntersectionObserver from '@react-hook/intersection-observer';
import { css } from '@codemirror/lang-css';
import { html } from '@codemirror/lang-html';
import { javascript } from '@codemirror/lang-javascript';
import { tags, highlightTree } from '@lezer/highlight';
import Anser from 'anser';
import { escapeCarriageReturn } from 'escape-carriage';
import LZString from 'lz-string';
import cleanSet from 'clean-set';
var __assign = function () {
__assign = Object.assign || (function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
});
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = {
label: 0,
sent: function () {
if (t[0] & 1) throw t[1];
return t[1];
},
trys: [],
ops: []
}, f, y, t, g;
return (g = {
next: verb(0),
"throw": verb(1),
"return": verb(2)
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
return this;
}), g);
function verb(n) {
return function (v) {
return step([n, v]);
};
}
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if ((f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)) return t;
if ((y = 0, t)) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2]) _.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
} catch (e) {
op = [6, e];
y = 0;
} finally {
f = t = 0;
}
if (op[0] & 5) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !((i in from))) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
var SVG = function (props) {
return jsx("svg", __assign({
fill: "currentColor",
height: "16",
viewBox: "0 0 16 16",
width: "16",
xmlns: "http://www.w3.org/2000/svg"
}, props));
};
var SignInIcon = function () {
return jsxs(SVG, {
viewBox: "0 0 48 48",
children: [jsx("title", {
children: "Sign in"
}), jsx("path", {
d: "M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h14.55v3H9v30h14.55v3Zm24.3-9.25-2.15-2.15 5.1-5.1h-17.5v-3h17.4l-5.1-5.1 2.15-2.15 8.8 8.8Z"
})]
});
};
var SignOutIcon = function () {
return jsxs(SVG, {
viewBox: "0 0 48 48",
children: [jsx("title", {
children: "Sign out"
}), jsx("path", {
d: "M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h14.55v3H9v30h14.55v3Zm24.3-9.25-2.15-2.15 5.1-5.1h-17.5v-3h17.4l-5.1-5.1 2.15-2.15 8.8 8.8Z"
})]
});
};
var RestartIcon = function () {
return jsxs(SVG, {
fill: "none",
stroke: "currentColor",
children: [jsx("title", {
children: "Restart script"
}), jsx("path", {
d: "M8 2C4.68629 2 2 4.68629 2 8C2 10.0946 3.07333 11.9385 4.7 13.0118",
strokeLinecap: "round"
}), jsx("path", {
d: "M14.0005 7.9998C14.0005 5.82095 12.8391 3.91335 11.1016 2.8623",
strokeLinecap: "round"
}), jsx("path", {
d: "M14.0003 2.3335H11.167C10.8908 2.3335 10.667 2.55735 10.667 2.8335V5.66683",
strokeLinecap: "round"
}), jsx("path", {
d: "M1.99967 13.6665L4.83301 13.6665C5.10915 13.6665 5.33301 13.4426 5.33301 13.1665L5.33301 10.3332",
strokeLinecap: "round"
}), jsx("path", {
d: "M10 10L12 12L10 14",
strokeLinecap: "round",
strokeLinejoin: "round"
}), jsx("path", {
d: "M14.667 14L12.667 14",
strokeLinecap: "round",
strokeLinejoin: "round"
})]
});
};
var RunIcon = function () {
return jsxs(SVG, {
children: [jsx("title", {
children: "Run sandbox"
}), jsx("path", {
d: "M11.0792 8.1078C11.2793 8.25007 11.27 8.55012 11.0616 8.67981L6.02535 11.8135C5.79638 11.956 5.5 11.7913 5.5 11.5216L5.5 8.40703L5.5 4.80661C5.5 4.52735 5.81537 4.36463 6.04296 4.52647L11.0792 8.1078Z"
})]
});
};
var BackwardIcon = function () {
return jsxs(SVG, {
children: [jsx("title", {
children: "Click to go back"
}), jsx("path", {
d: "M9.64645 12.3536C9.84171 12.5488 10.1583 12.5488 10.3536 12.3536C10.5488 12.1583 10.5488 11.8417 10.3536 11.6464L9.64645 12.3536ZM10.3536 4.35355C10.5488 4.15829 10.5488 3.84171 10.3536 3.64644C10.1583 3.45118 9.84171 3.45118 9.64645 3.64644L10.3536 4.35355ZM6.07072 7.92929L5.71716 7.57573L6.07072 7.92929ZM10.3536 11.6464L6.42427 7.71716L5.71716 8.42426L9.64645 12.3536L10.3536 11.6464ZM6.42427 8.28284L10.3536 4.35355L9.64645 3.64644L5.71716 7.57573L6.42427 8.28284ZM6.42427 7.71716C6.58048 7.87337 6.58048 8.12663 6.42427 8.28284L5.71716 7.57573C5.48285 7.81005 5.48285 8.18995 5.71716 8.42426L6.42427 7.71716Z"
})]
});
};
var ForwardIcon = function () {
return jsxs(SVG, {
children: [jsx("title", {
children: "Click to go forward"
}), jsx("path", {
d: "M6.35355 3.64645C6.15829 3.45118 5.84171 3.45118 5.64645 3.64645C5.45118 3.84171 5.45118 4.15829 5.64645 4.35355L6.35355 3.64645ZM5.64645 11.6464C5.45118 11.8417 5.45118 12.1583 5.64645 12.3536C5.84171 12.5488 6.15829 12.5488 6.35355 12.3536L5.64645 11.6464ZM9.92929 8.07071L10.2828 8.42426L9.92929 8.07071ZM5.64645 4.35355L9.57574 8.28284L10.2828 7.57574L6.35355 3.64645L5.64645 4.35355ZM9.57574 7.71716L5.64645 11.6464L6.35355 12.3536L10.2828 8.42426L9.57574 7.71716ZM9.57574 8.28284C9.41952 8.12663 9.41953 7.87337 9.57574 7.71716L10.2828 8.42426C10.5172 8.18995 10.5172 7.81005 10.2828 7.57574L9.57574 8.28284Z"
})]
});
};
var RefreshIcon = function () {
return jsxs(SVG, {
children: [jsx("title", {
children: "Refresh preview"
}), jsx("path", {
clipRule: "evenodd",
d: "M3.83325 7.99992C3.83325 5.69867 5.69853 3.83325 7.99934 3.83325C9.81246 3.83325 11.3563 4.99195 11.9285 6.61097C11.9396 6.6425 11.9536 6.67221 11.97 6.69992H8.80005C8.52391 6.69992 8.30005 6.92378 8.30005 7.19992C8.30005 7.47606 8.52391 7.69992 8.80005 7.69992H12.5667C12.8981 7.69992 13.1667 7.43129 13.1667 7.09992V3.33325C13.1667 3.05711 12.9429 2.83325 12.6667 2.83325C12.3906 2.83325 12.1667 3.05711 12.1667 3.33325V4.94608C11.2268 3.66522 9.7106 2.83325 7.99934 2.83325C5.14613 2.83325 2.83325 5.14651 2.83325 7.99992C2.83325 10.8533 5.14613 13.1666 7.99934 13.1666C9.91218 13.1666 11.5815 12.1266 12.474 10.5836C12.6123 10.3446 12.5306 10.0387 12.2915 9.90044C12.0525 9.76218 11.7466 9.84387 11.6084 10.0829C10.8873 11.3296 9.54072 12.1666 7.99934 12.1666C5.69853 12.1666 3.83325 10.3012 3.83325 7.99992Z",
fillRule: "evenodd"
})]
});
};
var CleanIcon = function () {
return jsxs(SVG, {
fill: "none",
stroke: "currentColor",
children: [jsx("title", {
children: "Clean"
}), jsx("circle", {
cx: "7.99998",
cy: "8.00004",
r: "4.66667",
strokeLinecap: "round"
}), jsx("path", {
d: "M4.66669 4.66663L11.3334 11.3333"
})]
});
};
var ExportIcon = function () {
return jsxs(SVG, {
fill: "none",
stroke: "currentColor",
children: [jsx("title", {
children: "Open on CodeSandbox"
}), jsx("path", {
d: "M6.66665 3.33337H4.33331C3.78103 3.33337 3.33331 3.78109 3.33331 4.33337V11.6667C3.33331 12.219 3.78103 12.6667 4.33331 12.6667H11.6666C12.2189 12.6667 12.6666 12.219 12.6666 11.6667V9.33337",
strokeLinecap: "round"
}), jsx("path", {
d: "M10 3.33337H12.5667C12.6219 3.33337 12.6667 3.37815 12.6667 3.43337V6.00004",
strokeLinecap: "round"
}), jsx("path", {
d: "M7.33331 8.66668L12.5333 3.46667",
strokeLinecap: "round"
})]
});
};
var DirectoryIconOpen = function () {
return jsxs(SVG, {
children: [jsx("title", {
children: "Directory"
}), jsx("path", {
d: "M12.5526 12.6667H3.66675C3.2922 12.6667 2.96575 12.4608 2.79442 12.156L3.81072 8.0908C3.92201 7.64563 4.32199 7.33333 4.78086 7.33333H13.386C14.0365 7.33333 14.5139 7.94472 14.3561 8.57587L13.5228 11.9092C13.4115 12.3544 13.0115 12.6667 12.5526 12.6667Z",
fill: "currentColor"
}), jsx("path", {
d: "M13.3334 6.63333V6.33333C13.3334 5.78105 12.8857 5.33333 12.3334 5.33333H8.30286C8.10543 5.33333 7.91242 5.2749 7.74816 5.16538L6.25201 4.16795C6.08774 4.05844 5.89473 4 5.69731 4H3.66675C3.11446 4 2.66675 4.44772 2.66675 5L2.66675 11.6667C2.66675 12.219 3.11446 12.6667 3.66675 12.6667H12.5526C13.0115 12.6667 13.4115 12.3544 13.5228 11.9092L14.3561 8.57587C14.5139 7.94472 14.0365 7.33333 13.386 7.33333H4.78086C4.32199 7.33333 3.92201 7.64563 3.81072 8.0908L2.75008 12.3333",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round"
})]
});
};
var DirectoryIconClosed = function () {
return jsxs(SVG, {
children: [jsx("title", {
children: "Directory"
}), jsx("path", {
d: "M12.3334 12.6667H3.66675C3.11446 12.6667 2.66675 12.219 2.66675 11.6667V5C2.66675 4.44772 3.11446 4 3.66675 4H5.69731C5.89473 4 6.08774 4.05844 6.25201 4.16795L7.74816 5.16538C7.91242 5.2749 8.10543 5.33333 8.30286 5.33333H12.3334C12.8857 5.33333 13.3334 5.78105 13.3334 6.33333V11.6667C13.3334 12.219 12.8857 12.6667 12.3334 12.6667Z",
fill: "currentColor",
stroke: "currentColor",
strokeLinecap: "round"
})]
});
};
var FileIcon = function () {
return jsxs(SVG, {
fill: "currentColor",
children: [jsx("title", {
children: "File"
}), jsx("path", {
clipRule: "evenodd",
d: "M4.5 4.33325C4.5 4.05711 4.72386 3.83325 5 3.83325H8.16675V6.56659C8.16675 6.89795 8.43538 7.16658 8.76675 7.16658H11.5V12.3333C11.5 12.6094 11.2761 12.8333 11 12.8333H5C4.72386 12.8333 4.5 12.6094 4.5 12.3333V4.33325ZM12.5 6.67568C12.5001 6.67265 12.5001 6.66962 12.5001 6.66658C12.5001 6.66355 12.5001 6.66052 12.5 6.65749V6.41413C12.5 6.01631 12.342 5.63478 12.0607 5.35347L9.97978 3.27259C9.69848 2.99129 9.31694 2.83325 8.91912 2.83325H8.66675H5C4.17157 2.83325 3.5 3.50483 3.5 4.33325V12.3333C3.5 13.1617 4.17157 13.8333 5 13.8333H11C11.8284 13.8333 12.5 13.1617 12.5 12.3333V6.67568ZM9.16675 3.89888C9.20518 3.92078 9.24085 3.94787 9.27267 3.9797L11.3536 6.06058C11.3854 6.09243 11.4125 6.12813 11.4344 6.16658H9.16675V3.89888Z",
fillRule: "evenodd"
})]
});
};
var CloseIcon = function () {
return jsxs(SVG, {
stroke: "currentColor",
children: [jsx("title", {
children: "Close file"
}), jsx("path", {
d: "M12 4L4 12",
strokeLinecap: "round"
}), jsx("path", {
d: "M4 4L12 12",
strokeLinecap: "round"
})]
});
};
var ConsoleIcon = function () {
return jsxs(SVG, {
children: [jsx("title", {
children: "Open browser console"
}), jsx("path", {
d: "M5.65871 3.62037C5.44905 3.44066 5.1334 3.46494 4.95368 3.6746C4.77397 3.88427 4.79825 4.19992 5.00792 4.37963L5.65871 3.62037ZM5.00792 11.6204C4.79825 11.8001 4.77397 12.1157 4.95368 12.3254C5.1334 12.5351 5.44905 12.5593 5.65871 12.3796L5.00792 11.6204ZM9.9114 7.92407L10.2368 7.54445L9.9114 7.92407ZM5.00792 4.37963L9.586 8.3037L10.2368 7.54445L5.65871 3.62037L5.00792 4.37963ZM9.586 7.6963L5.00792 11.6204L5.65871 12.3796L10.2368 8.45555L9.586 7.6963ZM9.586 8.3037C9.39976 8.14407 9.39976 7.85594 9.586 7.6963L10.2368 8.45555C10.5162 8.2161 10.5162 7.7839 10.2368 7.54445L9.586 8.3037Z"
}), jsx("path", {
d: "M10 11.5C9.72386 11.5 9.5 11.7239 9.5 12C9.5 12.2761 9.72386 12.5 10 12.5V11.5ZM14.6667 12.5C14.9428 12.5 15.1667 12.2761 15.1667 12C15.1667 11.7239 14.9428 11.5 14.6667 11.5V12.5ZM10 12.5H14.6667V11.5H10V12.5Z"
})]
});
};
var _a$1;
var defaultLight = {
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"
}
};
var defaultDark = {
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 SANDPACK_THEMES = {
light: defaultLight,
dark: defaultDark,
auto: typeof window !== "undefined" ? ((_a$1 = window === null || window === void 0 ? void 0 : window.matchMedia) === null || _a$1 === void 0 ? void 0 : _a$1.call(window, "(prefers-color-scheme: dark)").matches) ? defaultDark : defaultLight : defaultLight
};
var getFileName = function (filePath) {
var lastIndexOfSlash = filePath.lastIndexOf("/");
return filePath.slice(lastIndexOfSlash + 1);
};
var calculateNearestUniquePath = function (currentPath, otherPaths) {
var currentPathParts = (currentPath[0] === "/" ? currentPath.slice(1) : currentPath).split("/");
var resultPathParts = [];
if (currentPathParts.length === 1) {
resultPathParts.unshift(currentPathParts[0]);
} else {
for (var fileIndex = 0; fileIndex < otherPaths.length; fileIndex++) {
var otherPathParts = otherPaths[fileIndex].split("/");
for (var partsFromEnd = 1; partsFromEnd <= currentPathParts.length; partsFromEnd++) {
var currentPathPart = currentPathParts[currentPathParts.length - partsFromEnd];
var otherPathPart = otherPathParts[otherPathParts.length - partsFromEnd];
if (resultPathParts.length < partsFromEnd) {
resultPathParts.unshift(currentPathPart);
}
if (currentPathPart !== otherPathPart) {
break;
}
}
}
}
if (resultPathParts.length < currentPathParts.length) {
resultPathParts.unshift("..");
}
return resultPathParts.join("/");
};
var isDarkColor = function (color) {
var r = 0;
var g = 0;
var b = 0;
if (color.startsWith("#")) {
if (color.length < 7) {
return true;
}
r = parseInt(color.substr(1, 2), 16);
g = parseInt(color.substr(3, 2), 16);
b = parseInt(color.substr(5, 2), 16);
} else {
var rgbValues = color.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",");
if (rgbValues.length < 3) {
return true;
}
r = parseInt(rgbValues[0], 10);
g = parseInt(rgbValues[1], 10);
b = parseInt(rgbValues[2], 10);
}
var yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq < 128;
};
var lastCount = 0;
var generateRandomId = function () {
var random = +(Date.now().toString(10).substr(0, 4) + lastCount++);
return random.toString(16);
};
var toString = function () {
return "";
};
var doubleToString = function () {
return toString;
};
var defineProperty = Object.getOwnPropertyDescriptors({
toString: toString
});
Object.defineProperties(toString, defineProperty);
Object.defineProperties(doubleToString, defineProperty);
var createStitchesMock = {
createTheme: toString,
css: doubleToString,
getCssText: toString,
keyframes: doubleToString
};
var _a;
var THEME_PREFIX = "sp";
var createTheme = (_a = createStitchesMock , _a.createTheme), getCssText = _a.getCssText, keyframes = _a.keyframes;
var defaultVariables = {
space: new Array(11).fill(" ").reduce(function (acc, _, index) {
var _a;
return __assign(__assign({}, acc), (_a = {}, _a[index + 1] = ("").concat((index + 1) * 4, "px"), _a));
}, {}),
border: {
radius: "4px"
},
layout: {
height: "300px",
headerHeight: "40px"
},
transitions: {
default: "150ms ease"
},
zIndices: {
base: "1",
overlay: "2",
top: "3"
}
};
var standardizeStitchesTheme = function (theme) {
var syntaxEntries = Object.entries(theme.syntax);
var syntax = syntaxEntries.reduce(function (tokenAcc, _a) {
var _b;
var tokenName = _a[0], tokenValue = _a[1];
var newValues = (_b = {}, _b[("color-").concat(tokenName)] = tokenValue, _b);
if (typeof tokenValue === "object") {
newValues = Object.entries(tokenValue).reduce(function (valueAcc, _a) {
var _b;
var styleProp = _a[0], styleValue = _a[1];
return __assign(__assign({}, valueAcc), (_b = {}, _b[("").concat(styleProp, "-").concat(tokenName)] = styleValue, _b));
}, {});
}
return __assign(__assign({}, tokenAcc), newValues);
}, {});
return __assign(__assign({}, defaultVariables), {
colors: theme.colors,
font: theme.font,
syntax: syntax
});
};
var standardizeTheme = function (inputTheme) {
var _a, _b, _c, _d, _e;
if (inputTheme === void 0) {
inputTheme = "light";
}
var defaultLightThemeKey = "default";
if (typeof inputTheme === "string") {
var predefinedTheme = SANDPACK_THEMES[inputTheme];
if (!predefinedTheme) {
throw new Error(("[sandpack-react]: invalid theme '").concat(inputTheme, "' provided."));
}
return {
theme: predefinedTheme,
id: inputTheme,
mode: isDarkColor(predefinedTheme.colors.surface1) ? "dark" : "light"
};
}
var mode = isDarkColor((_b = (_a = inputTheme === null || inputTheme === void 0 ? void 0 : inputTheme.colors) === null || _a === void 0 ? void 0 : _a.surface1) !== null && _b !== void 0 ? _b : defaultLight.colors.surface1) ? "dark" : "light";
var baseTheme = mode === "dark" ? defaultDark : defaultLight;
var colorsByMode = __assign(__assign({}, baseTheme.colors), (_c = inputTheme === null || inputTheme === void 0 ? void 0 : inputTheme.colors) !== null && _c !== void 0 ? _c : {});
var syntaxByMode = __assign(__assign({}, baseTheme.syntax), (_d = inputTheme === null || inputTheme === void 0 ? void 0 : inputTheme.syntax) !== null && _d !== void 0 ? _d : {});
var fontByMode = __assign(__assign({}, baseTheme.font), (_e = inputTheme === null || inputTheme === void 0 ? void 0 : inputTheme.font) !== null && _e !== void 0 ? _e : {});
var theme = {
colors: colorsByMode,
syntax: syntaxByMode,
font: fontByMode
};
var id = inputTheme ? simpleHashFunction(JSON.stringify(theme)) : defaultLightThemeKey;
return {
theme: theme,
id: ("sp-").concat(id),
mode: mode
};
};
var simpleHashFunction = function (str) {
var hash = 0;
for (var i = 0; i < str.length; hash &= hash) {
hash = 31 * hash + str.charCodeAt(i++);
}
return Math.abs(hash);
};
var fakeCss = function () {
return "";
};
fakeCss.toString = fakeCss;
var ClassNamesContext = createContext({});
var ClassNamesProvider = function (_a) {
var children = _a.children, classes = _a.classes;
return jsx(ClassNamesContext.Provider, {
value: classes || ({}),
children: children
});
};
var useClassNames = function () {
var contextClassNames = useContext(ClassNamesContext);
return function sandpackClassNames(customClassName, allClassNames) {
if (allClassNames === void 0) {
allClassNames = [];
}
var custom = ("").concat(THEME_PREFIX, "-").concat(customClassName);
return joinClassNames.apply(void 0, __spreadArray(__spreadArray([], allClassNames, false), [custom, contextClassNames[custom]], false));
};
};
var joinClassNames = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return args.filter(Boolean).join(" ");
};
var wrapperClassName$3 = fakeCss;
var SandpackThemeContext = React.createContext({
theme: defaultLight,
id: "light",
mode: "light"
});
var SandpackThemeProvider = function (_a) {
var themeFromProps = _a.theme, children = _a.children, className = _a.className, props = __rest(_a, ["theme", "children", "className"]);
var _b = React.useState(themeFromProps), prefferedTheme = _b[0], setPreferredTheme = _b[1];
var _c = standardizeTheme(prefferedTheme), theme = _c.theme, id = _c.id, mode = _c.mode;
var classNames = useClassNames();
var themeClassName = React.useMemo(function () {
return createTheme(id, standardizeStitchesTheme(theme));
}, [theme, id]);
React.useEffect(function () {
if (themeFromProps !== "auto") {
setPreferredTheme(themeFromProps);
return;
}
var colorSchemeChange = function (_a) {
var matches = _a.matches;
setPreferredTheme(matches ? "dark" : "light");
};
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", colorSchemeChange);
return function () {
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
};
}, [themeFromProps]);
return jsx(SandpackThemeContext.Provider, {
value: {
theme: theme,
id: id,
mode: mode
},
children: jsx("div", __assign({
className: classNames("wrapper", [themeClassName, wrapperClassName$3(), className])
}, props, {
children: children
}))
});
};
var SandpackThemeConsumer = SandpackThemeContext.Consumer;
var commonFiles = {
"/styles.css": {
code: "body {\n font-family: sans-serif;\n -webkit-font-smoothing: auto;\n -moz-font-smoothing: auto;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: auto;\n text-rendering: optimizeLegibility;\n font-smooth: always;\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\n\nh1 {\n font-size: 1.5rem;\n}"
}
};
var ASTRO_TEMPLATE = {
files: {
"/src/styles.css": commonFiles["/styles.css"],
"/src/pages/index.astro": {
code: "---\nimport \"../styles.css\";\nconst data = \"world\";\n---\n\n<h1>Hello {data}</h1>\n\n<style>\n h1 {\n font-size: 1.5rem;\n }\n</style>"
},
".env": {
code: "ASTRO_TELEMETRY_DISABLED=\"1\""
},
"/package.json": {
code: JSON.stringify({
dependencies: {
astro: "^1.6.12",
"esbuild-wasm": "^0.15.16"
},
scripts: {
dev: "astro dev",
start: "astro dev",
build: "astro build",
preview: "astro preview",
astro: "astro"
}
})
}
},
main: "/src/pages/index.astro",
environment: "node"
};
var NEXTJS_TEMPLATE = {
files: __assign(__assign({}, commonFiles), {
"/pages/_app.js": {
code: "import '../styles.css'\n\nexport default function MyApp({ Component, pageProps }) {\n return <Component {...pageProps} />\n}"
},
"/pages/index.js": {
code: "export default function Home({ data }) {\n return (\n <div>\n <h1>Hello {data}</h1>\n </div>\n );\n}\n \nexport function getServerSideProps() {\n return {\n props: { data: \"world\" },\n }\n}\n"
},
"/next.config.js": {
code: "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n reactStrictMode: true,\n swcMinify: true,\n}\n\nmodule.exports = nextConfig\n"
},
"/package.json": {
code: JSON.stringify({
name: "my-app",
version: "0.1.0",
private: true,
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"
}
})
}
}),
main: "/pages/index.js",
environment: "node"
};
var NODE_TEMPLATE = {
files: {
"/index.js": {
code: "const http = require('http');\n\nconst hostname = '127.0.0.1';\nconst port = 3000;\n\nconst server = http.createServer((req, res) => {\n res.statusCode = 200;\n res.setHeader('Content-Type', 'text/html');\n res.end('Hello world');\n});\n\nserver.listen(port, hostname, () => {\n console.log(`Server running at http://${hostname}:${port}/`);\n});"
},
"/package.json": {
code: JSON.stringify({
dependencies: {},
scripts: {
start: "node index.js"
},
main: "index.js"
})
}
},
main: "/index.js",
environment: "node"
};
var VITE_TEMPLATE = {
files: __assign(__assign({}, commonFiles), {
"/index.js": {
code: "import \"./styles.css\";\n\ndocument.getElementById(\"app\").innerHTML = `\n<h1>Hello world</h1>\n`;\n"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/index.js\"></script>\n </body>\n</html>\n"
},
"/package.json": {
code: JSON.stringify({
scripts: {
dev: "vite",
build: "vite build",
preview: "vite preview"
},
devDependencies: {
vite: "4.1.4",
"esbuild-wasm": "0.17.12"
}
})
}
}),
main: "/index.js",
environment: "node"
};
var VITE_PREACT_TEMPLATE = {
files: __assign(__assign({}, commonFiles), {
"/App.jsx": {
code: "export default function App() {\n const data = \"world\"\n\n return <h1>Hello {data}</h1>\n}\n"
},
"/index.jsx": {
code: "import { render } from \"preact\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = document.getElementById(\"root\");\nrender(<App />, root);\n"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/index.jsx\"></script>\n </body>\n</html>\n"
},
"/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.1.4",
"esbuild-wasm": "0.17.12"
}
})
},
"/vite.config.js": {
code: "import { defineConfig } from \"vite\";\nimport preact from '@preact/preset-vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [preact()],\n});\n"
}
}),
main: "/App.jsx",
environment: "node"
};
var VITE_PREACT_TS_TEMPLATE = {
files: __assign(__assign({}, commonFiles), {
"/App.tsx": {
code: "export default function App() {\n const data: string = \"world\"\n\n return <h1>Hello {data}</h1>\n}\n"
},
"/index.tsx": {
code: "import { render } from \"preact\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = document.getElementById(\"root\") as HTMLElement;\nrender(<App />, root);\n"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/index.tsx\"></script>\n </body>\n</html>\n"
},
"/tsconfig.json": {
code: JSON.stringify({
compilerOptions: {
target: "ESNext",
useDefineForClassFields: true,
lib: ["DOM", "DOM.Iterable", "ESNext"],
allowJs: false,
skipLibCheck: true,
esModuleInterop: false,
allowSyntheticDefaultImports: true,
strict: true,
forceConsistentCasingInFileNames: true,
module: "ESNext",
moduleResolution: "Node",
resolveJsonModule: true,
isolatedModules: true,
noEmit: true,
jsx: "react-jsx",
jsxImportSource: "preact"
},
include: ["src"],
references: [{
path: "./tsconfig.node.json"
}]
}, null, 2)
},
"/tsconfig.node.json": {
code: JSON.stringify({
compilerOptions: {
composite: true,
module: "ESNext",
moduleResolution: "Node",
allowSyntheticDefaultImports: true
},
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.1.4",
"esbuild-wasm": "^0.17.12"
}
}, null, 2)
},
"/vite-env.d.ts": {
code: '/// <reference types="vite/client" />'
},
"/vite.config.ts": {
code: "import { defineConfig } from 'vite'\nimport preact from '@preact/preset-vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [preact()],\n})\n"
}
}),
main: "/App.tsx",
environment: "node"
};
var VITE_REACT_TEMPLATE = {
files: __assign(__assign({}, commonFiles), {
"/App.jsx": {
code: "export default function App() {\n const data = \"world\"\n\n return <h1>Hello {data}</h1>\n}\n"
},
"/index.jsx": {
code: "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n <StrictMode>\n <App />\n </StrictMode>\n);"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/index.jsx\"></script>\n </body>\n</html>\n"
},
"/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.1.4",
"esbuild-wasm": "0.17.12"
}
})
},
"/vite.config.js": {
code: "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n});\n"
}
}),
main: "/App.jsx",
environment: "node"
};
var VITE_REACT_TS_TEMPLATE = {
files: __assign(__assign({}, commonFiles), {
"/App.tsx": {
code: "export default function App() {\n const data: string = \"world\"\n\n return <h1>Hello {data}</h1>\n}\n"
},
"/index.tsx": {
code: "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\nimport React from \"react\";\n\nconst root = createRoot(document.getElementById(\"root\") as HTMLElement);\nroot.render(\n <StrictMode>\n <App />\n </StrictMode>\n);\n"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/index.tsx\"></script>\n </body>\n</html>\n"
},
"/tsconfig.json": {
code: JSON.stringify({
compilerOptions: {
target: "ESNext",
useDefineForClassFields: true,
lib: ["DOM", "DOM.Iterable", "ESNext"],
allowJs: false,
skipLibCheck: true,
esModuleInterop: false,
allowSyntheticDefaultImports: true,
strict: true,
forceConsistentCasingInFileNames: true,
module: "ESNext",
moduleResolution: "Node",
resolveJsonModule: true,
isolatedModules: true,
noEmit: true,
jsx: "react-jsx"
},
include: ["src"],
references: [{
path: "./tsconfig.node.json"
}]
}, null, 2)
},
"/tsconfig.node.json": {
code: JSON.stringify({
compilerOptions: {
composite: true,
module: "ESNext",
moduleResolution: "Node",
allowSyntheticDefaultImports: true
},
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",
typescript: "^4.9.5",
vite: "4.1.4",
"esbuild-wasm": "^0.17.12"
}
}, null, 2)
},
"/vite-env.d.ts": {
code: '/// <reference types="vite/client" />'
},
"/vite.config.ts": {
code: "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n})\n"
}
}),
main: "/App.tsx",
environment: "node"
};
var VITE_SVELTE_TEMPLATE = {
files: {
"/src/styles.css": commonFiles["/styles.css"],
"/src/App.svelte": {
code: "<script>\nconst data = \"world\";\n</script>\n\n<h1>Hello {data}</h1>\n\n<style>\nh1 {\n font-size: 1.5rem;\n}\n</style>"
},
"/src/main.js": {
code: "import App from './App.svelte'\nimport \"./styles.css\"\n\nconst app = new App({\n target: document.getElementById('app'),\n})\n\nexport default app"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.js\"></script>\n </body>\n</html>\n"
},
"/vite.config.js": {
code: "import { defineConfig } from 'vite'\nimport { svelte } from '@sveltejs/vite-plugin-svelte'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [svelte()],\n})"
},
"/package.json": {
code: JSON.stringify({
type: "module",
scripts: {
dev: "vite"
},
devDependencies: {
"@sveltejs/vite-plugin-svelte": "^2.0.2",
svelte: "^3.55.1",
vite: "4.0.4",
"esbuild-wasm": "^0.17.12"
}
})
}
},
main: "/src/App.svelte",
environment: "node"
};
var VITE_SVELTE_TS_TEMPLATE = {
files: {
"/src/styles.css": commonFiles["/styles.css"],
"/src/App.svelte": {
code: "<script lang=\"ts\">\nconst data: string = \"world\";\n</script>\n\n<h1>Hello {data}</h1>\n\n<style>\nh1 {\n font-size: 1.5rem;\n}\n</style>"
},
"/src/main.ts": {
code: "import App from './App.svelte'\nimport \"./styles.css\"\n\nconst app = new App({\n target: document.getElementById('app'),\n})\n\nexport default app"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"></script>\n </body>\n</html>\n"
},
"/vite-env.d.ts": {
code: "/// <reference types=\"svelte\" />\n/// <reference types=\"vite/client\" />"
},
"svelte.config.js": {
code: "import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'\n\nexport default {\n // Consult https://svelte.dev/docs#compile-time-svelte-preprocess\n // for more information about preprocessors\n preprocess: vitePreprocess(),\n}\n"
},
"/vite.config.ts": {
code: "import { defineConfig } from 'vite'\nimport { svelte } from '@sveltejs/vite-plugin-svelte'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [svelte()],\n})"
},
"tsconfig.json": {
code: JSON.stringify({
extends: "@tsconfig/svelte/tsconfig.json",
compilerOptions: {
target: "ESNext",
useDefineForClassFields: true,
module: "ESNext",
resolveJsonModule: true,
allowJs: true,
checkJs: true,
isolatedModules: true
},
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: true,
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.0.2",
"@tsconfig/svelte": "^3.0.0",
svelte: "^3.55.1",
"svelte-check": "^2.10.3",
tslib: "^2.5.0",
vite: "4.1.4",
"esbuild-wasm": "^0.17.12"
}
}, null, 2)
}
},
main: "/src/App.svelte",
environment: "node"
};
var VITE_VUE_TEMPLATE = {
files: {
"/src/styles.css": commonFiles["/styles.css"],
"/src/App.vue": {
code: "<script setup>\nimport { ref } from \"vue\";\n\nconst data = ref(\"world\");\n</script>\n\n<template>\n <h1>Hello {{ data }}</h1>\n</template>\n\n<style>\nh1 {\n font-size: 1.5rem;\n}\n</style>"
},
"/src/main.js": {
code: "import { createApp } from 'vue'\nimport App from './App.vue'\nimport \"./styles.css\"\n \ncreateApp(App).mount('#app') \n"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.js\"></script>\n </body>\n</html>\n"
},
"/vite.config.js": {
code: "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n"
},
"/package.json": {
code: JSON.stringify({
scripts: {
dev: "vite",
build: "vite build",
preview: "vite preview"
},
dependencies: {
vue: "^3.2.45"
},
devDependencies: {
"@vitejs/plugin-vue": "3.2.0",
vite: "4.1.4",
"esbuild-wasm": "0.17.12"
}
})
}
},
main: "/src/App.vue",
environment: "node"
};
var VITE_VUE_TS_TEMPLATE = {
files: {
"/src/styles.css": commonFiles["/styles.css"],
"/src/App.vue": {
code: "<script setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst data = ref<string>(\"world\");\n</script>\n\n<template>\n <h1>Hello {{ data }}</h1>\n</template>\n\n<style>\nh1 {\n font-size: 1.5rem;\n}\n</style>"
},
"/src/main.ts": {
code: "import { createApp } from 'vue'\nimport App from './App.vue'\nimport \"./styles.css\"\n\ncreateApp(App).mount('#app')\n"
},
"/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite App</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"></script>\n </body>\n</html>\n"
},
"/vite-env.d.ts": {
code: '/// <reference types="vite/client" />'
},
"/vite.config.ts": {
code: "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n"
},
"tsconfig.json": {
code: JSON.stringify({
compilerOptions: {
target: "ESNext",
useDefineForClassFields: true,
module: "ESNext",
moduleResolution: "Node",
strict: true,
jsx: "preserve",
resolveJsonModule: true,
isolatedModules: true,
esModuleInterop: true,
lib: ["ESNext", "DOM"],
skipLibCheck: true,
noEmit: true
},
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: true,
module: "ESNext",
moduleResolution: "Node",
allowSyntheticDefaultImports: true
},
include: ["vite.config.ts"]
}, null, 2)
},
"/package.json": {
code: JSON.stringify({
scripts: {
dev: "vite",
build: "tsc && vite build",
preview: "vite preview"
},
dependencies: {
vue: "^3.2.47"
},
devDependencies: {
"@vitejs/plugin-vue": "^4.0.0",
vite: "4.1.4",
"vue-tsc": "^1.2.0",
typescript: "^4.9.5",
"esbuild-wasm": "^0.17.12"
}
}, null, 2)
}
},
main: "/src/App.vue",
environment: "node"
};
var ANGULAR_TEMPLATE = {
files: {
"/src/app/app.component.css": commonFiles["/styles.css"],
"/src/app/app.component.html": {
code: "<div>\n<h1>{{ helloWorld }}</h1>\n</div> \n"
},
"/src/app/app.component.ts": {
code: "import { Component } from \"@angular/core\";\n\n@Component({\n selector: \"app-root\",\n templateUrl: \"./app.component.html\",\n styleUrls: [\"./app.component.css\"]\n})\nexport class AppComponent {\n helloWorld = \"Hello world\";\n} \n"
},
"/src/app/app.module.ts": {
code: "import { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\n \nimport { AppComponent } from \"./app.component\";\n \n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {} \n"
},
"/src/index.html": {
code: "<!doctype html>\n<html lang=\"en\">\n \n<head>\n <meta charset=\"utf-8\">\n <title>Angular</title>\n <base href=\"/\">\n \n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n</head>\n \n<body>\n <app-root></app-root>\n</body>\n \n</html>\n"
},
"/src/main.ts": {
code: "import { enableProdMode } from \"@angular/core\";\nimport { platformBrowserDynamic } from \"@angular/platform-browser-dynamic\";\n \nimport { AppModule } from \"./app/app.module\"; \n\nplatformBrowserDynamic()\n .bootstrapModule(AppModule)\n .catch(err => console.log(err));\n \n"
},
"/src/polyfills.ts": {
code: "import \"core-js/proposals/reflect-metadata\"; \n import \"zone.js/dist/zone\";\n"
},
"/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"
})
}
},
main: "/src/app/app.component.ts",
environment: "angular-cli"
};
var REACT_TEMPLATE = {
files: __assign(__assign({}, commonFiles), {
"/App.js": {
code: "export default function App() {\n return <h1>Hello world</h1>\n}\n"
},
"/index.js": {
code: "import React, { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n <StrictMode>\n <App />\n </StrictMode>\n);"
},
"/public/index.html": {
code: "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document</title>\n </head>\n <body>\n <div id=\"root\"></div>\n </body>\n</html>"
},
"/package.json": {
code: JSON.stringify({
dependencies: {
react: "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.0"
},
main: "/index.js"
})
}
}),
main: "/App.js",
environment: "create-react-app"
};
var REACT_TYPESCRIPT_TEMPLATE = {
files: __assign(__assign({}, commonFiles), {
"tsconfig.json": {
code: "{\n \"include\": [\n \"./**/*\"\n ],\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"lib\": [ \"dom\", \"es2015\" ],\n \"jsx\": \"react-jsx\"\n }\n}"
},
"/App.tsx": {
code: "export default function App(): JSX.Element {\n return <h1>Hello world</h1>\n}\n"
},
"/index.tsx": {
code: "import React, { StrictMode } from \"react\";\nimport { createRoot }