mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-29 16:36:44 +01:00
d083f8a3f2
This is an overhaul of custom elements in Svelte. Instead of compiling to a custom element class, the Svelte component class is mostly preserved as-is. Instead a wrapper is introduced which wraps a Svelte component constructor and returns a HTML element constructor. This has a couple of advantages: - component can be used both as a custom element as well as a regular component. This allows creating one wrapper custom element and using regular Svelte components inside. Fixes #3594, fixes #3128, fixes #4274, fixes #5486, fixes #3422, fixes #2969, helps with https://github.com/sveltejs/kit/issues/4502 - all components are compiled with injected styles (inlined through Javascript), fixes #4274 - the wrapper instantiates the component in `connectedCallback` and disconnects it in `disconnectedCallback` (but only after one tick, because this could be a element move). Mount/destroy works as expected inside, fixes #5989, fixes #8191 - the wrapper forwards `addEventListener` calls to `component.$on`, which allows to listen to custom events, fixes #3119, closes #4142 - some things are hard to auto-configure, like attribute hyphen preferences or whether or not setting a property should reflect back to the attribute. This is why `<svelte:options customElement={..}>` can also take an object to modify such aspects. This option allows to specify whether setting a prop should be reflected back to the attribute (default `false`), what to use when converting the property to the attribute value and vice versa (through `type`, default `String`, or when `export let prop = false` then `Boolean`), and what the corresponding attribute for the property is (`attribute`, default lowercased prop name). These options are heavily inspired by lit: https://lit.dev/docs/components/properties. Closes #7638, fixes #5705 - adds a `shadowdom` option to control whether or not encapsulate the custom element. Closes #4330, closes #1748 Breaking changes: - Wrapped Svelte component now stays as a regular Svelte component (invokeing it like before with `new Component({ target: ..})` won't create a custom element). Its custom element constructor is now a static property named `element` on the class (`Component.element`) and should be regularly invoked through setting it in the html. - The timing of mount/destroy/update is different. Mount/destroy/updating a prop all happen after a tick, so `shadowRoot.innerHTML` won't immediately reflect the change (Lit does this too). If you rely on it, you need to await a promise
151 lines
3.6 KiB
JavaScript
151 lines
3.6 KiB
JavaScript
import fs from 'node:fs';
|
|
import { createRequire } from 'node:module';
|
|
import replace from '@rollup/plugin-replace';
|
|
import resolve from '@rollup/plugin-node-resolve';
|
|
import commonjs from '@rollup/plugin-commonjs';
|
|
import json from '@rollup/plugin-json';
|
|
import sucrase from '@rollup/plugin-sucrase';
|
|
import typescript from '@rollup/plugin-typescript';
|
|
|
|
const require = createRequire(import.meta.url);
|
|
const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
|
|
|
|
const is_publish = !!process.env.PUBLISH;
|
|
|
|
const ts_plugin = is_publish
|
|
? typescript({
|
|
typescript: require('typescript'),
|
|
paths: {
|
|
'svelte/*': ['./src/runtime/*']
|
|
}
|
|
})
|
|
: sucrase({
|
|
transforms: ['typescript']
|
|
});
|
|
|
|
fs.writeFileSync(
|
|
`./compiler.d.ts`,
|
|
`export { compile, parse, preprocess, walk, VERSION } from './types/compiler/index.js';`
|
|
);
|
|
|
|
const runtime_entrypoints = Object.fromEntries(
|
|
fs
|
|
.readdirSync('src/runtime', { withFileTypes: true })
|
|
.filter((dirent) => dirent.isDirectory())
|
|
.map((dirent) => [dirent.name, `src/runtime/${dirent.name}/index.ts`])
|
|
);
|
|
|
|
/**
|
|
* @type {import("rollup").RollupOptions[]}
|
|
*/
|
|
export default [
|
|
{
|
|
input: {
|
|
...runtime_entrypoints,
|
|
index: 'src/runtime/index.ts',
|
|
ssr: 'src/runtime/ssr.ts'
|
|
},
|
|
output: ['es', 'cjs'].map(
|
|
/** @returns {import('rollup').OutputOptions} */
|
|
(format) => {
|
|
const ext = format === 'es' ? 'mjs' : 'js';
|
|
return {
|
|
entryFileNames: (entry) => {
|
|
if (entry.isEntry) {
|
|
if (entry.name === 'index') return `index.${ext}`;
|
|
else if (entry.name === 'ssr') return `ssr.${ext}`;
|
|
|
|
return `${entry.name}/index.${ext}`;
|
|
}
|
|
},
|
|
chunkFileNames: `internal/[name]-[hash].${ext}`,
|
|
format,
|
|
minifyInternalExports: false,
|
|
dir: '.',
|
|
};
|
|
}
|
|
),
|
|
plugins: [
|
|
replace({
|
|
preventAssignment: true,
|
|
values: {
|
|
__VERSION__: pkg.version,
|
|
},
|
|
}),
|
|
ts_plugin,
|
|
{
|
|
writeBundle(options, bundle) {
|
|
if (options.format !== 'es') return;
|
|
|
|
for (const entry of Object.values(bundle)) {
|
|
const dir = entry.name;
|
|
if (!entry.isEntry || !runtime_entrypoints[dir]) continue;
|
|
|
|
if (dir === 'internal') {
|
|
const mod = bundle[`internal/index.mjs`];
|
|
if (mod) {
|
|
fs.writeFileSync(
|
|
'src/compiler/compile/internal_exports.ts',
|
|
`// This file is automatically generated\n` +
|
|
`export default new Set(${JSON.stringify(mod.exports)});`
|
|
);
|
|
}
|
|
}
|
|
|
|
fs.writeFileSync(
|
|
`${dir}/index.d.ts`,
|
|
`export * from '../types/runtime/${dir}/index.js';`
|
|
);
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
/* compiler.js */
|
|
{
|
|
input: 'src/compiler/index.ts',
|
|
plugins: [
|
|
replace({
|
|
preventAssignment: true,
|
|
values: {
|
|
__VERSION__: pkg.version,
|
|
'process.env.NODE_DEBUG': false // appears inside the util package
|
|
},
|
|
}),
|
|
{
|
|
resolveId(id) {
|
|
// util is a built-in module in Node.js, but we want a self-contained compiler bundle
|
|
// that also works in the browser, so we load its polyfill instead
|
|
if (id === 'util') {
|
|
return require.resolve('./node_modules/util'); // just 'utils' would resolve this to the built-in module
|
|
}
|
|
},
|
|
},
|
|
resolve(),
|
|
commonjs({
|
|
include: ['node_modules/**']
|
|
}),
|
|
json(),
|
|
ts_plugin
|
|
],
|
|
output: [
|
|
{
|
|
file: 'compiler.js',
|
|
format: is_publish ? 'umd' : 'cjs',
|
|
name: 'svelte',
|
|
sourcemap: true,
|
|
},
|
|
{
|
|
file: 'compiler.mjs',
|
|
format: 'esm',
|
|
name: 'svelte',
|
|
sourcemap: true,
|
|
}
|
|
],
|
|
external: is_publish
|
|
? []
|
|
: (id) =>
|
|
id === 'acorn' || id === 'magic-string' || id.startsWith('css-tree')
|
|
}
|
|
];
|