Wirebones: автоматична генерація Livewire Skeleton Placeholders для ваших компонентів.

Wirebones від Felipe Martins завантажує вашу сторінку в headless Chromium, аналізує рендеринг макета і створює відповідний skeleton-файл Blade. Livewire використовує його як заглушку, поки завантажується lazy component.

Оскільки першоджерелом є реальний відрендерений компонент, а не окремий шаблон, редизайн не змусить заглушку «протухнути» — її достатньо просто перезібрати. Автор підготував live-демо з прикладами Kanban-дошки, панелі продажів та поштової скриньки. Оновіть будь-яку з них, щоб побачити «скелет» до того, як з’явиться основна розмітка.

• Захоплення з реального DOM — розмітка «скелета» генерується автоматично на основі компонента, а не пишеться вручну.
• Адаптивність — створення знімків для кількох в’юпортів (breakpoints) за один цикл збірки.
• Автооновлення через Vite — file watcher перезбирає лише змінені «скелети» під час роботи vite serve.
• Підтримка автентифікації — робота з Laravel guard, браузерними куками, заголовками або storage_state у Playwright.
• Легка інтеграція в Livewire — підтримка lazy, defer та lazy.bundle.
• Підтримка Laravel Boost — AI-агенти, що використовують Boost, автоматично розпізнають встановлені конвенції.

Щоб позначити компонент, достатньо додати атрибут із посиланням на маршрут, де він уже рендериться:

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

Після цього підключіть його як lazy-компонент і запустіть php artisan wirebones:build:

<livewire:revenue lazy />

Атрибут #[Wirebone] також приймає параметри захоплення: ширину в’юпорту для скриншотів, час очікування після завантаження сторінки та селектори, які слід ігнорувати:

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

Chromium використовується лише на етапі збірки для генерації Blade-файлів. Коли wirebones:build зберігає заглушки на диск, Livewire віддає їх як звичайні View. Це означає, що на продакшн-серверах не потрібно встановлювати Playwright або Chromium.

Проєкт Wirebones можна знайти на GitHub, а спробувати його в дії — на wirebones.laravel.cloud.