الطريقة التقليدية لكتابة مكونات الويب ليست صديقة جدًا لـ SSR (عرض جانب الخادم). في هذا المنشور، أعرض لك كيف يمكنك إنشاء مكونات ويب تفاعلية تعمل مع SSR ومع أي إطار عمل JavaScript (Vue، React، Svelte، Solid، Brisa) أو Vanilla JS.

• مقدمة
• كتابة مكون ويب باستخدام Brisa
• بناء مكون الويب
• تحميل مكون الويب في مشروع Vanilla JS
• SSR لمكون الويب
• أخبرني المزيد عن بريسا... من فضلك...
• ملاحظة لمنشئي مكتبة مكونات الويب
• مثال
• خاتمة

مقدمة

سوف نستخدم برنامج Brisa Web Component Compiler. Brisa هو إطار عمل ويب، بالإضافة إلى كونه مشابهًا لأطر عمل أخرى مثل Next.js أو Nuxt.js، فإنه يسمح لك أيضًا ببناء مكونات ويب تفاعلية تعمل مع إشارات التفاعل، مع JSX ومع SSR.

من أجل القيام بذلك، ما عليك سوى معرفة بناء جملة Brisa عند كتابة مكونات الويب. لم يتم طرح Brisa للعامة بعد، حيث أنها موجودة حاليًا عند

95.48% من خريطة الطريق v0.1، ولكننا نقدر أنها ستكون جاهزة للإطلاق خلال شهر واحد وسيتمكن الجميع من الوصول إليها. ومع ذلك، حتى لو لم يكن عامًا على الإطلاق، فيمكنك بالفعل استخدامه لإنشاء مكتبات مكونات الويب الخاصة بك.

كتابة مكون ويب باستخدام Brisa

كمثال، سنقوم بكتابة مكون ويب للعداد، كما هو الحال دائمًا، المثال الكلاسيكي.

counter-wc.tsx

نوع الاستيراد { WebContext } من "brisa"؛ تصدير الوظيفة الافتراضية CounterWC( { البداية = 0، اللون = "#2cebcf" }: { البداية؟: الرقم؛ اللون؟: سلسلة }، { الحالة، CSS }: WebContext، ) { عدد ثابت = حالة (بدء) ؛ CSS` زر { لون الخلفية: ${color}; اللون: أبيض؛ الحدود: لا شيء؛ نصف قطر الحدود: 5 بكسل؛ الحشو: 10 بكسل؛ الهامش: 5 بكسل؛ المؤشر: المؤشر؛ } شعبة { العرض: فليكس؛ ضبط المحتوى: مركز؛ محاذاة العناصر: مركز؛ } `; يعود ( count.value }> {عدد.القيمة} count.value--}>- ); }

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

يستخدم Brisa اسم الملفات لمعرفة المحدد، وهنا سيكون المحدد مضادًا للمرحاض.

نصيحة: على الرغم من أن Brisa لم يتم نشره للعامة بعد، إلا أنه يمكنك استخدام أنواع TypeScript لإرشادك حول كيفية كتابة مكونات الويب.

في المثال أعلاه، يتم استخدام الحالة لإنشاء إشارة ثم باستخدام القيمة . تجعلها تفاعلية داخل JSX. تعد الدعائم أيضًا إشارات خاصة، نظرًا لأنها للقراءة فقط، لا يتم استخدام القيمة . لتسهيل استخدامها ولتحديد القيم الافتراضية بسهولة أكبر، ويتم ذلك من خلال تحسينات وقت البناء، على غرار React لتعمل كـ إذا كانوا يستخدمون الإشارات ولكن العكس.

يسمح قالب CSS الحرفي له بالتفاعل مع التغييرات التفاعلية في هذه الحالة لخاصية اللون. يعد قالب CSS الحرفي خارج هذا المثال مفيدًا جدًا لإنشاء رسوم متحركة تفاعلية بسهولة. من المهم أن تتذكر أن Web Components تعمل مع Shadow DOM، لذلك لا يؤثر CSS على بقية الصفحة.

بناء مكون الويب

لإنشاء مكون الويب، تحتاج إلى تشغيل الأمر التالي:

brisa build -w counter-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

سيقوم هذا الأمر بإنشاء ملفين:

