TITLE: General Event Handling Guidelines in Svelte 5
DESCRIPTION: Provides general guidelines and examples for event handling in Svelte 5, including attaching handlers, mutating $state, using shorthand syntax, event delegation, and the order of event firing. It also demonstrates various event handling scenarios with code examples.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#2025-04-21_snippet_8

LANGUAGE: svelte
CODE:
```
<script>
  let count = $state(0);         // Reactive state
  let text = $state('');         // Input value
  const logClick = () => console.log('Clicked!'); // Named handler
  
  // $effect to react to state changes
  $effect(() => console.log(`Count is now ${count}`));
</script>

<!-- Inline handler with $state -->
<button onclick={() => count++}>
  Increment: {count}
</button>

<!-- Shorthand with named handler -->
<button {logClick}>
  Log Click
</button>

<!-- Input event with binding -->
<input
  oninput={(e) => text = e.target.value}
  bind:value={text}
  placeholder="Type here"
/>
<p>You typed: {text}</p>

<!-- Keydown event with condition -->
<input
  onkeydown={(e) => e.key === 'Enter' && count++}
  placeholder="Press Enter to increment"
/>
```

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

TITLE: Receiving Props with $props in Svelte 5
DESCRIPTION: Demonstrates how to receive and use props in a Svelte component using the $props rune. This example shows basic prop usage, including passing props from a parent component and accessing them in a child component.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_15

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	import MyComponent from './MyComponent.svelte';
</script>

<MyComponent adjective="cool" />
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let props = $props();
</script>

<p>This component is {props.adjective}</p>
```

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

TITLE: Deep Reactivity with Arrays using $state in Svelte 5
DESCRIPTION: Shows how $state makes arrays deeply reactive in Svelte 5. The todos array is reactive, and changes to individual items or adding new items trigger UI updates.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_1

LANGUAGE: svelte
CODE:
```
<script>
	let todos = $state([
		{ done: false, text: 'Learn Svelte' },
		{ done: false, text: 'Build an app' }
	]);

	function toggle(index) {
		todos[index].done = !todos[index].done; // Reactivity applies to individual items
	}
</script>

