@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" />
949 lines (918 loc) • 272 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var core = require('@stitches/core');
var dequal = require('dequal');
var sandpackClient = require('@codesandbox/sandpack-client');
var autocomplete = require('@codemirror/autocomplete');
var commands = require('@codemirror/commands');
var language = require('@codemirror/language');
var state = require('@codemirror/state');
var view = require('@codemirror/view');
var useIntersectionObserver = require('@react-hook/intersection-observer');
var langCss = require('@codemirror/lang-css');
var langHtml = require('@codemirror/lang-html');
var langJavascript = require('@codemirror/lang-javascript');
var highlight = require('@lezer/highlight');
var Anser = require('anser');
var escapeCarriage = require('escape-carriage');
var LZString = require('lz-string');
var cleanSet = require('clean-set');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var useIntersectionObserver__default = /*#__PURE__*/_interopDefault(useIntersectionObserver);
var Anser__default = /*#__PURE__*/_interopDefault(Anser);
var LZString__default = /*#__PURE__*/_interopDefault(LZString);
var cleanSet__default = /*#__PURE__*/_interopDefault(cleanSet);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
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 (jsxRuntime.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 (jsxRuntime.jsxs(SVG, { viewBox: "0 0 48 48", children: [jsxRuntime.jsx("title", { children: "Sign in" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { viewBox: "0 0 48 48", children: [jsxRuntime.jsx("title", { children: "Sign out" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { fill: "none", stroke: "currentColor", children: [jsxRuntime.jsx("title", { children: "Restart script" }), jsxRuntime.jsx("path", { d: "M8 2C4.68629 2 2 4.68629 2 8C2 10.0946 3.07333 11.9385 4.7 13.0118", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M14.0005 7.9998C14.0005 5.82095 12.8391 3.91335 11.1016 2.8623", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M14.0003 2.3335H11.167C10.8908 2.3335 10.667 2.55735 10.667 2.8335V5.66683", strokeLinecap: "round" }), jsxRuntime.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" }), jsxRuntime.jsx("path", { d: "M10 10L12 12L10 14", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M14.667 14L12.667 14", strokeLinecap: "round", strokeLinejoin: "round" })] })); };
var RunIcon = function () { return (jsxRuntime.jsxs(SVG, { children: [jsxRuntime.jsx("title", { children: "Run sandbox" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { children: [jsxRuntime.jsx("title", { children: "Click to go back" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { children: [jsxRuntime.jsx("title", { children: "Click to go forward" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { children: [jsxRuntime.jsx("title", { children: "Refresh preview" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { fill: "none", stroke: "currentColor", children: [jsxRuntime.jsx("title", { children: "Clean" }), jsxRuntime.jsx("circle", { cx: "7.99998", cy: "8.00004", r: "4.66667", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M4.66669 4.66663L11.3334 11.3333" })] })); };
var ExportIcon = function () { return (jsxRuntime.jsxs(SVG, { fill: "none", stroke: "currentColor", children: [jsxRuntime.jsx("title", { children: "Open on CodeSandbox" }), jsxRuntime.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" }), jsxRuntime.jsx("path", { d: "M10 3.33337H12.5667C12.6219 3.33337 12.6667 3.37815 12.6667 3.43337V6.00004", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M7.33331 8.66668L12.5333 3.46667", strokeLinecap: "round" })] })); };
var DirectoryIconOpen = function () { return (jsxRuntime.jsxs(SVG, { children: [jsxRuntime.jsx("title", { children: "Directory" }), jsxRuntime.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" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { children: [jsxRuntime.jsx("title", { children: "Directory" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { fill: "currentColor", children: [jsxRuntime.jsx("title", { children: "File" }), jsxRuntime.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 (jsxRuntime.jsxs(SVG, { stroke: "currentColor", children: [jsxRuntime.jsx("title", { children: "Close file" }), jsxRuntime.jsx("path", { d: "M12 4L4 12", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M4 4L12 12", strokeLinecap: "round" })] })); };
var ConsoleIcon = function () { return (jsxRuntime.jsxs(SVG, { children: [jsxRuntime.jsx("title", { children: "Open browser console" }), jsxRuntime.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" }), jsxRuntime.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$a;
/**
* @category Theme
*/
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",
},
};
/**
* @category Theme
*/
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",
},
};
/**
* @category Theme
*/
var SANDPACK_THEMES = {
light: defaultLight,
dark: defaultDark,
auto: typeof window !== "undefined"
? ((_a$a = window === null || window === void 0 ? void 0 : window.matchMedia) === null || _a$a === void 0 ? void 0 : _a$a.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 path is on root, there are no parts to loop through
if (currentPathParts.length === 1) {
resultPathParts.unshift(currentPathParts[0]);
}
else {
// Loop over all other paths to find a unique path
for (var fileIndex = 0; fileIndex < otherPaths.length; fileIndex++) {
// We go over each part of the path from end to start to find the closest unique directory
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 this part hasn't been added to the result path, we add it here
if (resultPathParts.length < partsFromEnd) {
resultPathParts.unshift(currentPathPart);
}
// If this part is different between the current path and other path we break
// as from this moment the current path is unique compared to this other path
if (currentPathPart !== otherPathPart) {
break;
}
}
}
}
// Add `..` if this is a relative path
if (resultPathParts.length < currentPathParts.length) {
resultPathParts.unshift("..");
}
// Join the result path parts into a path string
return resultPathParts.join("/");
};
// Checks both rgb and hex colors for contrast and returns true if the color is in the dark spectrum
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;
};
// Minimal cuid-like id
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 defineProperty = Object.getOwnPropertyDescriptors({ toString: toString });
Object.defineProperties(toString, defineProperty);
var _a$9;
/**
* @category Theme
*/
var THEME_PREFIX = "sp";
/**
* @category Theme
*/
// prettier-ignore
var createTheme = (_a$9 = core.createStitches({
prefix: THEME_PREFIX,
}), _a$9.createTheme), css = _a$9.css, getCssText = _a$9.getCssText, keyframes = _a$9.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",
},
};
/**
* @category Theme
*/
var standardizeStitchesTheme = function (theme) {
// Flat values
var syntaxEntries = Object.entries(theme.syntax);
var syntax = syntaxEntries.reduce(function (tokenAcc, _a) {
var _b;
var tokenName = _a[0], tokenValue = _a[1];
// Single property
var newValues = (_b = {}, _b["color-".concat(tokenName)] = tokenValue, _b);
// Multiples properties
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 });
};
/**
* @category Theme
*/
var standardizeTheme = function (inputTheme) {
var _a, _b, _c, _d, _e;
if (inputTheme === void 0) { inputTheme = "light"; }
var defaultLightThemeKey = "default";
/**
* Set a local theme: dark or light
*/
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",
};
}
/**
* Fullfill the colors key, in case it's missing any key
*/
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";
/**
* Figure out what's the properly default colors it should be
* error, warning and success colors have different values between dark and 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);
};
/**
* The fake `css` function used to match the real `css` function usage
* We use this for the unstyled bundle which do not need real class names
* `css` is a factory which return a className generator, but also it be used in scenarios which `toString` will be invoked
* so we also need to add the `toString` method to it.
*/
var fakeCss = function () { return ""; };
fakeCss.toString = fakeCss;
/**
* <ClassNamesContext classes={{
* "sp-wrapper": "custom-wrapper",
* "sp-layout": "custom-layout",
* "sp-tab-button": "custom-tab",
* }}>
* ...
* </ClassNamesContext>
*/
var ClassNamesContext = React.createContext({});
var ClassNamesProvider = function (_a) {
var children = _a.children, classes = _a.classes;
return (jsxRuntime.jsx(ClassNamesContext.Provider, { value: classes || {}, children: children }));
};
var useClassNames = function () {
var contextClassNames = React.useContext(ClassNamesContext);
return function sandpackClassNames(customClassName,
/* eslint-disable @typescript-eslint/no-explicit-any */
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));
};
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
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 = css({
all: "initial",
fontSize: "$font$size",
fontFamily: "$font$body",
display: "block",
boxSizing: "border-box",
textRendering: "optimizeLegibility",
WebkitTapHighlightColor: "transparent",
WebkitFontSmoothing: "subpixel-antialiased",
variants: {
variant: {
dark: { colorScheme: "dark" },
light: { colorScheme: "light" },
},
},
"@media screen and (min-resolution: 2dppx)": {
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
},
"*": { boxSizing: "border-box" },
".sp-wrapper:focus": { outline: "0" },
});
var SandpackThemeContext = React__namespace.createContext({
theme: defaultLight,
id: "light",
mode: "light",
});
/**
* @category Theme
*/
var SandpackThemeProvider = function (_a) {
var themeFromProps = _a.theme, children = _a.children, className = _a.className, props = __rest(_a, ["theme", "children", "className"]);
var _b = React__namespace.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__namespace.useMemo(function () {
return createTheme(id, standardizeStitchesTheme(theme));
}, [theme, id]);
React__namespace.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 (jsxRuntime.jsx(SandpackThemeContext.Provider, { value: { theme: theme, id: id, mode: mode }, children: jsxRuntime.jsx("div", __assign({ className: classNames("wrapper", [
themeClassName,
wrapperClassName$3({ variant: mode }),
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}",
},
};
/**
* @hidden
*/
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/conf