tree-shaking, lazy-component support

packages/client/app/layouts/index.vue

@@ -1,12 +1,17 @@
 <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 }" v-if="loaded">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+      <template #fallback>
+        <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>

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>

plugins/explorer/client/editor.ts

@@ -1,106 +1,128 @@
-import { shallowRef } from 'vue'
+import { shallowRef, ShallowRef } from 'vue'
 
-import * as monaco from 'monaco-editor'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+// import * as monaco from 'monaco-editor'
+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'
 
+import type Monaco from 'monaco-editor'
 declare global {
   interface Window {
-    monaco: typeof monaco
+    monaco: typeof Monaco
   }
 }
 
-window.monaco = 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
 
-window.MonacoEnvironment = {
-  getWorker(_: string, label: string) {
+  // useMonacoEditor may be called multiple times
+  window.monaco = monaco
+  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,
+    })
+  }
+
+  const language = shallowRef(monaco.languages.getLanguages()[0])
 
-export 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)
-})
+  state = {
+    model,
+    language,
+    monaco,
+  }
+  return state
+}

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)
 

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 * as monaco from 'monaco-editor'
+import useEditor from './editor'
+import type Monaco from 'monaco-editor'
+
+const { model, monaco } = await useEditor()
 
 const vFocus: Directive = {
   mounted: (el) => el.focus()
@@ -176,7 +178,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)

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>