ممشوق

Svelte هو إطار عمل برمجي مجاني ومفتوح المصدر قائم على المكونات لتطوير واجهات المستخدم الأمامية ^{[ 2 ]} ولغة ^{[ 3 ]} أنشأها ريتش هاريس ويتولى صيانتها فريق Svelte الأساسي. ^{[ 4 ]}

لا تُعدّ Svelte مكتبة جافا سكريبت متجانسة تستوردها التطبيقات، بل تقوم Svelte بتحويل قوالب HTML إلى كود متخصص يُعالج DOM مباشرةً، مما قد يُقلل حجم الملفات المنقولة ويُحسّن أداء المتصفح. ^{[ 5 ] [ 6 ] [ 7 ]} كما يُعالج المُترجم كود التطبيق، مُضيفًا استدعاءات لإعادة حساب البيانات تلقائيًا ^{[ 2 ]} وإعادة عرض عناصر واجهة المستخدم عند تعديل البيانات التي تعتمد عليها. ^{[ 8 ]} وهذا يُجنّب أيضًا العبء الزائد المرتبط بالتمثيلات الوسيطة في وقت التشغيل، مثل DOM الافتراضي ، ^{[ 9 ]} على عكس الأطر التقليدية (مثل React و Vue ) التي تُنفّذ الجزء الأكبر من عملها في وقت التشغيل، أي في المتصفح. ^{[ 5 ] [ 8 ] [ 4 ] [ 10 ] [ 2 ] [ 9 ]}

كُتب المُترجم نفسه بلغة جافا سكريبت . ^{[ 11 ] [ 10 ]} شفرة المصدر الخاصة به مرخصة بموجب رخصة MIT ومستضافة على GitHub . ^{[ 10 ]} من بين مكتبات الواجهة الأمامية المماثلة، تتميز Svelte بصغر حجم حزمة البرنامج، حيث يبلغ 2 كيلوبايت فقط. ^{[ 12 ]}

إن سلف Svelte هو Ractive.js، الذي أنشأه ريتش هاريس في عام 2013. ^{[ 13 ]}

تمت كتابة الإصدار الأول من Svelte بلغة جافا سكريبت وتم إصداره في 29 نوفمبر 2016. ^{[ 14 ]} وقد اختار ريتش هاريس وزملاؤه في صحيفة الغارديان اسم Svelte . ^{[ 14 ]}

تم إصدار النسخة الثانية من Svelte في 19 أبريل 2018. وقد سعت هذه النسخة إلى تصحيح ما اعتبره القائمون على الصيانة أخطاءً في النسخة السابقة، مثل استبدال الأقواس المعقوفة المزدوجة بأقواس معقوفة مفردة. ^{[ 14 ]}

تمت كتابة الإصدار الثالث من Svelte بلغة TypeScript وتم إصداره في 21 أبريل 2019. وقد أعاد هذا الإصدار التفكير في التفاعلية من خلال استخدام المترجم لتجهيز عمليات الإسناد في الخلفية. ^{[ 2 ]}

أُعلن عن إطار عمل الويب SvelteKit في أكتوبر 2020، ودخل مرحلة تجريبية في مارس 2021. ^{[ 15 ] [ 16 ]} أُصدر الإصدار 1.0 من SvelteKit في ديسمبر 2022 بعد عامين من التطوير. ^{[ 17 ]}

صدرت النسخة الرابعة من Svelte في 22 يونيو 2023. وكانت نسخة صيانة، أصغر حجمًا وأسرع من النسخة الثالثة. ^{[ 18 ]} تضمن هذا الإصدار إعادة كتابة داخلية من TypeScript إلى JavaScript، مع إضافة تعليقات توضيحية لأنواع JSDoc . ^{[ 11 ]} أثار هذا الأمر استغرابًا لدى مجتمع المطورين، وقد أوضحه مبتكر Svelte، ريتش هاريس. ^{[ 19 ] [ 20 ]}

