Svelte 5 Vs Svelte 4

Cursor-Regel gegen Syntax-Mix: hält Svelte-4- und Svelte-5-Code (Runes) sauber getrennt.

Original-Beschreibung der Autoren: Cursor rules for comparing Svelte 5 and Svelte 4 development.

Die Regel

---
description: "Cursor rules for comparing Svelte 5 and Svelte 4 development."
globs: **/*
alwaysApply: false
---
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):

<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 => { e.preventDefault(); 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.

## So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter `.cursor/rules/` ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne `.cursorrules`-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den `---`-Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.


## Im Detail

Diese Cursor-Regel hält den Assistenten strikt bei einer Svelte-Version: Sie listet die zentralen Unterschiede zwischen Svelte 4 (export let, reaktive $:-Statements) und Svelte 5 (Runes wie $state, $derived, $effect) auf und verhindert so, dass in einem Projekt beide Syntaxwelten vermischt werden. Besonders nützlich beim Umstieg auf Svelte 5 oder bei Altprojekten, die bewusst auf Version 4 bleiben. Ohne eine solche Regel neigen KI-Assistenten dazu, veraltete oder neue Syntax querbeet vorzuschlagen, was zu Laufzeitfehlern führt. Lohnt sich für jedes Team, das Svelte produktiv einsetzt und Konsistenz im Codestil erzwingen will.

## Praxis-Tipp

In .cursorrules hinterlegen und die Zielversion explizit im Prompt nennen, z. B. "Dieses Projekt nutzt Svelte 5 mit Runes", damit der Assistent nicht auf $:-Syntax zurückfällt.

## Lizenz & Quelle

- **Lizenz:** CC0 1.0
- **Quelle:** [PatrickJS/awesome-cursorrules (GitHub)](https://github.com/PatrickJS/awesome-cursorrules)

Lade …