Add no-react-deps rule

Author: joshwilsonvu

README.md

@@ -131,6 +131,7 @@ const [editedValue, setEditedValue] = createSignal(props.value);
 | ✔ | 🔧 | [solid/no-destructure](docs/no-destructure.md) | Disallow destructuring props. In Solid, props must be used with property accesses (`props.foo`) to preserve reactivity. This rule only tracks destructuring in the parameter list. |
 | ✔ | 🔧 | [solid/no-innerhtml](docs/no-innerhtml.md) | Disallow usage of the innerHTML attribute, which can often lead to security vulnerabilities. |
 |  |  | [solid/no-proxy-apis](docs/no-proxy-apis.md) | Disallow usage of APIs that use ES6 Proxies, only to target environments that don't support them. |
+| ✔ | 🔧 | [solid/no-react-deps](docs/no-react-deps.md) | Disallow usage of dependency arrays in createEffect and createMemo. |
 | ✔ | 🔧 | [solid/no-react-specific-props](docs/no-react-specific-props.md) | Disallow usage of React-specific `className`/`htmlFor` props, which were deprecated in v1.4.0. |
 | ✔ |  | [solid/no-unknown-namespaces](docs/no-unknown-namespaces.md) | Enforce using only Solid-specific namespaced attribute names (i.e. `'on:'` in `<div on:click={...} />`). |
 |  | 🔧 | [solid/prefer-classlist](docs/prefer-classlist.md) | Enforce using the classlist prop over importing a classnames helper. The classlist prop accepts an object `{ [class: string]: boolean }` just like classnames. |

docs/no-react-deps.md

@@ -0,0 +1,78 @@
+<!-- AUTO-GENERATED-CONTENT:START (HEADER) -->
+# solid/no-react-deps
+Disallow usage of dependency arrays in createEffect and createMemo.
+This rule is **a warning** by default.
+
+[View source](../src/rules/no-react-deps.ts) · [View tests](../test/rules/no-react-deps.test.ts)
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+<!-- AUTO-GENERATED-CONTENT:START (OPTIONS) -->
+ 
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+<!-- AUTO-GENERATED-CONTENT:START (CASES) -->
+## Tests
+
+### Invalid Examples
+
+These snippets cause lint errors, and all of them can be auto-fixed.
+
+```js
+createEffect(() => {
+  console.log(signal());
+}, [signal()]);
+// after eslint --fix:
+createEffect(() => {
+  console.log(signal());
+});
+ 
+createEffect(() => {
+  console.log(signal());
+}, [signal]);
+// after eslint --fix:
+createEffect(() => {
+  console.log(signal());
+});
+ 
+const value = createMemo(() => computeExpensiveValue(a(), b()), [a(), b()]);
+// after eslint --fix:
+const value = createMemo(() => computeExpensiveValue(a(), b()));
+ 
+const value = createMemo(() => computeExpensiveValue(a(), b()), [a, b]);
+// after eslint --fix:
+const value = createMemo(() => computeExpensiveValue(a(), b()));
+ 
+const value = createMemo(() => computeExpensiveValue(a(), b()), [a, b()]);
+// after eslint --fix:
+const value = createMemo(() => computeExpensiveValue(a(), b()));
+ 
+```
+
+### Valid Examples
+
+These snippets don't cause lint errors.
+
+```js
+createEffect(() => {
+  console.log(signal());
+});
+
+createEffect((prev) => {
+  console.log(signal() + prev);
+}, 0);
+
+const value = createMemo(() => computeExpensiveValue(a(), b()));
+
+const sum = createMemo((prev) => input() + prev, 0);
+
+const args = [
+  () => {
+    console.log(signal());
+  },
+  [signal()],
+];
+createEffect(...args);
+
+```
+<!-- AUTO-GENERATED-CONTENT:END -->

src/index.ts

@@ -8,6 +8,7 @@ import jsxUsesVars from "./rules/jsx-uses-vars";
 import noDestructure from "./rules/no-destructure";
 import noInnerHTML from "./rules/no-innerhtml";
 import noProxyApis from "./rules/no-proxy-apis";
+import noReactDeps from "./rules/no-react-deps";
 import noReactSpecificProps from "./rules/no-react-specific-props";
 import noUnknownNamespaces from "./rules/no-unknown-namespaces";
 import preferClasslist from "./rules/prefer-classlist";
