Support key option in each-in helper

[LanceStasinski]

The key option in the {{#each}} and {{#each-in}} helpers are useful for improved rendering of elements generated by arrays and objects. Currently, glint supports key the {{#each}} helper, but it is not supported for {{#each-in}}. For example

get object() {
  return {
    first: [1, 2, 3],
    second: [4, 5, 6],
    third: [7, 8, 9]
  }
}

{{#each-in this.object key='@key' as |key value|}}
  <div>{{key}}: {{value}}</div>
{{/each}}

produces this typescript error:

Argument of type '{ key: string; }' is not assignable to parameter of type 'EmptyObject'. Object literal may only specify known properties, and 'key' does not exist in type 'EmptyObject'.

The key='@key' syntax is supported by glimmer and is mentioned by this bugfix (admittedly, there's not a whole lot of documentation of the key option for the {{#each-in}} helper.)

[chriskrycho]

I've marked this as a bug, and if we confirm that it's intended as public API, we should likely implement it, but it's definitely not documented anywhere! That could just be a miss—it's possible it was intended for it to be added by emberjs/ember.js#16399 (as you linked), and just no docs were added for it. However, it's also possible that it's in the bucket of "is intended to work but is not public API" and in that case we should not implement it!

[nwhittaker]

FWIW it is mentioned in Ember's changelog¹:

emberjs/ember.js#16399 [BUGFIX] {{#each-in}} now correctly handles key="@index" (using the index/position). The new key="@key" option uses the item's key.

Footnotes

1. https://github.com/emberjs/ember.js/blob/master/CHANGELOG.md#v320-may-31-2018 ↩

[chriskrycho]

I also confirmed with @rwjblue that it's intended to work. A PR would be most welcome!