neo-svelte copilot-instructions.md

I'm using svelte 5 instead of svelte 4 here is an overview of the changes.

Overview

Svelte 5 introduces runes, a set of advanced primitives for controlling reactivity. The runes replace certain non-runes features and provide more explicit control over state and effects.

$state

• Purpose: Declare reactive state.
• Usage:

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

• Replaces: Top-level let declarations in non-runes mode.
• Class Fields:

class Todo {
	done = $state(false);
	text = $state();
	constructor(text) {
		this.text = text;
	}
}

• Deep Reactivity: Only plain objects and arrays become deeply reactive.

$state.raw

• Purpose: Declare state that cannot be mutated, only reassigned.
• Usage:

<script>let numbers = $state.raw([1, 2, 3]);</script>

• Performance: Improves with large arrays and objects.

$state.snapshot

• Purpose: Take a static snapshot of $state.
• Usage:

<script>
	let counter = $state({ count: 0 });

	function onClick() {
		console.log($state.snapshot(counter));
	}
</script>

$derived

• Purpose: Declare derived state.
• Usage:

<script>let count = $state(0); let doubled = $derived(count * 2);</script>

• Replaces: Reactive variables computed using $: in non-runes mode.

$derived.by

• Purpose: Create complex derivations with a function.
• Usage:

<script>
	let numbers = $state([1, 2, 3]); let total = $derived.by(() => numbers.reduce((a, b) => a + b,
	0));
</script>

$effect

• Purpose: Run side-effects when values change.
• Usage:

<script>
	let size = $state(50);
	let color = $state('#ff3e00');

	$effect(() => {
		const context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.fillStyle = color;
		context.fillRect(0, 0, size, size);
	});
</script>

• Replacements: $effect replaces a substantial part of $: {} blocks triggering side-effects.

$effect.pre

• Purpose: Run code before the DOM updates.
• Usage:

<script>
	$effect.pre(() =>{' '}
	{
		// logic here
	}
	);
</script>

• Replaces: beforeUpdate.

$effect.tracking

• Purpose: Check if code is running inside a tracking context.
• Usage:

<script>console.log('tracking:', $effect.tracking());</script>

$props

• Purpose: Declare component props.
• Usage:

<script>let {(prop1, prop2)} = $props();</script>

• Replaces: export let syntax for declaring props.

$bindable

• Purpose: Declare bindable props.
• Usage:

<script>let {(bindableProp = $bindable('fallback'))} = $props();</script>

$inspect

• Purpose: Equivalent to console.log but re-runs when its argument changes.
• Usage:

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

$host

• Purpose: Retrieve the this reference of the custom element.
• Usage:

<script>
	function greet(greeting) {
		$host().dispatchEvent(new CustomEvent('greeting', { detail: greeting }));
	}
</script>

• Note: Only available inside custom element components on the client-side.

Overview of snippets in svelte 5

Snippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.

Snippets Usage

• Definition: Use the #snippet syntax to define reusable markup sections.
• Basic Example:

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

• Invocation: Render predefined snippets with @render:

{@render figure(image)}

• Destructuring Parameters: Parameters can be destructured for concise usage: