================
CODE SNIPPETS
================
TITLE: Dynamic Component Updates in Svelte 5
DESCRIPTION: Shows how Svelte 5 simplifies dynamic component rendering. The `<svelte:component>` tag is no longer required, and components update automatically when reassigned. This example demonstrates switching between two components (`A` and `B`) based on user selection.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_11

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: Svelte 5 Event Handling: Inline and Shorthand
DESCRIPTION: Shows the new way to handle events in Svelte 5, using regular properties like `onclick` instead of `on:` directives. Includes examples for both inline handlers and shorthand function calls.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_2

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: Basic TypeScript in Svelte Component
DESCRIPTION: Demonstrates the fundamental setup for using TypeScript within a Svelte component. It includes a simple function and event handling, highlighting the `lang="ts"` attribute and type annotations.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#_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: Svelte 5 Component Events: Callback Props
DESCRIPTION: Demonstrates how Svelte 5 replaces `createEventDispatcher` with callback props for child-to-parent communication. Shows examples in both the parent (App.svelte) and child (Pump.svelte) components.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_3

LANGUAGE: svelte
CODE:
```
<!-- App.svelte -->
<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:
```
<!-- Pump.svelte -->
<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 Snippet Usage in Svelte
DESCRIPTION: Demonstrates the fundamental usage of Svelte 5 snippets to create reusable markup blocks. This example shows how to define a snippet and render it within a loop, conditionally wrapping it in a link.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_42

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: Typing Component Props in Svelte
DESCRIPTION: Illustrates how to define and use typed props for Svelte components. It shows an example of an interface for props and how to access them using `$props()`, ensuring type safety for component inputs.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#_snippet_1

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

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

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

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

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

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

TITLE: Svelte 5 Legacy Compatibility Options
DESCRIPTION: Details how to maintain compatibility with Svelte 4 projects during migration. Shows how to use `createClassComponent` from `svelte/legacy` and how to enable automatic backwards compatibility through compiler options.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_8

LANGUAGE: javascript
CODE:
```
export default {
  compilerOptions: {
    compatibility: {
      componentApi: 4
    }
  }
};
```

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

TITLE: Svelte 5 Event Modifiers: Custom Wrappers
DESCRIPTION: Details how Svelte 5 handles event modifiers, which are no longer built-in. Provides examples of creating custom wrapper functions for common modifiers like `once` and `preventDefault`. Also mentions alternatives for `capture`, `passive`, and `nonpassive`.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_5

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);
    };
  }

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

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

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

TITLE: Svelte 5 Full Context
DESCRIPTION: A comprehensive collection of Svelte 5 examples, combining runes, event handling, snippets, and TypeScript integration. This file is designed to provide a broad overview for LLMs within a manageable token limit.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/README.md#_snippet_5

LANGUAGE: svelte
CODE:
```
// svelte5_full_context.txt

// --- Runes ---
let count = $state(0);
let doubledCount = $derived(count * 2);
$effect(() => {
  console.log('Count:', count);
});
export let message = $bindable('Hello');
export let title = $props('My App');

function increment() {
  count++;
}

// --- Events ---
function handleClick() {
  alert('Clicked!');
}
export let onUpdate = (value) => {};

// --- Snippets ---
function renderGreeting(name) {
  return `Welcome, ${name}!`;
}

// --- TypeScript ---
interface User {
  id: number;
  name: string;
}

let user: User = { id: 1, name: 'Alice' };

```

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

TITLE: Svelte 5 Component API Changes: Mount, Unmount, and State
DESCRIPTION: Covers the fundamental changes in Svelte 5's component lifecycle and state management. Explains the replacement of class components with functions, the use of `mount` and `unmount` for component instantiation and destruction, and how `$state()` replaces `$set` for reactive prop updates.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_7

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: Svelte 5 Component Events: Callback Props
DESCRIPTION: Explains how Svelte 5 replaces `createEventDispatcher` with callback props for child-to-parent communication. Provides examples for both parent and child components.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_61

LANGUAGE: svelte
CODE:
```
<!-- App.svelte -->
<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:
```
<!-- Pump.svelte -->
<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: Svelte 4 to Svelte 5 Migration Guide
DESCRIPTION: Highlights the key changes and differences between Svelte 4 and Svelte 5, focusing on the introduction of runes and other syntactic updates. This is essential for migrating existing Svelte projects.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/README.md#_snippet_4

