Add `debug:component` command #1088

StevenRenaux · 2023-09-01T11:31:33Z

Q	A
Bug fix?	no
New feature?	yes
Tickets	#102
License	MIT

Related to the Future Ideas section of #102
I added a debug:component command.

Debugging component

The debug:component command lists all your application components (TwigComponent and LiveComponent) who lives in templates/components directory:

$ php bin/console debug:component

+---------------+-----------------------------+------------------------------------+
| Component     | Class                       | Template                           |
+---------------+-----------------------------+------------------------------------+
| Coucou        | App\Components\Alert        | components/Coucou.html.twig        |
| RandomNumber  | App\Components\RandomNumber | components/RandomNumber.html.twig  |
| Test          | App\Components\foo\Test     | components/foo/Test.html.twig      |
| Button        | Anonymous component         | components/Button.html.twig        |
| foo:Anonymous | Anonymous component         | components/foo/Anonymous.html.twig |
+---------------+-----------------------------+------------------------------------+

Pass the name of some component to this argument to print the component details:

$ php bin/console debug:component Test

+---------------------------------------------------+-------------------------------+
| Property                                          | Value                         |
+---------------------------------------------------+-------------------------------+
| Component                                         | Test                          |
| Class                                             | App\Components\foo\Test       |
| Template                                          | components/foo/Test.html.twig |
| Properties (type / name / default value if exist) | string $type = success        |
|                                                   | string $message               |
+---------------------------------------------------+-------------------------------+

To get the details about an anonymous component who is rendered with sub directory, just add it to the name:

    <div>
        <twig:foo:Anonymous label="Click Me!" :disabled="true" />
    </div>

$ php bin/console debug:component foo:Anonymous

+--------------------------------------------+------------------------------------+
| Property                                   | Value                              |
+--------------------------------------------+------------------------------------+
| Component                                  | foo:Anonymous                      |
| Class                                      | Anonymous component                |
| Template                                   | components/foo/Anonymous.html.twig |
| Properties (name / default value if exist) | label                              |
|                                            | name = toto                        |
+--------------------------------------------+------------------------------------+

kbond

This is great work @StevenRenaux!

Couple things:

In the listing of components, could you add a Live? (yes/no) column?
When showing details about a component, can you indicate whether it is live or not?
Also in the details, can you list the live props?

kbond · 2023-09-01T13:54:46Z

Could you also add a section to the docs (twig & live)

StevenRenaux · 2023-09-01T14:05:30Z

@kbond I will try to work on your suggestions

In the listing of components, could you add a Live?
I suggest to add a column Type directly with AsTwigComponent, AsLiveComponent or empty if Anonymous.
I can get it with the ReflectionClass and the method getAttributes.
When showing details about a component, can you indicate whether it is live or not?
As I suggest for the 1. I can add a property Type
Also in the details, can you list the live props?
I can try to divide in two sections the Props part like Properties (name / default value if exist) and after Live Properties
Could you also add a section to the docs (twig & live)
Yeah it will be a TODO ;)

kbond · 2023-09-01T17:35:38Z

Sounds good!

I can get it with the ReflectionClass and the method getAttributes.

I think this is available in the metadata (has a live key) - this would be a more robust way to check.

StevenRenaux · 2023-09-04T09:33:48Z

Hi @kbond

I updated the code with your suggestions.
To know if it's a LiveComponent I used $metadata->get('live') as you suggested to get one asked component.
But to get the list of all of them I was originaly in a loop after a $reflectionClass->getAttributes() so I took the position to just make a check if the attribute depend on AsTwigComponent::class or AsLiveComponent::class. Let me know if I also need to update this part 😉

For one component :

$ php bin/console debug:component RandomNumber
+---------------------------------------------------+-----------------------------------+
| Property                                          | Value                             |
+---------------------------------------------------+-----------------------------------+
| Component                                         | RandomNumber                      |
| Type                                              | AsLiveComponent                   |
| Class                                             | App\Components\RandomNumber       |
| Template                                          | components/RandomNumber.html.twig |
| Properties (type / name / default value if exist) | string $name = toto               |
|                                                   | string $type = test               |
| Live Properties                                   | int $max = 1000                   |
|                                                   | int $min = 10                     |
+---------------------------------------------------+-----------------------------------+

