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"), }), ] ),