LANGUAGE: svelte
CODE:
```
// svelte_4-5_migration_guide.txt

// Svelte 4: let count = 0;
// Svelte 5: let count = $state(0);

// Svelte 4: $: doubledCount = count * 2;
// Svelte 5: let doubledCount = $derived(count * 2);

// Svelte 4: $: console.log(count);
// Svelte 5: $effect(() => {
//   console.log(count);
// });

// Svelte 4: export let name;
// Svelte 5: export let name = $bindable('Default');

// Svelte 4: export let props = { title: 'Default' };
// Svelte 5: export let title = $props('Default Title');

```

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

TITLE: Basic Event Handling in Svelte 5
DESCRIPTION: Demonstrates the new way of handling events in Svelte 5 by directly binding functions to element properties, replacing the `on:` directive. This example shows a simple counter incremented on button click.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_33

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

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

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

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

TITLE: Basic Snippet Usage in Svelte
DESCRIPTION: Demonstrates the fundamental usage of Svelte 5 snippets to create reusable markup blocks. This example shows how to define a snippet and render it within a loop, conditionally wrapping it in a link.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#_snippet_0

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: Recursive Snippets in Svelte
DESCRIPTION: Demonstrates the use of recursive snippets in Svelte 5. This example creates a countdown snippet that calls itself until a base case is met, at which point it renders a blastoff snippet.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_44

LANGUAGE: svelte
CODE:
```
{#snippet blastoff()}
	<span>🚀</span>
{/snippet}

{#snippet countdown(n)}
	{#if n > 0}
		<span>{n}...</span>
		{@render countdown(n - 1)}
	{:else}
		{@render blastoff()}
	{/if}
{/snippet}

{@render countdown(5)}
```

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

TITLE: Svelte 5 Props Declaration
DESCRIPTION: Illustrates how to declare props in Svelte 5 using `$props()`. Shows default values, required props, and how to rename or forward props using object destructuring.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_1

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

<p>Optional: {optional}</p>
<p>Required: {required}</p>
```

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

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

TITLE: Server-Side Rendering with svelte/server
DESCRIPTION: Demonstrates how to use the `render` function from `svelte/server` for server-side rendering in Svelte 5. This replaces the previous component-level `render` method. The `css: 'injected'` option can be used to include styles.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_9

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

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

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

TITLE: Svelte 5 Bubbling Events with Props Spreading
DESCRIPTION: Explains how to handle bubbling events in Svelte 5 by accepting callback props like `onclick`. Shows how to forward these props using the spread syntax (`{...props}`) and how to manage local handlers alongside forwarded ones.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_4

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

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

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

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

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

TITLE: Generic Component Props in Svelte
DESCRIPTION: Explains how to use generic types for Svelte component props, allowing for flexible and type-safe handling of different data types. This example demonstrates a list component that can accept any item type and a selection handler.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#_snippet_2

LANGUAGE: svelte
CODE:
```
<!-- Filename: 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:
```
<!-- Filename: 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: Basic Prop Usage with $props
DESCRIPTION: Demonstrates how to receive and display a prop passed from a parent component using the $props rune in Svelte 5. It shows the basic setup for accessing props within a child component.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_19

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: Typing Custom Events and Attributes for Custom Elements
DESCRIPTION: Provides an example of how to extend Svelte's built-in DOM types using ambient declarations (`.d.ts` files) to support custom attributes and events for custom HTML elements, ensuring TypeScript compatibility.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#_snippet_5

LANGUAGE: typescript
CODE:
```
/* Filename: additional-svelte-typings.d.ts */
declare namespace svelteHTML {
	svelteHTML.IntrinsicElements {
		'custom-element': { customProp: string; 'on:customEvent': (e: CustomEvent<any>) => void };
	}
}
```

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

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

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

TITLE: Svelte Snippets for Content Projection
DESCRIPTION: Illustrates the use of Svelte's snippet feature for content projection, allowing parent components to define and pass content to child components. This example shows a layout component with header, main, and footer snippets.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_55

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

<Layout>
	{#snippet header()}
		<h1>My Website</h1>
	{/snippet}
	
	{#snippet main()}
		<p>Welcome to my website!</p>
	{/snippet}

	{#snippet footer()}
		<p>© 2023 My Website</p>
	{/snippet}
</Layout>
```

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

TITLE: Recursive Snippets in Svelte
DESCRIPTION: Demonstrates the use of recursive snippets in Svelte 5. This example creates a countdown snippet that calls itself until a base case is met, at which point it renders a blastoff snippet.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#_snippet_2

