`#each` key is a pitfall

[brunnerh]

Describe the problem

Again and again people have issues with #each because they insert into/remove from/sort the source array without using a key.

Keys are explained both in the docs and the tutorial but maybe Svelte is just a bit too accessible because apparently people sometimes read neither. As a result they do not even know about keying.

Describe the proposed solution

I do not have a concrete solution to this but thought about some options:

• It could be enforced on the language level, e.g. by always requiring a key.
  The obvious downside would be that everything gets more verbose and it would be a breaking change.
• Maybe potential issues could be detected by code analysis.
  If not very reliably maybe only output dev-mode console warnings.
• Shift the issue to IDE language tooling, e.g. maybe an inlay hint could be shown when no key is specified, something like:
  
  Ideally that could be hover to show more information and maybe even clicked to insert a template like this, selecting the property name:
  (For people who don't want the additional noise, a configuration option would then be nice.)

Alternatives considered

(see above)

Importance

nice to have

[stephane-vanraes]

Wouldn't this be easily captured by a linting rule instead ? Also: could there be scenarios where a key is explicitly not desired, or should that maybe be covered with an 'empty' key ?

{#each list as item ()}

This also assumes all items in the list are unique, if this is a simple application that for example lists the first names of kids in the soccer ream you could easily have duplicate items:

const players = ["Stephane", "Simon", "Rich", "Simon", "Ben"]

[brunnerh]

Wouldn't this be easily captured by a linting rule instead ?

That way it would only help those that actually use a linter, not sure how common that is. I for one do not use one unless I have to.

Also: could there be scenarios where a key is explicitly not desired, or should that maybe be covered with an 'empty' key ?

{#each list as item ()}

This also assumes all items in the list are unique [...]

Not having a key should be equivalent to just using the index as far as I know, that way you also do not run into issues with duplicates. So the shortest current syntax when explicitly setting it would be something like:

{#each list as item, i (i)}

I guess there could be a special syntax for this, but to me having only () looks a bit like something is missing.

[sacrosanctic]

Wouldn't this be easily captured by a linting rule instead ?

a linting rule already exists

[sacrosanctic]

What is the current behaviour when a key is not specified?

[brunnerh]

Identity is based on index, so it's only safe to add to/remove from the end of the array.