[LiveComponent] delete component from DOM

[tito10047]

Hi, I want delete component on ajax and remove element from DOM. It is possible?

Some like this:

    #[LiveAction]
    public function delete(
    ) {
        $repo  = $this->repositpry->delete($this->item);
        $this->item = null;
        return new Response(null, 204);
    }

But when I do this, black backdrop is showing.

[smnandre]

It's not possible afaik today, but this is a great feature idea! Would you like to work on it ?

[tito10047]

Oh yes, I'm excited. But I don't have idea where to start. I will have to look inside this package in more detail :eyes:

[tito10047]

Ok, I found it in your code. So, it's ok as it described in root issue? Or you want some special response?

[smnandre]

That's the key aspect of this i guess... is just a "204" header enough ? I'm not sure...

Probably it would be safer to add some header no ?

[WebMamba]

We agree to say that is an entire component that you want to remove and not just an item inside your component?

If so I think we can have a custom header that gives the ID of the component that should be removed from the DOM (UX-LIVE_COMPONENT-REMOVE='ddjf13224?D?D').

I think this could be a good candidate for a new plugin.

We need to give a good way to easily create CSS transition.

And what do you think instead of returning a 404, having an attribute #[Descruct], so user don't need to know about all the headers details.

   #[Desctruct]
   public function delete(
   ) {
    $repo  = $this->repositpry->delete($this->item);
    $this->item = null;
    return new Response(null, 204);
   }

And it can be useful to trigger an event onDescrut WDYT ?

[tito10047]

Yes, this sounds good. Can you give me short intro where I can find some similar in library where I can inspirate?

[WebMamba]

Maybe you can take inspiration on the loading features: https://symfony.com/bundles/ux-live-component/current/index.html#adding-and-removing-classes-or-attributes The work for css transition has already been done. And you have a plugin you can take inspiration on https://github.com/symfony/ux/blob/2.x/src/LiveComponent/assets/src/Component/plugins/LoadingPlugin.ts

[smnandre]

I suggest we split this in two PR: first let's handle the delete / header / response things .. and then we can work on the attribute/effects .. wdyt ?

[tito10047]

If I understand it correctly, I can create custom plugin for removing entire element from dom. In this component will be listener for event render:started and inside this plugin will check correct header from backendResponse and remove element from dom.

Can I try do it like this?

[smnandre]

I think it would probably be easier to do directly where we handle redirections for instance... and then have a plugin to handle animation/etc.

Because if the content is not returned by the response this would generate an error today