feat: add svelte/valid-each-key rule (#475)

Author: ota-meshi

.changeset/shy-moles-deliver.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat: add `svelte/valid-each-key` rule

README.md

@@ -350,6 +350,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/require-event-dispatcher-types](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-event-dispatcher-types/) | require type parameters for `createEventDispatcher` |  |
 | [svelte/require-optimized-style-attribute](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/) | require style attributes that can be optimized |  |
 | [svelte/require-stores-init](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-stores-init/) | require initial value in store |  |
+| [svelte/valid-each-key](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-each-key/) | enforce keys to use variables defined in the `{#each}` block |  |
 
 ## Stylistic Issues
 

docs/rules.md

@@ -63,6 +63,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/require-event-dispatcher-types](./rules/require-event-dispatcher-types.md) | require type parameters for `createEventDispatcher` |  |
 | [svelte/require-optimized-style-attribute](./rules/require-optimized-style-attribute.md) | require style attributes that can be optimized |  |
 | [svelte/require-stores-init](./rules/require-stores-init.md) | require initial value in store |  |
+| [svelte/valid-each-key](./rules/valid-each-key.md) | enforce keys to use variables defined in the `{#each}` block |  |
 
 ## Stylistic Issues
 

docs/rules/require-each-key.md

@@ -41,6 +41,10 @@ This rule reports `{#each}` block without key
 
 Nothing.
 
