New rule request: require-each-key

We were having huge performance issues in our projects when rendering table rows.

In our case, a single change to a single table cell was causing all rows to rerender, which was blocking the main thread for up to more than a second.

After an investigation I found out that it was a problem with how we use {{#each}}.

After we added key to all our eaches, Ember stopped rerendering all rows, but only the ones that actually needed to be updated.

For example, in one of the cases (selecting a table row via clicking a checkbox) resulted in a 10x performance increase (from ~300 ms down to ~30 ms).

This is applicable not only to tables, but to any usage of {{#each}}.

I would like to have a rule that will require to always use key with {{#each}}.

Examples of valid code:

{{#each this.items key="id" as |item|}}
  {{item.name}}
{{/each}}

{{#each this.items key="deeply.nested.id" as |item|}}
  {{item.name}}
{{/each}}

{{#each this.items key="@index" as |item|}}
  {{item.name}}
{{/each}}

{{#each this.items key="@identity" as |item|}}
  {{item.name}}
{{/each}}

Examples of invalid code:

{{#each this.items as |item|}}
  {{item.name}}
{{/each}}

{{#each this.items key="@invalid" as |item|}}
  {{item.name}}
{{/each}}

[EvgenyOrekhov]

@rajasegar According to the documentation, the only valid “special” keys (with the @ symbol) are @index and @identity.

[EvgenyOrekhov]

Added key="deeply.nested.id" example to the issue description.