README

⚠️ 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.

You can't allow slots within the component. That is, this is invalid: <livewire:alert>Alert</livewire:alert>.
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:

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

Installation

You can install the package via composer:

composer require titonova/x-livewire

Usage

After creating your livewire component, make it extend XLivewireBaseComponent rather than Component. ie: class Alert extends XLivewireBaseComponent{
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.
In the view file of the component, e.g alert.blade.php add @setUpXLivewire to the top of the file.
When you want to render the component: Blade <x-livewire _="alert" title="Warning"> My alert message </x-livewire>

You can access the $slot and $attributes variables just like you would in a Blade component: {{ $slot }} {{ $attributes->get('title') }}

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. {{ $tagAttributes->get('href') }} For example, attributes like primary, lg etc that don't need corresponding properties declarations in the class. E.g ```HTML Google ....

    <span>
    <a href="{{ $tagAttributes->get('href') }}>{{ $slot }}</a>
    </span>
```

You can add and access named slots as such:

            My alert message
            <x-slot name="footer">My custom footer </x-slot>
        </x-livewire>
        
        ....

        <div class="alert ...">
            {{ $slot }}
            <div class="alert-footer">
                {{ $footer ?? 'Default footer content' }}
            </div>
        </div>

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:

    +attributes: Illuminate\View\ComponentAttributeBag {#1379 ▼
      #attributes: []
    }
    #contents: "<b>&lt;i&gt;hello!!!    &lt;/i&gt; </b>"

With available methods such as

public withAttributes(array $attributes): $this Set the extra attributes that the slot should make available.
public toHtml(): string Get the slot's HTML string.
public isEmpty(): bool Determine if the slot is empty.
public isNotEmpty(): bool Determine if the slot is not empty.
public __toString(): string Get the slot's HTML string.

Testing

composer test

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

License

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

guglielmoseminara / x-livewire

Maintainers

Details