### Svelte Project Setup

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Commands to create a new Svelte project using the official CLI and Vite. Includes installation and development server start.

```bash
npx sv create myapp
cd myapp
npm install
npm run dev
```

```bash
npm create vite@latest
# Select svelte option
```

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

### SvelteKit Project Creation

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Commands to create a new SvelteKit project, navigate into it, install dependencies, and start the development server.

```bash
npx sv create myapp
cd myapp
npm install
npm run dev
```

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

### SvelteKit Project Creation

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Commands to create a new SvelteKit project, navigate into it, install dependencies, and start the development server.

```bash
npx sv create myapp
cd myapp
npm install
npm run dev
```

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

### Svelte Testing Resources

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

A collection of helpful resources for getting started with testing Svelte applications, including links to libraries, examples, and tutorials.

```markdown
- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
- [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/sveltekit)
- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
- [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
- [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
```

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

### Svelte Testing Resources

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

A collection of helpful resources for getting started with testing Svelte applications, including links to libraries, examples, and tutorials.

```markdown
- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
- [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/sveltekit)
- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
- [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
- [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
```

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

### Svelte Project Creation with SvelteKit

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Command to create a new Svelte project using SvelteKit and Vite, install dependencies, and start the development server.

```bash
npx sv create myapp
cd myapp
npm install
npm run dev
```

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

### Svelte Project Creation with SvelteKit

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Command to create a new Svelte project using SvelteKit and Vite, install dependencies, and start the development server.

```bash
npx sv create myapp
cd myapp
npm install
npm run dev
```

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

### Vitest Setup for Svelte

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Provides instructions for setting up Vitest for Svelte projects, including installing the package and configuring Vite to use browser entry points when running tests.

```bash
npm install -D vitest
```

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

### createSubscriber Implementation Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Provides an example implementation of the MediaQuery class using createSubscriber. It demonstrates how to subscribe to DOM events and manage cleanup.

```js
// @errors: 7031
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
```

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

### Vitest Component Testing Setup

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Details the setup required for component testing with Vitest, including installing `jsdom` and configuring Vite to use the `jsdom` environment.

```bash
npm install -D jsdom
```

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

### createSubscriber Implementation Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Provides an example implementation of the MediaQuery class using createSubscriber. It demonstrates how to subscribe to DOM events and manage cleanup.

```js
// @errors: 7031
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
```

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

### Playwright Setup for E2E Testing

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Guides on setting up Playwright for End-to-End (E2E) testing of Svelte applications, including installation methods and configuration.

```bash
npm init playwright
```

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

### Installing Vitest

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Installs Vitest, a testing framework recommended for Svelte and Vite projects, via npm.

```bash
npm install -D vitest
```

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

### Installing Vitest

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Installs Vitest, a testing framework recommended for Svelte and Vite projects, via npm.

```bash
npm install -D vitest
```

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

### Svelte Transition Events Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Demonstrates how to listen for transition events in Svelte. The example shows how to capture 'introstart', 'outrostart', 'introend', and 'outroend' events and update a status variable accordingly.

```svelte
{#if visible}
	<p
		transition:fly={{ y: 200, duration: 2000 }}
		onintrostart={() => (status = 'intro started')}
		onoutrostart={() => (status = 'outro started')}
		onintroend={() => (status = 'intro ended')}
		onoutroend={() => (status = 'outro ended')}
	>
		Flies in and out
	</p>
{/if}
```

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

### Svelte Transition Events Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Demonstrates how to listen for transition events in Svelte. The example shows how to capture 'introstart', 'outrostart', 'introend', and 'outroend' events and update a status variable accordingly.

```svelte
{#if visible}
	<p
		transition:fly={{ y: 200, duration: 2000 }}
		onintrostart={() => (status = 'intro started')}
		onoutrostart={() => (status = 'outro started')}
		onintroend={() => (status = 'intro ended')}
		onoutroend={() => (status = 'outro ended')}
	>
		Flies in and out
	</p>
{/if}
```

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

### Installing Vitest

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Command to install Vitest as a development dependency for testing Svelte applications.

```bash
npm install -D vitest
```

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

### Full Await Block Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

