Camelized Named arguments naming issue

[lifeart]

trafficstars

<@ItemComponent /> renders "OK", {{@ItemComponent}} -> throw error Assertion Failed: '@ItemComponent' is reserved. reproduction: Ember Twiddle

Refs: https://emberjs.github.io/rfcs/0276-named-args.html#reserved-names

It's really confusing if you missed this paragrath in RFC, should we update error message to point to RFC link or offer differen name? Instead of Assertion Failed: '@ItemComponent' is reserved. show something like this: Assertion Failed: '@ItemComponent' is reserved. RFC 276#reserved-names try change {componentName} attribute name from "ItemComponent" to "itemComponent".

[pixelhandler]

@lifeart I see how that using {{@ItemComponent}} like an argument value when ItemComponent` is a component should error. And that the error mentions that the variable is reserved. Perhaps it should just say "Cannot render X argument, did you intend to invoke a component? Change @X to X". It would be interesting if the template compiler did recognized the mistake. I'm not sure what should be the proper error.

[rwjblue]

Yes, the error message should at least be fleshed out a bit more. We should probably also at least consider if we really do want to reserve all initial capitalized named args (we originally did this speculatively).

[rwjblue]

/cc @chancancode for thoughts...

[chancancode]

I'm 👍 on linking to the RFC in the error message, on debug builds at least. I'm also open to revisiting the reserved names, it was definitely broader than it needed to be, but at the same time I'm not sure how else to predict what we may need here.

[chancancode]

By the way, should we at least make the passing side match the receiving side?

[locks]

Is this still relevant?

[amk221]

I'm experiencing this, with the following scenario:

<Foo @Bar={{@Bar}} />
{{! where Bar is a closure component }}

...which I have to work around like:

get Bar() {
  return this.args.Bar;
}

<Foo @Bar={{this.Bar}} />

Hopefully you can release it from being reserved, because I like using TitleCase for certain arguments.

[pzuraq]

This seems like something we may want to revisit in terms of reserving arg names, I think capital cased names are much going to make even more sense now and in the near future. @amk221 maybe consider opening an RFC to un-reserve these names?

And I agree, we should have a better error message here either way. Explanations of what is reserved in general.

[lifeart]

Related linting rule https://github.com/ember-template-lint/ember-template-lint/pull/1759

[amk221]

I'd also like to bring up @_ which is also reserved, it's natural to reach for an underscored argument, especially when building closure components.

example

// application.js
export default class extends Controller {
  @action
  handleChosingAThing() {
    // Main public usage
  }
}

// foo.js
export default class extends Component {
  @action
  handleChosingAThing() {
    // Internal usage of handling a thing
  }
}

{{! foo.hbs }}
{{yield (hash Bar=(component "bar" _onChoseAThing=this.handleChosingAThing))}}

{{! bar.hbs }}
<button {{on "click" @onChoseAThing}} {{on "click" @_onChoseAThing}}></button>

{{! application.hbs }}
<Foo as |foo|>
  <foo.Bar @onChoseAThing={{this.choseAThing}} />
</Foo>

[bertdeblock]

I made https://github.com/emberjs/rfcs/issues/803 as a first step for this. Feedback appreciated!