+## :couple: Related Rules
+
+- [svelte/valid-each-key](./valid-each-key.md)
+
 ## :books: Further Reading
 
 - [Svelte - Tutorial > 4. Logic / Keyed each blocks](https://svelte.dev/tutorial/keyed-each-blocks)

docs/rules/valid-each-key.md

@@ -0,0 +1,64 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "svelte/valid-each-key"
+description: "enforce keys to use variables defined in the `{#each}` block"
+---
+
+# svelte/valid-each-key
+
+> enforce keys to use variables defined in the `{#each}` block
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+This rule reports that `{#each}` block keys does not use the variables which are defined by the `{#each}` block.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/valid-each-key: "error" */
+
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+  let foo = 42
+</script>
+
+<!-- ✓ GOOD -->
+{#each things as thing (thing.id)}
+  <Thing name={thing.name} />
+{/each}
+
+<!-- ✗ BAD -->
+{#each things as thing (foo)}
+  <Thing name={thing.name} />
+{/each}
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [svelte/require-each-key](./require-each-key.md)
+
+## :books: Further Reading
+
+- [Svelte - Tutorial > 4. Logic / Keyed each blocks](https://svelte.dev/tutorial/keyed-each-blocks)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/src/rules/valid-each-key.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/tests/src/rules/valid-each-key.ts)

src/rules/valid-each-key.ts

@@ -0,0 +1,59 @@
+import type { AST } from "svelte-eslint-parser"
+import { createRule } from "../utils"
+import { getScope } from "../utils/ast-utils"
+
+export default createRule("valid-each-key", {
+  meta: {
+    docs: {
+      description:
+        "enforce keys to use variables defined in the `{#each}` block",
+      category: "Best Practices",
+      // TODO Switch to recommended in the major version.
+      recommended: false,
+    },
+    schema: [],
+    messages: {
+      keyUseEachVars:
+        "Expected key to use the variables which are defined by the `{#each}` block.",
+    },
+    type: "suggestion",
+  },
+  create(context) {
+    return {
+      SvelteEachBlock(node: AST.SvelteEachBlock) {
+        if (node.key == null) {
+          return
+        }
+        const scope = getScope(context, node.key)
+        for (const variable of scope.variables) {
+          if (
+            !variable.defs.some(
+              (def) =>
+                (node.context.range[0] <= def.name.range[0] &&
+                  def.name.range[1] <= node.context.range[1]) ||
+                (node.index &&
+                  node.index.range[0] <= def.name.range[0] &&
+                  def.name.range[1] <= node.index.range[1]),
+            )
+          ) {
+            // It's not an iteration variable.
+            continue
+          }
+          for (const reference of variable.references) {
+            if (
+              node.key.range[0] <= reference.identifier.range[0] &&
+              reference.identifier.range[1] <= node.key.range[1]
+            ) {
+              // A variable is used in the key.
+              return
+            }
+          }
+        }
+        context.report({
+          node: node.key,
+          messageId: "keyUseEachVars",
+        })
+      },
+    }
+  },
+})

src/utils/rules.ts

@@ -57,6 +57,7 @@ import sortAttributes from "../rules/sort-attributes"
 import spacedHtmlComment from "../rules/spaced-html-comment"
 import system from "../rules/system"
 import validCompile from "../rules/valid-compile"
+import validEachKey from "../rules/valid-each-key"
 import validPropNamesInKitPages from "../rules/valid-prop-names-in-kit-pages"
 
 export const rules = [
@@ -115,5 +116,6 @@ export const rules = [
   spacedHtmlComment,
   system,
   validCompile,
+  validEachKey,
   validPropNamesInKitPages,
 ] as RuleModule[]

tests/fixtures/rules/.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
     "one-var": "off",
     "func-style": "off",
     "no-console": "off",
+    "no-use-before-define": "off",
     "node/no-unsupported-features/es-syntax": "off",
 
     "@typescript-eslint/await-thenable": "off",

tests/fixtures/rules/valid-each-key/invalid/const-key01-errors.yaml

@@ -0,0 +1,4 @@
+- message: Expected key to use the variables which are defined by the `{#each}` block.
+  line: 11
+  column: 25
+  suggestions: null

tests/fixtures/rules/valid-each-key/invalid/const-key01-input.svelte

@@ -0,0 +1,14 @@
+<script>
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+</script>
+
+{#each things as thing (key)}
+  {@const key = thing.id}
+  {thing.name}
+{/each}

tests/fixtures/rules/valid-each-key/invalid/out-vars-key01-errors.yaml

@@ -0,0 +1,4 @@
+- message: Expected key to use the variables which are defined by the `{#each}` block.
+  line: 12
+  column: 25
+  suggestions: null

tests/fixtures/rules/valid-each-key/invalid/out-vars-key01-input.svelte

@@ -0,0 +1,14 @@
+<script>
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+  const foo = "key"
+</script>
+
+{#each things as thing (foo)}
+  {thing.name}
+{/each}

tests/fixtures/rules/valid-each-key/valid/call-key01-input.svelte

@@ -0,0 +1,16 @@
+<script>
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+  function fn(thing) {
+    return thing.id
+  }
+</script>
+
+{#each things as thing (fn(thing))}
+  {thing.name}
+{/each}

tests/fixtures/rules/valid-each-key/valid/destructure-key01-input.svelte

@@ -0,0 +1,13 @@
+<script>
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+</script>
+
+{#each things as { id, name } (id)}
+  {name}
+{/each}

tests/fixtures/rules/valid-each-key/valid/expression-key01-input.svelte

@@ -0,0 +1,13 @@
+<script>
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+</script>
+
+{#each things as thing (`thing_id=${thing.id}`)}
+  {thing.name}
+{/each}

tests/fixtures/rules/valid-each-key/valid/expression-key02-input.svelte

@@ -0,0 +1,14 @@
+<script>
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+  const foo = "thing_id="
+</script>
+
+{#each things as thing (foo + thing.id)}
+  {thing.name}
+{/each}

tests/fixtures/rules/valid-each-key/valid/index-key01-input.svelte

@@ -0,0 +1,13 @@
+<script>
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+</script>
+
+{#each things as thing, index (index)}
+  {thing.name}
+{/each}

tests/fixtures/rules/valid-each-key/valid/member-key01-input.svelte

@@ -0,0 +1,13 @@
+<script>
+  let things = [
+    { id: 1, name: "apple" },
+    { id: 2, name: "banana" },
+    { id: 3, name: "carrot" },
+    { id: 4, name: "doughnut" },
+    { id: 5, name: "egg" },
+  ]
+</script>
+
+{#each things as thing (thing.id)}
+  {thing.name}
+{/each}

tests/src/rules/valid-each-key.ts

@@ -0,0 +1,12 @@
+import { RuleTester } from "eslint"
+import rule from "../../../src/rules/valid-each-key"
+import { loadTestCases } from "../../utils/utils"
+
+const tester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+})
+
+tester.run("valid-each-key", rule as any, loadTestCases("valid-each-key"))