‏Elena: کتابخانه‌ای سبک برای ساخت Web Component

Elena یه کتابخانه‌ی کوچیک و بدون وابستگیه که روی استانداردهای بومی مرورگر — یعنی Custom Elements — بنا شده. ایده‌ی اصلیش اینه که برای ساخت کامپوننت لازم نیست همه چیز رو به جاوااسکریپت بسپاری؛ اول HTML و CSS لود می‌شن، بعد جاوااسکریپت به‌صورت پیشرونده (Progressive Enhancement) روشون سوار می‌شه.

این کتابخانه توسط Arielle Salminen بعد از حدود یه دهه کار روی Design Systemهای سازمانی ساخته شده. دردهای تکراری که انگیزه‌ی ساختش بودن آشنان: مشکلات دسترس‌پذیری (Accessibility)، محدودیت‌های رندر سمت سرور (SSR)، پرش طرح‌بندی (Layout Shift)، وابستگی زیاد به جاوااسکریپت کلاینت، و ناسازگاری با ابزارهایی مثل Analytics.

Elena به‌خصوص برای تیم‌هایی مناسبه که می‌خوان یه کامپوننت‌لایبرری بسازن که روی چند فریم‌ورک مختلف — مثل React، Next.js، Vue و Angular — کار کنه. مدیریت sync کردن prop/attribute بین فریم‌ورک‌ها، event delegation و سازگاری با فریم‌ورک‌ها رو Elena به عهده می‌گیره.

یه کامپوننت ساده در Elena اینطوری تعریف می‌شه:

import { Elena } from "@elenajs/core";

export default class Stack extends Elena(HTMLElement) {
  static tagName = "elena-stack";
  static props = ["direction"];
  direction = "column";
}

Stack.define();

بعد از این تعریف، می‌تونی از مستقیم توی HTML استفاده کنی و استایل‌دهیش رو هم با @scope در CSS مدیریت کنی — بدون هیچ Shadow DOM یا workaround پیچیده‌ای.

ویژگی‌های کلیدی Elena:

• حجم فشرده‌ی ۲.۹ کیلوبایت، بدون هیچ dependency خارجی
• رندر HTML و CSS قبل از بارگذاری جاوااسکریپت (Progressive Enhancement)
• پشتیبانی کامل از SSR بدون تنظیمات پیچیده
• دسترس‌پذیری بهتر به‌خاطر استفاده از HTML معنایی (Semantic HTML) به‌جای Shadow DOM
• سه مدل کامپوننت: Composite (که محتوای داخلش رو بهبود می‌ده)، Primitive (که HTML خودش رو رندر می‌کنه) و Declarative (ترکیبی از هر دو با Declarative Shadow DOM)

نکات کلیدی:

• Elena یه کتابخانه‌ی ۲.۹ کیلوبایتیه برای ساخت Web Componentهای پیشرونده
• اول HTML و CSS لود می‌شن، جاوااسکریپت بعداً اضافه می‌شه
• بدون Shadow DOM کار می‌کنه و دسترس‌پذیری بهتری داره
• با React، Vue، Angular، Next.js و بقیه سازگاره
• بدون هیچ dependency خارجی، کاملاً بر پایه استانداردهای بومی مرورگر