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

package/src/rules/no-boolean-enumerated-attribute.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 { getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "booleanValue" | "booleanExpression" | "useStrings";
+type Options = [];
+
+interface AttributePolicy {
+  /** The string tokens meaning on/off for this attribute. */
+  tokens: [trueToken: string, falseToken: string];
+  /** Why a boolean/bare `true` misbehaves; undefined when `true` is harmless. */
+  trueBehavior?: string;
+  /** Why a boolean `false` misbehaves; the primary hazard for every entry. */
+  falseBehavior: string;
+}
+
+const INHERITED = (token: string) =>
+  `a boolean false removes the attribute, leaving the inherited state rather than "${token}"`;
+const ARIA_FALSE =
+  'a boolean false removes the attribute, producing the "undefined" state rather than "false"';
+const ARIA_TRUE =
+  'a boolean true writes an empty attribute value, which assistive technologies do not reliably treat as "true"';
+
+/**
+ * Enumerated attributes whose boolean forms misbehave. Deliberately excludes
+ * ARIA attributes that default to "false" (aria-disabled, aria-busy, ...):
+ * for those, removing the attribute IS the false state, so a boolean false is
+ * harmless and flagging it would be noise.
+ */
+const ATTRIBUTES = new Map<string, AttributePolicy>([
+  [
+    "draggable",
+    {
+      tokens: ["true", "false"],
+      trueBehavior:
+        'a bare or boolean-true draggable writes an empty value, which is invalid and behaves as "auto"',
+      falseBehavior: 'a boolean false removes the attribute, which behaves as "auto", not "false"',
+    },
+  ],
+  ["spellcheck", { tokens: ["true", "false"], falseBehavior: INHERITED("false") }],
+  ["contenteditable", { tokens: ["true", "false"], falseBehavior: INHERITED("false") }],
+  ["translate", { tokens: ["yes", "no"], falseBehavior: INHERITED("no") }],
+  // ARIA tristate/undefined-default states: absence means "undefined" (not
+  // checkable / not expandable / hidden-ness computed from the tree), which is
+  // a different state from an explicit "false".
+  [
+    "aria-checked",
+    { tokens: ["true", "false"], trueBehavior: ARIA_TRUE, falseBehavior: ARIA_FALSE },
+  ],
+  [
+    "aria-expanded",
+    { tokens: ["true", "false"], trueBehavior: ARIA_TRUE, falseBehavior: ARIA_FALSE },
+  ],
+  [
+    "aria-hidden",
+    { tokens: ["true", "false"], trueBehavior: ARIA_TRUE, falseBehavior: ARIA_FALSE },
+  ],
+  [
+    "aria-pressed",
+    { tokens: ["true", "false"], trueBehavior: ARIA_TRUE, falseBehavior: ARIA_FALSE },
+  ],
+  [
+    "aria-selected",
+    { tokens: ["true", "false"], trueBehavior: ARIA_TRUE, falseBehavior: ARIA_FALSE },
+  ],
+]);
+
+const BOOLEAN_OPERATORS = new Set([
+  "===",
+  "!==",
+  "==",
+  "!=",
+  "<",
+  ">",
+  "<=",
+  ">=",
+  "in",
+  "instanceof",
+]);
+
+/** Is this expression provably boolean-valued without type information? */
+const isProvablyBoolean = (node: T.Node): boolean => {
+  switch (node.type) {
+    case "Literal":
+      return typeof node.value === "boolean";
+    case "UnaryExpression":
+      return node.operator === "!";
+    case "BinaryExpression":
+      return BOOLEAN_OPERATORS.has(node.operator);
+    case "LogicalExpression":
+      return (
+        node.operator !== "??" && isProvablyBoolean(node.left) && isProvablyBoolean(node.right)
+      );
+    default:
+      return false;
+  }
+};
+
+/*
+ * Enumerated attributes look boolean but aren't: they want literal string
+ * tokens ("true"/"false", or "yes"/"no" for translate). Solid's attribute
+ * path removes the attribute entirely when the value is `false` and writes an
+ * empty string for `true`, so booleans silently produce a different state
+ * than the matching token would. The rule only reports values that provably
+ * misbehave: boolean literals in the broken direction, bare `draggable`, and
+ * expressions that are boolean by construction. Dynamic values whose type
+ * can't be proven locally are left alone.
+ */
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        'Disallow boolean values on enumerated attributes like draggable and tristate aria-*, which take string tokens — a boolean false removes the attribute instead of writing "false".',
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-boolean-enumerated-attribute.md",
+    },
+    fixable: "code",
+    hasSuggestions: true,
+    schema: [],
+    messages: {
+      booleanValue:
+        "'{{name}}' is an enumerated attribute, not a boolean one: {{behavior}}. Use the string \"{{token}}\".",
+      booleanExpression:
+        "'{{name}}' is an enumerated attribute, not a boolean one: {{behavior}}. Map the expression to its string tokens.",
+      useStrings: 'Write the string tokens: {expr ? "{{trueToken}}" : "{{falseToken}}"}.',
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const sourceCode = getSourceCode(context);
+
+    return {
+      JSXAttribute(node) {
+        // Only native elements: components receive these as ordinary props.
+        const element = node.parent;
+        if (
+          element?.type !== "JSXOpeningElement" ||
+          element.name.type !== "JSXIdentifier" ||
+          !/^[a-z]/.test(element.name.name)
+        ) {
+          return;
+        }
+        if (node.name.type !== "JSXIdentifier") return;
+        const name = node.name.name;
+        const policy = ATTRIBUTES.get(name);
+        if (!policy) return;
+        const [trueToken, falseToken] = policy.tokens;
+
+        // A bare attribute compiles to `true`, i.e. an empty attribute value —
+        // valid for the empty-string-means-true attributes, broken elsewhere.
+        if (!node.value) {
+          if (policy.trueBehavior) {
+            context.report({
+              node,
+              messageId: "booleanValue",
+              data: { name, behavior: policy.trueBehavior, token: trueToken },
+              fix: (fixer) => fixer.insertTextAfter(node, `="${trueToken}"`),
+            });
+          }
+          return;
+        }
+
+        if (node.value.type !== "JSXExpressionContainer") return;
+        const expression = node.value.expression;
+
+        if (expression.type === "Literal" && typeof expression.value === "boolean") {
+          const behavior = expression.value ? policy.trueBehavior : policy.falseBehavior;
+          if (!behavior) return; // boolean true is harmless here
+          const token = expression.value ? trueToken : falseToken;
+          context.report({
+            node: node.value,
+            messageId: "booleanValue",
+            data: { name, behavior, token },
+            fix: (fixer) => fixer.replaceText(node.value!, `"${token}"`),
+          });
+          return;
+        }
+
+        if (isProvablyBoolean(expression)) {
+          context.report({
+            node: node.value,
+            messageId: "booleanExpression",
+            data: { name, behavior: policy.falseBehavior },
+            suggest: [
+              {
+                messageId: "useStrings",
+                data: { trueToken, falseToken },
+                fix: (fixer) =>
+                  fixer.replaceText(
+                    node.value!,
+                    `{${sourceCode.getText(expression)} ? "${trueToken}" : "${falseToken}"}`
+                  ),
+              },
+            ],
+          });
+        }
+      },
+    };
+  },
+});

