Update playground's monaco-editor package to fix sourcemap errors

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",

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]";

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++) {

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,27 +55,27 @@ 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);
         }
 
         const shaderDts = `
 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);

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<Response> = 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 });
         }
     }

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