feat(Compilers): add svelte to markup languages

hatemhosny · hatemhosny · commit 16e509129148 · 2025-02-06T21:27:56.000+02:00
diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
@@ -134,6 +134,9 @@ export const replaceImports = (
   });
 };
 
+export const isScriptImport = (mod: string) =>
+  mod.toLowerCase().startsWith('./script') || mod.toLowerCase().startsWith('./component');
+
 export const replaceSFCImports = async (
   code: string,
   {
@@ -165,6 +168,7 @@ export const replaceSFCImports = async (
   const importMap: Record<string, string> = {};
   await Promise.all(
     sfcImports.map(async (mod) => {
+      if (isScriptImport(mod)) return;
       // convert extensionless, relative URL to absolute URL and find in import map
       const urlInMap =
         isExtensionless(mod) &&
diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
@@ -11,7 +11,7 @@ import { markdown } from './markdown';
 import { mdx } from './mdx';
 import { pug } from './pug';
 import { scss, sass } from './scss';
-import { svelte } from './svelte';
+import { svelte, svelteApp } from './svelte';
 import { stylus } from './stylus';
 import { typescript } from './typescript';
 import { vue } from './vue';
@@ -118,6 +118,7 @@ export const languages: LanguageSpecs[] = [
   vue,
   vue2,
   svelte,
+  svelteApp,
   stencil,
   solid,
   solidTsx,
diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -1,18 +1,19 @@
 /* eslint-disable import/no-internal-modules */
-import type { CompilerFunction, Config } from '../../models';
+import type { CompilerFunction, Config, Language } from '../../models';
 import { compileAllBlocks } from '../../compiler/compile-blocks';
 import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
 import { getLanguageCustomSettings, getLanguageByAlias } from '../utils';
 import { getCompileResult } from '../../compiler';
 
 (self as any).createSvelteCompiler = (): CompilerFunction => {
   const MAIN_FILE = '__LiveCodes_App__.svelte';
+  const SECONDARY_FILE = '__LiveCodes_Component__.svelte';
   let importedContent = '';
   let imports: Record<string, string> = {};
 
   const compileSvelteSFC = async (
     code: string,
-    { config, filename }: { config: Config; filename: string },
+    { config, language, filename }: { config: Config; language: Language; filename: string },
   ) => {
     if (filename === MAIN_FILE) {
       importedContent = '';
@@ -29,7 +30,7 @@ import { getCompileResult } from '../../compiler';
         code: string,
         { config, filename }: { config: Config; filename: string },
       ) => {
-        const compiled = (await compileSvelteSFC(code, { config, filename })).code;
+        const compiled = (await compileSvelteSFC(code, { config, language, filename })).code;
         importedContent += `\n${filename}\n\n${compiled}\n`;
         return compiled;
       },
@@ -41,21 +42,30 @@ import { getCompileResult } from '../../compiler';
 
     const { js } = (window as any).svelte.compile(processedCode, {
       css: 'injected',
-      filename: MAIN_FILE,
+      filename,
       ...customSettings,
     });
 
-    if (filename === MAIN_FILE) {
+    if (filename === MAIN_FILE || filename === SECONDARY_FILE) {
       imports = createImportMap(importedContent, config);
     }
 
+    const compiledCode = filename === MAIN_FILE ? getMountCode(js.code) : js.code;
     return {
-      code: filename === MAIN_FILE ? getMountCode(js.code) : js.code,
+      code:
+        language === 'svelte-app' ? `<script type="module">${compiledCode}</script>` : compiledCode,
       info: { importedContent, imports },
     };
   };
 
-  return (code, { config }) => compileSvelteSFC(code, { config, filename: MAIN_FILE });
+  return (code, { config, language }) => {
+    const isMainFile = config.markup.language !== 'svelte-app' || language === 'svelte-app';
+    return compileSvelteSFC(code, {
+      config,
+      language: language as Language,
+      filename: isMainFile ? MAIN_FILE : SECONDARY_FILE,
+    });
+  };
 };
 
 const getMountCode = (code: string) =>
diff --git a/src/livecodes/languages/svelte/lang-svelte.ts b/src/livecodes/languages/svelte/lang-svelte.ts
@@ -41,3 +41,11 @@ export const svelte: LanguageSpecs = {
   editor: 'script',
   editorLanguage: 'html',
 };
+
+export const svelteApp: LanguageSpecs = {
+  ...svelte,
+  name: 'svelte-app',
+  compiler: 'svelte',
+  extensions: ['app.svelte'],
+  editor: 'markup',
+};
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
@@ -7,6 +7,7 @@ import {
   isModuleScript,
   hasDefaultExport,
   replaceImports,
+  isScriptImport,
 } from '../compiler';
 import { cssPresets, getLanguageCompiler, getLanguageExtension } from '../languages';
 import { hasCustomJsxRuntime } from '../languages/typescript';
@@ -191,10 +192,15 @@ export const createResultPage = async ({
   const compiledTests = runTests ? code.tests?.compiled || '' : '';
 
   const scriptCompiler = getLanguageCompiler(code.script.language);
-  const importFromScript =
-    getImports(markup).includes('./script') ||
-    scriptCompiler?.loadAsExternalModule ||
-    (runTests && !forExport && getImports(compiledTests).includes('./script'));
+
+  const scriptImportsInMarkup = getImports(markup).filter(isScriptImport);
+  const scriptImportsInTests =
+    runTests && !forExport ? getImports(compiledTests).filter(isScriptImport) : [];
+  const importFromScript = Boolean(
+    scriptImportsInMarkup.length > 0 ||
+      scriptCompiler?.loadAsExternalModule ||
+      scriptImportsInTests.length > 0,
+  );
 
   const jsxRuntimes: Partial<Record<Language, string>> = {
     jsx: reactRuntime,
@@ -308,16 +314,21 @@ export const createResultPage = async ({
           ...compileInfo.imports,
         };
 
+  const scriptImportKeys = [...scriptImportsInMarkup, ...scriptImportsInTests];
   const scriptImport =
     importFromScript || shouldInsertJsxRuntime
-      ? {
-          './script': toDataUrl(
-            replaceImports(code.script.compiled, config, {
-              importMap: objectFilter(userImports, (_value, key) => key.startsWith('./')),
-              external: reactExternalImports,
-            }),
-          ),
-        }
+      ? scriptImportKeys.reduce(
+          (acc, key) => ({
+            ...acc,
+            [key]: toDataUrl(
+              replaceImports(code.script.compiled, config, {
+                importMap: objectFilter(userImports, (_value, key) => key.startsWith('./')),
+                external: reactExternalImports,
+              }),
+            ),
+          }),
+          {},
+        )
       : {};
 
   // allow config imports to override auto-generated user imports
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
@@ -945,6 +945,8 @@ export type Language =
   | 'vue3'
   | 'vue2'
   | 'svelte'
+  | 'svelte-app'
+  | 'app.svelte'
   | 'stencil'
   | 'stencil.tsx'
   | 'solid'
