‏Nano Stores: مدیریت استیت برای همه فریم‌ورک‌ها

Nano Stores یه کتابخانه‌ی مینیمالیستی برای مدیریت state هست که برای طیف وسیعی از فریم‌ورک‌ها طراحی شده؛ از React و React Native گرفته تا Vue، Svelte، Solid، Angular، Lit و حتی Vanilla JS. چیزی که این ابزار رو متمایز می‌کنه اینه که با وجود قدرت بالا، حجمش بین ۲۹۴ تا ۸۳۱ بایت (minified و brotlied) هست و هیچ dependency خارجی نداره.

فلسفه‌ی طراحی Nano Stores روی این ایده بنا شده که منطق برنامه باید از کامپوننت‌ها جدا بشه و داخل storeها زندگی کنه. این کار هم تست نوشتن رو راحت‌تر می‌کنه، هم کد رو قابل نگهداری‌تر.

این کتابخانه سه نوع store اصلی داره. اول Atom که برای نگه‌داشتن مقادیر ساده مثل string، number یا array استفاده می‌شه. با atom() یه store می‌سازی، با get() مقدارش رو می‌خونی و با set() تغییرش می‌دی. دوم Map که برای آبجکت‌هایی با یه سطح عمق ایده‌آله و می‌شه با setKey() فقط یه کلید خاص رو آپدیت کرد بدون اینکه کل آبجکت رو عوض کنی. سوم Computed که یه store مشتق‌شده از storeهای دیگه‌ست؛ هر وقت store اصلی تغییر کنه، computed هم به‌روز می‌شه.

یکی از قابلیت‌های جالب Nano Stores، مفهوم Lazy Stores هست. هر store دو حالت داره: Mount (وقتی حداقل یه listener داره) و Disabled (وقتی هیچ listener‌ای نداره). این یعنی storeها منابع سیستم رو فقط وقتی مصرف می‌کنن که واقعاً توی UI استفاده می‌شن. مثلاً یه store می‌تونه وقتی mount می‌شه یه WebSocket connection باز کنه و وقتی disabled می‌شه اون رو ببنده.

برای storeهای async هم راه‌حل داره. پکیج @nanostores/async امکان ساخت computed storeهایی رو می‌ده که می‌تونن داده رو از API بگیرن و زنجیره‌های async بسازن. همچنین با batched می‌شه چند تغییر رو گروه‌بندی کرد تا فقط یه بار re-render اتفاق بیفته.

اکوسیستم Nano Stores هم قابل توجهه. از store مخصوص localStorage و sync بین tab‌های مرورگر گرفته تا Router، Media Query، I18n، SQL reactive store برای SQLite، و حتی یه پلاگین Immer برای immutable state updates. همچنین ابزارهای devtools هم داره که lifecycle و تغییرات رو لاگ می‌کنن.

پشتیبانی از TypeScript هم توش خوبه. می‌شه برای هر store یه type مشخص کرد و از helper‌هایی مثل StoreValue برای استخراج type استفاده کرد.

Tree Shaking هم به‌درستی پیاده‌سازی شده؛ یعنی توی هر chunk فقط storeهایی بسته‌بندی می‌شن که کامپوننت‌های اون chunk واقعاً ازشون استفاده می‌کنن. این یعنی bundle نهایی کمترین حجم ممکن رو داره.

نکات کلیدی:

• حجم بسیار کم: بین ۲۹۴ تا ۸۳۱ بایت، بدون هیچ dependency
• سازگار با React، Vue، Svelte، Solid، Angular، Lit و Vanilla JS
• سه نوع store: Atom، Map و Computed
• Lazy Stores برای مصرف بهینه‌ی منابع
• پشتیبانی کامل از TypeScript
• Tree Shakable بودن برای کاهش حجم bundle
• اکوسیستم غنی با پکیج‌های جانبی برای async، router، i18n و غیره
• ابزارهای devtools برای دیباگ راحت‌تر