feat: add changes in upstream 3.1.0

Author: pdanpdan

package.json

@@ -2,7 +2,7 @@
   "name": "@pdanpdan/vue-repl",
   "version": "1.0.15",
   "description": "Vue component for editing Vue components",
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@8.12.1",
   "type": "module",
   "main": "dist/ssr-stub.js",
   "module": "dist/vue-repl.js",
@@ -91,17 +91,14 @@
     "bumpp": "^9.2.1",
     "codemirror": "^5.65.16",
     "conventional-changelog-cli": "^4.1.0",
-    "emmet-monaco-es": "^5.3.0",
     "fflate": "^0.8.1",
     "hash-sum": "^2.0.0",
     "lint-staged": "^15.2.0",
     "monaco-editor-core": "^0.45.0",
-    "monaco-editor-textmate": "^4.0.0",
-    "monaco-textmate": "^3.0.1",
-    "monaco-volar": "^0.4.0",
-    "onigasm": "^2.2.5",
     "prettier": "^3.1.1",
     "simple-git-hooks": "^2.9.0",
+    "shikiji": "^0.9.10",
+    "shikiji-monaco": "^0.9.10",
     "sucrase": "^3.34.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",

pnpm-lock.yaml

@@ -13,7 +13,6 @@ import {
 import * as monaco from 'monaco-editor-core'
 import { initMonaco } from './env'
 import { getOrCreateModel } from './utils'
-import { loadGrammars, loadTheme } from 'monaco-volar'
 import type { Store } from '../store'
 import type { EditorProps, EditorEmits } from '../editor/types'
 
@@ -35,7 +34,7 @@ const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 let editorInstanceMounted = false
 
 onMounted(async () => {
-  const theme = await loadTheme(monaco.editor)
+  const theme = await import('./highlight').then(r => r.registerHighlighter())
   ready.value = true
   await nextTick()
 
@@ -59,7 +58,6 @@ onMounted(async () => {
     inlineSuggest: {
       enabled: false,
     },
-    'semanticHighlighting.enabled': true,
     fixedOverflowWidgets: true,
   })
   editor.value = editorInstance
@@ -166,8 +164,6 @@ onMounted(async () => {
       emit('change', editorInstance.getValue(), props.filename)
     })
   }
-
-  await loadGrammars(monaco, editorInstance)
 })
 
 onBeforeUnmount(() => {

src/monaco/Monaco.vue

@@ -3,9 +3,7 @@ import * as volar from '@volar/monaco'
 import * as monaco from 'monaco-editor-core'
 import { editor, languages, Uri } from 'monaco-editor-core'
 import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker'
-import { emmetHTML } from 'emmet-monaco-es'
-import * as onigasm from 'onigasm'
-import onigasmWasm from 'onigasm/lib/onigasm.wasm?url'
+
 import { watchEffect } from 'vue'
 import { Store } from '../store'
 import { getOrCreateModel } from './utils'
@@ -16,8 +14,6 @@ let initted = false
 export function initMonaco(store: Store) {
   if (initted) return
   loadMonacoEnv(store)
-  loadWasm()
-  emmetHTML(monaco as any, ['vue', 'html'])
 
   watchEffect(() => {
     // create a model for each file in the store
@@ -65,10 +61,6 @@ export function initMonaco(store: Store) {
   initted = true
 }
 
-export function loadWasm() {
-  return onigasm.loadWASM(onigasmWasm)
-}
-
 export class WorkerHost {
   onFetchCdnFile(uri: string, text: string) {
     ;(

src/monaco/env.ts

@@ -0,0 +1,23 @@
+import * as monaco from 'monaco-editor-core'
+import { getHighlighterCore } from 'shikiji/core'
+import { getWasmInlined } from 'shikiji/wasm'
+import { shikijiToMonaco } from 'shikiji-monaco'
+
+import langVue from 'shikiji/langs/vue.mjs'
+import themeDark from 'shikiji/themes/dark-plus.mjs'
+import themeLight from 'shikiji/themes/light-plus.mjs'
+
+
+export async function registerHighlighter() {
+  const highlighter = await getHighlighterCore({
+    themes: [themeDark, themeLight],
+    langs: [langVue],
+    loadWasm: getWasmInlined
+  })
+  monaco.languages.register({ id: 'vue' })
+  shikijiToMonaco(highlighter, monaco)
+  return {
+    light: themeLight.name!,
+    dark: themeDark.name!
+  }
+}

src/monaco/highlight.ts

@@ -51,7 +51,6 @@ export default mergeConfig(base, {
   optimizeDeps: {
     // avoid late discovered deps
     include: [
-      'onigasm',
       'monaco-editor-core/esm/vs/editor/editor.worker',
       'vue/server-renderer',
     ],