---
title: "Svelte 5 Saf Bir Derleyici Sihri Değil: Runes, İnce Tanecikli Sinyaller ve Doğrudan DOM Mutasyonları Perde Arkasında Nasıl Çalışır?"
url: https://blog.edumints.com/svelte-5-saf-bir-derleyici-sihri-degil-runes-ince-tanecikli-sinyaller
category: "Web"
date: 2026-11-08T15:06:33.157Z
publisher: Edumints Blog
lang: tr-TR
source_name: "dev.to"
source_url: https://dev.to/smtahosin/svelte-5-isnt-pure-compiler-magic-how-runes-fine-grained-signals-and-direct-dom-mutations-36a3
---

# Svelte 5 Saf Bir Derleyici Sihri Değil: Runes, İnce Tanecikli Sinyaller ve Doğrudan DOM Mutasyonları Perde Arkasında Nasıl Çalışır?

Svelte web geliştirme dünyasına ilk adım attığında cesur bir manifestoyla gelmişti: **"Sanal DOM (Virtual DOM) saf bir yüktür. Svelte derleme zamanında çalışır ve bileşenlerinizi DOM'u cerrahi bir hassasiyetle güncelleyen küçük, yüksek verimli saf JavaScript kodlarına dönüştürür."**

Beş yıl boyunca geliştiriciler Svelte'in derleme zamanı reaktivitesini kutladı. `useState`, bağımlılık dizileri veya uzlaştırma (reconciliation) motorlarına ihtiyaç yoktu. Yalnızca sıradan JavaScript yazıyordunuz:

```html
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Clicks: {count}</button>
```

Perde arkasında Svelte 3 ve 4, kodunuzu ayrıştırıyor, atama operatörünü (`count += 1`) tespit ediyor ve `$$invalidate` adlı gizli bir derleyici yardımcısı enjekte ediyordu:

```javascript
function increment() {
  $$invalidate(0, count += 1);
}
```

`$$invalidate` her tetiklendiğinde, Svelte bileşen örneği üzerinde bir bitmask kirli (dirty) dizisini işaretliyordu. Bir sonraki mikro görevde (microtask), üretilen güncelleme fonksiyonundaki bir `switch` bloğundan geçerek doğrudan ilgili DOM düğümünü değiştiriyordu. Bu adeta bir büyü gibiydi.

Ancak uygulamalar ölçeklendikçe, bu saf derleme zamanı illüzyonu derin mimari çatlaklar göstermeye başladı. Reaktivite yalnızca `.svelte` uzantılı tek dosya bileşenleri içinde çalışıyordu. İş mantığını bağımsız bir JavaScript dosyasına taşıdığınızda, derleyici artık değişken atamalarınızı yeniden yazamıyordu. Normal değişkenleri bırakıp manuel abonelikler ve fazladan kod yükü getiren özel Svelte store yapılarına başvurmak zorunda kalıyordunuz. Ayrıca, derin nesne mutasyonlarını takip etmek kök nesneyi yeniden atamayı (`user.profile.age = 30; user = user;`) gerektiriyor ve tüm bileşenin kirli kontrollerini yeniden değerlendirmesine yol açıyordu.

Svelte 5 ile çekirdek ekip cesur bir mimari dönüşüm gerçekleştirdi. Saf derleme zamanı atama yeniden yazımından uzaklaşarak, ince tanecikli (fine-grained) bir itme-çekme (push-pull) çalışma zamanı sinyal grafiğiyle güçlendirilmiş açık ilkel yapılar olan **Runes** modelini benimsediler.

Pek çok geliştirici şaşırdı: Svelte, Solid veya Vue'ya mı dönüşüyordu? Çekirdek felsefesini terk mi etmişti? Gerçek çok daha etkileyicidir. Svelte 5 derleyici avantajından vazgeçmedi; onu bir üst seviyeye taşıdı. Statik şablon yükseltmeyi (template hoisting) çalışma zamanı sinyalleriyle birleştirerek, Svelte 4'ün hantal store yapıları ve React'in Virtual DOM yükü olmadan ince tanecikli reaktivite sağladı.

## 1. Mimari Dönüşüm: Svelte 4 ve Svelte 5 Karşılaştırması

Runes yapısının neden var olduğunu anlamak için Svelte 4'ün üretim hattını incelemek gerekir. Svelte 4'te derleyici, tüm `.svelte` bileşenini reaktivitenin atomik sınırı olarak ele alıyordu. Bir değişkeni değiştirdiğinizde bileşen hangi spesifik DOM düğümünün hangi alt özelliğe bağlı olduğunu bilmiyordu; yalnızca bileşen içindeki bir şeyin değiştiğini (dirty) biliyordu.

Svelte 4'ün basit bir sayaç için ürettiği kavramsal çıktı şöyleydi:

```javascript
// Svelte 4 Derleyici Çıktısı (Kavramsal)
function p(ctx, [dirty]) {
  // Kirli bitmask içinde 0. bit ayarlanmışsa:
  if (dirty & /*count*/ 1) {
    set_data(t1, /*count*/ ctx[0]);
  }
}
```

Bu model ciddi kısıtlamalar barındırıyordu:

- **Bileşen Sınırı Tuzağı (The Component Boundary Trap):** Reaktif durumu beş bileşen arasında paylaşmak veya bir TypeScript yardımcı dosyasında tutmak istediğinizde `let count =` yapısını doğrudan kullanamıyordunuz.

## Yazılım Geliştirme ve Öğrenme Açısından Pratik Çıkarımlar

- **Soyutlamaların Sınırlarını Anlamak:** Sihirli görünen derleme zamanı çözümleri küçük ölçekte hız kazandırsa da, uygulama büyüdüğünde iş mantığını bileşen dışına taşımak (modülerlik) kritik hale gelir.
- **Hibrit Mimarinin Gücü:** Svelte 5, derleyici optimizasyonlarını çalışma zamanı sinyalleriyle birleştirerek hem temiz kod yazımını hem de ölçeklenebilir durum yönetimini mümkün kılar.

---

**Kaynak:** dev.to (https://dev.to/smtahosin/svelte-5-isnt-pure-compiler-magic-how-runes-fine-grained-signals-and-direct-dom-mutations-36a3)
**Yayıncı:** [Edumints Blog](https://blog.edumints.com) · Alıntılarken bu URL'ye bağlantı verin: https://blog.edumints.com/svelte-5-saf-bir-derleyici-sihri-degil-runes-ince-tanecikli-sinyaller