أحجار Svelte 5: مستقبل JavaScript التفاعلية هنا

يقدّم Svelte 5 ميزة الـ Runes، وهي طريقة جديدة ثورية للتعامل مع التفاعلية تجعل الإطار أكثر بداهة مع تحسين الأداء.

ما هي الـ Runes؟

الـ Runes دوال خاصة تستبدل التفاعلية المدفوعة بالمُجمّع في Svelte بإعلانات صريحة:

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

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

الـ Runes الأساسية

• $state: إعلان حالة تفاعلية
• $derived: قيم محسوبة
• $effect: آثار جانبية
• $props: خصائص المكوّن
• $bindable: خصائص ربط ثنائي الاتجاه

مكوّن نموذجي

<script>
  let { initialCount = 0 } = $props();

  let count = $state(initialCount);
  let doubled = $derived(count * 2);

  $effect(() => {
    console.log(`Count changed to ${count}`);
  });
</script>

<button onclick={() => count++}>
  {count} (doubled: {doubled})
</button>

الانتقال من Svelte 4

استخدم أداة الانتقال:

npx svelte-migrate svelte-5

مزايا الـ Runes

1. تفاعلية أكثر وضوحاً وقابلية للتنبؤ
2. دعم أفضل لـ TypeScript
3. أسهل للفهم على المبتدئين
4. أداء محسّن عبر تحديثات دقيقة الحبيبات