Apiato Livewire Laravel Package

Getting Started

Release 6.06 is primarily a rendering and styling update: it adds Tailwind-oriented markup, cleans up HTML output, and adjusts where the default $slot is rendered in components. Start by checking the package README and changelog, then inspect the published Blade component views and any Tailwind setup instructions.

Minimal steps:

1. Update the package and run your normal Laravel upgrade steps.
2. Republish any package views/assets if you have overrides:

   php artisan vendor:publish --tag=package-views --force
   php artisan vendor:publish --tag=package-assets --force
   

3. Ensure Tailwind scans the package views if the package now ships Tailwind classes:

   // tailwind.config.js
   content: [
     './resources/**/*.blade.php',
     './vendor/package-name/**/*.blade.php',
   ],
   

4. Clear compiled views and rebuild frontend assets:

   php artisan view:clear
   npm run build
   

5. Render a representative component in a Blade view and confirm default and named slots appear in the expected DOM location.

First use case: replace a hand-written UI fragment with a package component, pass data through props/attributes, and put page-specific content inside the default slot. This is the fastest way to validate the 6.06 slot-location change and Tailwind output.

Implementation Patterns

Use package components directly in Blade and keep customization in your app layer:

<x-package-component :prop="$value" class="mt-4">
    Default slot content

    <x-slot:header>
        Header content
    </x-slot:header>
</x-package-component>

Day-to-day patterns:

• Prefer published view overrides for layout changes instead of editing vendor files. Keep overrides minimal and diff them after package updates.
• Treat $slot as the package component’s main content area. After upgrade, verify that {{ $slot }} is inside the intended wrapper and that named slots are not swallowed by the default slot.
• If the package now ships Tailwind classes, include its views in Tailwind’s content paths. If it uses dynamic class names, safelist those classes.
• Use attributes and props for variation; use slots for page-specific content. Avoid copying package markup into app views unless you need full control.
• For repeated UI, wrap package components in your own app-level Blade components. This isolates future package HTML/Tailwind changes.
• In tests, assert rendered HTML contains expected slot content and key wrapper elements. This catches slot-placement regressions quickly.
• If you maintain custom CSS/JS selectors against package markup, review the 6.06 HTML cleanup and update selectors to stable data attributes or wrapper classes where possible.

Integration tips:

• Keep Tailwind build output in CI so missing content paths or purged classes fail visibly.
• Publish views only when customizing; otherwise rely on the package defaults so future HTML fixes flow through.
• Use named slots for structured regions and the default slot for main content. This makes the $slot location explicit.
• If the package exposes config, start with defaults and override only what you need.

Gotchas and Tips

• Tailwind purging is the most likely 6.06 issue. If components look unstyled, confirm package Blade files are in content and rebuild assets. Dynamic classes often need a safelist.
• The $slot location change can alter visual order without throwing an error. Check default slot plus named slots together, not just isolated components.
• “Cleaned up HTML” may change wrapper elements, class names, or nesting. Custom CSS/JS that targets old markup may silently break.
• Published views can become stale after upgrade. Republish or manually diff package views against your overrides. Do not blindly overwrite heavily customized views.
• Run php artisan view:clear after publishing or updating Blade views. Cached compiled views can make fixes appear ineffective.
• Use {{ $slot }} for slot output. Avoid manually echoing slot HTML unless you have a specific trusted-HTML reason.
• If a component renders nothing, check whether the component view expects $slot but is being rendered without content, or whether a named slot is required.
• Debug by inspecting the final rendered HTML in the browser and comparing it with the package’s Blade view. Add temporary wrapper comments or data attributes if needed.
• Extension points to prefer: published views, package config, Tailwind preset/config, app-level wrapper components, and slot composition. Avoid editing vendor files directly.
• Treat 6.06 as low-risk functionally but potentially medium-risk visually. Smoke-test key components and rebuild frontend assets as part of the upgrade.