Variables clash with element in test suite

[amk221]

🐞 Describe the Bug

Tests fail if variables clash with elements in the template

Example

await render(
  <template>
    <span>Hello World</span>
  </template>
);

const span = find('span');
assert.dom(span).hasText();

Cannot access 'span' before initialization

🔬 Minimal Reproduction

Minimal reproduction

😕 Actual Behavior

Test errors

🤔 Expected Behavior

I should be allowed to chose the variable name

🌍 Environment

• Ember: - 5.12
• Ember-CLI: - 5.12
• Node.js/npm: - 22.11
• OS: - mac
• Browser: - chrome

➕ Additional Context

Add any other context about the problem here.

[NullVoxPopuli]

thanks for reporting!

this is intended, and not a bug -- all locally defined variables are accessible within the <template>

[amk221]

Hmm,

I can understand that in traditional javascript, say like:

console.log(span); // ReferenceError: Cannot access 'span' before initialization
const span = ...

But in this case, the DOM Element, <span> happens to have the same name as one of my variables. Why should this even matter? I could maybe understand it if the template contained {{span}}.

[NullVoxPopuli]

I could maybe understand it if the template contained {{span}}.

it kinda does, like -- this is valid:

const span = find('span');

await render(
  <template>
    <span>Hello World</span> error -- undefined is not a component
  </template>
);


assert.dom(span).hasText();

because this is valid

const span = <template>
  <div>lol not a span {{yield}}</div>
</template>;

await render(
  <template>
    <span>Hello World</span> no error
  </template>
);

real-world use cases look more like this though:

import { GoogleHeader } from './brands/google';
import { GitHubHeader } from './brands/github';

const BRANDING_MAP = {
  'google': GoogleHeader,
  'github': GitHubHeader,
}

const branding = BRANDING_MAP[window.customer.name];

await render(
  <template>
    <branding>
      ...
    </branding>
  </template>
);

[amk221]

ok.
fwiw I raised the issue because it did work, and then one day after upgrading it didn't.

[NullVoxPopuli]

ah! the working was the bug -- see here for discussion:

• 2.2.2 breaking change: 'modifier' keyword is now overridden by local state babel-plugin-ember-template-compilation#39
• related: 2.2.2 breaking change: globals are now 'not in scope' for templates? babel-plugin-ember-template-compilation#38

the reason this had to happen is because we need to be able to safely introduce new keywords to the templating language without changing behavior of existing-imported things.

[amk221]

thank you for the context