كيفية بناء مكون ويب باستخدام Stencil.js

مكونات الويب هي مجموعة من التقنيات التي تتيح لك إنشاء عناصر قابلة لإعادة الاستخدام وإعادة استخدامها عبر تطبيقات الويب المختلفة.

Stencil.js هو مترجم يقوم بإنشاء مكونات ويب متوافقة مع جميع المتصفحات الحديثة. يوفر أدوات وواجهات برمجة تطبيقات لمساعدتك في إنشاء مكونات ويب سريعة وفعالة وقابلة للتطوير.

الشروع في العمل مع Stencil.js

لبدء استخدام Stencil.js ، تحتاج أولاً إلى تهيئته على جهاز الكمبيوتر الخاص بك.

قم بذلك عن طريق تشغيل الأمر التالي في محطة node.js الخاصة بك:

استنسل الحرف الأول npm

بعد تشغيل الأمر ، سيظهر موجه على شاشتك لتحديد المشروع الذي تريد أن تبدأ به:

للمتابعة ، حدد خيار المكون ، وأدخل اسم مشروعك ، وأكد اختيارك:

بعد ذلك ، غيّر إلى دليل مشروعك وثبّت تبعياتك عن طريق تشغيل الأوامر التالية:

مشروع الاستنسل الأول على القرص المضغوط
تثبيت npm

إنشاء مكون ويب جديد

لإنشاء مكون ويب جديد في Stencil.js ، قم بإنشاء مسار مجلد مثل src / المكونات. سيحتوي مجلد المكونات على ملف TypeScript المسمى باسم المكون الخاص بك ، مثل Stencil.js

يستخدم لغة TypeScript و JSX لتطوير المكونات. سيحتوي المجلد أيضًا على ملف CSS يحتوي على نمط المكون الخاص بك.

على سبيل المثال ، إذا كنت تريد إنشاء مكون يسمى "my-button" ، فأنشئ ملفًا يسمى my-button.tsx وملف CSS يسمى my-button.css. في ال my-button.tsx ملف ، حدد المكون الخاص بك باستخدام Stencil.js API:

يستورد {المكون ، h} من"@ stencil / core";
@عنصر({
 بطاقة شعار: "زر بلدي",
 النمط "my-button.css",
 ظل: حقيقي,
})
يصدّرفصلMyButton{
 يجعل() {
يعود (
انقر فوق لي </button>
 );
 }
}

يستورد هذا الرمز ملف عنصر و ح وظائف من Stencil.js. ال عنصر تحدد الوظيفة المكون ، بينما ح وظيفة ينشئ الترميز الخاص به باستخدام HTML.

حدد المكون الخاص بك باستخدام ملف @عنصر المصمم ، الذي يأخذ شيئًا له ثلاث خصائص: بطاقة شعار, النمط، و ظل.

ال بطاقة شعار تحتوي الخاصية على اسم علامة المكون. ال النمط تحدد الخاصية ملف CSS لتصميم العنصر المخصص. أخيرًا ، ظل الخاصية هي قيمة منطقية تشير إلى ما إذا كان المكون سيستخدم Shadow DOM لتغليف أنماط وسلوك العنصر المخصص. في طريقة العرض ، تقوم بإنشاء عنصر زر.

بالإضافة الى النمط الخاصية ، يمكنك استخدام خاصيتين أخريين لتصميم المكون الخاص بك: أسلوب و النمط.

ال أسلوب تحدد الخاصية الأنماط المضمنة للمكون. يأخذ قيمة سلسلة تمثل أنماط CSS للمكون:

يستورد {المكون ، h} من"@ stencil / core";
@عنصر({
 بطاقة شعار: "زر بلدي",
 أسلوب: `
 زر {
 حشوة: 1rem 0.5ريم.
 نصف قطر الحد: 12مقصف ؛
 عائلة الخطوط: مخطوطة ؛
 الحدود: لا شيء ؛
 اللون: # e2e2e2 ؛
 لون الخلفية: #333333;
 وزن الخط: عريض ؛
 }
`,
 ظل: حقيقي,
})
يصدّرفصلMyButton{
 يجعل() {
يعود (
انقر فوق لي </button>
 );
 }
}

ال النمط تحدد الخاصية ملفات CSS خارجية متعددة لتصميم المكون. يأخذ مصفوفة من قيم السلسلة التي تمثل المسارات إلى ملفات CSS:

يستورد {المكون ، h} من"@ stencil / core";
@عنصر({
 بطاقة شعار: "زر بلدي",
 styleUrls: ["my-button.css", "another-button.css"],
 ظل: حقيقي,
})
يصدّرفصلMyButton{
 يجعل() {
يعود (
انقر فوق لي </button>
 );
 }
}

تقديم مكون الويب

بمجرد إنشاء مكون الويب الخاص بك ، يمكنك عرضه في ملف HTML عن طريق إضافة علامة عنصر مخصصة. إليك كيفية تضمين مكون my-button:

لغة البرمجة>
<لغة البرمجةدير="لتر"لانج="ar">
<رأس>
<ميتامحارف="utf-8" />
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0 ، الحد الأدنى للمقياس = 1.0 ، الحد الأقصى للمقياس = 5.0" />
<وصلةhref=""rel="ورقة الأنماط">
<عنوان>كاتب مكون الاستنسلعنوان>
<النصييكتب="وحدة"src="/build/first-stencil-project.esm.js">النصي>
<النصينومودولsrc="/build/first-stencil-project.js">النصي>
رأس>
<جسم>
<زر بلدي>زر بلدي>
جسم>
لغة البرمجة>

يمكنك الآن إنشاء مكونات ويب باستخدام Stencil.js

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

نظرًا لأن مكونات الويب أصبحت أكثر شيوعًا ، فإن Stencil.js هو إطار عمل يجب أن تضعه في الاعتبار عند إنشاء عناصر قابلة لإعادة الاستخدام للويب.