├── README.md
├── svelte5_typescript.txt
├── svelte5_snippets.txt
├── svelte_4-5_migration_guide.txt
├── svelte5_events.txt
├── svelte5_runes.txt
└── svelte5_full_context.txt


/README.md:
--------------------------------------------------------------------------------
 1 | ## Svelte 5 for LLMs
 2 | 
 3 | Getting LLMs to write Svelte 5 is hard and it will stay that way until more Svelte 5 code hits model training data. Until then, we’re stuck with partial understanding and workarounds.
 4 | 
 5 | Dumping full documentation doesn’t help. It’s too big, too noisy, and wastes tokens. Most models already understand Svelte 3/4 and since Svelte 5 doesn't change everything, only the new pieces need to be shown.
 6 | 
 7 | The official [`llms-small.txt`](https://svelte.dev/llms-small.txt) is over 130k tokens. That’s way beyond what models can reason over. Smaller contexts (think 8k–12k tokens) work best.
 8 | 
 9 | This repo is a minimal, example-based reference focused on what changed in Svelte 5. It's written to be copy-pasted into prompts. No extra explanation, just clean annotated code.
10 | 
11 | ### What's in here
12 | 
13 | Each file is standalone and scoped:
14 | 
15 | - [svelte5_runes.txt](./svelte5_runes.txt) — `$state`, `$effect`, `$derived`, `$bindable`, `$props`, `$host`, `$inspect`
16 | - [svelte5_events.txt](./svelte5_events.txt) — event handling, callback props, modifiers, bubbling
17 | - [svelte5_snippets.txt](./svelte5_snippets.txt) — Svelte 5 snippets (`{#snippet}`, `{@render}`), slot replacement
18 | - [svelte5_typescript.txt](./svelte5_typescript.txt) — typing props, components, DOM attributes
19 | - [svelte_4-5_migration_guide.txt](./svelte_4-5_migration_guide.txt) — what changed from Svelte 4 to 5
20 | - **[svelte5_full_context.txt](./svelte5_full_context.txt) — everything above in one file (12k tokens, works decently with most SOTA models)**
21 | 


--------------------------------------------------------------------------------
/svelte5_typescript.txt:
--------------------------------------------------------------------------------
  1 | # Svelte 5 + TypeScript
  2 | 
  3 | <!-- ================================== -->
  4 | <!-- Example 1: Using TypeScript in Svelte Components -->
  5 | <!-- ================================== -->
  6 | 
  7 | <!-- Demonstrates basic TypeScript setup inside a Svelte component. -->
  8 | 
  9 | ---
 10 | 
 11 | <!-- Filename: App.svelte -->
 12 | <script lang="ts">
 13 | 	let name: string = 'world';
 14 | 
 15 | 	function greet(name: string) {
 16 | 		alert(`Hello, ${name}!`);
 17 | 	}
 18 | </script>
 19 | 
 20 | <button onclick={() => greet(name)}>Greet</button>
 21 | 
 22 | ---
 23 | 
 24 | ### Notes:
 25 | - Adding `lang="ts"` enables TypeScript.
 26 | - Type annotations (`string`) help with static checking.
 27 | - No runtime overhead since TypeScript removes type annotations at compile time.
 28 | 
 29 | ---
 30 | 
 31 | <!-- ================================== -->
 32 | <!-- Example 2: Typing Component Props -->
 33 | <!-- ================================== -->
 34 | 
 35 | <!-- Shows how to type component props in Svelte. -->
 36 | 
 37 | ---
 38 | 
 39 | <!-- Filename: Greeting.svelte -->
 40 | <script lang="ts">
 41 | 	interface Props {
 42 | 		name: string;
 43 | 	}
 44 | 
 45 | 	let { name }: Props = $props();
 46 | </script>
 47 | 
 48 | <p>Hello, {name}!</p>
 49 | 
 50 | ---
 51 | 
 52 | <!-- Filename: App.svelte -->
 53 | <script lang="ts">
 54 | 	import Greeting from './Greeting.svelte';
 55 | </script>
 56 | 
 57 | <Greeting name="Alice" />
 58 | 
 59 | ---
 60 | 
 61 | ### Notes:
 62 | - `Props` interface ensures `name` is always a string.
 63 | - `$props()` extracts the component’s props with proper typing.
 64 | 
 65 | ---
 66 | 
 67 | <!-- ================================== -->
 68 | <!-- Example 3: Generic Component Props -->
 69 | <!-- ================================== -->
 70 | 
 71 | <!-- Demonstrates generic props for flexible typing. -->
 72 | 
 73 | ---
 74 | 
 75 | <!-- Filename: List.svelte -->
 76 | <script lang="ts" generics="Item">
 77 | 	interface Props {
 78 | 		items: Item[];
 79 | 		select: (item: Item) => void;
 80 | 	}
 81 | 
 82 | 	let { items, select }: Props = $props();
 83 | </script>
 84 | 
 85 | {#each items as item}
 86 | 	<button onclick={() => select(item)}>{item}</button>
 87 | {/each}
 88 | 
 89 | ---
 90 | 
 91 | <!-- Filename: App.svelte -->
 92 | <script lang="ts">
 93 | 	import List from './List.svelte';
 94 | 
 95 | 	const names = ['Alice', 'Bob', 'Charlie'];
 96 | 
 97 | 	function handleSelect(name: string) {
 98 | 		console.log('Selected:', name);
 99 | 	}
100 | </script>
101 | 
102 | <List items={names} select={handleSelect} />
103 | 
104 | ---
105 | 
106 | ### Notes:
107 | - `generics="Item"` allows the component to accept any item type.
108 | - Ensures `items` and `select` function operate on the same type.
109 | 
110 | ---
111 | 
112 | <!-- ================================== -->
113 | <!-- Example 4: Typing $state -->
114 | <!-- ================================== -->
115 | 
116 | <!-- Shows how to type state variables in Svelte. -->
117 | 
118 | ---
119 | 
120 | <!-- Filename: Counter.svelte -->
121 | <script lang="ts">
122 | 	let count: number = $state(0);
123 | 
124 | 	function increment() {
125 | 		count += 1;
126 | 	}
127 | </script>
128 | 
129 | <button onclick={increment}>Count: {count}</button>
130 | 
131 | ---
132 | 
133 | ### Notes:
134 | - `$state(0)` initializes a reactive variable with a type.
135 | - Without an initial value, TypeScript infers `number | undefined`.
136 | 
137 | ---
138 | 
139 | <!-- ================================== -->
140 | <!-- Example 5: Typing Wrapper Components -->
141 | <!-- ================================== -->
142 | 
143 | <!-- Demonstrates how to type wrapper components that extend native HTML elements. -->
144 | 
145 | ---
146 | 
147 | <!-- Filename: Button.svelte -->
148 | <script lang="ts">
149 | 	import type { HTMLButtonAttributes } from 'svelte/elements';
150 | 
151 | 	let { children, ...rest }: HTMLButtonAttributes = $props();
152 | </script>
153 | 
154 | <button {...rest}>{@render children?.()}</button>
155 | 
156 | ---
157 | 
158 | <!-- Filename: App.svelte -->
159 | <script lang="ts">
160 | 	import Button from './Button.svelte';
161 | </script>
162 | 
163 | <Button onclick={() => alert('Clicked!')}>Click Me</Button>
164 | 
165 | ---
166 | 
167 | ### Notes:
168 | - `HTMLButtonAttributes` ensures `Button.svelte` supports all standard button attributes.
169 | - `...rest` spreads remaining props onto the `<button>`.
170 | 
171 | ---
172 | 
173 | <!-- ================================== -->
174 | <!-- Example 6: Typing Custom Events and Attributes -->
175 | <!-- ================================== -->
176 | 
177 | <!-- Demonstrates how to extend built-in DOM types for custom attributes and events. -->
178 | 
179 | ---
180 | 
181 | <!-- Filename: additional-svelte-typings.d.ts -->
182 | declare namespace svelteHTML {
183 | 	interface IntrinsicElements {
184 | 		'custom-element': { customProp: string; 'on:customEvent': (e: CustomEvent<any>) => void };
185 | 	}
186 | }
187 | 
188 | ---
189 | 
190 | <!-- Filename: App.svelte -->
191 | <script lang="ts">
192 | 	function handleEvent(e: CustomEvent) {
193 | 		console.log('Custom event:', e.detail);
194 | 	}
195 | </script>
196 | 
197 | <custom-element customProp="Hello" on:customEvent={handleEvent}></custom-element>
198 | 
199 | ---
200 | 
201 | ### Notes:
202 | - Extending `IntrinsicElements` allows TypeScript to recognize `<custom-element>` and its props.
203 | - Avoids TypeScript errors when using experimental or third-party web components.
204 | 
205 | ---
206 | 


--------------------------------------------------------------------------------
/svelte5_snippets.txt:
--------------------------------------------------------------------------------
  1 | # Svelte 5 Snippets
  2 | 
  3 | <!-- ================================== -->
  4 | <!-- Example 1: Basic Snippet Usage -->
  5 | <!-- ================================== -->
  6 | 
  7 | <!-- Demonstrates how to create and use a snippet to avoid repetitive markup -->
  8 | 
  9 | ---
 10 | 
 11 | <!-- Filename: ImageList.svelte -->
 12 | <script>
 13 | 	let images = [
 14 | 		{ src: "image1.jpg", caption: "Image 1", href: "https://example.com" },
 15 | 		{ src: "image2.jpg", caption: "Image 2" }
 16 | 	];
 17 | </script>
 18 | 
 19 | {#snippet figure(image)}
 20 | 	<figure>
 21 | 		<img src={image.src} alt={image.caption} />
 22 | 		<figcaption>{image.caption}</figcaption>
 23 | 	</figure>
 24 | {/snippet}
 25 | 
 26 | {#each images as image}
 27 | 	{#if image.href}
 28 | 		<a href={image.href}>
 29 | 			{@render figure(image)}
 30 | 		</a>
 31 | 	{:else}
 32 | 		{@render figure(image)}
 33 | 	{/if}
 34 | {/each}
 35 | 
 36 | ---
 37 | 
 38 | <!-- This example shows how snippets reduce duplication in templates -->
 39 | 
 40 | <!-- ================================== -->
 41 | <!-- Example 2: Snippet Scope and Visibility -->
 42 | <!-- ================================== -->
 43 | 
 44 | <!-- Demonstrates snippet scoping rules and visibility -->
 45 | 
 46 | ---
 47 | 
 48 | <!-- Filename: ScopedSnippets.svelte -->
 49 | <div>
 50 | 	{#snippet x()}
 51 | 		{#snippet y()}
 52 | 			<p>Inside y</p>
 53 | 		{/snippet}
 54 | 
 55 | 		<!-- Rendering `y` inside `x` is allowed -->
 56 | 		{@render y()}
 57 | 	{/snippet}
 58 | 
 59 | 	<!-- This will cause an error because `y` is out of scope -->
 60 | 	{@render y()}
 61 | </div>
 62 | 
 63 | <!-- This will also cause an error because `x` is out of scope -->
 64 | {@render x()}
 65 | 
 66 | ---
 67 | 
 68 | <!-- Notes: Snippets are only accessible within their lexical scope -->
 69 | 
 70 | <!-- ================================== -->
 71 | <!-- Example 3: Recursive Snippets -->
 72 | <!-- ================================== -->
 73 | 
 74 | <!-- Demonstrates how a snippet can reference itself -->
 75 | 
 76 | ---
 77 | 
 78 | <!-- Filename: Countdown.svelte -->
 79 | {#snippet blastoff()}
 80 | 	<span>🚀</span>
 81 | {/snippet}
 82 | 
 83 | {#snippet countdown(n)}
 84 | 	{#if n > 0}
 85 | 		<span>{n}...</span>
 86 | 		{@render countdown(n - 1)}
 87 | 	{:else}
 88 | 		{@render blastoff()}
 89 | 	{/if}
 90 | {/snippet}
 91 | 
 92 | {@render countdown(5)}
 93 | 
 94 | ---
 95 | 
 96 | <!-- Recursive snippets are useful for countdowns, trees, and nested structures -->
 97 | 
 98 | <!-- ================================== -->
 99 | <!-- Example 4: Passing Snippets to Components -->
100 | <!-- ================================== -->
101 | 
102 | <!-- Demonstrates passing snippets as props to a component -->
103 | 
104 | ---
105 | 
106 | <!-- Filename: Table.svelte -->
107 | <script>
108 | 	let { data, header, row } = $props();
109 | </script>
110 | 
111 | <table>
112 | 	<thead>
113 | 		<tr>{@render header()}</tr>
114 | 	</thead>
115 | 	<tbody>
116 | 		{#each data as item}
117 | 			<tr>{@render row(item)}</tr>
118 | 		{/each}
119 | 	</tbody>
120 | </table>
121 | 
122 | ---
123 | 
124 | <!-- Filename: App.svelte -->
125 | <script>
126 | 	import Table from "./Table.svelte";
127 | 
128 | 	const fruits = [
129 | 		{ name: "Apples", qty: 5, price: 2 },
130 | 		{ name: "Bananas", qty: 10, price: 1 },
131 | 		{ name: "Cherries", qty: 20, price: 0.5 }
132 | 	];
133 | </script>
134 | 
135 | {#snippet header()}
136 | 	<th>Fruit</th>
137 | 	<th>Qty</th>
138 | 	<th>Price</th>
139 | 	<th>Total</th>
140 | {/snippet}
141 | 
142 | {#snippet row(d)}
143 | 	<td>{d.name}</td>
144 | 	<td>{d.qty}</td>
145 | 	<td>{d.price}</td>
146 | 	<td>{d.qty * d.price}</td>
147 | {/snippet}
148 | 
149 | <Table data={fruits} {header} {row} />
150 | 
151 | ---
152 | 
153 | <!-- Snippets allow passing reusable markup structures into components -->
154 | 
155 | <!-- ================================== -->
156 | <!-- Example 5: Default Slot with Snippets -->
157 | <!-- ================================== -->
158 | 
159 | <!-- Demonstrates how snippets replace slots in Svelte 5 -->
160 | 
161 | ---
162 | 
163 | <!-- Filename: Button.svelte -->
164 | <script>
165 | 	let { children } = $props();
166 | </script>
167 | 
168 | <button>{@render children()}</button>
169 | 
170 | ---
171 | 
172 | <!-- Filename: App.svelte -->
173 | <Button>Click Me</Button>
174 | 
175 | ---
176 | 
177 | <!-- Any non-snippet content passed to a component becomes the `children` snippet -->
178 | 
179 | <!-- ================================== -->
180 | <!-- Example 6: Optional Snippet Props -->
181 | <!-- ================================== -->
182 | 
183 | <!-- Demonstrates handling optional snippet props -->
184 | 
185 | ---
186 | 
187 | <!-- Filename: OptionalSnippet.svelte -->
188 | <script>
189 | 	let { children } = $props();
190 | </script>
191 | 
192 | {#if children}
193 | 	{@render children()}
194 | {:else}
195 | 	<p>Fallback content</p>
196 | {/if}
197 | 
198 | ---
199 | 
200 | <!-- Filename: App.svelte -->
201 | <OptionalSnippet />
202 | <OptionalSnippet>
203 | 	{#snippet children()}
204 | 		<p>Custom content</p>
205 | 	{/snippet}
206 | </OptionalSnippet>
207 | 
208 | ---
209 | 
210 | <!-- Use `optional chaining` or `#if` blocks to handle missing snippets -->
211 | 
212 | <!-- ================================== -->
213 | <!-- Example 7: Exporting Snippets -->
214 | <!-- ================================== -->
215 | 
216 | <!-- Demonstrates exporting a snippet for use in other components -->
217 | 
218 | ---
219 | 
220 | <!-- Filename: math.svelte -->
221 | <script module>
222 | 	export { add };
223 | </script>
224 | 
225 | {#snippet add(a, b)}
226 | 	{a} + {b} = {a + b}
227 | {/snippet}
228 | 
229 | ---
230 | 
231 | <!-- Filename: App.svelte -->
232 | <script>
233 | 	import { add } from "./math.svelte";
234 | </script>
235 | 
236 | {@render add(2, 3)}
237 | 
238 | ---
239 | 
240 | <!-- Note: You can pass snippets to components that use slots, but not vice versa -->
241 | 
242 | <!-- ================================== -->
243 | <!-- Example 8: Multiple Content Placeholders -->
244 | <!-- ================================== -->
245 | 
246 | <!-- Demonstrates using multiple snippets instead of named slots -->
247 | 
248 | ---
249 | 
250 | <!-- Filename: Layout.svelte -->
251 | <script>
252 | 	let { header, main, footer } = $props();
253 | </script>
254 | 
255 | <header>
256 | 	{@render header?.()}
257 | </header>
258 | 
259 | <main>
260 | 	{@render main?.()}
261 | </main>
262 | 
263 | <footer>
264 | 	{@render footer?.()}
265 | </footer>
266 | 
267 | ---
268 | 
269 | <!-- Filename: App.svelte -->
270 | <script>
271 | 	import Layout from "./Layout.svelte";
272 | </script>
273 | 
274 | <Layout>
275 | 	{#snippet header()}
276 | 		<h1>My Website</h1>
277 | 	{/snippet}
278 | 	
279 | 	{#snippet main()}
280 | 		<p>Welcome to my website!</p>
281 | 	{/snippet}
282 | 	
283 | 	{#snippet footer()}
284 | 		<p>© 2023 My Website</p>
285 | 	{/snippet}
286 | </Layout>
287 | 
288 | ---
289 | 
290 | 
291 | <!-- ================================== -->
292 | <!-- Example 9: Passing Data to Parent with Snippets -->
293 | <!-- ================================== -->
294 | 
295 | <!-- Demonstrates how snippets allow passing data from child to parent -->
296 | 
297 | ---
298 | 
299 | <!-- Filename: List.svelte -->
300 | <script>
301 | 	let { items, item, empty } = $props();
302 | </script>
303 | 
304 | {#if items.length}
305 | 	<ul>
306 | 		{#each items as entry}
307 | 			<li>
308 | 				{@render item(entry)}
309 | 			</li>
310 | 		{/each}
311 | 	</ul>
312 | {:else}
313 | 	{@render empty?.()}
314 | {/if}
315 | 
316 | ---
317 | 
318 | <!-- Filename: App.svelte -->
319 | <script>
320 | 	import List from "./List.svelte";
321 | 	
322 | 	const fruits = ['Apple', 'Banana', 'Cherry'];
323 | </script>
324 | 
325 | <List items={fruits}>
326 | 	{#snippet item(fruit)}
327 | 		<span>{fruit}</span>
328 | 	{/snippet}
329 | 	
330 | 	{#snippet empty()}
331 | 		<span>No fruits available</span>
332 | 	{/snippet}
333 | </List>
334 | 
335 | ---
336 | 
337 | <!-- 
338 | The child component passes data as parameters to the snippet function,
339 | which the parent can then access and use within the snippet definition.
340 | -->


--------------------------------------------------------------------------------
/svelte_4-5_migration_guide.txt:
--------------------------------------------------------------------------------
  1 | # Svelte 4 → 5 Migration Summary
  2 | 
  3 | **Concise Summary (Svelte 4 → 5)**
  4 | 
  5 | - **New Runes API**  
  6 |   - Reactive variables use `let count = $state(0);`  
  7 |   - Derived values use `const double = $derived(count * 2);`  
  8 |   - Side effects use  
  9 | ```
 10 |     $effect(() => {
 11 |       if (count > 5) alert('Count is too high!');
 12 |     });
 13 | ```
 14 | 
 15 | - **Declaring Props**  
 16 |   - All props come from `let {...} = $props();`  
 17 |   - Example:
 18 | ```
 19 |     <script>
 20 |       let { optional = 'unset', required } = $props();
 21 |     </script>
 22 | ```
 23 |   - Renaming or forwarding props:
 24 | ```
 25 |     <script>
 26 |       let { class: klass, ...rest } = $props();
 27 |     </script>
 28 |     <button class={klass} {...rest}>click me</button>
 29 | ```
 30 | 
 31 |     Below is a concise, mostly bullet-pointed summary of the changes, focusing on code snippets:
 32 | 
 33 | ---
 34 | 
 35 | ### Event Changes
 36 | 
 37 | - **Svelte 4** used `on:` directives.
 38 | - **Svelte 5**: Use regular properties like `onclick` instead (no `:`).
 39 | 
 40 | **Example:**
 41 | ```svelte
 42 | <script>
 43 |   let count = $state(0);
 44 | </script>
 45 | 
 46 | <button onclick={() => count++}>
 47 |   clicks: {count}
 48 | </button>
 49 | ```
 50 | 
 51 | **Shorthand Example:**
 52 | ```svelte
 53 | <script>
 54 |   let count = $state(0);
 55 | 
 56 |   function onclick() {
 57 |     count++;
 58 |   }
 59 | </script>
 60 | 
 61 | <button {onclick}>
 62 |   clicks: {count}
 63 | </button>
 64 | ```
 65 | 
 66 | ---
 67 | 
 68 | ### Component Events
 69 | 
 70 | - **Svelte 4**: `createEventDispatcher` for emitting events.
 71 | - **Svelte 5**: Use callback props instead.
 72 | 
 73 | **Example (App.svelte):**
 74 | ```svelte
 75 | <script lang="ts">
 76 |   import Pump from './Pump.svelte';
 77 | 
 78 |   let size = $state(15);
 79 |   let burst = $state(false);
 80 | 
 81 |   function reset() {
 82 |     size = 15;
 83 |     burst = false;
 84 |   }
 85 | </script>
 86 | 
 87 | <Pump
 88 |   inflate={(power) => {
 89 |     size += power;
 90 |     if (size > 75) burst = true;
 91 |   }}
 92 |   deflate={(power) => {
 93 |     if (size > 0) size -= power;
 94 |   }}
 95 | />
 96 | 
 97 | {#if burst}
 98 |   <button onclick={reset}>new balloon</button>
 99 |   <span class="boom">💥</span>
100 | {:else}
101 |   <span class="balloon" style="scale: {0.01 * size}">
102 |     🎈
103 |   </span>
104 | {/if}
105 | ```
106 | 
107 | **Example (Pump.svelte):**
108 | ```svelte
109 | <script lang="ts">
110 |   let { inflate, deflate } = $props();
111 |   let power = $state(5);
112 | </script>
113 | 
114 | <button onclick={() => inflate(power)}>inflate</button>
115 | <button onclick={() => deflate(power)}>deflate</button>
116 | 
117 | <button onclick={() => power--}>-</button>
118 | Pump power: {power}
119 | <button onclick={() => power++}>+</button>
120 | ```
121 | 
122 | ---
123 | 
124 | ### Bubbling Events
125 | 
126 | - No more `<button on:click>` to forward. 
127 | - Accept a callback prop like `onclick`:
128 | 
129 | ```svelte
130 | <script>
131 |   let { onclick } = $props();
132 | </script>
133 | 
134 | <button {onclick}>
135 |   click me
136 | </button>
137 | ```
138 | 
139 | - Can “spread” handlers with other props:
140 | 
141 | ```svelte
142 | <script>
143 |   let props = $props();
144 | </script>
145 | 
146 | <button {...props}>
147 |   click me
148 | </button>
149 | ```
150 | 
151 | ---
152 | 
153 | ### Event Modifiers
154 | 
155 | - **Svelte 4** example: `<button on:click|once|preventDefault={handler}>...`
156 | - **Svelte 5**: No built-in modifiers. Handle `event.preventDefault()` in the function or wrap manually.
157 | 
158 | **Example Wrappers:**
159 | ```svelte
160 | <script>
161 |   function once(fn) {
162 |     return function (event) {
163 |       if (fn) fn.call(this, event);
164 |       fn = null;
165 |     };
166 |   }
167 | 
168 |   function preventDefault(fn) {
169 |     return function (event) {
170 |       event.preventDefault();
171 |       fn.call(this, event);
172 |     };
173 |   }
174 | </script>
175 | 
176 | <button onclick={once(preventDefault(handler))}>...</button>
177 | ```
178 | 
179 | - For `capture`, do: `onclickcapture={...}`
180 | - For `passive` or `nonpassive`, use an action to attach the event.
181 | 
182 | ---
183 | 
184 | ### Multiple Event Handlers
185 | 
186 | - **Svelte 4** allowed `<button on:click={one} on:click={two}>`.
187 | - **Svelte 5**: Only one `onclick` property. Combine them:
188 | 
189 | ```svelte
190 | <button
191 |   onclick={(e) => {
192 |     one(e);
193 |     two(e);
194 |   }}
195 | >
196 |   ...
197 | </button>
198 | ```
199 | 
200 | - When spreading props, place local handlers afterward to avoid overwriting:
201 | 
202 | ```svelte
203 | <button
204 |   {...props}
205 |   onclick={(e) => {
206 |     doStuff(e);
207 |     props.onclick?.(e);
208 |   }}
209 | >
210 |   ...
211 | </button>
212 | ```
213 | 
214 | 
215 | ---
216 | ---
217 | 
218 | ### **Svelte 5 Changes - Condensed Bullet Points**
219 | 
220 | #### **Component Changes**
221 | - **No More Class Components** → Components are now functions.
222 | - **Instantiation** → Use `mount` or `hydrate` instead of `new Component()`.
223 | - **Mount vs. Hydrate** → `hydrate` picks up server-rendered HTML, otherwise identical to `mount`.
224 | - **No `$on`, `$set`, `$destroy`**
225 |   - `$on` → Use `events` property instead (though callbacks are preferred).
226 |   - `$set` → Use `$state` for reactivity.
227 |   - `$destroy` → Use `unmount`.
228 | 
229 | #### **Code Examples**
230 | ```js
231 | import { mount } from 'svelte';
232 | import App from './App.svelte';
233 | 
234 | const app = mount(App, { 
235 |   target: document.getElementById("app"),
236 |   events: { event: callback } // Replacement for $on
237 | });
238 | 
239 | const props = $state({ foo: 'bar' }); // Replacement for $set
240 | props.foo = 'baz';
241 | 
242 | import { unmount } from 'svelte';
243 | unmount(app); // Replacement for $destroy
244 | ```
245 | 
246 | #### **Legacy Compatibility**
247 | - Use `createClassComponent` from `svelte/legacy` if needed.
248 | - `compatibility.componentApi` option enables auto-backwards compatibility.
249 | 
250 | ```js
251 | export default {
252 |   compilerOptions: {
253 |     compatibility: {
254 |       componentApi: 4
255 |     }
256 |   }
257 | };
258 | ```
259 | 
260 | #### **Asynchronous Behavior**
261 | - `mount` and `hydrate` are **not** synchronous.
262 | - Use `flushSync()` if onMount must be guaranteed to run.
263 | 
264 | #### **Server-Side Rendering (SSR)**
265 | - No `render()` method in components.
266 | - Instead, use `render()` from `svelte/server`.
267 | 
268 | ```js
269 | import { render } from 'svelte/server';
270 | import App from './App.svelte';
271 | 
272 | const { html, head } = render(App, { props: { message: 'hello' }});
273 | ```
274 | 
275 | - **CSS not included by default** → Use `css: 'injected'` to include styles.
276 | 
277 | #### **Typing Changes**
278 | - `SvelteComponent` deprecated → Use `Component` type.
279 | - `ComponentEvents` & `ComponentType` deprecated.
280 | 
281 | ```ts
282 | import type { Component } from 'svelte';
283 | export declare const MyComponent: Component<{ foo: string }>;
284 | ```
285 | 
286 | #### **bind:this Changes**
287 | - No longer returns `$set`, `$on`, or `$destroy` methods.
288 | - Now only returns instance exports & property accessors (if enabled).
289 | 
290 | #### **Dynamic Components**
291 | - `<svelte:component>` no longer needed.
292 | - Components update dynamically when reassigned.
293 | 
294 | ```svelte
295 | <script>
296 |   import A from './A.svelte';
297 |   import B from './B.svelte';
298 |   let Thing = $state();
299 | </script>
300 | 
301 | <select bind:value={Thing}>
302 |   <option value={A}>A</option>
303 |   <option value={B}>B</option>
304 | </select>
305 | 
306 | <!-- Both are now equivalent -->
307 | <Thing />
308 | <svelte:component this={Thing} />
309 | ```
310 | 
311 | #### **Other Changes**
312 | - **Dot Notation** (`<foo.bar>`) now treated as a **component**, not an HTML tag.
313 | - **Whitespace Handling Simplified** → Predictable behavior.
314 | - **Reserved `children` Prop** → Cannot use `children` as a prop name; it's reserved.


--------------------------------------------------------------------------------
/svelte5_events.txt:
--------------------------------------------------------------------------------
  1 | # Svelte 5 Event Handling
  2 | 
  3 | <!-- ================================== -->
  4 | <!-- Example 1: Basic Event Handling -->
  5 | <!-- ================================== -->
  6 | 
  7 | **Svelte 5 replaces `on:` directives with direct property bindings for event handlers.**
  8 | 
  9 | ---
 10 | 
 11 | <!-- Filename: App.svelte -->
 12 | ```svelte
 13 | <script>
 14 | 	let count = $state(0);
 15 | 
 16 | 	function onclick() {
 17 | 		count++;
 18 | 	}
 19 | </script>
 20 | 
 21 | <button {onclick}>
 22 | 	clicks: {count}
 23 | </button>
 24 | ```
 25 | 
 26 | **Key changes**:
 27 | - Removed `on:click`, replacing it with `{onclick}` as a property.
 28 | - Uses a named function (`onclick`) instead of inline arrow functions.
 29 | 
 30 | ---
 31 | 
 32 | <!-- ================================== -->
 33 | <!-- Example 2: Component Event Callbacks -->
 34 | <!-- ================================== -->
 35 | 
 36 | **In Svelte 5, components no longer use `createEventDispatcher()`. Instead, they accept callback props.**
 37 | 
 38 | ---
 39 | 
 40 | <!-- Filename: Pump.svelte -->
 41 | ```svelte
 42 | <script lang="ts">
 43 | 	let { inflate, deflate } = $props(); // Props passed from parent
 44 | 	let power = $state(5);
 45 | </script>
 46 | 
 47 | <button onclick={() => inflate(power)}>inflate</button>
 48 | <button onclick={() => deflate(power)}>deflate</button>
 49 | <button onclick={() => power--}>-</button>
 50 | Pump power: {power}
 51 | <button onclick={() => power++}>+</button>
 52 | ```
 53 | 
 54 | ---
 55 | 
 56 | <!-- Filename: App.svelte -->
 57 | ```svelte
 58 | <script lang="ts">
 59 | 	import Pump from './Pump.svelte';
 60 | 
 61 | 	let size = $state(15);
 62 | 	let burst = $state(false);
 63 | 
 64 | 	function inflateHandler(power) {
 65 | 		size += power;
 66 | 		if (size > 75) burst = true;
 67 | 	}
 68 | 
 69 | 	function deflateHandler(power) {
 70 | 		if (size > 0) size -= power;
 71 | 	}
 72 | 
 73 | 	function reset() {
 74 | 		size = 15;
 75 | 		burst = false;
 76 | 	}
 77 | </script>
 78 | 
 79 | <Pump inflate={inflateHandler} deflate={deflateHandler} />
 80 | 
 81 | {#if burst}
 82 | 	<button onclick={reset}>new balloon</button>
 83 | 	<span class="boom">💥</span>
 84 | {:else}
 85 | 	<span class="balloon" style="scale: {0.01 * size}">
 86 | 		🎈
 87 | 	</span>
 88 | {/if}
 89 | ```
 90 | 
 91 | **Key changes**:
 92 | - Removed `createEventDispatcher()`, instead using callback props (`inflate`, `deflate`).
 93 | - Events are now just function calls inside `Pump.svelte`.
 94 | - **Parent (App.svelte)** passes handlers like `inflateHandler` to `Pump`.
 95 | 
 96 | ---
 97 | 
 98 | <!-- ================================== -->
 99 | <!-- Example 3: Bubbling Events with Callback Props -->
100 | <!-- ================================== -->
101 | 
102 | **To forward an event from an element to a component, use callback props instead of `on:`.**
103 | 
104 | ---
105 | 
106 | <!-- Filename: Clickable.svelte -->
107 | ```svelte
108 | <script>
109 | 	let { onclick } = $props(); // Accepts an `onclick` function from parent
110 | </script>
111 | 
112 | <button {onclick}>
113 | 	click me
114 | </button>
115 | ```
116 | 
117 | **Key changes**:
118 | - No need to manually forward events like `on:click` → `{onclick}` does the job.
119 | 
120 | ---
121 | 
122 | <!-- ================================== -->
123 | <!-- Example 4: Spreading Props Including Event Handlers -->
124 | <!-- ================================== -->
125 | 
126 | **Instead of manually listing every event, just spread props.**
127 | 
128 | ---
129 | 
130 | <!-- Filename: Button.svelte -->
131 | ```svelte
132 | <script>
133 | 	let props = $props();
134 | </script>
135 | 
136 | <button {...props}>
137 | 	click me
138 | </button>
139 | ```
140 | 
141 | **Key changes**:
142 | - `{...props}` automatically applies all attributes, including event handlers like `onclick`.
143 | 
144 | ---
145 | 
146 | <!-- ================================== -->
147 | <!-- Example 5: Multiple Event Handlers on the Same Element -->
148 | <!-- ================================== -->
149 | 
150 | **Instead of duplicate event bindings, combine handlers manually.**
151 | 
152 | ---
153 | 
154 | <!-- Filename: App.svelte -->
155 | ```svelte
156 | <script>
157 | 	function one(event) {
158 | 		console.log('First handler', event);
159 | 	}
160 | 
161 | 	function two(event) {
162 | 		console.log('Second handler', event);
163 | 	}
164 | </script>
165 | 
166 | <button
167 | 	onclick={(e) => {
168 | 		one(e);
169 | 		two(e);
170 | 	}}
171 | >
172 | 	...
173 | </button>
174 | ```
175 | 
176 | **Key changes**:
177 | - Instead of multiple `on:click={one} on:click={two}`, handlers are manually merged.
178 | 
179 | ---
180 | 
181 | <!-- ================================== -->
182 | <!-- Example 6: Preventing Local Handlers from Being Overwritten -->
183 | <!-- ================================== -->
184 | 
185 | **Ensure that when spreading props, local event handlers still execute.**
186 | 
187 | ---
188 | 
189 | <!-- Filename: App.svelte -->
190 | ```svelte
191 | <script>
192 | 	let props = $props();
193 | 
194 | 	function doStuff(event) {
195 | 		console.log('Handled locally', event);
196 | 	}
197 | </script>
198 | 
199 | <button
200 | 	{...props}
201 | 	onclick={(e) => {
202 | 		doStuff(e);
203 | 		props.onclick?.(e);
204 | 	}}
205 | >
206 | 	...
207 | </button>
208 | ```
209 | 
210 | **Key changes**:
211 | - The local `onclick` executes **before** the `props.onclick`, preventing overwrites.
212 | 
213 | ---
214 | 
215 | <!-- ================================== -->
216 | <!-- Example 7: Event Modifiers as Functions -->
217 | <!-- ================================== -->
218 | 
219 | **Modifiers like `once` and `preventDefault` should now be implemented manually.**
220 | 
221 | ---
222 | 
223 | <!-- Filename: App.svelte -->
224 | ```svelte
225 | <script>
226 | 	function once(fn) {
227 | 		return function (event) {
228 | 			if (fn) fn.call(this, event);
229 | 			fn = null; // Ensures it only runs once
230 | 		};
231 | 	}
232 | 
233 | 	function preventDefault(fn) {
234 | 		return function (event) {
235 | 			event.preventDefault();
236 | 			fn.call(this, event);
237 | 		};
238 | 	}
239 | 
240 | 	function handler(event) {
241 | 		console.log('Button clicked');
242 | 	}
243 | </script>
244 | 
245 | <button onclick={once(preventDefault(handler))}>
246 | 	...
247 | </button>
248 | ```
249 | 
250 | **Key changes**:
251 | - Used **higher-order functions** to replace `on:click|once|preventDefault={handler}`.
252 | 
253 | ---
254 | ---
255 | 
256 | // svelte/events - `on` function
257 | // `on` attaches an event handler and returns a cleanup function.
258 | // It ensures correct handler order compared to `addEventListener`.
259 | 
260 | import { on } from 'svelte/events';
261 | 
262 | // Attach an event to `window`
263 | function on<Type extends keyof WindowEventMap>(
264 |     window: Window,
265 |     type: Type,
266 |     handler: (this: Window, event: WindowEventMap[Type]) => any,
267 |     options?: AddEventListenerOptions
268 | ): () => void;
269 | 
270 | // Attach an event to `document`
271 | function on<Type extends keyof DocumentEventMap>(
272 |     document: Document,
273 |     type: Type,
274 |     handler: (this: Document, event: DocumentEventMap[Type]) => any,
275 |     options?: AddEventListenerOptions
276 | ): () => void;
277 | 
278 | // Attach an event to an `HTMLElement`
279 | function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
280 |     element: Element,
281 |     type: Type,
282 |     handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
283 |     options?: AddEventListenerOptions
284 | ): () => void;
285 | 
286 | // Attach an event to a `MediaQueryList`
287 | function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
288 |     element: Element,
289 |     type: Type,
290 |     handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
291 |     options?: AddEventListenerOptions
292 | ): () => void;
293 | 
294 | // Generic event attachment
295 | function on(
296 |     element: EventTarget,
297 |     type: string,
298 |     handler: EventListener,
299 |     options?: AddEventListenerOptions
300 | ): () => void;
301 | 
302 | ---
303 | ---
304 | 
305 | Use `on:eventname={handler}` to attach handlers (e.g., `onclick={() => ...}`).
306 | - Handlers can mutate `$state` directly; UI updates automatically.
307 | - Shorthand `{eventname}` works if the handler is a variable or function.
308 | - Events like `click`, `input`, etc., are delegated; assume bubbling unless stopped.
309 | - Events fire after bindings (e.g., `oninput` after `bind:value`).
310 | - Case-sensitive: `onclick` ≠ `onClick` (custom events may use uppercase).
311 | 
312 | <script>
313 |   let count = $state(0);         // Reactive state
314 |   let text = $state('');         // Input value
315 |   const logClick = () => console.log('Clicked!'); // Named handler
316 |   
317 |   // $effect to react to state changes
318 |   $effect(() => console.log(`Count is now ${count}`));
319 | </script>
320 | 
321 | <!-- Inline handler with $state -->
322 | <button onclick={() => count++}>
323 |   Increment: {count}
324 | </button>
325 | 
326 | <!-- Shorthand with named handler -->
327 | <button {logClick}>
328 |   Log Click
329 | </button>
330 | 
331 | <!-- Input event with binding -->
332 | <input
333 |   oninput={(e) => text = e.target.value}
334 |   bind:value={text}
335 |   placeholder="Type here"
336 | />
337 | <p>You typed: {text}</p>
338 | 
339 | <!-- Keydown event with condition -->
340 | <input
341 |   onkeydown={(e) => e.key === 'Enter' && count++}
342 |   placeholder="Press Enter to increment"
343 | />
344 | 
345 | Note: For other events (e.g., `onmouseover`, `onfocus`), follow the same pattern:
346 | `on:eventname={() => ...}` or `{eventname}`. Adjust the handler logic based on the event’s purpose.


--------------------------------------------------------------------------------
/svelte5_runes.txt:
--------------------------------------------------------------------------------
   1 | # Svelte 5 Runes Overview
   2 | 
   3 | 
   4 | 
   5 | ---
   6 | ## $State
   7 | ---
   8 | 
   9 | <!-- ================================== -->
  10 | <!-- Example 1: Basic Usage of $state -->
  11 | <!-- ================================== -->
  12 | 
  13 | <!-- Demonstrates how to create and update a reactive state variable using $state. -->
  14 | 
  15 | ---
  16 | 
  17 | <!-- Filename: Counter.svelte -->
  18 | <script>
  19 | 	let count = $state(0); // count is reactive
  20 | </script>
  21 | 
  22 | <button onclick={() => count++}>
  23 | 	clicks: {count} <!-- UI updates automatically when count changes -->
  24 | </button>
  25 | 
  26 | ---
  27 | 
  28 | <!-- Notes: -->
  29 | <!-- - $state makes `count` reactive. -->
  30 | <!-- - You can modify `count` like a normal variable, no need for a special setter. -->
  31 | 
  32 | <!-- ================================== -->
  33 | <!-- Example 2: Deep Reactivity with Arrays -->
  34 | <!-- ================================== -->
  35 | 
  36 | <!-- Demonstrates how $state makes arrays deeply reactive. -->
  37 | 
  38 | ---
  39 | 
  40 | <!-- Filename: TodoList.svelte -->
  41 | <script>
  42 | 	let todos = $state([
  43 | 		{ done: false, text: 'Learn Svelte' },
  44 | 		{ done: false, text: 'Build an app' }
  45 | 	]);
  46 | 
  47 | 	function toggle(index) {
  48 | 		todos[index].done = !todos[index].done; // Reactivity applies to individual items
  49 | 	}
  50 | </script>
  51 | 
  52 | <ul>
  53 | 	{#each todos as todo, index}
  54 | 		<li>
  55 | 			<input type="checkbox" bind:checked={todo.done} onclick={() => toggle(index)} />
  56 | 			{todo.text}
  57 | 		</li>
  58 | 	{/each}
  59 | </ul>
  60 | 
  61 | <button onclick={() => todos.push({ done: false, text: 'New task' })}>
  62 | 	Add Todo
  63 | </button>
  64 | 
  65 | ---
  66 | 
  67 | <!-- Notes: -->
  68 | <!-- - `todos` is a reactive proxy, meaning updates to properties trigger UI updates. -->
  69 | <!-- - `todos.push()` automatically makes new objects reactive. -->
  70 | 
  71 | <!-- ================================== -->
  72 | <!-- Example 3: Reactivity in Classes -->
  73 | <!-- ================================== -->
  74 | 
  75 | <!-- Demonstrates using $state inside a class to create reactive properties. -->
  76 | 
  77 | ---
  78 | 
  79 | <!-- Filename: TodoClassExample.svelte -->
  80 | <script>
  81 | 	class Todo {
  82 | 		done = $state(false);
  83 | 		text = $state('');
  84 | 
  85 | 		constructor(text) {
  86 | 			this.text = text;
  87 | 		}
  88 | 
  89 | 		reset = () => {
  90 | 			this.text = '';
  91 | 			this.done = false;
  92 | 		}
  93 | 	}
  94 | 
  95 | 	let todo = new Todo('Buy groceries');
  96 | </script>
  97 | 
  98 | <p>{todo.text} - {todo.done ? 'Done' : 'Not done'}</p>
  99 | <button onclick={() => todo.done = !todo.done}>Toggle</button>
 100 | <button onclick={() => todo.reset()}>Reset</button>
 101 | 
 102 | ---
 103 | 
 104 | <!-- Notes: -->
 105 | <!-- - Using an arrow function for `reset` ensures `this` remains correct. -->
 106 | <!-- - Class properties become reactive with $state. -->
 107 | 
 108 | <!-- ================================== -->
 109 | <!-- Example 4: Using $state.raw -->
 110 | <!-- ================================== -->
 111 | 
 112 | <!-- Demonstrates when to use $state.raw to avoid deep reactivity. -->
 113 | 
 114 | ---
 115 | 
 116 | <!-- Filename: RawStateExample.svelte -->
 117 | <script>
 118 | 	let person = $state.raw({
 119 | 		name: 'Alice',
 120 | 		age: 30
 121 | 	});
 122 | 
 123 | 	function updatePerson() {
 124 | 		// This won't work because `person` is raw (not reactive)
 125 | 		person.age += 1; 
 126 | 
 127 | 		// Instead, we must reassign the whole object
 128 | 		person = { ...person, age: person.age + 1 };
 129 | 	}
 130 | </script>
 131 | 
 132 | <p>{person.name} is {person.age} years old.</p>
 133 | <button onclick={updatePerson}>Increase Age</button>
 134 | 
 135 | ---
 136 | 
 137 | <!-- Notes: -->
 138 | <!-- - `person.age += 1` does nothing because $state.raw objects are immutable. -->
 139 | <!-- - To update, replace the entire object. -->
 140 | 
 141 | <!-- ================================== -->
 142 | <!-- Example 5: Taking a Snapshot of Reactive State -->
 143 | <!-- ================================== -->
 144 | 
 145 | <!-- Demonstrates how to extract a non-proxied snapshot of a reactive object. -->
 146 | 
 147 | ---
 148 | 
 149 | <!-- Filename: SnapshotExample.svelte -->
 150 | <script>
 151 | 	let counter = $state({ count: 0 });
 152 | 
 153 | 	function logSnapshot() {
 154 | 		console.log($state.snapshot(counter)); // Logs a plain object, not a Proxy
 155 | 	}
 156 | </script>
 157 | 
 158 | <p>Count: {counter.count}</p>
 159 | <button onclick={() => counter.count++}>Increment</button>
 160 | <button onclick={logSnapshot}>Log Snapshot</button>
 161 | 
 162 | ---
 163 | 
 164 | <!-- Notes: -->
 165 | <!-- - `snapshot` removes reactivity, making it safe to pass to external libraries. -->
 166 | 
 167 | <!-- ================================== -->
 168 | <!-- Example 6: Passing Reactive State to Functions -->
 169 | <!-- ================================== -->
 170 | 
 171 | <!-- Demonstrates passing a reactive state into a function and ensuring it remains reactive. -->
 172 | 
 173 | ---
 174 | 
 175 | <!-- Filename: FunctionStateExample.svelte -->
 176 | <script>
 177 | 	function add(getA, getB) {
 178 | 		return () => getA() + getB();
 179 | 	}
 180 | 
 181 | 	let a = $state(1);
 182 | 	let b = $state(2);
 183 | 	let total = add(() => a, () => b); // Pass getters to maintain reactivity
 184 | </script>
 185 | 
 186 | <p>{a} + {b} = {total()}</p>
 187 | <button onclick={() => a++}>Increment A</button>
 188 | <button onclick={() => b++}>Increment B</button>
 189 | 
 190 | ---
 191 | 
 192 | <!-- Notes: -->
 193 | <!-- - Directly passing `a` and `b` would not be reactive. -->
 194 | <!-- - Using getter functions ensures the function always retrieves the latest values. -->
 195 | 
 196 | 
 197 | <!-- ================================== -->
 198 | <!-- Extra: Optional Getter/Setter Binding -->
 199 | <!-- ================================== -->
 200 | 
 201 | <!-- Shows how to bind an input to a reactive value with a custom getter/setter. -->
 202 | 
 203 | <script>
 204 | 	let name = $state('Alice');
 205 | </script>
 206 | 
 207 | <input bind:value={
 208 | 	() => name,
 209 | 	(v) => name = v.trimStart()
 210 | } />
 211 | 
 212 | <p>Hello, {name}!</p>
 213 | 
 214 | <!-- Notes:
 215 | - This uses the new bind: syntax (Svelte 5.9+) with a getter and setter.
 216 | - Useful for applying validation or transformation automatically.
 217 | -->
 218 | 
 219 | 
 220 | ---
 221 | ## $Derived
 222 | ---
 223 | 
 224 | <!-- ================================== -->
 225 | <!-- Example 1: Basic Derived State -->
 226 | <!-- ================================== -->
 227 | 
 228 | <!-- Demonstrates how `$derived` updates a value based on `$state`. -->
 229 | 
 230 | ---
 231 | 
 232 | <!-- Filename: App.svelte -->
 233 | <script lang="ts">
 234 | 	let count = $state(0);
 235 | 	let doubled = $derived(count * 2); // `doubled` automatically updates when `count` changes
 236 | </script>
 237 | 
 238 | <button onclick={() => count++}>
 239 | 	Increment
 240 | </button>
 241 | 
 242 | <p>{count} doubled is {doubled}</p>
 243 | 
 244 | ---
 245 | 
 246 | <!-- Notes: -->
 247 | - `$derived(count * 2)` ensures `doubled` always reflects the latest `count`.
 248 | - You **cannot** modify state inside `$derived`, e.g., `count++` inside the expression.
 249 | 
 250 | <!-- ================================== -->
 251 | <!-- Example 2: Using $derived.by for Complex Computation -->
 252 | <!-- ================================== -->
 253 | 
 254 | <!-- Demonstrates how `$derived.by` allows more complex calculations. -->
 255 | 
 256 | ---
 257 | 
 258 | <!-- Filename: App.svelte -->
 259 | <script lang="ts">
 260 | 	let numbers = $state([1, 2, 3]);
 261 | 
 262 | 	// `total` is automatically recalculated when `numbers` change
 263 | 	let total = $derived.by(() => {
 264 | 		let sum = 0;
 265 | 		for (const n of numbers) {
 266 | 			sum += n;
 267 | 		}
 268 | 		return sum;
 269 | 	});
 270 | </script>
 271 | 
 272 | <button onclick={() => numbers.push(numbers.length + 1)}>
 273 | 	Add Number
 274 | </button>
 275 | 
 276 | <p>{numbers.join(' + ')} = {total}</p>
 277 | 
 278 | ---
 279 | 
 280 | <!-- Notes: -->
 281 | - `$derived.by(() => { ... })` is useful when the derived state requires loops or multiple steps.
 282 | - The derived state (`total`) automatically updates when `numbers` change.
 283 | 
 284 | <!-- ================================== -->
 285 | <!-- Example 3: Understanding Dependencies -->
 286 | <!-- ================================== -->
 287 | 
 288 | <!-- Shows how derived state tracks dependencies and updates accordingly. -->
 289 | 
 290 | ---
 291 | 
 292 | <!-- Filename: App.svelte -->
 293 | <script lang="ts">
 294 | 	let count = $state(0);
 295 | 	let isEven = $derived(count % 2 === 0);
 296 | </script>
 297 | 
 298 | <button onclick={() => count++}>
 299 | 	Increment
 300 | </button>
 301 | 
 302 | <p>{count} is {isEven ? 'Even' : 'Odd'}</p>
 303 | 
 304 | ---
 305 | 
 306 | <!-- Notes: -->
 307 | - `$derived` tracks all **synchronously accessed** state inside its expression.
 308 | - If `count` changes, `isEven` will automatically update.
 309 | 
 310 | <!-- ================================== -->
 311 | <!-- Example 4: Avoiding Unnecessary Updates -->
 312 | <!-- ================================== -->
 313 | 
 314 | <!-- Demonstrates how Svelte skips updates when derived values remain the same. -->
 315 | 
 316 | ---
 317 | 
 318 | <!-- Filename: App.svelte -->
 319 | <script lang="ts">
 320 | 	let count = $state(0);
 321 | 	let large = $derived(count > 10);
 322 | </script>
 323 | 
 324 | <button onclick={() => count++}>
 325 | 	Increment
 326 | </button>
 327 | 
 328 | <p>Is count large? {large}</p>
 329 | 
 330 | ---
 331 | 
 332 | <!-- Notes: -->
 333 | - Svelte **only updates** when `large` changes (`false` → `true` or vice versa).
 334 | - If `count` changes **within the same threshold** (e.g., `5 → 6`), no update occurs.
 335 | 
 336 | ---
 337 | 
 338 | 
 339 | ---
 340 | ## $Effect
 341 | ---
 342 | 
 343 | <!-- ================================== -->
 344 | <!-- Example 1: Basic Usage of $effect -->
 345 | <!-- ================================== -->
 346 | 
 347 | <!-- Demonstrates how to use `$effect` to reactively update a canvas when state changes. -->
 348 | 
 349 | ---
 350 | 
 351 | <!-- Filename: Canvas.svelte -->
 352 | <script>
 353 | 	let size = $state(50);
 354 | 	let color = $state('#ff3e00');
 355 | 	let canvas;
 356 | 
 357 | 	$effect(() => {
 358 | 		const context = canvas.getContext('2d');
 359 | 		context.clearRect(0, 0, canvas.width, canvas.height);
 360 | 
 361 | 		// This effect runs whenever `color` or `size` changes
 362 | 		context.fillStyle = color;
 363 | 		context.fillRect(0, 0, size, size);
 364 | 	});
 365 | </script>
 366 | 
 367 | <canvas bind:this={canvas} width="100" height="100" />
 368 | 
 369 | <input type="color" bind:value={color} />
 370 | <input type="range" bind:value={size} min="10" max="100" />
 371 | 
 372 | ---
 373 | 
 374 | <!-- Notes:
 375 | - `$effect` automatically tracks dependencies (`size`, `color`).
 376 | - Runs only in the browser, not during SSR.
 377 | - Avoid modifying state inside an effect to prevent infinite loops.
 378 | -->
 379 | 
 380 | <!-- ================================== -->
 381 | <!-- Example 2: Using Teardown in $effect -->
 382 | <!-- ================================== -->
 383 | 
 384 | <!-- Demonstrates how to return a cleanup function inside `$effect` to clear intervals. -->
 385 | 
 386 | ---
 387 | 
 388 | <!-- Filename: Counter.svelte -->
 389 | <script>
 390 | 	let count = $state(0);
 391 | 	let milliseconds = $state(1000);
 392 | 
 393 | 	$effect(() => {
 394 | 		const interval = setInterval(() => {
 395 | 			count += 1;
 396 | 		}, milliseconds);
 397 | 
 398 | 		// Cleanup function runs before effect re-runs or on component destroy
 399 | 		return () => {
 400 | 			clearInterval(interval);
 401 | 		};
 402 | 	});
 403 | </script>
 404 | 
 405 | <h1>{count}</h1>
 406 | 
 407 | <button onclick={() => (milliseconds *= 2)}>Slower</button>
 408 | <button onclick={() => (milliseconds /= 2)}>Faster</button>
 409 | 
 410 | ---
 411 | 
 412 | <!-- Notes:
 413 | - The interval is cleared before the next effect run or when the component is destroyed.
 414 | - If `milliseconds` changes, the old interval is removed before a new one is created.
 415 | -->
 416 | 
 417 | <!-- ================================== -->
 418 | <!-- Example 3: Dependency Tracking in $effect -->
 419 | <!-- ================================== -->
 420 | 
 421 | <!-- Demonstrates how `$effect` only tracks dependencies accessed synchronously. -->
 422 | 
 423 | ---
 424 | 
 425 | <!-- Filename: AsyncCanvas.svelte -->
 426 | <script>
 427 | 	let size = $state(50);
 428 | 	let color = $state('#ff3e00');
 429 | 	let canvas;
 430 | 
 431 | 	$effect(() => {
 432 | 		const context = canvas.getContext('2d');
 433 | 		context.clearRect(0, 0, canvas.width, canvas.height);
 434 | 
 435 | 		// This effect re-runs when `color` changes but not when `size` changes
 436 | 		context.fillStyle = color;
 437 | 
 438 | 		setTimeout(() => {
 439 | 			context.fillRect(0, 0, size, size);
 440 | 		}, 0);
 441 | 	});
 442 | </script>
 443 | 
 444 | <canvas bind:this={canvas} width="100" height="100" />
 445 | 
 446 | <input type="color" bind:value={color} />
 447 | <input type="range" bind:value={size} min="10" max="100" />
 448 | 
 449 | ---
 450 | 
 451 | <!-- Notes:
 452 | - `size` is accessed inside `setTimeout`, so it is NOT a tracked dependency.
 453 | - The effect runs when `color` changes, but `size` updates do not trigger a re-run.
 454 | -->
 455 | 
 456 | <!-- ================================== -->
 457 | <!-- Example 4: $effect.pre for Pre-DOM Updates -->
 458 | <!-- ================================== -->
 459 | 
 460 | <!-- Demonstrates how `$effect.pre` can be used to run logic before the DOM updates. -->
 461 | 
 462 | ---
 463 | 
 464 | <!-- Filename: AutoScroll.svelte -->
 465 | <script>
 466 | 	import { tick } from 'svelte';
 467 | 
 468 | 	let div = $state();
 469 | 	let messages = $state([]);
 470 | 
 471 | 	$effect.pre(() => {
 472 | 		if (!div) return;
 473 | 
 474 | 		// Tracks `messages.length` so the effect re-runs when messages change
 475 | 		messages.length;
 476 | 
 477 | 		// Auto-scroll logic before the DOM updates
 478 | 		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
 479 | 			tick().then(() => {
 480 | 				div.scrollTo(0, div.scrollHeight);
 481 | 			});
 482 | 		}
 483 | 	});
 484 | </script>
 485 | 
 486 | <div bind:this={div}>
 487 | 	{#each messages as message}
 488 | 		<p>{message}</p>
 489 | 	{/each}
 490 | </div>
 491 | 
 492 | <button onclick={() => messages = [...messages, 'New message']}>Add Message</button>
 493 | 
 494 | ---
 495 | 
 496 | <!-- Notes:
 497 | - `$effect.pre` runs before the DOM updates.
 498 | - Useful for cases like auto-scrolling where timing is important.
 499 | -->
 500 | 
 501 | <!-- ================================== -->
 502 | <!-- Example 5: Avoiding Infinite Loops in $effect -->
 503 | <!-- ================================== -->
 504 | 
 505 | <!-- Demonstrates the correct way to derive state instead of modifying it within `$effect`. -->
 506 | 
 507 | ---
 508 | 
 509 | <!-- Filename: DerivedState.svelte -->
 510 | <script>
 511 | 	let count = $state(0);
 512 | 	let doubled = $derived(count * 2); // Correct approach
 513 | 
 514 | 	// Incorrect approach (causes infinite loops):
 515 | 	// $effect(() => {
 516 | 	//   doubled = count * 2;
 517 | 	// });
 518 | </script>
 519 | 
 520 | <h1>{count} doubled is {doubled}</h1>
 521 | 
 522 | <button onclick={() => count += 1}>Increment</button>
 523 | 
 524 | ---
 525 | 
 526 | <!-- Notes:
 527 | - Use `$derived` instead of modifying state inside `$effect`.
 528 | - Prevents unnecessary re-renders and infinite loops.
 529 | -->
 530 | 
 531 | ---
 532 | 
 533 | 
 534 | ---
 535 | ## $Bindable
 536 | ---
 537 | 
 538 | <!-- ================================== -->
 539 | <!-- Example 1: Basic Two-Way Binding with $bindable -->
 540 | <!-- ================================== -->
 541 | 
 542 | <!-- Demonstrates how to use `$bindable` to create a prop that can be bound to a parent component. -->
 543 | 
 544 | ---
 545 | 
 546 | <!-- Filename: FancyInput.svelte -->
 547 | <script lang="ts">
 548 | 	let { value = $bindable(), ...props } = $props(); // `value` is bindable, allowing two-way data flow
 549 | </script>
 550 | 
 551 | <input bind:value={value} {...props} />
 552 | 
 553 | ---
 554 | 
 555 | <!-- Filename: App.svelte -->
 556 | <script lang="ts">
 557 | 	import FancyInput from './FancyInput.svelte';
 558 | 
 559 | 	let message = $state('hello'); // Using `$state` to create a reactive state variable
 560 | </script>
 561 | 
 562 | <FancyInput bind:value={message} />
 563 | <p>{message}</p> <!-- This will update as the user types in the input -->
 564 | 
 565 | ---
 566 | 
 567 | <!-- Notes: -->
 568 | <!-- - The `bind:value` directive ensures that `message` in the parent updates when the input changes. -->
 569 | <!-- - This is useful for creating reusable, controlled input components. -->
 570 | <!-- - The parent is not required to bind to `value`; it can simply pass a normal prop. -->
 571 | 
 572 | <!-- ================================== -->
 573 | <!-- Example 2: Default Fallback for Bindable Props -->
 574 | <!-- ================================== -->
 575 | 
 576 | <!-- Shows how to provide a default value when the parent does not pass a bindable prop. -->
 577 | 
 578 | ---
 579 | 
 580 | <!-- Filename: FancyInput.svelte -->
 581 | <script lang="ts">
 582 | 	let { value = $bindable('fallback'), ...props } = $props(); // Default value set to 'fallback'
 583 | </script>
 584 | 
 585 | <input bind:value={value} {...props} />
 586 | 
 587 | ---
 588 | 
 589 | <!-- Filename: App.svelte -->
 590 | <script lang="ts">
 591 | 	import FancyInput from './FancyInput.svelte';
 592 | </script>
 593 | 
 594 | <FancyInput /> <!-- No `bind:value`, so it defaults to 'fallback' -->
 595 | 
 596 | ---
 597 | 
 598 | <!-- Notes: -->
 599 | <!-- - If `value` is not provided by the parent, it starts with 'fallback'. -->
 600 | <!-- - This is useful for ensuring a component always has a meaningful initial state. -->
 601 | 
 602 | <!-- ================================== -->
 603 | <!-- Example 3: Using $bindable with Multiple Props -->
 604 | <!-- ================================== -->
 605 | 
 606 | <!-- Demonstrates how to use multiple `$bindable` props in a single component. -->
 607 | 
 608 | ---
 609 | 
 610 | <!-- Filename: FancyInput.svelte -->
 611 | <script lang="ts">
 612 | 	let { value = $bindable('default text'), disabled = $bindable(false), ...props } = $props();
 613 | </script>
 614 | 
 615 | <input bind:value={value} bind:disabled={disabled} {...props} />
 616 | 
 617 | ---
 618 | 
 619 | <!-- Filename: App.svelte -->
 620 | <script lang="ts">
 621 | 	import FancyInput from './FancyInput.svelte';
 622 | 
 623 | 	let message = $state('Editable text');
 624 | 	let isDisabled = $state(false);
 625 | </script>
 626 | 
 627 | <FancyInput bind:value={message} bind:disabled={isDisabled} />
 628 | <button onclick={() => isDisabled = !isDisabled}>
 629 | 	Toggle Disabled
 630 | </button>
 631 | 
 632 | ---
 633 | 
 634 | <!-- Notes: -->
 635 | - The input's `value` and `disabled` states can both be bound to the parent.
 636 | - The button toggles the `disabled` state dynamically.
 637 | - Useful for forms and UI elements requiring controlled states.
 638 | 
 639 | 
 640 | ---
 641 | ## $Props
 642 | ---
 643 | 
 644 | <!-- ================================== -->
 645 | <!-- Example 1: Basic Prop Usage with $props -->
 646 | <!-- ================================== -->
 647 | 
 648 | <!-- Demonstrates how to receive props in a Svelte component using $props -->
 649 | 
 650 | ---
 651 | 
 652 | <!-- Filename: App.svelte -->
 653 | <script lang="ts">
 654 | 	import MyComponent from './MyComponent.svelte';
 655 | </script>
 656 | 
 657 | <MyComponent adjective="cool" />
 658 | 
 659 | ---
 660 | 
 661 | <!-- Filename: MyComponent.svelte -->
 662 | <script lang="ts">
 663 | 	let props = $props();
 664 | </script>
 665 | 
 666 | <p>This component is {props.adjective}</p>
 667 | 
 668 | ---
 669 | 
 670 | <!-- Explanation:
 671 | - `MyComponent` receives a prop `adjective`.
 672 | - The `$props` rune allows access to the props object inside `MyComponent`.
 673 | - `props.adjective` displays the value passed from `App.svelte`.
 674 | -->
 675 | 
 676 | <!-- ================================== -->
 677 | <!-- Example 2: Destructuring Props -->
 678 | <!-- ================================== -->
 679 | 
 680 | <!-- Demonstrates how to destructure props for cleaner code -->
 681 | 
 682 | ---
 683 | 
 684 | <!-- Filename: MyComponent.svelte -->
 685 | <script lang="ts">
 686 | 	let { adjective } = $props();
 687 | </script>
 688 | 
 689 | <p>This component is {adjective}</p>
 690 | 
 691 | ---
 692 | 
 693 | <!-- Explanation:
 694 | - Instead of accessing `props.adjective`, we destructure `adjective` directly from `$props()`.
 695 | - This makes the code more concise and readable.
 696 | -->
 697 | 
 698 | <!-- ================================== -->
 699 | <!-- Example 3: Fallback Values for Props -->
 700 | <!-- ================================== -->
 701 | 
 702 | <!-- Demonstrates how to provide default values when a prop is not passed -->
 703 | 
 704 | ---
 705 | 
 706 | <!-- Filename: MyComponent.svelte -->
 707 | <script lang="ts">
 708 | 	let { adjective = 'happy' } = $props();
 709 | </script>
 710 | 
 711 | <p>This component is {adjective}</p>
 712 | 
 713 | ---
 714 | 
 715 | <!-- Explanation:
 716 | - If `adjective` is not provided by the parent, it defaults to `'happy'`.
 717 | - The fallback value does **not** become reactive.
 718 | -->
 719 | 
 720 | <!-- ================================== -->
 721 | <!-- Example 4: Renaming Props -->
 722 | <!-- ================================== -->
 723 | 
 724 | <!-- Demonstrates how to rename props when destructuring -->
 725 | 
 726 | ---
 727 | 
 728 | <!-- Filename: MyComponent.svelte -->
 729 | <script lang="ts">
 730 | 	let { super: trouper = 'lights are gonna find me' } = $props();
 731 | </script>
 732 | 
 733 | <p>Song lyric: {trouper}</p>
 734 | 
 735 | ---
 736 | 
 737 | <!-- Explanation:
 738 | - `super` is a reserved keyword in JavaScript.
 739 | - We rename `super` to `trouper` while destructuring.
 740 | - It also includes a default fallback value.
 741 | -->
 742 | 
 743 | <!-- ================================== -->
 744 | <!-- Example 5: Using Rest Props -->
 745 | <!-- ================================== -->
 746 | 
 747 | <!-- Demonstrates how to collect all remaining props using the rest syntax -->
 748 | 
 749 | ---
 750 | 
 751 | <!-- Filename: MyComponent.svelte -->
 752 | <script lang="ts">
 753 | 	let { a, b, c, ...others } = $props();
 754 | </script>
 755 | 
 756 | <p>a: {a}, b: {b}, c: {c}</p>
 757 | <p>Other props: {JSON.stringify(others)}</p>
 758 | 
 759 | ---
 760 | 
 761 | <!-- Explanation:
 762 | - `a`, `b`, and `c` are extracted explicitly.
 763 | - The rest of the props are collected into the `others` object.
 764 | - This can be useful for passing arbitrary props to a child component.
 765 | -->
 766 | 
 767 | <!-- ================================== -->
 768 | <!-- Example 6: Updating Props (Ephemeral State) -->
 769 | <!-- ================================== -->
 770 | 
 771 | <!-- Demonstrates how prop values update when the parent changes, but can be overridden temporarily -->
 772 | 
 773 | ---
 774 | 
 775 | <!-- Filename: App.svelte -->
 776 | <script lang="ts">
 777 | 	import Child from './Child.svelte';
 778 | 
 779 | 	let count = $state(0);
 780 | </script>
 781 | 
 782 | <button onclick={() => count += 1}>
 783 | 	clicks (parent): {count}
 784 | </button>
 785 | 
 786 | <Child {count} />
 787 | 
 788 | ---
 789 | 
 790 | <!-- Filename: Child.svelte -->
 791 | <script lang="ts">
 792 | 	let { count } = $props();
 793 | </script>
 794 | 
 795 | <button onclick={() => count += 1}>
 796 | 	clicks (child): {count}
 797 | </button>
 798 | 
 799 | ---
 800 | 
 801 | <!-- Explanation:
 802 | - The `count` prop updates when changed in `App.svelte`.
 803 | - However, inside `Child.svelte`, `count` can be modified temporarily.
 804 | - This is useful for unsaved, ephemeral state.
 805 | -->
 806 | 
 807 | <!-- ================================== -->
 808 | <!-- Example 7: Avoiding Object Prop Mutation -->
 809 | <!-- ================================== -->
 810 | 
 811 | <!-- Demonstrates how object mutations do not work if props are plain objects -->
 812 | 
 813 | ---
 814 | 
 815 | <!-- Filename: App.svelte -->
 816 | <script lang="ts">
 817 | 	import Child from './Child.svelte';
 818 | </script>
 819 | 
 820 | <Child object={{ count: 0 }} />
 821 | 
 822 | ---
 823 | 
 824 | <!-- Filename: Child.svelte -->
 825 | <script lang="ts">
 826 | 	let { object } = $props();
 827 | </script>
 828 | 
 829 | <button onclick={() => object.count += 1}>
 830 | 	clicks: {object.count}
 831 | </button>
 832 | 
 833 | ---
 834 | 
 835 | <!-- Explanation:
 836 | - The object prop `{ count: 0 }` is passed to `Child.svelte`.
 837 | - Mutating `object.count` **does not update the parent**.
 838 | - This is because plain objects are not reactive.
 839 | -->
 840 | 
 841 | <!-- ================================== -->
 842 | <!-- Example 8: Mutating a Reactive Prop (Warning) -->
 843 | <!-- ================================== -->
 844 | 
 845 | <!-- Demonstrates the warning when mutating a reactive state prop -->
 846 | 
 847 | ---
 848 | 
 849 | <!-- Filename: App.svelte -->
 850 | <script lang="ts">
 851 | 	import Child from './Child.svelte';
 852 | 
 853 | 	let object = $state({ count: 0 });
 854 | </script>
 855 | 
 856 | <Child {object} />
 857 | 
 858 | ---
 859 | 
 860 | <!-- Filename: Child.svelte -->
 861 | <script lang="ts">
 862 | 	let { object } = $props();
 863 | </script>
 864 | 
 865 | <button onclick={() => object.count += 1}>
 866 | 	clicks: {object.count}
 867 | </button>
 868 | 
 869 | ---
 870 | 
 871 | <!-- Explanation:
 872 | - `object` is a `$state` reactive proxy.
 873 | - Mutating `object.count` inside `Child.svelte` **does work**, but shows a warning.
 874 | - This warns against mutating state that does not "belong" to the child.
 875 | -->
 876 | 
 877 | <!-- ================================== -->
 878 | <!-- Example 9: Using $props.id() for Unique IDs -->
 879 | <!-- ================================== -->
 880 | 
 881 | <!-- Demonstrates how to generate unique component-scoped IDs -->
 882 | 
 883 | ---
 884 | 
 885 | <!-- Filename: MyComponent.svelte -->
 886 | <script lang="ts">
 887 | 	const uid = $props.id();
 888 | </script>
 889 | 
 890 | <form>
 891 | 	<label for="{uid}-firstname">First Name: </label>
 892 | 	<input id="{uid}-firstname" type="text" />
 893 | 
 894 | 	<label for="{uid}-lastname">Last Name: </label>
 895 | 	<input id="{uid}-lastname" type="text" />
 896 | </form>
 897 | 
 898 | ---
 899 | 
 900 | <!-- Explanation:
 901 | - `$props.id()` generates a unique ID for this component instance.
 902 | - This is useful for accessibility (`for` and `aria-labelledby` attributes).
 903 | - Ensures consistency between server and client during hydration.
 904 | -->
 905 | 
 906 | 
 907 | ---
 908 | ## $Host
 909 | ---
 910 | 
 911 | <!-- ================================== -->
 912 | <!-- Example 1: Using $host to Dispatch Events -->
 913 | <!-- ================================== -->
 914 | 
 915 | <!-- Demonstrates how to use $host inside a custom element to dispatch events. -->
 916 | 
 917 | ---
 918 | 
 919 | <!-- Filename: Stepper.svelte -->
 920 | <svelte:options customElement="my-stepper" />
 921 | 
 922 | <script lang="ts">
 923 | 	function dispatch(type) {
 924 | 		$host().dispatchEvent(new CustomEvent(type)); 
 925 | 		// $host() gives access to the custom element itself.
 926 | 		// Dispatches 'increment' or 'decrement' events.
 927 | 	}
 928 | </script>
 929 | 
 930 | <button onclick={() => dispatch('decrement')}>decrement</button>
 931 | <button onclick={() => dispatch('increment')}>increment</button>
 932 | 
 933 | ---
 934 | 
 935 | <!-- Filename: App.svelte -->
 936 | <script lang="ts">
 937 | 	import './Stepper.svelte';
 938 | 
 939 | 	let count = $state(0); // State variable to track count
 940 | </script>
 941 | 
 942 | <my-stepper
 943 | 	ondecrement={() => count -= 1} 
 944 | 	onincrement={() => count += 1} 
 945 | ></my-stepper>
 946 | 
 947 | <p>count: {count}</p> <!-- Displays updated count -->
 948 | 
 949 | ---
 950 | 
 951 | <!-- Notes -->
 952 | - `$host()` only works in components compiled as **custom elements** (`<svelte:options customElement="..."/>`).
 953 | - This approach allows dispatching custom events from a **shadow DOM encapsulated component**.
 954 | - Ensure the parent component listens to the dispatched events (`ondecrement`, `onincrement`).
 955 | 
 956 | 
 957 | ---
 958 | ## $Inspect
 959 | ---
 960 | 
 961 | <!-- ================================== -->
 962 | <!-- Example 1: Basic $inspect Usage -->
 963 | <!-- ================================== -->
 964 | 
 965 | <!-- Demonstrates how `$inspect` logs changes to reactive state in development mode. -->
 966 | 
 967 | ---
 968 | 
 969 | <!-- Filename: App.svelte -->
 970 | <script>
 971 | 	let count = $state(0);
 972 | 	let message = $state('hello');
 973 | 
 974 | 	$inspect(count, message); // Logs `count` and `message` whenever they change
 975 | </script>
 976 | 
 977 | <button onclick={() => count++}>Increment</button>
 978 | <input bind:value={message} />
 979 | 
 980 | ---
 981 | 
 982 | <!-- Notes:
 983 | - `$inspect` will log changes to `count` and `message` automatically.
 984 | - It only works during development and is ignored in production.
 985 | - Useful for debugging reactive state.
 986 | -->
 987 | 
 988 | ---
 989 | 
 990 | <!-- ================================== -->
 991 | <!-- Example 2: Custom Logging with .with -->
 992 | <!-- ================================== -->
 993 | 
 994 | <!-- Demonstrates how `$inspect(...).with` replaces default logging with a custom function. -->
 995 | 
 996 | ---
 997 | 
 998 | <!-- Filename: App.svelte -->
 999 | <script>
1000 | 	let count = $state(0);
1001 | 
1002 | 	$inspect(count).with((type, count) => {
1003 | 		if (type === 'update') {
1004 | 			console.log(`Count updated to: ${count}`);
1005 | 		}
1006 | 	});
1007 | </script>
1008 | 
1009 | <button onclick={() => count++}>Increment</button>
1010 | 
1011 | ---
1012 | 
1013 | <!-- Notes:
1014 | - Instead of logging automatically, `$inspect(count).with(...)` calls a custom function.
1015 | - The callback receives `type` (`"init"` or `"update"`) and the updated values.
1016 | - Useful for debugging or conditional logging.
1017 | -->
1018 | 
1019 | ---
1020 | 
1021 | <!-- ================================== -->
1022 | <!-- Example 3: Tracing Changes with console.trace -->
1023 | <!-- ================================== -->
1024 | 
1025 | <!-- Demonstrates how to trace reactive state changes using `$inspect(...).with(console.trace)`. -->
1026 | 
1027 | ---
1028 | 
1029 | <!-- Filename: App.svelte -->
1030 | <script>
1031 | 	let message = $state('Hello');
1032 | 
1033 | 	$inspect(message).with(console.trace);
1034 | </script>
1035 | 
1036 | <input bind:value={message} />
1037 | 
1038 | ---
1039 | 
1040 | <!-- Notes:
1041 | - Using `console.trace` with `$inspect.with()` helps track where state changes originate.
1042 | - Best used when debugging complex reactive flows.
1043 | -->
1044 | 
1045 | ---
1046 | 
1047 | <!-- ================================== -->
1048 | <!-- Example 4: Tracing Effects with $inspect.trace -->
1049 | <!-- ================================== -->
1050 | 
1051 | <!-- Demonstrates how `$inspect.trace()` tracks function re-execution due to reactive state changes. -->
1052 | 
1053 | ---
1054 | 
1055 | <!-- Filename: App.svelte -->
1056 | <script>
1057 | 	import { doSomeWork } from './utils';
1058 | 
1059 | 	$effect(() => {
1060 | 		$inspect.trace(); // Logs which state changes caused this effect to run
1061 | 		doSomeWork();
1062 | 	});
1063 | </script>
1064 | 
1065 | ---
1066 | 
1067 | <!-- Notes:
1068 | - `$inspect.trace()` is useful inside `$effect()` to track reactivity.
1069 | - When the effect re-runs, it logs which state triggered the change.
1070 | - Added in Svelte 5.14.
1071 | -->
1072 | 


--------------------------------------------------------------------------------
/svelte5_full_context.txt:
--------------------------------------------------------------------------------
   1 | # Svelte 5 Runes Overview
   2 | 
   3 | ---
   4 | ## $State
   5 | ---
   6 | 
   7 | <!-- ================================== -->
   8 | <!-- Example 1: Basic Usage of $state -->
   9 | <!-- ================================== -->
  10 | 
  11 | <!-- Demonstrates how to create and update a reactive state variable using $state. -->
  12 | 
  13 | ---
  14 | 
  15 | <!-- Filename: Counter.svelte -->
  16 | <script>
  17 | 	let count = $state(0); // count is reactive
  18 | </script>
  19 | 
  20 | <button onclick={() => count++}>
  21 | 	clicks: {count} <!-- UI updates automatically when count changes -->
  22 | </button>
  23 | 
  24 | ---
  25 | 
  26 | <!-- Notes: -->
  27 | <!-- - $state makes `count` reactive. -->
  28 | <!-- - You can modify `count` like a normal variable, no need for a special setter. -->
  29 | 
  30 | <!-- ================================== -->
  31 | <!-- Example 2: Deep Reactivity with Arrays -->
  32 | <!-- ================================== -->
  33 | 
  34 | <!-- Demonstrates how $state makes arrays deeply reactive. -->
  35 | 
  36 | ---
  37 | 
  38 | <!-- Filename: TodoList.svelte -->
  39 | <script>
  40 | 	let todos = $state([
  41 | 		{ done: false, text: 'Learn Svelte' },
  42 | 		{ done: false, text: 'Build an app' }
  43 | 	]);
  44 | 
  45 | 	function toggle(index) {
  46 | 		todos[index].done = !todos[index].done; // Reactivity applies to individual items
  47 | 	}
  48 | </script>
  49 | 
  50 | <ul>
  51 | 	{#each todos as todo, index}
  52 | 		<li>
  53 | 			<input type="checkbox" bind:checked={todo.done} onclick={() => toggle(index)} />
  54 | 			{todo.text}
  55 | 		</li>
  56 | 	{/each}
  57 | </ul>
  58 | 
  59 | <button onclick={() => todos.push({ done: false, text: 'New task' })}>
  60 | 	Add Todo
  61 | </button>
  62 | 
  63 | ---
  64 | 
  65 | <!-- Notes: -->
  66 | <!-- - `todos` is a reactive proxy, meaning updates to properties trigger UI updates. -->
  67 | <!-- - `todos.push()` automatically makes new objects reactive. -->
  68 | 
  69 | <!-- ================================== -->
  70 | <!-- Example 3: Reactivity in Classes -->
  71 | <!-- ================================== -->
  72 | 
  73 | <!-- Demonstrates using $state inside a class to create reactive properties. -->
  74 | 
  75 | ---
  76 | 
  77 | <!-- Filename: TodoClassExample.svelte -->
  78 | <script>
  79 | 	class Todo {
  80 | 		done = $state(false);
  81 | 		text = $state('');
  82 | 
  83 | 		constructor(text) {
  84 | 			this.text = text;
  85 | 		}
  86 | 
  87 | 		reset = () => {
  88 | 			this.text = '';
  89 | 			this.done = false;
  90 | 		}
  91 | 	}
  92 | 
  93 | 	let todo = new Todo('Buy groceries');
  94 | </script>
  95 | 
  96 | <p>{todo.text} - {todo.done ? 'Done' : 'Not done'}</p>
  97 | <button onclick={() => todo.done = !todo.done}>Toggle</button>
  98 | <button onclick={() => todo.reset()}>Reset</button>
  99 | 
 100 | ---
 101 | 
 102 | <!-- Notes: -->
 103 | <!-- - Using an arrow function for `reset` ensures `this` remains correct. -->
 104 | <!-- - Class properties become reactive with $state. -->
 105 | 
 106 | <!-- ================================== -->
 107 | <!-- Example 4: Using $state.raw -->
 108 | <!-- ================================== -->
 109 | 
 110 | <!-- Demonstrates when to use $state.raw to avoid deep reactivity. -->
 111 | 
 112 | ---
 113 | 
 114 | <!-- Filename: RawStateExample.svelte -->
 115 | <script>
 116 | 	let person = $state.raw({
 117 | 		name: 'Alice',
 118 | 		age: 30
 119 | 	});
 120 | 
 121 | 	function updatePerson() {
 122 | 		// This won't work because `person` is raw (not reactive)
 123 | 		person.age += 1; 
 124 | 
 125 | 		// Instead, we must reassign the whole object
 126 | 		person = { ...person, age: person.age + 1 };
 127 | 	}
 128 | </script>
 129 | 
 130 | <p>{person.name} is {person.age} years old.</p>
 131 | <button onclick={updatePerson}>Increase Age</button>
 132 | 
 133 | ---
 134 | 
 135 | <!-- Notes: -->
 136 | <!-- - `person.age += 1` does nothing because $state.raw objects are immutable. -->
 137 | <!-- - To update, replace the entire object. -->
 138 | 
 139 | <!-- ================================== -->
 140 | <!-- Example 5: Taking a Snapshot of Reactive State -->
 141 | <!-- ================================== -->
 142 | 
 143 | <!-- Demonstrates how to extract a non-proxied snapshot of a reactive object. -->
 144 | 
 145 | ---
 146 | 
 147 | <!-- Filename: SnapshotExample.svelte -->
 148 | <script>
 149 | 	let counter = $state({ count: 0 });
 150 | 
 151 | 	function logSnapshot() {
 152 | 		console.log($state.snapshot(counter)); // Logs a plain object, not a Proxy
 153 | 	}
 154 | </script>
 155 | 
 156 | <p>Count: {counter.count}</p>
 157 | <button onclick={() => counter.count++}>Increment</button>
 158 | <button onclick={logSnapshot}>Log Snapshot</button>
 159 | 
 160 | ---
 161 | 
 162 | <!-- Notes: -->
 163 | <!-- - `snapshot` removes reactivity, making it safe to pass to external libraries. -->
 164 | 
 165 | <!-- ================================== -->
 166 | <!-- Example 6: Passing Reactive State to Functions -->
 167 | <!-- ================================== -->
 168 | 
 169 | <!-- Demonstrates passing a reactive state into a function and ensuring it remains reactive. -->
 170 | 
 171 | ---
 172 | 
 173 | <!-- Filename: FunctionStateExample.svelte -->
 174 | <script>
 175 | 	function add(getA, getB) {
 176 | 		return () => getA() + getB();
 177 | 	}
 178 | 
 179 | 	let a = $state(1);
 180 | 	let b = $state(2);
 181 | 	let total = add(() => a, () => b); // Pass getters to maintain reactivity
 182 | </script>
 183 | 
 184 | <p>{a} + {b} = {total()}</p>
 185 | <button onclick={() => a++}>Increment A</button>
 186 | <button onclick={() => b++}>Increment B</button>
 187 | 
 188 | ---
 189 | 
 190 | <!-- Notes: -->
 191 | <!-- - Directly passing `a` and `b` would not be reactive. -->
 192 | <!-- - Using getter functions ensures the function always retrieves the latest values. -->
 193 | 
 194 | 
 195 | <!-- ================================== -->
 196 | <!-- Extra: Optional Getter/Setter Binding -->
 197 | <!-- ================================== -->
 198 | 
 199 | <!-- Shows how to bind an input to a reactive value with a custom getter/setter. -->
 200 | 
 201 | <script>
 202 | 	let name = $state('Alice');
 203 | </script>
 204 | 
 205 | <input bind:value={
 206 | 	() => name,
 207 | 	(v) => name = v.trimStart()
 208 | } />
 209 | 
 210 | <p>Hello, {name}!</p>
 211 | 
 212 | <!-- Notes:
 213 | - This uses the new bind: syntax (Svelte 5.9+) with a getter and setter.
 214 | - Useful for applying validation or transformation automatically.
 215 | -->
 216 | 
 217 | 
 218 | ---
 219 | ## $Derived
 220 | ---
 221 | 
 222 | <!-- ================================== -->
 223 | <!-- Example 1: Basic Derived State -->
 224 | <!-- ================================== -->
 225 | 
 226 | <!-- Demonstrates how `$derived` updates a value based on `$state`. -->
 227 | 
 228 | ---
 229 | 
 230 | <!-- Filename: App.svelte -->
 231 | <script lang="ts">
 232 | 	let count = $state(0);
 233 | 	let doubled = $derived(count * 2); // `doubled` automatically updates when `count` changes
 234 | </script>
 235 | 
 236 | <button onclick={() => count++}>
 237 | 	Increment
 238 | </button>
 239 | 
 240 | <p>{count} doubled is {doubled}</p>
 241 | 
 242 | ---
 243 | 
 244 | <!-- Notes: -->
 245 | - `$derived(count * 2)` ensures `doubled` always reflects the latest `count`.
 246 | - You **cannot** modify state inside `$derived`, e.g., `count++` inside the expression.
 247 | 
 248 | <!-- ================================== -->
 249 | <!-- Example 2: Using $derived.by for Complex Computation -->
 250 | <!-- ================================== -->
 251 | 
 252 | <!-- Demonstrates how `$derived.by` allows more complex calculations. -->
 253 | 
 254 | ---
 255 | 
 256 | <!-- Filename: App.svelte -->
 257 | <script lang="ts">
 258 | 	let numbers = $state([1, 2, 3]);
 259 | 
 260 | 	// `total` is automatically recalculated when `numbers` change
 261 | 	let total = $derived.by(() => {
 262 | 		let sum = 0;
 263 | 		for (const n of numbers) {
 264 | 			sum += n;
 265 | 		}
 266 | 		return sum;
 267 | 	});
 268 | </script>
 269 | 
 270 | <button onclick={() => numbers.push(numbers.length + 1)}>
 271 | 	Add Number
 272 | </button>
 273 | 
 274 | <p>{numbers.join(' + ')} = {total}</p>
 275 | 
 276 | ---
 277 | 
 278 | <!-- Notes: -->
 279 | - `$derived.by(() => { ... })` is useful when the derived state requires loops or multiple steps.
 280 | - The derived state (`total`) automatically updates when `numbers` change.
 281 | 
 282 | <!-- ================================== -->
 283 | <!-- Example 3: Understanding Dependencies -->
 284 | <!-- ================================== -->
 285 | 
 286 | <!-- Shows how derived state tracks dependencies and updates accordingly. -->
 287 | 
 288 | ---
 289 | 
 290 | <!-- Filename: App.svelte -->
 291 | <script lang="ts">
 292 | 	let count = $state(0);
 293 | 	let isEven = $derived(count % 2 === 0);
 294 | </script>
 295 | 
 296 | <button onclick={() => count++}>
 297 | 	Increment
 298 | </button>
 299 | 
 300 | <p>{count} is {isEven ? 'Even' : 'Odd'}</p>
 301 | 
 302 | ---
 303 | 
 304 | <!-- Notes: -->
 305 | - `$derived` tracks all **synchronously accessed** state inside its expression.
 306 | - If `count` changes, `isEven` will automatically update.
 307 | 
 308 | <!-- ================================== -->
 309 | <!-- Example 4: Avoiding Unnecessary Updates -->
 310 | <!-- ================================== -->
 311 | 
 312 | <!-- Demonstrates how Svelte skips updates when derived values remain the same. -->
 313 | 
 314 | ---
 315 | 
 316 | <!-- Filename: App.svelte -->
 317 | <script lang="ts">
 318 | 	let count = $state(0);
 319 | 	let large = $derived(count > 10);
 320 | </script>
 321 | 
 322 | <button onclick={() => count++}>
 323 | 	Increment
 324 | </button>
 325 | 
 326 | <p>Is count large? {large}</p>
 327 | 
 328 | ---
 329 | 
 330 | <!-- Notes: -->
 331 | - Svelte **only updates** when `large` changes (`false` → `true` or vice versa).
 332 | - If `count` changes **within the same threshold** (e.g., `5 → 6`), no update occurs.
 333 | 
 334 | ---
 335 | 
 336 | 
 337 | ---
 338 | ## $Effect
 339 | ---
 340 | 
 341 | <!-- ================================== -->
 342 | <!-- Example 1: Basic Usage of $effect -->
 343 | <!-- ================================== -->
 344 | 
 345 | <!-- Demonstrates how to use `$effect` to reactively update a canvas when state changes. -->
 346 | 
 347 | ---
 348 | 
 349 | <!-- Filename: Canvas.svelte -->
 350 | <script>
 351 | 	let size = $state(50);
 352 | 	let color = $state('#ff3e00');
 353 | 	let canvas;
 354 | 
 355 | 	$effect(() => {
 356 | 		const context = canvas.getContext('2d');
 357 | 		context.clearRect(0, 0, canvas.width, canvas.height);
 358 | 
 359 | 		// This effect runs whenever `color` or `size` changes
 360 | 		context.fillStyle = color;
 361 | 		context.fillRect(0, 0, size, size);
 362 | 	});
 363 | </script>
 364 | 
 365 | <canvas bind:this={canvas} width="100" height="100" />
 366 | 
 367 | <input type="color" bind:value={color} />
 368 | <input type="range" bind:value={size} min="10" max="100" />
 369 | 
 370 | ---
 371 | 
 372 | <!-- Notes:
 373 | - `$effect` automatically tracks dependencies (`size`, `color`).
 374 | - Runs only in the browser, not during SSR.
 375 | - Avoid modifying state inside an effect to prevent infinite loops.
 376 | -->
 377 | 
 378 | <!-- ================================== -->
 379 | <!-- Example 2: Using Teardown in $effect -->
 380 | <!-- ================================== -->
 381 | 
 382 | <!-- Demonstrates how to return a cleanup function inside `$effect` to clear intervals. -->
 383 | 
 384 | ---
 385 | 
 386 | <!-- Filename: Counter.svelte -->
 387 | <script>
 388 | 	let count = $state(0);
 389 | 	let milliseconds = $state(1000);
 390 | 
 391 | 	$effect(() => {
 392 | 		const interval = setInterval(() => {
 393 | 			count += 1;
 394 | 		}, milliseconds);
 395 | 
 396 | 		// Cleanup function runs before effect re-runs or on component destroy
 397 | 		return () => {
 398 | 			clearInterval(interval);
 399 | 		};
 400 | 	});
 401 | </script>
 402 | 
 403 | <h1>{count}</h1>
 404 | 
 405 | <button onclick={() => (milliseconds *= 2)}>Slower</button>
 406 | <button onclick={() => (milliseconds /= 2)}>Faster</button>
 407 | 
 408 | ---
 409 | 
 410 | <!-- Notes:
 411 | - The interval is cleared before the next effect run or when the component is destroyed.
 412 | - If `milliseconds` changes, the old interval is removed before a new one is created.
 413 | -->
 414 | 
 415 | <!-- ================================== -->
 416 | <!-- Example 3: Dependency Tracking in $effect -->
 417 | <!-- ================================== -->
 418 | 
 419 | <!-- Demonstrates how `$effect` only tracks dependencies accessed synchronously. -->
 420 | 
 421 | ---
 422 | 
 423 | <!-- Filename: AsyncCanvas.svelte -->
 424 | <script>
 425 | 	let size = $state(50);
 426 | 	let color = $state('#ff3e00');
 427 | 	let canvas;
 428 | 
 429 | 	$effect(() => {
 430 | 		const context = canvas.getContext('2d');
 431 | 		context.clearRect(0, 0, canvas.width, canvas.height);
 432 | 
 433 | 		// This effect re-runs when `color` changes but not when `size` changes
 434 | 		context.fillStyle = color;
 435 | 
 436 | 		setTimeout(() => {
 437 | 			context.fillRect(0, 0, size, size);
 438 | 		}, 0);
 439 | 	});
 440 | </script>
 441 | 
 442 | <canvas bind:this={canvas} width="100" height="100" />
 443 | 
 444 | <input type="color" bind:value={color} />
 445 | <input type="range" bind:value={size} min="10" max="100" />
 446 | 
 447 | ---
 448 | 
 449 | <!-- Notes:
 450 | - `size` is accessed inside `setTimeout`, so it is NOT a tracked dependency.
 451 | - The effect runs when `color` changes, but `size` updates do not trigger a re-run.
 452 | -->
 453 | 
 454 | <!-- ================================== -->
 455 | <!-- Example 4: $effect.pre for Pre-DOM Updates -->
 456 | <!-- ================================== -->
 457 | 
 458 | <!-- Demonstrates how `$effect.pre` can be used to run logic before the DOM updates. -->
 459 | 
 460 | ---
 461 | 
 462 | <!-- Filename: AutoScroll.svelte -->
 463 | <script>
 464 | 	import { tick } from 'svelte';
 465 | 
 466 | 	let div = $state();
 467 | 	let messages = $state([]);
 468 | 
 469 | 	$effect.pre(() => {
 470 | 		if (!div) return;
 471 | 
 472 | 		// Tracks `messages.length` so the effect re-runs when messages change
 473 | 		messages.length;
 474 | 
 475 | 		// Auto-scroll logic before the DOM updates
 476 | 		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
 477 | 			tick().then(() => {
 478 | 				div.scrollTo(0, div.scrollHeight);
 479 | 			});
 480 | 		}
 481 | 	});
 482 | </script>
 483 | 
 484 | <div bind:this={div}>
 485 | 	{#each messages as message}
 486 | 		<p>{message}</p>
 487 | 	{/each}
 488 | </div>
 489 | 
 490 | <button onclick={() => messages = [...messages, 'New message']}>Add Message</button>
 491 | 
 492 | ---
 493 | 
 494 | <!-- Notes:
 495 | - `$effect.pre` runs before the DOM updates.
 496 | - Useful for cases like auto-scrolling where timing is important.
 497 | -->
 498 | 
 499 | <!-- ================================== -->
 500 | <!-- Example 5: Avoiding Infinite Loops in $effect -->
 501 | <!-- ================================== -->
 502 | 
 503 | <!-- Demonstrates the correct way to derive state instead of modifying it within `$effect`. -->
 504 | 
 505 | ---
 506 | 
 507 | <!-- Filename: DerivedState.svelte -->
 508 | <script>
 509 | 	let count = $state(0);
 510 | 	let doubled = $derived(count * 2); // Correct approach
 511 | 
 512 | 	// Incorrect approach (causes infinite loops):
 513 | 	// $effect(() => {
 514 | 	//   doubled = count * 2;
 515 | 	// });
 516 | </script>
 517 | 
 518 | <h1>{count} doubled is {doubled}</h1>
 519 | 
 520 | <button onclick={() => count += 1}>Increment</button>
 521 | 
 522 | ---
 523 | 
 524 | <!-- Notes:
 525 | - Use `$derived` instead of modifying state inside `$effect`.
 526 | - Prevents unnecessary re-renders and infinite loops.
 527 | -->
 528 | 
 529 | ---
 530 | 
 531 | 
 532 | ---
 533 | ## $Bindable
 534 | ---
 535 | 
 536 | <!-- ================================== -->
 537 | <!-- Example 1: Basic Two-Way Binding with $bindable -->
 538 | <!-- ================================== -->
 539 | 
 540 | <!-- Demonstrates how to use `$bindable` to create a prop that can be bound to a parent component. -->
 541 | 
 542 | ---
 543 | 
 544 | <!-- Filename: FancyInput.svelte -->
 545 | <script lang="ts">
 546 | 	let { value = $bindable(), ...props } = $props(); // `value` is bindable, allowing two-way data flow
 547 | </script>
 548 | 
 549 | <input bind:value={value} {...props} />
 550 | 
 551 | ---
 552 | 
 553 | <!-- Filename: App.svelte -->
 554 | <script lang="ts">
 555 | 	import FancyInput from './FancyInput.svelte';
 556 | 
 557 | 	let message = $state('hello'); // Using `$state` to create a reactive state variable
 558 | </script>
 559 | 
 560 | <FancyInput bind:value={message} />
 561 | <p>{message}</p> <!-- This will update as the user types in the input -->
 562 | 
 563 | ---
 564 | 
 565 | <!-- Notes: -->
 566 | <!-- - The `bind:value` directive ensures that `message` in the parent updates when the input changes. -->
 567 | <!-- - This is useful for creating reusable, controlled input components. -->
 568 | <!-- - The parent is not required to bind to `value`; it can simply pass a normal prop. -->
 569 | 
 570 | <!-- ================================== -->
 571 | <!-- Example 2: Default Fallback for Bindable Props -->
 572 | <!-- ================================== -->
 573 | 
 574 | <!-- Shows how to provide a default value when the parent does not pass a bindable prop. -->
 575 | 
 576 | ---
 577 | 
 578 | <!-- Filename: FancyInput.svelte -->
 579 | <script lang="ts">
 580 | 	let { value = $bindable('fallback'), ...props } = $props(); // Default value set to 'fallback'
 581 | </script>
 582 | 
 583 | <input bind:value={value} {...props} />
 584 | 
 585 | ---
 586 | 
 587 | <!-- Filename: App.svelte -->
 588 | <script lang="ts">
 589 | 	import FancyInput from './FancyInput.svelte';
 590 | </script>
 591 | 
 592 | <FancyInput /> <!-- No `bind:value`, so it defaults to 'fallback' -->
 593 | 
 594 | ---
 595 | 
 596 | <!-- Notes: -->
 597 | <!-- - If `value` is not provided by the parent, it starts with 'fallback'. -->
 598 | <!-- - This is useful for ensuring a component always has a meaningful initial state. -->
 599 | 
 600 | <!-- ================================== -->
 601 | <!-- Example 3: Using $bindable with Multiple Props -->
 602 | <!-- ================================== -->
 603 | 
 604 | <!-- Demonstrates how to use multiple `$bindable` props in a single component. -->
 605 | 
 606 | ---
 607 | 
 608 | <!-- Filename: FancyInput.svelte -->
 609 | <script lang="ts">
 610 | 	let { value = $bindable('default text'), disabled = $bindable(false), ...props } = $props();
 611 | </script>
 612 | 
 613 | <input bind:value={value} bind:disabled={disabled} {...props} />
 614 | 
 615 | ---
 616 | 
 617 | <!-- Filename: App.svelte -->
 618 | <script lang="ts">
 619 | 	import FancyInput from './FancyInput.svelte';
 620 | 
 621 | 	let message = $state('Editable text');
 622 | 	let isDisabled = $state(false);
 623 | </script>
 624 | 
 625 | <FancyInput bind:value={message} bind:disabled={isDisabled} />
 626 | <button onclick={() => isDisabled = !isDisabled}>
 627 | 	Toggle Disabled
 628 | </button>
 629 | 
 630 | ---
 631 | 
 632 | <!-- Notes: -->
 633 | - The input's `value` and `disabled` states can both be bound to the parent.
 634 | - The button toggles the `disabled` state dynamically.
 635 | - Useful for forms and UI elements requiring controlled states.
 636 | 
 637 | 
 638 | ---
 639 | ## $Props
 640 | ---
 641 | 
 642 | <!-- ================================== -->
 643 | <!-- Example 1: Basic Prop Usage with $props -->
 644 | <!-- ================================== -->
 645 | 
 646 | <!-- Demonstrates how to receive props in a Svelte component using $props -->
 647 | 
 648 | ---
 649 | 
 650 | <!-- Filename: App.svelte -->
 651 | <script lang="ts">
 652 | 	import MyComponent from './MyComponent.svelte';
 653 | </script>
 654 | 
 655 | <MyComponent adjective="cool" />
 656 | 
 657 | ---
 658 | 
 659 | <!-- Filename: MyComponent.svelte -->
 660 | <script lang="ts">
 661 | 	let props = $props();
 662 | </script>
 663 | 
 664 | <p>This component is {props.adjective}</p>
 665 | 
 666 | ---
 667 | 
 668 | <!-- Explanation:
 669 | - `MyComponent` receives a prop `adjective`.
 670 | - The `$props` rune allows access to the props object inside `MyComponent`.
 671 | - `props.adjective` displays the value passed from `App.svelte`.
 672 | -->
 673 | 
 674 | <!-- ================================== -->
 675 | <!-- Example 2: Destructuring Props -->
 676 | <!-- ================================== -->
 677 | 
 678 | <!-- Demonstrates how to destructure props for cleaner code -->
 679 | 
 680 | ---
 681 | 
 682 | <!-- Filename: MyComponent.svelte -->
 683 | <script lang="ts">
 684 | 	let { adjective } = $props();
 685 | </script>
 686 | 
 687 | <p>This component is {adjective}</p>
 688 | 
 689 | ---
 690 | 
 691 | <!-- Explanation:
 692 | - Instead of accessing `props.adjective`, we destructure `adjective` directly from `$props()`.
 693 | - This makes the code more concise and readable.
 694 | -->
 695 | 
 696 | <!-- ================================== -->
 697 | <!-- Example 3: Fallback Values for Props -->
 698 | <!-- ================================== -->
 699 | 
 700 | <!-- Demonstrates how to provide default values when a prop is not passed -->
 701 | 
 702 | ---
 703 | 
 704 | <!-- Filename: MyComponent.svelte -->
 705 | <script lang="ts">
 706 | 	let { adjective = 'happy' } = $props();
 707 | </script>
 708 | 
 709 | <p>This component is {adjective}</p>
 710 | 
 711 | ---
 712 | 
 713 | <!-- Explanation:
 714 | - If `adjective` is not provided by the parent, it defaults to `'happy'`.
 715 | - The fallback value does **not** become reactive.
 716 | -->
 717 | 
 718 | <!-- ================================== -->
 719 | <!-- Example 4: Renaming Props -->
 720 | <!-- ================================== -->
 721 | 
 722 | <!-- Demonstrates how to rename props when destructuring -->
 723 | 
 724 | ---
 725 | 
 726 | <!-- Filename: MyComponent.svelte -->
 727 | <script lang="ts">
 728 | 	let { super: trouper = 'lights are gonna find me' } = $props();
 729 | </script>
 730 | 
 731 | <p>Song lyric: {trouper}</p>
 732 | 
 733 | ---
 734 | 
 735 | <!-- Explanation:
 736 | - `super` is a reserved keyword in JavaScript.
 737 | - We rename `super` to `trouper` while destructuring.
 738 | - It also includes a default fallback value.
 739 | -->
 740 | 
 741 | <!-- ================================== -->
 742 | <!-- Example 5: Using Rest Props -->
 743 | <!-- ================================== -->
 744 | 
 745 | <!-- Demonstrates how to collect all remaining props using the rest syntax -->
 746 | 
 747 | ---
 748 | 
 749 | <!-- Filename: MyComponent.svelte -->
 750 | <script lang="ts">
 751 | 	let { a, b, c, ...others } = $props();
 752 | </script>
 753 | 
 754 | <p>a: {a}, b: {b}, c: {c}</p>
 755 | <p>Other props: {JSON.stringify(others)}</p>
 756 | 
 757 | ---
 758 | 
 759 | <!-- Explanation:
 760 | - `a`, `b`, and `c` are extracted explicitly.
 761 | - The rest of the props are collected into the `others` object.
 762 | - This can be useful for passing arbitrary props to a child component.
 763 | -->
 764 | 
 765 | <!-- ================================== -->
 766 | <!-- Example 6: Updating Props (Ephemeral State) -->
 767 | <!-- ================================== -->
 768 | 
 769 | <!-- Demonstrates how prop values update when the parent changes, but can be overridden temporarily -->
 770 | 
 771 | ---
 772 | 
 773 | <!-- Filename: App.svelte -->
 774 | <script lang="ts">
 775 | 	import Child from './Child.svelte';
 776 | 
 777 | 	let count = $state(0);
 778 | </script>
 779 | 
 780 | <button onclick={() => count += 1}>
 781 | 	clicks (parent): {count}
 782 | </button>
 783 | 
 784 | <Child {count} />
 785 | 
 786 | ---
 787 | 
 788 | <!-- Filename: Child.svelte -->
 789 | <script lang="ts">
 790 | 	let { count } = $props();
 791 | </script>
 792 | 
 793 | <button onclick={() => count += 1}>
 794 | 	clicks (child): {count}
 795 | </button>
 796 | 
 797 | ---
 798 | 
 799 | <!-- Explanation:
 800 | - The `count` prop updates when changed in `App.svelte`.
 801 | - However, inside `Child.svelte`, `count` can be modified temporarily.
 802 | - This is useful for unsaved, ephemeral state.
 803 | -->
 804 | 
 805 | <!-- ================================== -->
 806 | <!-- Example 7: Avoiding Object Prop Mutation -->
 807 | <!-- ================================== -->
 808 | 
 809 | <!-- Demonstrates how object mutations do not work if props are plain objects -->
 810 | 
 811 | ---
 812 | 
 813 | <!-- Filename: App.svelte -->
 814 | <script lang="ts">
 815 | 	import Child from './Child.svelte';
 816 | </script>
 817 | 
 818 | <Child object={{ count: 0 }} />
 819 | 
 820 | ---
 821 | 
 822 | <!-- Filename: Child.svelte -->
 823 | <script lang="ts">
 824 | 	let { object } = $props();
 825 | </script>
 826 | 
 827 | <button onclick={() => object.count += 1}>
 828 | 	clicks: {object.count}
 829 | </button>
 830 | 
 831 | ---
 832 | 
 833 | <!-- Explanation:
 834 | - The object prop `{ count: 0 }` is passed to `Child.svelte`.
 835 | - Mutating `object.count` **does not update the parent**.
 836 | - This is because plain objects are not reactive.
 837 | -->
 838 | 
 839 | <!-- ================================== -->
 840 | <!-- Example 8: Mutating a Reactive Prop (Warning) -->
 841 | <!-- ================================== -->
 842 | 
 843 | <!-- Demonstrates the warning when mutating a reactive state prop -->
 844 | 
 845 | ---
 846 | 
 847 | <!-- Filename: App.svelte -->
 848 | <script lang="ts">
 849 | 	import Child from './Child.svelte';
 850 | 
 851 | 	let object = $state({ count: 0 });
 852 | </script>
 853 | 
 854 | <Child {object} />
 855 | 
 856 | ---
 857 | 
 858 | <!-- Filename: Child.svelte -->
 859 | <script lang="ts">
 860 | 	let { object } = $props();
 861 | </script>
 862 | 
 863 | <button onclick={() => object.count += 1}>
 864 | 	clicks: {object.count}
 865 | </button>
 866 | 
 867 | ---
 868 | 
 869 | <!-- Explanation:
 870 | - `object` is a `$state` reactive proxy.
 871 | - Mutating `object.count` inside `Child.svelte` **does work**, but shows a warning.
 872 | - This warns against mutating state that does not "belong" to the child.
 873 | -->
 874 | 
 875 | <!-- ================================== -->
 876 | <!-- Example 9: Using $props.id() for Unique IDs -->
 877 | <!-- ================================== -->
 878 | 
 879 | <!-- Demonstrates how to generate unique component-scoped IDs -->
 880 | 
 881 | ---
 882 | 
 883 | <!-- Filename: MyComponent.svelte -->
 884 | <script lang="ts">
 885 | 	const uid = $props.id();
 886 | </script>
 887 | 
 888 | <form>
 889 | 	<label for="{uid}-firstname">First Name: </label>
 890 | 	<input id="{uid}-firstname" type="text" />
 891 | 
 892 | 	<label for="{uid}-lastname">Last Name: </label>
 893 | 	<input id="{uid}-lastname" type="text" />
 894 | </form>
 895 | 
 896 | ---
 897 | 
 898 | <!-- Explanation:
 899 | - `$props.id()` generates a unique ID for this component instance.
 900 | - This is useful for accessibility (`for` and `aria-labelledby` attributes).
 901 | - Ensures consistency between server and client during hydration.
 902 | -->
 903 | 
 904 | 
 905 | ---
 906 | ## $Host
 907 | ---
 908 | 
 909 | <!-- ================================== -->
 910 | <!-- Example 1: Using $host to Dispatch Events -->
 911 | <!-- ================================== -->
 912 | 
 913 | <!-- Demonstrates how to use $host inside a custom element to dispatch events. -->
 914 | 
 915 | ---
 916 | 
 917 | <!-- Filename: Stepper.svelte -->
 918 | <svelte:options customElement="my-stepper" />
 919 | 
 920 | <script lang="ts">
 921 | 	function dispatch(type) {
 922 | 		$host().dispatchEvent(new CustomEvent(type)); 
 923 | 		// $host() gives access to the custom element itself.
 924 | 		// Dispatches 'increment' or 'decrement' events.
 925 | 	}
 926 | </script>
 927 | 
 928 | <button onclick={() => dispatch('decrement')}>decrement</button>
 929 | <button onclick={() => dispatch('increment')}>increment</button>
 930 | 
 931 | ---
 932 | 
 933 | <!-- Filename: App.svelte -->
 934 | <script lang="ts">
 935 | 	import './Stepper.svelte';
 936 | 
 937 | 	let count = $state(0); // State variable to track count
 938 | </script>
 939 | 
 940 | <my-stepper
 941 | 	ondecrement={() => count -= 1} 
 942 | 	onincrement={() => count += 1} 
 943 | ></my-stepper>
 944 | 
 945 | <p>count: {count}</p> <!-- Displays updated count -->
 946 | 
 947 | ---
 948 | 
 949 | <!-- Notes -->
 950 | - `$host()` only works in components compiled as **custom elements** (`<svelte:options customElement="..."/>`).
 951 | - This approach allows dispatching custom events from a **shadow DOM encapsulated component**.
 952 | - Ensure the parent component listens to the dispatched events (`ondecrement`, `onincrement`).
 953 | 
 954 | 
 955 | ---
 956 | ## $Inspect
 957 | ---
 958 | 
 959 | <!-- ================================== -->
 960 | <!-- Example 1: Basic $inspect Usage -->
 961 | <!-- ================================== -->
 962 | 
 963 | <!-- Demonstrates how `$inspect` logs changes to reactive state in development mode. -->
 964 | 
 965 | ---
 966 | 
 967 | <!-- Filename: App.svelte -->
 968 | <script>
 969 | 	let count = $state(0);
 970 | 	let message = $state('hello');
 971 | 
 972 | 	$inspect(count, message); // Logs `count` and `message` whenever they change
 973 | </script>
 974 | 
 975 | <button onclick={() => count++}>Increment</button>
 976 | <input bind:value={message} />
 977 | 
 978 | ---
 979 | 
 980 | <!-- Notes:
 981 | - `$inspect` will log changes to `count` and `message` automatically.
 982 | - It only works during development and is ignored in production.
 983 | - Useful for debugging reactive state.
 984 | -->
 985 | 
 986 | ---
 987 | 
 988 | <!-- ================================== -->
 989 | <!-- Example 2: Custom Logging with .with -->
 990 | <!-- ================================== -->
 991 | 
 992 | <!-- Demonstrates how `$inspect(...).with` replaces default logging with a custom function. -->
 993 | 
 994 | ---
 995 | 
 996 | <!-- Filename: App.svelte -->
 997 | <script>
 998 | 	let count = $state(0);
 999 | 
1000 | 	$inspect(count).with((type, count) => {
1001 | 		if (type === 'update') {
1002 | 			console.log(`Count updated to: ${count}`);
1003 | 		}
1004 | 	});
1005 | </script>
1006 | 
1007 | <button onclick={() => count++}>Increment</button>
1008 | 
1009 | ---
1010 | 
1011 | <!-- Notes:
1012 | - Instead of logging automatically, `$inspect(count).with(...)` calls a custom function.
1013 | - The callback receives `type` (`"init"` or `"update"`) and the updated values.
1014 | - Useful for debugging or conditional logging.
1015 | -->
1016 | 
1017 | ---
1018 | 
1019 | <!-- ================================== -->
1020 | <!-- Example 3: Tracing Changes with console.trace -->
1021 | <!-- ================================== -->
1022 | 
1023 | <!-- Demonstrates how to trace reactive state changes using `$inspect(...).with(console.trace)`. -->
1024 | 
1025 | ---
1026 | 
1027 | <!-- Filename: App.svelte -->
1028 | <script>
1029 | 	let message = $state('Hello');
1030 | 
1031 | 	$inspect(message).with(console.trace);
1032 | </script>
1033 | 
1034 | <input bind:value={message} />
1035 | 
1036 | ---
1037 | 
1038 | <!-- Notes:
1039 | - Using `console.trace` with `$inspect.with()` helps track where state changes originate.
1040 | - Best used when debugging complex reactive flows.
1041 | -->
1042 | 
1043 | ---
1044 | 
1045 | <!-- ================================== -->
1046 | <!-- Example 4: Tracing Effects with $inspect.trace -->
1047 | <!-- ================================== -->
1048 | 
1049 | <!-- Demonstrates how `$inspect.trace()` tracks function re-execution due to reactive state changes. -->
1050 | 
1051 | ---
1052 | 
1053 | <!-- Filename: App.svelte -->
1054 | <script>
1055 | 	import { doSomeWork } from './utils';
1056 | 
1057 | 	$effect(() => {
1058 | 		$inspect.trace(); // Logs which state changes caused this effect to run
1059 | 		doSomeWork();
1060 | 	});
1061 | </script>
1062 | 
1063 | ---
1064 | 
1065 | <!-- Notes:
1066 | - `$inspect.trace()` is useful inside `$effect()` to track reactivity.
1067 | - When the effect re-runs, it logs which state triggered the change.
1068 | - Added in Svelte 5.14.
1069 | -->
1070 | 
1071 | 
1072 | # Svelte 5 Event Handling
1073 | 
1074 | <!-- ================================== -->
1075 | <!-- Example 1: Basic Event Handling -->
1076 | <!-- ================================== -->
1077 | 
1078 | **Svelte 5 replaces `on:` directives with direct property bindings for event handlers.**
1079 | 
1080 | ---
1081 | 
1082 | <!-- Filename: App.svelte -->
1083 | ```svelte
1084 | <script>
1085 | 	let count = $state(0);
1086 | 
1087 | 	function onclick() {
1088 | 		count++;
1089 | 	}
1090 | </script>
1091 | 
1092 | <button {onclick}>
1093 | 	clicks: {count}
1094 | </button>
1095 | ```
1096 | 
1097 | **Key changes**:
1098 | - Removed `on:click`, replacing it with `{onclick}` as a property.
1099 | - Uses a named function (`onclick`) instead of inline arrow functions.
1100 | 
1101 | ---
1102 | 
1103 | <!-- ================================== -->
1104 | <!-- Example 2: Component Event Callbacks -->
1105 | <!-- ================================== -->
1106 | 
1107 | **In Svelte 5, components no longer use `createEventDispatcher()`. Instead, they accept callback props.**
1108 | 
1109 | ---
1110 | 
1111 | <!-- Filename: Pump.svelte -->
1112 | ```svelte
1113 | <script lang="ts">
1114 | 	let { inflate, deflate } = $props(); // Props passed from parent
1115 | 	let power = $state(5);
1116 | </script>
1117 | 
1118 | <button onclick={() => inflate(power)}>inflate</button>
1119 | <button onclick={() => deflate(power)}>deflate</button>
1120 | <button onclick={() => power--}>-</button>
1121 | Pump power: {power}
1122 | <button onclick={() => power++}>+</button>
1123 | ```
1124 | 
1125 | ---
1126 | 
1127 | <!-- Filename: App.svelte -->
1128 | ```svelte
1129 | <script lang="ts">
1130 | 	import Pump from './Pump.svelte';
1131 | 
1132 | 	let size = $state(15);
1133 | 	let burst = $state(false);
1134 | 
1135 | 	function inflateHandler(power) {
1136 | 		size += power;
1137 | 		if (size > 75) burst = true;
1138 | 	}
1139 | 
1140 | 	function deflateHandler(power) {
1141 | 		if (size > 0) size -= power;
1142 | 	}
1143 | 
1144 | 	function reset() {
1145 | 		size = 15;
1146 | 		burst = false;
1147 | 	}
1148 | </script>
1149 | 
1150 | <Pump inflate={inflateHandler} deflate={deflateHandler} />
1151 | 
1152 | {#if burst}
1153 | 	<button onclick={reset}>new balloon</button>
1154 | 	<span class="boom">💥</span>
1155 | {:else}
1156 | 	<span class="balloon" style="scale: {0.01 * size}">
1157 | 		🎈
1158 | 	</span>
1159 | {/if}
1160 | ```
1161 | 
1162 | **Key changes**:
1163 | - Removed `createEventDispatcher()`, instead using callback props (`inflate`, `deflate`).
1164 | - Events are now just function calls inside `Pump.svelte`.
1165 | - **Parent (App.svelte)** passes handlers like `inflateHandler` to `Pump`.
1166 | 
1167 | ---
1168 | 
1169 | <!-- ================================== -->
1170 | <!-- Example 3: Bubbling Events with Callback Props -->
1171 | <!-- ================================== -->
1172 | 
1173 | **To forward an event from an element to a component, use callback props instead of `on:`.**
1174 | 
1175 | ---
1176 | 
1177 | <!-- Filename: Clickable.svelte -->
1178 | ```svelte
1179 | <script>
1180 | 	let { onclick } = $props(); // Accepts an `onclick` function from parent
1181 | </script>
1182 | 
1183 | <button {onclick}>
1184 | 	click me
1185 | </button>
1186 | ```
1187 | 
1188 | **Key changes**:
1189 | - No need to manually forward events like `on:click` → `{onclick}` does the job.
1190 | 
1191 | ---
1192 | 
1193 | <!-- ================================== -->
1194 | <!-- Example 4: Spreading Props Including Event Handlers -->
1195 | <!-- ================================== -->
1196 | 
1197 | **Instead of manually listing every event, just spread props.**
1198 | 
1199 | ---
1200 | 
1201 | <!-- Filename: Button.svelte -->
1202 | ```svelte
1203 | <script>
1204 | 	let props = $props();
1205 | </script>
1206 | 
1207 | <button {...props}>
1208 | 	click me
1209 | </button>
1210 | ```
1211 | 
1212 | **Key changes**:
1213 | - `{...props}` automatically applies all attributes, including event handlers like `onclick`.
1214 | 
1215 | ---
1216 | 
1217 | <!-- ================================== -->
1218 | <!-- Example 5: Multiple Event Handlers on the Same Element -->
1219 | <!-- ================================== -->
1220 | 
1221 | **Instead of duplicate event bindings, combine handlers manually.**
1222 | 
1223 | ---
1224 | 
1225 | <!-- Filename: App.svelte -->
1226 | ```svelte
1227 | <script>
1228 | 	function one(event) {
1229 | 		console.log('First handler', event);
1230 | 	}
1231 | 
1232 | 	function two(event) {
1233 | 		console.log('Second handler', event);
1234 | 	}
1235 | </script>
1236 | 
1237 | <button
1238 | 	onclick={(e) => {
1239 | 		one(e);
1240 | 		two(e);
1241 | 	}}
1242 | >
1243 | 	...
1244 | </button>
1245 | ```
1246 | 
1247 | **Key changes**:
1248 | - Instead of multiple `on:click={one} on:click={two}`, handlers are manually merged.
1249 | 
1250 | ---
1251 | 
1252 | <!-- ================================== -->
1253 | <!-- Example 6: Preventing Local Handlers from Being Overwritten -->
1254 | <!-- ================================== -->
1255 | 
1256 | **Ensure that when spreading props, local event handlers still execute.**
1257 | 
1258 | ---
1259 | 
1260 | <!-- Filename: App.svelte -->
1261 | ```svelte
1262 | <script>
1263 | 	let props = $props();
1264 | 
1265 | 	function doStuff(event) {
1266 | 		console.log('Handled locally', event);
1267 | 	}
1268 | </script>
1269 | 
1270 | <button
1271 | 	{...props}
1272 | 	onclick={(e) => {
1273 | 		doStuff(e);
1274 | 		props.onclick?.(e);
1275 | 	}}
1276 | >
1277 | 	...
1278 | </button>
1279 | ```
1280 | 
1281 | **Key changes**:
1282 | - The local `onclick` executes **before** the `props.onclick`, preventing overwrites.
1283 | 
1284 | ---
1285 | 
1286 | <!-- ================================== -->
1287 | <!-- Example 7: Event Modifiers as Functions -->
1288 | <!-- ================================== -->
1289 | 
1290 | **Modifiers like `once` and `preventDefault` should now be implemented manually.**
1291 | 
1292 | ---
1293 | 
1294 | <!-- Filename: App.svelte -->
1295 | ```svelte
1296 | <script>
1297 | 	function once(fn) {
1298 | 		return function (event) {
1299 | 			if (fn) fn.call(this, event);
1300 | 			fn = null; // Ensures it only runs once
1301 | 		};
1302 | 	}
1303 | 
1304 | 	function preventDefault(fn) {
1305 | 		return function (event) {
1306 | 			event.preventDefault();
1307 | 			fn.call(this, event);
1308 | 		};
1309 | 	}
1310 | 
1311 | 	function handler(event) {
1312 | 		console.log('Button clicked');
1313 | 	}
1314 | </script>
1315 | 
1316 | <button onclick={once(preventDefault(handler))}>
1317 | 	...
1318 | </button>
1319 | ```
1320 | 
1321 | **Key changes**:
1322 | - Used **higher-order functions** to replace `on:click|once|preventDefault={handler}`.
1323 | 
1324 | ---
1325 | ---
1326 | 
1327 | // svelte/events - `on` function
1328 | // `on` attaches an event handler and returns a cleanup function.
1329 | // It ensures correct handler order compared to `addEventListener`.
1330 | 
1331 | import { on } from 'svelte/events';
1332 | 
1333 | // Attach an event to `window`
1334 | function on<Type extends keyof WindowEventMap>(
1335 |     window: Window,
1336 |     type: Type,
1337 |     handler: (this: Window, event: WindowEventMap[Type]) => any,
1338 |     options?: AddEventListenerOptions
1339 | ): () => void;
1340 | 
1341 | // Attach an event to `document`
1342 | function on<Type extends keyof DocumentEventMap>(
1343 |     document: Document,
1344 |     type: Type,
1345 |     handler: (this: Document, event: DocumentEventMap[Type]) => any,
1346 |     options?: AddEventListenerOptions
1347 | ): () => void;
1348 | 
1349 | // Attach an event to an `HTMLElement`
1350 | function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
1351 |     element: Element,
1352 |     type: Type,
1353 |     handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
1354 |     options?: AddEventListenerOptions
1355 | ): () => void;
1356 | 
1357 | // Attach an event to a `MediaQueryList`
1358 | function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
1359 |     element: Element,
1360 |     type: Type,
1361 |     handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
1362 |     options?: AddEventListenerOptions
1363 | ): () => void;
1364 | 
1365 | // Generic event attachment
1366 | function on(
1367 |     element: EventTarget,
1368 |     type: string,
1369 |     handler: EventListener,
1370 |     options?: AddEventListenerOptions
1371 | ): () => void;
1372 | 
1373 | ---
1374 | ---
1375 | 
1376 | Use `on:eventname={handler}` to attach handlers (e.g., `onclick={() => ...}`).
1377 | - Handlers can mutate `$state` directly; UI updates automatically.
1378 | - Shorthand `{eventname}` works if the handler is a variable or function.
1379 | - Events like `click`, `input`, etc., are delegated; assume bubbling unless stopped.
1380 | - Events fire after bindings (e.g., `oninput` after `bind:value`).
1381 | - Case-sensitive: `onclick` ≠ `onClick` (custom events may use uppercase).
1382 | 
1383 | <script>
1384 |   let count = $state(0);         // Reactive state
1385 |   let text = $state('');         // Input value
1386 |   const logClick = () => console.log('Clicked!'); // Named handler
1387 |   
1388 |   // $effect to react to state changes
1389 |   $effect(() => console.log(`Count is now ${count}`));
1390 | </script>
1391 | 
1392 | <!-- Inline handler with $state -->
1393 | <button onclick={() => count++}>
1394 |   Increment: {count}
1395 | </button>
1396 | 
1397 | <!-- Shorthand with named handler -->
1398 | <button {logClick}>
1399 |   Log Click
1400 | </button>
1401 | 
1402 | <!-- Input event with binding -->
1403 | <input
1404 |   oninput={(e) => text = e.target.value}
1405 |   bind:value={text}
1406 |   placeholder="Type here"
1407 | />
1408 | <p>You typed: {text}</p>
1409 | 
1410 | <!-- Keydown event with condition -->
1411 | <input
1412 |   onkeydown={(e) => e.key === 'Enter' && count++}
1413 |   placeholder="Press Enter to increment"
1414 | />
1415 | 
1416 | Note: For other events (e.g., `onmouseover`, `onfocus`), follow the same pattern:
1417 | `on:eventname={() => ...}` or `{eventname}`. Adjust the handler logic based on the event’s purpose.
1418 | 
1419 | # Svelte 5 Snippets
1420 | 
1421 | <!-- ================================== -->
1422 | <!-- Example 1: Basic Snippet Usage -->
1423 | <!-- ================================== -->
1424 | 
1425 | <!-- Demonstrates how to create and use a snippet to avoid repetitive markup -->
1426 | 
1427 | ---
1428 | 
1429 | <!-- Filename: ImageList.svelte -->
1430 | <script>
1431 | 	let images = [
1432 | 		{ src: "image1.jpg", caption: "Image 1", href: "https://example.com" },
1433 | 		{ src: "image2.jpg", caption: "Image 2" }
1434 | 	];
1435 | </script>
1436 | 
1437 | {#snippet figure(image)}
1438 | 	<figure>
1439 | 		<img src={image.src} alt={image.caption} />
1440 | 		<figcaption>{image.caption}</figcaption>
1441 | 	</figure>
1442 | {/snippet}
1443 | 
1444 | {#each images as image}
1445 | 	{#if image.href}
1446 | 		<a href={image.href}>
1447 | 			{@render figure(image)}
1448 | 		</a>
1449 | 	{:else}
1450 | 		{@render figure(image)}
1451 | 	{/if}
1452 | {/each}
1453 | 
1454 | ---
1455 | 
1456 | <!-- This example shows how snippets reduce duplication in templates -->
1457 | 
1458 | <!-- ================================== -->
1459 | <!-- Example 2: Snippet Scope and Visibility -->
1460 | <!-- ================================== -->
1461 | 
1462 | <!-- Demonstrates snippet scoping rules and visibility -->
1463 | 
1464 | ---
1465 | 
1466 | <!-- Filename: ScopedSnippets.svelte -->
1467 | <div>
1468 | 	{#snippet x()}
1469 | 		{#snippet y()}
1470 | 			<p>Inside y</p>
1471 | 		{/snippet}
1472 | 
1473 | 		<!-- Rendering `y` inside `x` is allowed -->
1474 | 		{@render y()}
1475 | 	{/snippet}
1476 | 
1477 | 	<!-- This will cause an error because `y` is out of scope -->
1478 | 	{@render y()}
1479 | </div>
1480 | 
1481 | <!-- This will also cause an error because `x` is out of scope -->
1482 | {@render x()}
1483 | 
1484 | ---
1485 | 
1486 | <!-- Notes: Snippets are only accessible within their lexical scope -->
1487 | 
1488 | <!-- ================================== -->
1489 | <!-- Example 3: Recursive Snippets -->
1490 | <!-- ================================== -->
1491 | 
1492 | <!-- Demonstrates how a snippet can reference itself -->
1493 | 
1494 | ---
1495 | 
1496 | <!-- Filename: Countdown.svelte -->
1497 | {#snippet blastoff()}
1498 | 	<span>🚀</span>
1499 | {/snippet}
1500 | 
1501 | {#snippet countdown(n)}
1502 | 	{#if n > 0}
1503 | 		<span>{n}...</span>
1504 | 		{@render countdown(n - 1)}
1505 | 	{:else}
1506 | 		{@render blastoff()}
1507 | 	{/if}
1508 | {/snippet}
1509 | 
1510 | {@render countdown(5)}
1511 | 
1512 | ---
1513 | 
1514 | <!-- Recursive snippets are useful for countdowns, trees, and nested structures -->
1515 | 
1516 | <!-- ================================== -->
1517 | <!-- Example 4: Passing Snippets to Components -->
1518 | <!-- ================================== -->
1519 | 
1520 | <!-- Demonstrates passing snippets as props to a component -->
1521 | 
1522 | ---
1523 | 
1524 | <!-- Filename: Table.svelte -->
1525 | <script>
1526 | 	let { data, header, row } = $props();
1527 | </script>
1528 | 
1529 | <table>
1530 | 	<thead>
1531 | 		<tr>{@render header()}</tr>
1532 | 	</thead>
1533 | 	<tbody>
1534 | 		{#each data as item}
1535 | 			<tr>{@render row(item)}</tr>
1536 | 		{/each}
1537 | 	</tbody>
1538 | </table>
1539 | 
1540 | ---
1541 | 
1542 | <!-- Filename: App.svelte -->
1543 | <script>
1544 | 	import Table from "./Table.svelte";
1545 | 
1546 | 	const fruits = [
1547 | 		{ name: "Apples", qty: 5, price: 2 },
1548 | 		{ name: "Bananas", qty: 10, price: 1 },
1549 | 		{ name: "Cherries", qty: 20, price: 0.5 }
1550 | 	];
1551 | </script>
1552 | 
1553 | {#snippet header()}
1554 | 	<th>Fruit</th>
1555 | 	<th>Qty</th>
1556 | 	<th>Price</th>
1557 | 	<th>Total</th>
1558 | {/snippet}
1559 | 
1560 | {#snippet row(d)}
1561 | 	<td>{d.name}</td>
1562 | 	<td>{d.qty}</td>
1563 | 	<td>{d.price}</td>
1564 | 	<td>{d.qty * d.price}</td>
1565 | {/snippet}
1566 | 
1567 | <Table data={fruits} {header} {row} />
1568 | 
1569 | ---
1570 | 
1571 | <!-- Snippets allow passing reusable markup structures into components -->
1572 | 
1573 | <!-- ================================== -->
1574 | <!-- Example 5: Default Slot with Snippets -->
1575 | <!-- ================================== -->
1576 | 
1577 | <!-- Demonstrates how snippets replace slots in Svelte 5 -->
1578 | 
1579 | ---
1580 | 
1581 | <!-- Filename: Button.svelte -->
1582 | <script>
1583 | 	let { children } = $props();
1584 | </script>
1585 | 
1586 | <button>{@render children()}</button>
1587 | 
1588 | ---
1589 | 
1590 | <!-- Filename: App.svelte -->
1591 | <Button>Click Me</Button>
1592 | 
1593 | ---
1594 | 
1595 | <!-- Any non-snippet content passed to a component becomes the `children` snippet -->
1596 | 
1597 | <!-- ================================== -->
1598 | <!-- Example 6: Optional Snippet Props -->
1599 | <!-- ================================== -->
1600 | 
1601 | <!-- Demonstrates handling optional snippet props -->
1602 | 
1603 | ---
1604 | 
1605 | <!-- Filename: OptionalSnippet.svelte -->
1606 | <script>
1607 | 	let { children } = $props();
1608 | </script>
1609 | 
1610 | {#if children}
1611 | 	{@render children()}
1612 | {:else}
1613 | 	<p>Fallback content</p>
1614 | {/if}
1615 | 
1616 | ---
1617 | 
1618 | <!-- Filename: App.svelte -->
1619 | <OptionalSnippet />
1620 | <OptionalSnippet>
1621 | 	{#snippet children()}
1622 | 		<p>Custom content</p>
1623 | 	{/snippet}
1624 | </OptionalSnippet>
1625 | 
1626 | ---
1627 | 
1628 | <!-- Use `optional chaining` or `#if` blocks to handle missing snippets -->
1629 | 
1630 | <!-- ================================== -->
1631 | <!-- Example 7: Exporting Snippets -->
1632 | <!-- ================================== -->
1633 | 
1634 | <!-- Demonstrates exporting a snippet for use in other components -->
1635 | 
1636 | ---
1637 | 
1638 | <!-- Filename: math.svelte -->
1639 | <script module>
1640 | 	export { add };
1641 | </script>
1642 | 
1643 | {#snippet add(a, b)}
1644 | 	{a} + {b} = {a + b}
1645 | {/snippet}
1646 | 
1647 | ---
1648 | 
1649 | <!-- Filename: App.svelte -->
1650 | <script>
1651 | 	import { add } from "./math.svelte";
1652 | </script>
1653 | 
1654 | {@render add(2, 3)}
1655 | 
1656 | ---
1657 | 
1658 | <!-- Note: You can pass snippets to components that use slots, but not vice versa -->
1659 | 
1660 | <!-- ================================== -->
1661 | <!-- Example 8: Multiple Content Placeholders -->
1662 | <!-- ================================== -->
1663 | 
1664 | <!-- Demonstrates using multiple snippets instead of named slots -->
1665 | 
1666 | ---
1667 | 
1668 | <!-- Filename: Layout.svelte -->
1669 | <script>
1670 | 	let { header, main, footer } = $props();
1671 | </script>
1672 | 
1673 | <header>
1674 | 	{@render header?.()}
1675 | </header>
1676 | 
1677 | <main>
1678 | 	{@render main?.()}
1679 | </main>
1680 | 
1681 | <footer>
1682 | 	{@render footer?.()}
1683 | </footer>
1684 | 
1685 | ---
1686 | 
1687 | <!-- Filename: App.svelte -->
1688 | <script>
1689 | 	import Layout from "./Layout.svelte";
1690 | </script>
1691 | 
1692 | <Layout>
1693 | 	{#snippet header()}
1694 | 		<h1>My Website</h1>
1695 | 	{/snippet}
1696 | 	
1697 | 	{#snippet main()}
1698 | 		<p>Welcome to my website!</p>
1699 | 	{/snippet}
1700 | 	
1701 | 	{#snippet footer()}
1702 | 		<p>© 2023 My Website</p>
1703 | 	{/snippet}
1704 | </Layout>
1705 | 
1706 | ---
1707 | 
1708 | 
1709 | <!-- ================================== -->
1710 | <!-- Example 9: Passing Data to Parent with Snippets -->
1711 | <!-- ================================== -->
1712 | 
1713 | <!-- Demonstrates how snippets allow passing data from child to parent -->
1714 | 
1715 | ---
1716 | 
1717 | <!-- Filename: List.svelte -->
1718 | <script>
1719 | 	let { items, item, empty } = $props();
1720 | </script>
1721 | 
1722 | {#if items.length}
1723 | 	<ul>
1724 | 		{#each items as entry}
1725 | 			<li>
1726 | 				{@render item(entry)}
1727 | 			</li>
1728 | 		{/each}
1729 | 	</ul>
1730 | {:else}
1731 | 	{@render empty?.()}
1732 | {/if}
1733 | 
1734 | ---
1735 | 
1736 | <!-- Filename: App.svelte -->
1737 | <script>
1738 | 	import List from "./List.svelte";
1739 | 	
1740 | 	const fruits = ['Apple', 'Banana', 'Cherry'];
1741 | </script>
1742 | 
1743 | <List items={fruits}>
1744 | 	{#snippet item(fruit)}
1745 | 		<span>{fruit}</span>
1746 | 	{/snippet}
1747 | 	
1748 | 	{#snippet empty()}
1749 | 		<span>No fruits available</span>
1750 | 	{/snippet}
1751 | </List>
1752 | 
1753 | ---
1754 | 
1755 | <!-- 
1756 | The child component passes data as parameters to the snippet function,
1757 | which the parent can then access and use within the snippet definition.
1758 | -->
1759 | 
1760 | # Svelte 5 + TypeScript
1761 | 
1762 | <!-- ================================== -->
1763 | <!-- Example 1: Using TypeScript in Svelte Components -->
1764 | <!-- ================================== -->
1765 | 
1766 | <!-- Demonstrates basic TypeScript setup inside a Svelte component. -->
1767 | 
1768 | ---
1769 | 
1770 | <!-- Filename: App.svelte -->
1771 | <script lang="ts">
1772 | 	let name: string = 'world';
1773 | 
1774 | 	function greet(name: string) {
1775 | 		alert(`Hello, ${name}!`);
1776 | 	}
1777 | </script>
1778 | 
1779 | <button onclick={() => greet(name)}>Greet</button>
1780 | 
1781 | ---
1782 | 
1783 | ### Notes:
1784 | - Adding `lang="ts"` enables TypeScript.
1785 | - Type annotations (`string`) help with static checking.
1786 | - No runtime overhead since TypeScript removes type annotations at compile time.
1787 | 
1788 | ---
1789 | 
1790 | <!-- ================================== -->
1791 | <!-- Example 2: Typing Component Props -->
1792 | <!-- ================================== -->
1793 | 
1794 | <!-- Shows how to type component props in Svelte. -->
1795 | 
1796 | ---
1797 | 
1798 | <!-- Filename: Greeting.svelte -->
1799 | <script lang="ts">
1800 | 	interface Props {
1801 | 		name: string;
1802 | 	}
1803 | 
1804 | 	let { name }: Props = $props();
1805 | </script>
1806 | 
1807 | <p>Hello, {name}!</p>
1808 | 
1809 | ---
1810 | 
1811 | <!-- Filename: App.svelte -->
1812 | <script lang="ts">
1813 | 	import Greeting from './Greeting.svelte';
1814 | </script>
1815 | 
1816 | <Greeting name="Alice" />
1817 | 
1818 | ---
1819 | 
1820 | ### Notes:
1821 | - `Props` interface ensures `name` is always a string.
1822 | - `$props()` extracts the component’s props with proper typing.
1823 | 
1824 | ---
1825 | 
1826 | <!-- ================================== -->
1827 | <!-- Example 3: Generic Component Props -->
1828 | <!-- ================================== -->
1829 | 
1830 | <!-- Demonstrates generic props for flexible typing. -->
1831 | 
1832 | ---
1833 | 
1834 | <!-- Filename: List.svelte -->
1835 | <script lang="ts" generics="Item">
1836 | 	interface Props {
1837 | 		items: Item[];
1838 | 		select: (item: Item) => void;
1839 | 	}
1840 | 
1841 | 	let { items, select }: Props = $props();
1842 | </script>
1843 | 
1844 | {#each items as item}
1845 | 	<button onclick={() => select(item)}>{item}</button>
1846 | {/each}
1847 | 
1848 | ---
1849 | 
1850 | <!-- Filename: App.svelte -->
1851 | <script lang="ts">
1852 | 	import List from './List.svelte';
1853 | 
1854 | 	const names = ['Alice', 'Bob', 'Charlie'];
1855 | 
1856 | 	function handleSelect(name: string) {
1857 | 		console.log('Selected:', name);
1858 | 	}
1859 | </script>
1860 | 
1861 | <List items={names} select={handleSelect} />
1862 | 
1863 | ---
1864 | 
1865 | ### Notes:
1866 | - `generics="Item"` allows the component to accept any item type.
1867 | - Ensures `items` and `select` function operate on the same type.
1868 | 
1869 | ---
1870 | 
1871 | <!-- ================================== -->
1872 | <!-- Example 4: Typing $state -->
1873 | <!-- ================================== -->
1874 | 
1875 | <!-- Shows how to type state variables in Svelte. -->
1876 | 
1877 | ---
1878 | 
1879 | <!-- Filename: Counter.svelte -->
1880 | <script lang="ts">
1881 | 	let count: number = $state(0);
1882 | 
1883 | 	function increment() {
1884 | 		count += 1;
1885 | 	}
1886 | </script>
1887 | 
1888 | <button onclick={increment}>Count: {count}</button>
1889 | 
1890 | ---
1891 | 
1892 | ### Notes:
1893 | - `$state(0)` initializes a reactive variable with a type.
1894 | - Without an initial value, TypeScript infers `number | undefined`.
1895 | 
1896 | ---
1897 | 
1898 | <!-- ================================== -->
1899 | <!-- Example 5: Typing Wrapper Components -->
1900 | <!-- ================================== -->
1901 | 
1902 | <!-- Demonstrates how to type wrapper components that extend native HTML elements. -->
1903 | 
1904 | ---
1905 | 
1906 | <!-- Filename: Button.svelte -->
1907 | <script lang="ts">
1908 | 	import type { HTMLButtonAttributes } from 'svelte/elements';
1909 | 
1910 | 	let { children, ...rest }: HTMLButtonAttributes = $props();
1911 | </script>
1912 | 
1913 | <button {...rest}>{@render children?.()}</button>
1914 | 
1915 | ---
1916 | 
1917 | <!-- Filename: App.svelte -->
1918 | <script lang="ts">
1919 | 	import Button from './Button.svelte';
1920 | </script>
1921 | 
1922 | <Button onclick={() => alert('Clicked!')}>Click Me</Button>
1923 | 
1924 | ---
1925 | 
1926 | ### Notes:
1927 | - `HTMLButtonAttributes` ensures `Button.svelte` supports all standard button attributes.
1928 | - `...rest` spreads remaining props onto the `<button>`.
1929 | 
1930 | ---
1931 | 
1932 | <!-- ================================== -->
1933 | <!-- Example 6: Typing Custom Events and Attributes -->
1934 | <!-- ================================== -->
1935 | 
1936 | <!-- Demonstrates how to extend built-in DOM types for custom attributes and events. -->
1937 | 
1938 | ---
1939 | 
1940 | <!-- Filename: additional-svelte-typings.d.ts -->
1941 | declare namespace svelteHTML {
1942 | 	interface IntrinsicElements {
1943 | 		'custom-element': { customProp: string; 'on:customEvent': (e: CustomEvent<any>) => void };
1944 | 	}
1945 | }
1946 | 
1947 | ---
1948 | 
1949 | <!-- Filename: App.svelte -->
1950 | <script lang="ts">
1951 | 	function handleEvent(e: CustomEvent) {
1952 | 		console.log('Custom event:', e.detail);
1953 | 	}
1954 | </script>
1955 | 
1956 | <custom-element customProp="Hello" on:customEvent={handleEvent}></custom-element>
1957 | 
1958 | ---
1959 | 
1960 | ### Notes:
1961 | - Extending `IntrinsicElements` allows TypeScript to recognize `<custom-element>` and its props.
1962 | - Avoids TypeScript errors when using experimental or third-party web components.
1963 | 
1964 | ---
1965 | 
1966 | # Svelte 4 → 5 Migration Summary
1967 | 
1968 | **Concise Summary (Svelte 4 → 5)**
1969 | 
1970 | - **New Runes API**  
1971 |   - Reactive variables use `let count = $state(0);`  
1972 |   - Derived values use `const double = $derived(count * 2);`  
1973 |   - Side effects use  
1974 | ```
1975 |     $effect(() => {
1976 |       if (count > 5) alert('Count is too high!');
1977 |     });
1978 | ```
1979 | 
1980 | - **Declaring Props**  
1981 |   - All props come from `let {...} = $props();`  
1982 |   - Example:
1983 | ```
1984 |     <script>
1985 |       let { optional = 'unset', required } = $props();
1986 |     </script>
1987 | ```
1988 |   - Renaming or forwarding props:
1989 | ```
1990 |     <script>
1991 |       let { class: klass, ...rest } = $props();
1992 |     </script>
1993 |     <button class={klass} {...rest}>click me</button>
1994 | ```
1995 | 
1996 |     Below is a concise, mostly bullet-pointed summary of the changes, focusing on code snippets:
1997 | 
1998 | ---
1999 | 
2000 | ### Event Changes
2001 | 
2002 | - **Svelte 4** used `on:` directives.
2003 | - **Svelte 5**: Use regular properties like `onclick` instead (no `:`).
2004 | 
2005 | **Example:**
2006 | ```svelte
2007 | <script>
2008 |   let count = $state(0);
2009 | </script>
2010 | 
2011 | <button onclick={() => count++}>
2012 |   clicks: {count}
2013 | </button>
2014 | ```
2015 | 
2016 | **Shorthand Example:**
2017 | ```svelte
2018 | <script>
2019 |   let count = $state(0);
2020 | 
2021 |   function onclick() {
2022 |     count++;
2023 |   }
2024 | </script>
2025 | 
2026 | <button {onclick}>
2027 |   clicks: {count}
2028 | </button>
2029 | ```
2030 | 
2031 | ---
2032 | 
2033 | ### Component Events
2034 | 
2035 | - **Svelte 4**: `createEventDispatcher` for emitting events.
2036 | - **Svelte 5**: Use callback props instead.
2037 | 
2038 | **Example (App.svelte):**
2039 | ```svelte
2040 | <script lang="ts">
2041 |   import Pump from './Pump.svelte';
2042 | 
2043 |   let size = $state(15);
2044 |   let burst = $state(false);
2045 | 
2046 |   function reset() {
2047 |     size = 15;
2048 |     burst = false;
2049 |   }
2050 | </script>
2051 | 
2052 | <Pump
2053 |   inflate={(power) => {
2054 |     size += power;
2055 |     if (size > 75) burst = true;
2056 |   }}
2057 |   deflate={(power) => {
2058 |     if (size > 0) size -= power;
2059 |   }}
2060 | />
2061 | 
2062 | {#if burst}
2063 |   <button onclick={reset}>new balloon</button>
2064 |   <span class="boom">💥</span>
2065 | {:else}
2066 |   <span class="balloon" style="scale: {0.01 * size}">
2067 |     🎈
2068 |   </span>
2069 | {/if}
2070 | ```
2071 | 
2072 | **Example (Pump.svelte):**
2073 | ```svelte
2074 | <script lang="ts">
2075 |   let { inflate, deflate } = $props();
2076 |   let power = $state(5);
2077 | </script>
2078 | 
2079 | <button onclick={() => inflate(power)}>inflate</button>
2080 | <button onclick={() => deflate(power)}>deflate</button>
2081 | 
2082 | <button onclick={() => power--}>-</button>
2083 | Pump power: {power}
2084 | <button onclick={() => power++}>+</button>
2085 | ```
2086 | 
2087 | ---
2088 | 
2089 | ### Bubbling Events
2090 | 
2091 | - No more `<button on:click>` to forward. 
2092 | - Accept a callback prop like `onclick`:
2093 | 
2094 | ```svelte
2095 | <script>
2096 |   let { onclick } = $props();
2097 | </script>
2098 | 
2099 | <button {onclick}>
2100 |   click me
2101 | </button>
2102 | ```
2103 | 
2104 | - Can “spread” handlers with other props:
2105 | 
2106 | ```svelte
2107 | <script>
2108 |   let props = $props();
2109 | </script>
2110 | 
2111 | <button {...props}>
2112 |   click me
2113 | </button>
2114 | ```
2115 | 
2116 | ---
2117 | 
2118 | ### Event Modifiers
2119 | 
2120 | - **Svelte 4** example: `<button on:click|once|preventDefault={handler}>...`
2121 | - **Svelte 5**: No built-in modifiers. Handle `event.preventDefault()` in the function or wrap manually.
2122 | 
2123 | **Example Wrappers:**
2124 | ```svelte
2125 | <script>
2126 |   function once(fn) {
2127 |     return function (event) {
2128 |       if (fn) fn.call(this, event);
2129 |       fn = null;
2130 |     };
2131 |   }
2132 | 
2133 |   function preventDefault(fn) {
2134 |     return function (event) {
2135 |       event.preventDefault();
2136 |       fn.call(this, event);
2137 |     };
2138 |   }
2139 | </script>
2140 | 
2141 | <button onclick={once(preventDefault(handler))}>...</button>
2142 | ```
2143 | 
2144 | - For `capture`, do: `onclickcapture={...}`
2145 | - For `passive` or `nonpassive`, use an action to attach the event.
2146 | 
2147 | ---
2148 | 
2149 | ### Multiple Event Handlers
2150 | 
2151 | - **Svelte 4** allowed `<button on:click={one} on:click={two}>`.
2152 | - **Svelte 5**: Only one `onclick` property. Combine them:
2153 | 
2154 | ```svelte
2155 | <button
2156 |   onclick={(e) => {
2157 |     one(e);
2158 |     two(e);
2159 |   }}
2160 | >
2161 |   ...
2162 | </button>
2163 | ```
2164 | 
2165 | - When spreading props, place local handlers afterward to avoid overwriting:
2166 | 
2167 | ```svelte
2168 | <button
2169 |   {...props}
2170 |   onclick={(e) => {
2171 |     doStuff(e);
2172 |     props.onclick?.(e);
2173 |   }}
2174 | >
2175 |   ...
2176 | </button>
2177 | ```
2178 | 
2179 | 
2180 | ---
2181 | ---
2182 | 
2183 | ### **Svelte 5 Changes - Condensed Bullet Points**
2184 | 
2185 | #### **Component Changes**
2186 | - **No More Class Components** → Components are now functions.
2187 | - **Instantiation** → Use `mount` or `hydrate` instead of `new Component()`.
2188 | - **Mount vs. Hydrate** → `hydrate` picks up server-rendered HTML, otherwise identical to `mount`.
2189 | - **No `$on`, `$set`, `$destroy`**
2190 |   - `$on` → Use `events` property instead (though callbacks are preferred).
2191 |   - `$set` → Use `$state` for reactivity.
2192 |   - `$destroy` → Use `unmount`.
2193 | 
2194 | #### **Code Examples**
2195 | ```js
2196 | import { mount } from 'svelte';
2197 | import App from './App.svelte';
2198 | 
2199 | const app = mount(App, { 
2200 |   target: document.getElementById("app"),
2201 |   events: { event: callback } // Replacement for $on
2202 | });
2203 | 
2204 | const props = $state({ foo: 'bar' }); // Replacement for $set
2205 | props.foo = 'baz';
2206 | 
2207 | import { unmount } from 'svelte';
2208 | unmount(app); // Replacement for $destroy
2209 | ```
2210 | 
2211 | #### **Legacy Compatibility**
2212 | - Use `createClassComponent` from `svelte/legacy` if needed.
2213 | - `compatibility.componentApi` option enables auto-backwards compatibility.
2214 | 
2215 | ```js
2216 | export default {
2217 |   compilerOptions: {
2218 |     compatibility: {
2219 |       componentApi: 4
2220 |     }
2221 |   }
2222 | };
2223 | ```
2224 | 
2225 | #### **Asynchronous Behavior**
2226 | - `mount` and `hydrate` are **not** synchronous.
2227 | - Use `flushSync()` if onMount must be guaranteed to run.
2228 | 
2229 | #### **Server-Side Rendering (SSR)**
2230 | - No `render()` method in components.
2231 | - Instead, use `render()` from `svelte/server`.
2232 | 
2233 | ```js
2234 | import { render } from 'svelte/server';
2235 | import App from './App.svelte';
2236 | 
2237 | const { html, head } = render(App, { props: { message: 'hello' }});
2238 | ```
2239 | 
2240 | - **CSS not included by default** → Use `css: 'injected'` to include styles.
2241 | 
2242 | #### **Typing Changes**
2243 | - `SvelteComponent` deprecated → Use `Component` type.
2244 | - `ComponentEvents` & `ComponentType` deprecated.
2245 | 
2246 | ```ts
2247 | import type { Component } from 'svelte';
2248 | export declare const MyComponent: Component<{ foo: string }>;
2249 | ```
2250 | 
2251 | #### **bind:this Changes**
2252 | - No longer returns `$set`, `$on`, or `$destroy` methods.
2253 | - Now only returns instance exports & property accessors (if enabled).
2254 | 
2255 | #### **Dynamic Components**
2256 | - `<svelte:component>` no longer needed.
2257 | - Components update dynamically when reassigned.
2258 | 
2259 | ```svelte
2260 | <script>
2261 |   import A from './A.svelte';
2262 |   import B from './B.svelte';
2263 |   let Thing = $state();
2264 | </script>
2265 | 
2266 | <select bind:value={Thing}>
2267 |   <option value={A}>A</option>
2268 |   <option value={B}>B</option>
2269 | </select>
2270 | 
2271 | <!-- Both are now equivalent -->
2272 | <Thing />
2273 | <svelte:component this={Thing} />
2274 | ```
2275 | 
2276 | #### **Other Changes**
2277 | - **Dot Notation** (`<foo.bar>`) now treated as a **component**, not an HTML tag.
2278 | - **Whitespace Handling Simplified** → Predictable behavior.
2279 | - **Reserved `children` Prop** → Cannot use `children` as a prop name; it's reserved.
2280 | 


--------------------------------------------------------------------------------