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, resolvePackageUrl: (s: string) => Promise): Promise { 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> = { '.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> = { '.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 = { }; }, imports: { - 'astro/frontend/runtime/svelte': ['default: render'], + 'svelte-runtime': ['default: render'], }, render({ Component, root, props, childrenAsString }) { return `render(${root}, ${Component}, ${props}, ${childrenAsString});`;