Display better information in the component tree when you come across a `unknownTemplateOnlyComponent`

[mansona]

Now that people are using GJS by default, and we are using GJS for route templates the display of the components in the component tree isn't very useful

Having literally anything displayed here would be better, like a file path or something 🤷

Edit: It turns out that the screenshot above is what a vite app displays, in a classic app it just shows <Template>

[NullVoxPopuli]

How would rendering this be displayed?

<template>
  {{#each @formats as |format|}}
    <format />
  {{/each}}
</template>

Seems like logic would have to be:

• Invocation name if non-dynamic
• if dynamic reference:
  • defined class name, if a class
  • unknown-template-only-component
  • unless in dev: compiler could include the const name (though, maybe this goes in prod as well, in place of modulePath or whatever that field is called in the wire format

[patricklx]

Also related:

This is why i often add this babel plugin: https://github.com/ember-cli/ember-template-imports/blob/92738a3fe45e1639413fcb78233c0e146b02ade2/src/babel-plugin.js#L5

There is a long discussion here: https://github.com/emberjs/babel-plugin-ember-template-compilation/pull/58

Tldr is: We need to wait for a proper fix in glimmer. (And that will probably only happen after it's merged into ember-source)