📋 محتويات الصفحة
📖 الوصف
Stencil هو أداة مُجمّعة من فريق Ionic لتحويل المكونات المكتوبة بأسلوب مشابه لـ React (JSX + TypeScript) إلى Web Components قياسية. الهدف هو بناء مكونات قابلة لإعادة الاستخدام تعمل في أي إطار عمل أو حتى بدون إطار عمل. Stencil ليس إطار عمل في حد ذاته، بل هو أداة بناء تنتج مكونات HTML مخصصة (Custom El...
🎯 يستخدم في
مجالات استخدام هذه الأداة
بناء مكتبات مكونات قابلة للمشاركة
تطوير مكونات تعمل في إطارات متعددة
Ionic Framework (مبني بـ Stencil)
تصميم الأنظمة (Design Systems)
✨ المميزات
أبرز مميزات هذه الأداة
ينتج Web Components قياسية
يعمل مع أي إطار عمل أو بدونه
JSX و TypeScript مدمج
Lazy-loading تلقائي
حجم صغير جداً للمكونات المنتجة
اختبارات snapshots مدمجة
⚠️ العيوب
نقاط يجب مراعاتها
ليس حل كامل للتطبيق (لا routing أو state management)
أداء أقل من الحلول الأصلية
مجتمع أصغر
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
import { Component, Prop, State, h } from '@stencil/core';
@Component({
tag: 'my-counter',
styleUrl: 'my-counter.css',
shadow: true,
})
export class MyCounter {
@Prop() initialCount: number = 0;
@State() count: number;
componentWillLoad() {
this.count = this.initialCount;
}
increment() {
this.count++;
}
render() {
return (
<div>
<p>العدد: {this.count}</p>
<button onClick={() => this.increment()}>
زيادة
</button>
</div>
);
}
}📚 أدوات أخرى في Frameworks
قد يعجبك أيضاً
Alpine.js
⭐إطار عمل خفيف للتفاعل (Minimal JavaScript Framework)
Angular
⭐إطار عمل شامل (Full-Featured Framework)
Ember.js
إطار عمل شامل لتطبيقات الويب (Full-Featured Web Framework)
Lit
⭐مكتبة Web Components (Library for Building Web Components)
Marko
إطار عمل خادم أولاً (Server-First Framework)
Mithril
إطار عمل خفيف (Lightweight Frontend Framework)