Interactivity API: Debug - Show directive names included in each Directives component on Preact’s debug tools

[cbravobernal]

What problem does this address?

#59829 mentions that enabling Preact Debug is possible.

However if you take a look at the tool, it seems it is not really descriptive.

What is your proposed solution?

Adding the directive names in each Directive component should make easier to spot the different components inside the Preact Application.

[cbravobernal]

One first issue to solve is what to do if the component has more than one directive 🤔

[cbravobernal]

After spending some time investigating how to do it. It seems that renaming the component is not possible, as the displayName will alway show the latest directive available in the HTML (as all components are a same function).

I tried using "key" and it works, but keys should not be used to check which directives are inside a Directive component. If the developer clicks each Component, it still appears on the right panel all the directives, it is not as quick as a first view, but it seems to be enough.

Creating our own debugging browser tool or extending the Preact one seems not to be the best option too.

I'm planning to close the PR with a won't do at the end of the week. But still, I'm happy to listen for feedback.

[luisherranz]

I am going to ask the Preact team.