[Bug] Arguments are lost when passed to Glimmer components via the {{component}} helper

[samselikoff]

🐞 Describe the Bug

The order in which named arguments are passed into the {{component}} helper seems to affect the values for corresponding properties on the this.args object if the referenced component is a Glimmer component.

In particular, all arguments other than the first one passed seem to not end up on the this.args object.

🔬 Minimal Reproduction

Here's a Twiddle: https://ember-twiddle.com/2fd6f1de858f527a8f29c9f31c4b7c5b?openFiles=templates.application%5C.hbs%2Ctemplates.components.my-component%5C.hbs

Note that in the first instance of my-component, this.args.one is "a" and this.args.two is undefined, while for the second instance, this.args.one is undefined and this.args.two is "b".

The only difference in the two invocations is the order the named arguments are passed.

😕 Actual Behavior

Only the first argument is assigned to the corresponding property on the this.args object.

🤔 Expected Behavior

All arguments are assigned to their corresponding properties on the this.args object.

🌍 Environment

• Ember: - 3.18.1

[rwjblue]

This is strange indeed!

[rwjblue]

One thing to note (generally speaking) is that you probably should not use this.args.xxx in templates (ember-template-lint's no-args-paths rule will flag that) and instead you should use @xxx (I assume you probably just did this for demonstration purposes though). This is totally orthogonal to the bug here though (it still doesn't work with {{@two}}).

As an aside, ember-template-lint@2 (current release) removes all "stylistic" rules (I recall you disliking the preferences RE: attribute/block indentation) and the recommended set focuses on prevent actual bugs (similarly to what eslint's recommended does now).

[samselikoff]

Ok good to know! And yes it was just for purposes of boiling it down to simplest example. In my EmberMap demo I was accessing this.args in an action (for purposes of routing). That’s ok right?

Also good to know re: updates to template-lint!

[rwjblue]

In my EmberMap demo I was accessing this.args in an action (for purposes of routing). That’s ok right?

Yep, absolutely! And regardless of {{this.args.xxx}} this should still work, it was just a semi-random aside.

[KrishnaRPatel]

To add to this strangeness, adding any one of a large subset of characters (any alphanumeric character, $, ?, and probably others I haven't tested) to the n+1th argument name will render the right property. Example: {{component 'my-component' one="a" $two="b"}} will render.

Even more strange, this seems to work if you stick to the {{this.args.propertyName}} syntax but not for @propertyName. I can't find exactly where the argument strings passed to the component helper are parsed just this moment but I'd love to tackle this if at all possible!

See the forked gist here with more arguments to highlight the difference: https://ember-twiddle.com/e8ada6977f22dcd91e2f533d9f654106?openFiles=templates.application%5C.hbs%2Ctemplates.components.my-component%5C.hbs

[mtrunt]

I also found this issue. After some debugging I found that all the attributes are passed, however the first character is removed for all the attributes after the first one.

e.g.

{{component "my-component"
  first=1
  second=2
  third=3
}}

will have the hash

{
  first: 1,
  econd: 2,
  hird: 3
}

Right now adding an extra character to the rest of the attributes, while not ideal, works fine.

[rwjblue]

The fix landed upstream, but reopening until we've landed the fix here in Ember.