From 3a815e12073423d266f70244d9b660ac1107cfba Mon Sep 17 00:00:00 2001
From: arily <a@ri.mk>
Date: Fri, 19 May 2023 20:06:45 +0900
Subject: [PATCH 1/6] suspense async component

---
 packages/client/app/layouts/index.vue | 16 ++++++++++------
 plugins/explorer/client/index.vue     |  5 +++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/client/app/layouts/index.vue b/packages/client/app/layouts/index.vue
index 12e53a63..566f93b8 100644
--- a/packages/client/app/layouts/index.vue
+++ b/packages/client/app/layouts/index.vue
@@ -1,12 +1,16 @@
 <template>
   <div :class="{ 'is-left-aside-open': isLeftAsideOpen }">
     <activity-bar></activity-bar>
-    <router-view v-if="loaded" #="{ Component }">
-      <keep-alive>
-        <component :is="Component"></component>
-      </keep-alive>
-    </router-view>
-    <div class="loading" v-else v-loading="true" element-loading-text="正在加载数据……"></div>
+    <suspense>
+      <router-view #="{ Component }">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+      <template #fallback>
+        <div class="loading">正在加载数据……</div>
+      </template>
+    </suspense>
     <status-bar></status-bar>
     <k-slot name="global"></k-slot>
   </div>
diff --git a/plugins/explorer/client/index.vue b/plugins/explorer/client/index.vue
index 29d632bc..02fbbfe7 100644
--- a/plugins/explorer/client/index.vue
+++ b/plugins/explorer/client/index.vue
@@ -111,7 +111,8 @@ import { send, store, base64ToArrayBuffer, arrayBufferToBase64 } from '@koishijs
 import { Entry } from '../src'
 import { files } from './store'
 import { model } from './editor'