[ انتظر ] ؟ بناء مكوناتك المستقلة... [ معلومات ] [معلومات] المكونات المستقلة: [ معلومات ] - build/counter-wc.client.js (670.00 بايت) [ معلومات ] - build/counter-wc.server.js (842.00 B) [ معلومات ] [ معلومات ] ✨ تم إنجازه في 42.20 مللي ثانية.

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

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

(البايتات التي تخرج بدون gzip).

إذن، كيف يمكننا تحميل مكون الويب؟

تحميل مكون الويب في مشروع Vanilla JS

للقيام بذلك، تحتاج إلى إضافة خريطة الاستيراد في HTML باستخدام brisa/client ثم استيراد ملف counter-wc.client.js:

{ "الواردات": { "brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js" } } الرأس> الجسم>

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

هنا فقط سيتم نقل جزء العرض في كل ملف مكون ويب، بينما سيستخدمون جميعًا نفس غلاف Brisa المحدد في خريطة الاستيراد، وهو المسؤول عن إنشاء مكون الويب مع الإشارات وDOM الظل.

SSR لمكون الويب

يمكن الآن إجراء SSR لمكون الويب بفضل Declarative Shadow DOM. لقد تم بالفعل تجميع الملف counter-wc.server.js باستخدام هذا السلوك، لذا ما عليك سوى استيراده على الخادم الخاص بك وعرضه بتنسيق HTML وتكييفه مع إطار عمل الخادم الخاص بك.

هذا مثال على Bun.js أو Node.js دون استخدام JSX:

ssr.js

استيراد { renderToString } من "brisa/server"; استيراد {jsx} من "brisa/jsx-runtime"؛ استيراد CustomCounter من "counter-wc/server"؛ كونست أتش تي أم أل = ` { "الواردات": { "brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js" } } الرأس> ${await renderToString(jsx(CustomCounter, { start: 10 }))} الجسم> `; console.log(html);

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

ثم قم بتشغيل Bun Run ssr.js وسترى HTML مع مكون الويب المعروض باستخدام Declarative Shadow DOM.

أخبرني المزيد عن بريسا... من فضلك...

يتم دمج مكتبات مكونات الويب هذه مع Brisa من خلال ملف التكوين:

نوع الاستيراد { WebComponentIntegrations } من "brisa"؛ التصدير الافتراضي { "العداد المخصص": { العميل: "./path/to/web-component.client.js"، الخادم: "./path/to/web-component.server.js"، الأنواع: "./path/to/web-component.types.d.ts"، }, } يرضي WebComponentIntegrations؛

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

بهذه الطريقة، يتم دمج أنواع SSR وTypeScript تلقائيًا في مشروعك. ويمكنك استخدام مكون الويب في أي مكون خادم أو داخل مكون ويب آخر.

إذا كنت مهتمًا بمعرفة المزيد، فأنا أدعوك للاشتراك في نشرة بريسا الإخبارية لتلقي آخر الأخبار والتحديثات عن بريسا. ونقدر أنه بحلول نهاية سبتمبر سيكون جاهزًا للإطلاق.

ملاحظة لمنشئي مكتبة مكونات الويب

نحن نشجعك على تجربة Brisa لإنشاء مكتبات مكونات الويب الخاصة بك. إذا وضعت شارة "صنع مع بريسا"، فسنضع رابطًا لمكتبتك على صفحة بريسا.

أ>

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

مثال

إذا كنت تريد رؤية مستودع GitHub الخاص بمثال العداد الذي شرحناه في هذه المقالة، فيمكنك إلقاء نظرة عليه واستخدامه كمرجع لإبداعاتك الخاصة:

https://github.com/aralroca/counter-wc

خاتمة

في هذا المنشور، رأينا كيفية إنشاء مكونات ويب تفاعلية تعمل مع SSR ومع أي إطار عمل JavaScript أو Vanilla JS. لقد استخدمنا Brisa لبناء مكون الويب ورأينا كيفية تحميله في مشروع Vanilla JS وكيفية إجراء SSR به.

أتمنى أن تكون قد استمتعت بهذا المنشور وأنك تعلمت شيئًا جديدًا. إذا كان لديك أي أسئلة، فلا تتردد في طرحها علي في التعليقات أدناه. سأكون سعيدًا بمساعدتك.

سعيد بالبرمجة واستمتع ببقية الصيف! ??