Download the PHP package titonova/x-livewire without Composer

⚠️ Still in beta phase. Do not use in production environments (without testing) yet Contributions are highly welcomed

X-livewire

This package allows you to render livewire components like a blade component, giving it attributes, slots etc.

Assuming you wanted to create a livewire component, alert, usually you would render the component by: <livewire:alert/>. However, there a few problems.

1. You can't allow slots within the component. That is, this is invalid: <livewire:alert>Alert</livewire:alert>.
2. You can't access the $attributes bag. Thus, can't access the $attributes variable directly. That is, if you do this: <livewire:alert title="Alert!"/>, you can't access the $title attribute by $attributes->get('title'). Instead, you'd have to make $title a public property in the component. Not to mention, other methods on $attributes are not accessible. Such as ->merge([]), ->whereStartsWith(), etc.

The creator of livewire, Caleb Porzio has made it clear that adding slots, attributes etc are not currently on the roadmap.

That's why I created X-livewire.

With X-Livewire, you can do:

    <x-livewire _="alert">
        My alert message
    </x-livewire>

And, just like with Blade, you can:

1. Access the $attributes variable: {{ $attributes->get('title') }},
2. Access the $slot variable: {{ $slot }}

   Installation

You can install the package via composer:

composer require titonova/x-livewire

Usage

1. After creating your livewire component, make it extend XLivewireBaseComponent rather than Component. ie: class Alert extends XLivewireBaseComponent{
2. If you want to access the $attributes bag in your x-livewire component's backend, add $this->setProps() as the first line in your component's mount() method.
3. In the view file of the component, e.g alert.blade.php add @setUpXLivewire to the top of the file.
4. When you want to render the component:

You can access the $slot and $attributes variables just like you would in a Blade component:

You can also access the array of attributes that were passed to the x-livewire's component's tag but were not explicitedly declared in the class as $tagAttributes property.

For example, attributes like `primary`, `lg` etc that don't need corresponding properties declarations in the class.
E.g

You can add and access named slots as such:

If you want to access the slots directly as their Illuminate\View\ComponentSlot class, you can use the following: $this->laravelSlots()['footer']. Which would return an instance of Illuminate\View\ComponentSlot. E.g:

With available methods such as

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

TODO/Roadmap

[ ] Add Tests

[ ] Shorten tag declartion to <x-livewire:alert>

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Tito
• All Contributors

License

The MIT License (MIT). Please see License File for more information.