fix: inject the monaco loader from ms.Application

Author: Col0ring

backend/modelscope_studio/components/pro/monaco_editor/diff_editor/__init__.py

@@ -45,7 +45,7 @@ def __init__(
             before_mount: str | None = None,
             after_mount: str | None = None,
             override_services: dict | None = None,
-            loading: str | None = None,
+            loading: str | None = "Editor is loading...",
             read_only: bool | None = None,
             options: dict | None = None,
             line: int | None = None,

frontend/pro/monaco-editor/Index.svelte

@@ -77,32 +77,21 @@
     slots: $slots,
     themeMode: gradio.theme,
   };
+
+  $: awaitedLoader =
+    _loader?.mode === 'local'
+      ? initLocalLoader()
+      : _loader?.cdn_url
+        ? initCDNLoader(_loader.cdn_url)
+        : undefined;
 </script>
 
 {#if $mergedProps.visible}
-  {#if _loader?.mode === 'local'}
-    {#await initLocalLoader()}
-      <!-- Loading local loader -->
-    {:then}
-      {#await AwaitedMonacoEditor then MonacoEditor}
-        <MonacoEditor {...editorProps}>
-          <slot></slot>
-        </MonacoEditor>
-      {/await}
-    {/await}
-  {:else if _loader?.cdn_url}
-    {#await initCDNLoader(_loader.cdn_url)}
-      {#await AwaitedMonacoEditor then MonacoEditor}
-        <MonacoEditor {...editorProps}>
-          <slot></slot>
-        </MonacoEditor>
-      {/await}
-    {/await}
-  {:else}
+  {#await awaitedLoader then}
     {#await AwaitedMonacoEditor then MonacoEditor}
       <MonacoEditor {...editorProps}>
         <slot></slot>
       </MonacoEditor>
     {/await}
-  {/if}
+  {/await}
 {/if}

frontend/pro/monaco-editor/diff-editor/Index.svelte

@@ -79,32 +79,21 @@
     slots: $slots,
     themeMode: gradio.theme,
   };
+
+  $: awaitedLoader =
+    _loader?.mode === 'local'
+      ? initLocalLoader()
+      : _loader?.cdn_url
+        ? initCDNLoader(_loader.cdn_url)
+        : undefined;
 </script>
 
 {#if $mergedProps.visible}
-  {#if _loader?.mode === 'local'}
-    {#await initLocalLoader()}
-      <!-- Loading local loader -->
-    {:then}
-      {#await AwaitedMonacoDiffEditor then MonacoDiffEditor}
-        <MonacoDiffEditor {...editorProps}>
-          <slot></slot>
-        </MonacoDiffEditor>
-      {/await}
-    {/await}
-  {:else if _loader?.cdn_url}
-    {#await initCDNLoader(_loader.cdn_url)}
-      {#await AwaitedMonacoDiffEditor then MonacoDiffEditor}
-        <MonacoDiffEditor {...editorProps}>
-          <slot></slot>
-        </MonacoDiffEditor>
-      {/await}
-    {/await}
-  {:else}
+  {#await awaitedLoader then}
     {#await AwaitedMonacoDiffEditor then MonacoDiffEditor}
       <MonacoDiffEditor {...editorProps}>
         <slot></slot>
       </MonacoDiffEditor>
     {/await}
-  {/if}
+  {/await}
 {/if}

frontend/pro/monaco-editor/diff-editor/gradio.config.js

@@ -1,7 +1,3 @@
 import config from '../../../defineConfig.js';
 
-export default config({
-  external: {
-    excludes: ['@monaco-editor/loader'],
-  },
-});
+export default config();

frontend/pro/monaco-editor/gradio.config.js

@@ -1,7 +1,3 @@
 import config from '../../defineConfig.js';
 
-export default config({
-  external: {
-    excludes: ['@monaco-editor/loader'],
-  },
-});
+export default config();

frontend/pro/monaco-editor/loader.ts

@@ -1,30 +1,25 @@
-function getMonacoLoader() {
+import { initialize } from '@svelte-preprocess-react/component';
+
+async function getMonacoLoader() {
+  await initialize();
   return new Promise<{
     loader: typeof window.ms_globals.monacoLoader;
     done?: () => void;
   }>((resolve) => {
-    if (!window.ms_globals?.monacoLoader) {
-      if (window.ms_globals?.monacoLoaderPromise) {
-        window.ms_globals.monacoLoaderPromise.then((loader) => {
-          resolve({
-            loader,
-          });
-        });
-      } else {
-        window.ms_globals ??= {} as typeof window.ms_globals;
-        window.ms_globals.monacoLoaderPromise = new Promise((resolve2) => {
-          import('@monaco-editor/react').then((m) => {
-            window.ms_globals.monacoLoader = m.loader;
-            resolve({
-              loader: m.loader,
-              done: () => resolve2(m.loader),
-            });
-          });
+    if (window.ms_globals?.monacoLoaderPromise) {
+      window.ms_globals.monacoLoaderPromise.then(() => {
+        resolve({
+          loader: window.ms_globals.monacoLoader,
         });
-      }
+      });
     } else {
-      resolve({
-        loader: window.ms_globals.monacoLoader,
+      window.ms_globals.monacoLoaderPromise = new Promise((resolve2) => {
+        resolve({
+          loader: window.ms_globals.monacoLoader,
+          done: () => {
+            resolve2();
+          },
+        });
       });
     }
   });

frontend/svelte-preprocess-react/inject.ts

@@ -1,4 +1,5 @@
 import type { loader as monacoLoader } from '@monaco-editor/react';
+import { loader } from '@monaco-editor/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOMClient from 'react-dom/client';
@@ -42,7 +43,7 @@ declare global {
       autokey: number;
       loadingKey: number;
       monacoLoader: typeof monacoLoader | null;
-      monacoLoaderPromise: Promise<typeof monacoLoader> | null;
+      monacoLoaderPromise: Promise<void> | null;
       rerender: (props: BridgeProps) => void;
       // render items
       createItemsContext: typeof createItemsContext;
@@ -103,7 +104,7 @@ window.ms_globals = {
     nodes: [],
   },
   rerender,
-  monacoLoader: null,
+  monacoLoader: loader,
   monacoLoaderPromise: null,
   // render items
   createItemsContext,

pyproject.toml

@@ -231,6 +231,7 @@ artifacts = [
   "/backend/modelscope_studio/components/pro/web_sandbox/templates",
   "/backend/modelscope_studio/components/antd/statistic/timer/templates",
   "/backend/modelscope_studio/components/pro/monaco_editor/templates",
+  "/backend/modelscope_studio/components/pro/monaco_editor/diff_editor/templates",
 ]
 
 [tool.yapfignore]