Add dollar-prefixed-store-uses-vars rule (#81)

Author: ota-meshi

README.md

@@ -302,6 +302,7 @@ These rules relate to this plugin works:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/comment-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/comment-directive/) | support comment-directives in HTML template | :star: |
+| [@ota-meshi/svelte/dollar-prefixed-store-uses-vars](https://ota-meshi.github.io/eslint-plugin-svelte/rules/dollar-prefixed-store-uses-vars/) | prevent $-prefixed variables to be marked as unused | :star: |
 | [@ota-meshi/svelte/system](https://ota-meshi.github.io/eslint-plugin-svelte/rules/system/) | system rule for working this plugin | :star: |
 
 <!--RULES_TABLE_END-->

docs/__layout.svelte

@@ -19,6 +19,7 @@
 
   import "../docs-svelte-kit/src/app.css"
   import "../docs-svelte-kit/src/site.css"
+  // eslint-disable-next-line no-unused-vars -- ignore
   import { tocStore } from "$lib/utils"
 
   export let moduleData
@@ -27,7 +28,7 @@
   $: fileInfo = moduleData.fileInfo
   $: {
     const toc = moduleData.toc
-    tocStore.update(() => toc)
+    $tocStore = toc
   }
 
   let sidebarOpen = false

docs/rules.md

@@ -70,4 +70,5 @@ These rules relate to this plugin works:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/comment-directive](./rules/comment-directive.md) | support comment-directives in HTML template | :star: |
+| [@ota-meshi/svelte/dollar-prefixed-store-uses-vars](./rules/dollar-prefixed-store-uses-vars.md) | prevent $-prefixed variables to be marked as unused | :star: |
 | [@ota-meshi/svelte/system](./rules/system.md) | system rule for working this plugin | :star: |

docs/rules/dollar-prefixed-store-uses-vars.md

@@ -0,0 +1,47 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "@ota-meshi/svelte/dollar-prefixed-store-uses-vars"
+description: "prevent $-prefixed variables to be marked as unused"
+---
+
+# @ota-meshi/svelte/dollar-prefixed-store-uses-vars
+
+> prevent $-prefixed variables to be marked as unused
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :gear: This rule is included in `"plugin:@ota-meshi/svelte/base"` and `"plugin:@ota-meshi/svelte/recommended"`.
+
+ESLint `no-unused-vars` rule does not detect store variables used as $-prefixed.
+This rule will find imported store variables that are used as $-prefixed and marks them as used.
+
+This rule only has an effect when the `no-unused-vars` rule is enabled.
+
+## :book: Rule Details
+
+Without this rule this code triggers warning:
+
+<ESLintCodeBlock rules="{ { 'no-unused-vars': ['error'] } }">
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint @ota-meshi/svelte/dollar-prefixed-store-uses-vars: "error" */
+  import { a } from "./my-stores"
+
+  // The variable doesn't look like it's being referenced, but it may be used externally.
+  $a = 42
+</script>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/dollar-prefixed-store-uses-vars.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/dollar-prefixed-store-uses-vars.ts)

src/configs/base.ts

@@ -11,6 +11,7 @@ export = {
 
         // @ota-meshi/eslint-plugin-svelte rules
         "@ota-meshi/svelte/comment-directive": "error",
+        "@ota-meshi/svelte/dollar-prefixed-store-uses-vars": "error",
         "@ota-meshi/svelte/system": "error",
       },
     },

src/configs/recommended.ts

