Add component path into HTML output

[ondrejsevcik]

Hi, I have a (hopefully) small feature request.

It would be very useful to have an HTML comment around the rendered Ember components (maybe even routes) with a path or a name of the component. It would look something like this:

<div>
  <!-- start-component: components/date-picker/simple -->
  <div> ... component html </div>
  <!-- end-component: components/date-picker/simple -->
</div>

This would be especially useful when you work on unknown codebase or you want to know where is this HTML produced from.

I know there is an Ember inspector with similar functionality, but it is not that nice to use and doesn't support all browsers.

Thanks for consideration

[rwjblue]

Seems like a neat idea to me, but new features are generally discussed in the https://github.com/emberjs/rfcs/ repository. I'm moving this issue over there to discuss further.

but it is not that nice to use

This isn't a very good way to give feedback. The Ember Inspector team would absolutely love to know ways that we can make the inspector better, I'd suggest opening an issue over on https://github.com/emberjs/ember-inspector with some concrete suggestions/pain points/etc so we can work together to make things better 😸.

[locks]

The Inspector team would specifically be interested in knowing which browsers are not supported!

[ondrejsevcik]

I think of this as a very basic and quick insight into the application structure. When I see some HTML that could be improved or should not be there, I have to open Ember Inspector and go through the component tree to find the one I'm looking for (The component view is not the same as HTML view). Ember Inspector seems like an overkill for this.

The Inspector team would specifically be interested in knowing which browsers are not supported!

The Bookmarklet doesn't work in Safari ATM.

[Panman82]

... I have to open Ember Inspector and go through the component tree to find the one I'm looking for ...

Sounds like you want some thing like; right-click somewhere on the page and select "Inspect with ember"? I'm not sure if that's possible, just my hot-take on your specific scenario.

[ondrejsevcik]

Basically yes, but it's a bit different workflow for me. I'm often playing around with HTML in the HTML view (adding some css, nodes, ...) and when I'm happy with that I would like to be able to go to that component in my editor and make those changes permanent.

[mehulkar]

This would also be awesome for debugging which version of a common addon component is being used. So the path would have to include which addon it's coming from.

Or this could be closed in favor of #454 (template imports)

[rwjblue]

TBH, I think we should absolutely do this for development builds. I'm not sure it specifically needs an RFC 🤔, but I'll check with the rest of the team to see what they think.

FWIW, we can't make it exactly the path on disk (yet), but we can absolutely show the "module name" (e.g. app-name-here/components/foo). The thing to nail down is to show the invoked name for shared templates, but TBH I think that is much less common recently.

[wagenet]

I'm closing this due to inactivity. This doesn't mean that the idea presented here is invalid, but that, unfortunately, nobody has taken the effort to spearhead it and bring it to completion. Please feel free to advocate for it if you believe that this is still worth pursuing. Thanks!