refactor(nc-gui): lazy load monaco editor

packages/nc-gui/components/cell/Json.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { Modal as AModal } from 'ant-design-vue'
-import Editor from '~/components/monaco/Editor.vue'
+import { EditModeInj, IsFormInj, ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
-import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
-import { EditModeInj, IsFormInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
@@ -113,7 +111,7 @@ watch(editEnabled, () => {
         </div>
       </div>
 
-      <Editor
+      <LazyMonacoEditor
         :model-value="localValue"
         class="min-w-full w-80"
         :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"

packages/nc-gui/components/monaco/Editor.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import * as monaco from 'monaco-editor'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-import { onMounted } from '#imports'
+import type { editor as MonacoEditor } from 'monaco-editor'
-import { deepCompare } from '~/utils'
+import { deepCompare, onMounted, ref, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>
@@ -60,7 +59,8 @@ self.MonacoEnvironment = {
 }
 
 const root = ref<HTMLDivElement>()
-let editor: monaco.editor.IStandaloneCodeEditor
+
+let editor: MonacoEditor.IStandaloneCodeEditor
 
 const format = () => {
   editor.setValue(JSON.stringify(JSON.parse(editor?.getValue() as string), null, 2))
@@ -71,18 +71,20 @@ defineExpose({
   isValid,
 })
 
-onMounted(() => {
+onMounted(async () => {
+  const { editor: monacoEditor, languages } = await import('monaco-editor')
+
   if (root.value && lang) {
-    const model = monaco.editor.createModel(vModel, lang)
+    const model = monacoEditor.createModel(vModel, lang)
 
     if (lang === 'json') {
       // configure the JSON language support with schemas and schema associations
-      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      languages.json.jsonDefaults.setDiagnosticsOptions({
         validate: validate as boolean,
       })
     }
 
-    editor = monaco.editor.create(root.value, {
+    editor = monacoEditor.create(root.value, {
       model,
       theme: 'vs',
       foldingStrategy: 'indentation',
@@ -107,6 +109,7 @@ onMounted(() => {
           vModel = editor.getValue()
         } else {
           const obj = JSON.parse(editor.getValue())
+
           if (!obj || !deepCompare(vModel, obj)) vModel = obj
         }
       } catch (e) {