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

package/src/rules/components-return-once.ts

@@ -0,0 +1,209 @@
+/**
+ * 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 { getFunctionName, type FunctionNode } from "../utils";
+import { getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+const isNothing = (node?: T.Node): boolean => {
+  if (!node) {
+    return true;
+  }
+  switch (node.type) {
+    case "Literal":
+      return ([null, undefined, false, ""] as Array<unknown>).includes(node.value);
+    case "JSXFragment":
+      return !node.children || node.children.every(isNothing);
+    default:
+      return false;
+  }
+};
+
+const getLineLength = (loc: T.SourceLocation) => loc.end.line - loc.start.line + 1;
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow early returns in components. Solid components only run once, and so conditionals should be inside JSX.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/components-return-once.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      noEarlyReturn:
+        "Solid components run once, so an early return breaks reactivity. Move the condition inside a JSX element, such as a fragment or <Show />.",
+      noConditionalReturn:
+        "Solid components run once, so a conditional return breaks reactivity. Move the condition inside a JSX element, such as a fragment or <Show />.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const functionStack: Array<{
+      /** switched to true by :exit if the current function is detected to be a component */
+      isComponent: boolean;
+      lastReturn: T.ReturnStatement | undefined;
+      earlyReturns: Array<T.ReturnStatement>;
+    }> = [];
+    const putIntoJSX = (node: T.Node): string => {
+      const text = getSourceCode(context).getText(node);
+      return node.type === "JSXElement" || node.type === "JSXFragment" ? text : `{${text}}`;
+    };
+    const currentFunction = () => functionStack[functionStack.length - 1];
+    const onFunctionEnter = (node: FunctionNode) => {
+      let lastReturn: T.ReturnStatement | undefined;
+      if (node.body.type === "BlockStatement") {
+        // find last statement, ignoring function/class/variable declarations (hoisting)
+        const last = node.body.body.findLast((node) => !node.type.endsWith("Declaration"));
+        // if it's a return, store it
+        if (last && last.type === "ReturnStatement") {
+          lastReturn = last;
+        }
+      }
+      functionStack.push({ isComponent: false, lastReturn, earlyReturns: [] });
+    };
+
+    const onFunctionExit = (node: FunctionNode) => {
+      if (
+        // "render props" aren't components
+        getFunctionName(node)?.match(/^[a-z]/) ||
+        node.parent?.type === "JSXExpressionContainer" ||
+        // ignore createMemo(() => conditional JSX), report HOC(() => conditional JSX)
+        (node.parent?.type === "CallExpression" &&
+          node.parent.arguments.some((n) => n === node) &&
+          !(node.parent.callee as T.Identifier).name?.match(/^[A-Z]/))
+      ) {
+        currentFunction().isComponent = false;
+      }
+      if (currentFunction().isComponent) {
+        // Warn on each early return
+        currentFunction().earlyReturns.forEach((earlyReturn) => {
+          context.report({
+            node: earlyReturn,
+            messageId: "noEarlyReturn",
+          });
+        });
+
+        const argument = currentFunction().lastReturn?.argument;
+        if (argument?.type === "ConditionalExpression") {
+          const sourceCode = getSourceCode(context);
+          context.report({
+            node: argument.parent!,
+            messageId: "noConditionalReturn",
+            fix: (fixer) => {
+              const { test, consequent, alternate } = argument;
+              const conditions = [{ test, consequent }];
+              let fallback = alternate;
+
+              while (fallback.type === "ConditionalExpression") {
+                conditions.push({ test: fallback.test, consequent: fallback.consequent });
+                fallback = fallback.alternate;
+              }
+
+              if (conditions.length >= 2) {
+                // we have a nested ternary, use <Switch><Match /></Switch>
+                const fallbackStr = !isNothing(fallback)
+                  ? ` fallback={${sourceCode.getText(fallback)}}`
+                  : "";
+                return fixer.replaceText(
+                  argument,
+                  `<Switch${fallbackStr}>\n${conditions
+                    .map(
+                      ({ test, consequent }) =>
+                        `<Match when={${sourceCode.getText(test)}}>${putIntoJSX(
+                          consequent
+                        )}</Match>`
+                    )
+                    .join("\n")}\n</Switch>`
+                );
+              }
+              if (isNothing(consequent)) {
+                // we have a single ternary and the consequent is nothing. Negate the condition and use a <Show>.
+                return fixer.replaceText(
+                  argument,
+                  `<Show when={!(${sourceCode.getText(test)})}>${putIntoJSX(alternate)}</Show>`
+                );
+              }
+              if (
+                isNothing(fallback) ||
+                getLineLength(consequent.loc) >= getLineLength(alternate.loc) * 1.5
+              ) {
+                // we have a standard ternary, and the alternate is a bit shorter in LOC than the consequent, which
+                // should be enough to tell that it's logically a fallback instead of an equal branch.
+                const fallbackStr = !isNothing(fallback)
+                  ? ` fallback={${sourceCode.getText(fallback)}}`
+                  : "";
+                return fixer.replaceText(
+                  argument,
+                  `<Show when={${sourceCode.getText(test)}}${fallbackStr}>${putIntoJSX(
+                    consequent
+                  )}</Show>`
+                );
+              }
+
+              // we have a standard ternary, but no signal from the user as to which branch is the "fallback" and
+              // which is the children. Move the whole conditional inside a JSX fragment.
+              return fixer.replaceText(argument, `<>${putIntoJSX(argument)}</>`);
+            },
+          });
+        } else if (argument?.type === "LogicalExpression") {
+          if (argument.operator === "&&") {
+            const sourceCode = getSourceCode(context);
+            // we have a `return condition && expression`--put that in a <Show />
+            context.report({
+              node: argument,
+              messageId: "noConditionalReturn",
+              fix: (fixer) => {
+                const { left: test, right: consequent } = argument;
+                return fixer.replaceText(
+                  argument,
+                  `<Show when={${sourceCode.getText(test)}}>${putIntoJSX(consequent)}</Show>`
+                );
+              },
+            });
+          } else {
+            // we have some other kind of conditional, warn
+            context.report({
+              node: argument,
+              messageId: "noConditionalReturn",
+            });
+          }
+        }
+      }
+
+      // Pop on exit
+      functionStack.pop();
+    };
+    return {
+      FunctionDeclaration: onFunctionEnter,
+      FunctionExpression: onFunctionEnter,
+      ArrowFunctionExpression: onFunctionEnter,
+      "FunctionDeclaration:exit": onFunctionExit,
+      "FunctionExpression:exit": onFunctionExit,
+      "ArrowFunctionExpression:exit": onFunctionExit,
+      JSXElement() {
+        if (functionStack.length) {
+          currentFunction().isComponent = true;
+        }
+      },
+      JSXFragment() {
+        if (functionStack.length) {
+          currentFunction().isComponent = true;
+        }
+      },
+      ReturnStatement(node) {
+        if (functionStack.length && node !== currentFunction().lastReturn) {
+          currentFunction().earlyReturns.push(node);
+        }
+      },
+    };
+  },
+});

