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

package/src/rules/removed-api.ts

@@ -0,0 +1,212 @@
+import type { TSESLint } from "@typescript-eslint/utils";
+import { TSESTree as T, ESLintUtils } from "@typescript-eslint/utils";
+import { findVariable } from "../compat";
+import { jsxGetProp } from "../utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+// Mechanical renames: same semantics, new name. Verified against the Solid 2.0
+// RC source (packages/solid/src/index.ts).
+const RENAMED = new Map<string, string>([
+  ["batch", "flush"],
+  ["equalFn", "isEqual"],
+  ["getListener", "getObserver"],
+  ["onMount", "onSettled"],
+  ["mergeProps", "merge"],
+  ["unwrap", "snapshot"],
+]);
+
+// Removed APIs whose replacement requires a structural rewrite; the message is
+// prescriptive but no autofix is offered.
+const REMOVED = new Map<string, string>([
+  [
+    "createResource",
+    "Async derivation is built into Solid 2.0 computations. Use an async `createMemo(async () => ...)` and read it where needed",
+  ],
+  [
+    "createComputed",
+    "Use `createMemo` for derived values or the two-argument `createEffect(compute, effect)` for side effects",
+  ],
+  ["createDeferred", "There is no direct replacement; move the deferral out of the reactive graph"],
+  ["createSelector", "Use `createProjection` to derive per-key reactive state"],
+  [
+    "on",
+    "Explicit dependencies are built in: use the two-argument `createEffect(compute, effect)` form, where `compute` reads the dependencies",
+  ],
+  ["onError", "Use `createErrorBoundary` (or the `<Errored>` component) to handle errors"],
+  ["catchError", "Use `createErrorBoundary` (or the `<Errored>` component) to handle errors"],
+  [
+    "resetErrorBoundaries",
+    "Error boundaries heal automatically in Solid 2.0 when their sources update",
+  ],
+  [
+    "startTransition",
+    "Transitions are built in. Read pending state with `isPending(...)` and previous values with `latest(...)`",
+  ],
+  [
+    "useTransition",
+    "Transitions are built in. Read pending state with `isPending(...)` and previous values with `latest(...)`",
+  ],
+  ["from", "Signals interop with async iterables directly in Solid 2.0"],
+  ["observable", "Signals interop with async iterables directly in Solid 2.0"],
+  ["indexArray", "Use `mapArray`, which handles index-mode mapping in Solid 2.0"],
+  [
+    "splitProps",
+    'Use `omit` from "solid-js" to exclude props, and pass the original props object along',
+  ],
+  [
+    "renderToStringAsync",
+    "`renderToString` awaits async content in Solid 2.0; use it (or `renderToStream`) instead",
+  ],
+  ["createMutable", "Use `createStore`; store setters mutate directly in Solid 2.0"],
+  ["modifyMutable", "Use `createStore`; store setters mutate directly in Solid 2.0"],
+  [
+    "produce",
+    "Store setters receive a mutable draft by default in Solid 2.0; mutate directly in the setter",
+  ],
+  // Components
+  ["Index", "Use `<For keyed={false}>`, which passes item accessors like `<Index>` did"],
+  ["ErrorBoundary", "Use `<Errored>` (or `createErrorBoundary`)"],
+  ["Suspense", "Use `<Loading>` to render a fallback while content is pending"],
+  ["SuspenseList", "Use `<Reveal>` with `createRevealOrder` to coordinate reveal order"],
+]);
+
+// Exports that moved from "solid-js/store" into core "solid-js" unchanged.
+const STORE_MOVED = new Set(["createStore", "reconcile", "Store", "StoreNode"]);
+
+// Includes "@solidjs/web" so 1.x APIs that survived a mechanical source
+// rewrite (e.g. renderToStringAsync) are still reported as removed.
+const SOLID_SOURCE_REGEX = /^(?:solid-js(?:\/web|\/store)?|@solidjs\/web)$/;
+
+type MessageIds = "renamed" | "removed" | "webMoved" | "storeMoved" | "classList";
+type Options = [];
+
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow Solid 1.x APIs that were removed or renamed in Solid 2.0, with migration guidance.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/removed-api.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      renamed: "'{{name}}' was renamed to '{{replacement}}' in Solid 2.0.",
+      removed: "'{{name}}' was removed in Solid 2.0. {{guidance}}.",
+      webMoved: 'The "solid-js/web" module is now the "@solidjs/web" package in Solid 2.0.',
+      storeMoved:
+        'The "solid-js/store" module no longer exists in Solid 2.0; \'{{name}}\' is exported from "solid-js".',
+      classList:
+        "The `classList` prop was removed in Solid 2.0; `class` accepts the same object form directly.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    /** Rename the import specifier and, when it isn't aliased, all its references. */
+    const renameFix = (
+      fixer: TSESLint.RuleFixer,
+      specifier: T.ImportSpecifier,
+      replacement: string
+    ): Array<TSESLint.RuleFix> => {
+      const fixes: Array<TSESLint.RuleFix> = [];
+      const aliased = specifier.local.range[0] !== specifier.imported.range[0];
+      fixes.push(fixer.replaceText(specifier.imported, replacement));
+      if (!aliased) {
+        const variable = findVariable(context, specifier.local);
+        if (variable) {
+          for (const reference of variable.references) {
+            if (reference.identifier !== specifier.local) {
+              fixes.push(fixer.replaceText(reference.identifier, replacement));
+            }
+          }
+        }
+      }
+      return fixes;
+    };
+
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (!SOLID_SOURCE_REGEX.test(source)) return;
+
+        if (source === "solid-js/web") {
+          context.report({
+            node: node.source,
+            messageId: "webMoved",
+            fix: (fixer) =>
+              fixer.replaceText(
+                node.source,
+                node.source.raw.replace("solid-js/web", "@solidjs/web")
+              ),
+          });
+        }
+
+        for (const specifier of node.specifiers) {
+          if (specifier.type !== "ImportSpecifier") continue;
+          const importedName =
+            specifier.imported.type === "Identifier"
+              ? specifier.imported.name
+              : specifier.imported.value;
+
+          const replacement = RENAMED.get(importedName);
+          if (replacement) {
+            context.report({
+              node: specifier,
+              messageId: "renamed",
+              data: { name: importedName, replacement },
+              fix: (fixer) => renameFix(fixer, specifier, replacement),
+            });
+            continue;
+          }
+
+          const guidance = REMOVED.get(importedName);
+          if (guidance) {
+            context.report({
+              node: specifier,
+              messageId: "removed",
+              data: { name: importedName, guidance },
+            });
+            continue;
+          }
+
+          if (source === "solid-js/store" && STORE_MOVED.has(importedName)) {
+            context.report({
+              node: specifier,
+              messageId: "storeMoved",
+              data: { name: importedName },
+              // Only offer the source rewrite when every specifier in this
+              // declaration survives the move; otherwise the fix would create
+              // a broken import of a removed API from "solid-js".
+              fix: node.specifiers.every(
+                (s) =>
+                  s.type === "ImportSpecifier" &&
+                  STORE_MOVED.has(
+                    s.imported.type === "Identifier" ? s.imported.name : s.imported.value
+                  )
+              )
+                ? (fixer) =>
+                    fixer.replaceText(
+                      node.source,
+                      node.source.raw.replace("solid-js/store", "solid-js")
+                    )
+                : undefined,
+            });
+          }
+        }
+      },
+      JSXAttribute(node) {
+        if (node.name.type === "JSXIdentifier" && node.name.name === "classList") {
+          const element = node.parent as T.JSXOpeningElement;
+          const hasClass = !!jsxGetProp(element.attributes, "class");
+          context.report({
+            node: node.name,
+            messageId: "classList",
+            // If a `class` prop already exists the two must be merged by hand.
+            fix: hasClass ? undefined : (fixer) => fixer.replaceText(node.name, "class"),
+          });
+        }
+      },
+    };
+  },
+});

