AI / LLM prompt/rules for Svelte 5

[xl0]

Here is my take (works well in Cursor):

New in SvelteKit 5:
# Runes
## Reactivity
Reactivity with
let x = "hello
at compontnt top-level is replaced with
let x: string = $state("hello")
This makes x reactive in the component, and also in any js functions that operate on it.
Don't use $state<T>() to pass the type. Always use let x: Type =
Variables declared with let x  = "hello" are no longer reactive.

## Derived values
Only style:
$: b = a + 1
New style:
let b = $derived(a + 1)
Or
let b = $derived.by( ( ) => {
    ....
    return  a + 1;
} )
for more complex use cases.
$derived() takes and expression. $derived.by() takes a function.

## Effect

let a = $state(1);
let b = $state(2);
let c;

// This will run when the component is mounted, and for every updates to a and b.
$effect(() => { 
    c = a + b;
});

Note: This does not apply to values that are read asynchronously (promises, setTimeout) inside $effect, they are not tracked.
Note: Values inside the objects are not tracked inside $effect:
This will run once, because `state` is never reassigned (only mutated)
$effect(() => {
	state;
});

This will run whenever `state.value` changes...
$effect(() => {
	state.value;
});
An effect only depends on the values that it read the last time it ran.
$effect(() => {
	if (a || b) { ...}
});
If a was true, b was not read, and the effect won't run when b changes.

## Props
Old way to pass props to a component:
export let a = "hello";
export let b;
New way:
let {a = "hello", b, ...everythingElse} = $props()
a and b are reactive.
Types:
let {a = "hello", b}: {a: string, b: number} = $props()
Note: Do NOT use this syntax for types:
let { x = 42 } = $props<{ x?: string }>();

# Slots and snippets
Instead of using <slot /> in a component, you should now do
let { children } = $props()
...
{@render children()} - this replaces <slot />

Submit suggestions / your variants. :)