A comprehensive example of the {#await} block in Svelte, showcasing how to handle a Promise's pending, fulfilled (then), and rejected (catch) states.

```svelte
{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled or not a Promise -->
	<p>The value is {value}</p>
{:catch error}
	<!-- promise was rejected -->
	<p>Something went wrong: {error.message}</p>
{/await}
```

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

### Installing Vitest

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Command to install Vitest as a development dependency for testing Svelte applications.

```bash
npm install -D vitest
```

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

### Full Await Block Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

A comprehensive example of the {#await} block in Svelte, showcasing how to handle a Promise's pending, fulfilled (then), and rejected (catch) states.

```svelte
{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled or not a Promise -->
	<p>The value is {value}</p>
{:catch error}
	<!-- promise was rejected -->
	<p>Something went wrong: {error.message}</p>
{/await}
```

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

### Preprocessor Configuration Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Provides an example of how to configure preprocessors in a Svelte project, specifically mentioning the order for `vitePreprocess` and `mdsvex`. It highlights that `mdsvex` should typically come before script or style preprocessors if it's being used.

```js
preprocess: [
vitePreprocess(),
	mdsvex(mdsvexConfig)
mdsvex(mdsvexConfig),
	vitePreprocess()
]
```

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

### Preprocessor Configuration Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Provides an example of how to configure preprocessors in a Svelte project, specifically mentioning the order for `vitePreprocess` and `mdsvex`. It highlights that `mdsvex` should typically come before script or style preprocessors if it's being used.

```js
preprocess: [
vitePreprocess(),
	mdsvex(mdsvexConfig)
mdsvex(mdsvexConfig),
	vitePreprocess()
]
```

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

### Vitest Unit Test Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Example of a unit test for a Svelte store-like function using Vitest. It tests the initial value and the update functionality.

```svelte.js
/// file: multiplier.svelte.test.js
import { flushSync } from 'svelte';
import { expect, test } from 'vitest';
import { multiplier } from './multiplier.svelte.js';

test('Multiplier', () => {
	let double = multiplier(0, 2);

	expect(double.value).toEqual(0);

	double.set(5);

	expect(double.value).toEqual(10);
});
```

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

### ActionReturn Usage Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Provides an example of implementing a Svelte action with `update` and `destroy` methods, and defining custom attributes and events for TypeScript typings.

```ts
interface Attributes {
	newprop?: string;
	'on:event': (e: CustomEvent<boolean>) => void;
}

export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
	// ...
	return {
		update: (updatedParameter) => {...},
		destroy: () => {...}
	};
}
```

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

### Svelte 5 Runes Mode: Mount and Update Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Provides a JavaScript example demonstrating how to mount a Svelte component in runes mode and update its state. It contrasts the new approach with the older Svelte 4 method.

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

// Svelte 4 style (commented out)
// const app = new App({ target: document.getElementById("app"), props: { foo: 'bar' } });
// app.foo = 'baz'

// Svelte 5 runes mode style
const props = $state({ foo: 'bar' });
const app = mount(App, { target: document.getElementById("app"), props });
props.foo = 'baz';
```

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

### Vitest Unit Test Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Example of a unit test for a Svelte store-like function using Vitest. It tests the initial value and the update functionality.

```svelte.js
/// file: multiplier.svelte.test.js
import { flushSync } from 'svelte';
import { expect, test } from 'vitest';
import { multiplier } from './multiplier.svelte.js';

test('Multiplier', () => {
	let double = multiplier(0, 2);

	expect(double.value).toEqual(0);

	double.set(5);

	expect(double.value).toEqual(10);
});
```

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

### Spring.of Usage Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Example of using the Spring.of static method to create a spring that tracks a reactive 'number' prop.

```svelte
<script>
	import { Spring } from 'svelte/motion';

	let { number } = $props();

	const spring = Spring.of(() => number);
</script>
```

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

### Spring.of Usage Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Example of using the Spring.of static method to create a spring that tracks a reactive 'number' prop.

```svelte
<script>
	import { Spring } from 'svelte/motion';

	let { number } = $props();

	const spring = Spring.of(() => number);
</script>
```

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

### Svelte 5 Runes Mode: Mount and Update Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Provides a JavaScript example demonstrating how to mount a Svelte component in runes mode and update its state. It contrasts the new approach with the older Svelte 4 method.

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

// Svelte 4 style (commented out)
// const app = new App({ target: document.getElementById("app"), props: { foo: 'bar' } });
// app.foo = 'baz'

// Svelte 5 runes mode style
const props = $state({ foo: 'bar' });
const app = mount(App, { target: document.getElementById("app"), props });
props.foo = 'baz';
```

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

### ActionReturn Usage Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Provides an example of implementing a Svelte action with `update` and `destroy` methods, and defining custom attributes and events for TypeScript typings.

```ts
interface Attributes {
	newprop?: string;
	'on:event': (e: CustomEvent<boolean>) => void;
}

export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
	// ...
	return {
		update: (updatedParameter) => {...},
		destroy: () => {...}
	};
}
```

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

### Svelte `readable` Store Function

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Creates a `Readable` store. It accepts an initial value and an optional `start` function that is called when the first subscriber subscribes. The `start` function can return a cleanup function.

```APIDOC
readable<T>(
  value?: T | undefined,
  start?: StartStopNotifier<T> | undefined
): Readable<T>;
```

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

### Svelte `readable` Store Function

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Creates a `Readable` store. It accepts an initial value and an optional `start` function that is called when the first subscriber subscribes. The `start` function can return a cleanup function.

```APIDOC
readable<T>(
  value?: T | undefined,
  start?: StartStopNotifier<T> | undefined
): Readable<T>;
```

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

### Synchronous Update Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Demonstrates reading a prop and then incrementing it, showcasing the synchronous nature of accessor updates.

```js
// @noErrors
console.log(component.count);
component.count += 1;
```

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

### Component Example Usage

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Example of how to define and use a strongly typed Svelte component with TypeScript, including importing from a library and passing props.

```svelte
<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
```

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

### Synchronous Update Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Demonstrates reading a prop and then incrementing it, showcasing the synchronous nature of accessor updates.

```js
// @noErrors
console.log(component.count);
component.count += 1;
```

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

### Svelte Stores: Readable Store Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Provides examples of creating readable stores in Svelte, which are useful for values that cannot be set externally, such as time or data streams.

```typescript
import { readable } from 'svelte/store';

const time = readable(new Date(), (set) => {
	set(new Date());

	const interval = setInterval(() => {
		set(new Date());
	}, 1000);

	return () => clearInterval(interval);
});

const ticktock = readable('tick', (set, update) => {
	const interval = setInterval(() => {
		update((sound) => (sound === 'tick' ? 'tock' : 'tick'));
	}, 1000);

	return () => clearInterval(interval);
});
```

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

### Svelte Stores: Derived Store Examples

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Demonstrates how to create derived stores in Svelte, which compute their value based on one or more other stores. Includes examples for asynchronous derivations and cleanup functions.

```typescript
import { derived } from 'svelte/store';

const doubled = derived(a, ($a) => $a * 2);
```

```typescript
import { derived } from 'svelte/store';

const delayed = derived(
	a,
	($a, set) => {
		setTimeout(() => set($a), 1000);
	},
	2000
);

const delayedIncrement = derived(a, ($a, set, update) => {
	set($a);
	setTimeout(() => update((x) => x + 1), 1000);
});
```

```typescript
import { derived } from 'svelte/store';

const tick = derived(
	frequency,
	($frequency, set) => {
		const interval = setInterval(() => {
			set(Date.now());
		}, 1000 / $frequency);

		return () => {
			clearInterval(interval);
		};
	},
	2000
);
```

```typescript
import { derived } from 'svelte/store';

const summed = derived([a, b], ([$a, $b]) => $a + $b);

const delayed = derived([a, b], ([$a, $b], set) => {
	setTimeout(() => set($a + $b), 1000);
});
```

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

### Svelte 5 Chat Window Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

A practical example demonstrating the use of Svelte 5's `$effect.pre` and `tick` for managing a chat window. It handles message updates, autoscrolling, and theme toggling.

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

  let updatingMessages = false;
  let theme = $state('dark');
  let messages = $state([]);

  let viewport;

  $effect.pre(() => {
    if (!updatingMessages) return;
    messages;
    const autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;

    if (autoscroll) {
      tick().then(() => {
        viewport.scrollTo(0, viewport.scrollHeight);
      });
    }

    updatingMessages = false;
  });

  function handleKeydown(event) {
    if (event.key === 'Enter') {
      const text = event.target.value;
      if (!text) return;

      updatingMessages = true;
      messages = [...messages, text];
      event.target.value = '';
    }
  }

  function toggle() {
    theme = theme === 'dark' ? 'light' : 'dark';
  }
</script>

<div class:dark={theme === 'dark'}>
  <div bind:this={viewport}>
    {#each messages as message}
      <p>{message}</p>
    {/each}
  </div>

  <input onkeydown={handleKeydown} />

  <button onclick={toggle}> Toggle dark mode </button>
</div>
```

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

### Svelte Topological Ordering Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Demonstrates how Svelte orders reactive statements based on dependencies. This example shows a case where indirect referencing can break the expected update flow and how to fix it by reordering.

```svelte
<script>
	let x = 0;
	let y = 0;

	$: z = y;
	$: setY(x);

	function setY(value) {
		y = value;
	}
</script>
```

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

### Server-Side Rendering with Props and Context

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Provides an example of calling the `render` method with both props and custom context options.

```js
// @noErrors
const { head, html, css } = App.render(
	// props
	{ answer: 42 },
	// options
	{
		context: new Map([['context-key', 'context-value']])
	}
);
```

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

### Server-Side Rendering with Props and Context

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Provides an example of calling the `render` method with both props and custom context options.

```js
// @noErrors
const { head, html, css } = App.render(
	// props
	{ answer: 42 },
	// options
	{
		context: new Map([['context-key', 'context-value']])
	}
);
```

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

### bind:this for Component Instances

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Illustrates using bind:this to get a reference to a component instance, allowing programmatic interaction with its methods or properties. The example shows accessing a method on a ShoppingCart component.

```svelte
<!file: App.svelte>
<ShoppingCart bind:this={cart} />

<button onclick={() => cart.empty()}> Empty shopping cart </button>
```

```svelte
<!file: ShoppingCart.svelte>
<script>
	// All instance exports are available on the instance object
	export function empty() {
		// ...
	}
</script>
```

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

### Rendering Server-Side Component with Props and Context

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Provides an example of calling the `render` method with both props and a custom context map.

```js
// @noErrors
const { head, html, css } = App.render(
	// props
	{ answer: 42 },
	// options
	{
		context: new Map([['context-key', 'context-value']])
	}
);
```

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

### bind:this for Component Instances

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Illustrates using bind:this to get a reference to a component instance, allowing programmatic interaction with its methods or properties. The example shows accessing a method on a ShoppingCart component.

```svelte
<!file: App.svelte>
<ShoppingCart bind:this={cart} />

<button onclick={() => cart.empty()}> Empty shopping cart </button>
```

```svelte
<!file: ShoppingCart.svelte>
<script>
	// All instance exports are available on the instance object
	export function empty() {
		// ...
	}
</script>
```

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

### Instantiating Svelte Components (Svelte 5)

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Demonstrates how to instantiate Svelte 5 components using `mount` or `hydrate` instead of the class constructor. It also shows the replacement for the `$on` method using the `events` option.

```js
import { mount } from 'svelte';
import App from './App.svelte'

// Svelte 3/4 style (will cause error in Svelte 5)
// const app = new App({ target: document.getElementById("app") });

// Svelte 5 style using mount
const app = mount(App, { target: document.getElementById("app") });

export default app;

// Example with event handling replacement
// Svelte 3/4 style:
// app.$on('event', callback);
// Svelte 5 style:
// const app = mount(App, { target: document.getElementById("app"), events: { event: callback } });
```

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

### Rendering Server-Side Component with Props and Context

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Provides an example of calling the `render` method with both props and a custom context map.

```js
// @noErrors
const { head, html, css } = App.render(
	// props
	{ answer: 42 },
	// options
	{
		context: new Map([['context-key', 'context-value']])
	}
);
```

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

### Svelte Context: Type-Safe Context

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Provides an example of implementing type-safe context in Svelte using JSDoc annotations. It defines functions to set and get user context with type checking.

```js
/// file: context.js
// @filename: ambient.d.ts
interface User {}

// @filename: index.js
//cut
import { getContext, setContext } from 'svelte';

const key = {};

/** @param {User} user */
export function setUserContext(user) {
	setContext(key, user);
}

export function getUserContext() {
	return /** @type {User} */ (getContext(key));
}
```

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

### Legacy Component API (Svelte 5)

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Provides an example of using `createClassComponent` from `svelte/legacy` to maintain the Svelte 4 component API for compatibility.

```js
import { createClassComponent } from 'svelte/legacy';
import App from './App.svelte'

// Svelte 3/4 style:
// const app = new App({ target: document.getElementById("app") });

// Svelte 5 with legacy compatibility:
const app = createClassComponent({ component: App, target: document.getElementById("app") });

export default app;
```

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

### Instantiating Svelte Components (Svelte 5)

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Demonstrates how to instantiate Svelte 5 components using `mount` or `hydrate` instead of the class constructor. It also shows the replacement for the `$on` method using the `events` option.

```js
import { mount } from 'svelte';
import App from './App.svelte'

// Svelte 3/4 style (will cause error in Svelte 5)
// const app = new App({ target: document.getElementById("app") });

// Svelte 5 style using mount
const app = mount(App, { target: document.getElementById("app") });

export default app;

// Example with event handling replacement
// Svelte 3/4 style:
// app.$on('event', callback);
// Svelte 5 style:
// const app = mount(App, { target: document.getElementById("app"), events: { event: callback } });
```

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

### SvelteKit/Vite Preprocessing Configuration

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Configuration for SvelteKit/Vite projects to enable TypeScript preprocessing. The first example shows the default setup, while the second enables full script preprocessing for non-type-only TypeScript features.

```ts
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
	preprocess: vitePreprocess()
};

export default config;
```

```ts
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
	preprocess: vitePreprocess({ script: true })
};

export default config;
```

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

### Legacy Component API (Svelte 5)

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Provides an example of using `createClassComponent` from `svelte/legacy` to maintain the Svelte 4 component API for compatibility.

```js
import { createClassComponent } from 'svelte/legacy';
import App from './App.svelte'

// Svelte 3/4 style:
// const app = new App({ target: document.getElementById("app") });

// Svelte 5 with legacy compatibility:
const app = createClassComponent({ component: App, target: document.getElementById("app") });

export default app;
```

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

### Svelte Custom Animation with Transform and Duration

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

An example of a custom Svelte animation function named `whizz`. It calculates the distance between the element's start and end positions to determine the animation duration and applies a CSS transform for movement and rotation.

```svelte
<!file: App.svelte>
<script>
	import { cubicOut } from 'svelte/easing';

	/**
	 * @param {HTMLElement} node
	 * @param {{ from: DOMRect; to: DOMRect }}
 states
	 * @param {any} params
	 */
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
		};
	}
