[BUGFIX beta] Local variables should win over helpers

packages/@ember/-internals/glimmer/lib/helpers/-assert-implicit-component-helper-argument.ts

@@ -0,0 +1,36 @@
+import { DEBUG } from '@glimmer/env';
+import { Opaque } from '@glimmer/interfaces';
+import { Tag, VersionedPathReference } from '@glimmer/reference';
+import { Arguments, Helper, VM } from '@glimmer/runtime';
+import { Maybe } from '@glimmer/util';
+
+let helper: Maybe<Helper> = undefined;
+
+if (DEBUG) {
+  class ComponentAssertionReference implements VersionedPathReference<Opaque> {
+    public tag: Tag;
+
+    constructor(private component: VersionedPathReference<Opaque>, private message: string) {
+      this.tag = component.tag;
+    }
+
+    value(): Opaque {
+      let value = this.component.value();
+
+      if (typeof value === 'string') {
+        throw new TypeError(this.message);
+      }
+
+      return value;
+    }
+
+    get(property: string): VersionedPathReference<Opaque> {
+      return this.component.get(property);
+    }
+  }
+
+  helper = (_vm: VM, args: Arguments) =>
+    new ComponentAssertionReference(args.positional.at(0), args.positional.at(1).value() as string);
+}
+
+export default helper;

packages/@ember/-internals/glimmer/lib/resolver.ts

@@ -5,6 +5,7 @@ import { lookupComponent, lookupPartial, OwnedTemplateMeta } from '@ember/-inter
 import { EMBER_MODULE_UNIFICATION, GLIMMER_CUSTOM_COMPONENT_MANAGER } from '@ember/canary-features';
 import { assert } from '@ember/debug';
 import { _instrumentStart } from '@ember/instrumentation';
+import { DEBUG } from '@glimmer/env';
 import {
   ComponentDefinition,
   Opaque,
@@ -18,6 +19,7 @@ import { CurlyComponentDefinition } from './component-managers/curly';
 import { CustomManagerDefinition, ManagerDelegate } from './component-managers/custom';
 import { TemplateOnlyComponentDefinition } from './component-managers/template-only';
 import { isHelperFactory, isSimpleHelper } from './helper';
+import { default as componentAssertionHelper } from './helpers/-assert-implicit-component-helper-argument';
 import { default as classHelper } from './helpers/-class';
 import { default as htmlSafeHelper } from './helpers/-html-safe';
 import { default as inputTypeHelper } from './helpers/-input-type';
@@ -76,6 +78,10 @@ const BUILTINS_HELPERS = {
   '-outlet': outletHelper,
 };
 
+if (DEBUG) {
+  BUILTINS_HELPERS['-assert-implicit-component-helper-argument'] = componentAssertionHelper;
+}
+
 const BUILTIN_MODIFIERS = {
   action: { manager: new ActionModifierManager(), state: null },
 };

packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js

@@ -1387,6 +1387,98 @@ moduleFor(
         this.render('{{component (component "textarea" type="text")}}');
       }, 'You cannot use `textarea` as a component name.');
     }
+
+    ['@test GH#17121 local variable should win over helper (without arguments)']() {
+      this.registerHelper('foo', () => 'foo helper');
+
+      this.registerComponent('foo-bar', { template: 'foo-bar component' });
+
+      this.render(strip`
+        {{#let (component 'foo-bar') as |foo|}}
+          {{foo}}
+        {{/let}}
+      `);
+
+      this.assertText('foo-bar component');
+
+      this.assertStableRerender();
+    }
+
+    ['@test GH#17121 local variable should win over helper (with arguments)']() {
+      this.registerHelper('foo', params => `foo helper: ${params.join(' ')}`);
+
+      this.registerComponent('foo-bar', {
+        ComponentClass: Component.extend().reopenClass({
+          positionalParams: 'params',
+        }),
+        template: 'foo-bar component:{{#each params as |param|}} {{param}}{{/each}}',
+      });
+
+      this.render(strip`
+        {{#let (component 'foo-bar') as |foo|}}
+          {{foo 1 2 3}}
+        {{/let}}
+      `);
+
+      this.assertText('foo-bar component: 1 2 3');
+
+      this.assertStableRerender();
+    }
+
+    ['@test GH#17121 implicit component invocations should not perform string lookup'](assert) {
+      this.registerComponent('foo-bar', { template: 'foo-bar component' });
+
+      assert.throws(
+        () =>
+          this.render(strip`
+          {{#let 'foo-bar' as |foo|}}
+            {{foo 1 2 3}}
+          {{/let}}
+        `),
+        new TypeError(
+          "expected `foo` to be a contextual component but found a string. Did you mean `(component foo)`? ('-top-level' @ L1:C29) "
+        )
+      );
+    }
+
+    ['@test RFC#311 invoking named args (without arguments)']() {
+      this.registerComponent('x-outer', { template: '{{@inner}}' });
+      this.registerComponent('x-inner', { template: 'inner' });
+
+      this.render('{{x-outer inner=(component "x-inner")}}');
+
+      this.assertText('inner');
+
+      this.assertStableRerender();
+    }
+
+    ['@test RFC#311 invoking named args (with arguments)']() {
+      this.registerComponent('x-outer', { template: '{{@inner 1 2 3}}' });
+
+      this.registerComponent('x-inner', {
+        ComponentClass: Component.extend().reopenClass({
+          positionalParams: 'params',
+        }),
+        template: 'inner:{{#each params as |param|}} {{param}}{{/each}}',
+      });
+
+      this.render('{{x-outer inner=(component "x-inner")}}');
+
+      this.assertText('inner: 1 2 3');
+
+      this.assertStableRerender();
+    }
+
+    ['@test RFC#311 invoking named args (with a block)']() {
+      this.registerComponent('x-outer', { template: '{{#@inner}}outer{{/@inner}}' });
+      this.registerComponent('x-inner', { template: 'inner {{yield}}' });
+
+      this.render('{{x-outer inner=(component "x-inner")}}');
+
+      this.assertText('inner outer');
+
+      this.assertStableRerender();
+    }
   }
 );
 

packages/ember-template-compiler/lib/plugins/index.ts

@@ -7,7 +7,7 @@ import DeprecateSendAction from './deprecate-send-action';
 import TransformActionSyntax from './transform-action-syntax';
 import TransformAngleBracketComponents from './transform-angle-bracket-components';
 import TransformAttrsIntoArgs from './transform-attrs-into-args';
-import TransformDotComponentInvocation from './transform-dot-component-invocation';
+import TransformComponentInvocation from './transform-component-invocation';
 import TransformEachInIntoEach from './transform-each-in-into-each';
 import TransformHasBlockSyntax from './transform-has-block-syntax';
 import TransformInElement from './transform-in-element';
@@ -23,7 +23,7 @@ import { ASTPlugin, ASTPluginEnvironment } from '@glimmer/syntax';
 export type APluginFunc = (env: ASTPluginEnvironment) => ASTPlugin | undefined;
 
 const transforms: Array<APluginFunc> = [
-  TransformDotComponentInvocation,
+  TransformComponentInvocation,
   TransformAngleBracketComponents,
   TransformTopLevelComponents,
   TransformInlineLinkTo,