‏Wirebones: تولید خودکار Skeleton Placeholder برای Livewire

Wirebones یه پکیج اپن‌سورس لاراوله که ساخت skeleton placeholder برای کامپوننت‌های lazy لاراول Livewire رو کاملاً خودکار می‌کنه. مشکل رایج اینه که وقتی یه کامپوننت lazy لود می‌شه، باید یه فایل placeholder دستی بنویسی که شبیه طرح اصلی باشه — این placeholder‌ها با گذشت زمان و تغییر طراحی‌ها از واقعیت فاصله می‌گیرن و بی‌ربط می‌شن.

Wirebones این مشکل رو حل می‌کنه: صفحه رو توی Chromium بی‌سر (headless) رندر می‌کنه، layout واقعی DOM رو آنالیز می‌کنه و یه فایل Blade اسکلتون می‌سازه که Livewire تا لود شدن کامپوننت اصلی نشون می‌ده. چون منبع اطلاعات، کامپوننت رندرشده‌ی واقعیه نه یه تمپلیت موازی، با هر بازطراحی کافیه دوباره build بگیری.

برای استفاده کافیه attribute مخصوص رو روی کامپوننت بذاری و route‌ای که اون کامپوننت توش رندر می‌شه رو بهش بدی:

use Livewire\Component;
use MrFelipeMartins\Wirebones\Attributes\Wirebone;

#[Wirebone(route: '/dashboard')]
class Revenue extends Component
{
    public function render()
    {
        return view('livewire.revenue');
    }
}

بعد کامپوننت رو به شکل معمول lazy mount می‌کنی و دستور php artisan wirebones:build رو اجرا می‌کنی. Wirebones خودش فایل skeleton رو می‌سازه و Livewire ازش استفاده می‌کنه:

<livewire:revenue lazy />

attribute مربوطه گزینه‌های بیشتری هم داره؛ مثلاً می‌شه چند breakpoint مختلف برای responsive بودن اسکلتون تعریف کرد، مدت انتظار بعد از لود صفحه رو تنظیم کرد، یا سلکتورهای خاص رو از capture حذف کرد:

#[Wirebone(
    route: '/dashboard',
    breakpoints: [375, 768, 1280],
    wait: 800,
    excludeSelectors: ['[data-no-wirebone]'],
)]

نکته مهم اینه که Chromium فقط موقع build استفاده می‌شه، نه runtime. بعد از اینکه wirebones:build فایل‌های skeleton رو روی دیسک نوشت، Livewire اون‌ها رو مثل هر Blade view دیگه‌ای سرو می‌کنه — سرورهای production نیازی به نصب Playwright یا Chromium ندارن.

امکانات دیگه‌اش هم جالبه: پشتیبانی از route‌های نیازمند احراز هویت (با Laravel guard، cookie، header یا Playwright storage_state)، rebuild خودکار با Vite که فقط skeleton‌های تغییرکرده رو دوباره می‌سازه، و سازگاری با lazy، defer و lazy.bundle. یه دمو زنده هم داره که نمونه‌های Kanban، داشبورد فروش و inbox رو می‌تونی ببینی.

نکات کلیدی:

• اسکلتون از DOM واقعی رندرشده تولید می‌شه، نه به‌صورت دستی
• Chromium فقط موقع build لازمه؛ production server نیازی بهش نداره
• با breakpoint مختلف می‌شه خروجی responsive گرفت
• از route‌های protected و احراز هویت‌شده پشتیبانی می‌کنه
• با Vite integration، فقط skeleton‌های تغییرکرده rebuild می‌شن
• سازگار با lazy، defer و lazy.bundle در Livewire