</script>

{#each list as item, index (item)} 
	<div animate:whizz>{item}</div>
{/each}
```

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

### SvelteURL Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Demonstrates the usage of SvelteURL for creating reactive URLs and binding input values to URL properties like protocol, hostname, pathname, and href.

```svelte
<script>
	import { SvelteURL } from 'svelte/reactivity';

	const url = new SvelteURL('https://example.com/path');
</script>

<!-- changes to these... -->
<input bind:value={url.protocol} />
<input bind:value={url.hostname} />
<input bind:value={url.pathname} />

<hr />

<!-- will update `href` and vice versa -->
<input bind:value={url.href} />
```

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

### Svelte Custom Animation with Transform and Duration

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

An example of a custom Svelte animation function named `whizz`. It calculates the distance between the element's start and end positions to determine the animation duration and applies a CSS transform for movement and rotation.

```svelte
<!file: App.svelte>
<script>
	import { cubicOut } from 'svelte/easing';

	/**
	 * @param {HTMLElement} node
	 * @param {{ from: DOMRect; to: DOMRect }}
 states
	 * @param {any} params
	 */
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
		};
	}
</script>

{#each list as item, index (item)} 
	<div animate:whizz>{item}</div>
{/each}
```

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

### Svelte Stores: Writable Store Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Demonstrates the creation and usage of a writable store in Svelte. It shows how to initialize, subscribe to, set, and update the store's value.

```javascript
import { writable } from 'svelte/store';

const count = writable(0);
console.log($count); // logs 0

count.set(1);
console.log($count); // logs 1

$count = 2;
console.log($count); // logs 2
```

```javascript
import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe((value) => {
	console.log(value);
}); // logs '0'

count.set(1); // logs '1'

count.update((n) => n + 1); // logs '2'
```

```javascript
import { writable } from 'svelte/store';

const count = writable(0, () => {
	console.log('got a subscriber');
	return () => console.log('no more subscribers');
});

count.set(1); // does nothing

const unsubscribe = count.subscribe((value) => {
	console.log(value);
}); // logs 'got a subscriber', then '1'

unsubscribe(); // logs 'no more subscribers'
```

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

### Component Initialization Options (APIDOC)

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Details the available options when initializing a Svelte component instance. These include `target`, `anchor`, `props`, `context`, `hydrate`, and `intro`, each serving a specific purpose in component rendering and setup.

```APIDOC
Component Initialization Options:

- target: An `HTMLElement` or `ShadowRoot` to render to. This option is required.
- anchor: A child of `target` to render the component immediately before.
- props: An object of properties to supply to the component.
- context: A `Map` of root-level context key-value pairs to supply to the component.
- hydrate: If `true`, instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. Requires the component to be compiled with `hydratable: true`. Cannot be used with `anchor`.
- intro: If `true`, will play transitions on initial render.
```

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

### SvelteURL Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Demonstrates the usage of SvelteURL for creating reactive URLs and binding input values to URL properties like protocol, hostname, pathname, and href.

```svelte
<script>
	import { SvelteURL } from 'svelte/reactivity';

	const url = new SvelteURL('https://example.com/path');
</script>

<!-- changes to these... -->
<input bind:value={url.protocol} />
<input bind:value={url.hostname} />
<input bind:value={url.pathname} />

<hr />

<!-- will update `href` and vice versa -->
<input bind:value={url.href} />
```

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

### Component Example Usage

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Example of how to define and use a strongly typed Svelte component with TypeScript, including importing from a library and passing props.

```svelte
<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
```

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

### Component Initialization Options (APIDOC)

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Details the available options when initializing a Svelte component instance. These include `target`, `anchor`, `props`, `context`, `hydrate`, and `intro`, each serving a specific purpose in component rendering and setup.

```APIDOC
Component Initialization Options:

- target: An `HTMLElement` or `ShadowRoot` to render to. This option is required.
- anchor: A child of `target` to render the component immediately before.
- props: An object of properties to supply to the component.
- context: A `Map` of root-level context key-value pairs to supply to the component.
- hydrate: If `true`, instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. Requires the component to be compiled with `hydratable: true`. Cannot be used with `anchor`.
- intro: If `true`, will play transitions on initial render.
```

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

### Svelte Module Script Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Demonstrates the usage of a `<script module>` block in Svelte, which executes once per module load. It shows how to manage module-level state and export bindings.

```svelte
<script module>
	let total = 0;
</script>

<script>
	total += 1;
	console.log(`instantiated ${total} times`);
</script>
```

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

### Component Example Usage

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Example of how to define and use a strongly typed Svelte component with TypeScript, including importing from a library and passing props.

```svelte
<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
```

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

### Component Example Usage

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Example of how to define and use a strongly typed Svelte component with TypeScript, including importing from a library and passing props.

```svelte
<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
```

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

### Node.js Server-Side Rendering Setup

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Shows how to set up server-side rendering in a Node.js environment using `svelte/register` to import and render Svelte components.

```js
// @noErrors
require('svelte/register');

const App = require('./App.svelte').default;

const { head, html, css } = App.render({
	answer: 42
});
```

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

### Svelte Module Script Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

Demonstrates the usage of a `<script module>` block in Svelte, which executes once per module load. It shows how to manage module-level state and export bindings.

```svelte
<script module>
	let total = 0;
</script>

<script>
	total += 1;
	console.log(`instantiated ${total} times`);
</script>
```

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

### Svelte Stores: Get Value

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Shows how to retrieve the current value of a Svelte store without subscribing to its changes using the `get` function.

```ts
import { get } from 'svelte/store';

const value = get(store);
```

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

### Svelte 5 Component Instantiation

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Informs about the change in Svelte 5 where components are no longer classes. It directs users to use `mount` or `hydrate` for instantiation and provides a link to the migration guide for further information.

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

mount(App, { target: document.body });

// Or for hydration:
// import { hydrate } from 'svelte';
// hydrate(App, { target: document.body, props: { ... } });
```

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

### Node.js Server-Side Rendering Setup

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Shows how to set up server-side rendering in a Node.js environment using `svelte/register` to import and render Svelte components.

```js
// @noErrors
require('svelte/register');

const App = require('./App.svelte').default;

const { head, html, css } = App.render({
	answer: 42
});
```

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

### Svelte 5 Component Instantiation

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Informs about the change in Svelte 5 where components are no longer classes. It directs users to use `mount` or `hydrate` for instantiation and provides a link to the migration guide for further information.

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

mount(App, { target: document.body });

// Or for hydration:
// import { hydrate } from 'svelte';
// hydrate(App, { target: document.body, props: { ... } });
```

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

### Snippet Example: Invalid Export

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullForLLMs.md

This example demonstrates an invalid export scenario where a snippet defined in a module script references a variable from a non-module script, causing a compilation error.

```svelte
<script module>
	export { greeting };
</script>

<script>
	let message = 'hello';
</script>

{#snippet greeting(name)}
	<p>{message} {name}!</p>
{/snippet}
```

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

### Svelte Module Script Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

Illustrates the usage of a module script in Svelte, which runs once per module evaluation. It shows how to manage state across component instances.

```svelte
<script module>
	let total = 0;
</script>

<script>
	total += 1;
	console.log(`instantiated ${total} times`);
</script>
```

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

### Snippet Example: Invalid Export

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

This example demonstrates an invalid export scenario where a snippet defined in a module script references a variable from a non-module script, causing a compilation error.

```svelte
<script module>
	export { greeting };
</script>

<script>
	let message = 'hello';
</script>

{#snippet greeting(name)}
	<p>{message} {name}!</p>
{/snippet}
```

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

### 'in:' and 'out:' Directives Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte-distilled.txt

Illustrates the use of unidirectional `in:` and `out:` directives in Svelte. This example applies a 'fly' transition on element entry and a 'fade' transition on element exit.

```svelte
<script>
  import { fade, fly } from 'svelte/transition';
  
  let visible = $state(false);
</script>

<label>
  <input type="checkbox" bind:checked={visible}>
  visible
</label>

{#if visible}
	<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>
{/if}
```

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

### Introduction to .svelte.js and .svelte.ts Files

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Explains the functionality of .svelte.js and .svelte.ts files in Svelte 5, highlighting their use for reusable reactive logic and sharing reactive state. Mentions that these files behave like standard JS/TS modules but support runes.

```svelte
<script lang="js">
  // .svelte.js file content
  // You can use runes here, e.g., import { $state } from "svelte";
  // let count = $state(0);
</script>

<!-- Component content -->
```

```svelte
<script lang="ts">
  // .svelte.ts file content
  // You can use runes here, e.g., import { $state } from "svelte";
  // let count: number = $state(0);
</script>

<!-- Component content -->
```

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

### Snippet Example: Invalid Export

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5llms.txt

This example demonstrates an invalid export scenario where a snippet defined in a module script references a variable from a non-module script, causing a compilation error.

```svelte
<script module>
	export { greeting };
</script>

<script>
	let message = 'hello';
</script>

{#snippet greeting(name)}
	<p>{message} {name}!</p>
{/snippet}
```

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

### Basic Svelte Component

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

A simple Svelte component demonstrating an alert on button click. It includes script for logic and style for presentation, all within a single .svelte file.

```svelte
<!file: App.svelte>
<script>
	function greet() {
		alert('Welcome to Svelte!');
	}
</script>

<button onclick={greet}>click me</button>

<style>
	button {
		font-size: 2em;
	}
</style>
```

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

### Snippet Example: Invalid Export

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

This example demonstrates an invalid export scenario where a snippet defined in a module script references a variable from a non-module script, causing a compilation error.

```svelte
<script module>
	export { greeting };
</script>

<script>
	let message = 'hello';
</script>

{#snippet greeting(name)}
	<p>{message} {name}!</p>
{/snippet}
```

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

### Legacy Component Creation

Source: https://github.com/kspr9/svelte5forllms/blob/main/svelte5full.txt

Informs users that Svelte 5 components are no longer classes and should be instantiated using `mount` or `hydrate`.

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

### Svelte Module Script Example

Source: https://github.com/kspr9/svelte5forllms/blob/main/Svelte5FullDocForLLMs.md

Illustrates the usage of a module script in Svelte, which runs once per module evaluation. It shows how to manage state across component instances.

```svelte
<script module>
	let total = 0;
</script>

<script>
	total += 1;
	console.log(`instantiated ${total} times`);
</script>
```