add svelte/no-extra-reactive-curlies rule (#201)

* feat: add no-unnecessary-reactive-curlies rule

Porting rule from https://github.com/tivac/eslint-plugin-svelte project

* docs: rule documentation

* docs: remove since field

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

* chore: remove extraneous conflictWithPrettier

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

* fix: include comments in tokens

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

* docs: attribution

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

* wip: rename rule

Also tightened up matching based on feedback

* wip: make suggestions instead

Per conversation with @ota-meshi in the PR

* test: testing updates for suggestions change

* chore: yarn update outupt

* chore: remove carriage returns

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

Author: tivac

README.md

@@ -298,6 +298,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 | [svelte/indent](https://ota-meshi.github.io/eslint-plugin-svelte/rules/indent/) | enforce consistent indentation | :wrench: |
 | [svelte/max-attributes-per-line](https://ota-meshi.github.io/eslint-plugin-svelte/rules/max-attributes-per-line/) | enforce the maximum number of attributes per line | :wrench: |
 | [svelte/mustache-spacing](https://ota-meshi.github.io/eslint-plugin-svelte/rules/mustache-spacing/) | enforce unified spacing in mustache | :wrench: |
+| [svelte/no-extra-reactive-curlies](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-extra-reactive-curlies/) | disallow wrapping single reactive statements in curly braces |  |
 | [svelte/no-spaces-around-equal-signs-in-attribute](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-spaces-around-equal-signs-in-attribute/) | disallow spaces around equal signs in attribute | :wrench: |
 | [svelte/prefer-class-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/prefer-class-directive/) | require class directives instead of ternary expressions | :wrench: |
 | [svelte/prefer-style-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/prefer-style-directive/) | require style directives instead of style attribute | :wrench: |

docs/rules.md

@@ -58,6 +58,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 | [svelte/indent](./rules/indent.md) | enforce consistent indentation | :wrench: |
 | [svelte/max-attributes-per-line](./rules/max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
 | [svelte/mustache-spacing](./rules/mustache-spacing.md) | enforce unified spacing in mustache | :wrench: |
+| [svelte/no-extra-reactive-curlies](./rules/no-extra-reactive-curlies.md) | disallow wrapping single reactive statements in curly braces |  |
 | [svelte/no-spaces-around-equal-signs-in-attribute](./rules/no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: |
 | [svelte/prefer-class-directive](./rules/prefer-class-directive.md) | require class directives instead of ternary expressions | :wrench: |
 | [svelte/prefer-style-directive](./rules/prefer-style-directive.md) | require style directives instead of style attribute | :wrench: |

docs/rules/no-extra-reactive-curlies.md

@@ -0,0 +1,52 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "svelte/no-extra-reactive-curlies"
+description: "disallow wrapping single reactive statements in curly braces"
+---
+
+# svelte/no-extra-reactive-curlies
+
+> disallow wrapping single reactive statements in curly braces
+
+- :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 if curly brackets (`{` and `}`) are used unnecessarily around a reactive statement body containing only a single expression.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/no-extra-reactive-curlies: "error" */
+
+  /* ✓ GOOD */
+  $: foo = "red"
+
+  /* ✗ BAD */
+  $: {
+    foo = "red"
+  }
+</script>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing.
+
+## :heart: Compatibility
+
+This rule was taken from [@tivac/eslint-plugin-svelte].  
+This rule is compatible with `@tivac/svelte/reactive-curlies` rule.
+
+[@tivac/eslint-plugin-svelte]: https://github.com/tivac/eslint-plugin-svelte/
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/no-extra-reactive-curlies.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/no-extra-reactive-curlies.ts)

src/rules/no-extra-reactive-curlies.ts

@@ -0,0 +1,56 @@
+import type { TSESTree } from "@typescript-eslint/types"
+import { createRule } from "../utils"
+
+export default createRule("no-extra-reactive-curlies", {
+  meta: {
+    docs: {
+      description:
+        "disallow wrapping single reactive statements in curly braces",
+      category: "Stylistic Issues",
+      recommended: false,
+      conflictWithPrettier: false,
+    },
+    hasSuggestions: true,
+    schema: [],
+    messages: {
+      extraCurlies: `Do not wrap reactive statements in curly braces unless necessary.`,
+      removeExtraCurlies: `Remove the unnecessary curly braces.`,
+    },
+    type: "suggestion",
+  },
+  create(context) {
+    return {
+      // $: { foo = "bar"; }
+      [`SvelteReactiveStatement > BlockStatement[body.length=1]`]: (
+        node: TSESTree.BlockStatement,
+      ) => {
+        const source = context.getSourceCode()
+
+        return context.report({
+          node,
+          loc: node.loc,
+          messageId: "extraCurlies",
+          suggest: [
+            {
+              messageId: "removeExtraCurlies",
+              fix(fixer) {
+                const tokens = source.getTokens(node, { includeComments: true })
+
+                // Remove everything up to the second token, and the entire last token since
+                // those are known to be "{" and "}"
+                return [
+                  fixer.removeRange([tokens[0].range[0], tokens[1].range[0]]),
+
+                  fixer.removeRange([
+                    tokens[tokens.length - 2].range[1],
+                    tokens[tokens.length - 1].range[1],
+                  ]),
+                ]
+              },
+            },
+          ],
+        })
+      },
+    }
+  },
+})

src/utils/rules.ts

@@ -12,6 +12,7 @@ import noAtHtmlTags from "../rules/no-at-html-tags"
 import noDupeElseIfBlocks from "../rules/no-dupe-else-if-blocks"
 import noDupeStyleProperties from "../rules/no-dupe-style-properties"
 import noDynamicSlotName from "../rules/no-dynamic-slot-name"
+import noExtraReactiveCurlies from "../rules/no-extra-reactive-curlies"
 import noInnerDeclarations from "../rules/no-inner-declarations"
 import noNotFunctionHandler from "../rules/no-not-function-handler"
 import noObjectInTextMustaches from "../rules/no-object-in-text-mustaches"
@@ -45,6 +46,7 @@ export const rules = [
   noDupeElseIfBlocks,
   noDupeStyleProperties,
   noDynamicSlotName,
+  noExtraReactiveCurlies,
   noInnerDeclarations,
   noNotFunctionHandler,
   noObjectInTextMustaches,

tests/fixtures/rules/no-extra-reactive-curlies/invalid/test01-errors.json

@@ -0,0 +1,14 @@
+[
+  {
+    "message": "Do not wrap reactive statements in curly braces unless necessary.",
+    "line": 2,
+    "column": 6,
+    "suggestions": [
+      {
+        "desc": "Remove the unnecessary curly braces.",
+        "messageId": "removeExtraCurlies",
+        "output": "<script>\n  $: foo = info\n</script>\n"
+      }
+    ]
+  }
+]

tests/fixtures/rules/no-extra-reactive-curlies/invalid/test01-input.svelte

@@ -0,0 +1,5 @@
+<script>
+  $: {
+    foo = info
+  }
+</script>

tests/fixtures/rules/no-extra-reactive-curlies/invalid/test02-errors.json

@@ -0,0 +1,14 @@
+[
+  {
+    "message": "Do not wrap reactive statements in curly braces unless necessary.",
+    "line": 3,
+    "column": 6,
+    "suggestions": [
+      {
+        "desc": "Remove the unnecessary curly braces.",
+        "messageId": "removeExtraCurlies",
+        "output": "<!-- prettier-ignore -->\n<script>\n  $: foo = info;\n</script>\n"
+      }
+    ]
+  }
+]

tests/fixtures/rules/no-extra-reactive-curlies/invalid/test02-input.svelte

@@ -0,0 +1,4 @@
+<!-- prettier-ignore -->
+<script>
+  $: { foo = info; }
+</script>

tests/fixtures/rules/no-extra-reactive-curlies/valid/test01-input.svelte

@@ -0,0 +1,5 @@
+<!-- prettier-ignore -->
+<script>
+  $: foo1 = "bar"
+  $: foo2 = "bar";
+</script>

tests/fixtures/rules/no-extra-reactive-curlies/valid/test02-input.svelte

@@ -0,0 +1,6 @@
+<script>
+  $: {
+    foo = info
+    bar = something
+  }
+</script>

tests/src/rules/no-extra-reactive-curlies.ts

@@ -0,0 +1,16 @@
+import { RuleTester } from "eslint"
+import rule from "../../../src/rules/no-extra-reactive-curlies"
+import { loadTestCases } from "../../utils/utils"
+
+const tester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+})
+
+tester.run(
+  "no-extra-reactive-curlies",
+  rule as any,
+  loadTestCases("no-extra-reactive-curlies"),
+)