* start refactoring client transform visitor code
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* tweak
* painful
* more
* simplify
* more
* more
* more
* more
* more
* tidy up
* changeset
* fix: allow nested `<dt>`/`<dd>` elements if they are within a `<dl>` element
This introduces a resets array, which means descendants that are forbidden are allowed again, if an element within the resets array is encountered between the tag and the forbidden descendant
fixes#12676
* better name
* chore: perf tweaks for actions/styles/classes
- check if we really need to add/remove the class (calling `includes` first is cheaper than always setting/removing it)
- check if we really need to update a style (calling `getPropertyValue/setProperty` is expensive)
- check if we should call the action's update function (this is not only a perf tweak but also a correctness fix)
closes#12652
* changeset
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* start moving visitors into separate modules
* remove unused code
* more
* more
* tidy up
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* alphabetize
* more
* fix
* more
* more
* consolidate
* more
* more
* more
* more
* more
* more
* more
* tweak
* more
* more
* more
* more
* more
* more
* more
* more
* more
* more
* jfc what are we doing here
* more
* bizarre
* more
* more
* more
* more
* more
* more
* tidy
* one down
* dont merge
* hmm
* DRY
* more
* more
* tidy up
* tidy up
* add changeset, as this should have its own release
* tidy up
* oh i should probably hit save
* feat: make `<svelte:component>` unnecessary in runes mode
In Svelte 4, writing `<Component />` meant that the component instance is static. If you made the variable `Component` a reactive state variable and updated the component value, the component would not be reinstantiated with the new value - you had to use `<svelte:component>` for that. One reason was that having a dynamic component was more overhead, which is no longer the case in Svelte 5. We can therefore reduce the potential API surface area (by maybe deprecating `<svelte:component>` in the future) by allowing Svelte to recognize when a component variable is potentially dynamic. It turned out that this was already mostly the case. This PR fixes one case where it wasn't, and fixes another where this was wrongfully applied in legacy mode.
* we already have this function
* add interactive demos
* changeset
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
language tools has to type its own shape for backwards compatibility, and it currently doesn't include the `$on` and `$set` methods, which means without widening the type as done here you would get a "this shape is not accepted" type error when passing it to `ComponentProps`
closes#12627
Closes#12643
Very weird behaviour from the draggable setter...if you set element.draggable="false" it will actually set draggable to true (the boolean).
* better code generation for slot props in SSR
* simplify
* remove getters mechanism from server compiler
* changeset
* no need to use getters in SSR mode
* fix comment
* add state.getters as alternative to binding.expression
* on second thoughts
* fix
* first of many
* couple more
* regenerate types
* more
* another
* more
* another
* another
* another
* remove binding.expression from client-side code
* tweak
* last one
* comment
* regenerate types
* add a changeset
* small tidy up
* simplify
* simplify
* simplify and fix
* simplify
* fix: ensure dynamic event handlers are wrapped in a derived
* fix test
* feedback
* more feedback
* address feedback
* we have .svelte.js files
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* fix: bail-out of hydrating head if no anchor is found
* add failing test
* fix
* fix comment
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* add invalid_default_snippet error message
* fix: improve validation error that occurs when using `{@render ...}` to render default slotted content
* cheeky hack to keep treeshakeability until we can nuke this validation altogether
Previously, if transitions/animations were playing in quick succession, overlapping each other, it could have disastrous outcomes, leading to elements jumping all over the place.
This PR gets that into much better state (not completely fixed, but close) by applying a few fixes:
- destructure style object from `getComputedStyles`, because it's a live object with getters and we're interested in the fixed values at the beginning
- `unfix` for animations didn't reset the transition styles
- don't apply `fix` when we detect already-running animations on the element. That means it's already away from its original position, and doesn't need fixing. Worse, applying an absolute position can lead to the element jumping to the top left if the running animation also applies a transition style - those take precedence over the one we would apply
fixes#10252
* fix: properly assign trailing comments
Trailing comments were added even if they started before the node end, which violates the definition of trailing comments.
This fixes that, with the consequence that some comments no longer show up in the AST at all. Previously they were stuffed _somewhere_, but arguably at the wrong positions. For example the last comment in a function body got assigned as a trailing comma for the body, which is wrong, because the body ends _after_ the comma.
The special case is comments at the end of an expression tag - they are added even if there are multiple, and they are added regardless of whether they are separated by newlines or not. This ensures the expression tag end is calculated correctly.
Fixes#12466
* support multiple trailing comments after last statement in a body
* simplify, handle object and array expressions
* parse `foo={bar}` attribute as `value: { type: 'ExpressionTag', .. }` (i.e. don't wrap in an array)
* warn on quoted single-expression-attributes
* breaking: warn on quotes single-expression attributes in runes mode
In a future version, that will mean things are getting stringified, which is a departure from how things work today, therefore a warning first.
Related to #7925
* Update .changeset/plenty-items-build.md
* Apply suggestions from code review
* missed a spot
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
The head hydration anchor didn't update after hydrating the contents of one `<svelte:head>` element, which meant subsequent `<svelte:head>` elements would always start at the beginning of the head. This PR fixes that. The test was updated such that the shape of each `<svelte:head>` content is sufficiently different to throw an error if this wasn't fixed.
fixes#12458
* fix: ensure `$state.snapshot` never errors
Snapshotting can error on un-cloneable objects. It's not practical to error in this case; often there's no way out of this for users, so it makes sense to return the original value in that case, and warn in dev mode about it.
closes#12438
* lint
* single warning per snapshot call, list affected properties
* lint
* lint
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* fix: ensure previous transitions are properly aborted
- nullify options when the transition is aborted. This ensures a change in options is reflected the next time, else it would stick around indefinetly
- abort previous intro (if exists) when new intro plays (same for outro)
fixes#11372
* add a test
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
When Vite calls `hot.accept`, it passes the wrapped component, which means we're passing the HMR wrapper along as the new component. Avoid that by maintaining a reference to the original component.
* feat: add ability to ignore warnings through compiler option
Some people want to disable certain warnings for their whole application without having to add svelte-ignore comments everywhere. This new option makes that possible.
closes#9188
part of https://github.com/sveltejs/language-tools/issues/650
* make it a function
* singular
* warningFilter
* make internal filter non-nullable
* Update .changeset/little-seals-reflect.md
* filter_warning -> warning_filter, for symmetry with public option
* fix
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
We've marked several methods used for walking the DOM with a `__NO_SIDE_EFFECTS__` comment. That was good historically, because we didn't need those kept around if its results were unused, but since the hydration changes in #12335 this actually introduces a bug: Because that PR now relies on the hydration nodes being correct due to walking the DOM, tree-shaking unused variables/calls results in the walk being incorrect, leading to bugs
Fixes#12422
* fix: prevent whitespaces merging across component boundaries
The logic that was there didn't take components into account. The underlying problem is that the parent isn't properly set to `Fragment` in all cases because of nested `visit` calls we do in some places.
Fixes#12447
* update test
This enhances our "variable was mutated" detection to also recognize that `foo` in `[foo[1]] = [..]` was mutated. This allows us to be more granular about detecting mutations to each expressions in legacy mode, which fixes#12169
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
* move cloning logic into new file, use structuredClone, add tests
* changeset
* breaking
* tweak
* use same cloning approach between server and client
* get types mostly working
* fix type error that popped up
* cheeky hack
* we no longer need deep_snapshot
* shallow copy state when freezing
* throw if argument is a state proxy
* docs
* regenerate
The previous validation for checking if slots with let directives were rendered with `{@render children(...)}` had false positives
- threw an error even if the other side didn't make use of the arguments, i.e. wasn't actually using a let directive
- didn't check that the rendered snippet actually was the children property
This fixes the validation by only applying it to children render tags, and by adding the slot to `$$slots.default` instead of `$$props.children` in more cases (when it's using `<svelte:fragment>` or `let:` directives, which both mean you're using old slot syntax)
Fixes#12414
* fix: cache call expressions in render tag arguments
Ensure that they're called at most once per change, not once per access within the snippet
fixes#12187
* leverage state
* types
* fix
* fix: properly delay intro transitions
WAAPI applies the styles of a delayed animation only when that animation starts. In the case of fade-in transitions that means the element is visible, then goes invisible and fades in. Fix that by never applying a delay on intro transitions, instead add keyframes of the initial state for the duration of the delay.
Fixes#10876
* fix bug, make test pass
* make test more selfcontained, test outro delay aswell and add functionality for that in animation-helpers
* lint
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* fix: more event handling tweaks
- ensure we only have a single document listener per event+runtime
- add `<svelte:body>` listeners to `before_init` similar to the document/window elements
- move some code into `events.js` where it belongs
* add a counter
* changeset
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* feat: runtime dev warn for mismatched `@html`
* fix: limit the length of the client value shown in the error
* put logic inside a helper
* remove $.hash, no longer needed
* fix
* tweak
* update changeset
* fix
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* separated url-search params and url classes and added more tests
* making URL aware of SvelteURLSearchParams changes so they are in sync
* added changeset
* generated types
* bail out if url.sp and SvelteSp are already in sync
* sync search on searchParams change because of how node18 handles it
* use ts-expect-error instead of ts-ignore
* remove a bit of indirection
* tweak
* fix
* regenerate types
* short-circuit in both directions
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* chore: reenable server CSS output through a compiler option
There are various use cases where this continues to be necessary/nice to have:
- rendering OG cards
- rendering emails
- basically anything where you use `render` manually and want to quickly stitch together the CSS without setting up an elaborate tooling chain
* cssRenderOnServer -> css: 'injected'
* update tests
* move append_styles into new module, update implementation
* get HMR working
* don't append styles to head when compiling as a custom element
* update changeset
* tweak
* tweak
* tweak wording
* update test
* fix
* reinstate optimisation, but without the bug
* fix sourcemap test
* move breaking change note
* Update packages/svelte/src/internal/server/index.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* WIP towards single-pass hydration
* fix
* fixes
* fix
* fix
* fixes
* fix
* fixes
* fix
* fix, tidy up
* update script (it currently fails)
* fix
* fix
* hmm
* fix
* fix
* fix
* fix
* all hydration tests passing
* drive-by fix
* fix
* update snapshot tests
* fix
* recover: false
* fix invalid HTML message
* note to self
* fix
* fix
* update snapshot tests
* fix
* fix
* fix
* update test
* fix
* fix
* fix
* ALL TESTS PASSING THIS IS NOT A DRILL
* optimise each blocks
* changeset
* type stuff
* fix comment
* tidy up
* tidy up
* tidy up
* tidy up
* tidy up
* remove comment, turns out we do need it
* revert
* reinstate standalone optimisation
* improve <svelte:element> SSR
* reset more conservatively
* tweak
* DRY/fix
* revert
* simplify
* add comment
* tweak
* simplify
* simplify
* answer: yes, at least for now, because otherwise empty components are a nuisance
* tweak
* unused
* comment is answered by https://github.com/sveltejs/svelte/pull/12356
* tweak
* handle `<template>` edge case at compile time
* this is no longer a possibility, because of is_text_first
* unused
* tweak
* fix
* move annotations to properties
* Update packages/svelte/src/constants.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update packages/svelte/src/internal/client/dom/blocks/each.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update packages/svelte/src/internal/client/dom/hydration.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update playgrounds/demo/vite.config.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* add a comment
* prettier
* tweak
* tighten up hydration tests, add test for standalone component
* test for standalone snippet
* fix
* add some comments
* tidy up
* avoid mutating `arguments`
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Setting the `value` attribute of an `<option>` element to a falsy value should result in the empty string. This wasn't happening in all situations previously.
Fixes#11616
* breaking: play transitions on `mount` by default
closes#11280
* only prevent transitions when the component is invalidated
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
This aligns warning and error objects to contain the same properties and have their toString methods return the same shape. It's implemented by warnings becoming class objects, too, and sharing the same base class with errors. It also adds back the `frame` property that got lost in the Svelte 4->5 transition. The only difference to Svelte 4 now is a slightly adjusted toString property (which is consistent between warnings and errors now) and a `position` property that contains a tuple of start/end offsets instead of a `pos` property only containing the start offset
closes#12151
The modern AST is an opportunity to tweak things. In the old AST, the start of else (if) branches was the content, now it's the opening bracket, which makes more sense.
Closes#12287
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
If an even handler is hoisted and said event handler access rest props, we can't be sure whether or not it will access it via `$$props` (optimized) or via `rest()` - therefore we add both as params in this edge case
fixes#12279
* fix: improve ReactiveDate class
* improved test
* added changeset
* improved performance by using less signals
* using the same signal for getX and getUTCX
* fixed types
* combined setX with setUTCX tests together
* simplified fine-grainability by using deriveds
* reused the calculated new_time
* removed logic that reduced number of signals, cuz its use-cases are rare
* inference is fine
* tidy up
* tweaks
* more efficient iteration
* tweak
* more descriptive changeset
* this makes all tests but one pass
* fix
* adjust test to be robust across timezones
* tweak more tests
* Update .changeset/sleepy-dogs-sit.md
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
* use existing teardown function
* set up stores and unsubscriptions in one go
* we never set last_value, this is gibberish
* simplify
* tidy up
* inline
* more
* fix: further avoid duplicate signal dependencies
visitor
another approach
tune
tune
* add test
* clean up test
* early return to reduce indentation, use var over let/const
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
#12202 revealed that TypeScript has a harder time tracing imports when they are indirectly exposed, e.g. `function foo(): void; ... export { foo }` instead of `export function foo(): void;`, which can lead to bugs down the line (such as in that issue). A new `dts-buddy` version fixes this, which in turn fixes#12202
This also adjustes the `Snippet` type and turns it into an interface, which makes for better intellisense: The type will be unpacked in less situations, resulting a more readable and named type.
The refactoring in #12215 didn't take HMR into account. As a result, the anchor was passed to the HMR block, which was subsequently cleaned up on destroy - but the anchor could be shared with other components and therefore needs to stay in the dom. Passing `null` instead solves the problem.
Fixes#12228Fixes#12230Fixes#12233
* fix: deconflict multiple snippets of the same name
* address feedback
* only create BlockStatement when necessary
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
The media bindings where fragile because the "prevent rerun if update in progress"-logic was flawed: It didn't (re)set the `updating` flag correctly, because it assumed an event and a render effect would always directly follow each other, with one always being first - but that's not true.
It's much more robust to instead compare the value with what's currently present in the DOM. For the very fast-firing current-time-binding a variable is used to not invoke the DOM getter as much, for the others this is not necessary.
Lastly, the playback-rate-binding contained another bug where the listener was setup inside the effect and therefore reinitialized on each binding change - it needs to move into a different effect.
Someone could render a snippet into a custom element, and therefore elements with slot attributes should be allowed within them and be treated as regular elements
closes#12158
Fixes#12166. Turns out that the recent refactors here negated the fact that non-runes mode uses a slightly different source signal that has different equality rules.
I also updated the docs in this PR too to reflect that only plain objects and arrays are proxied.
* Fix memory leak in unmount where document event listeners are not being removed
* changeset
---------
Co-authored-by: Mark Siano <marksiano@Marks-MBP.lan>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
new dts-buddy makes sure that only the actual public types are exposed (only export { ... } ensures that, for TS historical reasons)
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
* fix: allow multiple optional parameters with defaults
* Apply suggestions from code review
* partial fix
* feat: parse as a whole function
* couple of fixes
* work around acorn-typescript quirks
* add the harder test
* Update .changeset/ten-geese-share.md
---------
Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* Ensure binding from legacy component passed to runes component updates correctly. This is done by also using the `prop(..)` variant for a property if it's mutated in runes mode, and then figuring out at runtime whether or not the parent should be notified or not
fixes#12032
* fix adjacent bug around wrong value getting return upon mutation
* deduplicate
* changeset
* simplify
* move comment
* rename
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
make the props parameter optional only when there are no or only optional props
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* fix: wait a microtask for await blocks to reduce UI churn
* fix: wait a microtask for await blocks to reduce UI churn
* fix: wait a microtask for await blocks to reduce UI churn
* fix bug
* Make then blocks reactive
* add test
* update test
* update test
* Update packages/svelte/src/internal/client/dom/blocks/await.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Add support for catch block
* slightly more specific naming
* if we use the reserved $$ prefix we dont need to mess around with scope.generate
* omit args for then/catch if unnecessary
* neaten up some old code
* shrink code
* simplify test
* add failing test
* preserve pending blocks
* update test
* fix comment typo
* tidy up
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
The `update` function could cause a read, which would end up being tracked in the effect, and said effect would then run multiple times when it should only run once
fixes#11934fixes#12028
* fix: ensure input value is correctly set during hydration
* fix: ensure input value is correctly set during hydration
* address feedback
* fix typos
* early return, var
* fix test
* Update packages/svelte/src/internal/client/dom/elements/attributes.js
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* update changeset
* tweak names
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
prevent misidentification of bindings as delegatable event handlers if used outside event attribute
Fixes#12074
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
When the TypeScript plugin we provide isn't enabled, imports to `.svelte`-files fall back to an ambient module declaration. Said declaration was still only providing the deprecated class. This PR widens the type so that you can also invoke it like a function. After the transition period (Svelte 6 or 7) only the new type should be provided from the module declaration.
The `is` attribute is special and always needs to be part of the static template string, or else it wouldn't be taken into account on initialization
fixes#12052
- give autocompletion for types and more precise event types for html elements
- allow to pass other kinds of event target nodes, like window
closes#12027fixes#12045
We need to ensure that if derived a depends on derived b, and a is reconnecting to the dependency graph, that if b was updated more recently than a, a also updates.
Fixes#11988Fixes#12044
* fix: ensure bound input content is resumed on hydration
* fix: ensure bound input content is resumed on hydration
* Update packages/svelte/src/internal/client/dom/elements/bindings/input.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* fix: ensure bound input content is resumed on hydration
* fix: ensure bound input content is resumed on hydration
* Update packages/svelte/src/internal/client/dom/elements/bindings/input.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* add test
* add test
* add test
* add test
* Update packages/svelte/src/internal/client/dom/elements/bindings/input.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* add test
* add test
* newlines between multi-line blocks, let the code breathe
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
In a handful of places, we're using effect(...) to defer work that only needs to happen once (like autofocusing an element). This is overkill. There is a much cheaper and simpler way that already exists in the codebase — queue_micro_task.
It feels like we could probably use it in more places, but when I tried it causes some tests to fail, likely because of subtle timing issues that don't apply to the things changed in this PR.
* fix: create sources for initial values of Set
* fix: create sources lazily on Set
* fix: avoid creating sources if sizes are the same
* chore: add test for size of Set
* create iterator lazily
* tidy up test
* oops
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
When an event listener is removed right before it would be fired, adding a new listener comes too late for the browser and the event is swallowed.
The fix is to tweak the spread attributes function to keep using the same object for updates so that we can wrap the event listener to invoke it like `attributes[key](evt)` instead.
No test because it seems impossible to reproduce in testing environments.
Fixes#11903
* docs: make legacy.componentApi more visible
People didn't know that this exists, so we should make it more visible through having it be part of the error message, and calling it out in the docs with more details
* clarify
* flesh out message, put error behind a function
* make it work with HMR
* fix
* fix
* this makes it work. i don't fully understand why
* changeset
* changeset
* Delete .changeset/twelve-foxes-press.md
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
The current type narrows the binding type to `""` by default, which means "no bindings on this component". While this is the common case, it makes it very cumbersome to use the `Component` type because legacy components are of type `string` and as soon as you have bindings, the type is something like `"foo" | "bar"` which _also_ is not assignable to `""` which is semantically wrong, because you should be able to assign a component that can have bindings to a type that accepts none.
The pragmatic solution is to change the binding type to allow `string`, which means someone theoretically could use bindings with a component that doesn't have bindings:
```svelte
<script>
let component: Component<{ prop: boolean }> = IAcceptNoBindings;
</script>
<!-- allowed but should be a type error -->
<svelte:component this={component} bind:prop={foo} />
```
But this is a) rare anyway and b) can be caught at runtime
This came up in comments of #11775
* fix: append start/end info to more tags
We should add them everywhere we can
Related https://github.com/sveltejs/language-tools/pull/2385
* changeset
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Also remove create_block function in favor of calling visit which in turn calls the fragment visitor, to ensure scope is updated correctly
Fixes#11450
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Both `<svelte:element this="div">` and `<svelte:element this={"div"}>` were backported as `tag: "div"` for the old AST. That's wrong because the latter should result in `tag: { type: 'Literal', .. }`. Fixing this makes all the tests in prettier-plugin-svelte pass with Svelte 5.
Also cleaned up a bit of code in the parser.
* fix: populate `this.#sources` when constructing reactive map
* populate sources in first #read_all
* use increment helper
* use numbers instead of symbols
* make forEach work
* feat: bind `activeElement` and `pointerLockElement` in `<svelte:document>`
* add test, use focusin/focusout rather than focus/blur
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* fix: silence `state_referenced_locally` when state is exported
* chore: add changesets
* chore: use `some`
* fix
* better
* we don't need a whole new test for this
* Update .changeset/few-zoos-own.md
* prettier
* tidy up the test a bit since we're in here
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
* fix: keep default values of props a proxy after reassignment
* fix: make this work for non bindable props too
* chore: more comprehensive test
* chore: cast away
* chore: better variable name and check
* chore: fix lint
Closes#11727.
This PR aims to tackle issues around our reactive Map/Set implementations. Notably:
- We now store the values on the backing Map/Set, allowing for much better introspection in console/dev tools
- We no longer store the values inside the source signals, instead we use Symbols and booleans only as markers
There's one limitation around `.has(x)` when `x` is not in the Map/Set yet - it's not fine-grained. Making it so could create too much memory pressure when e.g. iterating a big list of items with few of them being in the set (`has` returns `false` most of the time).
When a proxy is reassigned, we call `$.proxy` again. There are cases where there's a component context set but the reassignment actually happens for variable that is ownerless within shared state or somewhere else. In that case we get false positives right now. The inverse is also true where reassigning can delete owners (because no component context exists) and result in false negatives. The fix is to pass the previous value in to copy over the owners from it.
Fixes#11525
Fixes#11817.
It turns out that we weren't fully handling the disconnection of derived signals from the reactivity graph – resulting in cases where they could leak memory because they were not being removed from their dependency reactions array. However, removing ourselves from this array meant that any future changes might mean we need to reconnect the derived to the graph again – so we have to do some additional bookkeeping to make this work. Thankfully, we already have versioning because of unowned deriveds, we can use the versions to understand if the owned derived signal is dirty after being connected to the reactivity graph again – something we couldn't do in early permutations of the signal architecture – and likely why we hadn't addressed this in the same sense.
If a property is mutated, the assumption is that it is deeply reactive. In those cases, the fallback value should be proxified so that it also is deeply reactive.
fixes#11425
- the previous assumption was wrong: browser don't fire a scroll event initially when the scroll isn't smooth
- the previous logic wasn't using the "is scrolling now" logic which meant the render effect fired immediately after, causing smooth scrolling to start too late to be overridden
adjusted the comment and reused the scroll handler function to guard against the race condition
fixes#11623
In Svelte 3 and 4, components were classes under the hood, and the base class was `SvelteComponent`. This class was also used in language tools to properly type check the template code.
In Svelte 5, components are functions. To give people a way to extend them programmatically, it would be good to expose the actual shape of components. This is why this PR introduces a new `Component` type.
For backwards compatibility reasons, we can't just get rid of the old class-based types. We also need to ensure that language tools can work with both the new and old types: There are many libraries out there that provide `d.ts` files with type definitions written using the class types - these should not error.
That's why there's an accompagning language tools PR (https://github.com/sveltejs/language-tools/pull/2380) that's doing the heavy lifting: Instead of generating classes, it now generates a constant and an interfaces and uses Typescript's declaration merging feature to provide both so we can declare a component export as being both a class and a function. That ensures that people can still instantiate them with `new` (which they can do if they use the `legacy.componentApi` compiler option), and it also ensure we don't need to adjust any other code generation mechanisms in language tools yet - from a language tools perspective, classes are still the norm. But through exposing the default export as being _also_ callable as a function we can in a future Svelte version, where classes/the Svelte 4 syntax are removed completely, seamlessly switch over to using functions in the code generation, too, and the `d.ts` files generated up until that point will support it because of the dual shape. This way we have both backwards and forwards compatibility.
* breaking: disallow string literal values in `<svelte:element this="...">`
* note breaking change
* Update sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Co-authored-by: Jeremiasz Major <jrh.mjr@gmail.com>
* prettier
* make invalid `<svelte:element this>` a warning instead of an error (#11641)
* make it a warning instead of an error
* format
---------
Co-authored-by: Jeremiasz Major <jrh.mjr@gmail.com>
In the case of an invalid child element, we already get information about the parent and the child, but in other cases where a mismatch could occur you're pretty much on your own.
This adds a bit more context to hydration_mismatch warnings — 'The error occurred near ...'
* feat: add rootDir option and set __svelte_meta.file like in svelte4
* Update packages/svelte/src/compiler/validate-options.js
* update tests
* centralise logic
* fix
* note to self
* Apply suggestions from code review
* lint
* one dollar towards the windows backslash bugfix foundation please
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
* feat: add $state.is rune
* fix type
* tweak docs
* may as well update the test case to match the docs
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* chore: improve SSR invalid element error message
* move push_element and pop_element into new dev.js file
* pass location info, remove unnecessary if (DEV) block
* use full filename, basename is not very helpful. also, current_component is guaranteed to not be null
* current_element is guaranteed to not be null in pop_element
* tweaks
* remove message prefix - redundant when filenames are included
* add line/column
* make message more concise
* reduce indirection
* only print message once
* update test
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* fix: adjust heuristics for effect_update_depth_exceeded
* fix: adjust heuristics for effect_update_depth_exceeded
* fix: further adjust heuristics for effect_update_depth_exceeded
In edge cases it may happen that set_attributes is re-run before the effect is executed. In that case the render effect which initiates this re-run will destroy the inner effect and it will never run. But because next and prev may have the same keys, the event would not get added again and it would get lost. We prevent this by using a root effect.
The added test case doesn't fail for some reason without this fix, but it does fail when you test it out manually, so I still added it.
Found through https://github.com/sveltejs/svelte/issues/10359#issuecomment-2101167524
* fix: make `$effect.active()` true when updating deriveds
* WIP
* this seems to work?
* prevent effects being created in unowned deriveds
* update test
* fix issue
---------
Co-authored-by: Dominic Gannaway <dg@domgan.com>
* fix: use snippet as parent element of snippets childrens in validator
* Update packages/svelte/src/compiler/phases/2-analyze/validation.js
* Update .changeset/wet-pears-remain.md
---------
Co-authored-by: Rich Harris <hello@rich-harris.dev>
* fix: use acceptExports to support partial hmr
* fix: add condition to only use acceptExports when it is available
* fix: update test snapshot
* fix: format
* Fixed: bind:scroll resets scroll state
* failing test
* bail if value is undefined
* changeset
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Deriveds where under certain conditions not detected as dirty correctly. The reason is that a transitive check_dirtiness call could update the flag of a derived, even if the condition doesn't ulimately result to true. That's why the check for "is now dirty" needs to be moved out of the inner if block.
Fixes#11481
This may also fix a yet undetected overfiring bug in the "is unowned" case because the previous inner "is now dirty?" check didn't take unowned into account.
fixes#11483
We need to keep track of the component function similar to how we keep track of the component context, so that effects etc have the correct one associated
Ownership validation had a false positive when rendering a component as slotted content of another component. To fix this, #11401 did set the current component context to the context the snippet was declared in, not to the context it is rendered in. This was flawed because it means that component context was altered in a way that setContext/getContext failed because the parent chain was incorrect. This fixes that by introducing a separate global (dev time only) which tracks the component function the ownership needs.
fixes#11429
Instead of using types that declare whether or not a type is bindable directly as part of the property, we're introducing a new for-types-only field to `SvelteComponent`: `$$bindings`, which is typed as the keys of the properties that are bindable (string by default, i.e. everything's bindable; for backwards compat). language-tools can then produce code that assigns to this property which results in an error we can display if the binding is invalid
closes#11356
* fix: handle reassignment of `$$props` and `$$restProps`
Some libraries assign to properties of `$$props` and `$$restProps`. These were previously resulting in an error but are now handled properly
https://github.com/sveltejs/svelte/issues/10359#issuecomment-2080067464
* $$props is coarse grained on updates, so we can simplify this
* fix
* fix comment
When spreading attributes, the setters of the element are checked. If they contain the key in question, it's set via that setter. For certain setters on certain elements this didn't work because the element prototype was not HTMLElement, rather a descendant of that (for example HTMLDivElement), which meant that only the setters of the descendant, not the superclass were taken into account. This fixes that by walking up the prototype chain until we find the Element prototype.
fixes#11179
* feat: leave view transition pseudo selectors untouched
view transition pseude selectors are global-like, i.e. they shouldn't be scoped or treated as unused.
In the process of adding support for this, is_root and is_host were consolidated into is_global_like because their usage locations didn't need any differentiation between them (same for the new view transition treatment)
closes#9127
* regenerate types
previously a reaction could be marked as DIRTY and subsequently as MAYBE_DIRTY before running, resulting in false negatives. Ensure that DIRTY flag can never be lowered to MAYBE_DIRTY
fixes#11363
Provides a migration function, exported as `migrate` from `svelte/compiler`, which tries its best to automatically migrate towards runes, render tags (instead of slots) and event attributes (instead of event handlers)
The preview REPL was updated with a migrate button so people can try it out in the playground.
closes#9239
* feat: only inject push/init/pop when necessary - closes#11297
* regenerate
* differentiate between safe/unsafe
* only inject $$props when necessary
* more
* fix
* simplify
* handle store subscriptions
* fix: mark `accessors` and `immutable` as deprecated
* add warnings for deprecated <svelte:options> attributes
* disable accessors in runes mode
* update tests
* tidy up
* the hell?
* regenerate types
* if I would get a dollar for every windows bug I fix I would be a millionaire by now
* return instance _and_ props in runes mode, move flushSync into shared code, don't set accessors in runes mode
* goddammit
* note breaking change
* fix
* regenerate messages
* Revert "return instance _and_ props in runes mode, move flushSync into shared code, don't set accessors in runes mode"
This reverts commit a47827e57d.
* pass instance to tests
---------
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
This is a typings PR and the companion PR to sveltejs/language-tools#2336
It introduces two new types:
- Binding: Marks a property as being bound (i.e. you must do bind:x)
- Bindable: Marks a property as being able to be bound (i.e. you can do bind:x)
Language tools then uses this generate code accordingly which then generates type errors.
All the other type gymnastics are there to ensure that you don't interact with these bindable types when using mount or hydrate or ComponentProps<MyComponent>, i.e. these two types should be mostly opaque for day-to-day users.
For backwards-compatibility, all properties are automatically wrapped with Bindable, which means existing type definition files will continue to work from a types perspective. Language tools opts into strict bindability by providing its own constructor definition for all generated classes in runes mode which omits the "wrap everything with bindable" behavior.
* breaking: disallow binding to component exports in runes mode
Svelte 4 allowed you to have `export const foo = ..` in component A and then do `<A bind:foo />`. This is confusing because it's not clear whether the binding is for a property or an export, and we have to sanitize rest props from the export bindings.
This PR therefore introduces a breaking change in runes mode: You cannot bind to these exports anymore. Instead use `<A bind:this={a} />` and then do `a.foo` - makes things easier to reason about.
* Update sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* tweak messages
* fix tests
* use component.name
* oops
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* fix: run event attributes after binding event listeners
By running the event listener logic inside an effect on the first run we guarantee that they're attached after binding listeners. Fixes#11138.
* give arrow functions stable id, better code gen
* optimise normal function expressions too (rare but valid!)
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* Revert "fix: take outroing elements out of the flow when animating siblings (#11208)"
This reverts commit c44234dc2f.
* fix: measure elements before taking siblings out of the flow
* lint
* add changeset back
* changeset
* fix: fall back to component namespace when not statically determinable
In #10006 we added more elaborate mechanisms to determine which namespace a given element is in. For `<svelte:element>` we added a "can't know at compile time" case and introduced a limited heuristic into the runtime.
This doesn't work for a few reasons:
- we're checking the parent's namespace to determine the current namespace, but the element itself could be the one that _changes_ the namespace
- as mentioned in the previous comment already, on the first render we can't do any parent analysis
- it does not take into account the static component namespace
The last point is the crucial one: In Svelte 4, we're falling back to the component namespace if we can't know statically - e.g. if someone added `<svelte:options namespace="svg">` then `<svelte:element>` should fall back to that namespace instead.
We were not doing that up until now, which introduced a regression. Fixing this also means getting rid of the (flawed) "can't know statically" heuristic.
Fixes#10858, though for a complete solution we likely need some way to tell `<svelte:element>` the namespace at runtime through a special attribute. Maybe we can use `xmlns` for that like we do in the static case
* support dynamic svelte:element namespace through xmlns attribute
* fix
* feat: allow $inspect reactivity map, set, date
* feat: inspect map without adding new data source
* feat: add inspect
* feat: define inspect on dev mode only
* fix: lint error
Ownership was not widened when assigning a sub state to a different top level state. The set of owners for the state was zero because the owner was on the original parent, but that one was reset to null because it's now the top level of a different state. That meant that there was no owner but also no parent to check for the owner, which is an invalid combination resulting in a nullpointer (and also potentially false positive warnings in other situations).
fixes#11204
Rich Harris
github-actions[bot]
Simon H
Paolo Ricciuti
Dominic Gannaway
BlueGreenMagick
Ahmad S
Leon Scherer
Lyu, Wei-Da
FoHoOV
Yuichiro Yamashita
Tiger Oakes
Dominik G
markpsiano
wackbyte
Ignatius Bagus
gtmnayan
Azat S
wackbyte
Mathias
Vladislav Logvin
Philipp Pracht
Luke Warlow
Jeremiasz Major
Caique Torres
Craig Jennings
Vaibhav Rai
Tan Li Hau