<ul>
	{#each todos as todo, index}
		<li>
			<input type="checkbox" bind:checked={todo.done} onclick={() => toggle(index)} />
			{todo.text}
		</li>
	{/each}
</ul>

<button onclick={() => todos.push({ done: false, text: 'New task' })}>
	Add Todo
</button>
```

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

TITLE: Event Handling in Svelte 5
DESCRIPTION: Shows the new approach to event handling in Svelte 5. Instead of using on: directives, events are now handled using regular properties like onclick. The example demonstrates both inline and shorthand event handling.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_42

LANGUAGE: svelte
CODE:
```
<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>
```

LANGUAGE: svelte
CODE:
```
<script>
  let count = $state(0);

  function onclick() {
    count++;
  }
</script>

<button {onclick}>
  clicks: {count}
</button>
```

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

TITLE: Event Handling in Svelte 5 with onclick Property
DESCRIPTION: Demonstrates the new event handling approach in Svelte 5, replacing on: directives with standard HTML event properties like onclick. This example shows incrementing a reactive state variable on button click.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_3

LANGUAGE: svelte
CODE:
```
<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>
```

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

TITLE: Deep Reactivity with Arrays in Svelte 5
DESCRIPTION: Demonstrates how $state makes arrays deeply reactive. Changes to nested properties of array items trigger UI updates, and new items added to the array automatically become reactive.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_1

LANGUAGE: svelte
CODE:
```
<script>
	let todos = $state([
		{ done: false, text: 'Learn Svelte' },
		{ done: false, text: 'Build an app' }
	]);

	function toggle(index) {
		todos[index].done = !todos[index].done; // Reactivity applies to individual items
	}
</script>

<ul>
	{#each todos as todo, index}
		<li>
			<input type="checkbox" bind:checked={todo.done} onclick={() => toggle(index)} />
			{todo.text}
		</li>
	{/each}
</ul>

<button onclick={() => todos.push({ done: false, text: 'New task' })}>
	Add Todo
</button>
```

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

TITLE: Implementing State Management with Svelte 5 Runes
DESCRIPTION: Demonstrates the usage of Svelte 5's new Runes API for state management. It shows how to create reactive variables, derived values, and side effects using $state, $derived, and $effect.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_40

LANGUAGE: typescript
CODE:
```
let count = $state(0);
const double = $derived(count * 2);
$effect(() => {
  if (count > 5) alert('Count is too high!');
});
```

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

TITLE: Event Modifiers as Functions in Svelte 5
DESCRIPTION: Demonstrates how to implement event modifiers like 'once' and 'preventDefault' as functions in Svelte 5, replacing the previous modifier syntax. This approach provides more flexibility and control over event handling.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#2025-04-21_snippet_6

LANGUAGE: svelte
CODE:
```
<script>
	function once(fn) {
		return function (event) {
			if (fn) fn.call(this, event);
			fn = null; // Ensures it only runs once
		};
	}

	function preventDefault(fn) {
		return function (event) {
			event.preventDefault();
			fn.call(this, event);
		};
	}

	function handler(event) {
		console.log('Button clicked');
	}
</script>

<button onclick={once(preventDefault(handler))}>
	...
</button>
```

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

TITLE: Receiving Props in Svelte 5 Components
DESCRIPTION: Demonstrates how to receive and use props in a Svelte 5 component using the $props rune. It shows basic usage, destructuring, default values, and prop renaming.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_19

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let props = $props();
</script>

<p>This component is {props.adjective}</p>
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let { adjective } = $props();
</script>

<p>This component is {adjective}</p>
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let { adjective = 'happy' } = $props();
</script>

<p>This component is {adjective}</p>
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let { super: trouper = 'lights are gonna find me' } = $props();
</script>

<p>Song lyric: {trouper}</p>
```

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

TITLE: Basic Usage of $state in Svelte 5
DESCRIPTION: Demonstrates how to create and update a reactive state variable using $state. The count variable becomes reactive and UI updates automatically when it changes.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_0

LANGUAGE: svelte
CODE:
```
<script>
	let count = $state(0); // count is reactive
</script>

<button onclick={() => count++}>
	clicks: {count} <!-- UI updates automatically when count changes -->
</button>
```

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

TITLE: Forwarding Event Handlers in Svelte 5
DESCRIPTION: Demonstrates how to accept and forward event handlers as props in Svelte 5, replacing the event forwarding syntax from Svelte 4. This example shows a simple button that accepts an onclick callback.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_7

LANGUAGE: svelte
CODE:
```
<script>
  let { onclick } = $props();
</script>

<button {onclick}>
  click me
</button>
```

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

TITLE: Component Communication in Svelte 5
DESCRIPTION: Demonstrates how component communication has changed in Svelte 5. Instead of using createEventDispatcher for emitting events, components now use callback props for communication between parent and child components.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_43

LANGUAGE: svelte
CODE:
```
<script lang="ts">
  import Pump from './Pump.svelte';

  let size = $state(15);
  let burst = $state(false);

  function reset() {
    size = 15;
    burst = false;
  }
</script>

<Pump
  inflate={(power) => {
    size += power;
    if (size > 75) burst = true;
  }}
  deflate={(power) => {
    if (size > 0) size -= power;
  }}
/>

{#if burst}
  <button onclick={reset}>new balloon</button>
  <span class="boom">💥</span>
{:else}
  <span class="balloon" style="scale: {0.01 * size}">
    🎈
  </span>
{/if}
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
  let { inflate, deflate } = $props();
  let power = $state(5);
</script>

<button onclick={() => inflate(power)}>inflate</button>
<button onclick={() => deflate(power)}>deflate</button>

<button onclick={() => power--}>-</button>
Pump power: {power}
<button onclick={() => power++}>+</button>
```

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

TITLE: Declaring Props in Svelte 5 with $props Rune
DESCRIPTION: Demonstrates the new way to declare component props in Svelte 5 using the $props rune. This replaces the export let syntax from Svelte 4 and allows for setting default values for optional props.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_1

LANGUAGE: svelte
CODE:
```
<script>
  let { optional = 'unset', required } = $props();
</script>
```

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

TITLE: Implementing Event Modifiers in Svelte 5
DESCRIPTION: Shows how to implement custom event modifiers in Svelte 5, which replaces the built-in event modifiers from Svelte 4. This example demonstrates creating once and preventDefault modifier functions.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_9

LANGUAGE: svelte
CODE:
```
<script>
  function once(fn) {
    return function (event) {
      if (fn) fn.call(this, event);
      fn = null;
    };
  }

  function preventDefault(fn) {
    return function (event) {
      event.preventDefault();
      fn.call(this, event);
    };
  }
</script>

<button onclick={once(preventDefault(handler))}>...</button>
```

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

TITLE: Event Modifier Replacement in Svelte 5
DESCRIPTION: Shows how to replace Svelte 4's event modifiers in Svelte 5. Since built-in modifiers are no longer available, the example demonstrates how to create wrapper functions to achieve similar functionality for 'once' and 'preventDefault' modifiers.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_44

LANGUAGE: svelte
CODE:
```
<script>
  function once(fn) {
    return function (event) {
      if (fn) fn.call(this, event);
      fn = null;
    };
  }

  function preventDefault(fn) {
    return function (event) {
      event.preventDefault();
      fn.call(this, event);
    };
  }
</script>

<button onclick={once(preventDefault(handler))}>...</button>
```

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

TITLE: Basic Usage of $effect in Svelte 5
DESCRIPTION: Demonstrates how to use $effect to reactively update a canvas when state changes. The effect automatically tracks dependencies (size and color) and runs whenever they change.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_11

LANGUAGE: svelte
CODE:
```
<script>
	let size = $state(50);
	let color = $state('#ff3e00');
	let canvas;

	$effect(() => {
		const context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);

		// This effect runs whenever `color` or `size` changes
		context.fillStyle = color;
		context.fillRect(0, 0, size, size);
	});
</script>

<canvas bind:this={canvas} width="100" height="100" />

<input type="color" bind:value={color} />
<input type="range" bind:value={size} min="10" max="100" />
```

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

TITLE: Basic TypeScript Usage in Svelte Component
DESCRIPTION: Demonstrates the basic setup for using TypeScript in a Svelte component. It shows how to enable TypeScript with the lang attribute and use type annotations for variables and functions.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#2025-04-21_snippet_0

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let name: string = 'world';

	function greet(name: string) {
		alert(`Hello, ${name}!`);
	}
</script>

<button onclick={() => greet(name)}>Greet</button>
```

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

TITLE: Preventing Local Handlers from Being Overwritten in Svelte 5
DESCRIPTION: Shows how to ensure that local event handlers are not overwritten when spreading props in Svelte 5. This technique allows both local and passed-in event handlers to execute, maintaining component flexibility.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#2025-04-21_snippet_5

LANGUAGE: svelte
CODE:
```
<script>
	let props = $props();

	function doStuff(event) {
		console.log('Handled locally', event);
	}
</script>

<button
	{...props}
	onclick={(e) => {
		doStuff(e);
		props.onclick?.(e);
	}}
>
	...
</button>
```

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

TITLE: Basic Derived State in Svelte 5
DESCRIPTION: Demonstrates how $derived updates a value based on changes to $state variables. The derived value automatically updates when its dependencies change.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_7

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let count = $state(0);
	let doubled = $derived(count * 2); // `doubled` automatically updates when `count` changes
</script>

<button onclick={() => count++}>
	Increment
</button>

<p>{count} doubled is {doubled}</p>
```

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

TITLE: Basic Derived State in Svelte 5
DESCRIPTION: Demonstrates how $derived updates a value based on $state. The doubled value automatically updates when count changes, showing the basic usage of derived state.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_7

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let count = $state(0);
	let doubled = $derived(count * 2); // `doubled` automatically updates when `count` changes
</script>

<button onclick={() => count++}>
	Increment
</button>

<p>{count} doubled is {doubled}</p>
```

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

TITLE: Multiple Event Handlers in Svelte 5
DESCRIPTION: Demonstrates how to handle multiple event handlers for the same event in Svelte 5, since you can only have one property with the same name. This example shows combining two handler functions into one.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_10

LANGUAGE: svelte
CODE:
```
<button
  onclick={(e) => {
    one(e);
    two(e);
  }}
>
  ...
</button>
```

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

TITLE: Combining Local and Spread Event Handlers in Svelte 5
DESCRIPTION: Shows how to combine local event handling with event handlers from spread props. This technique ensures both the local handler and any handler passed via props are executed.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_11

LANGUAGE: svelte
CODE:
```
<button
  {...props}
  onclick={(e) => {
    doStuff(e);
    props.onclick?.(e);
  }}
>
  ...
</button>
```

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

TITLE: Using $derived Instead of $effect for Computed Values
DESCRIPTION: Demonstrates the correct way to derive state using $derived instead of modifying it within $effect, which would cause infinite loops. This pattern is essential for computing values based on other state.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_15

LANGUAGE: svelte
CODE:
```
<script>
	let count = $state(0);
	let doubled = $derived(count * 2); // Correct approach

	// Incorrect approach (causes infinite loops):
	// $effect(() => {
	//   doubled = count * 2;
	// });
</script>

<h1>{count} doubled is {doubled}</h1>

<button onclick={() => count += 1}>Increment</button>
```

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

TITLE: Basic Event Handling in Svelte 5
DESCRIPTION: Demonstrates how to handle a click event on a button in Svelte 5, incrementing a counter state variable. It shows the use of direct property binding for event handlers instead of 'on:' directives.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#2025-04-21_snippet_0

LANGUAGE: svelte
CODE:
```
<script>
	let count = $state(0);

	function onclick() {
		count++;
	}
</script>

<button {onclick}>
	clicks: {count}
</button>
```

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

TITLE: Spreading Props Including Event Handlers in Svelte 5
DESCRIPTION: Shows how to spread all props including event handlers to a component or element. This approach allows forwarding all provided props without explicitly naming each one.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_8

LANGUAGE: svelte
CODE:
```
<script>
  let props = $props();
</script>

<button {...props}>
  click me
</button>
```

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

TITLE: Using $derived.by for Complex Computation in Svelte 5
DESCRIPTION: Demonstrates how $derived.by allows more complex calculations with multiple steps. The derived value is recalculated automatically when any of its dependencies change.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_8

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let numbers = $state([1, 2, 3]);

	// `total` is automatically recalculated when `numbers` change
	let total = $derived.by(() => {
		let sum = 0;
		for (const n of numbers) {
			sum += n;
		}
		return sum;
	});
</script>

<button onclick={() => numbers.push(numbers.length + 1)}>
	Add Number
</button>

<p>{numbers.join(' + ')} = {total}</p>
```

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

TITLE: Declaring and Using Props in Svelte 5
DESCRIPTION: Illustrates the new way of declaring and using props in Svelte 5. It shows how to use $props() for all prop declarations, including optional props with default values and prop renaming.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_41

LANGUAGE: svelte
CODE:
```
<script>
  let { optional = 'unset', required } = $props();
</script>
```

LANGUAGE: svelte
CODE:
```
<script>
  let { class: klass, ...rest } = $props();
</script>
<button class={klass} {...rest}>click me</button>
```

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

TITLE: Basic Two-Way Binding with $bindable
DESCRIPTION: Demonstrates how to use $bindable to create a prop that supports two-way data binding. The child component's input is bound to a parent component's state variable, enabling automatic updates.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_16

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let { value = $bindable(), ...props } = $props(); // `value` is bindable, allowing two-way data flow
</script>

<input bind:value={value} {...props} />
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	import FancyInput from './FancyInput.svelte';

	let message = $state('hello'); // Using `$state` to create a reactive state variable
</script>

<FancyInput bind:value={message} />
<p>{message}</p> <!-- This will update as the user types in the input -->
```

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

TITLE: Basic Usage of $state in Svelte 5
DESCRIPTION: Demonstrates how to create and update a reactive state variable using $state. The count variable is made reactive and automatically updates the UI when changed.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_0

LANGUAGE: svelte
CODE:
```
<script>
	let count = $state(0); // count is reactive
</script>

<button onclick={() => count++}>
	clicks: {count} <!-- UI updates automatically when count changes -->
</button>
```

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

TITLE: Bubbling Events with Callback Props in Svelte 5
DESCRIPTION: Shows how to forward an event from an element to a component using callback props instead of 'on:' directives in Svelte 5. This example demonstrates a simple clickable button component.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#2025-04-21_snippet_2

LANGUAGE: svelte
CODE:
```
<script>
	let { onclick } = $props(); // Accepts an `onclick` function from parent
</script>

<button {onclick}>
	click me
</button>
```

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

TITLE: Basic Two-Way Binding with $bindable
DESCRIPTION: Demonstrates creating a reusable input component with two-way binding using $bindable. The component allows parent components to bind to its value while maintaining proper TypeScript support.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_13

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let { value = $bindable(), ...props } = $props();
</script>

<input bind:value={value} {...props} />
```

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

TITLE: Using $effect Rune for Side Effects in Svelte 5
DESCRIPTION: Shows how to implement side effects using the new $effect rune in Svelte 5, which replaces the reactive statements from Svelte 4. This example demonstrates monitoring a count variable and triggering an alert when it exceeds a threshold.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_0

LANGUAGE: svelte
CODE:
```
$effect(() => {
  if (count > 5) alert('Count is too high!');
});
```

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

TITLE: Creating and Using Basic Snippets in Svelte 5
DESCRIPTION: Demonstrates how to create and use a snippet to avoid repetitive markup. The example shows a reusable figure snippet that conditionally wraps images in anchor tags based on available href properties.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_24

LANGUAGE: svelte
CODE:
```
<script>
	let images = [
		{ src: "image1.jpg", caption: "Image 1", href: "https://example.com" },
		{ src: "image2.jpg", caption: "Image 2" }
	];
</script>

{#snippet figure(image)}
	<figure>
		<img src={image.src} alt={image.caption} />
		<figcaption>{image.caption}</figcaption>
	</figure>
{/snippet}

{#each images as image}
	{#if image.href}
		<a href={image.href}>
			{@render figure(image)}
		</a>
	{:else}
		{@render figure(image)}
	{/if}
{/each}
```

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

TITLE: Component Events with Callback Props in Svelte 5 (Pump.svelte)
DESCRIPTION: Shows the child component implementation that accepts callback props instead of dispatching events. This component provides UI controls for inflating and deflating a balloon in the parent component.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_6

LANGUAGE: svelte
CODE:
```
<script lang="ts">
  let { inflate, deflate } = $props();
  let power = $state(5);
</script>

<button onclick={() => inflate(power)}>inflate</button>
<button onclick={() => deflate(power)}>deflate</button>

<button onclick={() => power--}>-</button>
Pump power: {power}
<button onclick={() => power++}>+</button>
```

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

TITLE: Basic Canvas Reactivity with $effect
DESCRIPTION: Demonstrates reactive canvas drawing using $effect to respond to state changes in color and size. The effect automatically tracks dependencies and updates the canvas accordingly.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_11

LANGUAGE: svelte
CODE:
```
<script>
	let size = $state(50);
	let color = $state('#ff3e00');
	let canvas;

	$effect(() => {
		const context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);

		// This effect runs whenever `color` or `size` changes
		context.fillStyle = color;
		context.fillRect(0, 0, size, size);
	});
</script>

<canvas bind:this={canvas} width="100" height="100" />

<input type="color" bind:value={color} />
<input type="range" bind:value={size} min="10" max="100" />
```

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

TITLE: Passing Snippets as Component Props
DESCRIPTION: Demonstrates how to pass snippets as props to create a reusable table component with customizable header and row rendering.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#2025-04-21_snippet_3

LANGUAGE: svelte
CODE:
```
<!-- Table.svelte -->
<script>
	let { data, header, row } = $props();
</script>

<table>
	<thead>
		<tr>{@render header()}</tr>
	</thead>
	<tbody>
		{#each data as item}
			<tr>{@render row(item)}</tr>
		{/each}
	</tbody>
</table>

<!-- App.svelte -->
<script>
	import Table from "./Table.svelte";

	const fruits = [
		{ name: "Apples", qty: 5, price: 2 },
		{ name: "Bananas", qty: 10, price: 1 },
		{ name: "Cherries", qty: 20, price: 0.5 }
	];
</script>

{#snippet header()}
	<th>Fruit</th>
	<th>Qty</th>
	<th>Price</th>
	<th>Total</th>
{/snippet}

{#snippet row(d)}
	<td>{d.name}</td>
	<td>{d.qty}</td>
	<td>{d.price}</td>
	<td>{d.qty * d.price}</td>
{/snippet}

<Table data={fruits} {header} {row} />
```

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

TITLE: Passing Snippets as Props to Components in Svelte 5
DESCRIPTION: Demonstrates how to pass snippets as props to a component. The example shows a Table component that accepts header and row snippets, allowing customization of table rendering while maintaining consistent structure.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_27

LANGUAGE: svelte
CODE:
```
<!-- Table.svelte -->
<script>
	let { data, header, row } = $props();
</script>

<table>
	<thead>
		<tr>{@render header()}</tr>
	</thead>
	<tbody>
		{#each data as item}
			<tr>{@render row(item)}</tr>
		{/each}
	</tbody>
</table>
```

LANGUAGE: svelte
CODE:
```
<!-- App.svelte -->
<script>
	import Table from "./Table.svelte";

	const fruits = [
		{ name: "Apples", qty: 5, price: 2 },
		{ name: "Bananas", qty: 10, price: 1 },
		{ name: "Cherries", qty: 20, price: 0.5 }
	];
</script>

{#snippet header()}
	<th>Fruit</th>
	<th>Qty</th>
	<th>Price</th>
	<th>Total</th>
{/snippet}

{#snippet row(d)}
	<td>{d.name}</td>
	<td>{d.qty}</td>
	<td>{d.price}</td>
	<td>{d.qty * d.price}</td>
{/snippet}

<Table data={fruits} {header} {row} />
```

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

TITLE: Generating Unique Component IDs with $props.id() in Svelte 5
DESCRIPTION: Demonstrates how to generate unique component-scoped IDs using $props.id(). This is useful for creating accessible form inputs and ensuring consistency between server and client during hydration.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_23

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	const uid = $props.id();
</script>

<form>
	<label for="{uid}-firstname">First Name: </label>
	<input id="{uid}-firstname" type="text" />

	<label for="{uid}-lastname">Last Name: </label>
	<input id="{uid}-lastname" type="text" />
</form>
```

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

TITLE: Typing Component Props in Svelte
DESCRIPTION: Shows how to type component props in Svelte using TypeScript. It defines an interface for props and uses the $props() function to extract typed props.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#2025-04-21_snippet_1

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	interface Props {
		name: string;
	}

	let { name }: Props = $props();
</script>

<p>Hello, {name}!</p>
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	import Greeting from './Greeting.svelte';
</script>

<Greeting name="Alice" />
```

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

TITLE: Using Snippets as Default Slots in Svelte 5
DESCRIPTION: Shows how snippets replace the slot system in Svelte 5. Content passed to a component becomes available as the `children` snippet prop, which can be rendered with the @render directive.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_28

LANGUAGE: svelte
CODE:
```
<!-- Button.svelte -->
<script>
	let { children } = $props();
</script>

<button>{@render children()}</button>
```

LANGUAGE: svelte
CODE:
```
<!-- App.svelte -->
<Button>Click Me</Button>
```

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

TITLE: Default Children Snippet Usage
DESCRIPTION: Shows how to use the default children snippet as a replacement for the default slot system in Svelte 5.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#2025-04-21_snippet_4

LANGUAGE: svelte
CODE:
```
<!-- Button.svelte -->
<script>
	let { children } = $props();
</script>

<button>{@render children()}</button>

<!-- App.svelte -->
<Button>Click Me</Button>
```

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

TITLE: Reactivity in Classes with Svelte 5 Runes
DESCRIPTION: Demonstrates using $state inside a class to create reactive properties. Class methods can modify these properties, and the UI updates automatically in response.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_2

LANGUAGE: svelte
CODE:
```
<script>
	class Todo {
		done = $state(false);
		text = $state('');

		constructor(text) {
			this.text = text;
		}

		reset = () => {
			this.text = '';
			this.done = false;
		}
	}

	let todo = new Todo('Buy groceries');
</script>

<p>{todo.text} - {todo.done ? 'Done' : 'Not done'}</p>
<button onclick={() => todo.done = !todo.done}>Toggle</button>
<button onclick={() => todo.reset()}>Reset</button>
```

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

TITLE: Understanding Dependencies with $derived in Svelte 5
DESCRIPTION: Shows how derived state tracks dependencies and updates automatically when those dependencies change. This example tracks if a count is even or odd.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_9

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let count = $state(0);
	let isEven = $derived(count % 2 === 0);
</script>

<button onclick={() => count++}>
	Increment
</button>

<p>{count} is {isEven ? 'Even' : 'Odd'}</p>
```

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

TITLE: Multiple Bindable Props Component
DESCRIPTION: Shows how to implement multiple bindable props in a single component, allowing parent components to bind to multiple values. Includes default values and TypeScript support.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_14

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let { value = $bindable('default text'), disabled = $bindable(false), ...props } = $props();
</script>

<input bind:value={value} bind:disabled={disabled} {...props} />
```

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

TITLE: Default Fallback for Bindable Props
DESCRIPTION: Shows how to provide a default value when the parent does not pass a bindable prop. This ensures the component always has a meaningful initial state even when used without binding.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_17

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let { value = $bindable('fallback'), ...props } = $props(); // Default value set to 'fallback'
</script>

<input bind:value={value} {...props} />
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	import FancyInput from './FancyInput.svelte';
</script>

<FancyInput /> <!-- No `bind:value`, so it defaults to 'fallback' -->
```

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

TITLE: Using $effect.pre for Pre-DOM Updates
DESCRIPTION: Shows how $effect.pre can be used to run logic before the DOM updates. This is useful for timing-sensitive operations like auto-scrolling in a message list.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_14

LANGUAGE: svelte
CODE:
```
<script>
	import { tick } from 'svelte';

	let div = $state();
	let messages = $state([]);

	$effect.pre(() => {
		if (!div) return;

		// Tracks `messages.length` so the effect re-runs when messages change
		messages.length;

		// Auto-scroll logic before the DOM updates
		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
			tick().then(() => {
				div.scrollTo(0, div.scrollHeight);
			});
		}
	});
</script>

<div bind:this={div}>
	{#each messages as message}
		<p>{message}</p>
	{/each}
</div>

<button onclick={() => messages = [...messages, 'New message']}>Add Message</button>
```

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

TITLE: Effect Cleanup with Interval Timer
DESCRIPTION: Shows how to implement cleanup functions in $effect for managing intervals. The effect includes a teardown function that cleans up the interval when dependencies change or component is destroyed.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_12

LANGUAGE: svelte
CODE:
```
<script>
	let count = $state(0);
	let milliseconds = $state(1000);

	$effect(() => {
		const interval = setInterval(() => {
			count += 1;
		}, milliseconds);

		// Cleanup function runs before effect re-runs or on component destroy
		return () => {
			clearInterval(interval);
		};
	});
</script>

<h1>{count}</h1>

<button onclick={() => (milliseconds *= 2)}>Slower</button>
<button onclick={() => (milliseconds /= 2)}>Faster</button>
```

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

TITLE: Passing Data from Child to Parent Using Snippets
DESCRIPTION: Shows how snippets allow passing data from child to parent components. The List component passes item data to snippet functions, which the parent can then use within snippet definitions.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_32

LANGUAGE: svelte
CODE:
```
<!-- List.svelte -->
<script>
	let { items, item, empty } = $props();
</script>

{#if items.length}
	<ul>
		{#each items as entry}
			<li>
				{@render item(entry)}
			</li>
		{/each}
	</ul>
{:else}
	{@render empty?.()}
{/if}
```

LANGUAGE: svelte
CODE:
```
<!-- App.svelte -->
<script>
	import List from "./List.svelte";
	
	const fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<List items={fruits}>
	{#snippet item(fruit)}
		<span>{fruit}</span>
	{/snippet}
	
	{#snippet empty()}
		<span>No fruits available</span>
	{/snippet}
</List>
```

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

TITLE: Data Flow from Child to Parent using Snippets
DESCRIPTION: Shows how to pass data from child to parent components using snippet parameters, creating a flexible list component with customizable item rendering.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#2025-04-21_snippet_8

LANGUAGE: svelte
CODE:
```
<!-- List.svelte -->
<script>
	let { items, item, empty } = $props();
</script>

{#if items.length}
	<ul>
		{#each items as entry}
			<li>
				{@render item(entry)}
			</li>
		{/each}
	</ul>
{:else}
	{@render empty?.()}
{/if}

<!-- App.svelte -->
<script>
	import List from "./List.svelte";
	
	const fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<List items={fruits}>
	{#snippet item(fruit)}
		<span>{fruit}</span>
	{/snippet}
	
	{#snippet empty()}
		<span>No fruits available</span>
	{/snippet}
</List>
```

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

TITLE: Tracing Changes with console.trace in Svelte 5
DESCRIPTION: Illustrates how to trace reactive state changes using $inspect(...).with(console.trace). This is particularly useful for debugging complex reactive flows and understanding where state changes originate.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_27

LANGUAGE: svelte
CODE:
```
<script>
	let message = $state('Hello');

	$inspect(message).with(console.trace);
</script>

<input bind:value={message} />
```

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

TITLE: Implementing Generic Component Props in Svelte 5
DESCRIPTION: Demonstrates how to use generic types for flexible component props in Svelte 5. The generics attribute on the script tag allows for type parameters that ensure type consistency across props.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_35

LANGUAGE: svelte
CODE:
```
<!-- List.svelte -->
<script lang="ts" generics="Item">
	interface Props {
		items: Item[];
		select: (item: Item) => void;
	}

	let { items, select }: Props = $props();
</script>

{#each items as item}
	<button onclick={() => select(item)}>{item}</button>
{/each}
```

LANGUAGE: svelte
CODE:
```
<!-- App.svelte -->
<script lang="ts">
	import List from './List.svelte';

	const names = ['Alice', 'Bob', 'Charlie'];

	function handleSelect(name: string) {
		console.log('Selected:', name);
	}
</script>

<List items={names} select={handleSelect} />
```

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

TITLE: Component Events with Callback Props in Svelte 5 (App.svelte)
DESCRIPTION: Illustrates how to use callback props instead of event dispatchers in Svelte 5. This parent component passes functions to a child component that will be called when specific events occur, managing a balloon inflation simulation.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_5

LANGUAGE: svelte
CODE:
```
<script lang="ts">
  import Pump from './Pump.svelte';

  let size = $state(15);
  let burst = $state(false);

  function reset() {
    size = 15;
    burst = false;
  }
</script>

<Pump
  inflate={(power) => {
    size += power;
    if (size > 75) burst = true;
  }}
  deflate={(power) => {
    if (size > 0) size -= power;
  }}
/>

{#if burst}
  <button onclick={reset}>new balloon</button>
  <span class="boom">💥</span>
{:else}
  <span class="balloon" style="scale: {0.01 * size}">
    🎈
  </span>
{/if}
```

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

TITLE: Dynamic Component Usage in Svelte 5
DESCRIPTION: Shows how dynamic components are handled in Svelte 5. The <svelte:component> tag is no longer needed as components update dynamically when reassigned. The example demonstrates both the new and old syntax for comparison.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_47

LANGUAGE: svelte
CODE:
```
<script>
  import A from './A.svelte';
  import B from './B.svelte';
  let Thing = $state();
</script>

<select bind:value={Thing}>
  <option value={A}>A</option>
  <option value={B}>B</option>
</select>

<!-- Both are now equivalent -->
<Thing />
<svelte:component this={Thing} />
```

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

TITLE: Creating Custom Elements with $host in Svelte 5
DESCRIPTION: Shows how to use $host inside a custom element to dispatch events in Svelte 5. This approach allows dispatching custom events from a shadow DOM encapsulated component.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_22

LANGUAGE: svelte
CODE:
```
<svelte:options customElement="my-stepper" />

<script lang="ts">
	function dispatch(type) {
		$host().dispatchEvent(new CustomEvent(type)); 
	}
</script>

<button onclick={() => dispatch('decrement')}>decrement</button>
<button onclick={() => dispatch('increment')}>increment</button>
```

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	import './Stepper.svelte';

	let count = $state(0);
</script>

<my-stepper
	ondecrement={() => count -= 1} 
	onincrement={() => count += 1} 
></my-stepper>

<p>count: {count}</p>
```

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

TITLE: Typing $state in Svelte 5 with TypeScript
DESCRIPTION: Shows how to properly type state variables in Svelte 5 using TypeScript. The example demonstrates initializing a typed reactive variable with $state() and incrementing it in a function.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_36

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	let count: number = $state(0);

	function increment() {
		count += 1;
	}
</script>

<button onclick={increment}>Count: {count}</button>
```