wip: suggest reactive statement in <script>

Also add a description

Author: tivac

src/rules/prefer-destructured-store-props.ts

@@ -1,10 +1,12 @@
 import type { TSESTree } from "@typescript-eslint/types"
+import type { AST } from "svelte-eslint-parser"
 import { createRule } from "../utils"
 
 export default createRule("prefer-destructured-store-props", {
   meta: {
     docs: {
-      description: "",
+      description:
+        "Destructure values from object stores for better change tracking & fewer redraws",
       category: "Best Practices",
       recommended: false,
     },
@@ -17,43 +19,60 @@ export default createRule("prefer-destructured-store-props", {
     type: "suggestion",
   },
   create(context) {
+    let script: AST.SvelteScriptElement
+    const reports: TSESTree.MemberExpression[] = []
+
     return {
+      [`SvelteScriptElement`](node: AST.SvelteScriptElement) {
+        script = node
+      },
+
       // {$foo.bar + baz}
       // should be
       // $: ({ bar } = $foo);
       // {bar + baz}
       [`MemberExpression[object.name=/^\\$/][property.type="Identifier"]`](
         node: TSESTree.MemberExpression,
       ) {
-        const store = (node.object as TSESTree.Identifier).name
-        const prop = (node.property as TSESTree.Identifier).name
+        reports.push(node)
+      },
 
-        return context.report({
-          node,
-          messageId: "useDestructuring",
-          data: {
-            store,
-            prop,
-          },
-          suggest: [
-            {
-              messageId: "fixUseDestructuring",
-              data: {
-                store,
-                prop,
-              },
+      [`Program:exit`]() {
+        reports.forEach((node) => {
+          const store = (node.object as TSESTree.Identifier).name
+          const prop = (node.property as TSESTree.Identifier).name
 
-              fix(fixer) {
-                return [
-                  fixer.insertTextBefore(
-                    node,
-                    `$: ({ ${prop} } = ${store});\n`,
-                  ),
-                  fixer.replaceText(node, prop),
-                ]
-              },
+          context.report({
+            node,
+            messageId: "useDestructuring",
+            data: {
+              store,
+              prop,
             },
-          ],
+            suggest: [
+              {
+                messageId: "fixUseDestructuring",
+                data: {
+                  store,
+                  prop,
+                },
+
+                fix(fixer) {
+                  if (!script || !script.endTag) {
+                    return []
+                  }
+
+                  return [
+                    fixer.insertTextAfterRange(
+                      [script.endTag.range[0], script.endTag.range[0]],
+                      `$: ({ ${prop} } = ${store});\n`,
+                    ),
+                    fixer.replaceText(node, prop),
+                  ]
+                },
+              },
+            ],
+          })
         })
       },
     }

tests/fixtures/rules/prefer-destructured-store-props/invalid/test01-errors.json

@@ -1,37 +1,37 @@
 [
   {
     "message": "Destructure bar from store $foo for better change tracking & fewer redraws",
-    "line": 2,
+    "line": 6,
     "column": 2,
     "suggestions": [
       {
         "desc": "Using destructuring like $: ({ bar } = $foo); will run faster",
         "messageId": "fixUseDestructuring",
-        "output": "<!-- prettier-ignore -->\n{$: ({ bar } = $foo);\nbar}\n{$foo[bar]}\n\n<!-- eslint-disable-next-line dot-notation -- tests -->\n{$foo.bar}\n"
+        "output": "<!-- prettier-ignore -->\n<script>\n\n$: ({ bar } = $foo);\n</script>\n\n{bar}\n{$foo[bar]}\n\n<!-- eslint-disable-next-line dot-notation -- tests -->\n{$foo.bar}\n"
       }
     ]
   },
   {
     "message": "Destructure bar from store $foo for better change tracking & fewer redraws",
-    "line": 3,
+    "line": 7,
     "column": 2,
     "suggestions": [
       {
         "desc": "Using destructuring like $: ({ bar } = $foo); will run faster",
         "messageId": "fixUseDestructuring",
-        "output": "<!-- prettier-ignore -->\n{$foo.bar}\n{$: ({ bar } = $foo);\nbar}\n\n<!-- eslint-disable-next-line dot-notation -- tests -->\n{$foo.bar}\n"
+        "output": "<!-- prettier-ignore -->\n<script>\n\n$: ({ bar } = $foo);\n</script>\n\n{$foo.bar}\n{bar}\n\n<!-- eslint-disable-next-line dot-notation -- tests -->\n{$foo.bar}\n"
       }
     ]
   },
   {
     "message": "Destructure bar from store $foo for better change tracking & fewer redraws",
-    "line": 6,
+    "line": 10,
     "column": 2,
     "suggestions": [
       {
         "desc": "Using destructuring like $: ({ bar } = $foo); will run faster",
         "messageId": "fixUseDestructuring",
-        "output": "<!-- prettier-ignore -->\n{$foo.bar}\n{$foo[bar]}\n\n<!-- eslint-disable-next-line dot-notation -- tests -->\n{$: ({ bar } = $foo);\nbar}\n"
+        "output": "<!-- prettier-ignore -->\n<script>\n\n$: ({ bar } = $foo);\n</script>\n\n{$foo.bar}\n{$foo[bar]}\n\n<!-- eslint-disable-next-line dot-notation -- tests -->\n{bar}\n"
       }
     ]
   }

tests/fixtures/rules/prefer-destructured-store-props/invalid/test01-input.svelte

@@ -1,4 +1,8 @@
 <!-- prettier-ignore -->
+<script>
+
+</script>
+
 {$foo.bar}
 {$foo[bar]}
 

tests/fixtures/rules/prefer-destructured-store-props/invalid/test02-errors.json

@@ -0,0 +1,20 @@
+[
+  {
+    "message": "Destructure bar from store $foo for better change tracking & fewer redraws",
+    "line": 2,
+    "column": 2,
+    "suggestions": null
+  },
+  {
+    "message": "Destructure bar from store $foo for better change tracking & fewer redraws",
+    "line": 3,
+    "column": 2,
+    "suggestions": null
+  },
+  {
+    "message": "Destructure bar from store $foo for better change tracking & fewer redraws",
+    "line": 6,
+    "column": 2,
+    "suggestions": null
+  }
+]

tests/fixtures/rules/prefer-destructured-store-props/invalid/test02-input.svelte

@@ -0,0 +1,6 @@
+<!-- prettier-ignore -->
+{$foo.bar}
+{$foo[bar]}
+
+<!-- eslint-disable-next-line dot-notation -- tests -->
+{$foo.bar}