Svelte عبارة عن إطار عمل بسيط سهل الاستخدام ومن المفترض أن تجعله التغييرات الأخيرة أكثر سهولة.

في يونيو 2023 ، أعلنت Svelte عن أحدث إصدار مستقر لها ، الإصدار 4. تحديث Svelte 4 هو في الأساس إصدار صيانة لـ Svelte 3 ، يهدف إلى تمهيد الطريق للجيل التالي من Svelte لإصداره كـ Svelte 5.

يضيف Svelte 4 تحسينات مختلفة إلى نظام Svelte البيئي ، بما في ذلك إعادة تصميم موقع الويب ، وتعيين الانتقالات المحلية كإعداد افتراضي ، وتحسين دعم مكونات الويب ، والتحول من TypeScript إلى JSDoc.

1. إعادة تصميم موقع Svelte

وصل Svelte 4 مع تحسينات للمسؤول موقع Svelte. المظهر الجديد للموقع رائع ، مع مستندات TypeScript المحسّنة ، خيار الوضع المظلم، وتجربة مستخدم محسنة بشكل عام عبر الأجهزة.

يحتوي موقع Svelte الآن على REPL محسن يسمح لك بتجربة كود Svelte مباشرة في المستعرض.

أيضًا ، تشير جميع روابط برامج Svelte التعليمية الآن إلى تجربة متعلمي Svelte الجديدة ، بينما تتوفر البرامج التعليمية القديمة لمستخدمي Safari 16.3 والإصدارات الأقدم.

2. الانتقالات المحلية افتراضية

تخيل التجربة المؤلمة المتمثلة في الاضطرار إلى تسوية انتقالات CSS بعد مشاهدة تحميل صفحتك لفترة أطول من المتوقع لأنك استخدمت انتقالات Svelte.

instagram viewer

عادة ، يتم تشغيل الانتقال عندما تقوم بتدمير كتلة الأصل. يمكنك تجاوز هذا السلوك بامتداد | محلي المعدل. يؤدي هذا إلى تشغيل الانتقال فقط عندما تقوم بتدمير الكتلة التي تحتوي على المكون الهدف. في Svelte 4 ، هذا | محلي تم تعيين المعدل كإعداد افتراضي للتحولات.

في المقتطف أدناه ، تتم إضافة انتقال للشريحة محليًا إلى ملف شعبة عنصر:

 {غرض}

3. تحسين دعم مكونات الويب

عززت Svelte دائمًا قابلية إعادة الاستخدام والصيانة ، ومن ثم دعمها المستمر لمكونات الويب. تتيح لك مكونات الويب إنشاء عناصر HTML مخصصة قابلة لإعادة الاستخدام بأنماط وسلوك مدمجين.

يغير Svelte 4 الطريقة التي ينشئ بها مكونات الويب ، ويزيل الأخطاء والتناقضات. تشمل هذه التغييرات:

  • يصدّر ينشئ دعامة مكونة ، مما يجعله في متناول المستهلكين المكونين.
  • الواجبات هي رد الفعل. لتغيير حالة المكون وتشغيل إعادة التصيير ، قم بتعيينه إلى متغير مُعلن محليًا.
  • استخدم ال $ رمز في بداية البيان لتمييزه على أنه بيان تفاعلي. تعمل العبارات التفاعلية بعد كود البرنامج النصي الآخر وقبل عرض ترميز المكون ، كلما تغيرت القيم التابعة.
  • عند إنشاء كائنات المتجر ، ابدأ المتجر بـ $ للسماح بالوصول التفاعلي إلى قيمة.
  • تعيين سمة سياق علامة البرنامج النصي إلى وحدة يتسبب في تشغيل البرنامج النصي مرة واحدة عند تقييم الوحدة النمطية لأول مرة بدلاً من كل مثيل مكون.

4. الانتقال من TypeScript إلى JSDoc

JSDoc هي أداة توثيق تدعم إضافة التعليقات التوضيحية والتعليقات على أكواد JavaScript.

بالنظر إلى أن JSDoc تخدع المطورين لتوثيق أكوادهم ، فإن هذا الترحيل يهدف إلى تشجيع المزيد من مطوري Svelte لتكوين عادة توثيق أكوادهم بشكل صحيح. قد تتطلب قاعدة التعليمات البرمجية JavaScrpt الموثقة بشكل كاف القليل من التحقق من النوع أو لا تتطلب أي فحص على الإطلاق.

إذا كنت جديدًا على TypeScript ، فيجب عليك ذلك استكشف TypeScript واكتشف سبب تفضيل المطورين لها.

الترحيل إلى Svelte 4

لقد عزز Svelte 4 الأداء والتطوير المبسط ، وهو أمر ممتاز لإنشاء تطبيقات ويب عالية الأداء. يجب أن يشجع هذا الإصدار الجديد أيضًا توثيق الكود بشكل أفضل مع الانتقال إلى JSDoc.

يستمر Svelte في التحسن ، وعلى الرغم من أنه ليس إطارًا مألوفًا لكل مطور ، إلا أن أولئك الذين يمتدحون عليه بشدة.