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>
```

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

TITLE: Component Instantiation and Lifecycle in Svelte 5
DESCRIPTION: Illustrates the changes in component instantiation and lifecycle management in Svelte 5. It shows how to use mount or hydrate instead of new Component(), and how to handle events and unmounting.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_45

LANGUAGE: javascript
CODE:
```
import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { 
  target: document.getElementById("app"),
  events: { event: callback } // Replacement for $on
});

const props = $state({ foo: 'bar' }); // Replacement for $set
props.foo = 'baz';

import { unmount } from 'svelte';
unmount(app); // Replacement for $destroy
```

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

TITLE: Snippet Scope and Visibility Rules
DESCRIPTION: Illustrates snippet scoping rules where nested snippets are only accessible within their lexical scope. Shows proper and improper snippet usage patterns.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#2025-04-21_snippet_1

LANGUAGE: svelte
CODE:
```
<div>
	{#snippet x()}
		{#snippet y()}
			<p>Inside y</p>
		{/snippet}

		<!-- Rendering `y` inside `x` is allowed -->
		{@render y()}
	{/snippet}

	<!-- This will cause an error because `y` is out of scope -->
	{@render y()}
</div>

<!-- This will also cause an error because `x` is out of scope -->
{@render x()}
```

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

TITLE: TypeScript Component Type in Svelte 5
DESCRIPTION: Shows how to use the new Component type from Svelte 5 for TypeScript typing, replacing the deprecated SvelteComponent type from Svelte 4.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#2025-04-21_snippet_15

LANGUAGE: typescript
CODE:
```
import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }>;
```

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

TITLE: Using $state in Classes with Svelte 5
DESCRIPTION: Demonstrates using $state inside a class to create reactive properties. The Todo class has reactive done and text properties, which automatically update the UI when changed.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.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: Snippet Scoping and Visibility Rules in Svelte 5
DESCRIPTION: Demonstrates snippet scoping rules where snippets are only accessible within their lexical scope. Snippets defined inside other snippets are only accessible within the parent snippet.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_25

LANGUAGE: svelte
CODE:
```
<div>
	{#snippet x()}
		{#snippet y()}
			<p>Inside y</p>
		{/snippet}

		<!-- Rendering `y` inside `x` is allowed -->
		{@render y()}
	{/snippet}

	<!-- This will cause an error because `y` is out of scope -->
	{@render y()}
</div>

<!-- This will also cause an error because `x` is out of scope -->
{@render x()}
```

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

TITLE: Optional Snippet Props Handling
DESCRIPTION: Demonstrates how to handle optional snippet props with fallback content using conditional rendering.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#2025-04-21_snippet_5

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

{#if children}
	{@render children()}
{:else}
	<p>Fallback content</p>
{/if}

<!-- App.svelte -->
<OptionalSnippet />
<OptionalSnippet>
	{#snippet children()}
		<p>Custom content</p>
	{/snippet}
</OptionalSnippet>
```

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

TITLE: TypeScript Definitions for 'on' Function in Svelte 5
DESCRIPTION: Provides TypeScript definitions for the 'on' function from 'svelte/events' in Svelte 5. This function attaches event handlers to various types of elements and returns a cleanup function, ensuring correct handler order.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#2025-04-21_snippet_7

LANGUAGE: typescript
CODE:
```
import { on } from 'svelte/events';

// Attach an event to `window`
function on<Type extends keyof WindowEventMap>(
    window: Window,
    type: Type,
    handler: (this: Window, event: WindowEventMap[Type]) => any,
    options?: AddEventListenerOptions
): () => void;

// Attach an event to `document`
function on<Type extends keyof DocumentEventMap>(
    document: Document,
    type: Type,
    handler: (this: Document, event: DocumentEventMap[Type]) => any,
    options?: AddEventListenerOptions
): () => void;

// Attach an event to an `HTMLElement`
function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
    element: Element,
    type: Type,
    handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
    options?: AddEventListenerOptions
): () => void;

// Attach an event to a `MediaQueryList`
function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
    element: Element,
    type: Type,
    handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
    options?: AddEventListenerOptions
): () => void;

// Generic event attachment
function on(
    element: EventTarget,
    type: string,
    handler: EventListener,
    options?: AddEventListenerOptions
): () => void;
```

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

TITLE: Server-Side Rendering in Svelte 5
DESCRIPTION: Demonstrates the new approach to server-side rendering in Svelte 5. Instead of using a render() method in components, it uses the render() function from svelte/server. The example also shows how to include CSS in the rendered output.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_46

LANGUAGE: javascript
CODE:
```
import { render } from 'svelte/server';
import App from './App.svelte';

const { html, head } = render(App, { props: { message: 'hello' }});
```

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

TITLE: Exporting and Importing Snippets
DESCRIPTION: Shows how to export snippets from one component and import them in another, enabling snippet reuse across components.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#2025-04-21_snippet_6

LANGUAGE: svelte
CODE:
```
<!-- math.svelte -->
<script module>
	export { add };
</script>

{#snippet add(a, b)}
	{a} + {b} = {a + b}
{/snippet}

<!-- App.svelte -->
<script>
	import { add } from "./math.svelte";
</script>

{@render add(2, 3)}
```

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

TITLE: Exporting Snippets in Svelte 5 Modules
DESCRIPTION: Shows how to export snippets for use in other components. Using script module and export syntax, snippets can be imported and used throughout an application.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_30

LANGUAGE: svelte
CODE:
```
<!-- math.svelte -->
<script module>
	export { add };
</script>

{#snippet add(a, b)}
	{a} + {b} = {a + b}
{/snippet}
```

LANGUAGE: svelte
CODE:
```
<!-- App.svelte -->
<script>
	import { add } from "./math.svelte";
</script>

{@render add(2, 3)}
```

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

TITLE: Declaring Custom Element Types in TypeScript for Svelte
DESCRIPTION: Demonstrates how to extend built-in DOM types for custom attributes and events in Svelte. This allows TypeScript to recognize custom elements and their props, avoiding errors when using experimental or third-party web components.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_38

LANGUAGE: typescript
CODE:
```
declare namespace svelteHTML {
	interface IntrinsicElements {
		'custom-element': { customProp: string; 'on:customEvent': (e: CustomEvent<any>) => void };
	}
}
```

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

TITLE: Spreading Props Including Event Handlers in Svelte 5
DESCRIPTION: Demonstrates how to spread props in Svelte 5, which automatically applies all attributes including event handlers. This technique is useful for creating reusable components that can accept various props and events.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#2025-04-21_snippet_3

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

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

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

TITLE: Basic TypeScript Setup in Svelte 5 Components
DESCRIPTION: Demonstrates the basic TypeScript setup in a Svelte component by adding the lang="ts" attribute to the script tag. Shows how to add type annotations to variables and functions.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_33

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: Typing Component Props in Svelte 5 with TypeScript
DESCRIPTION: Shows how to type component props in Svelte 5 using TypeScript interfaces. The example demonstrates creating a Props interface and using it to type the props received from $props().
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_34

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

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

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

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

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

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

TITLE: Optional Getter/Setter Binding in Svelte 5
DESCRIPTION: Demonstrates how to bind an input to a reactive value with a custom getter/setter. This example uses the new bind: syntax to apply automatic trimming to the input value.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_6

LANGUAGE: svelte
CODE:
```
<script>
	let name = $state('Alice');
</script>

<input bind:value={
	() => name,
	(v) => name = v.trimStart()
} />

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

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

TITLE: Generic Component Props in Svelte
DESCRIPTION: Demonstrates the use of generic props for flexible typing in Svelte components. It shows how to define a generic type for items and use it in the component's interface.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#2025-04-21_snippet_2

LANGUAGE: svelte
CODE:
```
<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:
```
<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: Typing Wrapper Components in Svelte
DESCRIPTION: Demonstrates how to type wrapper components that extend native HTML elements in Svelte. It uses the HTMLButtonAttributes type to ensure support for all standard button attributes.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#2025-04-21_snippet_4

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';

	let { children, ...rest }: HTMLButtonAttributes = $props();
</script>

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

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

<Button onclick={() => alert('Clicked!')}>Click Me</Button>
```

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

TITLE: Setting Default Values for Props in Svelte 5
DESCRIPTION: Illustrates how to provide fallback values for props when they are not passed from the parent component. This ensures that the component always has a valid value to work with.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_17

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

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

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

TITLE: Typing Wrapper Components in Svelte 5
DESCRIPTION: Demonstrates how to type wrapper components that extend native HTML elements. Uses the HTMLButtonAttributes type from svelte/elements to ensure proper typing of all button attributes.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_37

LANGUAGE: svelte
CODE:
```
<!-- Button.svelte -->
<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';

	let { children, ...rest }: HTMLButtonAttributes = $props();
</script>

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

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

<Button onclick={() => alert('Clicked!')}>Click Me</Button>
```

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

TITLE: Using Custom Elements with TypeScript in Svelte
DESCRIPTION: Shows how to use a custom element with TypeScript in a Svelte component. The example includes handling a custom event and passing a custom prop to the element.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_39

LANGUAGE: svelte
CODE:
```
<script lang="ts">
	function handleEvent(e: CustomEvent) {
		console.log('Custom event:', e.detail);
	}
</script>

<custom-element customProp="Hello" on:customEvent={handleEvent}></custom-element>
```

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

TITLE: Using $bindable with Multiple Props
DESCRIPTION: Demonstrates how to use multiple $bindable props in a single component. Both the value and disabled states can be bound to parent component variables, enabling complex dynamic behavior.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#2025-04-21_snippet_18

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} />
```

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

	let message = $state('Editable text');
	let isDisabled = $state(false);
</script>

<FancyInput bind:value={message} bind:disabled={isDisabled} />
<button onclick={() => isDisabled = !isDisabled}>
	Toggle Disabled
</button>
```

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

TITLE: Renaming Props in Svelte 5
DESCRIPTION: Demonstrates how to rename props when destructuring, which is useful for avoiding conflicts with reserved keywords or for improving code clarity. This example also includes a default fallback value.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_18

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

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

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

TITLE: Destructuring Props in Svelte 5
DESCRIPTION: Shows how to destructure props for cleaner and more concise code in Svelte 5 components. This technique allows direct access to prop values without using the props object.
SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#2025-04-21_snippet_16

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

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