@@ -7,6 +7,7 @@ export = {
   rules: {
     // @ota-meshi/eslint-plugin-svelte rules
     "@ota-meshi/svelte/comment-directive": "error",
+    "@ota-meshi/svelte/dollar-prefixed-store-uses-vars": "error",
     "@ota-meshi/svelte/no-at-debug-tags": "warn",
     "@ota-meshi/svelte/no-at-html-tags": "error",
     "@ota-meshi/svelte/no-dupe-else-if-blocks": "error",

src/rules/dollar-prefixed-store-uses-vars.ts

@@ -0,0 +1,44 @@
+import type * as ESTree from "estree"
+import { createRule } from "../utils"
+import { findVariable } from "../utils/ast-utils"
+
+export default createRule("dollar-prefixed-store-uses-vars", {
+  meta: {
+    docs: {
+      description: "prevent $-prefixed variables to be marked as unused",
+      category: "System",
+      recommended: "base",
+    },
+    schema: [],
+    messages: {},
+    type: "problem",
+  },
+  create(context) {
+    if (!context.parserServices.isSvelte) {
+      return {}
+    }
+
+    /** Process identifier */
+    function processId(node: ESTree.Identifier) {
+      const variable = findVariable(context, node)
+      if (!variable) {
+        return
+      }
+      for (const reference of variable.references) {
+        if (
+          reference.identifier.name.startsWith("$") &&
+          reference.identifier.name.slice(1) === node.name
+        ) {
+          context.markVariableAsUsed(node.name)
+          break
+        }
+      }
+    }
+
+    return {
+      "ImportDefaultSpecifier > Identifier": processId,
+      "ImportSpecifier > Identifier.local": processId,
+      "ImportNamespaceSpecifier > Identifier": processId,
+    }
+  },
+})

src/utils/rules.ts

@@ -1,6 +1,7 @@
 import type { RuleModule } from "../types"
 import buttonHasType from "../rules/button-has-type"
 import commentDirective from "../rules/comment-directive"
+import dollarPrefixedStoreUsesVars from "../rules/dollar-prefixed-store-uses-vars"
 import firstAttributeLinebreak from "../rules/first-attribute-linebreak"
 import htmlQuotes from "../rules/html-quotes"
 import indent from "../rules/indent"
@@ -24,6 +25,7 @@ import validCompile from "../rules/valid-compile"
 export const rules = [
   buttonHasType,
   commentDirective,
+  dollarPrefixedStoreUsesVars,
   firstAttributeLinebreak,
   htmlQuotes,
   indent,

tests/src/rules/dollar-prefixed-store-uses-vars.ts

@@ -0,0 +1,89 @@
+import { RuleTester, Linter } from "eslint"
+import rule from "../../../src/rules/dollar-prefixed-store-uses-vars"
+
+describe("dollar-prefixed-store-uses-vars", () => {
+  const ruleNoUnusedVars = new Linter().getRules().get("no-unused-vars")!
+  const tester = new RuleTester({
+    parser: require.resolve("svelte-eslint-parser"),
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: "module",
+    },
+  })
+  const linter = (tester as any).linter
+  linter.defineRule("dollar-prefixed-store-uses-vars", rule)
+  tester.run("no-unused-vars", ruleNoUnusedVars, {
+    valid: [
+      `
+      <script>
+        /* eslint dollar-prefixed-store-uses-vars: 2 */
+        import { a } from "./stores"
+        $a = 42
+      </script>
+      `,
+      `
+      <script>
+        /* eslint dollar-prefixed-store-uses-vars: 2 */
+        import { a as b } from "./stores"
+        $b = 42
+      </script>
+      `,
+      `
+      <script>
+        /* eslint dollar-prefixed-store-uses-vars: 2 */
+        import a from "./stores"
+        $a = 42
+      </script>
+      `,
+      `
+      <script>
+        /* eslint dollar-prefixed-store-uses-vars: 2 */
+        import * as a from "./stores"
+        $a = 42
+      </script>
+      `,
+    ],
+    invalid: [
+      {
+        code: `
+          <script>
+            /* eslint dollar-prefixed-store-uses-vars: 2 */
+            import { a } from "./stores"
+            $b = 42
+          </script>
+          `,
+        errors: 1,
+      },
+      {
+        code: `
+          <script>
+            /* eslint dollar-prefixed-store-uses-vars: 2 */
+            import { a as b } from "./stores"
+            $a = 42
+          </script>
+          `,
+        errors: 1,
+      },
+      {
+        code: `
+          <script>
+            /* eslint dollar-prefixed-store-uses-vars: 2 */
+            import a from "./stores"
+            $b = 42
+          </script>
+          `,
+        errors: 1,
+      },
+      {
+        code: `
+          <script>
+            /* eslint dollar-prefixed-store-uses-vars: 2 */
+            import * as a from "./stores"
+            $b = 42
+          </script>
+          `,
+        errors: 1,
+      },
+    ],
+  })
+})