-import * as monaco from 'monaco-editor'
+import type Monaco from 'monaco-editor'
+const monaco = await import('monaco-editor')
 
 const vFocus: Directive = {
   mounted: (el) => el.focus()
@@ -176,7 +177,7 @@ useEventListener('contextmenu', () => {
   menuTarget.value = null
 })
 
-let instance: monaco.editor.IStandaloneCodeEditor = null
+let instance: Monaco.editor.IStandaloneCodeEditor = null
 
 watch(keyword, (val) => {
   tree.value.filter(val)

From d9e3b31db5049927aa930fd6c71a136e751fcb25 Mon Sep 17 00:00:00 2001
From: arily <a@ri.mk>
Date: Fri, 19 May 2023 20:34:42 +0900
Subject: [PATCH 2/6] lazy import

---
 packages/client/client/activity.ts | 2 +-
 plugins/explorer/client/editor.ts  | 3 ++-
 plugins/explorer/client/index.ts   | 9 ++++++---
 plugins/explorer/client/index.vue  | 4 +++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/client/client/activity.ts b/packages/client/client/activity.ts
index e867bb31..2333da94 100644
--- a/packages/client/client/activity.ts
+++ b/packages/client/client/activity.ts
@@ -13,7 +13,7 @@ export namespace Activity {
     id?: string
     path: string
     strict?: boolean
-    component: Component
+    component: Component | (() => PromiseLike<Component>)
     name: MaybeRefOrGetter<string>
     desc?: MaybeRefOrGetter<string>
     icon?: MaybeRefOrGetter<string>
diff --git a/plugins/explorer/client/editor.ts b/plugins/explorer/client/editor.ts
index e2a5ae33..a8c19a20 100644
--- a/plugins/explorer/client/editor.ts
+++ b/plugins/explorer/client/editor.ts
@@ -1,11 +1,12 @@
 import { shallowRef } from 'vue'
 
-import * as monaco from 'monaco-editor'
+// import * as monaco from 'monaco-editor'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 // import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 // import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 // import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 // import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+const monaco = await import('monaco-editor')
 
 declare global {
   interface Window {
diff --git a/plugins/explorer/client/index.ts b/plugins/explorer/client/index.ts
index e328ae27..5c70c073 100644
--- a/plugins/explorer/client/index.ts
+++ b/plugins/explorer/client/index.ts
@@ -1,10 +1,13 @@
 import { Context } from '@koishijs/client'
 import {} from '@koishijs/plugin-explorer/src'
-import FilePicker from './file-picker.vue'
-import Layout from './index.vue'
-import Status from './status.vue'
 import './icons'
 import './editor'
+// import FilePicker from './file-picker.vue'
+// import Layout from './index.vue'
+// import Status from './status.vue'
+const FilePicker = () => import('./file-picker.vue')
+const Layout = () => import('./index.vue')
+const Status = () => import('./status.vue')
 
 Context.app.component('k-file-picker', FilePicker)
 
diff --git a/plugins/explorer/client/index.vue b/plugins/explorer/client/index.vue
index 02fbbfe7..57be5633 100644
--- a/plugins/explorer/client/index.vue
+++ b/plugins/explorer/client/index.vue
@@ -110,8 +110,10 @@ import { useDark, useElementSize, useEventListener } from '@vueuse/core'
 import { send, store, base64ToArrayBuffer, arrayBufferToBase64 } from '@koishijs/client'
 import { Entry } from '../src'
 import { files } from './store'
-import { model } from './editor'
+// import { model } from './editor'
 import type Monaco from 'monaco-editor'
+const Editor = await import ('./editor')
+const { model } = Editor
 const monaco = await import('monaco-editor')
 
 const vFocus: Directive = {

From cb8105824787c9d54ef6da7ed31f7421c5d46294 Mon Sep 17 00:00:00 2001
From: arily <a@ri.mk>
Date: Fri, 19 May 2023 20:41:12 +0900
Subject: [PATCH 3/6] tree-shake to the ground

---
 plugins/explorer/client/editor.ts | 173 ++++++++++++++++--------------
 plugins/explorer/client/index.vue |   6 +-
 2 files changed, 94 insertions(+), 85 deletions(-)

diff --git a/plugins/explorer/client/editor.ts b/plugins/explorer/client/editor.ts
index a8c19a20..e0447194 100644
--- a/plugins/explorer/client/editor.ts
+++ b/plugins/explorer/client/editor.ts
@@ -1,107 +1,116 @@
 import { shallowRef } from 'vue'
 
 // import * as monaco from 'monaco-editor'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import type TEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 // import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 // import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 // import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 // import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-const monaco = await import('monaco-editor')
 
+import type Monaco from 'monaco-editor'
 declare global {
   interface Window {
-    monaco: typeof monaco
+    monaco: typeof Monaco
   }
 }
+export default async function useMonacoEditor() {
+  const monaco = await import('monaco-editor')
+  const EditorWorker = (await import('monaco-editor/esm/vs/editor/editor.worker?worker')).default as unknown as typeof TEditorWorker
 
-window.monaco = monaco
+  window.monaco = monaco
 
-window.MonacoEnvironment = {
-  getWorker(_: string, label: string) {
+  window.MonacoEnvironment = {
+    getWorker(_: string, label: string) {
     // if (label === 'typescript' || label === 'javascript') return new TsWorker()
     // if (label === 'json') return new JsonWorker()
     // if (label === 'css') return new CssWorker()
     // if (label === 'html') return new HtmlWorker()
-    return new EditorWorker()
-  },
-}
+      return new EditorWorker()
+    },
+  }
 
-export const model = monaco.editor.createModel('')
+  const model = monaco.editor.createModel('')
 
-const { cssDefaults, lessDefaults, scssDefaults } = monaco.languages.css
-for (const service of [cssDefaults, lessDefaults, scssDefaults]) {
-  service.setModeConfiguration({
-    completionItems: false,
-    hovers: false,
-    documentSymbols: false,
-    definitions: false,
-    references: false,
-    documentHighlights: false,
-    rename: false,
-    colors: false,
-    foldingRanges: false,
-    diagnostics: false,
-    selectionRanges: false,
-    documentFormattingEdits: false,
-    documentRangeFormattingEdits: false,
-  })
-}
+  const { cssDefaults, lessDefaults, scssDefaults } = monaco.languages.css
+  for (const service of [cssDefaults, lessDefaults, scssDefaults]) {
+    service.setModeConfiguration({
+      completionItems: false,
+      hovers: false,
+      documentSymbols: false,
+      definitions: false,
+      references: false,
+      documentHighlights: false,
+      rename: false,
+      colors: false,
+      foldingRanges: false,
+      diagnostics: false,
+      selectionRanges: false,
+      documentFormattingEdits: false,
+      documentRangeFormattingEdits: false,
+    })
+  }
 
-const { jsonDefaults } = monaco.languages.json
-for (const service of [jsonDefaults]) {
-  service.setModeConfiguration({
-    documentFormattingEdits: false,
-    documentRangeFormattingEdits: false,
-    completionItems: false,
-    hovers: false,
-    documentSymbols: false,
-    tokens: true,
-    colors: false,
-    foldingRanges: false,
-    diagnostics: false,
-    selectionRanges: false,
-  })
-}
+  const { jsonDefaults } = monaco.languages.json
+  for (const service of [jsonDefaults]) {
+    service.setModeConfiguration({
+      documentFormattingEdits: false,
+      documentRangeFormattingEdits: false,
+      completionItems: false,
+      hovers: false,
+      documentSymbols: false,
+      tokens: true,
+      colors: false,
+      foldingRanges: false,
+      diagnostics: false,
+      selectionRanges: false,
+    })
+  }
 
-const { javascriptDefaults, typescriptDefaults } = monaco.languages.typescript
-for (const service of [javascriptDefaults, typescriptDefaults]) {
-  service.setModeConfiguration({
-    completionItems: false,
-    hovers: false,
-    documentSymbols: false,
-    definitions: false,
-    references: false,
-    documentHighlights: false,
-    rename: false,
-    diagnostics: false,
-    documentRangeFormattingEdits: false,
-    signatureHelp: false,
-    onTypeFormattingEdits: false,
-    codeActions: false,
-    inlayHints: false,
-  })
-}
+  const { javascriptDefaults, typescriptDefaults } = monaco.languages.typescript
+  for (const service of [javascriptDefaults, typescriptDefaults]) {
+    service.setModeConfiguration({
+      completionItems: false,
+      hovers: false,
+      documentSymbols: false,
+      definitions: false,
+      references: false,
+      documentHighlights: false,
+      rename: false,
+      diagnostics: false,
+      documentRangeFormattingEdits: false,
+      signatureHelp: false,
+      onTypeFormattingEdits: false,
+      codeActions: false,
+      inlayHints: false,
+    })
+  }
 
-const { htmlDefaults, handlebarDefaults, razorDefaults } = monaco.languages.html
-for (const service of [htmlDefaults, handlebarDefaults, razorDefaults]) {
-  service.setModeConfiguration({
-    completionItems: false,
-    hovers: false,
-    documentSymbols: false,
-    links: false,
-    documentHighlights: false,
-    rename: false,
-    colors: false,
-    foldingRanges: false,
-    diagnostics: false,
-    selectionRanges: false,
-    documentFormattingEdits: false,
-    documentRangeFormattingEdits: false,
-  })
-}
+  const { htmlDefaults, handlebarDefaults, razorDefaults } = monaco.languages.html
+  for (const service of [htmlDefaults, handlebarDefaults, razorDefaults]) {
+    service.setModeConfiguration({
+      completionItems: false,
+      hovers: false,
+      documentSymbols: false,
+      links: false,
+      documentHighlights: false,
+      rename: false,
+      colors: false,
+      foldingRanges: false,
+      diagnostics: false,
+      selectionRanges: false,
+      documentFormattingEdits: false,
+      documentRangeFormattingEdits: false,
+    })
+  }
 
-export const language = shallowRef(monaco.languages.getLanguages()[0])
+  const language = shallowRef(monaco.languages.getLanguages()[0])
 
-model.onDidChangeLanguage((e) => {
-  language.value = monaco.languages.getLanguages().find(x => x.id === e.newLanguage)
-})
+  model.onDidChangeLanguage((e) => {
+    language.value = monaco.languages.getLanguages().find(x => x.id === e.newLanguage)
+  })
+
+  return {
+    model,
+    language,
+  }
+}
diff --git a/plugins/explorer/client/index.vue b/plugins/explorer/client/index.vue
index 57be5633..aa62c4e3 100644
--- a/plugins/explorer/client/index.vue
+++ b/plugins/explorer/client/index.vue
@@ -110,12 +110,12 @@ import { useDark, useElementSize, useEventListener } from '@vueuse/core'
 import { send, store, base64ToArrayBuffer, arrayBufferToBase64 } from '@koishijs/client'
 import { Entry } from '../src'
 import { files } from './store'
-// import { model } from './editor'
+import useEditor from './editor'
 import type Monaco from 'monaco-editor'
-const Editor = await import ('./editor')
-const { model } = Editor
 const monaco = await import('monaco-editor')
 
+const { model } = await useEditor()
+
 const vFocus: Directive = {
   mounted: (el) => el.focus()
 }

From cfc54f240ab665a2922dbeded88f097473427ca9 Mon Sep 17 00:00:00 2001
From: arily <a@ri.mk>
Date: Fri, 19 May 2023 20:49:34 +0900
Subject: [PATCH 4/6] overlooked

---
 plugins/explorer/client/status.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/plugins/explorer/client/status.vue b/plugins/explorer/client/status.vue
index 39bf7df9..2e6344ba 100644
--- a/plugins/explorer/client/status.vue
+++ b/plugins/explorer/client/status.vue
@@ -7,8 +7,9 @@
 <script lang="ts" setup>
 
 import { useRoute } from 'vue-router'
-import { language } from './editor'
+import useMonacoEditor from './editor';
 
+const { language } = await useMonacoEditor()
 const route = useRoute()
 
 </script>

From 5b7ac4c0a393a89b7b687caabed109df462d1864 Mon Sep 17 00:00:00 2001
From: arily <a@ri.mk>
Date: Fri, 19 May 2023 20:56:43 +0900
Subject: [PATCH 5/6] singleton

---
 plugins/explorer/client/editor.ts | 18 +++++++++++++++---
 plugins/explorer/client/index.vue |  3 +--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/plugins/explorer/client/editor.ts b/plugins/explorer/client/editor.ts
index e0447194..173b8343 100644
--- a/plugins/explorer/client/editor.ts
+++ b/plugins/explorer/client/editor.ts
@@ -1,4 +1,4 @@
-import { shallowRef } from 'vue'
+import { shallowRef, ShallowRef } from 'vue'
 
 // import * as monaco from 'monaco-editor'
 import type TEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
@@ -13,12 +13,22 @@ declare global {
     monaco: typeof Monaco
   }
 }
+
+let state: {
+  monaco: typeof Monaco
+  model: Monaco.editor.ITextModel
+  language: ShallowRef<Monaco.languages.ILanguageExtensionPoint>
+}
 export default async function useMonacoEditor() {
+  if (state) {
+    return state
+  }
+
   const monaco = await import('monaco-editor')
   const EditorWorker = (await import('monaco-editor/esm/vs/editor/editor.worker?worker')).default as unknown as typeof TEditorWorker
 
+  // useMonacoEditor may be called multiple times
   window.monaco = monaco
-
   window.MonacoEnvironment = {
     getWorker(_: string, label: string) {
     // if (label === 'typescript' || label === 'javascript') return new TsWorker()
@@ -109,8 +119,10 @@ export default async function useMonacoEditor() {
     language.value = monaco.languages.getLanguages().find(x => x.id === e.newLanguage)
   })
 
-  return {
+  state = {
     model,
     language,
+    monaco,
   }
+  return state
 }
diff --git a/plugins/explorer/client/index.vue b/plugins/explorer/client/index.vue
index aa62c4e3..369c992a 100644
--- a/plugins/explorer/client/index.vue
+++ b/plugins/explorer/client/index.vue
@@ -112,9 +112,8 @@ import { Entry } from '../src'
 import { files } from './store'
 import useEditor from './editor'
 import type Monaco from 'monaco-editor'
-const monaco = await import('monaco-editor')
 
-const { model } = await useEditor()
+const { model, monaco } = await useEditor()
 
 const vFocus: Directive = {
   mounted: (el) => el.focus()

From e92ad98d30a44ac18747677ae2f3bafc33ae7f41 Mon Sep 17 00:00:00 2001
From: arily <a@ri.mk>
Date: Fri, 19 May 2023 21:06:01 +0900
Subject: [PATCH 6/6] wait until loaded

---
 packages/client/app/layouts/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/app/layouts/index.vue b/packages/client/app/layouts/index.vue
index 566f93b8..796dcf2a 100644
--- a/packages/client/app/layouts/index.vue
+++ b/packages/client/app/layouts/index.vue
@@ -2,7 +2,7 @@
   <div :class="{ 'is-left-aside-open': isLeftAsideOpen }">
     <activity-bar></activity-bar>
     <suspense>
-      <router-view #="{ Component }">
+      <router-view #="{ Component }" v-if="loaded">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
@@ -11,6 +11,7 @@
         <div class="loading">正在加载数据……</div>
       </template>
     </suspense>
+    <div class="loading" v-if="!loaded" v-loading="true" element-loading-text="正在加载数据……"></div>
     <status-bar></status-bar>
     <k-slot name="global"></k-slot>
   </div>