Load Monaco from CDN (#1939)

 > [!NOTE] > Load Monaco via @monaco-editor/react loader, drop custom workers, and initialize themes/TypeScript after loader init. > > - **Editor/Monaco**: > - Switch to `@monaco-editor/react` `loader.init()` with type-only `editor` import. > - Remove worker imports and `MonacoEnvironment.getWorker` configuration. > - Move theme registration (`dyad-light`, `dyad-dark`) and TypeScript compiler/diagnostics setup into the loader init callback. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit c4b7c025725273068463feac3fbdb7b61125fc10. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>   --- ## Summary by cubic Load Monaco from a CDN via @monaco-editor/react and initialize themes/TypeScript settings after loader init. This reduces bundle size and removes custom worker setup. - **Refactors** - Removed web worker imports and MonacoEnvironment configuration. - Switched from direct monaco import to type-only import; initialization now uses loader.init(). - Moved theme registration (dyad-light/dark) and TS compiler/diagnostics setup into the loader init callback. <sup>Written for commit c4b7c025725273068463feac3fbdb7b61125fc10. Summary will update automatically on new commits.</sup>

Load Monaco from CDN (#1939)
70d4f598 · Will Chen · GitHub · 1ce39958 · 70d4f598
--- a/src/components/chat/monaco.ts
+++ b/src/components/chat/monaco.ts
-import { editor } from "monaco-editor";
-
+import type { editor } from "monaco-editor";
 import { loader } from "@monaco-editor/react";

-import * as monaco from "monaco-editor";
-// @ts-ignore
-import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
-// @ts-ignore
-import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
-// @ts-ignore
-import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
-// @ts-ignore
-import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
-// @ts-ignore
-import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
-
-self.MonacoEnvironment = {
-  getWorker(_, label) {
-    if (label === "json") {
-      return new jsonWorker();
-    }
-    if (label === "css" || label === "scss" || label === "less") {
-      return new cssWorker();
-    }
-    if (label === "html" || label === "handlebars" || label === "razor") {
-      return new htmlWorker();
-    }
-    if (label === "typescript" || label === "javascript") {
-      return new tsWorker();
-    }
-    return new editorWorker();
-  },
-};
-
-loader.config({ monaco });
-
-// loader.init().then(/* ... */);
 export const customLight: editor.IStandaloneThemeData = {
  base: "vs",
  inherit: false,
@@ -106,8 +72,6 @@ export const customLight: editor.IStandaloneThemeData = {
  },
 };

-editor.defineTheme("dyad-light", customLight);
-
 export const customDark: editor.IStandaloneThemeData = {
  base: "vs-dark",
  inherit: false,
@@ -178,12 +142,15 @@ export const customDark: editor.IStandaloneThemeData = {
  },
 };

-editor.defineTheme("dyad-dark", customDark);
-
-monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-  jsx: monaco.languages.typescript.JsxEmit.React, // Enable JSX
-});
-monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-  // Too noisy because we don't have the full TS environment.
-  noSemanticValidation: true,
+loader.init().then((monaco) => {
+  monaco.editor.defineTheme("dyad-light", customLight);
+  monaco.editor.defineTheme("dyad-dark", customDark);
+
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    jsx: monaco.languages.typescript.JsxEmit.React, // Enable JSX
+  });
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    // Too noisy because we don't have the full TS environment.
+    noSemanticValidation: true,
+  });
 });