closes #7425
Uses a new ensure_array_like function to use Array.from in case the variable doesn't have a length property ('length' in 'some string' fails, therefore obj?.length). This ensures other places can stay unmodified. Using for (const x of y) constructs would require large changes across the each block code where it's uncertain that it would work for all cases since the array length is needed in various places.
`classList.toggle(..., flag)` has been a part of the DOM standard forever,
so better use it instead of possibly causing browser deopts by using dynamic attribute access.
The `!!` is required because an `undefined` flag means flipping the current state.
---------
Co-authored-by: Dominik G <dominik.goepel@gmx.de>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
that way they are invisible to assistive technology and can't be interacted with, which makes sense since the element is already "dead" and only transitioning out at this point
closes #8445
- remove esm bundle step
- introduce generated version.js because we can no longer use replace because we don't bundle esm
- remove register hook, cjs compiler output and cjs runtime
- keep umd compiler version for prettier/eslint/browser but without sourcemaps
- move devdependencies to dependencies where necessary
- various cleanup
---------
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
- shard runtime tests for better use of Vite's test parallelization
- merge custom element and other browser tests to run in one test suite and use esbuild in it
- on some setups only generate code output when test fails
Also swap out the require hook hacks with a less-hacky-but-still-somewhat-hacky loader for the Svelte files
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
This changes the inserted style element for transitions to initially include the string '/* empty */'. This allows you to work around requiring unsafe-inline CSP discussed in #6662 by adding a hash to your CSP:
'sha256-9OlNO0DNEeaVzHL4RZwCLsBHA8WBQ8toBp/4F5XV2nc='
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Fixes #8284.
The problem is that the <slot> element is treated as an actual element, and for this purpose, we have to treat them as if they don't exist. More specifically, we treat all slot fallback children nodes on the same level as the slot's non-slot siblings.
Fixes #4880.
Fixes #6737.
This will be a breaking change for anyone who uses the StartStopNotifier
type in their / implements custom stores.
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
fixes #7555
breaking change: derived now throws an error if you pass falsy values
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
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
