refactor: javascript engine of shiki

Author: sxzz

src/monaco/Monaco.vue

@@ -4,7 +4,6 @@ import {
   onBeforeUnmount,
   ref,
   shallowRef,
-  nextTick,
   inject,
   watch,
   computed,
@@ -19,6 +18,7 @@ import parserBabel from 'prettier/parser-babel'
 import parserHtml from 'prettier/parser-html'
 import parserPostcss from 'prettier/parser-postcss'
 import prettier from 'prettier/standalone'
+import { registerHighlighter } from './highlight'
 
 const props = withDefaults(
   defineProps<{
@@ -37,7 +37,6 @@ const emit = defineEmits<{
 }>()
 
 const containerRef = ref<HTMLDivElement>()
-const ready = ref(false)
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
 const store = inject<Store>('store')!
 
@@ -47,10 +46,8 @@ const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 const extension = computed(() => props.filename.split('.').at(-1))
 
 const replTheme = inject<Ref<'dark' | 'light'>>('theme')!
-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!,