feat(Compilers): allow SFC to import other SFCs encoded as data URLs

Author: hatemhosny

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/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`;