Svelte 5 Vs Svelte 4

Cursor-Regel zu den Unterschieden Svelte 5 (Runes) vs. Svelte 4 — verhindert vermischte Syntax.

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

Svelte 5 ersetzt die alte implizite Reaktivität (`$:`, `export let`) durch explizite Runes (`$state`, `$derived`, `$effect`, `$props`) — ein Bruch, der dazu führt, dass KI-Editoren ohne klare Vorgabe gerne beide Stile mischen und dadurch nicht mehr lauffähigen Code erzeugen. Diese Regel legt fest, welche Syntax im jeweiligen Projekt gilt, und ist besonders bei Migrationen oder gemischten Codebasen Gold wert. Für reine Svelte-4-Neuprojekte reicht meist die allgemeine svelte-Regel; diese hier lohnt sich vor allem, wenn Version-Verwechslung im Projekt schon mal zu Fehlern geführt hat.

## Praxis-Tipp

Vor einer Svelte-4-zu-5-Migration aktivieren und z. B. „Migriere diese Komponente von `export let` zu `$props()`“ prompten — die Regel verhindert, dass Cursor alte und neue Reaktivitäts-Syntax im selben File mischt.

## Lizenz & Quelle

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

Lade …