Svelte DOM'un dışına çıkıyor: Custom renderer nedir, neden zor?

Renderer ne demek?

Bir UI framework’ü iki işi birbirinden ayırabilir. Birincisi “ne değişti?” sorusu: State güncellenince hangi parçanın yeniden çizilmesi gerektiğini bulmak. İkincisi “nasıl çizilir?” sorusu: O değişikliği ekrana yansıtmak. Tarayıcıda ikinci iş DOM’a eleman eklemek, metni değiştirmek, öznitelik ayarlamak demek. Renderer, bu ikinci işi yapan katman.

Bu iki iş ayrıysa, ikinci katmanı değiştirip aynı framework’ü bambaşka bir hedefe bağlayabilirsin. React bunu yıllardır yapıyor. react-reconciler paketine bir host config veriyorsun: “Eleman nasıl oluşturulur, bir çocuk nasıl eklenir, nasıl silinir” sorularının cevabı olan fonksiyonlar. React DOM, React Native ve React ART bu yöntemle yazılmış. Topluluk da aynı yolla Three.js sahnelerine çizen react-three-fiber gibi renderer’lar yazdı. Sen aynı JSX’i yazıyorsun, ama ekrana DOM yerine native bir buton ya da 3D bir küp geliyor. React’in kendi notu da önemli: Bu API deneysel ve sık değişiyor. React Native’in bugün nerede durduğunu Shopify yazımızda anlattık.

Svelte’te neden zor?

Svelte farklı çalışıyor. Bir derleyici (compiler): Bileşenini derleme anında doğrudan DOM’u değiştiren JavaScript’e çeviriyor. Paolo Ricciuti’nin Mainmatter blogundaki açıklamasına göre derleyici, bir şablonu HTML metni olarak bir <template> etiketine verip tarayıcıya ayrıştırtıyor, sonra onu kopyalıyor. Üretilen kod ve çalışma zamanı da firstChild, appendChild gibi DOM fonksiyonlarını doğrudan çağırıyor. Svelte’in hızlı ve küçük olmasının bir nedeni bu. Ama aynı neden, onu DOM’a sıkıca bağlıyor. Ortada değiştirebileceğin bir katman yok.

Ricciuti’nin önerisi iki parçalı. Derleyiciye yeni bir seçenek ekleniyor. Bu seçenek açıkken şablon HTML metni yerine bir ağaç tarifi olarak üretiliyor. Sonra bir renderer paketi DOM’a benzeyen bir dizi işlemi tanımlıyor: eleman oluştur, metin düğümü oluştur, öznitelik ayarla, araya ekle, kaldır, ilk çocuğu ve sonraki kardeşi bul, olay dinleyicisi ekle. Svelte’in reaktivite kısmı aynen kalıyor. Sadece “nasıl çizilir?” kısmı senin verdiğin fonksiyonlara gidiyor.

Lynx nereye giriyor?

Lynx, ByteDance’in Mart 2025’te açık kaynak yaptığı bir uygulama platformu. iOS, Android, HarmonyOS ve web için native arayüz çiziyor ve CSS ile web’e benzer bir programlama modeli sunuyor. Resmî framework desteği ReactLynx. Arayüz çizimi ile uygulama mantığı ayrı iş parçacıklarında çalışıyor. Bu yüzden Lynx bir web view değil: Ekrana gelen şey gerçek native bileşenler. Ricciuti Mayıs 2025’te Svelte ile yazılmış bir yapılacaklar uygulamasını Lynx üzerinden bir telefonda çalıştırdığı bir kavram kanıtı (proof of concept) yayınladı. Bölümde Lynx’in bir web view’dan farkını ve tarayıcı dışında CSS’in nasıl ele alınacağını da konuşuyorlar.

Fikir sadece mobil için değil. Girişimin sitesi PDF, terminal arayüzü, WebGL canvas ve video üretimini de olası hedefler olarak sayıyor. Çalışmayı Ricciuti’nin işvereni Mainmatter destekliyor. Ricciuti’nin PR notuna göre işin finansmanında bu bölümü yayınlayan Syntax da sponsorlar arasında.

Neler çalışmayacak?

Bazı Svelte özellikleri doğası gereği DOM’a özel. Ricciuti’nin PR’ına göre custom renderer ile derlenen bileşenlerde normal elemanlarda bind:, transition:, animate:, <svelte:window> ve <svelte:head> gibi şeyler kapalı. CSS’in sayfaya enjekte edilmesi ve sunucuda üretilen HTML’in canlandırılması (hydration) da yok. Yani her Svelte bileşeni olduğu gibi telefona taşınmayacak, ama bileşen modeli, reaktivite ve dil aynı kalacak.

Sonra ne oldu?

Ricciuti, bölümden kısa süre sonra, 1 Nisan 2026’da Svelte deposuna büyük bir PR açtı (#18042). Deneysel bir customRenderer derleme seçeneği ve svelte/renderer modülünden gelen bir createRenderer fonksiyonu getiriyor. Ekim 2026 ortası itibarıyla PR hâlâ açık, birleştirilmedi. Ricciuti Ağustos’ta, ekibin önceliğinin SvelteKit 3 olduğunu ve sonrasında Rich Harris’in inceleme yapacağını yazdı. Bu arada topluluk dalı denemeye başladı: Örneğin svelterm, aynı Svelte bileşenini hem tarayıcıda hem terminalde çizen bir proje olarak bu dalın üstüne kuruldu. Yani özellik henüz kararlı bir Svelte sürümünde yok.

Düşün

• Kullandığın framework’te “ne değişti?” ve “nasıl çizilir?” işleri ayrı mı? Bunu nereden anlarsın?
• Aynı bileşeni web ve mobilde kullanmak mı daha değerli, yoksa her platformun kendi arayüzünü yazmak mı?

Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.