kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Load Monaco from CDN (#1939)

Browse Source 
<!-- CURSOR_SUMMARY -->
> [!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>
<!-- /CURSOR_SUMMARY -->



<!-- This is an auto-generated description by cubic. -->
---
## 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>

<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Will Chen
2025-12-11 23:09:04 -08:00
committed by GitHub
parent 1ce399584e
commit 70d4f5980e
1 changed files with 11 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/chat/monaco.ts
View File

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