Skip to content

WIP: update monaco #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

WIP: update monaco #3

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
63c92de
feat: use shikiji for more accurate highlight (#190)
antfu Dec 21, 2023
538338f
chore: move to shiki (#216)
antfu Feb 7, 2024
04f6e10
feat: register language configuration
sxzz Feb 10, 2024
bf95383
feat: volar 2.x (#225)
sxzz Jul 2, 2024
91d02de
refactor: replace deprecated shiki API
sxzz Jul 3, 2024
4869478
fix: rollback & pin volar version
sxzz Aug 12, 2024
6ae587e
fix: debounce reloadLanguageTools in monaco
sxzz Aug 27, 2024
1c76b7e
chore: update to 2.1.6
johnsoncodehk Sep 7, 2024
6d5032a
feat: export
sxzz Sep 7, 2024
e3eac17
refactor: javascript engine of shiki
sxzz Oct 9, 2024
6e29911
chore(deps): update monaco, volar and shiki versions
oumoussa98 Apr 18, 2025
d9a70e0
chore(prettier): migrate to async formatting and updated plugin imports
oumoussa98 Apr 7, 2025
3a7a5f8
chore(prettier): use async formatting in codemirror
oumoussa98 Apr 19, 2025
c7ac119
fix(@vue/language-service): reload on script lang change
oumoussa98 May 1, 2025
360c1a0
refactor: remove path-browserify polyfill
oumoussa98 May 1, 2025
5486fdc
Merge branch 'master' of github.com:vuetifyjs/vue-repl into chore/upd…
oumoussa98 May 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: javascript engine of shiki
  • Loading branch information
@sxzz @oumoussa98
sxzz authored and oumoussa98 committed Apr 18, 2025
commit e3eac1720766a512d294955d9badc642cebd3d1b
9 changes: 3 additions & 6 deletions src/monaco/Monaco.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
onBeforeUnmount,
ref,
shallowRef,
nextTick,
inject,
watch,
computed,
Expand All @@ -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<{
Expand All @@ -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')!

Expand All @@ -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')
Expand Down
26 changes: 17 additions & 9 deletions src/monaco/highlight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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!,
Expand Down