[RFC] Component names

[HugoDF]

Created an issue to do what's described below: #216

We've added a concept of "component names" based on this initial issue: #28

I think it's probably worth revisiting, it might be better to display <div x-data="foo()" id="bar" role="combobox"> so that the component looks like the HTML it's pulled from (opposed to trying to compute a nice name from something that might not be designed to display nicely)

We could start with the current list of supported "id" attributes:

• x-title
• x-id
• id
• name
• wire:id
• live view name (phx-view="name")
• aria-label
• x-data function name
• role

See current code: https://github.com/alpine-collective/alpinejs-devtools/blob/master/packages/shell-chrome/src/utils.js#L230-L243

We could probably make it configurable through the settings + limit the number of attributes we're displaying (tag name + x-data + 2-3 attributes), some attributes like id and wire:id will tend to be unique, that should be enough to allow users to know which component is which.

[KevinBatdorf]

You mean something like <tagName [id attribute]>? So <div x-title="My Component"> instead of just <My Component>

[HugoDF]

yep

we probably would need to do some magic formatting of x-data, if it's object notation, eg. x-data="{...}" then display x-data="{ ... }" as a placeholder, if it's a function, then display that