- clarify that a callback prop means passing a function
- enhance the example so that a parameter is passed and the prop is explicitly invoked to visualize the concept better
closes#11671
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>
* 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>
* feat: make autocomplete more robust
* handle `$inspect(...).with(...)` special case
* autocomplete imports
* only allow $props at the top level of .svelte files
* only autocomplete runes in svelte files
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
* chore: directly export function in non-HMR mode
* remove some more noise
* update snapshots
* Update sites/svelte-5-preview/src/lib/workers/compiler/index.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* 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>
* 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>
* feat: hot module reloading support for Svelte 5
* fix lockfile
* tweaks
* types
* lint
* lint
* tweaks
* add hmr flag
* tweak
* tweaks
* move HMR logic into its own module
* simplify
* tidy up types
* fix test
* lint
* need some indirection here or references break
* prevent transitions during HMR update
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
- don't throw a dev time error when binding to an export (fixes#11008)
- remove bindings that are for component exports
- throw an error when using a component export with the same name as a property
* feat: take form resets into account for two way bindings
When resetting a form, the value of the inputs within it get out of sync with the bound value of those inputs. This PR introduces a reset listener on the parent form to reset the value in that case
closes#2659
* slightly different approach
* tweaks, test
* this is a breaking change, strictly speaking
* bind:files
* use capture phase
* tweak wording
* use promise, explain
* feat: adds reactive Map class to svelte/reactivity
* add docs
* add docs
* add test case
* types
* make reactive set better
* address feedback
* fix typo
* more efficient initialisation
* this is incorrect, it would fail if given a map for example
* increase consistency (with e.g. proxy.js)
* tidy up
* Revert "more efficient initialisation"
This reverts commit 29d4a8078b.
* efficient initialization, without bugs this time
* convention
* delete make_iterable
* update changeset
* efficient initialization
* avoid generator functions
* Update sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
* chore: use Svelte 5 for preview site
* use server route to load Svelte compiler, enables this to work on windows locally, and avoids loading all our test files
* cache for 10 seconds
* make it thirty
* prerender
A handful of minor cleanups:
- there were two different "do this" / "don't do this" formats. Standardize on the one that's much easier to read
- clarify that callback props are being used (component events no longer exist in Svelte 5)
- rename variable from `proxy` to `facade` since it's not a proxy
- explain when not to use `$effect`, closes#10193
- explain that only synchronous reads are tracked, closes#10475
- explain nuance around reruns and object reads, closes#10392
People could've done bind:this and called instance methods on the instance - a rare case, but not impossible. This shims $set and $on when in legacy compat mode. $destroy is never shimmed because you shouldn't manually destroy a component, ever, and there's no way to make that work in the new world.
closes#10420
* feat: add hydrate method, make hydration treeshakeable
Introduces a new `hydrate` method which does hydration. Refactors code so that hydration-related code is treeshaken out when not using that method.
closes#9533
part of #9827
* get docs building
* ugh
* one more
* Update packages/svelte/scripts/check-treeshakeability.js
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
* warn
* Update sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md
---------
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Add source map merging for preprocessors and get tests passing.
- fixed some issues around the `sources` array where they weren't calculated relative to the input correctly
- adjusted some CSS tests because due to our own CSS parser the AST is less granular, so there are less mappings now. Don't think this is a problem, but worth thinking about
- removed enableSourcemap but only log a warning, the reason this was introduced was to mitigate a bug in Vite which occured when having the source map inlined into the SSR'd output. Since SSR doesn't contain inlined CSS anymore (and if it did, we would omit the source map) the reason for which it was introduced no longer exists
- files without js mapping in it have no source mappings yet (originally added in Svelte 4 for #6092)
* rename $derived.call to $derived.by
* more replacements, plus a compiler error
* regenerate types
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Closes#9420.
This PR creates an $effect.pre (before beforeUpdate and an $effect (for afterUpdate) and, inside those, listen for all locally declared signals plus reactive props. This does mean that we need to link the locally declared signals to the component context (the reverse of the current behaviour, wherein we link the component context to locally declared signals).
* give this another try
* fix: lint
* fix: Forgot to save
* feat: it works boiiii
* look, ok, it did work, i just needed to update the snapshots
* bruh
* changeset
* feat: ok I think the client snippet block finally works
* feat: current tests pass; I'm sure I'm missing stuff for new things
* fix: snapshot
* feat: I think non-destructured rest should work now?
* chore: duplicated computation
* feat: Tests (passing and failing
* feat: it's... alive?
* chore: Clean up my messes
* chore: devtime stuff
* fix: fmt
* chore: see if this fixes repl
* chore: make naming more offensive
* fix: Don't throw on missing keys, return undefined as it usually would
* Update packages/svelte/src/compiler/phases/1-parse/state/tag.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update packages/svelte/src/compiler/phases/1-parse/state/tag.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* fix: Hopefully default param values now work
* dumb
* types
* feat: Test it
* fix: Turns out javascript parameters are optional
* feat: The Final Solution
* document function
* feat: Better bracket matching, unit tests
* feat: exclude test files from publish
* feat: More unit tests
* feat: Use more efficient parsing for @const
* Update .changeset/curvy-cups-cough.md
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update packages/svelte/package.json
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* Update packages/svelte/src/compiler/phases/1-parse/utils/bracket.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* fix: changesets
* chore: additional comments
* fix: kill foreach
* fix: foreach again
* feat: Docs
* Revert "fix: kill foreach"
This reverts commit 9a688cc543.
* fix: My own stupidity
* fix: style
* fix - maybe
* Update sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md
* Update tag.js
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
* Update .changeset/curvy-cups-cough.md
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* chore: Remove rest params
* Delete .changeset/eighty-rivers-wash.md
* fix: Honestly idk why it was broken but it's fixed now
* fix: var name lol
* fix: typegen
* fix: idk
* fix: It looks like a bunch of unformatted shit came in through main?? idk
* Revert "fix: It looks like a bunch of unformatted shit came in through main?? idk"
This reverts commit ab851d5627.
* fix: format again
* this is getting ridiculous
* Update tag.js
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
* fix errors
* simplify a bit
* use read_context
* use read_context for const as well
* remove unused code
* unused import
* unused export
* remove spread args. sorry elliott
* tidy up SnippetBlock interface
* fix test
* simplify
* tweak
* revert example, so that it matches the surrounding text
* move PropsWithChildren back to public.d.ts
* update typing docs, so that it flows from previous example
* temporarily revert const parsing changes, to get prettier working again (???)
* oops
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Someone could programmatically add a class to an element and Svelte doesn't see it, so having global be part of a modifier is necessary so that Svelte doesn't mark it as unused
fixes#10210
also add event and snippets section to old vs new
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* feat: add unstate utility function
* Update packages/svelte/src/internal/client/proxy/proxy.js
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* update docs
* add class support
* oops
* lint
* fix docs
* remove symbol and class support
---------
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
* magic objects
* read length eagerly — triggers reconciliation
* nested magic
* tests
* more tests
* fix array memory leak
* skipped, partially passing array test
* Fix each
revert bad changes
* more 1337
* eliminate closures
* maybe this is unnecessary?
* only create sources for own properties
* more
* rename stuff
* shuffle things around
* emit $.proxy
* remove proxy helper from public API
* only create sources for writable properties
* update test
* get tests passing
* fix
* remove state-not-mutated warning, which is no longer valid
* track reassignments separately from mutations
* update test - effects no longer fire on mutations unnecessarily
* move util into utils file
* move each logic into its own module; breathe sigh of relief
* tweaks
* more tweaks
* improve runtime
* fix mistake
* ensure we proxy when assigning to state
* fix test
* handle frozen
* create sources when reading proxy properties inside deriveds
* only mutate in legacy mode
* add immutable to transform state
* remove unused second argument to derived
* remove unused second argument to source, and runtime immutable option to createRoot (not sure what that was doing there?)
* oops, backwards
* dedicated binding.kind for legacy reactive imports
* avoid using prop_source in more cases. bit hacky, could be tidier, but it works
* distinguish between source and mutable_source
* remove immutable option from mount
* remove unused apparatus around immutable option
* deprecate immutable
* fix
* tweak
* better default value handling
* remove unnecessary exports
* whitespace is free
* remove obsolete symbol from proxy
* cleanup ts
* improve runtime perf by removing version reads in has()
* add missing proxy call
* tune perf of has() more
* ensure we only create sources in effect_active()
* fix proxy of computed fields
* simplify and fix issue with indexed each blocks
* fix compiler errors around exported state
* only create source for state that is reassigned
* temporary fix, we should come up with something better than this
* readonly props
* fix test
* add test for bind:
* make readonly dev-only
* docs
* forbid setPrototypeOf
* lol whoops
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Dominic Gannaway <dg@domgan.com>
* rename file
* add snippet docs
* add note on deprecation
* they're not attributes
* event docs
* prettier
* remove unnecessary div
* Apply suggestions from code review
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
* make example less confusing
* note breaking props.children change
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Marcos Rigoli
Sharath Kumar
Dominic Gannaway
Simon H
Rich Harris
Matei Trandafir
이요
Luke Warlow
Ben M
Tee Ming
Ignatius Bagus
Rich Harris
Antonio Sarcevic
Ben McCann
Chien Tran
S. Elliott Johnson
Simon Holthausen
gtmnayan
Jason Chase
Rob B
Yuichiro Yamashita
Erick Vargas