@@ -29,6 +30,7 @@ const allRules = {
   "no-destructure": noDestructure,
   "no-innerhtml": noInnerHTML,
   "no-proxy-apis": noProxyApis,
+  "no-react-deps": noReactDeps,
   "no-react-specific-props": noReactSpecificProps,
   "no-unknown-namespaces": noUnknownNamespaces,
   "prefer-classlist": preferClasslist,
@@ -76,6 +78,7 @@ const plugin = {
         // these rules are mostly style suggestions
         "solid/imports": 1,
         "solid/style-prop": 1,
+        "solid/no-react-deps": 1,
         "solid/no-react-specific-props": 1,
         "solid/self-closing-comp": 1,
         // handled by Solid compiler, opt-in style suggestion
@@ -109,6 +112,7 @@ const plugin = {
         // these rules are mostly style suggestions
         "solid/imports": 1,
         "solid/style-prop": 1,
+        "solid/no-react-deps": 1,
         "solid/no-react-specific-props": 1,
         "solid/self-closing-comp": 1,
         // namespaces taken care of by TS

src/rules/no-react-deps.ts

@@ -0,0 +1,55 @@
+import type { TSESLint } from "@typescript-eslint/utils";
+import { isFunctionNode, trace, trackImports } from "../utils";
+
+const rule: TSESLint.RuleModule<"noUselessDep", []> = {
+  meta: {
+    type: "problem",
+    docs: {
+      recommended: "warn",
+      description: "Disallow usage of dependency arrays in createEffect and createMemo.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/docs/no-react-deps.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      noUselessDep:
+        "In Solid, {{ name }} doesn't need a dependency array because it automatically tracks its dependencies. If you really need to override the list of dependencies, use `on`.",
+    },
+  },
+  create(context) {
+    /** Tracks imports from 'solid-js', handling aliases. */
+    const { matchImport, handleImportDeclaration } = trackImports();
+
+    return {
+      ImportDeclaration: handleImportDeclaration,
+      CallExpression(node) {
+        if (
+          node.callee.type === "Identifier" &&
+          matchImport(["createEffect", "createMemo"], node.callee.name) &&
+          node.arguments.length === 2 &&
+          node.arguments.every((arg) => arg.type !== "SpreadElement")
+        ) {
+          // grab both arguments, tracing any variables to their actual values if possible
+          const [arg0, arg1] = node.arguments.map((arg) => trace(arg, context.getScope()));
+
+          if (isFunctionNode(arg0) && arg0.params.length === 0 && arg1.type === "ArrayExpression") {
+            // A second argument that looks like a dependency array was passed to
+            // createEffect/createMemo, and the inline function doesn't accept a parameter, so it
+            // can't just be an initial value.
+            context.report({
+              node: node.arguments[1], // if this is a variable, highlight the usage, not the initialization
+              messageId: "noUselessDep",
+              data: {
+                name: node.callee.name,
+              },
+              // remove dep array if it's given inline, otherwise don't fix
+              fix: arg1 === node.arguments[1] ? (fixer) => fixer.remove(arg1) : undefined,
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+export default rule;

test/rules/no-react-deps.test.ts

@@ -0,0 +1,52 @@
+import { run } from "../ruleTester";
+import rule from "../../src/rules/no-react-deps";
+
+export const cases = run("no-react-deps", rule, {
+  valid: [
+    `createEffect(() => {
+      console.log(signal());
+    });`,
+    `createEffect((prev) => {
+      console.log(signal() + prev);
+    }, 0);`,
+    `const value = createMemo(() => computeExpensiveValue(a(), b()));`,
+    `const sum = createMemo((prev) => input() + prev, 0);`,
+    `const args = [() => { console.log(signal()); }, [signal()]];
+    createEffect(...args);`,
+  ],
+  invalid: [
+    {
+      code: `createEffect(() => {
+        console.log(signal());
+      }, [signal()]);`,
+      errors: [{ messageId: "noUselessDep", data: { name: "createEffect" } }],
+      output: `createEffect(() => {
+        console.log(signal());
+      }, );`,
+    },
+    {
+      code: `createEffect(() => {
+        console.log(signal());
+      }, [signal]);`,
+      errors: [{ messageId: "noUselessDep", data: { name: "createEffect" } }],
+      output: `createEffect(() => {
+        console.log(signal());
+      }, );`,
+    },
+    {
+      code: `const value = createMemo(() => computeExpensiveValue(a(), b()), [a(), b()]);`,
+      errors: [{ messageId: "noUselessDep", data: { name: "createMemo" } }],
+      output: `const value = createMemo(() => computeExpensiveValue(a(), b()), );`,
+    },
+    {
+      code: `const value = createMemo(() => computeExpensiveValue(a(), b()), [a, b]);`,
+      errors: [{ messageId: "noUselessDep", data: { name: "createMemo" } }],
+      output: `const value = createMemo(() => computeExpensiveValue(a(), b()), );`,
+    },
+    {
+      code: `const value = createMemo(() => computeExpensiveValue(a(), b()), [a, b()]);`,
+      errors: [{ messageId: "noUselessDep", data: { name: "createMemo" } }],
+      output: `const value = createMemo(() => computeExpensiveValue(a(), b()), );`,
+    },
+  ],
+});