symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony
https://ux.symfony.com/
MIT License
851 stars 313 forks source link

[live-components] JavaScript Component Hooks not fired ? #1038

Closed Gulivertx closed 1 year ago

Gulivertx commented 1 year ago

Hello,

I tried to use live component javascript hooks from custom stimulus controller without any success. It seems that the hook is not fired from stimulus controller.

On my twig component I added my custom controller

<div class="flex-1 overflow-auto" {{ attributes.defaults(stimulus_controller('medisupport-sync')) }}>
...
</div>

And here my medisupport-sync_controller.ts

import {Controller} from '@hotwired/stimulus';
import {Component, getComponent} from '@symfony/ux-live-component';

export default class extends Controller<HTMLDivElement> {
    private component: Component;

    async initialize() {
        // Get Symfony live component
        this.component = await getComponent(this.element);

        this.component.on('connect', (component) => {
            console.log('connect', component);
        });

        this.component.on('render:finished', (component) => {
            console.log('render:finished', component);
        });
    }
}

I should get a console.log on connect and on render finished, but I do not have any thing. Any ideas ?

Screenshot 2023-08-07 at 10 08 42

EDIT : I used live-component 2.10 (current last version)

weaverryan commented 1 year ago

Hmm, if you add console.log(this.component) after the this.component = line in your controller, do you see the controller instance?

Gulivertx commented 1 year ago

Hello Ryan, Thank's for your reply.

Yes, I see it...

Screenshot 2023-08-07 at 19 20 49

EDIT : for info, my live-component is inside a turbo-frame, could be the problem ?

weaverryan commented 1 year ago

Hmm.

EDIT : for info, my live-component is inside a turbo-frame, could be the problem ?

Hmm, it's possible? I can't think of why this would create a problem - but does removing it make a difference?

So, to be clear, after your component re-renders (i.e. after you change some model or submit a LiveAction), your render:finished callback isn't hit? I'd focus on debugging that one first (vs connect) as it's a bit easier tor repeat/trigger. I'm not sure what could be going wrong.

Gulivertx commented 1 year ago

I close this. Thank's for your help. For this live-component I finally not used custom stimulus controller and did not investigate anymore.

But I now use component listeners in another live-components and it works as expected. I don't know why it was not working on this...