And for all :

$ php bin/console debug:component
+---------------+-----------------------------+------------------------------------+-----------------+
| Component     | Class                       | Template                           | Type            |
+---------------+-----------------------------+------------------------------------+-----------------+
| Coucou        | App\Components\Alert        | components/Coucou.html.twig        | AsTwigComponent |
| RandomNumber  | App\Components\RandomNumber | components/RandomNumber.html.twig  | AsLiveComponent |
| Test          | App\Components\foo\Test     | components/foo/Test.html.twig      | AsTwigComponent |
| Button        | Anonymous component         | components/Button.html.twig        |                 |
| foo:Anonymous | Anonymous component         | components/foo/Anonymous.html.twig |                 |
+---------------+-----------------------------+------------------------------------+-----------------+

WebMamba

Whoooo thanks a lot for it @StevenRenaux! 🧡

src/TwigComponent/src/Command/ComponentDebugCommand.php

WebMamba · 2023-09-04T09:11:55Z

src/TwigComponent/composer.json

@@ -34,6 +34,7 @@
        "twig/twig": "^2.14.7|^3.0.4"
    },
    "require-dev": {
+        "symfony/console": "^5.4|^6.0",


Is it the right place to add this command? Maybe in the StimulusBundle?

Doesn't know either and it's the reason why i putted here

src/TwigComponent/src/Command/ComponentDebugCommand.php

WebMamba · 2023-09-04T09:37:15Z

src/TwigComponent/src/Command/ComponentDebugCommand.php

+            $class = $metadata->get('class');
+            $allProperties = [];
+
+            if ($class) {


I think it can be useful to display:

properties with the ExposeInTemplate attribute, and if the name is set show the name.

if the component has a mount, premount, and postmount hooks

And for LiveConponents:

as @kbond said show if the components is live

show live props

show live actions

src/TwigComponent/src/Command/ComponentDebugCommand.php

kbond · 2023-09-07T15:01:10Z

But to get the list of all of them I was originaly in a loop after a $reflectionClass->getAttributes() so I took the position to just make a check if the attribute depend on AsTwigComponent::class or AsLiveComponent::class. Let me know if I also need to update this part 😉

The issue with using these attributes is components can be registered without (ie 3rd party bundle registering components purely with a tag).

StevenRenaux · 2023-09-11T07:38:41Z

But to get the list of all of them I was originaly in a loop after a $reflectionClass->getAttributes() so I took the position to just make a check if the attribute depend on AsTwigComponent::class or AsLiveComponent::class. Let me know if I also need to update this part 😉

The issue with using these attributes is components can be registered without (ie 3rd party bundle registering components purely with a tag).

Updated as you submitted ;)

StevenRenaux · 2023-09-11T07:40:52Z

I was thinking about this part too... What about a command option to customize (with /components being the default)?

If you want components with a specific dir:


php bin/console debug:twig-component --dir=bar
+----------------+-------------------------------+------------------------------+-----------------+
| Component      | Class                         | Template                     | Type            |
+----------------+-------------------------------+------------------------------+-----------------+
| OtherDirectory | App\Components\OtherDirectory | bar/OtherDirectory.html.twig | AsTwigComponent |
+----------------+-------------------------------+------------------------------+-----------------+

weaverryan

This is cool! Though, tbh, it makes me wish we had more centralized ways to get metadata about a component. It feels like we are reimplementing a lot of logic - like for finding what public properties will be made into variables, etc.

src/TwigComponent/src/Command/ComponentDebugCommand.php

kbond

Agree with Ryan there's a lot of duplication but this can be refactored to some kind of metadata registry.

We should probably do this sooner, rather than later so things don't get out of sync. For now, it's out of the scope of this PR.

WebMamba · 2023-09-15T14:25:54Z

Yes I was thinking the same thing when I read for the first time this PR. Thanks @StevenRenaux for digging into all of this

weaverryan · 2023-09-19T22:20:03Z

Ok then. But I'll be watching for some PR's to centralize some of that stuff ;).

@StevenRenaux Can you fix the conflict? I can usually do that with our merge tool, but the rebase is looking oddly ugly.

