refactor: javascript engine of shiki

Author: sxzz

src/monaco/Monaco.vue

@@ -2,11 +2,9 @@
 import {
   computed,
   inject,
-  nextTick,
   onBeforeUnmount,
   onMounted,
   onWatcherCleanup,
-  ref,
   shallowRef,
   useTemplateRef,
   watch,
@@ -15,6 +13,7 @@ import * as monaco from 'monaco-editor-core'
 import { initMonaco } from './env'
 import { getOrCreateModel } from './utils'
 import { type EditorMode, injectKeyProps } from '../types'
+import { registerHighlighter } from './highlight'
 
 const props = withDefaults(
   defineProps<{
@@ -35,7 +34,6 @@ const emit = defineEmits<{
 }>()
 
 const containerRef = useTemplateRef('container')
-const ready = ref(false)
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
 const {
   store,
@@ -53,11 +51,8 @@ function emitChangeEvent() {
   emit('change', editorInstance.getValue())
 }
 
-onMounted(async () => {
-  const theme = await import('./highlight').then((r) => r.registerHighlighter())
-  ready.value = true
-  await nextTick()
-
+onMounted(() => {
+  const theme = registerHighlighter()
   if (!containerRef.value) {
     throw new Error('Cannot find containerRef')
   }

src/monaco/highlight.ts

@@ -1,19 +1,27 @@
 import * as monaco from 'monaco-editor-core'
-import { createHighlighterCore } from 'shiki/core'
+import { createHighlighterCoreSync } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
 import { shikiToMonaco } from '@shikijs/monaco'
 
 import langVue from 'shiki/langs/vue.mjs'
+import langTsx from 'shiki/langs/tsx.mjs'
+import langJsx from 'shiki/langs/jsx.mjs'
 import themeDark from 'shiki/themes/dark-plus.mjs'
 import themeLight from 'shiki/themes/light-plus.mjs'
 
-export async function registerHighlighter() {
-  const highlighter = await createHighlighterCore({
-    themes: [themeDark, themeLight],
-    langs: [langVue],
-    loadWasm: import('shiki/wasm'),
-  })
-  monaco.languages.register({ id: 'vue' })
-  shikiToMonaco(highlighter, monaco)
+let registered = false
+export function registerHighlighter() {
+  if (!registered) {
+    const highlighter = createHighlighterCoreSync({
+      themes: [themeDark, themeLight],
+      langs: [langVue, langTsx, langJsx],
+      engine: createJavaScriptRegexEngine(),
+    })
+    monaco.languages.register({ id: 'vue' })
+    shikiToMonaco(highlighter, monaco)
+    registered = true
+  }
+
   return {
     light: themeLight.name!,
     dark: themeDark.name!,