‏minne: وب‌کامپوننت ساده با سیگنال

minne یه فریم‌ورک سبک برای ساخت وب‌کامپوننته که روی lighterhtml و @preact/signals-core سواره. تو مستندات پروژه اومده که هدفش اینه تقریباً همون امکانات Lit رو بدون دکوریتور و با یه API ساده‌تر بده؛ حتی بدون مرحلهٔ بیلد و با یه ایمپورت مستقیم از CDN هم راه می‌افته.

مدل کامپوننت سرراسته: کلاست رو از Component ارث می‌بری، تو render() یه تمپلیت با تگ html برمی‌گردونی و آخرش با define اسم تگ HTML رو ثبت می‌کنی. واکنش‌گرایی هم کامل روی سیگنال‌های Preact بنا شده؛ هر سیگنالی که موقع رندر با .value خونده بشه، تغییرش رندر دوبارهٔ کامپوننت رو راه می‌ندازه.

class MyComponent extends Component {
  counter = signal(0);

  render() {
    return html`
      <div>Counter: ${this.counter.value}</div>
      <button onclick=${() => this.counter.value++}>+</button>
    `;
  }
}

همین وابستگی به سیگنال یه نکتهٔ ظریف هم داره: برای مقدارهای غیراولیه باید مرجع رو بشکنی. push روی آرایه‌ای که داخل سیگنال نشسته هیچ به‌روزرسانی‌ای راه نمی‌ندازه و باید یه آرایهٔ تازه جاش بذاری. computed و effect و batched و untracked هم همگی در دسترسن.

بقیهٔ امکانات هم همین‌قدر کم‌دنگ‌وفنگن: shadow root پیش‌فرض ساخته می‌شه ولی با static shadowRoot تنظیم‌شدنی یا کلاً خاموش‌شدنیه، attribute و booleanAttr و converter اتریبیوت‌ها رو واکنشی می‌کنن، css استایل رو سوار می‌کنه و addDestroyer کار تمیزکاری موقع جدا شدن از DOM رو راحت می‌کنه. برای وقتی که یه کامپوننت بیرونی مستقیم روی پراپرتی مقدار می‌ذاره و واکنش‌گرایی از دست می‌ره هم publicReactive() گذاشته شده. کامپوننت‌های تابعی هم هست، ولی نویسنده خودش تأکید کرده که هنوز آزمایشیه.

نکات کلیدی:

• فریم‌ورک وب‌کامپوننت روی lighterhtml و سیگنال‌های Preact، بدون دکوریتور و بدون مرحلهٔ بیلد
• رندر با ارث‌بری از Component و برگردوندن تمپلیت html، ثبت تگ با define
• واکنش‌گرایی وابسته به خوندن .value تو تمپلیت؛ برای آرایه و آبجکت باید مرجع عوض بشه
• attribute، booleanAttr و converter برای اتریبیوت‌های واکنشی و بازتابشون تو DOM
• publicReactive() جلوی از دست رفتن واکنش‌گرایی موقع ست شدن پراپرتی از بیرون رو می‌گیره
• کامپوننت‌های تابعی فعلاً آزمایشی‌ان