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

package/src/rules/no-innerhtml.ts

@@ -0,0 +1,143 @@
+/**
+ * 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, ASTUtils } from "@typescript-eslint/utils";
+import isHtml from "is-html";
+import { jsxPropName } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getStringIfConstant } = ASTUtils;
+
+type MessageIds = "dangerous" | "conflict" | "notHtml" | "useInnerText" | "dangerouslySetInnerHTML";
+type Options = [{ allowStatic?: boolean }?];
+
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow usage of the innerHTML attribute, which can often lead to security vulnerabilities.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-innerhtml.md",
+    },
+    fixable: "code",
+    hasSuggestions: true,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allowStatic: {
+            description:
+              "if the innerHTML value is guaranteed to be a static HTML string (i.e. no user input), allow it",
+            type: "boolean",
+            default: true,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      dangerous:
+        "The innerHTML attribute is dangerous; passing unsanitized input can lead to security vulnerabilities.",
+      conflict:
+        "The innerHTML attribute should not be used on an element with child elements; they will be overwritten.",
+      notHtml: "The string passed to innerHTML does not appear to be valid HTML.",
+      useInnerText: "For text content, using innerText is clearer and safer.",
+      dangerouslySetInnerHTML:
+        "The dangerouslySetInnerHTML prop is not supported; use innerHTML instead.",
+    },
+  },
+  defaultOptions: [{ allowStatic: true }],
+  create(context) {
+    const allowStatic = Boolean(context.options[0]?.allowStatic ?? true);
+    return {
+      JSXAttribute(node) {
+        if (jsxPropName(node) === "dangerouslySetInnerHTML") {
+          if (
+            node.value?.type === "JSXExpressionContainer" &&
+            node.value.expression.type === "ObjectExpression" &&
+            node.value.expression.properties.length === 1
+          ) {
+            const htmlProp = node.value.expression.properties[0];
+            if (
+              htmlProp.type === "Property" &&
+              htmlProp.key.type === "Identifier" &&
+              htmlProp.key.name === "__html"
+            ) {
+              context.report({
+                node,
+                messageId: "dangerouslySetInnerHTML",
+                fix: (fixer) => {
+                  const propRange = node.range;
+                  const valueRange = htmlProp.value.range;
+                  return [
+                    fixer.replaceTextRange([propRange[0], valueRange[0]], "innerHTML={"),
+                    fixer.replaceTextRange([valueRange[1], propRange[1]], "}"),
+                  ];
+                },
+              });
+            } else {
+              context.report({
+                node,
+                messageId: "dangerouslySetInnerHTML",
+              });
+            }
+          } else {
+            context.report({
+              node,
+              messageId: "dangerouslySetInnerHTML",
+            });
+          }
+          return;
+        } else if (jsxPropName(node) !== "innerHTML") {
+          return;
+        }
+
+        if (allowStatic) {
+          const innerHtmlNode =
+            node.value?.type === "JSXExpressionContainer" ? node.value.expression : node.value;
+          const innerHtml = innerHtmlNode && getStringIfConstant(innerHtmlNode);
+          if (typeof innerHtml === "string") {
+            if (isHtml(innerHtml)) {
+              // go up to enclosing JSXElement and check if it has children
+              if (
+                node.parent?.parent?.type === "JSXElement" &&
+                node.parent.parent.children?.length
+              ) {
+                context.report({
+                  node: node.parent.parent, // report error on JSXElement instead of JSXAttribute
+                  messageId: "conflict",
+                });
+              }
+            } else {
+              context.report({
+                node,
+                messageId: "notHtml",
+                suggest: [
+                  {
+                    fix: (fixer) => fixer.replaceText(node.name, "innerText"),
+                    messageId: "useInnerText",
+                  },
+                ],
+              });
+            }
+          } else {
+            context.report({
+              node,
+              messageId: "dangerous",
+            });
+          }
+        } else {
+          context.report({
+            node,
+            messageId: "dangerous",
+          });
+        }
+      },
+    };
+  },
+});

package/src/rules/no-invalid-server-capture.ts

@@ -0,0 +1,104 @@
+/**
+ * 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 {
+  isFunctionNode,
+  hasUseServerDirective,
+  getUseServerEligibility,
+  isInsideUseServerFunction,
+  programHasUseServerDirective,
+} from "../utils";
+import { getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "invalidCapture";
+type Options = [];
+
+/*
+ * An editor-time mirror of the compiler's closure-capture validation. An
+ * extracted server function runs in a different closure environment than the
+ * one it was written in: on the server it is hoisted to module top level, on
+ * the client it is replaced by a network proxy. Any variable captured from an
+ * intermediate scope — declared between module top level and the server
+ * function itself — does not exist at runtime. The compiler rejects this at
+ * build time; this rule reports the same captures as you type.
+ *
+ * Module-level directives are unaffected (the whole module runs on the
+ * server, so its closures are intact). Eligibility mirrors the transform:
+ * functions it never extracts (object/class methods, getters/setters) are
+ * not validated, and directives nested inside an already-extracted server
+ * function are ignored.
+ */
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow server functions from capturing variables in enclosing non-module scopes, mirroring the compiler's build-time validation.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-invalid-server-capture.md",
+    },
+    schema: [],
+    messages: {
+      invalidCapture:
+        "Server functions cannot capture '{{name}}' from an enclosing {{kind}}: on the server the function is hoisted to module level and on the client it becomes a network proxy, so the captured variable does not exist at runtime. Use parameters, module-level bindings, imports, or globals instead.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const sourceCode = getSourceCode(context);
+    let moduleLevel = false;
+
+    return {
+      Program(node) {
+        moduleLevel = programHasUseServerDirective(node);
+      },
+      ":function"(node: T.Node) {
+        if (!isFunctionNode(node)) return;
+        if (moduleLevel) return;
+        if (!hasUseServerDirective(node)) return;
+        if (getUseServerEligibility(node) !== "eligible") return;
+        if (isInsideUseServerFunction(node)) return;
+
+        const scope = sourceCode.scopeManager?.acquire(node);
+        if (!scope) return;
+        // `through` holds every reference crossing this function's boundary,
+        // including those from nested scopes.
+        for (const reference of scope.through) {
+          const variable = reference.resolved;
+          if (!variable) continue; // a true global
+          // TS type-only references are erased from the output and never captured
+          const typedReference = reference as {
+            isTypeReference?: boolean;
+            isValueReference?: boolean;
+          };
+          if (typedReference.isTypeReference && !typedReference.isValueReference) continue;
+          const declarationScope = variable.scope;
+          if (declarationScope.type === "module" || declarationScope.type === "global") continue;
+          // A named function expression referencing itself travels with the
+          // extracted function and stays valid.
+          if (
+            declarationScope.type === "function-expression-name" &&
+            declarationScope.block === node
+          ) {
+            continue;
+          }
+          context.report({
+            node: reference.identifier,
+            messageId: "invalidCapture",
+            data: {
+              name: reference.identifier.name,
+              kind: declarationScope.type === "function" ? "function" : "block",
+            },
+          });
+        }
+      },
+    };
+  },
+});

