feat: add svelte/Infinite-reactive-loop rule (#332)

Co-authored-by: Yosuke Ota <[email protected]>

Author: baseballyama

.changeset/slimy-brooms-report.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat: add `svelte/Infinite-reactive-loop` rule

README.md

@@ -297,6 +297,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [svelte/infinite-reactive-loop](https://ota-meshi.github.io/eslint-plugin-svelte/rules/infinite-reactive-loop/) | Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent. |  |
 | [svelte/no-dom-manipulating](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dom-manipulating/) | disallow DOM manipulating |  |
 | [svelte/no-dupe-else-if-blocks](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks/) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
 | [svelte/no-dupe-on-directives](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-on-directives/) | disallow duplicate `on:` directives |  |

docs/rules.md

@@ -16,6 +16,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [svelte/infinite-reactive-loop](./rules/infinite-reactive-loop.md) | Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent. |  |
 | [svelte/no-dom-manipulating](./rules/no-dom-manipulating.md) | disallow DOM manipulating |  |
 | [svelte/no-dupe-else-if-blocks](./rules/no-dupe-else-if-blocks.md) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
 | [svelte/no-dupe-on-directives](./rules/no-dupe-on-directives.md) | disallow duplicate `on:` directives |  |

docs/rules/infinite-reactive-loop.md

@@ -0,0 +1,100 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "svelte/infinite-reactive-loop"
+description: "Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent."
+---
+
+# svelte/infinite-reactive-loop
+
+> Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent.
+
+- :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
+
+Svelte runtime prevents calling the same reactive statement twice in a microtask.<br/>
+But between different microtask, it doesn't prevent.<br/>
+This rule reports those possible infinite loop.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/infinite-reactive-loop: "error" */
+  import { count } from "./store.js"
+  import { tick } from "svelte"
+  let a = 0
+
+  // ✓ GOOD
+  $: if (a < 10) {
+    a += 1
+    $count += 1
+  }
+
+  $: (async () => {
+    // You can update a state in the same micro task.
+    a += 1
+    $count += 1
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  })()
+
+  $: (async () => {
+    await doSomething_ok()
+  })()
+
+  const doSomething_ok = async () => {
+    await fetchFromServer()
+    // You can update a state even in different microtask
+    // if you don't refer the state in reactive statement.
+    a += 1
+  }
+
+  // ✗ BAD
+  $: (async () => {
+    await doSomething()
+    // Do not update a state in different micro task.
+    a += 1
+    $count += 1
+  })()
+
+  $: tick(() => {
+    a = a + 1
+    $count += 1
+  })
+
+  $: (async () => {
+    console.log(a)
+    // This rule checks caller function recursively.
+    await doSomething_ng_1()
+  })()
+
+  const doSomething_ng_1 = async () => {
+    a += 1
+    await fetchFromServer()
+    doSomething_ng_2()
+  }
+
+  const doSomething_ng_2 = () => {
+    a += 1
+  }
+</script>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Svelte - Docs > COMPONENT FORMAT > 3. $: marks a statement as reactive](https://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive)
+- [Svelte - Docs > COMPONENT FORMAT > 4. Prefix stores with $ to access their values](https://svelte.dev/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/infinite-reactive-loop.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/infinite-reactive-loop.ts)

package.json

@@ -174,7 +174,7 @@
     "access": "public"
   },
   "typeCoverage": {
-    "atLeast": 99.05,
+    "atLeast": 99.08,
     "cache": true,
     "detail": true,
     "ignoreAsAssertion": true,