From dc950da123e2840e2d42df06e1603660bbf40e3c Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 11 Jul 2024 20:41:14 +0200 Subject: [PATCH 1/2] docs: note default value breaking change to `bind:` in runes mode https://github.com/sveltejs/svelte/issues/11400#issuecomment-2223186433 --- .../src/routes/docs/content/03-appendix/02-breaking-changes.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md index e2aa97c7d4bd..df3e6fc26e18 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md @@ -171,6 +171,8 @@ Exports from runes mode components cannot be bound to directly. For example, hav In Svelte 4 syntax, every property (declared via `export let`) is bindable, meaning you can `bind:` to it. In runes mode, properties are not bindable by default: you need to denote bindable props with the [`$bindable`](/docs/runes#$bindable) rune. +If a property is bindable and has a default value (e.g. `let { foo = $bindable('bar') } = $props();`), you need to pass a non-`undefined` value to that property, if you're binding to it. This prevents undefined behavior and results in more performant code (in Svelte 4, the default value was propagated back up, which on the server and client could result in more render cycles). + ### `accessors` option is ignored Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance. In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them. From 4bd245741f76ac465d20670939d49c7af9073508 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Fri, 12 Jul 2024 16:07:42 +0200 Subject: [PATCH 2/2] Update sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md Co-authored-by: Rich Harris --- .../src/routes/docs/content/03-appendix/02-breaking-changes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md index df3e6fc26e18..d53b590de912 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md @@ -171,7 +171,7 @@ Exports from runes mode components cannot be bound to directly. For example, hav In Svelte 4 syntax, every property (declared via `export let`) is bindable, meaning you can `bind:` to it. In runes mode, properties are not bindable by default: you need to denote bindable props with the [`$bindable`](/docs/runes#$bindable) rune. -If a property is bindable and has a default value (e.g. `let { foo = $bindable('bar') } = $props();`), you need to pass a non-`undefined` value to that property, if you're binding to it. This prevents undefined behavior and results in more performant code (in Svelte 4, the default value was propagated back up, which on the server and client could result in more render cycles). +If a bindable property has a default value (e.g. `let { foo = $bindable('bar') } = $props();`), you need to pass a non-`undefined` value to that property if you're binding to it. This prevents ambiguous behavior — the parent and child must have the same value — and results in better performance (in Svelte 4, the default value was reflected back to the parent, resulting in wasteful additional render cycles). ### `accessors` option is ignored