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. :)

[FarhanAliRaza]

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 />
# Event Handling
Event handlers have been given a facelift in Svelte 5. Whereas in Svelte 4 we use the on: directive to attach an event listener to an element, in Svelte 5 they are properties like any other (in other words - remove the colon)
<button onclick={() => count++}>
	clicks: {count}
</button>
preventDefault and once is removed in svelte 5 . Normal HTML event management is advised
<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>

[brunnerh]

There are now text files of the docs for feeding into LLMs: https://svelte.dev/docs/llms

[FarhanAliRaza]

Yes, I know but llm small is too long . Especially for GitHub copilot that works fine with this prompt when migrating ai generated code to svelte 5.