LANGUAGE: svelte
CODE:
```
{#snippet blastoff()}
	<span>🚀</span>
{/snippet}

{#snippet countdown(n)}
	{#if n > 0}
		<span>{n}...</span>
		{@render countdown(n - 1)}
	{:else}
		{@render blastoff()}
	{/if}
{/snippet}

{@render countdown(5)}
```

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

TITLE: Basic Prop Usage with $props
DESCRIPTION: Demonstrates how to receive and display a prop passed from a parent component using the $props rune in Svelte 5. It shows the basic setup for accessing props within a child component.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_snippet_19

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: Svelte 5 Runes API: State and Derived Values
DESCRIPTION: Demonstrates the new Runes API in Svelte 5 for declaring reactive state variables using `$state()` and derived values using `$derived()`. Also shows how to handle side effects with `$effect()`.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_0

LANGUAGE: svelte
CODE:
```
<script>
  let count = $state(0);
  const double = $derived(count * 2);

  $effect(() => {
    if (count > 5) alert('Count is too high!');
  });
</script>

<p>{count} * 2 = {double}</p>
```

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

TITLE: Svelte 5 Component Typing
DESCRIPTION: Illustrates the updated typing system in Svelte 5, where `SvelteComponent` is deprecated in favor of the `Component` type. `ComponentEvents` and `ComponentType` are also deprecated.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_10

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

```

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

TITLE: Typing $state in Svelte
DESCRIPTION: Demonstrates how to properly type reactive state variables declared with `$state()` in Svelte 5. This ensures that state updates are type-checked, preventing potential runtime errors.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#_snippet_3

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

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

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

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

TITLE: Derived State Dependencies and Updates
DESCRIPTION: Shows how derived state tracks dependencies. When a state variable used within a `$derived` expression changes, the derived state automatically updates. This example uses a counter to determine if a number is even or odd.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_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: Optional Snippet Props in Svelte
DESCRIPTION: Demonstrates how to handle optional snippet props in Svelte 5. This example shows a component that renders custom content if a `children` snippet is provided, otherwise it displays fallback content.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_47

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

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

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

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

TITLE: $effect Dependency Tracking (Async)
DESCRIPTION: Demonstrates that `$effect` only tracks dependencies accessed synchronously. In this example, `size` is accessed within a `setTimeout`, so it's not tracked, and updates to `size` do not trigger the effect. Only `color` updates trigger a re-run.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_snippet_13

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 re-runs when `color` changes but not when `size` changes
		context.fillStyle = color;

		setTimeout(() => {
			context.fillRect(0, 0, size, size);
		}, 0);
	});
</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: Derived State Dependencies and Updates
DESCRIPTION: Shows how derived state tracks dependencies. When a state variable used within a `$derived` expression changes, the derived state automatically updates. This example uses a counter to determine if a number is even or odd.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_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: $effect Dependency Tracking (Async)
DESCRIPTION: Demonstrates that `$effect` only tracks dependencies accessed synchronously. In this example, `size` is accessed within a `setTimeout`, so it's not tracked, and updates to `size` do not trigger the effect. Only `color` updates trigger a re-run.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_13

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 re-runs when `color` changes but not when `size` changes
		context.fillStyle = color;

		setTimeout(() => {
			context.fillRect(0, 0, size, size);
		}, 0);
	});
</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 Event Handling in Svelte 5
DESCRIPTION: Demonstrates the new way of handling events in Svelte 5 by directly binding functions to element properties, replacing the `on:` directive. This example shows a simple counter incremented on button click.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#_snippet_0

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

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

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

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

TITLE: Svelte 5 Event Modifiers: Custom Wrappers
DESCRIPTION: Explains that Svelte 5 removes built-in event modifiers. Provides examples of creating custom wrapper functions for modifiers like `once` and `preventDefault`.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_63

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: Avoiding Unnecessary Updates with Derived State
DESCRIPTION: Demonstrates Svelte's optimization where derived state updates are skipped if the derived value remains the same, even if the source state changes. This example uses a threshold to determine if a count is 'large'.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_10

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

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

<p>Is count large? {large}</p>
```

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

