Svelte 5 Vs Svelte 4 (.cursorrules)

{
    "prompt": "I'm using svelte 5 instead of svelte 4 here is an overview of the changes. # .cursorrules for Svelte 5 ## Overview of 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. ## Event Handlers in Svelte 5 In Svelte 5, event handlers are treated as standard HTML properties rather than Svelte-specific directives, simplifying their use and integrating them more closely with the rest of the properties in the component. ### Svelte 4 vs. Svelte 5: **Before (Svelte 4):** ```html <script> let count = 0; $: double = count * 2; $: { if (count > 10) alert('Too high!'); } </script> <button on:click={() => count++}> {count} / {double}</button> ``` **After (Svelte 5):** ```html <script> // Define state with runes let count = $state(0); // Option 1: Using $derived for computed values let double = $derived(count * 2); // Reactive effects using runes $effect(() => { if (count > 10) alert('Too high!'); }); </script> <!-- Standard HTML event attributes instead of Svelte directives --> <button onclick={() => count++}> {count} / {double} </button> <!-- Alternatively, you can compute values inline --> <!-- <button onclick={() => count++}> {count} / {count * 2} </button> --> ``` ## Key Differences: 1. **Reactivity is Explicit**: - Svelte 5 uses `$state()` to explicitly mark reactive variables - `$derived()` replaces `$:` for computed values - `$effect()` replaces `$: {}` blocks for side effects 2. **Event Handling is Standardized**: - Svelte 4: `on:click={handler}` - Svelte 5: `onclick={handler}` 3. **Runes are Compiler Syntax**: - Do not import `$state`, `$derived`, `$effect`, `$props`, `$bindable`, or `$inspect`. - Import only regular Svelte utilities that require imports, such as `tick`, `untrack`, `mount`, or `unmount`. 4. **No More Event Modifiers**: - Svelte 4: `on:click|preventDefault={handler}` - Svelte 5: `onclick={e => { tDefault(); handler(e); }}` This creates clearer, more maintainable components compared to Svelte 4's previous syntax by making reactivity explicit and using standardized web platform features.",
    "model": "Claude 3.7 Sonnet",
    "aspect_ratio": "1:1",
    "category": "Coding Agents",
    "content_type": "coding_prompt",
    "surface": "agents_hub",
    "quality_score": 81,
    "provenance": "SYSTEM_RULE"
}