fix(Import-maps): fix importing duplicate instances of vue

hatemhosny · hatemhosny · commit ceb28688a21e · 2025-02-08T02:18:00.000+02:00
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
@@ -275,22 +275,27 @@ export const createResultPage = async ({
 
   const styleExtension = getLanguageExtension(code.style.language);
 
-  const reactExternalImports = jsxRuntime === reactRuntime ? 'react,react-dom' : undefined;
+  const externalModules =
+    jsxRuntime === reactRuntime
+      ? 'react,react-dom'
+      : [config.markup.language, config.script.language].find((lang) => lang.startsWith('vue'))
+        ? 'vue'
+        : undefined;
 
   // import maps
   const userImports =
     config.customSettings.mapImports === false
       ? {}
       : {
           ...(hasImports(code.script.compiled)
-            ? createImportMap(code.script.compiled, config, { external: reactExternalImports })
+            ? createImportMap(code.script.compiled, config, { external: externalModules })
             : {}),
           ...(hasImports(code.markup.compiled)
-            ? createImportMap(code.markup.compiled, config, { external: reactExternalImports })
+            ? createImportMap(code.markup.compiled, config, { external: externalModules })
             : {}),
           ...(shouldInsertJsxRuntime ? createImportMap(reactImport + jsxRuntime, config) : {}),
           ...(runTests && !forExport && hasImports(compiledTests)
-            ? createImportMap(compiledTests, config, { external: reactExternalImports })
+            ? createImportMap(compiledTests, config, { external: externalModules })
             : {}),
           ...stylesheetImports.reduce(
             (acc, url) => ({
@@ -323,7 +328,7 @@ export const createResultPage = async ({
             [key]: toDataUrl(
               replaceImports(code.script.compiled, config, {
                 importMap: objectFilter(userImports, (_value, key) => key.startsWith('./')),
-                external: reactExternalImports,
+                external: externalModules,
               }),
             ),
           }),
@@ -345,7 +350,7 @@ export const createResultPage = async ({
 
   // avoid duplicate react instances
   const reactImports = (() => {
-    if (!reactExternalImports) return {};
+    if (!externalModules) return {};
     const reactUrl = modulesService.getModuleUrl('react');
     const reactDomUrl = modulesService.getModuleUrl('react-dom');
     return {
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
@@ -436,9 +436,7 @@ export const vue3CdnUrl = /* @__PURE__ */ getUrl('vue@3');
 
 export const vue2CdnUrl = /* @__PURE__ */ getUrl('vue@2');
 
-export const vueRuntimeUrl = /* @__PURE__ */ getUrl(
-  'vue@3.4.31/dist/vue.runtime.esm-browser.prod.js',
-);
+export const vueRuntimeUrl = /* @__PURE__ */ getUrl('vue@3/dist/vue.runtime.esm-browser.prod.js');
 
 export const vueSDKUrl = /* @__PURE__ */ getUrl(`livecodes@${process.env.SDK_VERSION}/vue.js`);
 