package/src/rules/no-browser-globals-in-server-function.ts

@@ -0,0 +1,108 @@
+/**
+ * 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, TSESLint as Lint, ESLintUtils } from "@typescript-eslint/utils";
+import {
+  isFunctionNode,
+  hasUseServerDirective,
+  getUseServerEligibility,
+  isInsideUseServerFunction,
+  programHasUseServerDirective,
+} from "../utils";
+import { getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "browserGlobal";
+type Options = [];
+
+/**
+ * Globals that exist only in browsers. Deliberately conservative: server
+ * runtimes (Node, Deno, Bun, edge workers) provide `fetch`, `Response`,
+ * `FormData`, `URL`, `crypto`, and even `navigator`, so only unambiguous
+ * DOM/BOM globals are listed.
+ */
+const BROWSER_GLOBALS = new Set([
+  "window",
+  "document",
+  "alert",
+  "confirm",
+  "prompt",
+  "localStorage",
+  "sessionStorage",
+  "history",
+  "location",
+  "matchMedia",
+  "getComputedStyle",
+  "requestAnimationFrame",
+  "cancelAnimationFrame",
+  "customElements",
+]);
+
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow browser-only globals inside server functions, which run exclusively on the server.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-browser-globals-in-server-function.md",
+    },
+    schema: [],
+    messages: {
+      browserGlobal:
+        "'{{name}}' is a browser global, and server functions only run on the server, where it does not exist. Read request data from the function's arguments or use server platform APIs instead.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const sourceCode = getSourceCode(context);
+    let moduleLevel = false;
+
+    const checkReferences = (references: Lint.Scope.Reference[]) => {
+      for (const reference of references) {
+        const name = reference.identifier.name;
+        if (!BROWSER_GLOBALS.has(name)) continue;
+        // A binding with definitions is the user's own variable; a def-less
+        // resolution is a configured global (e.g. `globals.browser`).
+        if (reference.resolved && reference.resolved.defs.length > 0) continue;
+        // `typeof window` guards are dead code here but intentional
+        const parent = reference.identifier.parent;
+        if (parent?.type === "UnaryExpression" && parent.operator === "typeof") continue;
+        context.report({
+          node: reference.identifier,
+          messageId: "browserGlobal",
+          data: { name },
+        });
+      }
+    };
+
+    return {
+      Program(node) {
+        moduleLevel = programHasUseServerDirective(node);
+        if (moduleLevel) {
+          // The whole module runs on the server; check every reference in it.
+          // References resolved to configured globals (`globals.browser`)
+          // never reach a scope's `through`, so walk each scope directly.
+          for (const scope of sourceCode.scopeManager?.scopes ?? []) {
+            checkReferences(scope.references);
+          }
+        }
+      },
+      ":function"(node: T.Node) {
+        if (moduleLevel || !isFunctionNode(node)) return;
+        if (!hasUseServerDirective(node)) return;
+        if (getUseServerEligibility(node) !== "eligible") return;
+        if (isInsideUseServerFunction(node)) return;
+        const scope = sourceCode.scopeManager?.acquire(node);
+        // `through` holds every reference crossing the function's boundary,
+        // including refs from nested scopes that resolve to outer globals.
+        if (scope) checkReferences(scope.through);
+      },
+    };
+  },
+});

