@qq99/eslint-plugin-solid 0.18.0-no-reactive-read-in-effect-callback.0

package/src/rules/prefer-classlist.ts

@@ -0,0 +1,93 @@
+/**
+ * FIXME: remove this comments and import when below issue is fixed.
+ * This import is necessary for type generation due to a bug in the TypeScript compiler.
+ * See: https://github.com/microsoft/TypeScript/issues/42873
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { TSESLint } from "@typescript-eslint/utils";
+
+import { ESLintUtils, TSESTree as T } from "@typescript-eslint/utils";
+import { jsxHasProp, jsxPropName } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "preferClasslist";
+type Options = [{ classnames?: Array<string> }?];
+
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Enforce using the classlist prop over importing a classnames helper. The classlist prop accepts an object `{ [class: string]: boolean }` just like classnames.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-classlist.md",
+    },
+    fixable: "code",
+    deprecated: true,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          classnames: {
+            type: "array",
+            description: "An array of names to treat as `classnames` functions",
+            default: ["cn", "clsx", "classnames"],
+            items: {
+              type: "string",
+            },
+            minItems: 1,
+            uniqueItems: true,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      preferClasslist:
+        "The classlist prop should be used instead of {{ classnames }} to efficiently set classes based on an object.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const classnames = context.options[0]?.classnames ?? ["cn", "clsx", "classnames"];
+    return {
+      JSXAttribute(node) {
+        if (
+          ["class", "className"].indexOf(jsxPropName(node)) === -1 ||
+          jsxHasProp(
+            (node.parent as T.JSXOpeningElement | undefined)?.attributes ?? [],
+            "classlist"
+          )
+        ) {
+          return;
+        }
+        if (node.value?.type === "JSXExpressionContainer") {
+          const expr = node.value.expression;
+          if (
+            expr.type === "CallExpression" &&
+            expr.callee.type === "Identifier" &&
+            classnames.indexOf(expr.callee.name) !== -1 &&
+            expr.arguments.length === 1 &&
+            expr.arguments[0].type === "ObjectExpression"
+          ) {
+            context.report({
+              node,
+              messageId: "preferClasslist",
+              data: {
+                classnames: expr.callee.name,
+              },
+              fix: (fixer) => {
+                const attrRange = node.range;
+                const objectRange = expr.arguments[0].range;
+                return [
+                  fixer.replaceTextRange([attrRange[0], objectRange[0]], "classlist={"),
+                  fixer.replaceTextRange([objectRange[1], attrRange[1]], "}"),
+                ];
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+});

package/src/rules/prefer-for.ts

@@ -0,0 +1,93 @@
+/**
+ * FIXME: remove this comments and import when below issue is fixed.
+ * This import is necessary for type generation due to a bug in the TypeScript compiler.
+ * See: https://github.com/microsoft/TypeScript/issues/42873
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { TSESLint } from "@typescript-eslint/utils";
+
+import { TSESTree as T, ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
+import { isFunctionNode, isJSXElementOrFragment } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getPropertyName } = ASTUtils;
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Enforce using Solid's `<For />` component for mapping an array to JSX elements.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-for.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      preferFor:
+        "Use Solid's `<For />` component for efficiently rendering lists. Array#map causes DOM elements to be recreated.",
+      preferForOrIndex:
+        "Use Solid's `<For />` component or `<Index />` component for rendering lists. Array#map causes DOM elements to be recreated.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const reportPreferFor = (node: T.CallExpression) => {
+      const jsxExpressionContainerNode = node.parent as T.JSXExpressionContainer;
+      const arrayNode = (node.callee as T.MemberExpression).object;
+      const mapFnNode = node.arguments[0];
+      context.report({
+        node,
+        messageId: "preferFor",
+        fix: (fixer) => {
+          const beforeArray: [number, number] = [
+            jsxExpressionContainerNode.range[0],
+            arrayNode.range[0],
+          ];
+          const betweenArrayAndMapFn: [number, number] = [arrayNode.range[1], mapFnNode.range[0]];
+          const afterMapFn: [number, number] = [
+            mapFnNode.range[1],
+            jsxExpressionContainerNode.range[1],
+          ];
+          // We can insert the <For /> component
+          return [
+            fixer.replaceTextRange(beforeArray, "<For each={"),
+            fixer.replaceTextRange(betweenArrayAndMapFn, "}>{"),
+            fixer.replaceTextRange(afterMapFn, "}</For>"),
+          ];
+        },
+      });
+    };
+
+    return {
+      CallExpression(node) {
+        const callOrChain = node.parent?.type === "ChainExpression" ? node.parent : node;
+        if (
+          callOrChain.parent?.type === "JSXExpressionContainer" &&
+          isJSXElementOrFragment(callOrChain.parent.parent)
+        ) {
+          // check for Array.prototype.map in JSX
+          if (
+            node.callee.type === "MemberExpression" &&
+            getPropertyName(node.callee) === "map" &&
+            node.arguments.length === 1 && // passing thisArg to Array.prototype.map is rare, deopt in that case
+            isFunctionNode(node.arguments[0])
+          ) {
+            const mapFnNode = node.arguments[0];
+            if (mapFnNode.params.length === 1 && mapFnNode.params[0].type !== "RestElement") {
+              // The map fn doesn't take an index param, so it can't possibly be an index-keyed list. Use <For />.
+              // The returned JSX, if it's coming from React, will have an unnecessary `key` prop to be removed in
+              // the useless-keys rule.
+              reportPreferFor(node);
+            } else {
+              // Too many possible solutions to make a suggestion or fix
+              context.report({
+                node,
+                messageId: "preferForOrIndex",
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+});

package/src/rules/prefer-onSettled-for-side-effects.ts

@@ -0,0 +1,101 @@
+/**
+ * FIXME: remove this comments and import when below issue is fixed.
+ * This import is necessary for type generation due to a bug in the TypeScript compiler.
+ * See: https://github.com/microsoft/TypeScript/issues/42873
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { TSESLint } from "@typescript-eslint/utils";
+
+import { TSESTree as T, ESLintUtils } from "@typescript-eslint/utils";
+import {
+  findParent,
+  getFunctionName,
+  isFunctionNode,
+  isJSXElementOrFragment,
+  type FunctionNode,
+} from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "sideEffectInBody";
+type Options = [];
+
+const TIMER_CALLS = new Set(["setInterval", "setTimeout"]);
+const OBSERVER_CONSTRUCTORS = new Set([
+  "IntersectionObserver",
+  "ResizeObserver",
+  "MutationObserver",
+  "PerformanceObserver",
+]);
+const LISTENER_TARGETS = new Set(["window", "document"]);
+
+/** Does this function look like a component (PascalCase name or returns JSX)? */
+const isComponentLike = (fn: FunctionNode): boolean => {
+  const name = getFunctionName(fn);
+  if (name && /^[A-Z]/.test(name)) return true;
+  if (fn.type === "ArrowFunctionExpression" && isJSXElementOrFragment(fn.body)) return true;
+  if (fn.body.type === "BlockStatement") {
+    return fn.body.body.some(
+      (statement) =>
+        statement.type === "ReturnStatement" && isJSXElementOrFragment(statement.argument)
+    );
+  }
+  return false;
+};
+
+/*
+ * Side-effectful setup in a component body runs during setup — including on
+ * the server during SSR, and before the DOM has settled. `onSettled` runs
+ * client-side at the right time. `onCleanup` itself is never flagged: it is
+ * legitimate and lower-overhead than an `onSettled` return-cleanup; a paired
+ * `onCleanup` is a symptom of setup work that belongs in `onSettled`, not the
+ * offense.
+ */
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Enforce running side-effectful setup (timers, global listeners, observers) inside `onSettled` instead of the component body.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-onSettled-for-side-effects.md",
+    },
+    schema: [],
+    messages: {
+      sideEffectInBody:
+        "{{name}} in the component body runs during setup, including on the server during SSR. Move it into `onSettled(() => { ...; return cleanup; })` so it runs client-side once the DOM has settled.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const report = (node: T.Node, name: string) => {
+      // Only flag calls made directly in a component body; the same call
+      // inside onSettled, an effect, or an event handler is fine.
+      const enclosingFunction = findParent(node, isFunctionNode);
+      if (!enclosingFunction || !isComponentLike(enclosingFunction)) return;
+      context.report({ node, messageId: "sideEffectInBody", data: { name } });
+    };
+
+    return {
+      CallExpression(node) {
+        const { callee } = node;
+        if (callee.type === "Identifier" && TIMER_CALLS.has(callee.name)) {
+          report(node, `\`${callee.name}\``);
+        } else if (
+          callee.type === "MemberExpression" &&
+          !callee.computed &&
+          callee.property.type === "Identifier" &&
+          callee.property.name === "addEventListener" &&
+          callee.object.type === "Identifier" &&
+          LISTENER_TARGETS.has(callee.object.name)
+        ) {
+          report(node, `\`${callee.object.name}.addEventListener\``);
+        }
+      },
+      NewExpression(node) {
+        if (node.callee.type === "Identifier" && OBSERVER_CONSTRUCTORS.has(node.callee.name)) {
+          report(node, `\`new ${node.callee.name}\``);
+        }
+      },
+    };
+  },
+});

