כיצד לבנות רכיב אינטרנט באמצעות Stencil.js

רכיבי אינטרנט הם קבוצה של טכנולוגיות המאפשרות לך ליצור אלמנטים הניתנים לשימוש חוזר ולהשתמש בהם מחדש ביישומי אינטרנט שונים.

Stencil.js הוא מהדר שיוצר רכיבי אינטרנט התואמים לכל הדפדפנים המודרניים. הוא מספק כלים וממשקי API שיעזרו לך לבנות רכיבי אינטרנט מהירים, יעילים וניתנים להרחבה.

תחילת העבודה עם Stencil.js

כדי להתחיל עם Stencil.js, תחילה עליך לאתחל אותו במחשב שלך.

עשה זאת על ידי הפעלת הפקודה הבאה במסוף node.js שלך:

npm init סטנסיל

לאחר הפעלת הפקודה, תופיע הנחיה על המסך שלך כדי לבחור באיזה פרויקט ברצונך להתחיל:

כדי להמשיך, בחר באפשרות הרכיב, הזן את שם הפרויקט שלך ואשר את בחירתך:

לאחר מכן, עבור לספריית הפרויקט שלך והתקן את התלות שלך על ידי הפעלת הפקודות הבאות:

פרויקט סטנסיל ראשון
npm להתקין

יצירת רכיב אינטרנט חדש

כדי ליצור רכיב אינטרנט חדש ב-Stencil.js, צור נתיב תיקיה כמו src/רכיבים. תיקיית הרכיבים תכיל קובץ TypeScript הקרוי על שם הרכיב שלך, בשם Stencil.js משתמש בשפת TypeScript ו-JSX לפיתוח רכיבים. התיקיה תכיל גם קובץ CSS המכיל את הסגנון של הרכיב שלך.

לדוגמה, אם אתה רוצה לבנות רכיב בשם "my-button", צור קובץ בשם my-button.tsx וקובץ CSS שנקרא my-button.css. בתוך ה my-button.tsx קובץ, הגדר את הרכיב שלך באמצעות ה-API של Stencil.js:

יְבוּא { רכיב, h } מ'@stencil/core';
@רְכִיב({
 תָג: 'הכפתור שלי',
 styleUrl: 'my-button.css',
 צֵל: נָכוֹן,
})
יְצוּאמעמדMyButton{
 render() {
לַחֲזוֹר (
לחץ על אני</button>
 );
 }
}

קוד זה מייבא את רְכִיב ו ח פונקציות מ-Stencil.js. ה רְכִיב הפונקציה מגדירה את הרכיב, בעוד ה- ח פוּנקצִיָה יוצר את הסימון שלו באמצעות HTML.

הגדר את הרכיב שלך באמצעות ה @רְכִיב דקורטור, שלוקח חפץ בעל שלוש תכונות: תָג, styleUrl, ו צֵל.

ה תָג המאפיין מכיל את שם התג של הרכיב. ה styleUrl מאפיין מציין את קובץ ה-CSS לעיצוב האלמנט המותאם אישית. לבסוף, ה צֵל מאפיין הוא ערך בוליאני המציין אם הרכיב ישתמש ב-Shadow DOM כדי להקיף את הסגנונות וההתנהגות של האלמנט המותאם אישית. בשיטת הרנדור, אתה יוצר אלמנט כפתור.

בנוסף ל styleUrl מאפיין, אתה יכול להשתמש בשני מאפיינים נוספים כדי לסגנן את הרכיב שלך: סִגְנוֹן ו styleUrls.

ה סִגְנוֹן מאפיין מגדיר סגנונות מוטבעים עבור הרכיב. זה דורש ערך מחרוזת שמייצג את סגנונות ה-CSS עבור הרכיב:

יְבוּא { רכיב, h } מ'@stencil/core';
@רְכִיב({
 תָג: 'הכפתור שלי',
 סִגְנוֹן: `
 כפתור {
 ריפוד: 1rem 0.5rem;
 רדיוס הגבול: 12px;
 font-family: cursive;
 גבול: אין;
 צבע: #e2e2e2;
 צבע רקע: #333333;
 מודגש;
 }
`,
 צֵל: נָכוֹן,
})
יְצוּאמעמדMyButton{
 render() {
לַחֲזוֹר (
לחץ על אני</button>
 );
 }
}

ה styleUrls מאפיין מציין מספר קובצי CSS חיצוניים לעיצוב הרכיב. זה דורש מערך של ערכי מחרוזת המייצגים את הנתיבים לקבצי ה-CSS:

יְבוּא { רכיב, h } מ'@stencil/core';
@רְכִיב({
 תָג: 'הכפתור שלי',
 סגנון כתובות אתרים: ['my-button.css', 'another-button.css'],
 צֵל: נָכוֹן,
})
יְצוּאמעמדMyButton{
 render() {
לַחֲזוֹר (
לחץ על אני</button>
 );
 }
}

עיבוד רכיב האינטרנט

לאחר שיצרת את רכיב האינטרנט שלך, תוכל לעבד אותו בקובץ HTML על ידי הוספת תג אלמנט מותאם אישית. כך תוכל לכלול את רכיב ה-my-button:

html>
<htmlדיר="ltr"lang="he">
<רֹאשׁ>
<מטאערכת תווים="utf-8" />
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<קישורhref=""rel="גיליון סגנונות">
<כותרת>סטנסיל רכיב מתנעכותרת>
<תַסרִיטסוּג="מודול"src="/build/first-stencil-project.esm.js">תַסרִיט>
<תַסרִיטnomodulesrc="/build/first-stencil-project.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<כפתור שלי>כפתור שלי>
גוּף>
html>

כעת אתה יכול ליצור רכיבי אינטרנט באמצעות Stencil.js

Stencil.js הוא כלי רב עוצמה לבניית רכיבי אינטרנט מהירים, יעילים וניתנים להרחבה. ה-API והכלים שלו מקלים על יצירה וניהול של רכיבי אינטרנט, והתאימות שלו לכל הדפדפנים המודרניים מבטיחה שהרכיבים שלך יעבדו היטב על פני יישומי אינטרנט שונים.

ככל שרכיבי אינטרנט הופכים פופולריים יותר ויותר, Stencil.js היא מסגרת שכדאי לקחת בחשבון בעת ​​בניית אלמנטים לשימוש חוזר עבור האינטרנט.