Svelte 5 Runes Rehberi: , , (2025 Tam Kılavuz)

Svelte 4 - Eski Yöntem / Old Way

<script>
  let count = 0; // Reaktif değişken / reactive variable

  $: doubled = count * 2; // $ label ile hesaplama / computed with $ label

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  {count} / Doubled: {doubled}
</button>
      

Svelte 5 - Yeni Yöntem / New Way with Runes

<script>
  let count = $state(0); // $state ile reaktif / reactive with $state

  let doubled = $derived(count * 2); // $derived ile hesaplama / computed with $derived

  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>
  {count} / Doubled: {doubled}
</button>
      

Basit Kullanım / Basic Usage

<script>
  // Primitif değerler / primitive values
  let name = $state('Alesta Web');
  let age = $state(25);
  let isActive = $state(true);

  // Objeler / objects
  let user = $state({
    name: 'Ahmet',
    email: 'ahmet@alestaweb.com'
  });

  // Diziler / arrays
  let items = $state(['React', 'Vue', 'Svelte']);

  function addItem() {
    items.push('Angular'); // Direkt mutasyon çalışır / direct mutation works!
  }
</script>

<input bind:value={user.name} />
<p>Merhaba {user.name}!</p>
      

Store Benzeri Kullanım / Store-like Usage

// stores.js
export const globalCounter = $state({ count: 0 });

// Component.svelte
<script>
  import { globalCounter } from './stores.js';

  function increment() {
    globalCounter.count++; // Global state güncellenir / global state updates
  }
</script>

<p>Global Count: {globalCounter.count}</p>
<button onclick={increment}>+1</button>
      

Alesta Web Not: Svelte 4'teki writable store'lara artık gerek yok (no need for writable stores anymore)!

Temel Örnek / Basic Example

<script>
  let firstName = $state('Mehmet');
  let lastName = $state('Yılmaz');

  // Otomatik hesaplanır / automatically computed
  let fullName = $derived(`${firstName} ${lastName}`);

  // Karmaşık hesaplama / complex computation
  let greeting = $derived(
    fullName.length > 10
      ? `Merhaba Sayın ${fullName}!`
      : `Merhaba ${fullName}!`
  );
</script>

<input bind:value={firstName} placeholder="Ad" />
<input bind:value={lastName} placeholder="Soyad" />
<p>{greeting}</p>
      

Array/Object Manipülasyonu / Array/Object Manipulation

<script>
  let products = $state([
    { name: 'Laptop', price: 5000, inStock: true },
    { name: 'Mouse', price: 100, inStock: false },
    { name: 'Keyboard', price: 300, inStock: true }
  ]);

  // Filtreleme / filtering
  let availableProducts = $derived(
    products.filter(p => p.inStock)
  );

  // Toplam fiyat / total price
  let totalPrice = $derived(
    availableProducts.reduce((sum, p) => sum + p.price, 0)
  );

  // Formatting
  let formattedTotal = $derived(
    `${totalPrice.toLocaleString('tr-TR')} TL`
  );
</script>

<p>Stoktaki ürün sayısı: {availableProducts.length}</p>
<p>Toplam: {formattedTotal}</p>
      

Temel Kullanım / Basic Usage

<script>
  let count = $state(0);

  // count değiştiğinde çalışır / runs when count changes
  $effect(() => {
    console.log(`Count değişti: ${count}`);
    document.title = `Count: ${count}`;
  });

  function increment() {
    count++;
  }
</script>

<button onclick={increment}>Count: {count}</button>
      

1. LocalStorage Senkronizasyonu / LocalStorage Sync

<script>
  let theme = $state(localStorage.getItem('theme') || 'light');

  $effect(() => {
    localStorage.setItem('theme', theme);
    document.body.className = theme;
  });

  function toggleTheme() {
    theme = theme === 'light' ? 'dark' : 'light';
  }
</script>

<button onclick={toggleTheme}>
  Tema: {theme}
</button>
      

2. API Çağrısı / API Call

<script>
  let userId = $state(1);
  let user = $state(null);
  let loading = $state(false);

  $effect(async () => {
    loading = true;
    try {
      const response = await fetch(`https://api.alestaweb.com/users/${userId}`);
      user = await response.json();
    } catch (error) {
      console.error('API error:', error);
    } finally {
      loading = false;
    }
  });
</script>

{#if loading}
  <p>Yükleniyor... (Loading...)</p>
{:else if user}
  <p>User: {user.name}</p>
{/if}
      

$props - Component Props

<!-- Parent.svelte -->
<Child name="Alesta Web" age={5} />

<!-- Child.svelte -->
<script>
  let { name, age = 0 } = $props(); // Destructure props

  // Props reaktiftir / props are reactive
  let greeting = $derived(`Merhaba ${name}, ${age} yaşında!`);
</script>

<p>{greeting}</p>
      

$bindable - Two-way Binding

<!-- CustomInput.svelte -->
<script>
  let { value = $bindable('') } = $props();
</script>

<input bind:value />

<!-- Parent.svelte -->
<script>
  let text = $state('');
</script>

<CustomInput bind:value={text} />
<p>Value: {text}</p>
      

$inspect - Debug Tool

<script>
  let user = $state({ name: 'Ahmet', age: 30 });

  // Her değişiklikte console'a yazdır / log to console on every change
  $inspect(user);

  // Mesajlı versiyon / with message
  $inspect('User değişti:', user);
</script>
      

Alesta Web Not: $inspect production'da otomatik kaldırılır (automatically removed in production)!

1. Reaktif Değişkenler / Reactive Variables

// Svelte 4
let count = 0;
$: doubled = count * 2;

// Svelte 5
let count = $state(0);
let doubled = $derived(count * 2);
      

2. Stores → $state

// Svelte 4
import { writable } from 'svelte/store';
const count = writable(0);

// Svelte 5
const count = $state({ value: 0 });
      

3. Props

// Svelte 4
export let name;
export let age = 0;

// Svelte 5
let { name, age = 0 } = $props();
      

Todo App (Tam Örnek / Complete Example)

<script>
  let todos = $state([
    { id: 1, text: 'Svelte 5 öğren', done: false },
    { id: 2, text: 'Alesta Web\'i ziyaret et', done: true }
  ]);

  let newTodo = $state('');

  // Computed values
  let remaining = $derived(
    todos.filter(t => !t.done).length
  );

  let allDone = $derived(
    todos.every(t => t.done)
  );

  function addTodo() {
    if (newTodo.trim()) {
      todos.push({
        id: Date.now(),
        text: newTodo,
        done: false
      });
      newTodo = '';
    }
  }

  function toggleTodo(id) {
    const todo = todos.find(t => t.id === id);
    if (todo) todo.done = !todo.done;
  }

  function removeTodo(id) {
    todos = todos.filter(t => t.id !== id);
  }

  // LocalStorage sync
  $effect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  });
</script>

<h1>Yapılacaklar ({remaining} kaldı)</h1>

<input
  bind:value={newTodo}
  onkeydown={(e) => e.key === 'Enter' && addTodo()}
  placeholder="Yeni görev ekle..."
/>
<button onclick={addTodo}>Ekle</button>

{#each todos as todo}
  <div>
    <input
      type="checkbox"
      checked={todo.done}
      onchange={() => toggleTodo(todo.id)}
    />
    <span style:text-decoration={todo.done ? 'line-through' : 'none'}>
      {todo.text}
    </span>
    <button onclick={() => removeTodo(todo.id)}>Sil</button>
  </div>
{/each}

{#if allDone && todos.length > 0}
  <p>? Tüm görevler tamamlandı! (All tasks completed!)</p>
{/if}