{"filename":"svelte-5-vs-svelte-4-cursorrules-prompt-file.mdc","content":"---\ndescription: \"Cursor rules for comparing Svelte 5 and Svelte 4 development.\"\nglobs: **/*\nalwaysApply: false\n---\nI'm using svelte 5 instead of svelte 4 here is an overview of the changes.\n# .cursorrules for Svelte 5\n\n## Overview of Changes\n\nSvelte 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.\n\nSnippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.\n\n## Event Handlers in Svelte 5\n\nIn 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.\n\n### Svelte 4 vs. Svelte 5:\n\n**Before (Svelte 4):**\n```html\n<script>\n  let count = 0;\n  $: double = count * 2;\n  $: {\n    if (count > 10) alert('Too high!');\n  }\n</script>\n<button on:click={() => count++}> {count} / {double}</button>\n```\n\n**After (Svelte 5):**\n```html\n<script>\n  // Define state with runes\n  let count = $state(0);\n  \n  // Option 1: Using $derived for computed values\n  let double = $derived(count * 2);\n  \n  // Reactive effects using runes\n  $effect(() => {\n    if (count > 10) alert('Too high!');\n  });\n</script>\n\n<!-- Standard HTML event attributes instead of Svelte directives -->\n<button onclick={() => count++}>\n  {count} / {double}\n</button>\n\n<!-- Alternatively, you can compute values inline -->\n<!-- <button onclick={() => count++}>\n  {count} / {count * 2}\n</button> -->\n```\n\n## Key Differences:\n\n1. **Reactivity is Explicit**: \n   - Svelte 5 uses `$state()` to explicitly mark reactive variables\n   - `$derived()` replaces `$:` for computed values \n   - `$effect()` replaces `$: {}` blocks for side effects\n\n2. **Event Handling is Standardized**:\n   - Svelte 4: `on:click={handler}`\n   - Svelte 5: `onclick={handler}`\n\n3. **Runes are Compiler Syntax**:\n   - Do not import `$state`, `$derived`, `$effect`, `$props`, `$bindable`, or `$inspect`.\n   - Import only regular Svelte utilities that require imports, such as `tick`, `untrack`, `mount`, or `unmount`.\n\n4. **No More Event Modifiers**:\n   - Svelte 4: `on:click|preventDefault={handler}`\n   - Svelte 5: `onclick={e => { e.preventDefault(); handler(e); }}`\n\nThis creates clearer, more maintainable components compared to Svelte 4's previous syntax by making reactivity explicit and using standardized web platform features.\n"}