package/src/rules/no-module-scope-reactive-primitive.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 } from "@typescript-eslint/utils";
+import { findParent, isFunctionNode, getSolidSourceRegex, trackImports } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "moduleScopePrimitive";
+type Options = [];
+
+const REACTIVE_PRIMITIVES = [
+  "createSignal",
+  "createMemo",
+  "createStore",
+  "createEffect",
+  "createRenderEffect",
+  "createOptimistic",
+  "createOptimisticStore",
+  "createProjection",
+];
+
+/*
+ * Reactive state created at module scope is shared across every request when
+ * server rendering, leaking one user's state into another's response. It is a
+ * valid pattern in client-only apps, which is why this rule is only enabled
+ * in the strict config. Wrapping in `createRoot` (or any function) is the
+ * deliberate escape hatch and is not flagged.
+ */
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow reactive primitives at module scope, where state is shared across SSR requests.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-module-scope-reactive-primitive.md",
+    },
+    schema: [],
+    messages: {
+      moduleScopePrimitive:
+        "{{name}} at module scope creates state shared across all SSR requests. Create it inside a component or provider, or wrap it in `createRoot` if module-level state is intentional (client-only).",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const { matchImport, handleImportDeclaration } = trackImports(getSolidSourceRegex(context));
+
+    return {
+      ImportDeclaration: handleImportDeclaration,
+      CallExpression(node) {
+        if (node.callee.type !== "Identifier") return;
+        const name = matchImport(REACTIVE_PRIMITIVES, node.callee.name);
+        if (!name) return;
+        if (findParent(node, isFunctionNode) == null) {
+          context.report({
+            node,
+            messageId: "moduleScopePrimitive",
+            data: { name: node.callee.name },
+          });
+        }
+      },
+    };
+  },
+});

package/src/rules/no-proxy-apis.ts

