.cursorrules

I'm using svelte 5 instead of svelte 4 here is an overview of the changes.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.Snippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.Sure! Here are the succinct instructions for handling Event Handlers in Svelte 5, tailored for the AI-integrated code editor to help it understand and utilize these features effectively.In Svelte 5, event handlers are treated as properties, simplifying their use and integrating them more closely with the rest of the properties in the component.Svelte 4 vs. Svelte 5:Before:```html<script>let count = 0;$: double = count * 2;$: {if (count > 10) alert('Too high!');}</script><button on:click="{()" ="">count++}> {count} / {double}</button>```After:```html<script>let count = $state(0);let double = $derived(count * 2);$effect(() => {if (count > 10) alert('Too high!');});</script><button onclick="{()" ="">count++}> {count} / {double}</button>```Svelte 4 vs. Svelte 5:Before:```html<script>let a = 0;let b = 0;$: sum = add(a, b);function add(x, y) {return x + y;}</script><button on:click="{()" ="">a++}>a++</button><button on:click="{()" ="">b++}>b++</button><p>{a} + {b} = {sum}</p>```After:```html<script>let a = $state(0);let b = $state(0);let sum = $derived(add());function add() {return a + b;}</script><button onclick="{()" ="">a++}>a++</button><button onclick="{()" ="">b++}>b++</button><p>{a} + {b} = {sum}</p>```Svelte 4 vs. Svelte 5:Before:```html<script>let a = 0;let b = 0;$: sum = a + noTrack(b);function noTrack(value) {return value;}</script><button on:click="{()" ="">a++}>a++</button><button on:click="{()" ="">b++}>b++</button><p>{a} + {b} = {sum}</p>```After:```html<script>import { untrack } from 'svelte';let a = $state(0);let b = $state(0);let sum = $derived(add());function add() {return a + untrack(() => b);}</script><button onclick="{()" ="">a++}>a++</button><button onclick="{()" ="">b++}>b++</button><p>{a} + {b} = {sum}</p>```Svelte 5:```html<script>let { count = 0 } = $props();</script>{count}```Svelte 5:```html<script>let { class: classname, ...others } = $props();</script><pre class="{classname}">{JSON.stringify(others)}</pre>```Svelte 4 vs. Svelte 5:Before:```html<script>import { tick, beforeUpdate } from 'svelte';let theme = 'dark';let messages = [];let viewport;let updatingMessages = false;beforeUpdate(() => {if (updatingMessages) {const autoscroll =viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;if (autoscroll) {tick().then(() => viewport.scrollTo(0, viewport.scrollHeight));}}});function handleKeydown(event) {if (event.key === 'Enter') {const text = event.target.value;if (text) {messages = [...messages, text];updatingMessages = true;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 on:keydown="{handleKeydown}" /><button on:click="{toggle}">Toggle dark mode</button></div>```After:```html<script>import { tick } from 'svelte';let theme = $state('dark');let messages = $state([]);let viewport;$effect.pre(() => {messages;const autoscroll =viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;if (autoscroll) {tick().then(() => viewport.scrollTo(0, viewport.scrollHeight));}});function handleKeydown(event) {if (event.key === 'Enter') {const text = event.target.value;if (text) {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 5:```html<script>let { ...props } = $props();</script><button {...props}>a button</button>```Passing content using snippets:```html<!-- consumer --><script>import Button from './Button.svelte';</script><button>{#snippet children(prop)} click {prop} {/snippet}</button><!-- provider (Button.svelte) --><script>let { children } = $props();</script><button>{@render children("some value")}</button>```