صدرت النسخة الخامسة من Svelte في 19 أكتوبر 2024 خلال قمة Svelte لخريف 2024، حيث قام ريتش هاريس بإطلاقها مباشرةً بحضور مطوري Svelte الآخرين. كانت Svelte 5 إعادة كتابة شاملة لـ Svelte، مع تغييرات جوهرية في مفاهيم أساسية مثل التفاعلية وإمكانية إعادة الاستخدام. ^{[ 21 ]} ميزتها الرئيسية، Runes ، أعادت صياغة طريقة تعريف واستخدام الحالة التفاعلية. Runes عبارة عن وحدات ماكرو شبيهة بالدوال تُستخدم لتعريف حالة تفاعلية، أو كود يستخدم حالات تفاعلية. يستخدم المترجم هذه Runes للإشارة إلى القيم التي قد تتغير والتي تعتمد عليها حالات أخرى أو DOM. ^{[ 22 ]} كما قدمت Svelte 5 ميزة Snippets، وهي عبارة عن "مقتطفات" من الكود قابلة لإعادة الاستخدام، تُعرّف مرة واحدة ويمكن إعادة استخدامها في أي مكان آخر في المكون. ^{[ 23 ]} واجهت Svelte 5 في البداية جدلاً واسعاً بسبب كثرة التغييرات التي طرأت عليها، وبالتالي عمليات الإهمال التي نتجت بشكل أساسي عن Runes. ومع ذلك، فقد هدأت معظم هذه الأمور منذ الإعلان الأولي عن الرونية، والتحسين الإضافي لـ Svelte 5.

كما أعلن بن ماكان في قمة Svelte لخريف 2024 عن واجهة سطر الأوامر Svelte تحت اسم حزمة sv على npm . ^{[ 24 ]}

في أوائل عام 2025، أعلن فريق Svelte عن Asynchronous Svelte، وهي مجموعة ميزات تجريبية تتمحور حول التفاعل غير المتزامن في Svelte باستخدام تعابير await . ^{[ 25 ]} اعتبارًا من أغسطس 2025، أصبحت هذه الميزة متاحة عبر خيار تجريبي للمترجم. ^{[ 26 ]} تزامن ذلك مع الإصدار التجريبي للوظائف البعيدة، وهي ميزة RPC في SvelteKit، الإطار الفوقي لـ Svelte . ^{[ 27 ]}

انضمّ المساهمون الرئيسيون الأوائل في Svelte إلى فريق Conduitry مع إصدار Svelte 1، وانضمّ Tan Li Hau في عام 2019، وانضمّ Ben McCann في عام 2020. ^{[ 14 ]} انضمّ Rich Harris وSimon Holthausen إلى Vercel للعمل على Svelte بدوام كامل في عام 2022. ^{[ 28 ]} انضمّ Dominic Gannaway إلى Vercel من الفريق الأساسي لـ React للعمل على Svelte بدوام كامل في عام 2023. ^{[ 29 ]}

يتم تعريف تطبيقات ومكونات Svelte في .svelteملفات، وهي ملفات HTML موسعة بصيغة القوالب التي تعتمد على JavaScript وتشبه JSX .

يتم الوصول إلى الميزات الأساسية لـ Svelte من خلال الرموز، التي تبدو من الناحية التركيبية كالدوال، ولكن يستخدمها المترجم كوحدات ماكرو . وتشمل هذه الرموز ما يلي:

• الرمز $stateالروني، المستخدم لإعلان قيمة حالة تفاعلية
• الرمز $derivedالروني، المستخدم للإعلان عن حالة تفاعلية مشتقة من حالة واحدة أو أكثر
• الرمز $effect، المستخدم للإعلان عن التعليمات البرمجية التي يتم إعادة تشغيلها كلما تغيرت تبعياتها

ابتداءً من Svelte 5 ، أدخل إطار العمل تحسينًا جذريًا على التفاعلية، حيث استبدل تعريفات التفاعلية السابقة `$:` برموز جديدة مثل $state`$` $derivedو`$` و` $effect$`. ^{[ 30 ]}$effect يُستخدم الرمز `$` الآن لعمليات ما بعد العرض دون تعديل الحالة، بينما يُستخدم $derivedالرمز `$` للحسابات التي تعتمد على قيم تفاعلية أخرى. يهدف هذا التغيير إلى تبسيط النموذج الذهني للتفاعلية وجعل منطق المكونات أكثر وضوحًا. ^{[ 31 ]}

بالإضافة إلى ذلك، يمكن استخدام هذه الصيغة لإنشاء قوالب في عناصر ومكونات HTML، ^{[ 32 ]} على غرار القوالب النصية في جافا سكريبت. كما يمكن استخدامها في خصائص العناصر لأغراض مثل ربط البيانات ثنائي الاتجاه ، ومستمعي الأحداث ، وتنسيق CSS . فيما يلي مثال لقائمة مهام تم إنشاؤها باستخدام Svelte:{ JavaScript code }

