Sync svelte docs (#1098)

sync svelte docs

Co-authored-by: Rich-Harris <[email protected]>

Author: github-actions[bot]

apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md

@@ -194,53 +194,7 @@ The `$effect.tracking` rune is an advanced feature that tells you whether or not
 <p>in template: {$effect.tracking()}</p> <!-- true -->
 ```
 
-This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects. Here's a `readable` function that listens to changes from a callback function as long as it's inside a tracking context:
-
-```ts
-import { tick } from 'svelte';
-
-export default function readable<T>(
-	initial_value: T,
-	start: (callback: (update: (v: T) => T) => T) => () => void
-) {
-	let value = $state(initial_value);
-
-	let subscribers = 0;
-	let stop: null | (() => void) = null;
-
-	return {
-		get value() {
-			// If in a tracking context ...
-			if ($effect.tracking()) {
-				$effect(() => {
-					// ...and there's no subscribers yet...
-					if (subscribers === 0) {
-						// ...invoke the function and listen to changes to update state
-						stop = start((fn) => (value = fn(value)));
-					}
-
-					subscribers++;
-
-					// The return callback is called once a listener unlistens
-					return () => {
-						tick().then(() => {
-							subscribers--;
-							// If it was the last subscriber...
-							if (subscribers === 0) {
-								// ...stop listening to changes
-								stop?.();
-								stop = null;
-							}
-						});
-					};
-				});
-			}
-
-			return value;
-		}
-	};
-}
-```
+It is used to implement abstractions like [`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), which will create listeners to update reactive values but _only_ if those values are being tracked (rather than, for example, read inside an event handler).
 
 ## `$effect.root`
 

apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md

@@ -222,3 +222,15 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 ```
 
 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.
+
+### transition_slide_display
+
+```
+The `slide` transition does not work correctly for elements with `display: %value%`
+```
+
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
+
+- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`
+- `display: contents`

apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md

@@ -331,7 +331,39 @@ The $ prefix is reserved, and cannot be used for variables and imports
 ### each_item_invalid_assignment
 
 ```
-Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)
+```
+
+In legacy mode, it was possible to reassign or bind to the each block argument itself:
+
+```svelte
+<script>
+	let array = [1, 2, 3];
+</script>
+
+{#each array as entry}
+	<!-- reassignment -->
+	<button on:click={() => entry = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={entry}>
+{/each}
+```
+
+This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead:
+
+```svelte
+<script>
+	let array = $state([1, 2, 3]);
+</script>
+
+{#each array as entry, i}
+	<!-- reassignment -->
+	<button onclick={() => array[i] = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={array[i]}>
+{/each}
 ```
 
 ### effect_invalid_placement

apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md

@@ -336,7 +336,39 @@ The $ prefix is reserved, and cannot be used for variables and imports
 ### each_item_invalid_assignment
 
 ```
-Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)
+```
+
+In legacy mode, it was possible to reassign or bind to the each block argument itself:
+
+```svelte
+<script>
+	let array = [1, 2, 3];
+</script>
+
+{#each array as entry}
+	<!-- reassignment -->
+	<button on:click={() => entry = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={entry}>
+{/each}
+```
+
+This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead:
+
+```svelte
+<script>
+	let array = $state([1, 2, 3]);
+</script>
+
+{#each array as entry, i}
+	<!-- reassignment -->
+	<button onclick={() => array[i] = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={array[i]}>
+{/each}
 ```
 
 ### effect_invalid_placement

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

@@ -230,6 +230,18 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 
 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.
 
+### transition_slide_display
+
+```
+The `slide` transition does not work correctly for elements with `display: %value%`
+```
+
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
+
+- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`
+- `display: contents`
+
 
 ## Shared warnings