Local bundling of the Monaco editor for predictable code editor loading behaviour on Shesha

shesha-reactjs/next.config.js

@@ -74,15 +74,15 @@ const nextConfig = (phase) => {
     webpack: (
       config
     ) => {
-      
+
       const extendResourceQuery = (rule, index) => {
         const { resourceQuery: initialQuery } = rule;
         const notRawQuery = { not: [/\?raw/] };
-        
+
         const newQuery = initialQuery
           ? { and: [(Array.isArray(initialQuery) ? { or: initialQuery } : initialQuery), notRawQuery] }
           : notRawQuery
-        
+
         return { ...rule, resourceQuery: newQuery };
       };
 
@@ -101,6 +101,13 @@ const nextConfig = (phase) => {
         ...existingRules,
       ];
 
+      // Configure Monaco Editor for local bundling
+      // Handle TTF fonts used by Monaco
+      config.module.rules.push({
+        test: /\.ttf$/,
+        type: 'asset/resource',
+      });
+
       return {
         ...config,
         module: {

shesha-reactjs/src/components/codeEditor/client-side/codeEditorClientSide.tsx

@@ -19,9 +19,11 @@ import { useAsyncMemo } from "@/hooks/useAsyncMemo";
 import { CodeEditorLoadingProgressor } from "../loadingProgressor";
 import { Environment } from "@/publicJsApis/metadataBuilder";
 import { useIsDevMode } from "@/hooks/useIsDevMode";
+import monaco from './monacoSetup';
 
-// you can change the source of the monaco files
-loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs' } });
+// Configure Monaco to use local files instead of CDN
+// The monaco-editor package will be bundled with the application
+loader.config({ monaco });
 
 interface EditorFileNamesState {
   modelFilePath: string;

shesha-reactjs/src/components/codeEditor/client-side/monacoSetup.ts

@@ -0,0 +1,56 @@
+/**
+ * Monaco Editor Setup for Local Bundling
+ *
+ * This file configures Monaco Editor to use locally bundled files
+ * instead of loading from a CDN, improving load times significantly.
+ */
+
+import * as monaco from 'monaco-editor';
+
+// Configure Monaco environment for web workers
+if (typeof window !== 'undefined') {
+  // Use self.MonacoEnvironment to configure workers
+  (self).MonacoEnvironment = {
+    getWorker(_: string, label: string) {
+      // For TypeScript/JavaScript workers
+      if (label === 'typescript' || label === 'javascript') {
+        return new Worker(
+          new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url),
+          { type: 'module' },
+        );
+      }
+
+      // For JSON workers
+      if (label === 'json') {
+        return new Worker(
+          new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url),
+          { type: 'module' },
+        );
+      }
+
+      // For CSS workers
+      if (label === 'css' || label === 'scss' || label === 'less') {
+        return new Worker(
+          new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url),
+          { type: 'module' },
+        );
+      }
+
+      // For HTML workers
+      if (label === 'html' || label === 'handlebars' || label === 'razor') {
+        return new Worker(
+          new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url),
+          { type: 'module' },
+        );
+      }
+
+      // Default editor worker
+      return new Worker(
+        new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url),
+        { type: 'module' },
+      );
+    },
+  };
+}
+
+export default monaco;