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
Closes#5085
---------
Co-authored-by: Marcin Wicha <23581770+marcin-wicha@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* feat: optimise svelte-element output code for static tag and static attribute
* Update src/compiler/compile/render_dom/wrappers/Element/index.ts
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update src/runtime/internal/dom.ts
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update src/compiler/compile/render_dom/wrappers/Element/index.ts
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* fix logic
* fix pipeline errors
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Prior to this change, the compiler would generate a template literal that had many purely static
string variables nested within it. This change collapses these static strings into the surrounding
template literal which should result in (minor) size and performance improvements for the SSR
generated code.
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
fixes#7948
- The assignment of the variable "previous_tag" was incorrectly positioned and could cause race condition when used with transitions.
- We need another variable to detect when we are in a transition to remove a node
---------
Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
Closes#7771
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
* fixed double up initialization on svelte:element elements
* updated test and fixed bug
* update other svelte:element test
* removed whitespace
* refactor
* correctly update expected ouput resulting from #7938
* remove .solo
Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
* [fix] static svelte:element not replaced with tag in production mode
* [fix] static svelte:element not replaced with tag in production mode
* add optimization of static <svelte:element> and fix a bug
Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
* warn on assignment to const
* fix formatting and switch to error
* check most local scopes first
* fix logic and add more tests
* more formatting
* Fix broken test
* use find_owner instead
Co-authored-by: tanhauhau <lhtan93@gmail.com>
* call onDestroy when disconnected
* lifecycle hooks and custom elements
- Call onMount in connectedCallback for customElements
- register onMount return values as on_disconnect-callbacks for customElements
- run on_disconnect callbacks in disconnectedCallback
* do not reset on_mount so that it can fire again if reinserted
* simpler isCustomElement & skip extra function call
- pass options.customElement down to mount_component
- remove expensive isCustomElement check
- only call add_render_callback if not customElement
Co-authored-by: Pontus Lundin <pontus.lundin@ica.se>
Yuichiro Yamashita
Simon H
Tan Li Hau
Theodore Brown
esthe
Lyu, Wei-Da
Brad Dougherty
Cory Virok
4eb0da
adiGuba
Lioness100
Jay Harris
Mathias Picker
Ramon Snir
Billy Levin
Ignatius Bagus
Bassam Ismail
Vaibhav Rai
Conduitry
tomoam
Hofer Ivan
Hasan Altan Birler
Luis Confraria
zerdox
Pontus Lundin
J Delaney