.cursrorrules

New in SvelteKit 5:
# Runes
## Reactivity
Reactivity with
let x = "hello
at compontnt top-level is replaced with
let x = $state("hello")
This makes x reactive in the component, and also in any js functions that operate on it.

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

## Effect

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

Note:  This does not apply to values that are read asynchronously insude $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.
To use types:
let {a = "hello", b}: {a: string, b: number} = $props()
Note: The preview syntax
let { x = 42 } = $props<{ x?: string }>();
no longer works.

## Event changes
Use onclick={...} instead of on:click={...}