package/src/rules/event-handlers.ts

@@ -0,0 +1,397 @@
+/**
+ * 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 { isDOMElementName, isSolidV2 } from "../utils";
+import { getScope, getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getStaticValue } = ASTUtils;
+
+const COMMON_EVENTS = [
+  "onAnimationEnd",
+  "onAnimationIteration",
+  "onAnimationStart",
+  "onBeforeInput",
+  "onBlur",
+  "onChange",
+  "onClick",
+  "onContextMenu",
+  "onCopy",
+  "onCut",
+  "onDblClick",
+  "onDrag",
+  "onDragEnd",
+  "onDragEnter",
+  "onDragExit",
+  "onDragLeave",
+  "onDragOver",
+  "onDragStart",
+  "onDrop",
+  "onError",
+  "onFocus",
+  "onFocusIn",
+  "onFocusOut",
+  "onGotPointerCapture",
+  "onInput",
+  "onInvalid",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onLoad",
+  "onLostPointerCapture",
+  "onMouseDown",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onMouseOut",
+  "onMouseOver",
+  "onMouseUp",
+  "onPaste",
+  "onPointerCancel",
+  "onPointerDown",
+  "onPointerEnter",
+  "onPointerLeave",
+  "onPointerMove",
+  "onPointerOut",
+  "onPointerOver",
+  "onPointerUp",
+  "onReset",
+  "onScroll",
+  "onSelect",
+  "onSubmit",
+  "onToggle",
+  "onTouchCancel",
+  "onTouchEnd",
+  "onTouchMove",
+  "onTouchStart",
+  "onTransitionEnd",
+  "onWheel",
+] as const;
+type CommonEvent = (typeof COMMON_EVENTS)[number];
+
+const COMMON_EVENTS_MAP = new Map<string, CommonEvent>(
+  (function* () {
+    for (const event of COMMON_EVENTS) {
+      yield [event.toLowerCase(), event] as const;
+    }
+  })()
+);
+
+const NONSTANDARD_EVENTS_MAP = {
+  ondoubleclick: "onDblClick",
+};
+
+const isCommonHandlerName = (
+  lowercaseHandlerName: string
+): lowercaseHandlerName is Lowercase<CommonEvent> => COMMON_EVENTS_MAP.has(lowercaseHandlerName);
+const getCommonEventHandlerName = (lowercaseHandlerName: Lowercase<CommonEvent>): CommonEvent =>
+  COMMON_EVENTS_MAP.get(lowercaseHandlerName)!;
+
+const isNonstandardEventName = (
+  lowercaseEventName: string
+): lowercaseEventName is keyof typeof NONSTANDARD_EVENTS_MAP =>
+  Boolean((NONSTANDARD_EVENTS_MAP as Record<string, string>)[lowercaseEventName]);
+const getStandardEventHandlerName = (lowercaseEventName: keyof typeof NONSTANDARD_EVENTS_MAP) =>
+  NONSTANDARD_EVENTS_MAP[lowercaseEventName];
+
+type MessageIds =
+  | "naming"
+  | "capitalization"
+  | "nonstandard"
+  | "make-handler"
+  | "make-attr"
+  | "detected-attr"
+  | "spread-handler"
+  | "lowercase-attribute-v2"
+  | "static-handler-v2";
+type Options = [{ ignoreCase?: boolean; warnOnSpread?: boolean }?];
+
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Enforce naming DOM element event handlers consistently and prevent Solid's analysis from misunderstanding whether a prop should be an event handler.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/event-handlers.md",
+    },
+    fixable: "code",
+    hasSuggestions: true,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          ignoreCase: {
+            type: "boolean",
+            description:
+              "if true, don't warn on ambiguously named event handlers like `onclick` or `onchange`",
+            default: false,
+          },
+          warnOnSpread: {
+            type: "boolean",
+            description:
+              "if true, warn when spreading event handlers onto JSX. Enable for Solid < v1.6.",
+            default: false,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      "detected-attr":
+        'The {{name}} prop is named as an event handler (starts with "on"), but Solid knows its value ({{staticValue}}) is a string or number, so it will be treated as an attribute. If this is intentional, name this prop attr:{{name}}.',
+      naming:
+        "The {{name}} prop is ambiguous. If it is an event handler, change it to {{handlerName}}. If it is an attribute, change it to {{attrName}}.",
+      capitalization: "The {{name}} prop should be renamed to {{fixedName}} for readability.",
+      nonstandard:
+        "The {{name}} prop should be renamed to {{fixedName}}, because it's not a standard event handler.",
+      "make-handler": "Change the {{name}} prop to {{handlerName}}.",
+      "make-attr": "Change the {{name}} prop to {{attrName}}.",
+      "spread-handler":
+        "The {{name}} prop should be added as a JSX attribute, not spread in. Solid doesn't add listeners when spreading into JSX.",
+      "lowercase-attribute-v2":
+        "In Solid 2.0, {{name}} is a literal attribute, not an event handler — this listener will never fire. Rename it to {{fixedName}}.",
+      "static-handler-v2":
+        "In Solid 2.0, {{name}} is an event handler and must be a function, but its value is the static value {{staticValue}}. For a literal attribute, use lowercase {{attrName}}.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const sourceCode = getSourceCode(context);
+    const v2 = isSolidV2(context);
+
+    return {
+      JSXAttribute(node) {
+        const openingElement = node.parent as T.JSXOpeningElement;
+        if (
+          openingElement.name.type !== "JSXIdentifier" ||
+          !isDOMElementName(openingElement.name.name)
+        ) {
+          return; // bail if this is not a DOM/SVG element or web component
+        }
+
+        if (node.name.type === "JSXNamespacedName") {
+          return; // bail early on attr:, on:, oncapture:, etc. props
+        }
+
+        // string name of the name node
+        const { name } = node.name;
+
+        if (!/^on[a-zA-Z]/.test(name)) {
+          return; // bail if Solid doesn't consider the prop name an event handler
+        }
+
+        if (v2) {
+          // In Solid 2.0 only the camelCase form (`onClick`) is an event handler;
+          // lowercase names (`onclick`) are literal attributes.
+          const isCamelCase = name[2] === name[2].toUpperCase();
+          const lowercaseName = name.toLowerCase();
+
+          if (isCamelCase) {
+            // Event handler position: a static string/number value is a bug.
+            let camelStaticValue: ReturnType<typeof getStaticValue> = null;
+            if (
+              node.value?.type === "JSXExpressionContainer" &&
+              node.value.expression.type !== "JSXEmptyExpression" &&
+              node.value.expression.type !== "ArrayExpression"
+            ) {
+              camelStaticValue = getStaticValue(node.value.expression, getScope(context, node));
+            }
+            if (node.value === null || node.value?.type === "Literal") {
+              camelStaticValue = { value: node.value !== null ? node.value.value : true };
+            }
+            if (
+              camelStaticValue !== null &&
+              (typeof camelStaticValue.value === "string" ||
+                typeof camelStaticValue.value === "number" ||
+                typeof camelStaticValue.value === "boolean")
+            ) {
+              context.report({
+                node,
+                messageId: "static-handler-v2",
+                data: { name, staticValue: camelStaticValue.value, attrName: lowercaseName },
+              });
+            } else if (isNonstandardEventName(lowercaseName)) {
+              // e.g. onDoubleClick — lowercasing yields no real DOM event, so
+              // the listener would silently never fire.
+              const fixedName = getStandardEventHandlerName(lowercaseName);
+              context.report({
+                node: node.name,
+                messageId: "nonstandard",
+                data: { name, fixedName },
+                fix: (fixer) => fixer.replaceText(node.name, fixedName),
+              });
+            }
+          } else {
+            // Literal attribute position: string values are fine, functions are
+            // a near-certain intended event handler that will never fire.
+            const isStaticAttributeValue =
+              node.value === null ||
+              node.value.type === "Literal" ||
+              (node.value.type === "JSXExpressionContainer" &&
+                node.value.expression.type !== "JSXEmptyExpression" &&
+                node.value.expression.type !== "ArrayExpression" &&
+                getStaticValue(node.value.expression, getScope(context, node)) !== null);
+            if (!isStaticAttributeValue) {
+              const fixedName = isNonstandardEventName(lowercaseName)
+                ? getStandardEventHandlerName(lowercaseName)
+                : isCommonHandlerName(lowercaseName)
+                ? getCommonEventHandlerName(lowercaseName)
+                : `on${name[2].toUpperCase()}${name.slice(3)}`;
+              const known =
+                isNonstandardEventName(lowercaseName) || isCommonHandlerName(lowercaseName);
+              context.report({
+                node: node.name,
+                messageId: "lowercase-attribute-v2",
+                data: { name, fixedName },
+                // Autofix when the event is a known DOM event; suggest otherwise.
+                fix: known ? (fixer) => fixer.replaceText(node.name, fixedName) : undefined,
+                suggest: known
+                  ? undefined
+                  : [
+                      {
+                        messageId: "make-handler",
+                        data: { name, handlerName: fixedName },
+                        fix: (fixer) => fixer.replaceText(node.name, fixedName),
+                      },
+                    ],
+              });
+            }
+          }
+          return;
+        }
+
+        let staticValue: ReturnType<typeof getStaticValue>;
+        if (
+          node.value?.type === "JSXExpressionContainer" &&
+          node.value.expression.type !== "JSXEmptyExpression" &&
+          node.value.expression.type !== "ArrayExpression" && // array syntax prevents inlining
+          (staticValue = getStaticValue(node.value.expression, getScope(context, node))) !== null &&
+          (typeof staticValue.value === "string" || typeof staticValue.value === "number")
+        ) {
+          // One of the first things Solid (actually babel-plugin-dom-expressions) does with an
+          // attribute is determine if it can be inlined into a template string instead of
+          // injected programmatically. It runs
+          // `attribute.get("value").get("expression").evaluate().value` on attributes with
+          // JSXExpressionContainers, and if the statically evaluated value is a string or number,
+          // it inlines it. This runs even for attributes that follow the naming convention for
+          // event handlers. By starting an attribute name with "on", the user has signalled that
+          // they intend the attribute to be an event handler. If the attribute value would be
+          // inlined, report that.
+          // https://github.com/ryansolid/dom-expressions/blob/cb3be7558c731e2a442e9c7e07d25373c40cf2be/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js#L347
+          context.report({
+            node,
+            messageId: "detected-attr",
+            data: {
+              name,
+              staticValue: staticValue.value,
+            },
+          });
+        } else if (node.value === null || node.value?.type === "Literal") {
+          // Check for same as above for literal values
+          context.report({
+            node,
+            messageId: "detected-attr",
+            data: {
+              name,
+              staticValue: node.value !== null ? node.value.value : true,
+            },
+          });
+        } else if (!context.options[0]?.ignoreCase) {
+          const lowercaseHandlerName = name.toLowerCase();
+          if (isNonstandardEventName(lowercaseHandlerName)) {
+            const fixedName = getStandardEventHandlerName(lowercaseHandlerName);
+            context.report({
+              node: node.name,
+              messageId: "nonstandard",
+              data: { name, fixedName },
+              fix: (fixer) => fixer.replaceText(node.name, fixedName),
+            });
+          } else if (isCommonHandlerName(lowercaseHandlerName)) {
+            const fixedName = getCommonEventHandlerName(lowercaseHandlerName);
+            if (fixedName !== name) {
+              // For common DOM event names, we know the user intended the prop to be an event handler.
+              // Fix it to have an uppercase third letter and be properly camel-cased.
+              context.report({
+                node: node.name,
+                messageId: "capitalization",
+                data: { name, fixedName },
+                fix: (fixer) => fixer.replaceText(node.name, fixedName),
+              });
+            }
+          } else if (name[2] === name[2].toLowerCase()) {
+            // this includes words like `only` and `ongoing` as well as unknown handlers like `onfoobar`.
+            // Enforce using either /^on[A-Z]/ (event handler) or /^attr:on[a-z]/ (forced regular attribute)
+            // to make user intent clear and code maximally readable
+            const handlerName = `on${name[2].toUpperCase()}${name.slice(3)}`;
+            const attrName = `attr:${name}`;
+            context.report({
+              node: node.name,
+              messageId: "naming",
+              data: { name, attrName, handlerName },
+              suggest: [
+                {
+                  messageId: "make-handler",
+                  data: { name, handlerName },
+                  fix: (fixer) => fixer.replaceText(node.name, handlerName),
+                },
+                {
+                  messageId: "make-attr",
+                  data: { name, attrName },
+                  fix: (fixer) => fixer.replaceText(node.name, attrName),
+                },
+              ],
+            });
+          }
+        }
+      },
+      Property(node: T.Property) {
+        if (
+          context.options[0]?.warnOnSpread &&
+          node.parent?.type === "ObjectExpression" &&
+          node.parent.parent?.type === "JSXSpreadAttribute" &&
+          node.parent.parent.parent?.type === "JSXOpeningElement"
+        ) {
+          const openingElement = node.parent.parent.parent;
+          if (
+            openingElement.name.type === "JSXIdentifier" &&
+            isDOMElementName(openingElement.name.name)
+          ) {
+            if (node.key.type === "Identifier" && /^on/.test(node.key.name)) {
+              const handlerName = node.key.name;
+              // An event handler is being spread in (ex. <button {...{ onClick }} />), which doesn't
+              // actually add an event listener, just a plain attribute.
+              context.report({
+                node,
+                messageId: "spread-handler",
+                data: {
+                  name: node.key.name,
+                },
+                *fix(fixer) {
+                  const commaAfter = sourceCode.getTokenAfter(node);
+                  yield fixer.remove(
+                    (node.parent as T.ObjectExpression).properties.length === 1
+                      ? node.parent!.parent!
+                      : node
+                  );
+                  if (commaAfter?.value === ",") {
+                    yield fixer.remove(commaAfter);
+                  }
+                  yield fixer.insertTextAfter(
+                    node.parent!.parent!,
+                    ` ${handlerName}={${sourceCode.getText(node.value)}}`
+                  );
+                },
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+});