michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix Svelte bundled behavior (#151)

Browse source 
* 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>
This commit is contained in:
Nate Moore 2021-04-30 09:35:18 -05:00 committed by GitHub
parent f1a7b5ba94
commit 509fad6b9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 59 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
examples/kitchen-sink/package-lock.json generated
View file

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

4
package.json
View file

@ -8,7 +8,8 @@
".": "./astro.mjs", ".": "./astro.mjs",
"./snowpack-plugin": "./snowpack-plugin.cjs", "./snowpack-plugin": "./snowpack-plugin.cjs",
"./parser": "./parser.cjs", "./parser": "./parser.cjs",
"./components/*.astro": "./components/*.astro" "./components/*.astro": "./components/*.astro",
"./runtime/svelte": "./runtime/svelte.js"
}, },
"bin": { "bin": {
"astro": "astro.mjs" "astro": "astro.mjs"
@ -16,6 +17,7 @@
"files": [ "files": [
"components", "components",
"lib", "lib",
"runtime",
"astro-prism", "astro-prism",
"snowpack-plugin.cjs", "snowpack-plugin.cjs",
"astro.mjs" "astro.mjs"

4
runtime/svelte.mjs Normal file
View file

@ -0,0 +1,4 @@
import SvelteRuntime from '../lib/frontend/runtime/svelte.js';
Function.prototype(SvelteRuntime);
export default SvelteRuntime;

11
src/build/bundle.ts
View file

@ -20,13 +20,17 @@ import { terser } from 'rollup-plugin-terser';
const { transformSync } = esbuild; const { transformSync } = esbuild;
const { readFile } = fsPromises; 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 */ /** Add framework runtimes when needed */
async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins>, resolvePackageUrl: (s: string) => Promise<string>): Promise<DynamicImportMap> { async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins>, resolvePackageUrl: (s: string) => Promise<string>): Promise<DynamicImportMap> {
const importMap: DynamicImportMap = new Map(); const importMap: DynamicImportMap = new Map();
for (let plugin of plugins) { for (let plugin of plugins) {
switch (plugin) { switch (plugin) {
case 'svelte': {
importMap.set('svelte', await resolvePackageUrl('svelte'));
break;
}
case 'vue': { case 'vue': {
importMap.set('vue', await resolvePackageUrl('vue')); importMap.set('vue', await resolvePackageUrl('vue'));
break; break;
@ -58,6 +62,7 @@ function compileExpressionSafe(raw: string): string {
const defaultExtensions: Readonly<Record<string, ValidExtensionPlugins>> = { const defaultExtensions: Readonly<Record<string, ValidExtensionPlugins>> = {
'.jsx': 'react', '.jsx': 'react',
'.tsx': 'react',
'.svelte': 'svelte', '.svelte': 'svelte',
'.vue': 'vue', '.vue': 'vue',
}; };
@ -174,6 +179,10 @@ export async function collectDynamicImports(filename: URL, { astroConfig, loggin
break; break;
} }
case 'svelte': { 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'); rel = rel.replace(/\.[^.]+$/, '.svelte.js');
break; break;
} }

9
src/compiler/codegen/index.ts
View file

@ -128,11 +128,12 @@ interface ComponentInfo {
const defaultExtensions: Readonly<Record<string, ValidExtensionPlugins>> = { const defaultExtensions: Readonly<Record<string, ValidExtensionPlugins>> = {
'.astro': 'astro', '.astro': 'astro',
'.jsx': 'react', '.jsx': 'react',
'.tsx': 'react',
'.vue': 'vue', '.vue': 'vue',
'.svelte': 'svelte', '.svelte': 'svelte',
}; };
type DynamicImportMap = Map<'vue' | 'react' | 'react-dom' | 'preact', string>; type DynamicImportMap = Map<'vue' | 'react' | 'react-dom' | 'preact' | 'svelte', string>;
interface GetComponentWrapperOptions { interface GetComponentWrapperOptions {
filename: string; filename: string;
@ -212,7 +213,7 @@ function getComponentWrapper(_name: string, { type, plugin, url }: ComponentInfo
componentUrl: getComponentUrl('.svelte.js'), componentUrl: getComponentUrl('.svelte.js'),
componentExport: 'default', componentExport: 'default',
frameworkUrls: { frameworkUrls: {
'astro/frontend/runtime/svelte': internalImport('runtime/svelte.js'), 'svelte-runtime': internalImport('runtime/svelte.js'),
}, },
})})`, })})`,
wrapperImport: `import {__svelte_${kind}} from '${internalImport('render/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')); importMap.set('preact', await resolvePackageUrl('preact'));
break; break;
} }
case 'svelte': {
importMap.set('svelte', await resolvePackageUrl('svelte'));
break;
}
} }
} }
return importMap; return importMap;

2
src/frontend/render/svelte.ts
View file

@ -11,7 +11,7 @@ const SvelteRenderer: ComponentRenderer<SvelteComponent> = {
}; };
}, },
imports: { imports: {
'astro/frontend/runtime/svelte': ['default: render'], 'svelte-runtime': ['default: render'],
}, },
render({ Component, root, props, childrenAsString }) { render({ Component, root, props, childrenAsString }) {
return `render(${root}, ${Component}, ${props}, ${childrenAsString});`; return `render(${root}, ${Component}, ${props}, ${childrenAsString});`;