feat(Templates): update vue and svelte templates to use multiple SFCs

hatemhosny · hatemhosny · commit 3c42c610f41b · 2025-02-25T02:04:25.000+02:00
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
@@ -1,5 +1,5 @@
 import { getLanguageByAlias, getLanguageEditorId } from '../languages';
-import type { Editor, Config, ToolsPaneStatus, EditorId, Tool } from '../models';
+import type { Editor, Config, ToolsPaneStatus, EditorId, Tool, Language } from '../models';
 import { removeDuplicates } from '../utils';
 import { defaultConfig } from './default-config';
 
@@ -52,11 +52,22 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
       is(x.hiddenContent, 'string') ||
       is(x.hiddenContentUrl, 'string'));
 
+  const fixSfcLanguage = (lang: Language, editorId: EditorId) =>
+    editorId !== 'markup'
+      ? lang
+      : lang === 'svelte'
+        ? 'svelte-app'
+        : lang === 'vue'
+          ? 'vue-app'
+          : lang;
+
   const validateEditorProps = (x: Editor, editorId: EditorId): Editor => ({
-    language:
-      getLanguageEditorId(x.language) === editorId
+    language: fixSfcLanguage(
+      getLanguageEditorId(fixSfcLanguage(x.language, editorId)) === editorId
         ? getLanguageByAlias(x.language) || defaultConfig[editorId].language
         : defaultConfig[editorId].language,
+      editorId,
+    ),
     ...(is(x.title, 'string') ? { title: x.title } : {}),
     ...(is(x.content, 'string') ? { content: x.content } : {}),
     ...(is(x.contentUrl, 'string') ? { contentUrl: x.contentUrl } : {}),
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -950,11 +950,19 @@ const getResultPage = async ({
     toolsPane?.tests?.showResults({ results: [] });
   }
 
-  const markupCompileResult = await compiler.compile(markupContent, markupLanguage, config, {});
+  const forceCompileSFC =
+    (config.markup.language === config.script.language + '-app' ||
+      getCache().markup.language === getCache().script.language + '-app') &&
+    (config.markup.language !== getCache().markup.language ||
+      config.script.language !== getCache().script.language);
+
+  const markupCompileResult = await compiler.compile(markupContent, markupLanguage, config, {
+    forceCompile: forceCompileSFC,
+  });
   let compiledMarkup = markupCompileResult.code;
 
   const scriptCompileResult = await compiler.compile(scriptContent, scriptLanguage, config, {
-    forceCompile: forceCompileStyles,
+    forceCompile: forceCompileStyles || forceCompileSFC,
     blockly:
       scriptLanguage === 'blockly'
         ? ((await customEditors.blockly?.getContent({
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
@@ -81,7 +81,9 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       ? 'coffeescript'
       : ['rescript', 'reason', 'ocaml'].includes(language)
         ? 'csharp'
-        : mapLanguage(language);
+        : ['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;
diff --git a/src/livecodes/languages/malina/lang-malina.ts b/src/livecodes/languages/malina/lang-malina.ts
@@ -20,5 +20,4 @@ export const malina: LanguageSpecs = {
   },
   extensions: ['xht'],
   editor: 'script',
-  editorLanguage: 'html',
 };
diff --git a/src/livecodes/languages/riot/lang-riot.ts b/src/livecodes/languages/riot/lang-riot.ts
@@ -23,5 +23,4 @@ export const riot: LanguageSpecs = {
   },
   extensions: ['riot', 'riotjs'],
   editor: 'script',
-  editorLanguage: 'html',
 };
diff --git a/src/livecodes/languages/svelte/lang-svelte.ts b/src/livecodes/languages/svelte/lang-svelte.ts
@@ -39,7 +39,6 @@ export const svelte: LanguageSpecs = {
   },
   extensions: ['svelte'],
   editor: 'script',
-  editorLanguage: 'html',
 };
 
 export const svelteApp: LanguageSpecs = {
@@ -48,4 +47,5 @@ export const svelteApp: LanguageSpecs = {
   compiler: 'svelte',
   extensions: ['app.svelte'],
   editor: 'markup',
+  editorLanguage: 'html',
 };
diff --git a/src/livecodes/languages/vue/lang-vue.ts b/src/livecodes/languages/vue/lang-vue.ts
@@ -25,7 +25,6 @@ export const vue: LanguageSpecs = {
   },
   extensions: ['vue', 'vue3'],
   editor: 'script',
-  editorLanguage: 'html',
 };
 
 export const vueApp: LanguageSpecs = {
@@ -34,4 +33,5 @@ export const vueApp: LanguageSpecs = {
   compiler: 'vue',
   extensions: ['app.vue'],
   editor: 'markup',
+  editorLanguage: 'html',
 };
diff --git a/src/livecodes/templates/starter/svelte-starter.ts b/src/livecodes/templates/starter/svelte-starter.ts
@@ -6,8 +6,14 @@ export const svelteStarter: Template = {
   thumbnail: 'assets/templates/svelte.svg',
   activeEditor: 'script',
   markup: {
-    language: 'html',
-    content: '',
+    language: 'svelte',
+    content: `
+<script>
+import Counter from "./Component.svelte";
+</script>
+
+<Counter title="Svelte" />
+`.trimStart(),
   },
   style: {
     language: 'css',
@@ -17,7 +23,7 @@ export const svelteStarter: Template = {
     language: 'svelte',
     content: `
 <script>
-  let title = "Svelte";
+  let { title = "World" } = $props();
   let counter = $state(0);
   function increment() {
     counter += 1;
diff --git a/src/livecodes/templates/starter/vue-sfc-starter.ts b/src/livecodes/templates/starter/vue-sfc-starter.ts
@@ -6,8 +6,16 @@ export const vueSfcStarter: Template = {
   thumbnail: 'assets/templates/vue.svg',
   activeEditor: 'script',
   markup: {
-    language: 'html',
-    content: '',
+    language: 'vue',
+    content: `
+<script setup lang="tsx">
+import Counter from './Component.vue';
+</script>
+
+<template>
+  <Counter name="Vue" />
+</template>
+`.trimStart(),
   },
   style: {
     language: 'css',
@@ -19,19 +27,21 @@ export const vueSfcStarter: Template = {
 <script setup lang="tsx">
   import { ref } from 'vue';
 
-  const name = 'Vue';
+  const props = defineProps({
+    name: String
+  })
   const count = ref(0);
   const align = 'center';
 
   // define inline component
   function Greeting(props: {name: string}) {
-    return <h1>Hello, { props.name }!</h1>
+    return <h1>Hello, { props.name || 'World' }!</h1>
   }
 </script>
 
 <template>
   <div class="container">
-    <Greeting :name="name" />
+    <Greeting :name="props.name" />
     <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/vue.svg" />
     <p>You clicked {{ count }} times.</p>
     <button @click="count++">Click me</button>
