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>

6 files changed, 59 insertions, 46 deletions

diff --git a/examples/kitchen-sink/package-lock.json b/examples/kitchen-sink/package-lock.json
index 1b50f9ea3..cece2e602 100644
--- a/examples/kitchen-sink/package-lock.json
+++ b/examples/kitchen-sink/package-lock.json
@@ -81,7 +81,7 @@
         "@babel/parser": "^7.13.15",
         "@babel/traverse": "^7.13.15",
         "@snowpack/plugin-sass": "^1.4.0",
-        "@snowpack/plugin-svelte": "^3.6.0",
+        "@snowpack/plugin-svelte": "^3.6.1",
         "@snowpack/plugin-vue": "^2.4.0",
         "@vue/server-renderer": "^3.0.10",
         "acorn": "^7.4.0",
@@ -117,7 +117,7 @@
         "rollup": "^2.43.1",
         "rollup-plugin-terser": "^7.0.2",
         "sass": "^1.32.8",
-        "snowpack": "^3.3.4",
+        "snowpack": "^3.3.7",
         "svelte": "^3.35.0",
         "tiny-glob": "^0.2.8",
         "unified": "^9.2.1",
@@ -350,12 +350,6 @@
             "fastq": "^1.6.0"
           }
         },
-        "@npmcli/ci-detect": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/@npmcli/ci-detect/-/ci-detect-1.3.0.tgz",
-          "integrity": "sha512-oN3y7FAROHhrAt7Rr7PnTSwrHrZVRTS2ZbyxeQwSSYD0ifwM3YNgQqbaRmjcWoPyq77MjchusjJDspbzMmip1Q==",
-          "dev": true
-        },
         "@npmcli/git": {
           "version": "2.0.8",
           "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-2.0.8.tgz",
@@ -419,9 +413,9 @@
           }
         },
         "@npmcli/run-script": {
-          "version": "1.8.4",
-          "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-1.8.4.tgz",
-          "integrity": "sha512-Yd9HXTtF1JGDXZw0+SOn+mWLYS0e7bHBHVC/2C8yqs4wUrs/k8rwBSinD7rfk+3WG/MFGRZKxjyoD34Pch2E/A==",
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-1.8.5.tgz",
+          "integrity": "sha512-NQspusBCpTjNwNRFMtz2C5MxoxyzlbuJ4YEhxAKrIonTiirKDtatsZictx9RgamQIx6+QuHMNmPl0wQdoESs9A==",
           "dev": true,
           "requires": {
             "@npmcli/node-gyp": "^1.0.2",
@@ -444,13 +438,13 @@
           }
         },
         "@snowpack/plugin-svelte": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/@snowpack/plugin-svelte/-/plugin-svelte-3.6.0.tgz",
-          "integrity": "sha512-YHzbkFOX8ahisc/SUk13Wd004KDPZRhIgalfCXCJIyRvgstPuOZ3ejcirYcPlyf1+G4mW69HLN7/y98JPTvAJA==",
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/@snowpack/plugin-svelte/-/plugin-svelte-3.6.1.tgz",
+          "integrity": "sha512-i5E3AurytgdaUx58Ki40x+brjfALowxuM3At7EUw16QQAQ5tB2HY12enO0+BlWggLOdmNO5hR+pccd3soErdkQ==",
           "dev": true,
           "requires": {
             "rollup-plugin-svelte": "^7.0.0",
-            "svelte-hmr": "^0.12.1",
+            "svelte-hmr": "^0.13.2",
             "svelte-preprocess": "^4.6.0"
           }
         },
@@ -1029,9 +1023,9 @@
           "dev": true
         },
         "balanced-match": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+          "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
         },
         "bcrypt-pbkdf": {
           "version": "1.0.2",
@@ -2593,9 +2587,9 @@
           "dev": true
         },
         "is-core-module": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
-          "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
+          "integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
           "requires": {
             "has": "^1.0.3"
           }
@@ -3268,9 +3262,9 @@
           "dev": true
         },
         "npm-bundled": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