TITLE: Implementing Event Modifiers Manually in Svelte 5
DESCRIPTION: Details how Svelte 5 requires manual implementation of event modifiers like `once` and `preventDefault`. This example provides utility functions `once` and `preventDefault` that can be composed and applied to event handlers.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_39

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: Typing Wrapper Components in Svelte
DESCRIPTION: Shows how to create Svelte wrapper components that extend native HTML elements, like buttons, while maintaining type safety for all standard attributes and events. It uses `HTMLButtonAttributes` for comprehensive typing.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_typescript.txt#_snippet_4

LANGUAGE: svelte
CODE:
```
<!-- Filename: 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:
```
<!-- Filename: App.svelte -->
<script lang="ts">
	import Button from './Button.svelte';
</script>

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

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

TITLE: Avoiding Unnecessary Updates with Derived State
DESCRIPTION: Demonstrates Svelte's optimization where derived state updates are skipped if the derived value remains the same, even if the source state changes. This example uses a threshold to determine if a count is 'large'.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_snippet_10

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

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

<p>Is count large? {large}</p>
```

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

TITLE: Generic Component Props for Flexible Typing
DESCRIPTION: Shows how to use TypeScript generics in Svelte components to create flexible components that can work with various data types. This example defines a list component that accepts an array of any type and a callback function.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_52

LANGUAGE: svelte
CODE:
```
<!-- Filename: 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:
```
<!-- Filename: 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: $effect.pre for Pre-DOM Updates
DESCRIPTION: Shows how to use `$effect.pre` to execute logic before the DOM updates. This is useful for scenarios like auto-scrolling where the DOM's current state is needed for calculations. The example ensures auto-scrolling occurs before new messages are rendered.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_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.pre for Pre-DOM Updates
DESCRIPTION: Shows how to use `$effect.pre` to execute logic before the DOM updates. This is useful for scenarios like auto-scrolling where the DOM's current state is needed for calculations. The example ensures auto-scrolling occurs before new messages are rendered.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_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: Typing Wrapper Components with HTML Attributes
DESCRIPTION: Explains how to create wrapper components in Svelte that extend native HTML elements, leveraging TypeScript for type safety. This example shows a custom button component that accepts standard HTML button attributes and children.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_54

LANGUAGE: svelte
CODE:
```
<!-- Filename: 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:
```
<!-- Filename: App.svelte -->
<script lang="ts">
	import Button from './Button.svelte';
</script>

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

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

TITLE: $effect with Teardown (Cleanup)
DESCRIPTION: Illustrates how to use the teardown functionality within `$effect` by returning a cleanup function. This is useful for clearing intervals or removing event listeners when the effect re-runs or the component is destroyed. The example shows clearing an interval for a counter.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_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: Svelte 5 Multiple Event Handlers
DESCRIPTION: Addresses the change in Svelte 5 where only one property can handle a specific event (e.g., only one `onclick`). Shows how to combine multiple handlers into a single function and how to manage local handlers when spreading props to avoid overwriting.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte_4-5_migration_guide.txt#_snippet_6

LANGUAGE: svelte
CODE:
```
<script>
  function one(e) { console.log('Handler one'); }
  function two(e) { console.log('Handler two'); }
</script>

<button
  onclick={(e) => {
    one(e);
    two(e);
  }}>
  Multiple Handlers
</button>
```

LANGUAGE: svelte
CODE:
```
<script>
  let props = $props();
  function doStuff(e) { console.log('Local handler'); }
</script>

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

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

TITLE: Optional Snippet Props in Svelte
DESCRIPTION: Demonstrates how to handle optional snippet props in Svelte 5. This example shows a component that renders custom content if a `children` snippet is provided, otherwise it displays fallback content.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_snippets.txt#_snippet_5

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

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

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

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

TITLE: $effect with Teardown (Cleanup)
DESCRIPTION: Illustrates how to use the teardown functionality within `$effect` by returning a cleanup function. This is useful for clearing intervals or removing event listeners when the effect re-runs or the component is destroyed. The example shows clearing an interval for a counter.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_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: Avoiding Infinite Loops with $derived
DESCRIPTION: Illustrates the correct way to handle derived state by using `$derived` instead of modifying state within `$effect`. This prevents infinite loops and unnecessary re-renders. The example shows deriving a doubled value from a counter state.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_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: Svelte 5 Component Instantiation and Reactivity
DESCRIPTION: Demonstrates how to mount/hydrate components and manage state using $state in Svelte 5. Replaces older patterns like $on and $set.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_65

