[LiveComponent] Add Events listening infos in Profiler and DebugCommand

[mbuliard]

Q	A
Bug fix?	no
New feature?	no
Issues	No issue
License	MIT

Hello,

First of all, thank you for your work and dedication.

Playing with LiveComponents on my spare time, I have a SPA using several events to communicate between components.
In several occasion, it took me a little time to find out bugs in my application concerning these events.

That's why I propose these small enhancements for debug concerning events in LiveComponent :

1. In TwigComponentDebugCommand, allow to filter components by the events they are listening to :

bin/console debug:twig-component --listening buyEvent

2. Still in TwigComponentDebugCommand, when displaying a unique Component, add a line to display the events it listens to, if any :
   

3. In Profiler, add a line to display the events it listens to, if any :
   

What do you think of it ? I will add test in a second time.

[kbond]

This looks useful @mbuliard! Just a suggestion on the implementation and yeah, could you add a test?

[kbond]

The duplication of this method is unfortunate. Can we use/adjust this method?

[mbuliard]

Thanks for the suggestion ! I was not aware of this method. I removed the @internal to use it, but don't you think it could be a separate service ?

[kbond]

I removed the https://github.com/internal to use it

Can you keep @internal on the method. We don't want this to be used by end-users.

but don't you think it could be a separate service ?

Can you explain this a bit more?

[mbuliard]

Can you explain this a bit more?

Since the method is use elsewhere and its logic is not inherently linked to the attribute, I would think of creating a separate service let's say LiveListenersResolver and call it in the attribute and in my modifications.

[kbond]

Fair point, keeping it internal enables us to make this kind of refactor in the future. For now, let's keep as is.

[WebMamba]

Just tried the PR locally and it's work great! I like the DX! Thanks @mbuliard

[kbond]

Just realized this breaks the data collectors and debug command if using twig component w/o live component.

Instead of adding a bunch of checks in twig component (we'd like to keep twig component from having knowledge of live component as much as possible), what about making the command and data collector extendable. We'd have extended versions in live component (and swap their services).

This would be outside the scope of this PR.

@WebMamba, @smnandre, wdyt?

[smnandre]

I'm really thinking more and more about "splitting" Twig & Live component to be honest...

So this "extensible system" you suggest @kbond is for me a step in the "good" direction whatever we do next 👍

[kbond]

Hey @mbuliard, #1722 should be merged soon. Basically, what's going to be needed here is:

1. Add the new CLI option to LiveComponentDebugCommand (this will require some extension points to TwigComponentDebugCommand)
2. Add the new profiler logic to LiveComponentDataCollector (this will require some extension points to TwigComponentDataCollector)
3. Add new profiler info to live_component.html.twig

Making changes to Twig Components that are required by Live Components in the same PR is a bit tricky. You need to temporarily add the following to live component's composer.json while you're working on it:

"repositories": [
    {
        "type": "path",
        "url": "../TwigComponent"
    }
],

Then run composer update for live components.

I apologize in advance for the added complexity, I can definitely jump in and help if you run into problems.

[mbuliard]

Hi @kbond , thanks for the update.

I will rework my PR in the end of the week if yours is merged, otherwise it may be next week.

I hope to sort it out by myself, but will call for help if needed, thanks !

[kbond]

I hope to sort it out by myself, but will call for help if needed, thanks !

I'm hoping to resolve #1722 (comment) soon in a way that will make this PR easier.