With strict settings turned on, the template-stack when using the globals resolver becomes less meaningful

[NullVoxPopuli]

This was discovered here: #1336 (comment)
on this repo: https://github.com/rwwagner90/embroider-bug

I turned all the static flags off, got this error:

Error occurred:

- While rendering:
  -top-level
    application
      table-wrapper
        ember-table
          ember-tbody
            vertical-collection
              ember-table-private/row-wrapper
                ember-tr
                  ember-td

With the static flags on, some components lose their name:

Error occurred:

- While rendering:
  -top-level
    application
      TableWrapperComponent
        Class
          Class
            Class
              Class
                Class
                  Class

As an aside, a solution to this problem is to use gjs/gts everywhere

[ef4]

Do you get better results when using components in .gjs or .gts files without embroider?

If no, this is a more general ember problem.

If yes, we should figure out how to do a better job naming the functions and/or classes we are emitting that represent these components. For example, it looks like ember's templateOnlyComponent() takes optional arguments to aid in debugging, and we don't seem to be emitting them right now.

[NullVoxPopuli]

Was trying to make a more focused demo / reproduction for this, and found I related error:

( this repo @ fe748867387d995af09abff8321f2ade9f7562ad )

Easy reproduction -- forget to import on in a gjs file:

Error occurred:

- While rendering:
  -top-level
    application
      demo
        (unknown template-only component)

Uncaught ReferenceError: on is not defined

The code for this is:

// demo.gjs:
import TraditionalTO from './traditional-to';
import ModernTOJS from './modern-to-js';
import ModernTOTS from './modern-to-ts';

<template>
  <TraditionalTO /> -- < -- this is the one erroring -- just an hbs file
  <ModernTOJS /> -- empty
  <ModernTOTS /> -- empty

</template>

So, while TraditionalTO is just an hbs file, the contents are:

<ConditionalError @label="Traditional Template-Only">
  Yielded
</ConditionalError>

and ConditionalError is where the on import is missing from (and it's not a template-only component).
So, there is a layer missing from the stack, in addition to the template-only name missing.

[NullVoxPopuli]

with an intentionally thrown error, the template stack includes the gjs file:

Error occurred:

- While rendering:
  -top-level
    application
      demo
        (unknown template-only component)
          conditional-error

though, uses the hyphenated name / file name, rather than the class name. Maybe this is better anyway, since folks using the Ember component generator end up using ridiculous an unmanageable component names.

So, good news: gjs files in a template are identifiable with the strict flags turned off.

[NullVoxPopuli]

Now, when the intermediary component is a gjs/gts, the components with classes have proper names (not using the file name):

Error occurred:

- While rendering:
  -top-level
    application
      demo
        _modernToTs
          ConditionalError

But, the template-only gts file has a goofy name with a leading underscore

[NullVoxPopuli]

Ok, so the main branch of https://github.com/NullVoxPopuli/rwwagner-embroider-bug-ember-table-is-ancient has all the combinations I could think of, if you want to poke around.

tried to make it easy 🤷

[ef4]

I think the solution here is quite small and simple if somebody wants to send a PR:

In the few places where we emit calls to ember's templateOnlyComponent function, we should be passing its two optional arguments. Right now we don't pass them.

embroider/packages/addon-dev/src/rollup-hbs-plugin.ts

Line 56 in 565e9e5

`export default templateOnly();\n`;

embroider/packages/compat/src/synthesize-template-only-components.ts

Line 8 in 565e9e5

export default templateOnlyComponent();`;

[ef4]

The arguments are moduleName and name, which looks something like:

templateOnlyComponent('my-app/components/fancy-title-bar.js', 'fancy-title-bar')