From 546076d235c4f245322bcd37b088b1bb315291a2 Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Wed, 29 Nov 2023 04:33:23 -0800 Subject: [PATCH 01/32] Docs: Add proper playground --- apps/docs/components/Playground.js | 101 ++++++++++++++++++ .../docs/components/playground-utils/files.js | 98 +++++++++++++++++ apps/docs/src/pages/playground.js | 23 +--- package-lock.json | 10 ++ 4 files changed, 212 insertions(+), 20 deletions(-) create mode 100644 apps/docs/components/Playground.js create mode 100644 apps/docs/components/playground-utils/files.js diff --git a/apps/docs/components/Playground.js b/apps/docs/components/Playground.js new file mode 100644 index 00000000..eef75f5b --- /dev/null +++ b/apps/docs/components/Playground.js @@ -0,0 +1,101 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import * as React from 'react'; +import {useEffect, useState, useRef} from 'react'; +import * as stylex from '@stylexjs/stylex'; +import {WebContainer} from '@webcontainer/api'; +import {files} from './playground-utils/files'; + +async function wcSpawn(instance, ...args) { + console.log('Running:', args.join(' ')); + const process = await instance.spawn(...args); + process.output.pipeTo( + new WritableStream({ + write(data) { + console.log(data); + }, + }), + ); + const exitCode = await process.exit; + if (exitCode !== 0) { + console.log('Command Failed:', args.join(' '), 'with exit code', exitCode); + throw new Error('Command Failed', args.join(' ')); + } + + console.log('Command Successful:', args.join(' ')); + return process; +} + +async function makeWebcontainer() { + console.log('Booting WebContainer...'); + const instance = await WebContainer.boot(); + console.log('Boot successful!'); + + console.log('Mounting files...'); + await instance.mount(files); + console.log('Mounted files!'); + + console.log('Installing dependencies...'); + await wcSpawn(instance, 'npm', ['install']); + console.log('Installed dependencies!'); + + return instance; +} + +export default function Playground() { + const instance = useRef(null); + const [output, setOutput] = useState(''); + + const build = async () => { + const containerInstance = instance.current; + if (!containerInstance) return; + + await wcSpawn(containerInstance, 'npm', ['run', 'build']); + const output = await containerInstance.fs.readFile('output.js', 'utf-8'); + setOutput(output); + }; + + useEffect(() => { + makeWebcontainer().then((i) => { + instance.current = i; + build(); + }); + () => { + instance.current.unmount(); + }; + }, []); + + return ( +
+ 
+        {files['input.js'].file.contents}
+
+ 
{output}
+
+ ); +} + +const styles = stylex.create({ + container: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: stylex.firstThatWorks('calc(100dvh - 60px)', 'calc(100vh - 60px)'), + borderBottomWidth: 2, + borderBottomStyle: 'solid', + borderBottomColor: 'var(--cyan)', + }, + textarea: { + width: '50%', + height: '100%', + borderWidth: 0, + borderStyle: 'none', + }, +}); diff --git a/apps/docs/components/playground-utils/files.js b/apps/docs/components/playground-utils/files.js new file mode 100644 index 00000000..f50b6f71 --- /dev/null +++ b/apps/docs/components/playground-utils/files.js @@ -0,0 +1,98 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +export const files = { + '.babelrc.js': { + file: { + contents: ` +const tsSyntaxPlugin = require('@babel/plugin-syntax-typescript'); +const jsxSyntaxPlugin = require('@babel/plugin-syntax-jsx'); + +module.exports = { + plugins: [ + tsSyntaxPlugin, + jsxSyntaxPlugin, + [ + "@stylexjs/babel-plugin", + { + dev: true, + stylexSheetName: "<>", + genConditionalClasses: true, + unstable_moduleResolution: { + type: "commonJS", + rootDir: '/', + }, + }, + ], + ], +}; +`, + }, + }, + 'package.json': { + file: { + contents: ` +{ + "name": "stylex-playground", + "version": "1.0.0", + "description": "Playground using WebContainers", + "main": "index.js", + "scripts": { + "build": "babel ./input.js -o ./output.js" + }, + "dependencies": { + "@stylexjs/stylex": "0.2.0-beta.27", + "@stylexjs/babel-plugin": "0.2.0-beta.27", + "@babel/cli": "latest", + "@babel/core": "latest", + "@babel/plugin-syntax-typescript": "latest", + "@babel/plugin-syntax-jsx": "latest" + } +} +`, + }, + }, + 'input.js': { + file: { + contents: ` +import * as React from 'react'; +import * as stylex from "@stylexjs/stylex"; + +export default function Card({ onClick, children, theme, variant, em = false }) { + const props = stylex.props(theme, styles.base, em && styles.emphasise, variantStyles[variant]); +} + +const styles = stylex.create({ + base: { + appearance: "none", + borderStyle: "none", + backgroundColor: "blue", + color: "white", + borderRadius: 4, + paddingBlock: 4, + paddingInline: 8, + }, + emphasise: { + transform: "scale(1.1)", + } +}); + +const variantStyles = stylex.create({ + danger: { + backgroundColor: "red", + color: "white", + }, + primary: { + fontWeight: "bold", + }, +}); +`, + }, + }, +}; diff --git a/apps/docs/src/pages/playground.js b/apps/docs/src/pages/playground.js index 25f52847..37f925de 100644 --- a/apps/docs/src/pages/playground.js +++ b/apps/docs/src/pages/playground.js @@ -8,30 +8,13 @@ */ import * as React from 'react'; -import * as stylex from '@stylexjs/stylex'; import Layout from '@theme/Layout'; -import CtaButton from '../../components/CtaButton'; +import Playground from '../../components/Playground'; -export default function Playground() { +export default function PlaygroundPage() { return ( -
- - StyleX + Next Demo - - A full playground is coming soon. -
+ ); } - -const styles = stylex.create({ - container: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - height: '60vh', - gap: '0.5rem', - }, -}); diff --git a/package-lock.json b/package-lock.json index b0828534..d085c08b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8916,6 +8916,11 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@webcontainer/api": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.1.8.tgz", + "integrity": "sha512-m9WRj38oCoFPrqZOTeJcncPjnZ00FZUMq9YHEXxdhAoYhhQ69Rz4qK5p444cIPaMy2j8H7HcNLcAIwMGWnpMpw==" + }, "node_modules/@webpack-cli/configtest": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz", @@ -32287,6 +32292,11 @@ "@xtuc/long": "4.2.2" } }, + "@webcontainer/api": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.1.8.tgz", + "integrity": "sha512-m9WRj38oCoFPrqZOTeJcncPjnZ00FZUMq9YHEXxdhAoYhhQ69Rz4qK5p444cIPaMy2j8H7HcNLcAIwMGWnpMpw==" + }, "@webpack-cli/configtest": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz", From 21e8cefaf63ae66ee371ef961441cdc9b168219c Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Wed, 29 Nov 2023 14:27:16 -0800 Subject: [PATCH 02/32] Improve compilation to not insert inject calls --- apps/docs/components/playground-utils/files.js | 16 +++------------- apps/docs/vercel.json | 17 +++++++++++++++++ 2 files changed, 20 insertions(+), 13 deletions(-) create mode 100644 apps/docs/vercel.json diff --git a/apps/docs/components/playground-utils/files.js b/apps/docs/components/playground-utils/files.js index f50b6f71..ea15f917 100644 --- a/apps/docs/components/playground-utils/files.js +++ b/apps/docs/components/playground-utils/files.js @@ -21,7 +21,7 @@ module.exports = { [ "@stylexjs/babel-plugin", { - dev: true, + dev: false, stylexSheetName: "<>", genConditionalClasses: true, unstable_moduleResolution: { @@ -64,8 +64,8 @@ module.exports = { import * as React from 'react'; import * as stylex from "@stylexjs/stylex"; -export default function Card({ onClick, children, theme, variant, em = false }) { - const props = stylex.props(theme, styles.base, em && styles.emphasise, variantStyles[variant]); +export default function Card({ onClick, children, em = false }) { + const props = stylex.props(styles.base, em && styles.emphasise); } const styles = stylex.create({ @@ -82,16 +82,6 @@ const styles = stylex.create({ transform: "scale(1.1)", } }); - -const variantStyles = stylex.create({ - danger: { - backgroundColor: "red", - color: "white", - }, - primary: { - fontWeight: "bold", - }, -}); `, }, }, diff --git a/apps/docs/vercel.json b/apps/docs/vercel.json new file mode 100644 index 00000000..79353ba7 --- /dev/null +++ b/apps/docs/vercel.json @@ -0,0 +1,17 @@ +{ + "headers": [ + { + "source": "/(.*)", + "headers": [ + { + "key": "Cross-Origin-Embedder-Policy", + "value": "require-corp" + }, + { + "key": "Cross-Origin-Opener-Policy", + "value": "same-origin" + } + ] + } + ] +} \ No newline at end of file From 2ad472be2b2a05ff5bc47e493d037766655c7190 Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Wed, 29 Nov 2023 15:00:35 -0800 Subject: [PATCH 03/32] Add Vercel headers --- apps/docs/vercel.json | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 apps/docs/vercel.json diff --git a/apps/docs/vercel.json b/apps/docs/vercel.json deleted file mode 100644 index 79353ba7..00000000 --- a/apps/docs/vercel.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "headers": [ - { - "source": "/(.*)", - "headers": [ - { - "key": "Cross-Origin-Embedder-Policy", - "value": "require-corp" - }, - { - "key": "Cross-Origin-Opener-Policy", - "value": "same-origin" - } - ] - } - ] -} \ No newline at end of file From c052704ed0082746fb8a6c187101cfd7c8d1bb97 Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Mon, 4 Dec 2023 16:44:35 -0800 Subject: [PATCH 04/32] Configure local development for playground --- .../docs/components/playground-utils/files.js | 10 +- apps/docs/package.json | 2 +- apps/docs/serve.json | 21 + package-lock.json | 625 +++++++++++++++++- 4 files changed, 633 insertions(+), 25 deletions(-) create mode 100644 apps/docs/serve.json diff --git a/apps/docs/components/playground-utils/files.js b/apps/docs/components/playground-utils/files.js index ea15f917..cc9607ee 100644 --- a/apps/docs/components/playground-utils/files.js +++ b/apps/docs/components/playground-utils/files.js @@ -16,7 +16,7 @@ const jsxSyntaxPlugin = require('@babel/plugin-syntax-jsx'); module.exports = { plugins: [ - tsSyntaxPlugin, + [tsSyntaxPlugin, { isTSX: true }], jsxSyntaxPlugin, [ "@stylexjs/babel-plugin", @@ -64,8 +64,12 @@ module.exports = { import * as React from 'react'; import * as stylex from "@stylexjs/stylex"; -export default function Card({ onClick, children, em = false }) { - const props = stylex.props(styles.base, em && styles.emphasise); +export default function Card({ children, em = false, ...props }) { + return ( +
+ {children} +
+ ); } const styles = stylex.create({ diff --git a/apps/docs/package.json b/apps/docs/package.json index 847f2e73..9e16807d 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -10,7 +10,7 @@ "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", "clear": "docusaurus clear", - "serve": "docusaurus serve", + "serve": "serve ./build -c ../serve.json", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", "lint": "eslint --cache \"**/*.js\" && stylelint \"**/*.css\"" diff --git a/apps/docs/serve.json b/apps/docs/serve.json new file mode 100644 index 00000000..eb2cce05 --- /dev/null +++ b/apps/docs/serve.json @@ -0,0 +1,21 @@ +{ + "headers": [ + { + "source": "**/**", + "headers": [ + { + "key": "Cross-Origin-Embedder-Policy", + "value": "require-corp" + }, + { + "key": "Cross-Origin-Opener-Policy", + "value": "same-origin" + }, + { + "key": "Cross-Origin-Resource-Policy", + "value": "same-site" + } + ] + } + ] +} diff --git a/package-lock.json b/package-lock.json index d085c08b..75944cf7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8975,6 +8975,12 @@ "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, + "node_modules/@zeit/schemas": { + "version": "2.29.0", + "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz", + "integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==", + "dev": true + }, "node_modules/accepts": { "version": "1.3.8", "license": "MIT", @@ -10294,6 +10300,91 @@ "node": ">=4" } }, + "node_modules/chalk-template": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz", + "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.2" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/chalk-template?sponsor=1" + } + }, + "node_modules/chalk-template/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/chalk-template/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/chalk-template/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/chalk-template/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/chalk-template/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/chalk-template/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -10453,6 +10544,23 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clipboardy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz", + "integrity": "sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==", + "dev": true, + "dependencies": { + "arch": "^2.2.0", + "execa": "^5.1.1", + "is-wsl": "^2.2.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/cliui": { "version": "8.0.1", "license": "ISC", @@ -15108,6 +15216,18 @@ "node": ">=0.10.0" } }, + "node_modules/is-port-reachable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-port-reachable/-/is-port-reachable-4.0.0.tgz", + "integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-reference": { "version": "1.2.1", "dev": true, @@ -15276,6 +15396,17 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dependencies": { + "is-docker": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-yarn-global": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz", @@ -20435,17 +20566,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/open/node_modules/is-wsl": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", - "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", - "dependencies": { - "is-docker": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/opener": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", @@ -23146,6 +23266,31 @@ "randombytes": "^2.1.0" } }, + "node_modules/serve": { + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.1.tgz", + "integrity": "sha512-48er5fzHh7GCShLnNyPBRPEjs2I6QBozeGr02gaacROiyS/8ARADlj595j39iZXAqBbJHH/ivJJyPRWY9sQWZA==", + "dev": true, + "dependencies": { + "@zeit/schemas": "2.29.0", + "ajv": "8.11.0", + "arg": "5.0.2", + "boxen": "7.0.0", + "chalk": "5.0.1", + "chalk-template": "0.4.0", + "clipboardy": "3.0.0", + "compression": "1.7.4", + "is-port-reachable": "4.0.0", + "serve-handler": "6.1.5", + "update-check": "1.5.4" + }, + "bin": { + "serve": "build/main.js" + }, + "engines": { + "node": ">= 14" + } + }, "node_modules/serve-handler": { "version": "6.1.5", "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz", @@ -23256,6 +23401,171 @@ "version": "1.1.0", "license": "ISC" }, + "node_modules/serve/node_modules/ajv": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", + "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/serve/node_modules/ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/serve/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/serve/node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true + }, + "node_modules/serve/node_modules/boxen": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz", + "integrity": "sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==", + "dev": true, + "dependencies": { + "ansi-align": "^3.0.1", + "camelcase": "^7.0.0", + "chalk": "^5.0.1", + "cli-boxes": "^3.0.0", + "string-width": "^5.1.2", + "type-fest": "^2.13.0", + "widest-line": "^4.0.1", + "wrap-ansi": "^8.0.1" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/serve/node_modules/camelcase": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz", + "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==", + "dev": true, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/serve/node_modules/chalk": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz", + "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==", + "dev": true, + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/serve/node_modules/emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true + }, + "node_modules/serve/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/serve/node_modules/string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, + "dependencies": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/serve/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/serve/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "dev": true, + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/serve/node_modules/wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/server-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz", @@ -24869,6 +25179,38 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/update-check": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz", + "integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==", + "dev": true, + "dependencies": { + "registry-auth-token": "3.3.2", + "registry-url": "3.1.0" + } + }, + "node_modules/update-check/node_modules/registry-auth-token": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz", + "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==", + "dev": true, + "dependencies": { + "rc": "^1.1.6", + "safe-buffer": "^5.0.1" + } + }, + "node_modules/update-check/node_modules/registry-url": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz", + "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==", + "dev": true, + "dependencies": { + "rc": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/update-notifier": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz", @@ -32328,6 +32670,12 @@ "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, + "@zeit/schemas": { + "version": "2.29.0", + "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz", + "integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==", + "dev": true + }, "accepts": { "version": "1.3.8", "requires": { @@ -33236,6 +33584,66 @@ "supports-color": "^5.3.0" } }, + "chalk-template": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz", + "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==", + "dev": true, + "requires": { + "chalk": "^4.1.2" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -33339,6 +33747,17 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "clipboardy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz", + "integrity": "sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==", + "dev": true, + "requires": { + "arch": "^2.2.0", + "execa": "^5.1.1", + "is-wsl": "^2.2.0" + } + }, "cliui": { "version": "8.0.1", "requires": { @@ -34148,6 +34567,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-syntax-highlighter": "^15.5.0", + "serve": "^14.2.1", "stylelint": "^14.9.1" }, "dependencies": { @@ -36953,6 +37373,12 @@ "isobject": "^3.0.1" } }, + "is-port-reachable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-port-reachable/-/is-port-reachable-4.0.0.tgz", + "integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==", + "dev": true + }, "is-reference": { "version": "1.2.1", "dev": true, @@ -37055,6 +37481,14 @@ "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz", "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==" }, + "is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "requires": { + "is-docker": "^2.0.0" + } + }, "is-yarn-global": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz", @@ -41160,16 +41594,6 @@ "define-lazy-prop": "^2.0.0", "is-docker": "^2.1.1", "is-wsl": "^2.2.0" - }, - "dependencies": { - "is-wsl": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", - "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", - "requires": { - "is-docker": "^2.0.0" - } - } } }, "opener": { @@ -43024,6 +43448,134 @@ "randombytes": "^2.1.0" } }, + "serve": { + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.1.tgz", + "integrity": "sha512-48er5fzHh7GCShLnNyPBRPEjs2I6QBozeGr02gaacROiyS/8ARADlj595j39iZXAqBbJHH/ivJJyPRWY9sQWZA==", + "dev": true, + "requires": { + "@zeit/schemas": "2.29.0", + "ajv": "8.11.0", + "arg": "5.0.2", + "boxen": "7.0.0", + "chalk": "5.0.1", + "chalk-template": "0.4.0", + "clipboardy": "3.0.0", + "compression": "1.7.4", + "is-port-reachable": "4.0.0", + "serve-handler": "6.1.5", + "update-check": "1.5.4" + }, + "dependencies": { + "ajv": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", + "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + } + }, + "ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true + }, + "ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true + }, + "arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true + }, + "boxen": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz", + "integrity": "sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==", + "dev": true, + "requires": { + "ansi-align": "^3.0.1", + "camelcase": "^7.0.0", + "chalk": "^5.0.1", + "cli-boxes": "^3.0.0", + "string-width": "^5.1.2", + "type-fest": "^2.13.0", + "widest-line": "^4.0.1", + "wrap-ansi": "^8.0.1" + } + }, + "camelcase": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz", + "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==", + "dev": true + }, + "chalk": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz", + "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==", + "dev": true + }, + "emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true + }, + "json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, + "requires": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + } + }, + "strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "requires": { + "ansi-regex": "^6.0.1" + } + }, + "type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "dev": true + }, + "wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, + "requires": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + } + } + } + }, "serve-handler": { "version": "6.1.5", "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz", @@ -44287,6 +44839,37 @@ "picocolors": "^1.0.1" } }, + "update-check": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz", + "integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==", + "dev": true, + "requires": { + "registry-auth-token": "3.3.2", + "registry-url": "3.1.0" + }, + "dependencies": { + "registry-auth-token": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz", + "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==", + "dev": true, + "requires": { + "rc": "^1.1.6", + "safe-buffer": "^5.0.1" + } + }, + "registry-url": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz", + "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==", + "dev": true, + "requires": { + "rc": "^1.0.1" + } + } + } + }, "update-notifier": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz", From 43106518bc03e9f3b261dbe18b1cfe3416bd93dc Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Tue, 5 Dec 2023 01:43:33 -0800 Subject: [PATCH 05/32] Add codemirror editor --- apps/docs/components/Playground.js | 19 +++++++++++++++++-- apps/docs/package.json | 2 ++ apps/docs/src/css/custom.css | 6 ++++++ package-lock.json | 28 ++++++++++++++++++++++++++++ 4 files changed, 53 insertions(+), 2 deletions(-) diff --git a/apps/docs/components/Playground.js b/apps/docs/components/Playground.js index eef75f5b..5ad0e6bc 100644 --- a/apps/docs/components/Playground.js +++ b/apps/docs/components/Playground.js @@ -12,6 +12,8 @@ import {useEffect, useState, useRef} from 'react'; import * as stylex from '@stylexjs/stylex'; import {WebContainer} from '@webcontainer/api'; import {files} from './playground-utils/files'; +import {UnControlled as CodeMirror} from 'react-codemirror2'; +import 'codemirror/mode/javascript/javascript'; async function wcSpawn(instance, ...args) { console.log('Running:', args.join(' ')); @@ -74,9 +76,18 @@ export default function Playground() { return (
- 
+      
+      {/* 
         {files['input.js'].file.contents}
-      

+
*/} 
{output}
); @@ -93,6 +104,10 @@ const styles = stylex.create({ borderBottomColor: 'var(--cyan)', }, textarea: { + display: 'flex', + flexDirection: 'column', + alignItems: 'stretch', + justifyContent: 'stretch', width: '50%', height: '100%', borderWidth: 0, diff --git a/apps/docs/package.json b/apps/docs/package.json index 9e16807d..877eabaa 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -22,7 +22,9 @@ "@stylexjs/stylex": "0.8.0", "@vercel/analytics": "^1.1.1", "clsx": "^1.2.1", + "codemirror": "^5.65.16", "react": "^17.0.2", + "react-codemirror2": "^7.3.0", "react-dom": "^17.0.2", "react-syntax-highlighter": "^15.5.0" }, diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css index 90a75d0a..3417551d 100644 --- a/apps/docs/src/css/custom.css +++ b/apps/docs/src/css/custom.css @@ -13,6 +13,9 @@ * work well for content-centric websites. */ +@import 'codemirror/lib/codemirror.css'; +@import 'codemirror/theme/material-darker.css'; + /* You can override the default Infima variables here. */ :root { --aa-text-color-rgb: 38, 38, 39; @@ -283,3 +286,6 @@ html[data-theme='dark'] .DocSearch-Logo svg path, html[data-theme='dark'] .DocSearch-Logo svg rect { fill: rgb(170, 175, 186); } +.CodeMirror { + height: 100%; +} diff --git a/package-lock.json b/package-lock.json index 75944cf7..44ad0610 100644 --- a/package-lock.json +++ b/package-lock.json @@ -108,7 +108,9 @@ "@stylexjs/stylex": "0.8.0", "@vercel/analytics": "^1.1.1", "clsx": "^1.2.1", + "codemirror": "^5.65.16", "react": "^17.0.2", + "react-codemirror2": "^7.3.0", "react-dom": "^17.0.2", "react-syntax-highlighter": "^15.5.0" }, @@ -10614,6 +10616,11 @@ "node": ">= 0.12.0" } }, + "node_modules/codemirror": { + "version": "5.65.16", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.16.tgz", + "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==" + }, "node_modules/collapse-white-space": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz", @@ -21883,6 +21890,15 @@ "pure-color": "^1.2.0" } }, + "node_modules/react-codemirror2": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.3.0.tgz", + "integrity": "sha512-gCgJPXDX+5iaPolkHAu1YbJ92a2yL7Je4TuyO3QEqOtI/d6mbEk08l0oIm18R4ctuT/Sl87X63xIMBnRQBXYXA==", + "peerDependencies": { + "codemirror": "5.x", + "react": ">=15.5 <=17.x" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -33793,6 +33809,11 @@ "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==", "dev": true }, + "codemirror": { + "version": "5.65.16", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.16.tgz", + "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==" + }, "collapse-white-space": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz", @@ -34565,6 +34586,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "mkdirp": "^1.0.4", "react": "^17.0.2", + "react-codemirror2": "^7.3.0", "react-dom": "^17.0.2", "react-syntax-highlighter": "^15.5.0", "serve": "^14.2.1", @@ -42437,6 +42459,12 @@ "pure-color": "^1.2.0" } }, + "react-codemirror2": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.3.0.tgz", + "integrity": "sha512-gCgJPXDX+5iaPolkHAu1YbJ92a2yL7Je4TuyO3QEqOtI/d6mbEk08l0oIm18R4ctuT/Sl87X63xIMBnRQBXYXA==", + "requires": {} + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", From 52f2a71750be99e1536e1a087204b2aaef5fe093 Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Tue, 5 Dec 2023 03:23:40 -0800 Subject: [PATCH 06/32] Use rollup and static server. --- apps/docs/components/Playground.js | 60 +++++++--- .../docs/components/playground-utils/files.js | 107 ++++++++++++++++-- 2 files changed, 138 insertions(+), 29 deletions(-) diff --git a/apps/docs/components/Playground.js b/apps/docs/components/Playground.js index 5ad0e6bc..03f6826e 100644 --- a/apps/docs/components/Playground.js +++ b/apps/docs/components/Playground.js @@ -10,10 +10,10 @@ import * as React from 'react'; import {useEffect, useState, useRef} from 'react'; import * as stylex from '@stylexjs/stylex'; +import BrowserOnly from '@docusaurus/BrowserOnly'; import {WebContainer} from '@webcontainer/api'; import {files} from './playground-utils/files'; import {UnControlled as CodeMirror} from 'react-codemirror2'; -import 'codemirror/mode/javascript/javascript'; async function wcSpawn(instance, ...args) { console.log('Running:', args.join(' ')); @@ -53,18 +53,35 @@ async function makeWebcontainer() { export default function Playground() { const instance = useRef(null); - const [output, setOutput] = useState(''); + const [url, setUrl] = useState(null); const build = async () => { const containerInstance = instance.current; if (!containerInstance) return; - await wcSpawn(containerInstance, 'npm', ['run', 'build']); - const output = await containerInstance.fs.readFile('output.js', 'utf-8'); - setOutput(output); + console.log('Trying to run `npm start`...'); + const process = await containerInstance.spawn('npm', ['start']); + console.log('Spawned `npm start`...'); + process.output.pipeTo( + new WritableStream({ + write(data) { + console.log(data); + }, + }), + ); + + console.log('Waiting for server-ready event...'); + containerInstance.on('server-ready', (port, url) => { + console.log('server-ready', port, url); + setUrl(url); + }); + + // const output = await containerInstance.fs.readFile('output.js', 'utf-8'); + // setOutput(output); }; useEffect(() => { + require('codemirror/mode/javascript/javascript'); makeWebcontainer().then((i) => { instance.current = i; build(); @@ -76,19 +93,26 @@ export default function Playground() { return (
- - {/* 
-        {files['input.js'].file.contents}
-
*/} - 
{output}
+ + {() => ( + <> + + {url ? ( +