package/src/rules/require-async-server-function.ts

@@ -0,0 +1,122 @@
+/**
+ * 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 {
+  FunctionNode,
+  isFunctionNode,
+  hasUseServerDirective,
+  getUseServerEligibility,
+  isInsideUseServerFunction,
+  programHasUseServerDirective,
+} from "../utils";
+import { findVariable, getSourceCode } from "../compat";
+
+const { getFunctionHeadLocation } = ASTUtils;
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "asyncServerFunction";
+type Options = [];
+
+/*
+ * The client half of a server function is always asynchronous: calls cross
+ * the network and resolve a Promise. The server half deliberately preserves
+ * synchronous entry for in-process SSR calls. A non-async server function
+ * therefore returns `T` during SSR and `Promise<T>` on the client, and its
+ * declared TypeScript type matches only one of them — a split TS cannot see,
+ * because it types the source declaration, not the compiled proxy.
+ */
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Require server functions to be async, matching their client-side contract.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/require-async-server-function.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      asyncServerFunction:
+        "Server functions should be async: on the client every call resolves a Promise, but during server rendering this function is called in-process and returns synchronously, so the same code observes two different types.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const sourceCode = getSourceCode(context);
+    let moduleLevel = false;
+
+    const checkFunction = (fn: FunctionNode) => {
+      if (fn.async) return;
+      context.report({
+        loc: getFunctionHeadLocation(fn, sourceCode),
+        messageId: "asyncServerFunction",
+        fix: (fixer) => {
+          const firstToken = sourceCode.getFirstToken(fn);
+          return firstToken ? fixer.insertTextBefore(firstToken, "async ") : null;
+        },
+      });
+    };
+
+    /** Resolves `export { name }` specifiers to top-level function nodes. */
+    const resolveExportedFunction = (identifier: T.Identifier): FunctionNode | null => {
+      const variable = findVariable(context, identifier);
+      const def = variable?.defs[0];
+      if (!def) return null;
+      if (def.type === "FunctionName" && isFunctionNode(def.node)) return def.node;
+      if (
+        def.type === "Variable" &&
+        def.node.type === "VariableDeclarator" &&
+        isFunctionNode(def.node.init)
+      ) {
+        return def.node.init;
+      }
+      return null;
+    };
+
+    return {
+      Program(node) {
+        moduleLevel = programHasUseServerDirective(node);
+      },
+      ":function"(node: T.Node) {
+        if (!isFunctionNode(node)) return;
+        // Function-level directives. Ineligible positions (object/class
+        // methods) are never extracted at all; valid-use-server owns those.
+        if (
+          !moduleLevel &&
+          hasUseServerDirective(node) &&
+          getUseServerEligibility(node) === "eligible" &&
+          !isInsideUseServerFunction(node)
+        ) {
+          checkFunction(node);
+        }
+      },
+      ExportNamedDeclaration(node) {
+        if (!moduleLevel) return;
+        if (node.declaration) {
+          if (isFunctionNode(node.declaration)) {
+            checkFunction(node.declaration);
+          } else if (node.declaration.type === "VariableDeclaration") {
+            for (const declarator of node.declaration.declarations) {
+              if (isFunctionNode(declarator.init)) checkFunction(declarator.init);
+            }
+          }
+        } else {
+          for (const specifier of node.specifiers) {
+            if (specifier.local.type !== "Identifier") continue;
+            const fn = resolveExportedFunction(specifier.local);
+            if (fn) checkFunction(fn);
+          }
+        }
+      },
+      ExportDefaultDeclaration(node) {
+        if (!moduleLevel) return;
+        if (isFunctionNode(node.declaration)) checkFunction(node.declaration);
+      },
+    };
+  },
+});

