diff --git a/.gitignore b/.gitignore index afa8d44..d7fc642 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ *DS_Store *.log +.vscode/ node_modules/ public/ .greenwood/ diff --git a/greenwood-plugins/monaco-editor-esm-shim-plugin.ts b/greenwood-plugins/monaco-editor-esm-shim-plugin.ts new file mode 100644 index 0000000..318a721 --- /dev/null +++ b/greenwood-plugins/monaco-editor-esm-shim-plugin.ts @@ -0,0 +1,63 @@ +import { generate } from "astring"; +// @ts-expect-error +import { ACORN_OPTIONS } from "@greenwood/cli/src/lib/parsing-utils.js"; +import * as acorn from "acorn"; +import * as walk from "acorn-walk"; +import type { ResourcePlugin } from "@greenwood/cli"; + +// https://github.com/microsoft/monaco-editor/issues/886 +// have to strip out CSS `import` statements from the ESM build of Monaco Editor, +// otherwise the browser will attempt to load them as ESM and fail +class StripCssImportsResource { + extensions: string[]; + contentType: string; + + constructor() { + this.extensions = ["js"]; + this.contentType = "application/javascript"; + } + + async shouldIntercept(url: URL) { + return url.pathname.includes("node_modules/monaco-editor") && url.pathname.endsWith(".js"); + } + + async intercept(url: URL, request: Request, response: Response) { + // console.log("Intercepting Monaco Editor ESM resource:", url.pathname); + const contents = await response.text(); + // TODO: acorn my be too heavy for this. could maybe just do a naive string replace + const tree = acorn.parse(contents, ACORN_OPTIONS); + + walk.simple(tree, { + ImportDeclaration(node) { + // @ts-expect-error for us value will (probably) always be a string + if (node?.source?.value?.endsWith(".css")) { + // console.log("Stripping CSS import:", node.source.value); + + tree.body.forEach((element) => { + if ( + element.type === "ImportDeclaration" && + element.source.value === node.source.value + ) { + // Remove the element from the body + tree.body = tree.body.filter((child) => child !== element); + } + }); + } + }, + }); + + return new Response(generate(tree), { + headers: { + "Content-Type": this.contentType, + }, + }); + } +} + +export function monacoEditorEsmShimPlugin(): ResourcePlugin { + return { + type: "resource", + name: "monaco-editor-esm-shim-plugin:resource", + provider: () => new StripCssImportsResource(), + }; +} diff --git a/repl-bundler-plugin.ts b/greenwood-plugins/repl-bundler-plugin.ts similarity index 92% rename from repl-bundler-plugin.ts rename to greenwood-plugins/repl-bundler-plugin.ts index b3c7034..40ac0cf 100644 --- a/repl-bundler-plugin.ts +++ b/greenwood-plugins/repl-bundler-plugin.ts @@ -57,6 +57,9 @@ class ReplBundlerResource { format: "esm", }); + // Create a buffer from the code string to avoid body consumption issues + // const codeBuffer = Buffer.from(output[0].code, 'utf-8'); + return new Response(output[0].code, { headers: { "Content-Type": "text/javascript", diff --git a/greenwood.config.ts b/greenwood.config.ts index 36b2c06..33d4407 100644 --- a/greenwood.config.ts +++ b/greenwood.config.ts @@ -1,7 +1,8 @@ import { greenwoodPluginImportRaw } from "@greenwood/plugin-import-raw"; import { greenwoodPluginCssModules } from "@greenwood/plugin-css-modules"; import { greenwoodPluginImportJsx } from "@greenwood/plugin-import-jsx"; -import { replBundlerResourcePlugin } from "./repl-bundler-plugin.ts"; +import { replBundlerResourcePlugin } from "./greenwood-plugins/repl-bundler-plugin.ts"; +import { monacoEditorEsmShimPlugin } from "./greenwood-plugins/monaco-editor-esm-shim-plugin.ts"; import type { Config } from "@greenwood/cli"; const config: Config = { @@ -11,6 +12,7 @@ const config: Config = { greenwoodPluginImportRaw(), greenwoodPluginImportJsx(), replBundlerResourcePlugin(), + monacoEditorEsmShimPlugin(), ], }; diff --git a/package-lock.json b/package-lock.json index b573381..ed06eb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "dependencies": { "geist": "^1.2.0", + "monaco-editor": "^0.55.1", "open-props": "^1.7.23" }, "devDependencies": { @@ -18,12 +19,15 @@ "@greenwood/plugin-import-jsx": "^0.34.0-alpha.4", "@greenwood/plugin-import-raw": "^0.34.0-alpha.4", "@typescript/native-preview": "^7.0.0-dev.20260209.1", + "acorn": "^8.16.0", + "acorn-walk": "^8.3.5", + "astring": "^1.9.0", "husky": "^9.1.7", "lint-staged": "^16.2.7", "oxfmt": "^0.28.0", "oxlint": "^1.43.0", "patch-package": "^8.0.1", - "typescript": "^5.9.2" + "typescript": "^6.0.2" } }, "node_modules/@greenwood/cli": { @@ -1066,6 +1070,13 @@ "@types/node": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT", + "optional": true + }, "node_modules/@typescript/native-preview": { "version": "7.0.0-dev.20260209.1", "resolved": "https://registry.npmjs.org/@typescript/native-preview/-/native-preview-7.0.0-dev.20260209.1.tgz", @@ -1228,9 +1239,9 @@ } }, "node_modules/acorn": { - "version": "8.15.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", - "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", + "version": "8.16.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", + "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, "license": "MIT", "bin": { @@ -1241,9 +1252,9 @@ } }, "node_modules/acorn-walk": { - "version": "8.3.4", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", - "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", + "version": "8.3.5", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz", + "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==", "dev": true, "license": "MIT", "dependencies": { @@ -1879,6 +1890,15 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz", + "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==", + "license": "(MPL-2.0 OR Apache-2.0)", + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/domutils": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", @@ -2809,6 +2829,18 @@ "@jridgewell/sourcemap-codec": "^1.5.5" } }, + "node_modules/marked": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", + "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", + "license": "MIT", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -2913,6 +2945,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/monaco-editor": { + "version": "0.55.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz", + "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==", + "license": "MIT", + "dependencies": { + "dompurify": "3.2.7", + "marked": "14.0.0" + } + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", @@ -3944,9 +3986,9 @@ } }, "node_modules/typescript": { - "version": "5.9.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", - "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz", + "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==", "dev": true, "license": "Apache-2.0", "bin": { @@ -4002,9 +4044,9 @@ } }, "node_modules/wc-compiler": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/wc-compiler/-/wc-compiler-0.19.0.tgz", - "integrity": "sha512-wWKz1pKq1Yy8jK183mX+PrjyFy/GtOFROxoDTeMNSW87WxZSEHd8iOfQ6HbCg5QCSzE1yuL5e+2o/n4Q9N+MnA==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/wc-compiler/-/wc-compiler-0.20.0.tgz", + "integrity": "sha512-+zFMIkaPjSRFrcLXrFmHEnOJQN1QMhUPDm5Di1wyyuvY1Il/EIWauEdbQ5ZWmHlEK9X+w0ABnzsl41jR1SLmfw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index eb2f34d..e5550a8 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,13 @@ "lint": "oxlint", "format": "oxfmt", "format:check": "oxfmt --check", - "check": "tsgo", + "check": "tsgo --ignoreConfig --noEmit", "prepare": "husky", "postinstall": "patch-package" }, "dependencies": { "geist": "^1.2.0", + "monaco-editor": "^0.55.1", "open-props": "^1.7.23" }, "devDependencies": { @@ -35,11 +36,17 @@ "@greenwood/plugin-import-jsx": "^0.34.0-alpha.4", "@greenwood/plugin-import-raw": "^0.34.0-alpha.4", "@typescript/native-preview": "^7.0.0-dev.20260209.1", + "acorn": "^8.16.0", + "acorn-walk": "^8.3.5", + "astring": "^1.9.0", "husky": "^9.1.7", "lint-staged": "^16.2.7", "oxfmt": "^0.28.0", "oxlint": "^1.43.0", "patch-package": "^8.0.1", - "typescript": "^5.9.2" + "typescript": "^6.0.2" + }, + "overrides": { + "wc-compiler": "~0.20.0" } } diff --git a/patches/@greenwood+cli+0.34.0-alpha.2.patch b/patches/@greenwood+cli+0.34.0-alpha.2.patch deleted file mode 100644 index 545f84f..0000000 --- a/patches/@greenwood+cli+0.34.0-alpha.2.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-javascript.js b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-javascript.js -index 0f54727..dbf1ea8 100644 ---- a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-javascript.js -+++ b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-javascript.js -@@ -78,7 +78,7 @@ const greenwoodPluginStandardJavascript = [ - type: "rollup", - name: "plugin-standard-javascript:rollup", - provider: (compilation) => { -- return compilation.config.optimization !== "none" ? [terser()] : []; -+ return compilation.config.optimization !== "none" ? [] : []; - }, - }, - ]; diff --git a/patches/@greenwood+cli+0.34.0-alpha.4.patch b/patches/@greenwood+cli+0.34.0-alpha.4.patch new file mode 100644 index 0000000..d93ce1a --- /dev/null +++ b/patches/@greenwood+cli+0.34.0-alpha.4.patch @@ -0,0 +1,69 @@ +diff --git a/node_modules/@greenwood/cli/src/lifecycles/serve.js b/node_modules/@greenwood/cli/src/lifecycles/serve.js +index beff516..d4c24ce 100644 +--- a/node_modules/@greenwood/cli/src/lifecycles/serve.js ++++ b/node_modules/@greenwood/cli/src/lifecycles/serve.js +@@ -70,9 +70,9 @@ async function getDevServer(compilation) { + (await plugin.shouldServe(url, request)) + ) { + const current = await plugin.serve(url, request); +- const merged = mergeResponse(response.clone(), current.clone()); ++ const merged = mergeResponse(response, current); + +- response = merged.clone(); ++ response = merged; + } + } + +@@ -106,16 +106,18 @@ async function getDevServer(compilation) { + // when looping through and sharing responses between plugins + const response = await resourcePlugins.reduce(async (responsePromise, plugin) => { + const intermediateResponse = await responsePromise; ++ // Create a single snapshot to avoid multiple clone() calls failing on exhausted bodies ++ const responseSnapshot = intermediateResponse.clone(); + if ( + plugin.shouldPreIntercept && +- (await plugin.shouldPreIntercept(url, request, intermediateResponse.clone())) ++ (await plugin.shouldPreIntercept(url, request, responseSnapshot.clone())) + ) { + const current = await plugin.preIntercept( + url, + request, +- await intermediateResponse.clone(), ++ await responseSnapshot.clone(), + ); +- const merged = mergeResponse(intermediateResponse.clone(), current); ++ const merged = mergeResponse(responseSnapshot, current); + + return Promise.resolve(merged); + } else { +@@ -152,12 +154,14 @@ async function getDevServer(compilation) { + // when looping through and sharing responses between plugins + const response = await resourcePlugins.reduce(async (responsePromise, plugin) => { + const intermediateResponse = await responsePromise; ++ // Create a single snapshot to avoid multiple clone() calls failing on exhausted bodies ++ const responseSnapshot = intermediateResponse.clone(); + if ( + plugin.shouldIntercept && +- (await plugin.shouldIntercept(url, request, intermediateResponse.clone())) ++ (await plugin.shouldIntercept(url, request, responseSnapshot.clone())) + ) { +- const current = await plugin.intercept(url, request, await intermediateResponse.clone()); +- const merged = mergeResponse(intermediateResponse.clone(), current); ++ const current = await plugin.intercept(url, request, await responseSnapshot.clone()); ++ const merged = mergeResponse(responseSnapshot, current); + + return Promise.resolve(merged); + } else { +diff --git a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-javascript.js b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-javascript.js +index 0f54727..dbf1ea8 100644 +--- a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-javascript.js ++++ b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-javascript.js +@@ -78,7 +78,7 @@ const greenwoodPluginStandardJavascript = [ + type: "rollup", + name: "plugin-standard-javascript:rollup", + provider: (compilation) => { +- return compilation.config.optimization !== "none" ? [terser()] : []; ++ return compilation.config.optimization !== "none" ? [] : []; + }, + }, + ]; diff --git a/patches/@greenwood+plugin-import-jsx+0.34.0-alpha.4.patch b/patches/@greenwood+plugin-import-jsx+0.34.0-alpha.4.patch new file mode 100644 index 0000000..674820e --- /dev/null +++ b/patches/@greenwood+plugin-import-jsx+0.34.0-alpha.4.patch @@ -0,0 +1,13 @@ +diff --git a/node_modules/@greenwood/plugin-import-jsx/src/index.js b/node_modules/@greenwood/plugin-import-jsx/src/index.js +index 5fe6e11..15fdad2 100644 +--- a/node_modules/@greenwood/plugin-import-jsx/src/index.js ++++ b/node_modules/@greenwood/plugin-import-jsx/src/index.js +@@ -4,7 +4,7 @@ + * + */ + import { generate } from "astring"; +-import { parseJsx } from "wc-compiler/src/jsx-loader.js"; ++import { parseJsx } from "wc-compiler/jsx-loader"; + + class ImportJsxResource { + constructor(compilation, options) { diff --git a/patches/wc-compiler+0.18.1.patch b/patches/wc-compiler+0.18.1.patch deleted file mode 100644 index e7742ab..0000000 --- a/patches/wc-compiler+0.18.1.patch +++ /dev/null @@ -1,14 +0,0 @@ -diff --git a/node_modules/wc-compiler/package.json b/node_modules/wc-compiler/package.json -index f49fcdc..bbf9fbf 100644 ---- a/node_modules/wc-compiler/package.json -+++ b/node_modules/wc-compiler/package.json -@@ -16,7 +16,8 @@ - }, - "./register": "./src/register.js", - "./src/jsx-loader.js": "./src/jsx-loader.js", -- "./jsx-runtime": "./src/jsx-runtime.ts" -+ "./jsx-runtime": "./src/jsx-runtime.ts", -+ "./dom-shim.js": "./src/dom-shim.js" - }, - "author": "Owen Buckley ", - "keywords": [ diff --git a/patches/wc-compiler+0.19.0.patch b/patches/wc-compiler+0.19.0.patch deleted file mode 100644 index 14b3d7a..0000000 --- a/patches/wc-compiler+0.19.0.patch +++ /dev/null @@ -1,25 +0,0 @@ -diff --git a/node_modules/wc-compiler/src/jsx.d.ts b/node_modules/wc-compiler/src/jsx.d.ts -index 2dc9baa..a2cb857 100644 ---- a/node_modules/wc-compiler/src/jsx.d.ts -+++ b/node_modules/wc-compiler/src/jsx.d.ts -@@ -3,12 +3,17 @@ type IsCSSStyleDeclaration = T extends CSSStyleDeclaration ? string : T; - - // create a utility type to extract the attributes from any given element's DOM interface. - type ElementAttributes = { -- // Extract all properties from the element, including inherited ones. -+ // Extract all properties from the element, including inherited ones - [A in keyof E]?: E[A] extends (...args: any) => any ? any : IsCSSStyleDeclaration; - } & { - class?: string; --}; -- -+ // have to manage this manually, can't seem to get this from TypeScript itself (not sure if just skill issue? :D) -+ // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1790 -+ // it should be there per https://github.com/mdn/browser-compat-data/pull/21875 -+ // https://github.com/ProjectEvergreen/wcc/issues/236 -+ popovertarget?: string; -+ popovertargetaction?: 'show' | 'hide' | 'toggle'; -+} - // map each HTML tag to a union of its attributes and the global attributes. - type IntrinsicElementsFromDom = { - [E in keyof HTMLElementTagNameMap]: ElementAttributes; diff --git a/patches/wc-compiler+0.20.0.patch b/patches/wc-compiler+0.20.0.patch new file mode 100644 index 0000000..0c7f7e1 --- /dev/null +++ b/patches/wc-compiler+0.20.0.patch @@ -0,0 +1,30 @@ +diff --git a/node_modules/wc-compiler/src/jsx.d.ts b/node_modules/wc-compiler/src/jsx.d.ts +index 4c9286b..48c77cb 100644 +--- a/node_modules/wc-compiler/src/jsx.d.ts ++++ b/node_modules/wc-compiler/src/jsx.d.ts +@@ -9,13 +9,15 @@ type ElementAttributes = { + class?: string; + }; + ++type PopoverState = 'auto' | 'manual' | 'hint'; + type PopoverTargetAction = 'show' | 'hide' | 'toggle'; +-type PopoverTargetAttributes = { ++type PopoverAttributes = { + // have to manage this manually, can't seem to get this from TypeScript itself (not sure if just skill issue? :D) + // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1790 + // it should be there per https://github.com/mdn/browser-compat-data/pull/21875 + // https://github.com/ProjectEvergreen/wcc/issues/236 + // per the spec, this should only apply to