Option to guess at better pathings? about ember-inspector HOT 6 OPEN

what could be the best way here?
The nicest one would be to check for 'node_modules' and if its there, take the path part after it.
But that would also no be entirely correct, so maybe take the last part to show as template path and add a tooltip to show the full path?

though embroider should already take care of the leading path to app dir:
https://github.com/embroider-build/embroider/blob/main/packages/shared-internals/src/hbs-to-js.ts#L30.

or should this be fixed in embroider to ouput the same as classic builds?
edit: might also be ember-template-imports doing it?
edit2: "right, ember-template-imports could fix this by passing in moduleName here like ember-cli-htmlbars
edit3: found also this: https://github.com/emberjs/babel-plugin-ember-template-compilation/blob/main/src/plugin.ts#L296

so, the goal is to have moduleName be the real path? however i would argue that that is not a moduleName then. or at least not a useful one with all the linking in between...

also, I also do not see a way to remove the leading path to the root dir... I think this should really be fixed in embroider and ember-template-imports

from ember-inspector.

The key question here is: why do we think templates need this special form of debugging info to point back at their source, when we don't expect the same from every javascript module?

That distinction used to make sense, because templates used to be entirely separate from javascript. But now they are just values inside javascript. moduleName isn't even enough to uniquely locate a template anymore, given that you can have dozens of template tags in one module.

The inspector feature here should be more like a "jump to source" button. If instead of embedding moduleName next to each compiled template we instead embedded a tiny function:

t.createTemplateFactory)({
        id: "efyYydg8",
        block: '[[[8,[39,0],null,null,null]],[],false,["four-oh-four"]]',
-       moduleName: "pdpm-calc/templates/404.hbs",
+       debugHandle: function() {},
        isStrictMode: !1
    })

then at runtime the inspector can do window.inspect(theComponent.debugHandle) and it will immediately open the Sources pane of the dev tools pointing directly at the right component.

(I think it has to be a function because window.inspect is good at jumping to sources of functions, but it can't necessarily do the same for other kinds of objects.)

from ember-inspector.

@ef4 I would be open to that.

from ember-inspector.

@ef4 good idea, but then moduleName should not be set if nothing is passed to the template compiler. Currently the template compiler sets it to a filename

from ember-inspector.

I'm creating an RFC issue to centralize discussion of this problem: emberjs/rfcs#940

from ember-inspector.

Wee may still need moduleName to support hot module replacement for components (in vite), at the moment we map changed component files to rendered components by moduleName resolved from getComponentTemplate or component itself. (https://github.com/lifeart/demo-ember-vite/blob/master/plugins/hot-reload.ts#L169)

from ember-inspector.