<script> let value = $ state ( ) ; const todos = $ state ( [ ] ); const all = $ derived ( todos.length ); const done = $ derived ( todos.filter ( todo = > todo.done ) .length ) ; function onsubmit ( e ) { e.preventDefault ( ) ; todos.push ( { text : value , done : false } ) ; e.target.reset ( ) ; } </script><span> قائمة المهام </ span > <small> مكتملة { تم}/{الكل } < / small > <br /> {#each todos as { text, done }, index} < input type = "checkbox" bind:checked = "{todos[index].done}" id = "{text} " /> < label for = " {text}" class:done > { text} </label> < button onclick = " {() = > todos.splice(index, 1)} " >حذف </ button > <br /> {/كل} < form { onsubmit } > <br /> < label for = "input" > إضافة مهمة < / label > <br /> < input type = " text " name = " input" bind:value / > </form><style> span { font - size : 20px ; font - weight : bold ; }. done { text-decoration-line : line-through ; } </ style >

قام مطورو Svelte بإنشاء SvelteKit كطريقة رسمية لبناء المشاريع باستخدام Svelte. وهو إطار عمل متكامل على نمط Next.js / Nuxt ، يقلل بشكل كبير من كمية التعليمات البرمجية المرسلة إلى المتصفح. وكان المطورون قد أنشأوا سابقًا Sapper، وهو الإصدار السابق لـ SvelteKit. ^{[ 35 ]}

يُشرف القائمون على صيانة Svelte أيضًا على عدد من التكاملات لمشاريع برمجية شائعة ضمن مؤسسة Svelte، بما في ذلك تكاملات مع Vite وRollup و Webpack وTypeScript و VS Code وأدوات مطوري Chrome و ESLint وPrettier. ^{[ 36 ]} كما أنشأت العديد من المشاريع الخارجية، مثل Storybook، تكاملات مع Svelte وSvelteKit.

اعتبارًا من يونيو 2026، فإن أحدث إصدار هو 2.67.0 .

استوحى Vue.js تصميم واجهة برمجة التطبيقات (API) ومكونات الملف الواحد من Ractive.js، وهو الإصدار السابق لـ Svelte. ^{[ 13 ]}

يحظى إطار عمل Svelte بإشادة واسعة من المطورين. فقد تصدّر التصنيف في العديد من استطلاعات رأي المطورين واسعة النطاق، واختير كأكثر إطار عمل ويب مفضل على موقع Stack Overflow لعام 2021، وإطار عمل واجهة المستخدم الأمامية الأكثر رضا من المطورين لعام 2020 وفقًا لموقع State of JS. ^{[ 37 ] [ 38 ]}

تُظهر استطلاعات الرأي الحديثة استمرار رضا المطورين عن Svelte، حيث حافظ استطلاع حالة جافا سكريبت لعام 2024 على مكانته بين أكثر أطر عمل الواجهة الأمامية شهرةً. ^{[ 39 ]} وأفاد استطلاع مطوري Stack Overflow لعام 2024 أن 73% من المطورين الذين استخدموا Svelte يرغبون في مواصلة العمل به، وأشار إلى أن فريق Stack Overflow نفسه استخدم Svelte لبناء موقع نتائج استطلاع المطورين لعام 2024. ^{[ 40 ]}

اعتمدت العديد من شركات ^{الإنترنت البارزة نظام Svelte ، بما في ذلك صحيفة نيويورك} تايمز ، وجوجل ، وآبل ، وسبوتيفاي ، ^وراديو فرنسا ، ^وسكوير ، وياهو ، وبايت دانس ، وراكوتين ، وبلومبيرغ ، ورويترز ، وإيكيا ، وفيسبوك ، ولوجيتك ، وبريف .

تقوم مجموعة مجتمعية، تتألف في الغالب من غير القائمين على الصيانة، تُعرف باسم جمعية Svelte، بتنظيم مؤتمر Svelte Summit، وكتابة نشرة إخبارية خاصة بـ Svelte، واستضافة بودكاست Svelte، واستضافة دليل لأدوات Svelte ومكوناتها وقوالبها. ^{[ 45 ]}

• مكتبة جافا سكريبت
• مقارنة بين أطر عمل الويب القائمة على جافا سكريبت

• الموقع الرسمي