تست نوشتن برای پروژههای فرانتاند بدون Node یا هر runtime سمت سرور دیگهای یه چالش قدیمیه. توی این مقاله نویسنده نشون میده که چطور میشه کامپوننتهای Vue رو مستقیم توی تب مرورگر با کمک QUnit تست کرد. با یه تابع mountComponent، دادههای fixture و یه waitFor() ساده، میشه تستهای integration واقعی نوشت بدون اینکه به Playwright یا ابزارهای سنگین نیاز داشت.
Boneyard یه کتابخونهست که صفحات اسکلت لودینگ رو مستقیم از UI واقعی پروژهات استخراج میکنه. دیگه نیازی به اندازهگیری دستی یا پلیسهولدرهای دستی نیست. با ریاکت، ویو، Svelte، انگولار، Preact و حتی React Native کار میکنه. یه CLI یا پلاگین Vite بهصورت خودکار layout رو اسکن میکنه و فایلهای bones رو میسازه. نتیجه: اسکلتهای pixel-perfect بدون هیچ تنظیم اضافهای.
فرمیش یه کتابخانه headless و schema-based برای مدیریت فرمهاست که با فریمورکهای محبوب جاوااسکریپت مثل React، Vue، SolidJS، Svelte، Qwik و Preact کار میکنه. اعتبارسنجی مبتنی بر Valibot داره، تایپسیف کامله و سایز باندلش از ۲.۵ کیلوبایت شروع میشه. آپدیتهای DOM به صورت دقیق و fine-grained انجام میشن که سرعت رو بالا میبره. هسته اصلیش framework-agnostic ِه و بلوکهای reactivity مخصوص هر فریمورک رو در زمان بیلد تزریق میکنه.
Nano Stores یه کتابخانهی فوقالعاده سبک برای مدیریت استیته که با React، Vue، Svelte، Solid، Angular و حتی Vanilla JS کار میکنه. حجمش بین ۲۹۴ تا ۸۳۱ بایته و هیچ dependency خارجی نداره. ایدهی اصلیش اینه که منطق برنامه رو از کامپوننتها بیاری بیرون و بذاری داخل store. با استفاده از atomic storeها و lazy loading، فقط کامپوننتهایی re-render میشن که واقعاً به داده تغییر کرده نیاز دارن.
TSRX یه افزونه زبانی برای TypeScriptه که میخواد نوشتن کامپوننتهای UI رو راحتتر و خواناتر کنه. برخلاف JSX، توی TSRX میشه کنترل فلو، استایلها، و متغیرهای محلی رو مستقیماً کنار markup نوشت. این ابزار به React، Preact، Solid، Vue و Ripple کامپایل میشه و با کدبیسهای موجود TypeScript سازگاره. یه مزیت مهمش اینه که هم برای توسعهدهندههای انسانی و هم برای مدلهای زبانی (LLM) خوندن کد رو آسونتر میکنه.