package/src/rules/no-destructure.ts

@@ -0,0 +1,245 @@
+import { TSESTree as T, TSESLint, ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
+import { getFunctionName, type FunctionNode } from "../utils";
+import { getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getStringIfConstant } = ASTUtils;
+
+const getName = (node: T.Node): string | null => {
+  switch (node.type) {
+    case "Literal":
+      return typeof node.value === "string" ? node.value : null;
+    case "Identifier":
+      return node.name;
+    case "AssignmentPattern":
+      return getName(node.left);
+    default:
+      return getStringIfConstant(node);
+  }
+};
+
+interface PropertyInfo {
+  real: T.Literal | T.Identifier | T.Expression;
+  var: string;
+  computed: boolean;
+  init: T.Expression | undefined;
+}
+
+// Given ({ 'hello-world': helloWorld = 5 }), returns { real: Literal('hello-world'), var: 'helloWorld', computed: false, init: Literal(5) }
+const getPropertyInfo = (prop: T.Property): PropertyInfo | null => {
+  const valueName = getName(prop.value);
+  if (valueName !== null) {
+    return {
+      real: prop.key,
+      var: valueName,
+      computed: prop.computed,
+      init: prop.value.type === "AssignmentPattern" ? prop.value.right : undefined,
+    };
+  } else {
+    return null;
+  }
+};
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "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.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-destructure.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      noDestructure:
+        "Destructuring component props breaks Solid's reactivity; use property access instead.",
+      // noWriteToProps: "Component props are readonly, writing to props is not supported.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const functionStack: Array<{
+      /** switched to true by :exit if JSX is detected in the current function */
+      hasJSX: boolean;
+    }> = [];
+    const currentFunction = () => functionStack[functionStack.length - 1];
+    const onFunctionEnter = () => {
+      functionStack.push({ hasJSX: false });
+    };
+    // Matches the component detection in components-return-once: containing JSX
+    // isn't enough on its own, because data callbacks (`items.map(({ id }) => ...)`)
+    // and lowercase-named helpers (`renderItem`) also return JSX; their object
+    // param is a plain data item, not reactive props.
+    const isComponent = (node: FunctionNode) =>
+      !getFunctionName(node)?.match(/^[a-z]/) &&
+      node.parent?.type !== "JSXExpressionContainer" && // "render props" aren't components
+      !(
+        // functions passed as arguments are callbacks, unless the callee is a
+        // component-wrapper (PascalCase, like HOCs). A FunctionDeclaration can
+        // never be a call argument, so the cast below is safe.
+        (
+          node.parent?.type === "CallExpression" &&
+          node.parent.arguments.includes(node as T.CallExpressionArgument) &&
+          !(node.parent.callee as T.Identifier).name?.match(/^[A-Z]/)
+        )
+      );
+
+    const onFunctionExit = (node: FunctionNode) => {
+      if (node.params.length === 1) {
+        const props = node.params[0];
+        if (props.type === "ObjectPattern" && currentFunction().hasJSX && isComponent(node)) {
+          // Props are destructured in the function params, not the body. We actually don't
+          // need to handle the case where props are destructured in the body, because that
+          // will be a violation of "solid/reactivity".
+          context.report({
+            node: props,
+            messageId: "noDestructure",
+            fix: (fixer) => fixDestructure(node, props, fixer),
+          });
+        }
+      }
+
+      // Pop on exit
+      functionStack.pop();
+    };
+
+    function* fixDestructure(
+      func: FunctionNode,
+      props: T.ObjectPattern,
+      fixer: TSESLint.RuleFixer
+    ): Generator<TSESLint.RuleFix> {
+      const propsName = "props";
+      const properties = props.properties;
+
+      const propertyInfo: Array<PropertyInfo> = [];
+      let rest: T.RestElement | null = null;
+
+      for (const property of properties) {
+        if (property.type === "RestElement") {
+          rest = property;
+        } else {
+          const info = getPropertyInfo(property);
+          if (info === null) {
+            continue;
+          }
+          propertyInfo.push(info);
+        }
+      }
+
+      const hasDefaults = propertyInfo.some((info) => info.init);
+
+      // Replace destructured props with a `props` identifier (`_props` in case of rest params/defaults)
+      const origProps = !(hasDefaults || rest) ? propsName : "_" + propsName;
+      if (props.typeAnnotation) {
+        // in `{ prop1, prop2 }: Props`, leave `: Props` alone
+        const range = [props.range[0], props.typeAnnotation.range[0]] as const;
+        yield fixer.replaceTextRange(range, origProps);
+      } else {
+        yield fixer.replaceText(props, origProps);
+      }
+
+      const sourceCode = getSourceCode(context);
+
+      const defaultsObjectString = () =>
+        propertyInfo
+          .filter((info) => info.init)
+          .map(
+            (info) =>
+              `${info.computed ? "[" : ""}${sourceCode.getText(info.real)}${
+                info.computed ? "]" : ""
+              }: ${sourceCode.getText(info.init)}`
+          )
+          .join(", ");
+      const splitPropsArray = () =>
+        `[${propertyInfo
+          .map((info) =>
+            info.real.type === "Identifier"
+              ? JSON.stringify(info.real.name)
+              : sourceCode.getText(info.real)
+          )
+          .join(", ")}]`;
+
+      let lineToInsert = "";
+      if (hasDefaults && rest) {
+        // Insert a line that assigns _props
+        lineToInsert = `  const [${propsName}, ${
+          (rest.argument.type === "Identifier" && rest.argument.name) || "rest"
+        }] = splitProps(mergeProps({ ${defaultsObjectString()} }, ${origProps}), ${splitPropsArray()});`;
+      } else if (hasDefaults) {
+        // Insert a line that assigns _props merged with defaults to props
+        lineToInsert = `  const ${propsName} = mergeProps({ ${defaultsObjectString()} }, ${origProps});\n`;
+      } else if (rest) {
+        // Insert a line that keeps named props and extracts the rest into a new reactive rest object
+        lineToInsert = `  const [${propsName}, ${
+          (rest.argument.type === "Identifier" && rest.argument.name) || "rest"
+        }] = splitProps(${origProps}, ${splitPropsArray()});\n`;
+      }
+
+      if (lineToInsert) {
+        const body = func.body;
+        if (body.type === "BlockStatement") {
+          if (body.body.length > 0) {
+            // Inject lines handling defaults/rest params before the first statement in the block.
+            yield fixer.insertTextBefore(body.body[0], lineToInsert);
+          }
+          // with an empty block statement body, no need to inject code
+        } else {
+          // The function is an arrow function that implicitly returns an expression, possibly with wrapping parentheses.
+          // These must be removed to convert the function body to a block statement for code injection.
+          const maybeOpenParen = sourceCode.getTokenBefore(body);
+          if (maybeOpenParen?.value === "(") {
+            yield fixer.remove(maybeOpenParen);
+          }
+          const maybeCloseParen = sourceCode.getTokenAfter(body);
+          if (maybeCloseParen?.value === ")") {
+            yield fixer.remove(maybeCloseParen);
+          }
+
+          // Inject lines handling defaults/rest params
+          yield fixer.insertTextBefore(body, `{\n${lineToInsert}  return (`);
+          yield fixer.insertTextAfter(body, `);\n}`);
+        }
+      }
+
+      const scope = sourceCode.scopeManager?.acquire(func);
+      if (scope) {
+        // iterate through destructured variables, associated with real node
+        for (const [info, variable] of propertyInfo.map(
+          (info) => [info, scope.set.get(info.var)] as const
+        )) {
+          if (variable) {
+            // replace all usages of the variable with props accesses
+            for (const reference of variable.references) {
+              if (reference.isReadOnly()) {
+                const access =
+                  info.real.type === "Identifier" && !info.computed
+                    ? `.${info.real.name}`
+                    : `[${sourceCode.getText(info.real)}]`;
+                yield fixer.replaceText(reference.identifier, `${propsName}${access}`);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      FunctionDeclaration: onFunctionEnter,
+      FunctionExpression: onFunctionEnter,
+      ArrowFunctionExpression: onFunctionEnter,
+      "FunctionDeclaration:exit": onFunctionExit,
+      "FunctionExpression:exit": onFunctionExit,
+      "ArrowFunctionExpression:exit": onFunctionExit,
+      JSXElement() {
+        if (functionStack.length) {
+          currentFunction().hasJSX = true;
+        }
+      },
+      JSXFragment() {
+        if (functionStack.length) {
+          currentFunction().hasJSX = true;
+        }
+      },
+    };
+  },
+});