sync svelte docs

Author: Rich-Harris

apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md

@@ -5,29 +5,29 @@ title: $props
 The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import MyComponent from './MyComponent.svelte';
 </script>
 
-/// file: App.svelte
 <MyComponent adjective="cool" />
 ```
 
 On the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune...
 
 ```svelte
+<!--- file: MyComponent.svelte --->
 <script>
 	let props = $props();
 </script>
 
-/// file: MyComponent.svelte
 <p>this component is {props.adjective}</p>
 ```
 
 ...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:
 
 ```svelte
-/// file: MyComponent.svelte
+<!--- file: MyComponent.svelte --->
 <script>
 	let +++{ adjective }+++ = $props();
 </script>
@@ -40,11 +40,10 @@ On the other side, inside `MyComponent.svelte`, we can receive props with the `$
 Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
 
 ```js
-/// file: MyComponent.svelte
 let { adjective = 'happy' } = $props();
 ```
 
-> [!NOTE] Fallback values are not turned into reactive state proxies.
+> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)
 
 ## Renaming props
 
@@ -66,9 +65,8 @@ let { a, b, c, ...others } = $props();
 
 References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
 
-<!-- prettier-ignore -->
 ```svelte
-/// file: App.svelte
+<!--- file: App.svelte --->
 <script>
 	import Child from './Child.svelte';
 
@@ -82,9 +80,8 @@ References to a prop inside a component update when the prop itself updates —
 <Child {count} />
 ```
 
-<!-- prettier-ignore -->
 ```svelte
-/// file: Child.svelte
+<!--- file: Child.svelte --->
 <script>
 	let { count } = $props();
 </script>
@@ -94,6 +91,77 @@ References to a prop inside a component update when the prop itself updates —
 </button>
 ```
 
+Prop variables are not automatically deeply reactive. What happens when mutating one of their properties depends on what the parent passed in. For example if the parent passed a non-reactive POJO as a prop, setting a property of that object in the child will not cause the component to update ([demo](/playground/untitled#H4sIAAAAAAAAE3VPS07DMBC9yshCaiuqBLYhjoQ4Q1eEReJOVIMztuJJBbJ8d-IkEqXQ5bx53yCo6VEU4kCs2eBR7EWnDXpRvAbBXy79EjDhK_PZucyf0XDC2sbjf7iyxEg82YjSq0E7rmqqWffODgwvJ22O0A22h02Wz9cq3TzVVOY_CioXrm3fUbEMQdmRuICHGCGvpiDGTxYFDyPG_Y3Cl_6_K199bpQ2yBDWBhBBwp0brPPb3Z-u7chsCSwpo9WHDNsdyApCMslzODUeyAJ23WSUsMUymyfBvYTHmmKcI2e9LyBcUmKKWyKulr_Fb2Z_SHPIAQAA)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Child from './Child.svelte';
+
+	let object = $state({count: 0});
+</script>
+
+<Child {object} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { object } = $props();
+</script>
+
+<button onclick={() => {
+	// has no effect
+	object.count += 1
+}}>
+	clicks: {object.count}
+</button>
+```
+
+However if the value passed in by the parent component is itself a deeply reactive state object, then it will be deeply reactive in the child, too ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VlITUVVQLXkERC_YaeCIfE2aoujm3FGwqy_O_YcSug0KNnx7Nv1jHVjchKtlMkSOLANmwvJFpWvjhGnybOohD0s_PZmNy-o6So9Z3F_3SuFaGiEMMqyydhqGlVS2I0eiLYHoQcYD_pEVZ5sbzOX1dPwRaMEgl0f0ROUMOdpY4wc1zPikp48OvgqorvXFWlRJe-eCiawED4QaykaUa_udHl5-rfba4mN_pETHcB9RHVTNrY7C9gPxNpBVpxKfhb7bI11A24GFIUcBJSAu9mi0AHhKUo9Cj1CUjDbIbQP1rTpjzN72t4bJX3C8kSa8vLCZLFR4q0-eogr_4LN7sC9foBAAA=)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Child from './Child.svelte';
+
+	let object = $state({count: 0});
+</script>
+
+<Child {object} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { object } = $props();
+</script>
+
+<button onclick={() => {
+	// will cause the count below to update
+	object.count += 1
+}}>
+	clicks: {object.count}
+</button>
+```
+
+The fallback value of a prop not declared with `$bindable` is treated like a non-reactive POJO, and therefore also doesn't update the component when mutating its properties.
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { object = { count = 0 } } = $props();
+</script>
+<button onclick={() => {
+	// has no effect if the fallback value is used
+	object.count += 1
+}}>
+	clicks: {object.count}
+</button>
+```
+
+In general, mutating props is discouraged, instead use callback props to make it easier to reason about state and changes to that state. If parent and child should share (and be allowed to mutate) the same object, then use the [$bindable]($bindable) rune.
+
 ## Type safety
 
 You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...

apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md

@@ -68,3 +68,12 @@ Similarly, if you only want to show the error state, you can omit the `then` blo
 	<p>The error is {error}</p>
 {/await}
 ```
+
+> [!NOTE] You can use `#await` with [`import(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to render components lazily:
+>
+> ```svelte
+> {#await import('./Component.svelte') then { default: Component }}
+> 	<Component />
+> {/await}
+> ```
+

apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md

@@ -376,7 +376,7 @@ If you wanted multiple UI placeholders, you had to use named slots. In Svelte 5,
 </main>
 
 <footer>
-	---<slot name="header" />---
+	---<slot name="footer" />---
 	+++{@render footer()}+++
 </footer>
 ```

apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md

@@ -2,131 +2,162 @@
 title: 'Runtime warnings'
 ---
 
-## Client warnings
+## Client errors
 
-### binding_property_non_reactive
+### bind_invalid_checkbox_value
 
 ```
-`%binding%` is binding to a non-reactive property
+Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
 ```
 
+### bind_invalid_export
+
+```
+Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
+```
+
+### bind_not_bindable
+
 ```
-`%binding%` (%location%) is binding to a non-reactive property
+A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
 ```
 
-### console_log_state
+### component_api_changed
 
 ```
-Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
 ```
 
-When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
+### component_api_invalid_new
 
-The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
+```
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+```
 
-### event_handler_invalid
+### derived_references_self
 
 ```
-%handler% should be a function. Did you mean to %suggestion%?
+A derived value cannot reference itself recursively
 ```
 
-### hydration_attribute_changed
+### each_key_duplicate
+
+```
+Keyed each block has duplicate key at indexes %a% and %b%
+```
 
 ```
-The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
+Keyed each block has duplicate key `%value%` at indexes %a% and %b%
 ```
 
-### hydration_html_changed
+### effect_in_teardown
 
 ```
-The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
+`%rune%` cannot be used inside an effect cleanup function
 ```
 
+### effect_in_unowned_derived
+
 ```
-The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
+Effect cannot be created inside a `$derived` value that was not itself created inside an effect
 ```
 
-### hydration_mismatch
+### effect_orphan
 
 ```
-Hydration failed because the initial UI does not match what was rendered on the server
+`%rune%` can only be used inside an effect (e.g. during component initialisation)
 ```
 
+### effect_update_depth_exceeded
+
 ```
-Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
+Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
 ```
 
-### invalid_raw_snippet_render
+### hydration_failed
 
 ```
-The `render` function passed to `createRawSnippet` should return HTML for a single element
+Failed to hydrate the application
 ```
 
-### legacy_recursive_reactive_block
+### invalid_snippet
 
 ```
-Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
+Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
 ```
 
-### lifecycle_double_unmount
+### lifecycle_legacy_only
 
 ```
-Tried to unmount a component that was not mounted
+`%name%(...)` cannot be used in runes mode
 ```
 
-### ownership_invalid_binding
+### props_invalid_value
 
 ```
-%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
 ```
 
-### ownership_invalid_mutation
+### props_rest_readonly
 
 ```
-Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+Rest element properties of `$props()` such as `%property%` are readonly
 ```
 
+### rune_outside_svelte
+
 ```
-%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 ```
 
-### state_proxy_equality_mismatch
+### state_descriptors_fixed
 
 ```
-Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
+Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
 ```
 
-`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
+### state_prototype_fixed
+
+```
+Cannot set prototype of `$state` object
+```
 
-```svelte
-<script>
-	let value = { foo: 'bar' };
-	let proxy = $state(value);
+### state_unsafe_local_read
 
-	value === proxy; // always false
-</script>
 ```
+Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
+```
+
+### state_unsafe_mutation
 
-To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
+```
+Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+```
 
 
-## Shared warnings
+## Shared errors
 
-### dynamic_void_element_content
+### invalid_default_snippet
 
 ```
-`<svelte:element this="%tag%">` is a void element — it cannot have content
+Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
 ```
 
-### state_snapshot_uncloneable
+### lifecycle_outside_component
 
 ```
-Value cannot be cloned with `$state.snapshot` — the original value was returned
+`%name%(...)` can only be used during component initialisation
 ```
 
+### store_invalid_shape
+
 ```
-The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
+`%name%` is not a store with a `subscribe` method
+```
+
+### svelte_element_invalid_this_value
 
-%properties%
+```
+The `this` prop on `<svelte:element>` must be a string, if defined
 ```