* fix: add css hash to custom element rendered with `svelte:element`
* simplify
* skip arg where possible
* drive-by improvements — remove some unnecessary arguments where possible
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* feat: function called as tagged template literal is reactively called
Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>
* chore: re-organize import of visitors
* simplify
---------
Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
* 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>
Dominic Gannaway
Rich Harris
Paolo Ricciuti
github-actions[bot]
Simon H
BlueGreenMagick
Ahmad S
Leon Scherer
Lyu, Wei-Da
FoHoOV
Yuichiro Yamashita
Tiger Oakes
Dominik G
markpsiano
wackbyte