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
Related: #7341, #7226
For purely static HTML, instead of walking the node tree and claiming every node/text etc, hydration now uses the same innerHTML optimization technique for hydration compared to normal create. It uses a new data-svelte-h attribute which is added upon server side rendering containing a hash (computed at build time), and then comparing that hash in the client to ensure it's the same node. If the hash is the same, the whole child content is expected to be the same. If the hash is different, the whole child content is replaced with innerHTML.
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Null and undefined `value` bindings should always be set to an empty string. This allows native browser validation of `required` fields to work as expected with placeholder options.
Placeholder options bound to null are necessary in forms where the field is conditionally required, and the bound value is posted to an API endpoint which requires it to be a nullable number or object rather than a string.
fixes#8312
---------
Co-authored-by: Ivan Hofer <ivan.hofer@outlook.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Ignatius Bagus <ignatius.mbs@gmail.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
bump to rollup 3. Includes reworking the "treat those imports as external" a bit so that Rollup builds correctly but doesn't bundle some of the (now relative) imports
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
It used the Subscriber type to represent the set callback and the
Unsubscriber to represent the cleanup callback. But the names made
it confusing what it was for.
Implements ResizeObserver bindings: #5524 (comment)
Continuation of: #5963
Related to #7583
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
fixes#6752
---------
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com>
Microdata are a strange set of attributes which are ONLY defined in markup, and have no relationship to the underlying Document Object Model node. As such programmatically defining an element and setting a property on it with a given Microdata attribute will not work:
https://codepen.io/iambrosius/full/jOvXBBG
One can read more about microdata here: https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata
The fix is to remove itemscope being a boolean attribute, because that opts into a transformation as a DOM property, which is wrong.
Fixes#8417
The issue is that unpack_destructuring in each blocks, await blocks, and @const tags were making computed_props independently. This causes computed_props_# to conflict when each blocks were used with @const tags, or await blocks and @const tags, or consecutive @const tags together. Therefore, one solution is to use component.get_unique_name to, well, make unique names and never get conflicts.
Closes#6969
As discussed there, container query support is quite useful to add to Svelte as it is now broadly available with Firefox releasing support imminently w/ FF v110 this upcoming week (~Feb 14th). Chrome has had support since ~Aug '22. The central issue is that css-tree which is a dependency for CSS AST parsing is significantly lagging behind on adding more recent features such as container query support. Ample time has been given to the maintainer to update css-tree and I do have every confidence that in time css-tree will receive a new major version with all sorts of modern CSS syntax supported including container queries. This PR provides an interim solution for what Svelte needs to support container queries now.
It is not possible to use typescript when using `target: document`
during component initialization, because target can only be of type
Element or ShadowRoot. This means that it is not possible to hydrate
the entire document when managing the <html> element as a Svelte
component.
This commit fixes this by allowing documents to be targets.
- split logic up into "is this a contenteditable element" and depending on the outcome use either .wholeText or .data to check if an update is necessary
- add to puppeteer because jsdom does not support contenteditable
- one test is skipped it because it fails right now but helps test #5018
---------
Co-authored-by: suxin2017 <1107178482@qq.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
#8167 introduced the strict version of it - until this is configurable, we should use the relaxed version instead, since many a11y docs actually advise using ul/ol etc
Closes#3310
---------
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Closes#6050
---------
Co-authored-by: Bob Fanger <b.fanger@wearetriple.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
The issue
1. When the block.i (intro) is called it registers a callback (via add_render_callback)
2. Then the block.o (outro) is called and start the outro and adds a callback to detach on outroend
3. The render callback from the intro is executed, starts the intro and cancels the outro animation
This causes components that should've been destroyed to stay on the page.
The fix in this PR: Inside the intro render callback it checks if it is still current and if it isn't (because an outro was triggered) it won't start the intro animation.
fixes#6152fixes#6812
Resolves a second unintended regression introduced in #6170.
Follow-up to #8331, this time addressing the root issue so the correct select option won't be deselected in the first place when the initial bound value is undefined.
Fixes#8361
Karl Erik Hofseth
Nguyen Tran
Robin Munn
Ramon Snir
Simon H
Tan Li Hau
Rafi Strauss
Chris Kerr
Theodore Brown
Tim McCabe
Hofer Ivan
Ben McCann
Pat Cavit
xxkl1
gtmnayan
Cymaera
Michael Leahy
Yuichiro Yamashita
Filip Ambrosius
esthe
Snaipe
Dave Lunny
Henrik Giesel
Bob Fanger
Jon Rouleau
Lyu, Wei-Da
Conduitry