‏virtua؛ لیست مجازی بدون تنظیمات برای پنج فریم‌ورک

virtua یه کامپوننت لیست و گرید مجازیه؛ یعنی به‌جای ساختن هزاران ردیف تو DOM، فقط اون‌هایی رو نگه می‌داره که واقعاً جلوی چشم کاربرن. تو مستندات پروژه اومده که هدف، بازنگری کامل تو ایدهٔ virtualization ــه: اسکرول روون بدون اینکه توسعه‌دهنده مجبور شه ده‌ها گزینه رو دستی تنظیم کنه.

تیم پروژه روی بدون تنظیمات بودن تأکید می‌کنه. اندازه‌گیری خودکار آیتم‌های با ارتفاع متغیر، اصلاح موقعیت اسکرول موقع اسکرول معکوس یا پرش دستی، و رفتار درست روی iOS چیزهایی هستن که معمولاً خود برنامه‌نویس باید حلشون کنه، ولی اینجا خود کتابخونه مدیریتشون می‌کنه.

دربارهٔ کارایی توضیح داده شده که اسکرول طبیعی به بهینه‌سازی تو چند جبهه نیاز داره: کم کردن مصرف CPU و garbage collection برای حذف افت فریم، کم کردن layout recalculation همزمان، و کم کردن پرش‌های تصویری موقع repaint. از نظر حجم هم هر کامپوننت حدود ۳ کیلوبایت gzip شده و tree-shakeable ــه.

از نظر API، VList نقش جایگزین مستقیم یه div اسکرول‌شونده رو داره و برای مارک‌آپ پیچیده‌تر Virtualizer هست؛ WindowVirtualizer برای وقتیه که خود پنجره اسکرول می‌شه و VGrid هم برای اسکرول همزمان افقی و عمودی. پشتیبانی چندفریم‌ورکی هم نقطهٔ تمایزشه: React، Vue، Solid، Svelte و Angular، با ایمپورت از مسیرهای جدا مثل virtua/vue و virtua/solid.

import { VList } from "virtua";

<VList style={{ height: 800 }}>
  {Array.from({ length: 1000 }).map((_, i) => (
    <div key={i}>{i}</div>
  ))}
</VList>

نکات کلیدی:

• فقط آیتم‌های داخل دید رندر می‌شن، پس لیست‌های چندهزارتایی روون می‌مونن
• حدود ۳ کیلوبایت gzip برای هر کامپوننت و tree-shakeable
• اندازهٔ پویا، اسکرول معکوس و پشتیبانی iOS از قبل حل شدن
• VList، Virtualizer، WindowVirtualizer و VGrid برای سناریوهای مختلف
• اسکرول افقی، RTL، اسکرول بی‌نهایت، بازیابی موقعیت اسکرول و ناوبری با کیبورد هم پشتیبانی می‌شن
• React از ۱۶.۱۴ به بالا و Vue از ۳.۲ به بالا لازمه