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

package/src/rules/jsx-no-undef.ts

@@ -0,0 +1,230 @@
+/**
+ * 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 { isDOMElementName, formatList, appendImports, insertImports, isSolidV2 } from "../utils";
+import { getScope, getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+// Currently all of the control flow components are from 'solid-js'.
+const AUTO_COMPONENTS = ["Show", "For", "Index", "Switch", "Match"];
+// Solid 2.0 control flow components; `Index`, `ErrorBoundary`, `Suspense`, and
+// `SuspenseList` no longer exist (see solid/removed-api).
+const AUTO_COMPONENTS_V2 = [
+  "For",
+  "Repeat",
+  "Show",
+  "Switch",
+  "Match",
+  "Errored",
+  "Loading",
+  "Reveal",
+];
+const SOURCE_MODULE = "solid-js";
+
+/*
+ * This rule is adapted from eslint-plugin-react's jsx-no-undef rule under
+ * the MIT license. Thank you for your work!
+ */
+type MessageIds = "undefined" | "customDirectiveUndefined" | "autoImport";
+type Options = [
+  {
+    allowGlobals?: boolean;
+    autoImport?: boolean;
+    typescriptEnabled?: boolean;
+  }?
+];
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow references to undefined variables in JSX. Handles custom directives.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/jsx-no-undef.md",
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allowGlobals: {
+            type: "boolean",
+            description:
+              "When true, the rule will consider the global scope when checking for defined components.",
+            default: false,
+          },
+          autoImport: {
+            type: "boolean",
+            description:
+              'Automatically import certain components from `"solid-js"` if they are undefined.',
+            default: true,
+          },
+          typescriptEnabled: {
+            type: "boolean",
+            description: "Adjusts behavior not to conflict with TypeScript's type checking.",
+            default: false,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      undefined: "'{{identifier}}' is not defined.",
+      customDirectiveUndefined: "Custom directive '{{identifier}}' is not defined.",
+      autoImport: "{{imports}} should be imported from '{{source}}'.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const allowGlobals = context.options[0]?.allowGlobals ?? false;
+    const autoImport = context.options[0]?.autoImport !== false;
+    const isTypeScriptEnabled = context.options[0]?.typescriptEnabled ?? false;
+    const autoComponents = isSolidV2(context) ? AUTO_COMPONENTS_V2 : AUTO_COMPONENTS;
+
+    const missingComponentsSet = new Set<string>();
+
+    /**
+     * Compare an identifier with the variables declared in the scope
+     * @param {ASTNode} node - Identifier or JSXIdentifier node
+     * @returns {void}
+     */
+    function checkIdentifierInJSX(
+      node: T.Identifier | T.JSXIdentifier,
+      {
+        isComponent,
+        isCustomDirective,
+      }: { isComponent?: boolean; isCustomDirective?: boolean } = {}
+    ) {
+      let scope = getScope(context, node);
+      const sourceCode = getSourceCode(context);
+      const sourceType = sourceCode.ast.sourceType;
+      const scopeUpperBound = !allowGlobals && sourceType === "module" ? "module" : "global";
+      const variables = [...scope.variables];
+
+      // Ignore 'this' keyword (also maked as JSXIdentifier when used in JSX)
+      if (node.name === "this") {
+        return;
+      }
+
+      while (scope.type !== scopeUpperBound && scope.type !== "global" && scope.upper) {
+        scope = scope.upper;
+        variables.push(...scope.variables);
+      }
+      if (scope.childScopes.length) {
+        variables.push(...scope.childScopes[0].variables);
+        // Temporary fix for babel-eslint
+        if (scope.childScopes[0].childScopes.length) {
+          variables.push(...scope.childScopes[0].childScopes[0].variables);
+        }
+      }
+
+      if (variables.find((variable) => variable.name === node.name)) {
+        return;
+      }
+
+      if (
+        isComponent &&
+        autoImport &&
+        autoComponents.includes(node.name) &&
+        !missingComponentsSet.has(node.name)
+      ) {
+        // track which names are undefined
+        missingComponentsSet.add(node.name);
+      } else if (isCustomDirective) {
+        context.report({
+          node,
+          messageId: "customDirectiveUndefined",
+          data: {
+            identifier: node.name,
+          },
+        });
+      } else if (!isTypeScriptEnabled) {
+        context.report({
+          node,
+          messageId: "undefined",
+          data: {
+            identifier: node.name,
+          },
+        });
+      }
+    }
+
+    return {
+      JSXOpeningElement(node) {
+        let n: T.Node | undefined;
+        switch (node.name.type) {
+          case "JSXIdentifier":
+            if (!isDOMElementName(node.name.name)) {
+              checkIdentifierInJSX(node.name, { isComponent: true });
+            }
+            break;
+          case "JSXMemberExpression":
+            n = node.name;
+            do {
+              n = (n as any).object;
+            } while (n && n.type !== "JSXIdentifier");
+            if (n) {
+              checkIdentifierInJSX(n);
+            }
+            break;
+          default:
+            break;
+        }
+      },
+      "JSXAttribute > JSXNamespacedName": (node: T.JSXNamespacedName) => {
+        // <Element use:X /> applies the `X` custom directive to the element, where `X` must be an identifier in scope.
+        if (
+          node.namespace?.type === "JSXIdentifier" &&
+          node.namespace.name === "use" &&
+          node.name?.type === "JSXIdentifier"
+        ) {
+          checkIdentifierInJSX(node.name, { isCustomDirective: true });
+        }
+      },
+      "Program:exit": (programNode: T.Program) => {
+        // add in any auto import components used in the program
+        const missingComponents = Array.from(missingComponentsSet.values());
+        if (autoImport && missingComponents.length) {
+          const importNode = programNode.body.find(
+            (n) =>
+              n.type === "ImportDeclaration" &&
+              n.importKind !== "type" &&
+              n.source.type === "Literal" &&
+              n.source.value === SOURCE_MODULE
+          ) as T.ImportDeclaration | undefined;
+          if (importNode) {
+            context.report({
+              node: importNode,
+              messageId: "autoImport",
+              data: {
+                imports: formatList(missingComponents), // "Show, For, and Switch"
+                source: SOURCE_MODULE,
+              },
+              fix: (fixer) => {
+                return appendImports(fixer, getSourceCode(context), importNode, missingComponents);
+              },
+            });
+          } else {
+            context.report({
+              node: programNode,
+              messageId: "autoImport",
+              data: {
+                imports: formatList(missingComponents),
+                source: SOURCE_MODULE,
+              },
+              fix: (fixer) => {
+                // insert `import { missing, identifiers } from "solid-js"` at top of module
+                return insertImports(fixer, getSourceCode(context), "solid-js", missingComponents);
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+});

package/src/rules/jsx-uses-vars.ts

@@ -0,0 +1,66 @@
+/**
+ * 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 { markVariableAsUsed } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+/*
+ * This rule is lifted almost verbatim from eslint-plugin-react's
+ * jsx-uses-vars rule under the MIT license. Thank you for your work!
+ * Solid's custom directives are also handled.
+ */
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      // eslint-disable-next-line eslint-plugin/require-meta-docs-description
+      description: "Prevent variables used in JSX from being marked as unused.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/jsx-uses-vars.md",
+    },
+    schema: [],
+    // eslint-disable-next-line eslint-plugin/prefer-message-ids
+    messages: {},
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        let parent: T.JSXTagNameExpression;
+        switch (node.name.type) {
+          case "JSXNamespacedName": // <Foo:Bar>
+            return;
+          case "JSXIdentifier": // <Foo>
+            markVariableAsUsed(context, node.name.name, node.name);
+            break;
+          case "JSXMemberExpression": // <Foo...Bar>
+            parent = node.name.object;
+            while (parent?.type === "JSXMemberExpression") {
+              parent = parent.object;
+            }
+            if (parent.type === "JSXIdentifier") {
+              markVariableAsUsed(context, parent.name, parent);
+            }
+            break;
+        }
+      },
+      "JSXAttribute > JSXNamespacedName": (node: T.JSXNamespacedName) => {
+        // <Element use:X /> applies the `X` custom directive to the element, where `X` must be an identifier in scope.
+        if (
+          node.namespace?.type === "JSXIdentifier" &&
+          node.namespace.name === "use" &&
+          node.name?.type === "JSXIdentifier"
+        ) {
+          markVariableAsUsed(context, node.name.name, node.name);
+        }
+      },
+    };
+  },
+});

