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.
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
Deals with the no-redundant-roles part of #8529
There was an erroneous check which compares the element name with the current role. This fix brings no-redundant-roles closer to the original eslint-jsx implementation
#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#5085
---------
Co-authored-by: Marcin Wicha <23581770+marcin-wicha@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Fixes#8082, where svelte-ignore somehow does not pick up the reactive-component warning.
The issue on this problem is that the map_children function suppresses warnings and errors while traversing AST nodes as src/compiler/compile/nodes classes. However, the reactive-component warning is called in src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts, and its warnings are not suppressed in map_children. Thus, we need to extract ignores and suppress here separately.
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#7964
currently for a case where the parent type is ArrayPattern code needs to check if the elements are of direct type MemberExpression or Identifier, in the case of MemberExpression there will be an Identifier check for the Object of the MemberExpression.
---------
Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
Related to #5967. Closes#7874
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
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>
* add security warning for anchor element (rel attribute)
* manage more case for security warnings on anchor (aplocks, false positive ...)
* remove noopener checks as noreferrer imples noopener
Co-authored-by: tanhauhau <lhtan93@gmail.com>
* important modifier for style directive
* docs
* Exclude third param if false
third param for set_style is optional
* Remove unused test
Runtime test doesn't work because of weird behaviour of computed style
the puppeteer test should cover it
* remove unnecessary test
Co-authored-by: tanhauhau <lhtan93@gmail.com>
* [feature] add util module to check element is interactive element
* [feature] add util module to check role is interactive role
* [feature] add a11y checker for no-nointeractive-tabindex
* [chore] add test for no-nointeractive-tabindex
* [chore] fix tabindex-no-positive test div -> button
* [refactor] bundle up two filter into one
* Refactor: export a11y-no-nointeractive-tabindex warning from compiler_warning
* slight refactor to use existing utils
Co-authored-by: tanhauhau <lhtan93@gmail.com>
* Fix 6860: Warn user when binding rest operator
* move the binding validation to Binding node
* update test
Co-authored-by: vaibhav rai <vaibhavrai@vaibhavs-MacBook-Pro.local>
* add more test case, supporting deep destructuring and array destructuring
Co-authored-by: vaibhav rai <vaibhavrai@vaibhavs-MacBook-Pro.local>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Yuichiro Yamashita
Simon Holthausen
Simon H
Vaibhav Rai
Christoph Rüßler
Karl Erik Hofseth
Nguyen Tran
xxkl1
Tim McCabe
Dave Lunny
Tan Li Hau
Roy Choo
Cory Virok
Vaibhav
Carlos Ivanchuk
Tim McCabe
Ben McCann
Ming07
wackbyte
Bert B
Torsten Dittmann
Dominik G
Josh Soref
Billy Levin
Joffrey LEVEUGLE
gtmnayan
metonym
MCMXC
tanhauhau
Shinobu Hayashi