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>
This commit is contained in:
Nate Moore
GitHub
parent
f1a7b5ba94
commit
509fad6b9a
6 changed files with 59 additions and 46 deletions
75
examples/kitchen-sink/package-lock.json
generated
75
examples/kitchen-sink/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
4
runtime/svelte.mjs
Normal file
4
runtime/svelte.mjs
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import SvelteRuntime from '../lib/frontend/runtime/svelte.js';
|
||||
Function.prototype(SvelteRuntime);
|
||||
|
||||
export default SvelteRuntime;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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});`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue