feat: install gramars in place

components/PanelEditor.vue

@@ -92,7 +92,7 @@ const panelInitEditor = computed(() => isMounted.value || {
         :size="100 - ui.panelFileTree"
         :style="panelInitEditor"
       >
-        <PanelEditorMonaco
+        <LazyPanelEditorMonaco
           v-if="selectedFile"
           v-model="input"
           :filepath="selectedFile.filepath"

components/PanelEditorMonaco.client.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
-import { loadGrammars } from 'monaco-volar'
-import { initMonaco } from '../monaco/worker'
+import { loadGrammars } from '~/monaco/grammars'
+import { initMonaco } from '~/monaco/setup'
 import { Store } from '~/monaco/env'
 
 const props = defineProps<{

monaco/grammars.ts

@@ -0,0 +1,67 @@
+import { wireTmGrammars } from 'monaco-editor-textmate'
+import type { IGrammarDefinition } from 'monaco-textmate'
+import { Registry } from 'monaco-textmate'
+
+async function dispatchGrammars(scopeName: string): Promise<IGrammarDefinition> {
+  switch (scopeName) {
+    case 'source.vue':
+      return {
+        format: 'json',
+        content: await import('shiki/languages/vue.tmLanguage.json'),
+      }
+    case 'source.ts':
+      return {
+        format: 'json',
+        content: await import('shiki/languages/typescript.tmLanguage.json'),
+      }
+    case 'source.js':
+      return {
+        format: 'json',
+        content: await import('shiki/languages/javascript.tmLanguage.json'),
+      }
+    case 'text.html.basic':
+      return {
+        format: 'json',
+        content: await import('shiki/languages/html.tmLanguage.json'),
+      }
+    case 'source.css':
+      return {
+        format: 'json',
+        content: await import('shiki/languages/css.tmLanguage.json'),
+      }
+    default:
+      return {
+        format: 'json',
+        content: {
+          scopeName: 'source',
+          patterns: [],
+        },
+      }
+  }
+}
+
+export async function loadGrammars(
+  monaco: typeof import('monaco-editor'),
+  editor: import('monaco-editor').editor.IStandaloneCodeEditor,
+) {
+  const registry = new Registry({
+    getGrammarDefinition: async (scopeName) => {
+      const dispatch = await dispatchGrammars(scopeName)
+      return JSON.parse(JSON.stringify(dispatch))
+    },
+  })
+  const grammars = new Map()
+  grammars.set('vue', 'source.vue')
+  grammars.set('javascript', 'source.js')
+  grammars.set('typescript', 'source.ts')
+  grammars.set('css', 'source.css')
+  grammars.set('html', 'text.html.basic')
+
+  for (const lang of grammars.keys()) {
+    monaco.languages.register({
+      id: lang,
+    })
+  }
+
+  await wireTmGrammars(monaco as any, registry, grammars, editor as any)
+}

nuxt.config.ts

@@ -34,11 +34,14 @@ export default defineNuxtConfig({
         'Cross-Origin-Opener-Policy': 'same-origin',
       },
     },
-    // optimizeDeps: {
-    //   exclude: [
-    //     'monaco-volar',
-    //   ],
-    // },
+    optimizeDeps: {
+      include: [
+        'monaco-editor/esm/vs/editor/editor.worker',
+        '@volar/cdn',
+        '@vue/language-service',
+        '@volar/monaco/worker',
+      ],
+    },
   },
   vue: {
     defineModel: true,

package.json

@@ -19,11 +19,15 @@
     "@vue/language-service": "^1.8.25",
     "@webcontainer/api": "^1.1.8",
     "birpc": "^0.2.14",
+    "jszip": "^3.10.1",
     "monaco-editor": "^0.44.0",
     "monaco-editor-textmate": "^4.0.0",
-    "monaco-volar": "^0.4.0",
+    "monaco-textmate": "^3.0.1",
     "onigasm": "^2.2.5",
+    "shiki": "^0.14.6",
+    "shikiji": "^0.8.0",
     "splitpanes": "^3.1.5",
+    "theme-vitesse": "^0.7.5",
     "vue": "^3.3.10",
     "vue-router": "^4.2.5",
     "xterm": "^5.3.0",
@@ -43,10 +47,8 @@
     "@vueuse/nuxt": "^10.6.1",
     "eslint": "^8.55.0",
     "eslint-plugin-format": "^0.1.0",
-    "jszip": "^3.10.1",
     "nuxt": "npm:nuxt-nightly@latest",
     "remark-external-links": "^9.0.1",
-    "theme-vitesse": "^0.7.5",
     "typescript": "^5.3.3",
     "vue-tsc": "^1.8.24"
   }