LANGUAGE: js
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';
```

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

TITLE: Avoiding Infinite Loops with $derived
DESCRIPTION: Illustrates the correct way to handle derived state by using `$derived` instead of modifying state within `$effect`. This prevents infinite loops and unnecessary re-renders. The example shows deriving a doubled value from a counter state.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_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: Implementing Event Modifiers Manually in Svelte 5
DESCRIPTION: Details how Svelte 5 requires manual implementation of event modifiers like `once` and `preventDefault`. This example provides utility functions `once` and `preventDefault` that can be composed and applied to event handlers.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#_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: Preventing Overwrite of Local Handlers with Spread Props in Svelte 5
DESCRIPTION: Shows how to ensure local event handlers are executed when using spread props. The example demonstrates calling a local handler (`doStuff`) before the handler passed via props (`props.onclick`).

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_38

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: Svelte 5 Snippets and Slots
DESCRIPTION: Demonstrates Svelte 5's new snippet syntax (`{#snippet}`, `{@render}`) and slot replacement. This is useful for creating reusable UI components and managing content projection.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/README.md#_snippet_2

LANGUAGE: svelte
CODE:
```
// svelte5_snippets.txt

// Defining a snippet
<script>
  function MyComponent() {
    // Snippet definition
    function renderContent(data) {
      return `Content: ${data}`;
    }

    // Using the snippet
    let itemData = 'Example Item';
  }
</script>

<MyComponent />

<!-- Usage of a snippet -->
<p>{@render renderContent(itemData)}</p>

<!-- Slot replacement example -->
<!-- <ParentComponent>
  <div slot="header">Custom Header</div>
</ParentComponent> -->

```

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

TITLE: Svelte 5 Runes
DESCRIPTION: Demonstrates the usage of Svelte 5 runes including $state, $effect, $derived, $bindable, $props, $host, and $inspect. This snippet covers core reactivity and component state management in Svelte 5.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/README.md#_snippet_0

LANGUAGE: svelte
CODE:
```
// svelte5_runes.txt

// $state: Declares a reactive state variable.
let count = $state(0);

// $derived: Creates a reactive value derived from other state variables.
let doubledCount = $derived(count * 2);

// $effect: Runs side effects in response to state changes.
$effect(() => {
  console.log('Count changed:', count);
});

// $bindable: Makes a prop bindable from the parent.
export let name = $bindable('World');

// $props: Explicitly declares props for a component.
export let title = $props('Default Title');

// $host: Used for defining custom element properties.
// Example: export let hostAttribute = $host('attribute');

// $inspect: For debugging reactive values.
// Example: $inspect(count);

function increment() {
  count++;
}

```

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

TITLE: Preventing Overwrite of Local Handlers with Spread Props in Svelte 5
DESCRIPTION: Shows how to ensure local event handlers are executed when using spread props. The example demonstrates calling a local handler (`doStuff`) before the handler passed via props (`props.onclick`).

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_events.txt#_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 Reactive Counter with $state
DESCRIPTION: Demonstrates the fundamental usage of $state to create a reactive counter. When the button is clicked, the `count` variable is incremented, and the UI updates automatically due to its reactivity.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_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: Basic Reactive Counter with $state
DESCRIPTION: Demonstrates the fundamental usage of $state to create a reactive counter. When the button is clicked, the `count` variable is incremented, and the UI updates automatically due to its reactivity.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_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: Custom Logging with $inspect.with
DESCRIPTION: Shows how to replace the default logging behavior of `$inspect` with a custom function using `.with()`. The provided callback function receives the type of change ('init' or 'update') and the updated values, allowing for custom logging logic.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_snippet_30

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

	$inspect(count).with((type, count) => {
		if (type === 'update') {
			console.log(`Count updated to: ${count}`);
		}
	});
</script>

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

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

TITLE: Basic $inspect Usage
DESCRIPTION: Demonstrates the basic usage of `$inspect`, which logs changes to reactive state in development mode. It automatically logs specified variables whenever they change, aiding in debugging reactive flows.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_runes.txt#_snippet_29

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

	$inspect(count, message); // Logs `count` and `message` whenever they change
</script>

<button onclick={() => count++}>Increment</button>
<input bind:value={message} />
```

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

TITLE: Svelte 5 Event Handling: Direct Properties
DESCRIPTION: Demonstrates the Svelte 5 approach to handling DOM events by using direct properties like `onclick` instead of `on:` directives. Includes shorthand syntax.

SOURCE: https://github.com/martypara/svelte5-llm-compact/blob/main/svelte5_full_context.txt#_snippet_60

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