Merhaba arkadaşlar;
Svelte 5'in kararlı sürümü yayınlandı. Reactivity adına bayağı değişiklikler var. Kendimce tanıtmaya çalıştım. İlgili başlıklara tıklarsanız detaylı dökümantasyonu görebilirsiniz.
Runes
$state rünü, reaktif durum oluşturmaya olanak tanıyor; yani, değer değiştiğinde kullanıcı arayüzünün de değişmesi anlamına geliyor.
<script>
let count = $state(0);
</script>
<button onclick={() => count++}>
clicks: {count}
</button>
Deep state
$state rünü array veya obje olduğunda reaktivite derindeki nesneler içinde uygulanır.
Not: Bazı Map ve Set gibi sınıflarda uygulanamıyor.
Bu rünü bir komponentten diğerine veri göndermek istediğimizde kullanıyoruz.
App.svelte
<script>
import MyComponent from './MyComponent.svelte';
</script>
<MyComponent adjective="cool" />
MyComponent.svelte
<script>
let props = $props();
</script>
<p>this component is {props.adjective}</p>
{#snippet ...} ve {@Render}
React.FC componentlerinde olduğu gibi, artık Svelte componentlerinin içinde de HTML blokları tanımlayıp istediğimizde kullanabiliriz. Hatta oluşturduğumuz snippetleri props olarak başka bir komponente gönderebiliriz.
{#snippet figure(image)}
<figure>
<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
<figcaption>{image.caption}</figcaption>
</figure>
{/snippet}
{#each images as image}
{#if image.href}
<a href={image.href}>
{@render figure(image)}
</a>
{:else}
{@render figure(image)}
{/if}
{/each}
en önemli değişikliklerden biride artık reaktif değişkenleri js ve ts doslayalarındada tanımlayabiliyoruz. Buda MVVM ve MVU gibi yapıları svelte mümkün kılıyor
svelte mvvm
// view/home.svelte
<script>
import { HomeViewModel } from "$lib/viewmodel/homeViewModel.svelte"
</script>
<span> counter : {HomeViewModel.Counter} </span>
<button onclick={()=>HomeViewModel.Increase()}>increase</button>
<button onclick={()=> HomeViewModel.Reset()}>reset</button>
// viewModel/homeViewModel.ts
class homeViewModel {
private counter: number = $state(0)
get Counter(): number {
return this.counter
}
Increase(): void {
this.counter += 1;
}
Reset(): void {
this.counter = 0;
}
}
export const HomeViewModel: homeViewModel = new homeViewModel()
