From 2da070ad4c9c3151067eac3fb017466f54c11cf8 Mon Sep 17 00:00:00 2001 From: Andy Fillebrown Date: Fri, 21 Nov 2025 13:33:20 -0500 Subject: [PATCH] Update playground's monaco-editor package to fix sourcemap errors With the new playground the monaco-editor package has errors due to missing sourcemaps. This change takes the upstream fix for this and updates our code to fix the deprecation issues introduced by the update. Note that the webpack `monacoEditorPath` option has to be set now to avoid new webpack errors occurring when building/running the playground. --- package-lock.json | 41 +++++++++++----- packages/tools/playground/package.json | 2 +- .../monaco/analysis/codeAnalysisService.ts | 3 +- .../playground/src/tools/monaco/run/runner.ts | 3 +- .../src/tools/monaco/ts/tsPipeline.ts | 47 ++++++++++--------- .../tools/monaco/typings/typingsService.ts | 22 ++++----- packages/tools/playground/webpack.config.js | 1 + 7 files changed, 70 insertions(+), 49 deletions(-) diff --git a/package-lock.json b/package-lock.json index fee5b6297a6..e6eeb27de76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14403,6 +14403,16 @@ "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==", + "dev": true, + "license": "(MPL-2.0 OR Apache-2.0)", + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/domutils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", @@ -21780,6 +21790,19 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "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==", + "dev": true, + "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", @@ -22527,12 +22550,14 @@ } }, "node_modules/monaco-editor": { - "version": "0.53.0", - "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.53.0.tgz", - "integrity": "sha512-0WNThgC6CMWNXXBxTbaYYcunj08iB5rnx4/G56UOPeL9UVIUGGHA1GR0EWIh9Ebabj7NpCRawQ5b0hfN1jQmYQ==", + "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==", "dev": true, + "license": "MIT", "dependencies": { - "@types/trusted-types": "^1.0.6" + "dompurify": "3.2.7", + "marked": "14.0.0" } }, "node_modules/monaco-editor-webpack-plugin": { @@ -22548,12 +22573,6 @@ "webpack": "^4.5.0 || 5.x" } }, - "node_modules/monaco-editor/node_modules/@types/trusted-types": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz", - "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==", - "dev": true - }, "node_modules/mrmime": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz", @@ -32236,7 +32255,7 @@ "file-loader": "^6.2.0", "html-webpack-plugin": "^5.4.0", "mini-css-extract-plugin": "^2.4.3", - "monaco-editor": "^0.53.0", + "monaco-editor": "^0.55.1", "monaco-editor-webpack-plugin": "^7.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/tools/playground/package.json b/packages/tools/playground/package.json index e4d8fd134c0..113e3bef963 100644 --- a/packages/tools/playground/package.json +++ b/packages/tools/playground/package.json @@ -27,7 +27,7 @@ "file-loader": "^6.2.0", "html-webpack-plugin": "^5.4.0", "mini-css-extract-plugin": "^2.4.3", - "monaco-editor": "^0.53.0", + "monaco-editor": "^0.55.1", "monaco-editor-webpack-plugin": "^7.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/tools/playground/src/tools/monaco/analysis/codeAnalysisService.ts b/packages/tools/playground/src/tools/monaco/analysis/codeAnalysisService.ts index 1bd39fbcc3d..f6974a4591d 100644 --- a/packages/tools/playground/src/tools/monaco/analysis/codeAnalysisService.ts +++ b/packages/tools/playground/src/tools/monaco/analysis/codeAnalysisService.ts @@ -1,4 +1,5 @@ /* eslint-disable jsdoc/require-jsdoc */ +import { typescript } from "monaco-editor"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; import type { GlobalState } from "../../../globalState"; @@ -23,7 +24,7 @@ export class CodeAnalysisService { } const uri = model.uri; - const worker = globalState.language === "JS" ? await monaco.languages.typescript.getJavaScriptWorker() : await monaco.languages.typescript.getTypeScriptWorker(); + const worker = globalState.language === "JS" ? await typescript.getJavaScriptWorker() : await typescript.getTypeScriptWorker(); const languageService = await worker(uri); const source = "[preview]"; diff --git a/packages/tools/playground/src/tools/monaco/run/runner.ts b/packages/tools/playground/src/tools/monaco/run/runner.ts index adb6e47dac1..fe6ea24e77b 100644 --- a/packages/tools/playground/src/tools/monaco/run/runner.ts +++ b/packages/tools/playground/src/tools/monaco/run/runner.ts @@ -3,6 +3,7 @@ import { Logger } from "@dev/core"; import type { ThinEngine, Scene } from "@dev/core"; +import { typescript } from "monaco-editor"; import type * as monacoNs from "monaco-editor/esm/vs/editor/editor.api"; import * as lexer from "es-module-lexer"; import type { TsPipeline } from "../ts/tsPipeline"; @@ -156,7 +157,7 @@ export async function CreateV2Runner(manifest: V2Manifest, opts: V2RunnerOptions const modelsToCheck = monaco.editor.getModels().filter((m) => /[.]tsx?$/.test(m.uri.path)); // Wait for ATA completion before running diagnostics to avoid race conditions - const worker = await monaco.languages.typescript.getTypeScriptWorker(); + const worker = await typescript.getTypeScriptWorker(); // Process models sequentially to avoid worker contention for (let i = 0; i < modelsToCheck.length; i++) { diff --git a/packages/tools/playground/src/tools/monaco/ts/tsPipeline.ts b/packages/tools/playground/src/tools/monaco/ts/tsPipeline.ts index 28937346e98..dfc2780f801 100644 --- a/packages/tools/playground/src/tools/monaco/ts/tsPipeline.ts +++ b/packages/tools/playground/src/tools/monaco/ts/tsPipeline.ts @@ -1,19 +1,20 @@ // ts/tsPipeline.ts +import { typescript } from "monaco-editor"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; /** * */ -const TsOptions: monaco.languages.typescript.CompilerOptions = { +const TsOptions: typescript.CompilerOptions = { allowJs: true, allowSyntheticDefaultImports: true, esModuleInterop: true, - module: monaco.languages.typescript.ModuleKind.ESNext, - moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, + module: typescript.ModuleKind.ESNext, + moduleResolution: typescript.ModuleResolutionKind.NodeJs, resolvePackageJsonExports: true, resolvePackageJsonImports: true, - target: monaco.languages.typescript.ScriptTarget.ESNext, + target: typescript.ScriptTarget.ESNext, noEmit: false, allowNonTsExtensions: true, skipLibCheck: true, @@ -27,18 +28,18 @@ const TsOptions: monaco.languages.typescript.CompilerOptions = { inlineSourceMap: true, inlineSources: true, sourceRoot: "file:///pg/", - jsx: monaco.languages.typescript.JsxEmit.ReactJSX, + jsx: typescript.JsxEmit.ReactJSX, jsxFactory: "JSXAlone.createElement", lib: ["es2020", "dom", "dom.iterable"], }; -const JsOptions: monaco.languages.typescript.CompilerOptions = { +const JsOptions: typescript.CompilerOptions = { ...TsOptions, checkJs: false, noImplicitAny: false, allowJs: true, jsxFactory: "JSXAlone.createElement", - jsx: monaco.languages.typescript.JsxEmit.ReactJSX, + jsx: typescript.JsxEmit.ReactJSX, }; /** * @@ -54,18 +55,18 @@ export class TsPipeline { const options = { ...TsOptions, paths: this._paths }; const jsOptions = { ...JsOptions, paths: this._paths }; - monaco.languages.typescript.typescriptDefaults.setCompilerOptions(options); - monaco.languages.typescript.javascriptDefaults.setCompilerOptions(jsOptions); + typescript.typescriptDefaults.setCompilerOptions(options); + typescript.javascriptDefaults.setCompilerOptions(jsOptions); - monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true); - monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true); + typescript.typescriptDefaults.setEagerModelSync(true); + typescript.javascriptDefaults.setEagerModelSync(true); this._setupDone = true; } if (libContent) { - const tsDisposable = monaco.languages.typescript.typescriptDefaults.addExtraLib(libContent, "file:///external/babylon.globals.d.ts"); - const jsDisposable = monaco.languages.typescript.javascriptDefaults.addExtraLib(libContent, "file:///external/babylon.globals.d.ts"); + const tsDisposable = typescript.typescriptDefaults.addExtraLib(libContent, "file:///external/babylon.globals.d.ts"); + const jsDisposable = typescript.javascriptDefaults.addExtraLib(libContent, "file:///external/babylon.globals.d.ts"); this._extraLibDisposables.push(tsDisposable, jsDisposable); } @@ -73,8 +74,8 @@ export class TsPipeline { declare module "*.wgsl" { const content: string; export default content; } declare module "*.glsl" { const content: string; export default content; } declare module "*.fx" { const content: string; export default content; }`; - const shaderTsDisposable = monaco.languages.typescript.typescriptDefaults.addExtraLib(shaderDts, "file:///external/shaders.d.ts"); - const shaderJsDisposable = monaco.languages.typescript.javascriptDefaults.addExtraLib(shaderDts, "file:///external/shaders.d.ts"); + const shaderTsDisposable = typescript.typescriptDefaults.addExtraLib(shaderDts, "file:///external/shaders.d.ts"); + const shaderJsDisposable = typescript.javascriptDefaults.addExtraLib(shaderDts, "file:///external/shaders.d.ts"); this._extraLibDisposables.push(shaderTsDisposable, shaderJsDisposable); // Global shim for legacy PG with less strict checking @@ -86,15 +87,15 @@ declare module "*.fx" { const content: string; export default content; }`; } this._paths[raw] = [canonical]; - monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ + typescript.typescriptDefaults.setCompilerOptions({ ...TsOptions, paths: { ...this._paths }, }); - monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ + typescript.javascriptDefaults.setCompilerOptions({ ...JsOptions, paths: { ...this._paths }, }); - monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ + typescript.typescriptDefaults.setDiagnosticsOptions({ noSemanticValidation: false, noSyntaxValidation: false, noSuggestionDiagnostics: false, @@ -112,7 +113,7 @@ declare module "*.fx" { const content: string; export default content; }`; const dts = `declare module "${raw}" {` + ` export * from "${canonical}";` + ` export { default } from "${canonical}";` + `}\n`; - monaco.languages.typescript.typescriptDefaults.addExtraLib(dts, uri); + typescript.typescriptDefaults.addExtraLib(dts, uri); this._extraLibUris.add(uri); } @@ -135,7 +136,7 @@ declare module "*.fx" { const content: string; export default content; }`; }> { const clean = path.replace(/^\//, ""); const uri = monaco.Uri.parse(`file:///pg/${clean}`); - const wf = await monaco.languages.typescript.getTypeScriptWorker(); + const wf = await typescript.getTypeScriptWorker(); const svc = await wf(uri); const out = await svc.getEmitOutput(uri.toString()); if (out.emitSkipped) { @@ -156,7 +157,7 @@ declare module "*.fx" { const content: string; export default content; }`; */ forceSyncModels() { // Ensure TypeScript service is aware of all models - const ts = monaco.languages.typescript; + const ts = typescript; // Force worker restart to pick up all models ts.typescriptDefaults.setDiagnosticsOptions({ @@ -205,8 +206,8 @@ export {}; const uri = "file:///pg/__playground_any_shim.d.ts"; if (!this._extraLibUris.has(uri)) { - const disp = monaco.languages.typescript.typescriptDefaults.addExtraLib(stub, uri); - const dispJs = monaco.languages.typescript.javascriptDefaults.addExtraLib(stub, uri); + const disp = typescript.typescriptDefaults.addExtraLib(stub, uri); + const dispJs = typescript.javascriptDefaults.addExtraLib(stub, uri); this._extraLibDisposables.push(disp); this._extraLibDisposables.push(dispJs); this._extraLibUris.add(uri); diff --git a/packages/tools/playground/src/tools/monaco/typings/typingsService.ts b/packages/tools/playground/src/tools/monaco/typings/typingsService.ts index 40e1197a9d7..dd9498b9851 100644 --- a/packages/tools/playground/src/tools/monaco/typings/typingsService.ts +++ b/packages/tools/playground/src/tools/monaco/typings/typingsService.ts @@ -1,6 +1,7 @@ /* eslint-disable no-await-in-loop */ /* eslint-disable jsdoc/require-jsdoc */ -import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; +import { typescript } from "monaco-editor"; +import type * as monaco from "monaco-editor/esm/vs/editor/editor.api"; import { setupTypeAcquisition } from "@typescript/ata"; import { CreateTsShim } from "./tsService"; @@ -64,7 +65,7 @@ export class TypingsService { }; const ts = CreateTsShim({ - libNames: monaco.languages.typescript.typescriptDefaults.getCompilerOptions().lib ?? undefined, + libNames: typescript.typescriptDefaults.getCompilerOptions().lib ?? undefined, }); const fetcherAsync: (input: RequestInfo, init?: RequestInit) => Promise = async (input, init) => { @@ -191,8 +192,8 @@ export class TypingsService { } const vuri = toVfsUriFromAtaPath(path); - const d1 = monaco.languages.typescript.typescriptDefaults.addExtraLib(code, vuri); - const d2 = monaco.languages.typescript.javascriptDefaults.addExtraLib(code, vuri); + const d1 = typescript.typescriptDefaults.addExtraLib(code, vuri); + const d2 = typescript.javascriptDefaults.addExtraLib(code, vuri); this._typeLibDisposables.push(d1, d2); if (!isEntryDts(path)) { @@ -510,10 +511,7 @@ export class TypingsService { for (const f of files) { const normPath = f.path.replace(/\\/g, "/"); const vuri = `file:///local/${dirName}/${normPath}`; - perSpecDisposables.push( - monaco.languages.typescript.typescriptDefaults.addExtraLib(f.content, vuri), - monaco.languages.typescript.javascriptDefaults.addExtraLib(f.content, vuri) - ); + perSpecDisposables.push(typescript.typescriptDefaults.addExtraLib(f.content, vuri), typescript.javascriptDefaults.addExtraLib(f.content, vuri)); } this._localLibsBySpec.set(fullSpec, perSpecDisposables); this._localDirBySpec.set(fullSpec, dirName); @@ -589,16 +587,16 @@ export class TypingsService { text += `}\n`; const fname = `pg-bare/${spec.replace(/[^\w@/.-]/g, "_")}.d.ts`; - const tsDisp = monaco.languages.typescript.typescriptDefaults.addExtraLib(text, fname); - const jsDisp = monaco.languages.typescript.javascriptDefaults.addExtraLib(text, fname); + const tsDisp = typescript.typescriptDefaults.addExtraLib(text, fname); + const jsDisp = typescript.javascriptDefaults.addExtraLib(text, fname); this._bareStubBySpec.set(spec, { ts: tsDisp, js: jsDisp }); if (!spec.endsWith("/*")) { const w = `${spec}/*`; const wText = `declare module "${w}" { const __any: any; export default __any; }\n`; const wFname = `pg-bare/${w.replace(/[^\w@/.-]/g, "_")}.d.ts`; - const wTs = monaco.languages.typescript.typescriptDefaults.addExtraLib(wText, wFname); - const wJs = monaco.languages.typescript.javascriptDefaults.addExtraLib(wText, wFname); + const wTs = typescript.typescriptDefaults.addExtraLib(wText, wFname); + const wJs = typescript.javascriptDefaults.addExtraLib(wText, wFname); this._bareStubBySpec.set(w, { ts: wTs, js: wJs }); } } diff --git a/packages/tools/playground/webpack.config.js b/packages/tools/playground/webpack.config.js index f1fc04ec1e8..139ce406231 100644 --- a/packages/tools/playground/webpack.config.js +++ b/packages/tools/playground/webpack.config.js @@ -26,6 +26,7 @@ module.exports = (env) => { new MonacoWebpackPlugin({ languages: ["typescript", "javascript"], filename: "[name].[contenthash].worker.js", + monacoEditorPath: path.resolve("../../../node_modules/monaco-editor"), }), ] ),