passing true or false for an argument

[bgentry]

I noticed today that passing an argument as @fade=true actually results in a string value, i.e. "true" rather than the boolean true. I suppose this aligns with the RFC (https://github.com/emberjs/rfcs/pull/311), though it doesn't explicitly mention bools:

If the argument value is a constant string, it can appear verbatim after the equal sign, i.e. <FooBar @foo="some constant string" />. Other values should be enclosed in curlies, i.e. <FooBar @foo={{123}} @bar={{this.bar}} />. Helpers can also be used, as in <FooBar @foo={{capitalize this.bar}} />.

In order to pass a bool to my component, I need to do @fade={{true}}. I'm willing to be that a lot of people will be tripped up on this. I also couldn't find any record of it being discussed in the RFC PR.

Is it possible to allow users to directly pass true or false without curly brackets? Is that desirable?

Perhaps the RFC itself could be amended to clarify this point. While it's technically covered by "Other values", it's probably a common enough case to document explicitly either way. (cc @chancancode)

[rwjblue]

The current behavior is intentional, though I agree that it could seem a bit counter-intuitive. In the template context we are writing "html" which effectively only understands strings, if we want to pass anything else it must be inside curlies.

A very similar thing happens with normal HTML attributes (e.g. <div data-foo=something></div> ends up as data-foo="something").

[rwjblue]

I think the best solution here is:

• add a linting rule to forbid quoteless strings (this would have made @foo=something a linting failure, pointing out to you that it should either be in curlies or quoted)
• ensure that the learning team is aware of this issue, and incorporates some verbiage in the guides.emberjs.com revamp to use angle bracket invocation (once it lands in a stable release)

[rwjblue]

Created https://github.com/ember-template-lint/ember-template-lint/issues/456 to track adding the new linting rule for this.

[rwjblue]

The linting rule was created and enabled over in https://github.com/ember-template-lint/ember-template-lint/pull/461.