בניית ספריית רכיבי Web עם Stencil

הערה: כאשר React, Vue ו-Angular דורשות כל אחת ספריית UI משלהן, הקוד משוכפל — צוותים מבזבזים עד 30% מהזמן בכתיבה מחדש של אותם כפתורים ומודאלים. פתרנו בעיה זו עם Stencil: קומפיילר שמייצר רכיבי Web Components מקוריים ו-wrappers לכל הפריימוורקים הפופולריים מקוד TypeScript יחיד. במשך 5 שנים, יצרנו יותר מ-20 ספריות UI, כולל פרויקט אפליקציית פינטק עם 15 רכיבים — בשימוש ב-React, Vue ו-Angular ללא שינויים, וקיצרנו את זמן יישום התכונות החדשות ב-40%. דוגמה נוספת: ערכת UI לפלטפורמת מסחר אלקטרוני עם 25 רכיבים. לאחר אינטגרציה לשלושה שירותים, הצוות חצה את זמן אישור הממשק. כל רכיב מכוסה בבדיקות יחידה ו-E2E, מה שמבטל באגי אינטגרציה. הלקוחות שלנו חוסכים מ-30% מתקציב פיתוח ה-UI ומקבלים ספרייה יציבה לכל מחזור חיי האפליקציה.

בעיות שאנחנו פותרים

פיצול קוד

ללא ספרייה אחידה, כל פרויקט כותב כפתורים, שדות קלט ומודאלים משלו. התוצאה היא קוד מנופח, UX לא עקבי ותחזוקה מורכבת. לפי הנתונים שלנו, חברות מבזבזות עד 30% מזמן הפיתוח על שכפול רכיבי UI, מה שמוביל לחריגה של 20–30% בתקציב.

מורכבות אינטגרציה

רכיבי Web Components מקוריים לא תמיד עובדים כראוי עם React (התפשטות אירועים, סוגי props) או Angular (קישור דו-כיווני, טפסים). Stencil מייצר wrappers ספציפיים לפריימוורק שפותרים בעיות אלה. מפתחים לא צריכים לכתוב מתאמים ידנית — זה חוסך עד שבועיים באינטגרציה הראשונית ומפחית סיכוני שגיאות.

ביצועים

Stencil מהדר רכיבים ל-Custom Elements מקוריים עם תקורה מינימלית. בניגוד ל-Lit, הוא גם יוצר builds הניתנים ל-tree-shaking ויכול לעבוד עם SSR. בבדיקות, גודל ה-bundle מופחת ב-60% בהשוואה לספריות פריימוורק מסורתיות.

איך אנחנו עושים את זה: צלילה ל-Stencil

ארכיטקטורת פרויקט

אנחנו מתחילים באתחול פרויקט Stencil. מבנה טיפוסי:

npm init stencil@latest -- --type component cd my-library && npm install 

הפרויקט מאורגן כ-monorepo עם חבילות לכל פריימוורק.

רכיב: דוגמת ui-button

אנחנו יוצרים רכיב באמצעות דקורטורים npm init stencil@latest -- --type component cd my-library && npm install , @Component, @Prop. הוא משתמש ב-TSX כמו ב-React. חשוב: הפעלת Shadow DOM (@Event) לבידוד סגנונות.

// ui-button.tsx
import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'ui-button',
  styleUrl: 'ui-button.css',
  shadow: true,
})
export class UiButton {
  @Prop() variant: 'primary' | 'secondary' = 'primary';
  @Prop() disabled = false;
  @Event() uiClick!: EventEmitter<MouseEvent>;

  render() {
    return (
      <button
        class={`btn btn--${this.variant}`}
        disabled={this.disabled}
        onClick={e => this.uiClick.emit(e)}
      >
        <slot />
      </button>
    );
  }
}

תצורה: מספר יעדי פלט

התכונה המרכזית של הכלי: קוד אחד, builds רבים. אנו מגדירים את shadow: true כדי לייצר:

• רכיבי Web Components מקוריים (dist)
• רכיבים מותאמים אישית הניתנים ל-tree-shaking (dist-custom-elements)
• wrappers ל-React
• wrappers ל-Vue
• wrappers ל-Angular

// stencil.config.ts
import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';
import { vueOutputTarget } from '@stencil/vue-output-target';
import { angularOutputTarget } from '@stencil/angular-output-target';

export const config: Config = {
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'dist-custom-elements'
    },
    reactOutputTarget({
      componentCorePackage: 'core',
      proxiesFile: '../react/src/components.ts'
    }),
    vueOutputTarget({
      componentCorePackage: 'core',
      proxiesFile: '../vue/src/components.ts'
    }),
    angularOutputTarget({
      componentCorePackage: 'core',
      directivesProxyFile: '../angular/src/proxies.ts'
    }),
    {
      type: 'docs-readme'
    },
  ],
};

לאחר הבנייה, כל חבילת פריימוורק מכילה רכיבים מוגדרים מראש עם טיפוסים. ניתן לייבא אותם כרגיל. הספרייה עובדת ב-React, Vue, Angular ואפילו ב-HTML פשוט — ללא תצורה נוספת.

תהליך עבודה

1. ניתוח — קביעת מערך הרכיבים, design tokens, דרישות נגישות (a11y).
2. עיצוב — ארכיטקטורת רכיבים, props, אירועים.
3. יישום — כתיבת רכיבים ב-Stencil, עיצוב, הוספת בדיקות (Jest + Puppeteer).
4. אינטגרציה — יצירת wrappers לפריימוורקים היעד, בדיקות בסביבות שלהם.
5. תיעוד — יצירת Storybook ותיעוד אוטומטי מ-Stencil.
6. פרסום — הגדרת CI/CD ב-GitHub Actions, פרסום חבילות npm.

מה כלול

• קוד מקור של רכיבים ב-Stencil (TypeScript, CSS)
• Builds ל-React, Vue, Angular (אם נדרש)
• בדיקות יחידה ו-E2E (Jest + Puppeteer)
• תיעוד (README, Storybook, JSDoc)
• תצורת CI/CD (GitHub Actions, פרסום npm)
• שבועיים של תמיכה חינמית לאחר סיום

לוחות זמנים

העלות מחושבת באופן אישי — תלויה במורכבות הרכיבים, מספר הפריימוורקים וצרכי הבדיקות.

למה Stencil עדיף על Lit לספריות ארגוניות?

Stencil מספק יעדי פלט מוכנים לפריימוורקים פופולריים. זה מקצר את זמן האינטגרציה פי 2–3. בנוסף, הוא מייצר תיעוד וטיפוסי TypeScript אוטומטית. הניסיון שלנו מראה שפרויקטים של Stencil דורשים 40% פחות זמן לתחזוקת תאימות בין פריימוורקים.

איך Stencil פותר Hydration ב-React?

בשימוש ב-Web Components מקוריים ב-React, מתרחשות שגיאות hydration עקב אי-התאמה בין רינדור שרת ללקוח. Stencil מייצר wrappers ל-React שמטפלים נכון באירועים ובתכונות, ומבטלים בעיות hydration.

import { UiButton } from 'my-ui-react';

function App() {
  return <UiButton variant="primary" onUiClick={e => console.log(e.detail)}>Click me</UiButton>;
}

השוואה: Stencil מול Lit

הזמינו פיתוח ספרייה סוהר. קבלו ייעוץ על ארכיטקטורה. צרו קשר להערכת פרויקט.