Livewire component

[njxqlus]

• [ х ] Changes have been thoroughly tested to not break existing functionality.
• [ х ] New functionality has been documented or existing documentation has been updated to reflect changes.
• Visual changes are explained in the PR description using a screenshot/recording of before and after.

As discussed in #7735

[what-the-diff]

PR Summary

• Introduction of New Component for Forms
  A new component is introduced in the forms package. This component relates to 'Livewire', a library that simplifies the task of building dynamic interfaces and allows for a smoother user experience.

• Introduction of New Component for Info lists
  In the information lists package, a new 'Livewire' component is added which will enhance the dynamic interaction in this area as well. This will ultimately improve the way users interact with data lists on the platform.

[wychoong]

Few questions

• does the component can dehydrate the state, if no, should it be mentioned in doc
• the new livewire component should allow passing class livewire::make(App\Livewire\Components\Foo::class, […])

[atmonshi]

Better to throw an exception if certain methods are not available as expected with other components.
I like the idea BTW :)

[njxqlus]

@wychoong

does the component can dehydrate the state, if no, should it be mentioned in doc

The component is a layout component (like tabs). I'm not sure but it cannot be dehydrated because it's not a field especially in an infolist.

the new livewire component should allow passing class livewire::make(App\Livewire\Components\Foo::class, […])

Yes, you can pass a component like this:

\Filament\Infolists\Components\Livewire::make(\App\Livewire\Foo::class, ['foo' => 'bar'])

@atmonshi

Better to throw an exception if certain methods are not available as expected with other components

The same methods from \Filament\Infolists\Components\View are available like ->hidden() except ->childComponents() but I think it's in the concept because, for example, \Filament\Infolists\Components\ColorEntry also has this method but doesn't throw an exception

Thanks for getting attention to my PR!

[njxqlus]

Make passing record optional as a component data param. Current usage:

use Filament\Forms\Components\Livewire;

Forms\Components\Livewire::make('foo', ['record' => $infolist->getRecord(), 'bar' => 'qux'])

// Livewire component
class Foo extends Component
{
    public function mount(array $componentData = []): void
    {
        $this->data = $componentData;       
    }

[wychoong]

The component is a layout component

I see, that makes a lot of sense now.

Yes, you can pass a component like this:

\Filament\Infolists\Components\Livewire::make(\App\Livewire\Foo::class, ['foo' => 'bar'])

not LW expert but this feels unsafe, as LW doc never (I might be wrong) show examples of using @livewire(\App\Livewire\Foo::class)

would suggest to have some checking if the name passed in is a livewire component, and also resolve the name
example

public static function make($component, $data){
    // .... check if is valid livewire component
    $this->componentName = $component::getName();
    // ...
}

// in blade
@livewire($componentName, $data)

[njxqlus]

@wychoong

not LW expert but this feels unsafe, as LW doc never (I might be wrong) show examples of using @livewire(\App\Livewire\Foo::class)

I don't use it like this. Current usage in blade.php:

@livewire($component, compact('componentData'))

[rahmanramsi]

Can you add lazy load support too?
Something like :

Livewire::make(\App\Livewire\Foo::class, ['foo' => 'bar'])->lazy()

[njxqlus]

Can you add lazy load support too?

I'm using method view from Filament\Forms\Components. My component is just a shortcut for \Filament\Forms\Components\View. So if the View component supports ->lazy() my component might support it also.

[rahmanramsi]

I'm using method view from Filament\Forms\Components. My component is just a shortcut for \Filament\Forms\Components\View. So if the View component supports ->lazy() my component might support it also.

I mean this implementation https://livewire.laravel.com/docs/lazy

[njxqlus]

I mean this implementation https://livewire.laravel.com/docs/lazy

Oh sorry, I didn't understand.

Now I'm using blade directive @livewire() to call a component. Not sure that it works with lazy. I will have a look

[rahmanramsi]

Now I'm using blade directive @livewire() to call a component. Not sure that it works with lazy. I will have a look

I think this will work @livewire($component, ['lazy' => true])

[njxqlus]

Update usage of component.

\Filament\Forms\Components\Livewire::make(\App\Livewire\Foo::class)
    ->lazy()
    ->withRecord()
    ->componentData(['bar' => 'form'])

@rahmanramsi now it's supports ->lazy()

[wychoong]

How it goes with if livewire/livewire#5780 get merged some day?

[njxqlus]

@wychoong

How it goes with if livewire/livewire#5780 get merged some day?

This component is part of a form or an infolist so it can't be a full-page livewire component. Despite that, I call livewire component in native way via @livewire()blade directive which shouldn't cause any problems.

[danharrin]

Hi, thanks for the PR. I think it's important to give you a bit of information as to why this PR has been tagged as "low priority". We really appreciate all contributions, and intend to visit this in the future, and hopefully merge it if it is a suitable feature for the framework.

However, reviewing PRs, and often rewriting them on behalf of the author to ensure they are consistent with the rest of the framework, consumes a lot of my time. At the moment we have a large backlog of bug reports that I am prioritising, since most of these affect functionality that worked in a previous version and are now impacting real projects. Hopefully you can see how that work comes first before introducing new features that people aren't using in projects yet.

Again, thank you for contributing and I'm looking forward to reviewing this PR when our backlog of bug reports has reduced.

[danharrin]

Thanks!

[Nicholasbell03]

@njxqlus Thanks for your work on this. I wanted to find something out I am struggling with. I am wanting to use this to add a livewire component essentially as a custom step in my Form Wizard. The issue I'm facing is getting the livewire component to essentially be part of the form flow? i.e. the component has form awareness. So in the livewire component I can perform logic with the current state of the form if that makes sense?

I'm not sure if you can help, I see that you state in the docs that when being used for a new record creation it can be hidden, but I'm wanting to use this as part of the form wizard flow for new and existing records.

just thought I'd reach out as I've been battling with this for a little while now.

[njxqlus]

@Nicholasbell03 I'm not sure about what you want to achieve. Wizard is just a layout so you can use it with any components inside.

From docs:

Since all Filament forms are built on top of Livewire, the form can adapt dynamically to user input, even after it has been initially rendered. Developers can use parameter injection to access many utilities in real time and build dynamic forms based on user input. The lifecycle of fields is open to extension using hook functions to define custom functionality for each field. This allows developers to build complex forms with ease.

[Nicholasbell03]

@njxqlus thank you for your response.
Sorry I know I didn't explain my issue very well.

Perhaps an example.
I have a filament form

• It includes 2 fields (native filament functionality)
• Then the 3rd field is a custom Livewire component
• I want the livewire component to compute the sum of the first two fields, in realtime, so as changes are made they reflect in the livewire component.

So the livewire component needs the current raw state of the parent filament form at all times if that makes sense? This is a really basic example, but I think it expresses the same problem I have.

I've found a way to do this with event dispatch and a listener inside the livewire component, but it seems like a hacky approach. I'm not sure if I am missing something really obvious here and just can't see the wood from the trees.

Many thanks again for the feature you added and taking the time to respond.