-          "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
+          "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
           "dev": true,
           "requires": {
             "npm-normalize-package-bin": "^1.0.1"
@@ -3369,12 +3363,11 @@
           }
         },
         "npm-registry-fetch": {
-          "version": "9.0.0",
-          "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-9.0.0.tgz",
-          "integrity": "sha512-PuFYYtnQ8IyVl6ib9d3PepeehcUeHN9IO5N/iCRhyg9tStQcqGQBRVHmfmMWPDERU3KwZoHFvbJ4FPXPspvzbA==",
+          "version": "10.1.1",
+          "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-10.1.1.tgz",
+          "integrity": "sha512-F6a3l+ffCQ7hvvN16YG5bpm1rPZntCg66PLHDQ1apWJPOCUVHoKnL2w5fqEaTVhp42dmossTyXeR7hTGirfXrg==",
           "dev": true,
           "requires": {
-            "@npmcli/ci-detect": "^1.0.0",
             "lru-cache": "^6.0.0",
             "make-fetch-happen": "^8.0.9",
             "minipass": "^3.1.3",
@@ -3506,9 +3499,9 @@
           }
         },
         "pacote": {
-          "version": "11.3.1",
-          "resolved": "https://registry.npmjs.org/pacote/-/pacote-11.3.1.tgz",
-          "integrity": "sha512-TymtwoAG12cczsJIrwI/euOQKtjrQHlD0k0oyt9QSmZGpqa+KdlxKdWR/YUjYizkixaVyztxt/Wsfo8bL3A6Fg==",
+          "version": "11.3.3",
+          "resolved": "https://registry.npmjs.org/pacote/-/pacote-11.3.3.tgz",
+          "integrity": "sha512-GQxBX+UcVZrrJRYMK2HoG+gPeSUX/rQhnbPkkGrCYa4n2F/bgClFPaMm0nsdnYrxnmUy85uMHoFXZ0jTD0drew==",
           "dev": true,
           "requires": {
             "@npmcli/git": "^2.0.1",
@@ -3524,7 +3517,7 @@
             "npm-package-arg": "^8.0.1",
             "npm-packlist": "^2.1.4",
             "npm-pick-manifest": "^6.0.0",
-            "npm-registry-fetch": "^9.0.0",
+            "npm-registry-fetch": "^10.0.0",
             "promise-retry": "^2.0.1",
             "read-package-json-fast": "^2.0.1",
             "rimraf": "^3.0.2",
@@ -4246,9 +4239,9 @@
           "dev": true
         },
         "snowpack": {
-          "version": "3.3.3",
-          "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.3.3.tgz",
-          "integrity": "sha512-ASPyveGfzAbhyp1k5XmLtZoS0J6PpY8jArGm6JLM8ztuB4AWA2z1Qg/QiTOIguOhZN0QKKUe6slkYfSWteIzFA==",
+          "version": "3.3.7",
+          "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.3.7.tgz",
+          "integrity": "sha512-7I5wznB6wGKq2fi6pxU3UZLEe3R0a5IChO8x+w0iYT7/oERubkbzc/SXTMXm6lVvtYMs2W1AkE+0VHP1KI0IEw==",
           "dev": true,
           "requires": {
             "cli-spinners": "^2.5.0",
@@ -4504,15 +4497,15 @@
           "dev": true
         },
         "svelte-hmr": {
-          "version": "0.12.9",
-          "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.12.9.tgz",
-          "integrity": "sha512-SGE7Odznj4dqZtUVIWcoPCvZ9gHImxVIIjrz+O3DDSi0j4OaSLim6MRF4UdhlBKeW3glSRc+tXNSKYvM5x+Dyw==",
+          "version": "0.13.4",
+          "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.13.4.tgz",
+          "integrity": "sha512-3DAZKaYCppOJmJMJlRNmerTUAzcGWYcqOemFr6JdtNYng8xsTs3lL9iEfeqma2RxM94qZLdtMsSG4SGtYfxLPw==",
           "dev": true
         },
         "svelte-preprocess": {
-          "version": "4.7.0",
-          "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.7.0.tgz",
-          "integrity": "sha512-iNrY4YGqi0LD2e6oT9YbdSzOKntxk8gmzfqso1z/lUJOZh4o6fyIqkirmiZ8/dDJFqtIE1spVgDFWgkfhLEYlw==",
+          "version": "4.7.2",
+          "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.7.2.tgz",
+          "integrity": "sha512-EToG+08rEsA33btv+C5g2qnRArwpTc5AoU0QBB3ZEkYagxAb2yPNsy0qsmtvbJOTBMy6o3oyijDdl3DMpMvpEg==",
           "dev": true,
           "requires": {
             "@types/pug": "^2.0.4",
diff --git a/package.json b/package.json
index b2c647438..9186c773d 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     ".": "./astro.mjs",
     "./snowpack-plugin": "./snowpack-plugin.cjs",
     "./parser": "./parser.cjs",
-    "./components/*.astro": "./components/*.astro"
+    "./components/*.astro": "./components/*.astro",
+    "./runtime/svelte": "./runtime/svelte.js"
   },
   "bin": {
     "astro": "astro.mjs"
@@ -16,6 +17,7 @@
   "files": [
     "components",
     "lib",
+    "runtime",
     "astro-prism",
     "snowpack-plugin.cjs",
     "astro.mjs"
diff --git a/runtime/svelte.mjs b/runtime/svelte.mjs
new file mode 100644
index 000000000..f23e8eb1d
--- /dev/null
+++ b/runtime/svelte.mjs
@@ -0,0 +1,4 @@
+import SvelteRuntime from '../lib/frontend/runtime/svelte.js';
+Function.prototype(SvelteRuntime);
+
+export default SvelteRuntime;
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});`;