package/src/rules/prefer-show.ts

@@ -0,0 +1,102 @@
+/**
+ * FIXME: remove this comments and import when below issue is fixed.
+ * This import is necessary for type generation due to a bug in the TypeScript compiler.
+ * See: https://github.com/microsoft/TypeScript/issues/42873
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { TSESLint } from "@typescript-eslint/utils";
+
+import { TSESTree as T, ESLintUtils } from "@typescript-eslint/utils";
+import { isJSXElementOrFragment } from "../utils";
+import { getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+const EXPENSIVE_TYPES = ["JSXElement", "JSXFragment", "Identifier"];
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Enforce using Solid's `<Show />` component for conditionally showing content. Solid's compiler covers this case, so it's a stylistic rule only.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-show.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      preferShowAnd: "Use Solid's `<Show />` component for conditionally showing content.",
+      preferShowTernary:
+        "Use Solid's `<Show />` component for conditionally showing content with a fallback.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const sourceCode = getSourceCode(context);
+    const putIntoJSX = (node: T.Node): string => {
+      const text = sourceCode.getText(node);
+      return isJSXElementOrFragment(node) ? text : `{${text}}`;
+    };
+
+    const logicalExpressionHandler = (node: T.LogicalExpression) => {
+      if (node.operator === "&&" && EXPENSIVE_TYPES.includes(node.right.type)) {
+        context.report({
+          node,
+          messageId: "preferShowAnd",
+          fix: (fixer) =>
+            fixer.replaceText(
+              node.parent?.type === "JSXExpressionContainer" &&
+                isJSXElementOrFragment(node.parent.parent)
+                ? node.parent
+                : node,
+              `<Show when={${sourceCode.getText(node.left)}}>${putIntoJSX(node.right)}</Show>`
+            ),
+        });
+      }
+    };
+    const conditionalExpressionHandler = (node: T.ConditionalExpression) => {
+      if (
+        EXPENSIVE_TYPES.includes(node.consequent.type) ||
+        EXPENSIVE_TYPES.includes(node.alternate.type)
+      ) {
+        context.report({
+          node,
+          messageId: "preferShowTernary",
+          fix: (fixer) =>
+            fixer.replaceText(
+              node.parent?.type === "JSXExpressionContainer" &&
+                isJSXElementOrFragment(node.parent.parent)
+                ? node.parent
+                : node,
+              `<Show when={${sourceCode.getText(node.test)}} fallback={${sourceCode.getText(
+                node.alternate
+              )}}>${putIntoJSX(node.consequent)}</Show>`
+            ),
+        });
+      }
+    };
+
+    return {
+      JSXExpressionContainer(node) {
+        if (!isJSXElementOrFragment(node.parent)) {
+          return;
+        }
+        if (node.expression.type === "LogicalExpression") {
+          logicalExpressionHandler(node.expression);
+        } else if (
+          node.expression.type === "ArrowFunctionExpression" &&
+          node.expression.body.type === "LogicalExpression"
+        ) {
+          logicalExpressionHandler(node.expression.body);
+        } else if (node.expression.type === "ConditionalExpression") {
+          conditionalExpressionHandler(node.expression);
+        } else if (
+          node.expression.type === "ArrowFunctionExpression" &&
+          node.expression.body.type === "ConditionalExpression"
+        ) {
+          conditionalExpressionHandler(node.expression.body);
+        }
+      },
+    };
+  },
+});

package/src/rules/prefer-structured-class.ts

@@ -0,0 +1,117 @@
+import type { TSESLint } from "@typescript-eslint/utils";
+import { TSESTree as T, ESLintUtils } from "@typescript-eslint/utils";
+import { getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "manualClassString" | "useStructuredForm";
+type Options = [];
+
+/** Does this expression contain a runtime-varying part (conditional, logical, or call)? */
+const containsDynamicPart = (node: T.Node): boolean => {
+  switch (node.type) {
+    case "ConditionalExpression":
+    case "LogicalExpression":
+    case "CallExpression":
+      return true;
+    case "BinaryExpression":
+      return (
+        node.operator === "+" && (containsDynamicPart(node.left) || containsDynamicPart(node.right))
+      );
+    case "TemplateLiteral":
+      return node.expressions.some(containsDynamicPart);
+    default:
+      return false;
+  }
+};
+
+const isStringLiteral = (node: T.Node): node is T.StringLiteral =>
+  node.type === "Literal" && typeof node.value === "string";
+
+const isEmptyString = (node: T.Node): boolean => isStringLiteral(node) && node.value === "";
+
+/*
+ * In Solid 2.0, `class` accepts arrays and objects natively
+ * (`ClassValue = string | number | boolean | null | undefined |
+ * Record<string, boolean> | ClassValue[]`), and toggles only the affected
+ * classes. Manually-built strings — the React/classnames reflex — still work
+ * but re-run the whole concatenation on every change. This rule nudges toward
+ * either structured form; it imposes no preference between array and object.
+ */
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Enforce using the structured array/object forms of the `class` prop over manually-built class strings.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-structured-class.md",
+    },
+    hasSuggestions: true,
+    schema: [],
+    messages: {
+      manualClassString:
+        "Manually building class strings re-runs the whole expression on every change. In Solid 2.0, `class` accepts arrays and objects directly: `class={[base, { active: active() }]}`.",
+      useStructuredForm: "Convert to the structured array form.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const sourceCode = getSourceCode(context);
+
+    /**
+     * Build a suggestion for the simple binary shape
+     * `"base " + (cond ? "cls" : "")` -> `["base", cond && "cls"]`.
+     * Returns null for anything more complex.
+     */
+    const simpleBinarySuggestion = (
+      expression: T.Expression
+    ): ((fixer: TSESLint.RuleFixer) => TSESLint.RuleFix) | null => {
+      if (expression.type !== "BinaryExpression" || expression.operator !== "+") return null;
+      const { left, right } = expression;
+      if (!isStringLiteral(left) || right.type !== "ConditionalExpression") return null;
+      if (!isEmptyString(right.alternate)) return null;
+
+      const base = left.value.trim();
+      if (!base) return null;
+      const test = sourceCode.getText(right.test);
+      const consequent = sourceCode.getText(right.consequent);
+      return (fixer) =>
+        fixer.replaceText(expression, `[${JSON.stringify(base)}, ${test} && ${consequent}]`);
+    };
+
+    return {
+      JSXAttribute(node) {
+        if (node.name.type !== "JSXIdentifier" || node.name.name !== "class") return;
+        if (node.value?.type !== "JSXExpressionContainer") return;
+        const expression = node.value.expression;
+        if (expression.type === "JSXEmptyExpression") return;
+
+        let manual = false;
+        if (expression.type === "TemplateLiteral") {
+          // `btn-${kind}` (plain interpolation) is fine; conditionals inside are not.
+          manual = expression.expressions.some(containsDynamicPart);
+        } else if (expression.type === "BinaryExpression" && expression.operator === "+") {
+          manual = containsDynamicPart(expression);
+        } else if (
+          expression.type === "CallExpression" &&
+          expression.callee.type === "MemberExpression" &&
+          expression.callee.property.type === "Identifier" &&
+          expression.callee.property.name === "join"
+        ) {
+          // [..].join(" ") or [..].filter(Boolean).join(" ")
+          manual = true;
+        }
+        if (!manual) return;
+
+        const suggestionFix = simpleBinarySuggestion(expression);
+        context.report({
+          node: expression,
+          messageId: "manualClassString",
+          suggest: suggestionFix
+            ? [{ messageId: "useStructuredForm", fix: suggestionFix }]
+            : undefined,
+        });
+      },
+    };
+  },
+});