‏Nanotags: وب کامپوننت‌های ری‌اکتیو با کمتر از ۲.۵ کیلوبایت

Nanotags یه لایه‌ی نازک (wrapper) روی Web Components استانداردِ مرورگره که به جای اینکه چرخ رو دوباره اختراع کنه، از همون Custom Elements، DOM معمولی و CSS استفاده می‌کنه. موتور ری‌اکتیویتیش هم Nano Stores هست — یه کتابخونه‌ی فوق‌العاده سبک برای مدیریت state.

یکی از مهم‌ترین تفاوت‌هاش با ابزارهای مشابه اینه که Shadow DOM نداره. یعنی مارکاپ کامپوننت‌هات توی همون DOM اصلی صفحه میمونه و می‌تونی با CSS معمولی استایلشون بدی — بدون هیچ دردسر اضافه‌ای.

ساخت یه کامپوننت با Nanotags از یه fluent builder chain استفاده می‌کنه. مثلاً برای یه دکمه‌ی copy می‌تونی اینطوری بنویسی:

define("copy-btn")
  .withRefs((r) => ({ code: r.one("code") }))
  .setup((ctx) => {
    ctx.on(ctx.host, "click", async () => {
      await navigator.clipboard.writeText(ctx.refs.code.textContent);
      ctx.host.classList.add("active");
      setTimeout(() => ctx.host.classList.remove("active"), 1000);
    });
  });

این مثال نشون می‌ده که چطور یه ref به المان code وصل میشه، یه event listener روی کلیک تعریف میشه، و همه چیز تمیز و خوانا باقی می‌مونه.

یکی از نقاط قوت Nanotags cleanup خودکاره — وقتی کامپوننت از DOM حذف بشه، همه‌ی event listenerها، subscriptionها و bindingها به‌صورت خودکار پاک می‌شن. این یعنی دیگه نگران memory leak نیستی.

از نظر اعتبارسنجی پراپ‌ها هم می‌شه از Standard Schema استفاده کرد — یعنی کتابخونه‌هایی مثل Valibot، Zod یا ArkType مستقیماً باهاش سازگارن. کدش هم tree-shakeable هست و بخش‌های nanotags/render و nanotags/context به عنوان entry point جداگانه ارائه می‌شن.

Nanotags با رویکرد hydration-first طراحی شده — یعنی برای پروژه‌هایی که HTML رو server-side رندر می‌کنن (مثل Astro) عالیه؛ فقط همون بخش‌های تعاملی صفحه رو به‌صورت جزیره‌های کوچک (interactive islands) هیدریت می‌کنه.

نکات کلیدی:

• حجم زیر ۲.۵ کیلوبایت، بدون Shadow DOM
• ری‌اکتیویتی از طریق Nano Stores atoms
• پاک‌سازی خودکار event listenerها و subscriptionها هنگام disconnect
• سازگار با Standard Schema (Zod، Valibot، ArkType)
• مناسب پروژه‌های Astro و server-rendered با رویکرد hydration-first
• بدون نیاز به build step از طریق CDN قابل استفاده است