Merge branch 'develop' of https://github.com/live-codes/livecodes into i18n/develop

Author: livecodes-ci[bot]

docs/docs/languages/vue.mdx

@@ -257,7 +257,7 @@ import Counter from 'https://raw.githubusercontent.com/hatemhosny/simple-vue-cou
 
 Please note that extensionless imports are not supported. However, you may customize the import URL using import maps as described in [module resolution](../features/module-resolution.mdx#custom-module-resolution) section.
 
-This is an example of importing a Vue SFC, which in turn imports other Vue SFCs and extensionless imports, that are customized using importmap:
+Example:
 
 ```json title="Custom Settings"
 {
@@ -298,7 +298,62 @@ import App from 'https://raw.githubusercontent.com/hatemhosny/vue3-samples/maste
   </a>
 </div>
 
-<LiveCodes config={importExternalWithImportMap}></LiveCodes>
+### Importing Data URLs
+
+You may want to import other SFCs without having to host them on a server.
+These components can be encoded as [data URLs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data) and imported as usual.
+
+The data URL has to start with `data:text/vue` to be recognized as a Vue SFC. Any imports in the imported URLs (even if they are also data URLs) are resolved and compiled recursively.
+
+:::info
+
+The code in any code editor can be encoded as data URL from the LiveCodes UI using the "Copy code as data URL" button below the code editor.
+
+:::
+
+This is the previous demo that uses data URLs (with nested imports) instead of external URLs:
+
+export const importDataUrls = {
+  activeEditor: 'script',
+  script: {
+    language: 'vue',
+    content: `<script setup>
+import Counter from 'data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+';
+</script>
+
+<template>
+  <Counter />
+</template>
+`
+  },
+  style: {
+    language: 'css',
+    content: '@import "tailwindcss";\n',
+  },
+  processors: ['tailwindcss'],
+}
+
+<div style={{ marginBottom: '1em' }}>
+  <RunInLiveCodes config={importDataUrls} style={{ display: 'inline' }}></RunInLiveCodes>
+</div>
+
+<LiveCodes config={importDataUrls}></LiveCodes>
+
+In the above demo, this component is imported:
+
+```
+data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+
+```
+
+which imports these:
+
+```
+data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctZ3JheS01MDAgaG92ZXI6YmctZ3JheS02MDAgdHJhbnNpdGlvbiBweS0xIHB4LTQgdGV4dC13aGl0ZSByb3VuZGVkIGRyb3Atc2hhZG93LXhsIg0KICA+DQogICAge3sgdGl0bGUgfX0NCiAgPC9idXR0b24+DQo8L3RlbXBsYXRlPg==
+```
+
+```
+data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNjAwIHRyYW5zaXRpb24gcHktMSBweC00IHRleHQtd2hpdGUgcm91bmRlZCBkcm9wLXNoYWRvdy14bCINCiAgPg0KICAgIHt7IHRpdGxlIH19DQogIDwvYnV0dG9uPg0KPC90ZW1wbGF0ZT4=
+```
 
 ### Root Element
 

src/livecodes/compiler/import-map.ts

@@ -144,25 +144,35 @@ export const isScriptImport = (mod: string) =>
       mod.toLowerCase().endsWith('.vue') ||
       mod.toLowerCase().endsWith('.svelte')));
 
+const modulesCache: Record<string, string> = {};
+const fetchModule = async (mod: string) => {
+  if (modulesCache[mod]) {
+    return modulesCache[mod];
+  }
+  const res = await fetch(mod);
+  const content = await res.text();
+  modulesCache[mod] = content;
+  return content;
+};
+
 export const replaceSFCImports = async (
   code: string,
   {
     filename,
     config,
-    sfcExtension,
+    isSfc,
     getLanguageByAlias,
     compileSFC,
     external,
   }: {
     config: Config;
     filename: string;
-    sfcExtension: string;
+    isSfc: (mod: string) => boolean;
     getLanguageByAlias: (alias: string) => Language | undefined;
     compileSFC: (code: string, options: { filename: string; config: Config }) => Promise<string>;
     external?: string;
   },
 ) => {
-  const isSfc = (mod: string) => mod.toLowerCase().endsWith(sfcExtension);
   const isExtensionless = (mod: string) =>
     mod.startsWith('.') && !mod.split('/')[mod.split('/').length - 1].includes('.');
   const sfcImports = getImports(code).filter(
@@ -196,8 +206,7 @@ export const replaceSFCImports = async (
             ? new URL(mod, filename).href
             : modulesService.getUrl(mod));
 
-      const res = await fetch(url);
-      const content = await res.text();
+      const content = await fetchModule(url);
       const compiled = isSfc(mod)
         ? await compileSFC(content, { filename: url, config })
         : await replaceSFCImports(
@@ -208,7 +217,7 @@ export const replaceSFCImports = async (
                 config,
               )
             ).code,
-            { filename: url, config, sfcExtension, getLanguageByAlias, compileSFC, external },
+            { filename: url, config, isSfc, getLanguageByAlias, compileSFC, external },
           );
       if (!compiled) return;
       const dataUrl = toDataUrl(compiled);

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;
   };
 

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,14 +274,21 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     configureTypeScriptFeatures();
   };
 
-  let language = options.language;
-
   const editor = monaco.editor.create(container, {
     ...editorOptions,
     language: monacoMapLanguage(language),
   });
   setModel(editor, options.value, language);
 
+  const getOrCreateModel = (value: string, lang: string | undefined, uri: Monaco.Uri) => {
+    const model = monaco.editor.getModel(uri);
+    if (model) {
+      model.setValue(value);
+      return model;
+    }
+    return monaco.editor.createModel(value, lang, uri);
+  };
+
   const contentEditors: Array<EditorOptions['editorId']> = ['markup', 'style', 'script', 'tests'];
   if (contentEditors.includes(editorId)) {
     editors.push(editor);
@@ -299,7 +317,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;
@@ -367,24 +402,25 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     });
     if (!scriptEditor) return;
     const ext = scriptLanguage === 'typescript' ? 'tsx' : 'jsx';
-    const createModel = () => {
-      scriptModel = monaco.editor.createModel(
-        scriptEditor.getValue(),
-        scriptLanguage,
-        monaco.Uri.parse('script.' + ext),
-      );
-    };
-    if (scriptModel) {
-      scriptModel.dispose();
-      setTimeout(() => {
-        createModel();
-      }, 300);
-    } else {
-      createModel();
-    }
+    scriptModel = getOrCreateModel(
+      scriptEditor.getValue(),
+      scriptLanguage,
+      monaco.Uri.parse('script.' + ext),
+    );
   };
   createScriptModel();
 
+  const addDeclarations = () => {
+    if (editorId !== 'script') return;
+    const declarations = `
+    declare module 'https://*';
+    declare module 'data:*';
+    declare module './*';
+    `;
+    getOrCreateModel(declarations, undefined, monaco.Uri.parse('file:///declarations.d.ts'));
+  };
+  addDeclarations();
+
   const clearTypes = (allTypes = true) => {
     scriptModel?.dispose();
     if (editorId === 'tests') return;
@@ -404,8 +440,18 @@ 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);
+    const valueToIsert = value ?? editor.getValue();
+    if (monacoMapLanguage(lang) === 'vue') {
+      // avoid race condition of value changing while valor is loading
+      setValue(valueToIsert);
+    } else {
+      setModel(editor, valueToIsert, language);
+    }
+    loadMonacoLanguage(lang).then(() => {
+      if (monacoMapLanguage(lang) === 'vue') {
+        setModel(editor, editor.getValue(), language);
+      }
+    });
   };
 
   const focus = () => editor.focus();

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,

src/livecodes/languages/svelte/lang-svelte-compiler.ts

@@ -20,11 +20,14 @@ import { getCompileResult } from '../../compiler';
     }
     if (!code) return getCompileResult('');
 
+    const isSfc = (mod: string) =>
+      mod.toLowerCase().endsWith('.svelte') || mod.toLowerCase().startsWith('data:text/svelte');
+
     const fullCode = await replaceSFCImports(code, {
       config,
       filename,
       getLanguageByAlias,
-      sfcExtension: '.svelte',
+      isSfc,
       compileSFC: async (
         code: string,
         { config, filename }: { config: Config; filename: string },

src/livecodes/languages/vue/lang-vue-compiler.ts

@@ -37,11 +37,14 @@ import { getLanguageByAlias } from '../utils';
     }
     if (!code.trim()) return;
 
+    const isSfc = (mod: string) =>
+      mod.toLowerCase().endsWith('.vue') || mod.toLowerCase().startsWith('data:text/vue');
+
     code = await replaceSFCImports(code, {
       filename,
       config,
-      sfcExtension: '.vue',
       getLanguageByAlias,
+      isSfc,
       compileSFC: async (code, { filename, config }) => {
         const compiled = (await compileVueSFC(code, { filename, config }))?.js || '';
         importedContent += `\n${filename}\n\n${compiled}\n`;

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 = {

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>

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');