‏Boneyard: اسکلت لودینگ خودکار برای همه فریم‌ورک‌ها

اگه تا حالا وقتت رو صرف ساختن اسکلت‌های لودینگ دستی کردی — اندازه‌گیری عرض و ارتفاع عناصر، نوشتن پلیس‌هولدر، تنظیم انیمیشن — Boneyard اومده تا این کار رو کاملاً خودکار کنه. این کتابخونه مستقیم از UI واقعی پروژه‌ات اسکرین‌شات می‌گیره و اسکلت‌های pixel-perfect تولید می‌کنه.

فکرش رو بکن: به جای اینکه بنشینی و یه skeleton component جداگانه بنویسی، فقط کامپوننت واقعی‌ات رو داخل یه `` می‌ذاری و همه چیز خودش حل می‌شه. برای ری‌اکت این‌شکلی می‌شه:

import { Skeleton } from 'boneyard-js/react'

function BlogPage() {
  const { data, isLoading } = useFetch('/api/post')
  return (
    <Skeleton name="blog-post" loading={isLoading}>
      {data && <BlogPost post={data} />}
    </Skeleton>
  )
}

نحوه کار به این صورته که CLI یا پلاگین Vite یه مرورگر بدون رابط کاربری (headless) باز می‌کنه، به آدرس اپ میره، تمام کامپوننت‌های `` رو پیدا می‌کنه و layout اون‌ها رو در breakpointهای مختلف (به‌صورت پیش‌فرض: 375، 768 و 1280 پیکسل) اسنپ‌شات می‌گیره. نتیجه رو توی فایل‌های .bones.json ذخیره می‌کنه که بعداً در runtime استفاده می‌شه.

برای پروژه‌های مبتنی بر Vite (ری‌اکت، ویو، Svelte، Preact) می‌شه به جای CLI از پلاگین استفاده کرد تا نیازی به ترمینال جداگانه نباشه:

// vite.config.ts
import { boneyardPlugin } from 'boneyard-js/vite'

export default defineConfig({
  plugins: [boneyardPlugin()]
})

با این کار، bones به‌صورت خودکار وقتی dev server بالا میاد capture می‌شن و با هر HMR update هم به‌روز می‌شن. یعنی اگه UI رو تغییر بدی، اسکلت‌ها هم خودشون آپدیت می‌شن.

React Native هم پشتیبانی می‌شه، البته با رویکرد متفاوت. در حالت dev، کامپوننت fiber tree رو پیاده‌روی می‌کنه، اندازه view‌ها رو از UIManager می‌گیره و داده‌ها رو به CLI می‌فرسته. یه ویژگی جالب اینه که Dynamic Type رو هم پشتیبانی می‌کنه؛ یعنی اگه کاربر سایز فونت سیستم رو تغییر بده، موقعیت bone‌ها هم به‌صورت خودکار تنظیم می‌شن.

کامپوننت `` پراپ‌های متنوعی داره. می‌شه رنگ، انیمیشن (pulse، shimmer یا solid)، stagger بین bone‌ها و fade-out transition رو تنظیم کرد. همه این‌ها هم از طریق فایل boneyard.config.json قابل تنظیم سراسری هستن و هر کامپوننت می‌تونه مقادیر خودش رو override کنه.

یه نکته مهم: تمام فریم‌ورک‌ها از همون فرمت .bones.json استفاده می‌کنن. یعنی اگه یه روزی بخوای بین فریم‌ورک‌ها migrate کنی، فایل‌های bones قابل استفاده مجدد هستن. در production هم هیچ overhead اضافه‌ای وجود نداره.

در نهایت Boneyard یه مشکل رایج رو که همه با اون دست‌وپنجه نرم می‌کنن به روشی هوشمند حل می‌کنه: اسکلت‌هایی که دقیقاً شبیه UI واقعی هستن، بدون اینکه نیازی به نگهداری دستی داشته باشن. برای تیم‌هایی که روی UX لودینگ حساس هستن، این ابزار می‌تونه وقت قابل توجهی رو ذخیره کنه.

نکات کلیدی:

• اسکلت‌های pixel-perfect مستقیم از UI واقعی، بدون هیچ اندازه‌گیری دستی
• پشتیبانی از ری‌اکت، Preact، ویو، Svelte 5، انگولار و React Native
• پلاگین Vite برای auto-capture بدون ترمینال جداگانه
• پشتیبانی از چند breakpoint و به‌روزرسانی خودکار با HMR
• React Native از Dynamic Type کاربر پشتیبانی می‌کنه
• خروجی یکسان .bones.json برای همه فریم‌ورک‌ها
• در production هیچ overhead اضافه‌ای ایجاد نمی‌کنه
• لایسنس MIT و متن‌باز