StevenRenaux · 2023-09-20T07:20:33Z

@weaverryan Conflict resolution done and let me know when it will be done and I will update this command 😉

weaverryan · 2023-09-22T12:42:11Z

Thank you for your hard work Steven and congrats on this great PR. I forgot that I hadn't merged it yet, and I was needing it yesterday and trying to use it. So today my work will be better ;)

StevenRenaux force-pushed the add-component-debug-command branch from d103520 to d67f8bd Compare September 1, 2023 11:41

kbond reviewed Sep 1, 2023

View reviewed changes

WebMamba reviewed Sep 4, 2023

View reviewed changes

94noni reviewed Sep 5, 2023

View reviewed changes

src/TwigComponent/src/Command/ComponentDebugCommand.php Outdated Show resolved Hide resolved

StevenRenaux force-pushed the add-component-debug-command branch 2 times, most recently from 31fc8b8 to dd1121f Compare September 7, 2023 07:48

StevenRenaux requested review from WebMamba and kbond September 7, 2023 08:38

StevenRenaux force-pushed the add-component-debug-command branch from 963bc37 to 4defd26 Compare September 11, 2023 07:35

OskarStark changed the title ~~Add debug:component command~~ Add debug:component command Sep 12, 2023

weaverryan reviewed Sep 13, 2023

View reviewed changes

StevenRenaux requested a review from weaverryan September 15, 2023 07:07

kbond approved these changes Sep 15, 2023

View reviewed changes

Add debug:component command

9d2108b

weaverryan force-pushed the add-component-debug-command branch from 9725943 to 9d2108b Compare September 22, 2023 12:41

weaverryan merged commit 44d5d6b into symfony:2.x Sep 22, 2023
37 of 38 checks passed

WebMamba mentioned this pull request Oct 4, 2023

[LiveComponent] Add debug:live-component command #1163

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `debug:component` command #1088

Add `debug:component` command #1088

StevenRenaux commented Sep 1, 2023

kbond left a comment

kbond commented Sep 1, 2023

StevenRenaux commented Sep 1, 2023 •

edited

Loading

kbond commented Sep 1, 2023

StevenRenaux commented Sep 4, 2023 •

edited

Loading

WebMamba left a comment

WebMamba Sep 4, 2023

StevenRenaux Sep 7, 2023

WebMamba Sep 4, 2023

StevenRenaux Sep 7, 2023

kbond commented Sep 7, 2023 •

edited

Loading

StevenRenaux commented Sep 11, 2023

StevenRenaux commented Sep 11, 2023

weaverryan left a comment

kbond left a comment

WebMamba commented Sep 15, 2023

weaverryan commented Sep 19, 2023

StevenRenaux commented Sep 20, 2023

weaverryan commented Sep 22, 2023

Add debug:component command #1088

Add debug:component command #1088

Conversation

StevenRenaux commented Sep 1, 2023

Debugging component

kbond left a comment

Choose a reason for hiding this comment

kbond commented Sep 1, 2023

StevenRenaux commented Sep 1, 2023 • edited Loading

kbond commented Sep 1, 2023

StevenRenaux commented Sep 4, 2023 • edited Loading

WebMamba left a comment

Choose a reason for hiding this comment

WebMamba Sep 4, 2023

Choose a reason for hiding this comment

StevenRenaux Sep 7, 2023

Choose a reason for hiding this comment

WebMamba Sep 4, 2023

Choose a reason for hiding this comment

StevenRenaux Sep 7, 2023

Choose a reason for hiding this comment

kbond commented Sep 7, 2023 • edited Loading

StevenRenaux commented Sep 11, 2023

StevenRenaux commented Sep 11, 2023

weaverryan left a comment

Choose a reason for hiding this comment

kbond left a comment

Choose a reason for hiding this comment

WebMamba commented Sep 15, 2023

weaverryan commented Sep 19, 2023

StevenRenaux commented Sep 20, 2023

weaverryan commented Sep 22, 2023

Add `debug:component` command #1088

Add `debug:component` command #1088

StevenRenaux commented Sep 1, 2023 •

edited

Loading

StevenRenaux commented Sep 4, 2023 •

edited

Loading

kbond commented Sep 7, 2023 •

edited

Loading