‏lift-html: وب‌کامپوننت‌های خیلی سبک برای HTML سمت سرور

lift-html یه کتابخونهٔ ریز برای ساختن HTML Web Components هست؛ یعنی کامپوننت‌هایی که به جای اینکه HTML رو سمت کلاینت بسازن یا hydrate کنن، HTMLی که از قبل روی صفحه هست رو فقط تقویت می‌کنن. نویسنده می‌گه این روش برای کسایی که فقط با کتابخونه‌های isomorphic مثل React، Vue یا Svelte کار کردن تازه‌ست، ولی برای کسایی که با Rails، Django یا Laravel کار کردن آشناست: کلی HTML و CSS می‌نویسی و چندتا تگ اسکریپت این‌ور اون‌ور می‌ذاری.

پکیج‌ها لایه‌لایه‌ان. @lift-html/tiny حدود ۱۵۰ بایته و type safety برای تعریف custom elementها می‌ده. نویسنده می‌گه تست کرده و همهٔ وب‌کامپوننت‌های سایت Astro رو می‌شه باهاش ساخت. @lift-html/core زیر ۶۰۰ بایته و HMR (یعنی جایگزینی کد بدون رفرش صفحه)، formAssociated و observedAttributes رو پشتیبانی می‌کنه. به جای constructor و connectedCallback و بقیهٔ lifecycleها، فقط دوتا callback داری: init و dispose.

بعدش افزونه‌های اختیاری و tree-shakeable هست. مثلاً @lift-html/incentive یه API شبیه Hotwire Stimulus برای کار با targetهای داخل کامپوننت می‌ده و @lift-html/solid اجازه می‌ده تو کامپوننت از createSignal و createEffect استفاده کنی. مثال دکمهٔ شمارنده با نسخهٔ solid حدود 3.41kb gzip می‌شه و با نسخهٔ core حدود 563 بایت.

نویسنده دو جا عمداً از روال معمول وب‌کامپوننت‌ها جدا شده. اول اینکه از class استفاده نمی‌کنه، چون به گفتهٔ اون class کد رو بین property و getter و callback و constructor پخش می‌کنه و تنها راه اشتراک منطق Mixinه. با تابع می‌شه نوشت const thing = myThing(this)؛ همون استدلالی که React برای معرفی hooks آورد. دوم اینکه می‌شه یه کامپوننت رو چند بار ثبت کرد و آخرین پیاده‌سازی برنده‌ست، که برای HMR لازمه. فقط observedAttributes و formAssociated رو نمی‌شه بعداً عوض کرد.

نتیجه اینه که کد تقریباً عین وب‌کامپوننت vanilla هست، فقط بدون super و this. اضافه. این تکه از مثال ThemeToggle سایت Astro هست که با lift-html بازنویسی شده:

liftHtml("theme-toggle", {
  init() {
    const button = this.querySelector('button')!;
    button.addEventListener('click', () => setTheme(!isDark()));
    setTheme(isDark());
  }
});

نویسنده توضیح می‌ده چرا init به جای constructor اومده: دسترسی به DOM داخل constructor کار درستی نیست. این کد سمت سرور هم امنه چون به HTMLElement سراسری و customElements.define ارجاع نمی‌ده. lift-html هیچ‌کدوم از کارهای فریم‌ورک مثل templating، state management یا مدیریت assetها رو برعهده نمی‌گیره؛ فرضش اینه که بک‌اند شما markup رو می‌سازه و این کتابخونه فقط تعامل اضافه می‌کنه. Shadow DOM هم داخلی نیست ولی می‌شه تو init با this.attachShadow اضافه‌ش کرد.

نکات کلیدی:

• @lift-html/tiny حدود ۱۵۰ بایت و @lift-html/core زیر ۶۰۰ بایت حجم دارن.
• به جای چندتا lifecycle callback، فقط init و dispose داری و class هم لازم نیست.
• ثبت دوبارهٔ یه کامپوننت مجازه و آخرین نسخه برنده‌ست، ولی observedAttributes و formAssociated عوض نمی‌شن.
• @lift-html/solid امکان استفاده از createSignal و createEffect رو داخل کامپوننت می‌ده.
• کد liftHtml به‌صورت public domain منتشر شده و می‌شه مستقیم تو پروژه vendor کرد.