docs: sync new Svelte(Kit) changes (#481)

Author: Rich-Harris

apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md

@@ -37,8 +37,6 @@ In addition to normal JavaScript, you can use _runes_ to declare [component prop
 
 A `<script>` tag with a `module` attribute runs once when the module first evaluates, rather than for each component instance. Variables declared in this block can be referenced elsewhere in the component, but not vice versa.
 
-You can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.
-
 ```svelte
 <script module>
 	let total = 0;
@@ -50,6 +48,8 @@ You can `export` bindings from this block, and they will become exports of the c
 </script>
 ```
 
+You can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.
+
 ## `<style>`
 
 CSS inside a `<style>` block will be scoped to that component.

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

@@ -97,7 +97,7 @@ let person = $state.raw({
 	age: 49
 });
 
-// this will have no effect (and will throw an error in dev)
+// this will have no effect
 person.age += 1;
 
 // this will work, because we're creating a new person

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

@@ -4,7 +4,7 @@ title: $effect
 
 Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed, and re-runs the function when that state later changes.
 
-Most of the effects in a Svelte app are created by Svelte itself — they're the bits that update the text in `<h1>hello {name}!</h1>` when `name` changes.
+Most of the effects in a Svelte app are created by Svelte itself — they're the bits that update the text in `<h1>hello {name}!</h1>` when `name` changes, for example.
 
 But you can also create your own effects with the `$effect` rune, which is useful when you need to synchronize an external system (whether that's a library, or a `<canvas>` element, or something across a network) with state inside your Svelte app.
 
@@ -68,7 +68,7 @@ You can return a function from `$effect`, which will run immediately before the
 
 `$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
 
-Values that are read asynchronously — after an `await` or inside a `setTimeout`, for example — will _not_ be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
+Values that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
 
 ```ts
 // @filename: index.ts
@@ -175,7 +175,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 </div>
 ```
 
-Apart from the timing, `$effect.pre` works exactly like `$effect` — refer to its documentation for more info.
+Apart from the timing, `$effect.pre` works exactly like `$effect`.
 
 ## `$effect.tracking`
 

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

@@ -2,4 +2,127 @@
 title: $props
 ---
 
-Coming soon!
+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
+<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
+<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
+<script>
+	let +++{ adjective }+++ = $props();
+</script>
+
+<p>this component is {+++adjective+++}</p>
+```
+
+## Fallback values
+
+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.
+
+## Renaming props
+
+We can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`:
+
+```js
+let { super: trouper = 'lights are gonna find me' } = $props();
+```
+
+## Rest props
+
+Finally, we can use a _rest property_ to get, well, the rest of the props:
+
+```js
+let { a, b, c, ...others } = $props();
+```
+
+## Updating 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 emphemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
+
+<!-- prettier-ignore -->
+```svelte
+/// file: App.svelte
+<script>
+	import Child from './Child.svelte';
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => (count += 1)}>
+	clicks (parent): {count}
+</button>
+
+<Child {count} />
+```
+
+<!-- prettier-ignore -->
+```svelte
+/// file: Child.svelte
+<script>
+	let { count } = $props();
+</script>
+
+<button onclick={() => (count += 1)}>
+	clicks (child): {count}
+</button>
+```
+
+## 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...
+
+```svelte
+<script lang="ts">
+	let { adjective }: { adjective: string } = $props();
+</script>
+```
+
+...while in JSDoc you can do this:
+
+```svelte
+<script>
+	/** @type {{ adjective: string }} */
+	let { adjective } = $props();
+</script>
+```
+
+You can, of course, separate the type declaration from the annotation:
+
+```svelte
+<script lang="ts">
+	interface Props {
+		adjective: string;
+	}
+
+	let { adjective }: Props = $props();
+</script>
+```
+
+Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.

apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md

@@ -2,4 +2,53 @@
 title: $bindable
 ---
 
-Coming soon!
+Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.
+
+In Svelte, component props can be _bound_, which means that data can also flow _up_ from child to parent. This isn't something you should do often, but it can simplify your code if used sparingly and carefully.
+
+It also means that a state proxy can be _mutated_ in the child.
+
+> [!NOTE] Mutation is also possible with normal props, but is strongly discouraged — Svelte will warn you if it detects that a component is mutating state it does not 'own'.
+
+To mark a prop as bindable, we use the `$bindable` rune:
+
+<!-- prettier-ignore -->
+```svelte
+/// file: FancyInput.svelte
+<script>
+	let { value = $bindable(), ...props } = $props();
+</script>
+
+<input bind:value={value} {...props} />
+
+<style>
+	input {
+		font-family: 'Comic Sans MS';
+		color: deeppink;
+	}
+</style>
+```
+
+Now, a component that uses `<FancyInput>` can add the [`bind:`](bind) directive ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwWrDMBBEf2URBSfg2nfFMZRCoYeecqx6UJx1IyqvhLUONcb_XqSkTUOSk1az7DBvJtEai0HI90nw6FHIJIhckO7i78n7IhzQctS2OuAtvXHESByEFFVoeuO5VqTYdN71DC-amvGV_MDQ9q6DrCjP0skkWymKJxYZOgxBfyKs4SGwZlxke7TWZcuVoqo8-1P1z3lraCcP2g64nk4GM5S1osrXf0JV-lrkgvGbheR-wDm_g30V8JL-1vpOCZFogpQsEsWcemtxscyhKArfOx9gjps0Lq4hzRVfemaYfu-PoIqqwKPFY_XpaIqj4tYRP7a6M3aUkD27zjSw0RTgbZN6Z8WNs66XsEP03tBXUueUJFlelvYx_wCuI3leNwIAAA==)):
+
+<!-- prettier-ignore -->
+```svelte
+/// App.svelte
+<script>
+	import FancyInput from './FancyInput.svelte';
+
+	let message = $state('hello');
+</script>
+
+<FancyInput bind:value={message} />
+<p>{message}</p>
+```
+
+The parent component doesn't _have_ to use `bind:` — it can just pass a normal prop. Some parents don't want to listen to what their children have to say.
+
+In this case, you can specify a fallback value for when no prop is passed at all:
+
+```js
+/// file: FancyInput.svelte
+let { value = $bindable('fallback'), ...props } = $props();
+```

apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md

@@ -2,4 +2,43 @@
 title: $inspect
 ---
 
-Coming soon!
+The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire ([demo](/#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA)):
+
+```svelte
+<script>
+	let count = $state(0);
+	let message = $state('hello');
+
+	$inspect(count, message); // will console.log when `count` or `message` change
+</script>
+
+<button onclick={() => count++}>Increment</button>
+<input bind:value={message} />
+```
+
+## $inspect(...).with
+
+`$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`; subsequent arguments are the values passed to `$inspect` ([demo](/#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)):
+
+```svelte
+<script>
+	let count = $state(0);
+
+	$inspect(count).with((type, count) => {
+		if (type === 'update') {
+			debugger; // or `console.trace`, or whatever you want
+		}
+	});
+</script>
+
+<button onclick={() => count++}>Increment</button>
+```
+
+A convenient way to find the origin of some change is to pass `console.trace` to `with`:
+
+```js
+// @errors: 2304
+$inspect(stuff).with(console.trace);
+```
+
+> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.

apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md

@@ -2,4 +2,36 @@
 title: $host
 ---
 
-Coming soon!
+When compiling a component as a custom element, the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
+
+<!-- prettier-ignore -->
+```svelte
+/// file: Stepper.svelte
+<svelte:options customElement="my-stepper" />
+
+<script>
+	function dispatch(type) {
+		+++$host()+++.dispatchEvent(new CustomEvent(type));
+	}
+</script>
+
+<button onclick={() => dispatch('decrement')}>decrement</button>
+<button onclick={() => dispatch('increment')}>increment</button>
+```
+
+<!-- prettier-ignore -->
+```svelte
+/// file: App.svelte
+<script>
+	import './Stepper.svelte';
+
+	let count = $state(0);
+</script>
+
+<my-stepper
+	ondecrement={() => count -= 1}
+	onincrement={() => count += 1}
+></my-stepper>
+
+<p>count: {count}</p>
+```

apps/svelte.dev/content/docs/svelte/03-template-syntax/02-if.md

@@ -2,4 +2,39 @@
 title: {#if ...}
 ---
 
-Coming soon!
+```svelte
+<!--- copy: false  --->
+{#if expression}...{/if}
+```
+
+```svelte
+<!--- copy: false  --->
+{#if expression}...{:else if expression}...{/if}
+```
+
+```svelte
+<!--- copy: false  --->
+{#if expression}...{:else}...{/if}
+```
+
+Content that is conditionally rendered can be wrapped in an if block.
+
+```svelte
+{#if answer === 42}
+	<p>what was the question?</p>
+{/if}
+```
+
+Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
+
+```svelte
+{#if porridge.temperature > 100}
+	<p>too hot!</p>
+{:else if 80 > porridge.temperature}
+	<p>too cold!</p>
+{:else}
+	<p>just right!</p>
+{/if}
+```
+
+(Blocks don't have to wrap elements, they can also wrap text within elements.)