@@ -0,0 +1,96 @@
+/**
+ * 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 { isFunctionNode, getSolidSourceRegex, trackImports, isPropsByName, trace } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow usage of APIs that use ES6 Proxies, only to target environments that don't support them.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-proxy-apis.md",
+    },
+    schema: [],
+    messages: {
+      noStore: "Solid Store APIs use Proxies, which are incompatible with your target environment.",
+      spreadCall:
+        "Using a function call in JSX spread makes Solid use Proxies, which are incompatible with your target environment.",
+      spreadMember:
+        "Using a property access in JSX spread makes Solid use Proxies, which are incompatible with your target environment.",
+      proxyLiteral: "Proxies are incompatible with your target environment.",
+      mergeProps:
+        "If you pass a function to `mergeProps`, it will create a Proxy, which are incompatible with your target environment.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const { matchImport, handleImportDeclaration } = trackImports(getSolidSourceRegex(context));
+
+    return {
+      ImportDeclaration(node) {
+        handleImportDeclaration(node); // track import aliases
+
+        const source = node.source.value;
+        if (source === "solid-js/store") {
+          context.report({
+            node,
+            messageId: "noStore",
+          });
+        }
+      },
+      "JSXSpreadAttribute MemberExpression"(node: T.MemberExpression) {
+        context.report({ node, messageId: "spreadMember" });
+      },
+      "JSXSpreadAttribute CallExpression"(node: T.CallExpression) {
+        context.report({ node, messageId: "spreadCall" });
+      },
+      CallExpression(node) {
+        if (node.callee.type === "Identifier") {
+          if (matchImport("mergeProps", node.callee.name)) {
+            node.arguments
+              .filter((arg) => {
+                if (arg.type === "SpreadElement") return true;
+                const traced = trace(arg, context);
+                return (
+                  (traced.type === "Identifier" && !isPropsByName(traced.name)) ||
+                  isFunctionNode(traced)
+                );
+              })
+              .forEach((badArg) => {
+                context.report({
+                  node: badArg,
+                  messageId: "mergeProps",
+                });
+              });
+          }
+        } else if (node.callee.type === "MemberExpression") {
+          if (
+            node.callee.object.type === "Identifier" &&
+            node.callee.object.name === "Proxy" &&
+            node.callee.property.type === "Identifier" &&
+            node.callee.property.name === "revocable"
+          ) {
+            context.report({
+              node,
+              messageId: "proxyLiteral",
+            });
+          }
+        }
+      },
+      NewExpression(node) {
+        if (node.callee.type === "Identifier" && node.callee.name === "Proxy") {
+          context.report({ node, messageId: "proxyLiteral" });
+        }
+      },
+    };
+  },
+});

package/src/rules/no-react-deps.ts

@@ -0,0 +1,68 @@
+/**
+ * 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 } from "@typescript-eslint/utils";
+import { isFunctionNode, isSolidV2, trace, getSolidSourceRegex, trackImports } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow usage of dependency arrays in `createEffect` and `createMemo`.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-react-deps.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      noUselessDep:
+        "In Solid, `{{name}}` doesn't accept a dependency array because it automatically tracks its dependencies. If you really need to override the list of dependencies, use `on`.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    // In Solid 2.0 the second argument of createEffect is the (required) effect
+    // function, so a "dependency array" there is a type and runtime error already;
+    // this rule's premise only exists in 1.x.
+    if (isSolidV2(context)) return {};
+
+    /** Tracks imports from 'solid-js', handling aliases. */
+    const { matchImport, handleImportDeclaration } = trackImports(getSolidSourceRegex(context));
+
+    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));
+
+          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,
+            });
+          }
+        }
+      },
+    };
+  },
+});

package/src/rules/no-react-specific-props.ts

@@ -0,0 +1,60 @@
+import { TSESLint, ESLintUtils } from "@typescript-eslint/utils";
+import { isDOMElementName, jsxGetProp, jsxHasProp } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+const reactSpecificProps = [
+  { from: "className", to: "class" },
+  { from: "htmlFor", to: "for" },
+];
+
+export default createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow usage of React-specific `className`/`htmlFor` props, which were deprecated in v1.4.0.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-react-specific-props.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      prefer: "Prefer the `{{ to }}` prop over the deprecated `{{ from }}` prop.",
+      noUselessKey: "Elements in a <For> or <Index> list do not need a key prop.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        for (const { from, to } of reactSpecificProps) {
+          const classNameAttribute = jsxGetProp(node.attributes, from);
+          if (classNameAttribute) {
+            // only auto-fix if there is no class prop defined
+            const fix = !jsxHasProp(node.attributes, to)
+              ? (fixer: TSESLint.RuleFixer) => fixer.replaceText(classNameAttribute.name, to)
+              : undefined;
+
+            context.report({
+              node: classNameAttribute,
+              messageId: "prefer",
+              data: { from, to },
+              fix,
+            });
+          }
+        }
+        if (node.name.type === "JSXIdentifier" && isDOMElementName(node.name.name)) {
+          const keyProp = jsxGetProp(node.attributes, "key");
+          if (keyProp) {
+            // no DOM element has a 'key' prop, so we can assert that this is a holdover from React.
+            context.report({
+              node: keyProp,
+              messageId: "noUselessKey",
+              fix: (fixer) => fixer.remove(keyProp),
+            });
+          }
+        }
+      },
+    };
+  },
+});