‏ForesightJS v4.0 با پکیج‌های رسمی ری‌اکت و ویو

ForesightJS یه کتابخونه‌ست که با پیش‌بینی مسیر حرکت موس کاربر، منابع (مثل صفحه یا داده) رو زودتر از اینکه کاربر واقعاً کلیک کنه پیش‌بارگذاری می‌کنه. هدف اصلی نسخه ۴ اینه که استفاده ازش با فریمورک‌های محبوب خیلی راحت‌تر بشه. تا حالا داکیومنت بهت هوک و composable و directive آماده می‌داد که باید تو پروژهٔ خودت کپیشون می‌کردی؛ نسخه ۴ همهٔ اینا رو با دو تا پکیج wrapper رسمی جایگزین می‌کنه: @foresightjs/react و @foresightjs/vue. یکیشون رو نصب می‌کنی، فایل‌های کپی‌شده رو پاک می‌کنی و کارت تمومه.

برای اینکه bindingهای reactive ممکن بشه، مدل دادهٔ اصلی عنصرها از پایه بازنویسی شده. حالا ForesightElementData تبدیل شده به ForesightElementState؛ یه snapshot تخت و immutable که به‌جای تغییر مستقیم، رفرنسش با هر تغییر جایگزین می‌شه. همین باعث می‌شه مستقیم به هر سیستم reactivity وصل بشه. همین primitiveها رو می‌تونی برای ساختن binding مخصوص فریمورک خودت (Angular، Svelte، Solid) هم استفاده کنی.

تو خود هستهٔ js.foresight چند تغییر مهم اومده. حالا register() علاوه بر state عنصر، سه تا چیز دیگه هم برمی‌گردونه: unregister، subscribe و getSnapshot. یه متد جدید به اسم updateElementOptions() اضافه شده که می‌ذاره آپشن‌های یه عنصر ثبت‌شده رو سرجاش عوض کنی. یه آپشن جدید enabled هم اومده که عنصر رو ثبت‌شده نگه می‌داره ولی از پیش‌بینی کنارش می‌ذاره.

یه تغییر جالب دیگه رفتار عنصرای جداشده از DOMه. حالا وقتی یه عنصر رو از DOM حذف می‌کنی، دیگه unregister نمی‌شه؛ بلکه «پارک» می‌شه (isParked: true) و وقتی دوباره وصل شد، خودش به‌طور خودکار برمی‌گرده. سیستم رویدادها هم سبک‌تر شده: رویدادای elementDataUpdated، elementOptionsUpdated و elementReactivated حذف شدن و جاشون رو الگوی subscriber گرفته، و رویدادای باقی‌مونده snapshot رو تو یه فیلد state حمل می‌کنن. چند API قدیمی مثل تنظیم debug و unregisterOnCallback هم کلاً حذف شدن.

پکیج رسمی React (نسخه ۱۸ به بالا) سه تا هوک اصلی داره: useForesight برای ثبت یه عنصر تکی و گرفتن state زندهٔ اون به‌همراه یه callback ref، useForesights برای ثبت یه لیست پویا از عنصرها با یه بار صدا زدن، و useForesightEvent برای subscribe کردن به رویدادای ForesightManager تا آخر عمر کامپوننت. آپشن‌هایی مثل hitSlop و enabled هم reactive هستن؛ یعنی prop رو عوض کنی، ثبت هم آپدیت می‌شه.

پکیج رسمی Vue (نسخه ۳.۵ به بالا) هم معادل همینا رو داره: directive به اسم v-foresight برای ثبت یه عنصر، و composableهای useForesight، useForesights و useForesightEvent. کنار اینا، ابزار devtools هم به نسخه ۲ آپدیت شده و داکیومنت حالا framework-aware شده؛ یعنی از dropdown بالای sidebar React یا Vue رو انتخاب می‌کنی و کل مستندات مخصوص همون فریمورک رو می‌بینی. برای مهاجرت از نسخه ۳.۵ هم راهنمای migration جدا برای هسته، React و Vue گذاشتن.

نکات کلیدی:

• ForesightJS با پیش‌بینی مسیر موس، منابع رو قبل از کلیک کاربر پیش‌بارگذاری می‌کنه
• نسخه ۴ دو تا پکیج رسمی @foresightjs/react و @foresightjs/vue می‌ده جای هوک‌های کپی‌کردنی
• مدل دادهٔ عنصر به snapshot immutable با مدل subscribe بازنویسی شده
• عنصر حذف‌شده از DOM حالا پارک می‌شه و موقع اتصال مجدد خودکار برمی‌گرده
• register() حالا unregister، subscribe و getSnapshot هم برمی‌گردونه
• داکیومنت framework-aware شده و با یه dropdown مستندات مخصوص React یا Vue رو نشون می‌ده