‏prop-for-that: چیزایی که JS می‌دونه ولی CSS نمی‌بینه

ایده‌ی اصلی اینه: یه عالمه از حالت زنده‌ی صفحه رو فقط JavaScript می‌تونه بخونه — موقعیت موس، مقدار یه اسلایدر، اندازه‌ی ویوپورت، دیده‌شدن یه المان، باتری، شبکه، سنسورها — ولی CSS هیچ دسترسی‌ای بهشون نداره. کتابخونه‌ی prop-for-that این داده‌ها رو می‌ریزه توی متغیرهای سفارشی CSS با اسم --live-* و --const-* تا استایل‌شیتت بتونه با calc() و var() معمولی بهشون واکنش نشون بده.

طرز کارش خیلی ساده‌ست. هر المانی رو با اتری‌بیوت data-props-for بایند می‌کنی و بعدش متغیرهای --live-* همون المان توی CSS در دسترسن. مثلاً یه اسلایدر می‌تونه از روی مقدار خودش رنگ بگیره، بدون اینکه حتی یه event listener یا حلقه‌ی رندر بنویسی:

input {
  background: hsl(calc(var(--live-value-pct) * 120) 80% 50%);
}

به گفته‌ی سازنده، کل کار رو CSS انجام می‌ده و سرعت هم از پایه توی طراحی لحاظ شده. همه‌ی نوشتن‌ها توی یه requestAnimationFrame در هر فریم جمع و فلاش می‌شه، موقعی که چیزی عوض نمی‌شه بیکار می‌مونه و وقتی تب مخفیه کلاً متوقفه. علاوه بر این فقط وقتی مقداری واقعاً تغییر کرده می‌نویسه و برای کل صفحه یه ResizeObserver و IntersectionObserver مشترک داره؛ منابع مربوط به هر المان هم وقتی اون المان از صفحه بیرونه متوقف می‌شن.

منابع هسته که توی خود کتابخونه ساخته شدن چهارتان: ویوپورت، اندازه‌ی المان، دیده‌شدن، و مقدار . بقیه‌ی چیزها به شکل پلاگین اختیاری و tree-shakeable اضافه می‌شن و بیست‌تا بیشترن — مثل موقعیت موس، باتری، شبکه، فوکوس صفحه، FPS، سرعت اسکرول، جهت‌گیری دستگاه، موقعیت جغرافیایی و حتی استخراج رنگ غالب از عکس و ویدیو. تو حالت auto هر پلاگین درست همون لحظه که یه اتری‌بیوت data-props-for بهش نیاز پیدا می‌کنه، روی همون نقطه لود می‌شه.

چند نقطه‌ی ورود داره: prop-for-that/auto که بدون کانفیگ و به‌شکل اعلانی همه‌ی المان‌های data-props-for رو بایند می‌کنه، prop-for-that برای API دستی با propsFor() و register()، و prop-for-that/head برای ثابت‌های FOUC-safe که قبل از اولین پینت نوشته می‌شن. نکته‌ی مهم اینه که auto فقط light DOM رو می‌بینه نه shadow root ها — اونا رو باید با propsFor(el, …) بایند کنی.

نکات کلیدی:

• JS هرچی می‌دونه رو می‌ریزه توی متغیرهای CSS با اسم --live-* و --const-* تا با calc() و var() ازشون استفاده کنی.
• بدون event listener و حلقه‌ی رندر: یه بار بایند می‌کنی و بقیه‌ش رو CSS انجام می‌ده.
• همه‌ی نوشتن‌ها توی یه setProperty در هر فریم جمع می‌شه، با دیف کردن و observer مشترک برای کل صفحه.
• چهار منبع هسته توکار + بیست‌تای بیشتر به‌شکل پلاگین اختیاری که موقع نیاز لود می‌شن.
• صفر وابستگی، TypeScript، خروجی ESM و CJS، و SSR-safe.