Fix Svelte bundled behavior (#151)

* build: add svelte to dynamic component imports

* fix: svelte bundling

* fix: ensure svelte runtime is bundled with build

* fix: svelte runtime in dev mode

* fix: include svelte runtime in imports

Co-authored-by: Duncan Healy <duncan.healy@gmail.com>

3 files changed, 18 insertions, 4 deletions

diff --git a/src/build/bundle.ts b/src/build/bundle.ts
index 49d8b6686..d590e85df 100644
--- a/src/build/bundle.ts
+++ b/src/build/bundle.ts
@@ -20,13 +20,17 @@ import { terser } from 'rollup-plugin-terser';
 const { transformSync } = esbuild;
 const { readFile } = fsPromises;
 
-type DynamicImportMap = Map<'vue' | 'react' | 'react-dom' | 'preact', string>;
+type DynamicImportMap = Map<'vue' | 'react' | 'react-dom' | 'preact' | 'svelte', string>;
 
 /** Add framework runtimes when needed */
 async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins>, resolvePackageUrl: (s: string) => Promise<string>): Promise<DynamicImportMap> {
   const importMap: DynamicImportMap = new Map();
   for (let plugin of plugins) {
     switch (plugin) {
+      case 'svelte': {
+        importMap.set('svelte', await resolvePackageUrl('svelte'));
+        break;
+      }
       case 'vue': {
         importMap.set('vue', await resolvePackageUrl('vue'));
         break;
@@ -58,6 +62,7 @@ function compileExpressionSafe(raw: string): string {
 
 const defaultExtensions: Readonly<Record<string, ValidExtensionPlugins>> = {
   '.jsx': 'react',
+  '.tsx': 'react',
   '.svelte': 'svelte',
   '.vue': 'vue',
 };
@@ -174,6 +179,10 @@ export async function collectDynamicImports(filename: URL, { astroConfig, loggin
         break;
       }
       case 'svelte': {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        imports.add(dynamic.get('svelte')!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        imports.add('/_astro_internal/runtime/svelte.js');
         rel = rel.replace(/\.[^.]+$/, '.svelte.js');
         break;
       }
diff --git a/src/compiler/codegen/index.ts b/src/compiler/codegen/index.ts
index bca24d81d..73c038de1 100644
--- a/src/compiler/codegen/index.ts
+++ b/src/compiler/codegen/index.ts
@@ -128,11 +128,12 @@ interface ComponentInfo {
 const defaultExtensions: Readonly<Record<string, ValidExtensionPlugins>> = {
   '.astro': 'astro',
   '.jsx': 'react',
+  '.tsx': 'react',
   '.vue': 'vue',
   '.svelte': 'svelte',
 };
 
-type DynamicImportMap = Map<'vue' | 'react' | 'react-dom' | 'preact', string>;
+type DynamicImportMap = Map<'vue' | 'react' | 'react-dom' | 'preact' | 'svelte', string>;
 
 interface GetComponentWrapperOptions {
   filename: string;
@@ -212,7 +213,7 @@ function getComponentWrapper(_name: string, { type, plugin, url }: ComponentInfo
             componentUrl: getComponentUrl('.svelte.js'),
             componentExport: 'default',
             frameworkUrls: {
-              'astro/frontend/runtime/svelte': internalImport('runtime/svelte.js'),
+              'svelte-runtime': internalImport('runtime/svelte.js'),
             },
           })})`,
           wrapperImport: `import {__svelte_${kind}} from '${internalImport('render/svelte.js')}';`,
@@ -278,6 +279,10 @@ async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins
         importMap.set('preact', await resolvePackageUrl('preact'));
         break;
       }
+      case 'svelte': {
+        importMap.set('svelte', await resolvePackageUrl('svelte'));
+        break;
+      }
     }
   }
   return importMap;
diff --git a/src/frontend/render/svelte.ts b/src/frontend/render/svelte.ts
index f78591071..13e2b8f58 100644
--- a/src/frontend/render/svelte.ts
+++ b/src/frontend/render/svelte.ts
@@ -11,7 +11,7 @@ const SvelteRenderer: ComponentRenderer<SvelteComponent> = {
     };
   },
   imports: {
-    'astro/frontend/runtime/svelte': ['default: render'],
+    'svelte-runtime': ['default: render'],
   },
   render({ Component, root, props, childrenAsString }) {
     return `render(${root}, ${Component}, ${props}, ${childrenAsString});`;