feat(Editor): add monaco-volar to improve Vue editor experience

hatemhosny · hatemhosny · commit badaf6a9288b · 2025-04-02T23:03:07.000+02:00
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
@@ -78,7 +78,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     editorLanguages[language]?.() || (editorLanguages.html?.() as Promise<LanguageSupport>);
 
   const mapLanguage = (lang: Language) => {
-    if (['vue', 'vue3', 'vue2'].includes(lang)) return 'vue';
+    if (lang.startsWith('vue')) return 'vue';
     return options.mapLanguage?.(lang) || lang;
   };
 
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
@@ -21,6 +21,7 @@ import {
   monacoBaseUrl,
   monacoEmacsUrl,
   monacoVimUrl,
+  monacoVolarUrl,
   vendorsBaseUrl,
 } from '../../vendors';
 import { getImports } from '../../compiler/import-map';
@@ -41,6 +42,8 @@ let codeiumProvider: { dispose: () => void } | undefined;
 // track editors for providing context for AI
 let editors: Monaco.editor.IStandaloneCodeEditor[] = [];
 let tailwindcssConfig: any;
+let vueRegistered = false;
+let shikiThemes: Record<string, string> = {};
 
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
   const {
@@ -55,11 +58,15 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     getFormatterConfig,
     getFontFamily,
   } = options;
+  let language = options.language;
+
   if (!container) throw new Error('editor container not found');
 
   const loadMonaco = () => import(monacoBaseUrl + 'monaco.js');
 
   let editorMode: any | undefined;
+  let currentTheme = theme;
+  let currentEditorTheme = editorTheme;
 
   const convertOptions = (opt: EditorConfig): Options => ({
     fontFamily: getFontFamily(opt.fontFamily),
@@ -81,9 +88,11 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       ? 'coffeescript'
       : ['rescript', 'reason', 'ocaml'].includes(language)
         ? 'csharp'
-        : ['vue', 'svelte', 'malina', 'riot'].includes(language)
-          ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
-          : mapLanguage(language);
+        : language.startsWith('vue')
+          ? 'vue'
+          : ['svelte', 'malina', 'riot'].includes(language)
+            ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
+            : mapLanguage(language);
 
   try {
     (window as any).monaco = (window as any).monaco || (await loadMonaco()).monaco;
@@ -126,7 +135,9 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const setTheme = (theme: Theme, editorTheme: Config['editorTheme']) => {
     loadTheme(theme, editorTheme).then((newTheme) => {
-      monaco.editor.setTheme(newTheme);
+      monaco.editor.setTheme(shikiThemes[newTheme] ?? newTheme);
+      currentTheme = theme;
+      currentEditorTheme = editorTheme;
     });
   };
 
@@ -263,8 +274,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     configureTypeScriptFeatures();
   };
 
-  let language = options.language;
-
   const editor = monaco.editor.create(container, {
     ...editorOptions,
     language: monacoMapLanguage(language),
@@ -299,7 +308,24 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     config?: Monaco.languages.LanguageConfiguration;
     tokens?: Monaco.languages.IMonarchLanguage;
   }
+
+  const addVueSupport = async () => {
+    if (vueRegistered) return;
+    vueRegistered = true;
+    const { registerVue, registerHighlighter } = await import(monacoVolarUrl);
+    const tsCompilerOptions = { ...getCompilerOptions('vue'), jsx: 'preserve' };
+    await registerVue({ editor, monaco, tsCompilerOptions, silent: true });
+    shikiThemes = registerHighlighter(monaco);
+    shikiThemes['custom-vs-light'] = shikiThemes.vs;
+    shikiThemes['custom-vs-dark'] = shikiThemes['vs-dark'];
+    setTheme(currentTheme, currentEditorTheme);
+  };
+
   const loadMonacoLanguage = async (lang: Language) => {
+    if (monacoMapLanguage(lang) === 'vue') {
+      await addVueSupport();
+      return;
+    }
     const langUrl = customLanguages[lang];
     if (langUrl && !monaco.languages.getLanguages().find((l) => l.id === lang)) {
       const mod: CustomLanguageDefinition = (await import(langUrl)).default;
@@ -404,8 +430,14 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const setLanguage = (lang: Language, value?: string) => {
     language = lang;
     clearTypes(false);
-    setModel(editor, value ?? editor.getValue(), language);
-    loadMonacoLanguage(lang);
+    if (monacoMapLanguage(lang) !== 'vue') {
+      setModel(editor, value ?? editor.getValue(), language);
+    }
+    loadMonacoLanguage(lang).then(() => {
+      if (monacoMapLanguage(lang) === 'vue') {
+        setModel(editor, value ?? editor.getValue(), language);
+      }
+    });
   };
 
   const focus = () => editor.focus();
diff --git a/src/livecodes/editor/ts-compiler-options.ts b/src/livecodes/editor/ts-compiler-options.ts
@@ -13,15 +13,17 @@ export const hasJsx = [
   'flow',
   'solid',
   'solid.tsx',
+  'stencil',
   'react-native',
   'react-native-tsx',
+  'vue',
 ];
 
 export const getCompilerOptions = (language: Language): CompilerOptions => {
   const JSLangs = ['javascript', 'jsx', 'react', 'flow', 'solid', 'react-native'];
   const isJSLang = JSLangs.includes(language);
   const isJsx = hasJsx.includes(language);
-  const nonReactJsx = ['solid', 'solid.tsx', 'stencil'].includes(language);
+  const nonReactJsx = ['solid', 'solid.tsx', 'stencil', 'vue'].includes(language);
 
   const settings: CompilerOptions = {
     allowJs: true,
diff --git a/src/livecodes/languages/vue/lang-vue.ts b/src/livecodes/languages/vue/lang-vue.ts
@@ -25,6 +25,7 @@ export const vue: LanguageSpecs = {
   },
   extensions: ['vue', 'vue3'],
   editor: 'script',
+  editorLanguage: 'html',
 };
 
 export const vueApp: LanguageSpecs = {
diff --git a/src/livecodes/templates/starter/vue-sfc-starter.ts b/src/livecodes/templates/starter/vue-sfc-starter.ts
@@ -34,7 +34,7 @@ import Counter from './Component.vue';
   const align = 'center';
 
   // define inline component
-  function Greeting(props: {name: string}) {
+  function Greeting(props: {name?: string}) {
     return <h1>Hello, { props.name || 'World' }!</h1>
   }
 </script>
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
@@ -293,6 +293,10 @@ export const monacoThemesBaseUrl = /* @__PURE__ */ getUrl('monaco-themes@0.4.4/t
 
 export const monacoVimUrl = /* @__PURE__ */ getUrl('monaco-vim@0.4.1/dist/monaco-vim.js');
 
+export const monacoVolarUrl = /* @__PURE__ */ getUrl(
+  '@live-codes/monaco-volar@0.1.0/dist/index.js',
+);
+
 export const mustacheUrl = /* @__PURE__ */ getUrl('mustache@4.2.0/mustache.js');
 
 export const ninjaKeysUrl = /* @__PURE__ */ getUrl('@hatemhosny/ninja-keys@1.14.0/bundle/index.js');

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ import Counter from './Component.vue';`
`34`	`34`	`const align = 'center';`
`35`	`35`
`36`	`36`	`// define inline component`
`37`		`- function Greeting(props: {name: string}) {`
	`37`	`+ function Greeting(props: {name?: string}) {`
`38`	`38`	`return <h1>Hello, { props.name \|\| 'World' }!</h1>`
`39`	`39`	`}`
`40`	`40`	`</script>`