package/src/rules/no-accessor-as-prop.ts

@@ -0,0 +1,147 @@
+/**
+ * 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 { findVariable } from "../compat";
+import { isDOMElementName, isFunctionNode, getSolidSourceRegex, trackImports } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "accessorAsProp" | "functionAsProp";
+type Options = [];
+
+// Attributes on DOM elements that legitimately accept a function value.
+const FUNCTION_ATTRIBUTES = new Set(["ref", "children"]);
+
+// camelCase `onX` names are event handlers; lowercase `onx` names are literal
+// attributes in Solid 2.0 but are solid/event-handlers' territory — skip both
+// here so a single node never gets two reports.
+const isOnPrefixed = (name: string) => name.length > 2 && name.startsWith("on");
+
+/*
+ * Passing an uncalled signal accessor as a DOM element attribute
+ * (`<div title={count} />`) silently sets the attribute to a stringified
+ * function. TypeScript flags this with a cryptic assignability error that
+ * many pipelines never run (Vite builds don't typecheck); this rule is the
+ * enforcement and translation layer. Unlike solid/reactivity's signal
+ * tracing, any expression that resolves to a function fires here.
+ */
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow passing uncalled signal accessors or other functions as value-typed DOM element attributes.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-accessor-as-prop.md",
+    },
+    hasSuggestions: true,
+    schema: [],
+    messages: {
+      accessorAsProp:
+        "'{{attribute}}' expects a value, but '{{name}}' is a signal accessor — call it: '{{name}}()'.",
+      functionAsProp:
+        "'{{attribute}}' expects a value, but this is a function; it would render as a stringified function. If it derives a value, call it.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const { matchImport, handleImportDeclaration } = trackImports(getSolidSourceRegex(context));
+
+    /** Is `id` a signal accessor or plain function we can resolve statically? */
+    const resolveFunctionKind = (id: T.Identifier): "accessor" | "function" | null => {
+      const variable = findVariable(context, id);
+      const def = variable?.defs[0];
+      if (!def) return null;
+
+      if (def.type === "FunctionName") return "function";
+      if (def.type !== "Variable" || !def.node.init) return null;
+
+      const { id: declId, init } = def.node;
+      // const count = () => ...;
+      if (declId.type === "Identifier" && isFunctionNode(init)) return "function";
+      if (init.type !== "CallExpression" || init.callee.type !== "Identifier") return null;
+
+      // const memo = createMemo(...)
+      if (
+        declId.type === "Identifier" &&
+        matchImport(["createMemo", "children"], init.callee.name)
+      ) {
+        return "accessor";
+      }
+      // const [count] = createSignal(...); const [value] = createOptimistic(...)
+      if (
+        declId.type === "ArrayPattern" &&
+        declId.elements[0]?.type === "Identifier" &&
+        declId.elements[0].name === id.name &&
+        matchImport(["createSignal", "createOptimistic"], init.callee.name)
+      ) {
+        return "accessor";
+      }
+      return null;
+    };
+
+    return {
+      ImportDeclaration: handleImportDeclaration,
+      JSXAttribute(node) {
+        // Only plain attributes on native DOM elements; namespaced attributes
+        // and custom elements can legitimately carry unusual values.
+        if (node.name.type !== "JSXIdentifier") return;
+        const attribute = node.name.name;
+        if (FUNCTION_ATTRIBUTES.has(attribute) || isOnPrefixed(attribute)) return;
+
+        const element = node.parent as T.JSXOpeningElement;
+        if (
+          element.name.type !== "JSXIdentifier" ||
+          !isDOMElementName(element.name.name) ||
+          element.name.name.includes("-")
+        ) {
+          return;
+        }
+
+        if (node.value?.type !== "JSXExpressionContainer") return;
+        const expression = node.value.expression;
+
+        if (isFunctionNode(expression)) {
+          context.report({ node: expression, messageId: "functionAsProp", data: { attribute } });
+          return;
+        }
+
+        if (expression.type === "Identifier") {
+          const kind = resolveFunctionKind(expression);
+          if (kind === "accessor") {
+            context.report({
+              node: expression,
+              messageId: "accessorAsProp",
+              data: { attribute, name: expression.name },
+              suggest: [
+                {
+                  messageId: "accessorAsProp",
+                  data: { attribute, name: expression.name },
+                  fix: (fixer) => fixer.insertTextAfter(expression, "()"),
+                },
+              ],
+            });
+          } else if (kind === "function") {
+            context.report({
+              node: expression,
+              messageId: "functionAsProp",
+              data: { attribute },
+              suggest: [
+                {
+                  messageId: "functionAsProp",
+                  data: { attribute },
+                  fix: (fixer) => fixer.insertTextAfter(expression, "()"),
+                },
+              ],
+            });
+          }
+        }
+      },
+    };
+  },
+});

package/src/rules/no-array-handlers.ts

@@ -0,0 +1,57 @@
+/**
+ * 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 { isDOMElementName, trace } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow usage of type-unsafe event handlers.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-array-handlers.md",
+    },
+    schema: [],
+    messages: {
+      noArrayHandlers: "Passing an array as an event handler is potentially type-unsafe.",
+    },
+  },
+  defaultOptions: [],
+  create(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
+        }
+
+        const isNamespacedHandler =
+          node.name.type === "JSXNamespacedName" && node.name.namespace.name === "on";
+        const isNormalEventHandler =
+          node.name.type === "JSXIdentifier" && /^on[a-zA-Z]/.test(node.name.name);
+
+        if (
+          (isNamespacedHandler || isNormalEventHandler) &&
+          node.value?.type === "JSXExpressionContainer" &&
+          trace(node.value.expression, context).type === "ArrayExpression"
+        ) {
+          // Warn if passed an array
+          context.report({
+            node,
+            messageId: "noArrayHandlers",
+          });
+        }
+      },
+    };
+  },
+});