package/src/rules/self-closing-comp.ts

@@ -0,0 +1,150 @@
+/**
+ * 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 } from "../utils";
+import { getSourceCode } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+function isComponent(node: T.JSXOpeningElement) {
+  return (
+    (node.name.type === "JSXIdentifier" && !isDOMElementName(node.name.name)) ||
+    node.name.type === "JSXMemberExpression"
+  );
+}
+
+const voidDOMElementRegex =
+  /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
+function isVoidDOMElementName(name: string) {
+  return voidDOMElementRegex.test(name);
+}
+
+function childrenIsEmpty(node: T.JSXOpeningElement) {
+  return (node.parent as T.JSXElement).children.length === 0;
+}
+
+function childrenIsMultilineSpaces(node: T.JSXOpeningElement) {
+  const childrens = (node.parent as T.JSXElement).children;
+
+  return (
+    childrens.length === 1 &&
+    childrens[0].type === "JSXText" &&
+    childrens[0].value.indexOf("\n") !== -1 &&
+    childrens[0].value.replace(/(?!\xA0)\s/g, "") === ""
+  );
+}
+
+type MessageIds = "selfClose" | "dontSelfClose";
+type Options = [{ component?: "all" | "none"; html?: "all" | "void" | "none" }?];
+
+/**
+ * This rule is adapted from eslint-plugin-react's self-closing-comp rule under the MIT license,
+ * with some enhancements. Thank you for your work!
+ */
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "layout",
+    docs: {
+      description: "Disallow extra closing tags for components without children.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/self-closing-comp.md",
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          component: {
+            type: "string",
+            description: "which Solid components should be self-closing when possible",
+            enum: ["all", "none"],
+            default: "all",
+          },
+          html: {
+            type: "string",
+            description: "which native elements should be self-closing when possible",
+            enum: ["all", "void", "none"],
+            default: "all",
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      selfClose: "Empty components are self-closing.",
+      dontSelfClose: "This element should not be self-closing.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    function shouldBeSelfClosedWhenPossible(node: T.JSXOpeningElement): boolean {
+      if (isComponent(node)) {
+        const whichComponents = context.options[0]?.component ?? "all";
+        return whichComponents === "all";
+      } else if (node.name.type === "JSXIdentifier" && isDOMElementName(node.name.name)) {
+        const whichComponents = context.options[0]?.html ?? "all";
+        switch (whichComponents) {
+          case "all":
+            return true;
+          case "void":
+            return isVoidDOMElementName(node.name.name);
+          case "none":
+            return false;
+        }
+      }
+      return true; // shouldn't encounter
+    }
+
+    return {
+      JSXOpeningElement(node) {
+        const canSelfClose = childrenIsEmpty(node) || childrenIsMultilineSpaces(node);
+        if (canSelfClose) {
+          const shouldSelfClose = shouldBeSelfClosedWhenPossible(node);
+          if (shouldSelfClose && !node.selfClosing) {
+            context.report({
+              node,
+              messageId: "selfClose",
+              fix(fixer) {
+                // Represents the last character of the JSXOpeningElement, the '>' character
+                const openingElementEnding = node.range[1] - 1;
+                // Represents the last character of the JSXClosingElement, the '>' character
+                const closingElementEnding = (node.parent as T.JSXElement).closingElement!.range[1];
+
+                // Replace />.*<\/.*>/ with '/>'
+                const range = [openingElementEnding, closingElementEnding] as const;
+                return fixer.replaceTextRange(range, " />");
+              },
+            });
+          } else if (!shouldSelfClose && node.selfClosing) {
+            context.report({
+              node,
+              messageId: "dontSelfClose",
+              fix(fixer) {
+                const sourceCode = getSourceCode(context);
+                const tagName = sourceCode.getText(node.name);
+                // Represents the last character of the JSXOpeningElement, the '>' character
+                const selfCloseEnding = node.range[1];
+                // Replace ' />' or '/>' with '></${tagName}>'
+                const lastTokens = sourceCode.getLastTokens(node, { count: 3 }); // JSXIdentifier, '/', '>'
+                const isSpaceBeforeSelfClose = sourceCode.isSpaceBetween?.(
+                  lastTokens[0],
+                  lastTokens[1]
+                );
+                const range = [
+                  isSpaceBeforeSelfClose ? selfCloseEnding - 3 : selfCloseEnding - 2,
+                  selfCloseEnding,
+                ] as const;
+                return fixer.replaceTextRange(range, `></${tagName}>`);
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+});

package/src/rules/style-prop.ts

@@ -0,0 +1,140 @@
+/**
+ * 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 kebabCase from "kebab-case";
+import { all as allCssProperties } from "known-css-properties";
+import parse from "style-to-object";
+import { jsxPropName } from "../utils";
+import { getScope } from "../compat";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getPropertyName, getStaticValue } = ASTUtils;
+
+const lengthPercentageRegex = /\b(?:width|height|margin|padding|border-width|font-size)\b/i;
+
+type MessageIds = "kebabStyleProp" | "invalidStyleProp" | "numericStyleValue" | "stringStyle";
+type Options = [{ styleProps?: Array<string>; allowString?: boolean }?];
+
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Require CSS properties in the `style` prop to be valid and kebab-cased (ex. 'font-size'), not camel-cased (ex. 'fontSize') like in React, " +
+        "and that property values with dimensions are strings, not numbers with implicit 'px' units.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/style-prop.md",
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          styleProps: {
+            description: "an array of prop names to treat as a CSS style object",
+            default: ["style"],
+            type: "array",
+            items: {
+              type: "string",
+            },
+            minItems: 1,
+            uniqueItems: true,
+          },
+          allowString: {
+            description:
+              "if allowString is set to true, this rule will not convert a style string literal into a style object (not recommended for performance)",
+            type: "boolean",
+            default: false,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      kebabStyleProp: "Use {{ kebabName }} instead of {{ name }}.",
+      invalidStyleProp: "{{ name }} is not a valid CSS property.",
+      numericStyleValue:
+        'This CSS property value should be a string with a unit; Solid does not automatically append a "px" unit.',
+      stringStyle: "Use an object for the style prop instead of a string.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const allCssPropertiesSet: Set<string> = new Set(allCssProperties);
+    const allowString = Boolean(context.options[0]?.allowString);
+    const styleProps = context.options[0]?.styleProps || ["style"];
+
+    return {
+      JSXAttribute(node) {
+        if (styleProps.indexOf(jsxPropName(node)) === -1) {
+          return;
+        }
+        const style =
+          node.value?.type === "JSXExpressionContainer" ? node.value.expression : node.value;
+
+        if (!style) {
+          return;
+        } else if (style.type === "Literal" && typeof style.value === "string" && !allowString) {
+          // Convert style="font-size: 10px" to style={{ "font-size": "10px" }}
+          let objectStyles: Record<string, string> | undefined;
+          try {
+            objectStyles = parse(style.value) ?? undefined;
+          } catch {
+            // no-op
+          }
+
+          context.report({
+            node: style,
+            messageId: "stringStyle",
+            // replace full prop value, wrap in JSXExpressionContainer, more fixes may be applied below
+            fix:
+              objectStyles &&
+              ((fixer) => fixer.replaceText(node.value!, `{${JSON.stringify(objectStyles)}}`)),
+          });
+        } else if (style.type === "TemplateLiteral" && !allowString) {
+          context.report({
+            node: style,
+            messageId: "stringStyle",
+          });
+        } else if (style.type === "ObjectExpression") {
+          const properties = style.properties.filter(
+            (prop) => prop.type === "Property"
+          ) as Array<T.Property>;
+          properties.forEach((prop) => {
+            const name: string | null = getPropertyName(prop, getScope(context, prop));
+            if (name && !name.startsWith("--") && !allCssPropertiesSet.has(name)) {
+              const kebabName: string = kebabCase(name);
+              if (allCssPropertiesSet.has(kebabName)) {
+                // if it's not valid simply because it's camelCased instead of kebab-cased, provide a fix
+                context.report({
+                  node: prop.key,
+                  messageId: "kebabStyleProp",
+                  data: { name, kebabName },
+                  fix: (fixer) => fixer.replaceText(prop.key, `"${kebabName}"`), // wrap kebab name in quotes to be a valid object key
+                });
+              } else {
+                context.report({
+                  node: prop.key,
+                  messageId: "invalidStyleProp",
+                  data: { name },
+                });
+              }
+            } else if (!name || (!name.startsWith("--") && lengthPercentageRegex.test(name))) {
+              // catches numeric values (ex. { "font-size": 12 }) for common <length-percentage> peroperties
+              // and suggests quoting or appending 'px'
+              const value: unknown = getStaticValue(prop.value)?.value;
+              if (typeof value === "number" && value !== 0) {
+                context.report({ node: prop.value, messageId: "numericStyleValue" });
+              }
+            }
+          });
+        }
+      },
+    };
+  },
+});