Migrating from eslint-plugin-react

import eslintReact from "@eslint-react/eslint-plugin";
import eslintReactKit from "@eslint-react/kit";
import { defineConfig } from "eslint/config";
import {
  booleanPropNaming,
  checkedRequiresOnchangeOrReadonly,
  forbidComponentProps,
  forbidDomProps,
  forbidElements,
  functionComponentDefinition,
  jsxBooleanValue,
  jsxFragments,
  jsxHandlerNames,
  jsxMaxDepth,
  jsxNoBind,
  jsxNoDuplicateProps,
  jsxNoLiterals,
  jsxPascalCase,
  jsxPropsNoSpreadMulti,
  jsxPropsNoSpreading,
  noAdjacentInlineElements,
  noDirectAccessProps,
  noMultiComp,
} from "@examples/react-dom-with-custom-rules";

export default defineConfig([
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      eslintReact.configs["recommended-typescript"],
      eslintReactKit()
        .use(booleanPropNaming, { rule: "^(is|has|should)[A-Z]([A-Za-z0-9]?)+" })
        .use(checkedRequiresOnchangeOrReadonly)
        .use(forbidComponentProps, { forbidden: ["className", "style"] })
        .use(forbidDomProps, { forbidden: ["style", "className"] })
        .use(jsxFragments)
        .use(jsxHandlerNames, { eventHandlerPrefix: "handle", eventHandlerPropPrefix: "on" })
        .use(jsxMaxDepth, { max: 3 })
        .use(jsxNoDuplicateProps)
        .use(jsxNoLiterals, { noStrings: true, allowedStrings: ["allowed"] })
        .use(jsxPascalCase)
        .use(jsxPropsNoSpreadMulti)
        .use(noAdjacentInlineElements)
        .use(noDirectAccessProps)
        .use(noMultiComp)
        .use(forbidElements, {
          forbidden: new Map([
            ["button", "Use <Button> from '@/components/ui' instead."],
            ["input", "Use <Input> from '@/components/ui' instead."],
          ]),
        })
        .use(functionComponentDefinition)
        .use(jsxBooleanValue)
        .use(jsxNoBind)
        .use(jsxPropsNoSpreading)
        .getConfig(),
    ],
  },
]);

import { type RuleFunction, merge } from "@eslint-react/kit";
import { ESLintUtils } from "@typescript-eslint/utils";
import ts from "typescript";

export type BooleanPropNamingOptions = {
  /** A regular expression that boolean prop names must match. */
  rule?: string;
};

/** Enforce boolean prop naming convention. */
export function booleanPropNaming(options?: BooleanPropNamingOptions): RuleFunction {
  const DEFAULT_RULE = "^(is|has|should)[A-Z]([A-Za-z0-9]?)+";

  const { rule = DEFAULT_RULE } = options ?? {};
  const regex = new RegExp(rule);

  function flattenTypes(t: ts.Type): ts.Type[] {
    return t.isUnion() ? t.types.flatMap(flattenTypes) : [t];
  }

  function isBooleanLikeType(t: ts.Type) {
    return flattenTypes(t).some(t => (t.getFlags() & ts.TypeFlags.BooleanLike) > 0);
  }

  return (context, { collect }) => {
    const srv = ESLintUtils.getParserServices(context, false);
    const chk = srv.program.getTypeChecker();
    const { query, visitor } = collect.components(context);

    return merge(visitor, {
      "Program:exit"(prog) {
        const comps = query.all(prog);

        // ─── Iterate Components ────────────────────────
        for (const comp of comps) {
          const [propsParam] = comp.node.params;
          if (propsParam == null) continue;

          const tsNode = srv.esTreeNodeToTSNodeMap.get(propsParam);
          const propsType = chk.getTypeAtLocation(tsNode);
          const declaredProps = propsType.getProperties();

          // ─── Iterate Props ─────────────────────────────
          for (const prop of declaredProps) {
            const propType = chk.getTypeOfSymbolAtLocation(prop, tsNode);

            // › Filter: must be boolean
            if (!isBooleanLikeType(propType)) continue;

            // › Filter: must match naming pattern
            if (regex.test(prop.name)) continue;

            const decls = prop.getDeclarations();
            if (decls == null || decls.length === 0) continue;

            const [decl] = decls;
            if (decl == null) continue;

            const declNode = srv.tsNodeToESTreeNodeMap.get(decl);
            if (declNode == null) continue;

            const node = "key" in declNode ? declNode.key : declNode;

            // › Report violation
            context.report({
              data: { name: prop.name, rule },
              message: `Boolean prop "{{name}}" should match "{{rule}}".`,
              node,
            });
          }
        }
      },
    });
  };
}

import type { RuleFunction } from "@eslint-react/kit";

/** Require `onChange` or `readOnly` when using `checked` on `<input>`. */
export function checkedRequiresOnchangeOrReadonly(): RuleFunction {
  return (context) => ({
    JSXOpeningElement(node) {
      // › Verify this is an <input> element
      const name = node.name.type === "JSXIdentifier" ? node.name.name : null;
      if (name !== "input") return;

      // › Collect all attribute names
      const attrs = new Set<string>();
      for (const attr of node.attributes) {
        if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier") {
          attrs.add(attr.name.name);
        }
      }

      // › Guard: must have checked attribute
      if (!attrs.has("checked")) return;

      // › Validate: requires onChange or readOnly
      if (!attrs.has("onChange") && !attrs.has("readOnly")) {
        context.report({
          node,
          message: "`checked` requires `onChange` or `readOnly`.",
        });
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link forbidComponentProps}. */
export type ForbidComponentPropsOptions = {
  /** Prop names that are not allowed on React components. */
  forbidden: string[];
};

/** Forbid certain props on React components (not DOM elements). */
export function forbidComponentProps(options: ForbidComponentPropsOptions): RuleFunction {
  const { forbidden } = options;
  return (context) => ({
    JSXAttribute(node) {
      // › Extract prop name
      const propName = node.name.type === "JSXIdentifier" ? node.name.name : null;
      if (propName == null || !forbidden.includes(propName)) return;

      // › Verify context is JSX opening element
      const parent = node.parent;
      if (parent?.type !== "JSXOpeningElement") return;

      // › Extract element name
      const elemName = parent.name.type === "JSXIdentifier" ? parent.name.name : null;

      // › Guard: only check components (PascalCase), not DOM elements
      if (elemName == null || elemName[0] !== elemName[0]?.toUpperCase()) return;

      context.report({
        node,
        message: `Prop "${propName}" is forbidden on components.`,
      });
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link forbidDomProps}. */
export type ForbidDomPropsOptions = {
  /** Prop names that are not allowed on DOM elements. */
  forbidden: string[];
};

/** Forbid certain props on DOM elements (not React components). */
export function forbidDomProps(options: ForbidDomPropsOptions): RuleFunction {
  const { forbidden } = options;
  return (context) => ({
    JSXAttribute(node) {
      // › Extract prop name
      const propName = node.name.type === "JSXIdentifier" ? node.name.name : null;
      if (propName == null || !forbidden.includes(propName)) return;

      // › Verify context is JSX opening element
      const parent = node.parent;
      if (parent?.type !== "JSXOpeningElement") return;

      // › Extract element name
      const elemName = parent.name.type === "JSXIdentifier" ? parent.name.name : null;

      // › Guard: only check DOM elements (lowercase), not components
      if (elemName == null || elemName[0] !== elemName[0]?.toLowerCase()) return;

      context.report({
        node,
        message: `Prop "${propName}" is forbidden on DOM elements.`,
      });
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link forbidElements}. */
export type ForbidElementsOptions = {
  /** A map from element name to the error message reported when that element is used. */
  forbidden: Map<string, string>;
};

/** Forbid specific JSX elements. */
export function forbidElements(options: ForbidElementsOptions): RuleFunction {
  const { forbidden } = options;
  return (context) => ({
    JSXOpeningElement(node) {
      // › Extract element identifier
      const name = node.name.type === "JSXIdentifier" ? node.name.name : null;

      // › Guard: must be in forbidden map
      if (name == null || !forbidden.has(name)) return;

      // › Report violation with custom message
      context.report({ node, message: forbidden.get(name)! });
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";

/** Enforce arrow function definitions for function components. */
export function functionComponentDefinition(): RuleFunction {
  return (context, { collect, hint }) => {
    const { query, visitor } = collect.components(context, {
      hint: hint.component.Default & ~hint.component.DoNotIncludeFunctionDefinedAsObjectMethod,
    });
    return merge(
      visitor,
      {
        "Program:exit"(program) {
          // ─── Iterate all components ────────────────────
          for (const { node } of query.all(program)) {
            // › Guard: must not already be arrow function
            if (node.type === "ArrowFunctionExpression") continue;

            context.report({
              node,
              message: "Function components must be defined with arrow functions.",
              suggest: [
                {
                  desc: "Convert to arrow function.",
                  fix(fixer) {
                    const src = context.sourceCode;
                    if (node.generator) return null;

                    const prefix = node.async ? "async " : "";
                    const typeParams = node.typeParameters ? src.getText(node.typeParameters) : "";
                    const params = `(${node.params.map((p) => src.getText(p)).join(", ")})`;
                    const returnType = node.returnType ? src.getText(node.returnType) : "";
                    const body = src.getText(node.body);

                    // ─── Case: function declaration ──────────────
                    if (node.type === "FunctionDeclaration" && node.id) {
                      // dprint-ignore
                      return fixer.replaceText(node, `const ${node.id.name} = ${prefix}${typeParams}${params}${returnType} => ${body};`);
                    }

                    // ─── Case: function expression in variable ───
                    if (node.type === "FunctionExpression" && node.parent.type === "VariableDeclarator") {
                      // dprint-ignore
                      return fixer.replaceText(node, `${prefix}${typeParams}${params}${returnType} => ${body}`);
                    }

                    // ─── Case: object method shorthand ───────────
                    if (node.type === "FunctionExpression" && node.parent.type === "Property") {
                      // dprint-ignore
                      return fixer.replaceText(node.parent, `${src.getText(node.parent.key)}: ${prefix}${typeParams}${params}${returnType} => ${body}`);
                    }

                    return null;
                  },
                },
              ],
            });
          }
        },
      },
    );
  };
}

import type { RuleFunction } from "@eslint-react/kit";

/** Enforce shorthand for boolean JSX attributes. */
export function jsxBooleanValue(): RuleFunction {
  return (context, { ast }) => ({
    JSXAttribute(node) {
      const { value } = node;

      // › Guard: must have expression value
      if (value?.type !== "JSXExpressionContainer") return;

      // › Guard: must be literal true
      const expression = ast.unwrap(value.expression);
      if (expression.type !== "Literal" || expression.value !== true) return;

      // › Report: prefer shorthand form
      context.report({
        node,
        message: "Omit the value for boolean attributes.",
        fix: (fixer) => fixer.removeRange([node.name.range[1], value.range[1]]),
      });
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";
import type { TSESTree } from "@typescript-eslint/types";

/** Options for {@link jsxFragments}. */
export type JsxsFragmentsOptions = {
  /** The mode to enforce: "syntax" (default, shorthand) or "element" (standard form). */
  mode?: "syntax" | "element";
};

/** Enforce shorthand or standard form for React fragments. */
export function jsxFragments(options: JsxsFragmentsOptions = {}): RuleFunction {
  const { mode = "syntax" } = options;
  return (context) => {
    // ── Helpers ─────────────────────────────────────

    function reportSyntaxPreferred(node: TSESTree.JSXOpeningElement, pattern: "React.Fragment" | "Fragment") {
      // › Guard: has key prop (legitimate use of standard form)
      const hasAttributes = node.attributes.length > 0;
      if (hasAttributes) return;

      context.report({
        node,
        message: `Use shorthand fragment syntax '<>...</>' instead of '<${pattern}>...</${pattern}'.`,
        fix(fixer) {
          const closing = node.parent?.closingElement;
          if (!closing) return null;
          return [fixer.replaceText(node, "<>"), fixer.replaceText(closing, "</>")];
        },
      });
    }

    // ── Listeners ────────────────────────────────────

    return {
      JSXOpeningElement(node) {
        const name = node.name;

        // ─── Handle <Fragment> (JSXIdentifier) ───────
        if (name.type === "JSXIdentifier" && name.name === "Fragment") {
          if (mode === "syntax") {
            reportSyntaxPreferred(node, "Fragment");
          }
          return;
        }

        // ─── Handle <React.Fragment> (JSXMemberExpression) ─
        if (name.type !== "JSXMemberExpression") return;
        if (name.object.type !== "JSXIdentifier" || name.object.name !== "React") return;
        if (name.property.type !== "JSXIdentifier" || name.property.name !== "Fragment") return;

        if (mode === "syntax") {
          reportSyntaxPreferred(node, "React.Fragment");
        }
      },
      JSXFragment(node) {
        if (mode === "element") {
          context.report({
            node,
            message: "Use '<React.Fragment>...</React.Fragment>' instead of shorthand '<>...</>'.",
            fix(fixer) {
              return [
                fixer.replaceText(node.openingFragment, "<React.Fragment>"),
                fixer.replaceText(node.closingFragment, "</React.Fragment>"),
              ];
            },
          });
        }
      },
    };
  };
}

import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxHandlerNames}. */
export type JsxHandlerNamesOptions = {
  /** Prefix for event handler functions (default: "handle"). */
  eventHandlerPrefix?: string;
  /** Prefix for event handler props (default: "on"). */
  eventHandlerPropPrefix?: string;
  /** Whether to check inline functions (default: false). */
  checkInlineFunction?: boolean;
};

/** Enforce naming convention for JSX event handlers. */
export function jsxHandlerNames(options: JsxHandlerNamesOptions = {}): RuleFunction {
  const {
    eventHandlerPrefix = "handle",
    eventHandlerPropPrefix = "on",
    checkInlineFunction = false,
  } = options;
  const EVENT_HANDLER_REGEX = new RegExp(`^${eventHandlerPropPrefix}[A-Z]`);
  const HANDLER_FUNC_REGEX = new RegExp(`^${eventHandlerPrefix}[A-Z]`);

  return (context, { ast }) => ({
    JSXAttribute(node) {
      // › Guard: must be event handler prop (onXxx)
      if (node.name.type !== "JSXIdentifier") return;
      const propName = node.name.name;
      if (!EVENT_HANDLER_REGEX.test(propName)) return;

      const value = node.value;
      if (!value) return;

      // ─── Check expression value ────────────────────
      if (value.type === "JSXExpressionContainer") {
        const expression = ast.unwrap(value.expression);

        // Case: direct reference (onClick={handleClick})
        if (expression.type === "Identifier") {
          const handlerName = expression.name;
          if (!HANDLER_FUNC_REGEX.test(handlerName)) {
            context.report({
              node: expression,
              message: `Handler function "${handlerName}" should be named "${eventHandlerPrefix}${
                propName.slice(eventHandlerPropPrefix.length)
              }..."`,
            });
          }
          return;
        }

        // Case: inline function (onClick={() => {}})
        if (expression.type === "ArrowFunctionExpression" || expression.type === "FunctionExpression") {
          if (checkInlineFunction) {
            context.report({
              node: expression,
              message:
                `Inline function handlers are not allowed for "${propName}". Extract it to a named "${eventHandlerPrefix}${
                  propName.slice(eventHandlerPropPrefix.length)
                }" function.`,
            });
          }
          return;
        }
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxMaxDepth}. */
export type JsxMaxDepthOptions = {
  /** Maximum allowed depth for JSX elements. */
  max: number;
};

/** Enforce JSX maximum depth. */
export function jsxMaxDepth(options: JsxMaxDepthOptions): RuleFunction {
  const { max } = options;
  return (context) => ({
    JSXElement(node) {
      let depth = 0;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      let parent: any = node.parent;

      // ─── Walk up the tree ──────────────────────────
      while (parent) {
        if (parent.type === "JSXElement") {
          depth++;
        }
        parent = parent.parent;
      }

      // › Check depth limit
      if (depth > max) {
        context.report({
          node,
          message: `JSX element exceeds maximum depth of ${max} (found ${depth}).`,
        });
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Prevent inline functions and `.bind()` in JSX props. */
export function jsxNoBind(): RuleFunction {
  return (context, { ast }) => ({
    JSXAttribute(node) {
      const value = node.value;

      // › Guard: must be expression container
      if (value?.type !== "JSXExpressionContainer") return;

      const expr = ast.unwrap(value.expression);

      // ─── Detect forbidden patterns ─────────────────
      switch (true) {
        case expr.type === "ArrowFunctionExpression":
        case expr.type === "FunctionExpression":
          context.report({ node, message: "JSX props should not use inline functions." });
          break;
        case expr.type === "CallExpression": {
          const callee = ast.unwrap(expr.callee);
          if (
            callee.type === "MemberExpression"
            && callee.property.type === "Identifier"
            && callee.property.name === "bind"
          ) {
            context.report({ node, message: "JSX props should not use .bind()." });
          }
          break;
        }
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxNoDuplicateProps}. */
export type JsxNoDuplicatePropsOptions = {
  /** Whether to ignore case when checking for duplicate props. */
  ignoreCase?: boolean;
};

/** Disallow duplicate properties in JSX. */
export function jsxNoDuplicateProps(options: JsxNoDuplicatePropsOptions = {}): RuleFunction {
  const { ignoreCase = false } = options;
  return (context) => ({
    JSXOpeningElement(node) {
      const seen = new Map<string, string>();

      // ─── Check each attribute ──────────────────────
      for (const attr of node.attributes) {
        if (attr.type !== "JSXAttribute") continue;
        if (attr.name.type !== "JSXIdentifier") continue;

        const name = ignoreCase ? attr.name.name.toLowerCase() : attr.name.name;

        // › Report duplicate
        if (seen.has(name)) {
          context.report({
            node: attr,
            message: `Duplicate prop "${attr.name.name}" found.`,
          });
        } else {
          seen.set(name, attr.name.name);
        }
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxNoLiterals}. */
export type JsxNoLiteralsOptions = {
  /** Enforces no string literals used as children, wrapped or unwrapped. */
  noStrings?: boolean;
  /** An array of unique string values that would otherwise warn, but will be ignored. */
  allowedStrings?: string[];
  /** When `true` the rule ignores literals used in props. */
  ignoreProps?: boolean;
};

/** Disallow usage of string literals in JSX. */
export function jsxNoLiterals(options: JsxNoLiteralsOptions = {}): RuleFunction {
  const { noStrings = false, allowedStrings = [], ignoreProps = true } = options;
  const allowedSet = new Set(allowedStrings);
  return (context) => ({
    // ─── Check literal text children ───────────────
    Literal(node) {
      if (typeof node.value !== "string") return;
      const text = node.value.trim();
      if (text === "" || allowedSet.has(text)) return;

      const parent = node.parent;
      if (!parent) return;

      // ─── Case: prop value ────────────────────────
      if (parent.type === "JSXAttribute") {
        if (!ignoreProps) {
          context.report({
            node,
            message: `String literals are not allowed in JSX props. Use {'${text}'} instead.`,
          });
        }
        return;
      }

      // ─── Case: already wrapped ───────────────────
      if (parent.type === "JSXExpressionContainer") return;

      // ─── Case: child of element/fragment ─────────
      if (parent.type === "JSXElement" || parent.type === "JSXFragment") {
        if (noStrings) {
          context.report({
            node,
            message: `String literals are not allowed as JSX children.`,
          });
        } else {
          context.report({
            node,
            message: `String literals should be wrapped in JSX expression: {'${text}'}`,
          });
        }
      }
    },

    // ─── Check JSX text nodes ──────────────────────
    JSXText(node) {
      const text = node.value.trim();
      if (text === "" || allowedSet.has(text)) return;

      if (noStrings) {
        context.report({
          node,
          message: `String literals are not allowed as JSX children.`,
        });
      } else {
        context.report({
          node,
          message: `String literals should be wrapped in JSX expression: {'${text}'}`,
        });
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxPascalCase}. */
export type JsxPascalCaseOptions = {
  /** Allow all-uppercase component names like `<XML />`. */
  allowAllCaps?: boolean;
  /** Allow leading underscores in component names like `<_Component />`. */
  allowLeadingUnderscore?: boolean;
};

/** Enforce PascalCase for user-defined JSX components. */
export function jsxPascalCase(options: JsxPascalCaseOptions = {}): RuleFunction {
  const { allowAllCaps = false, allowLeadingUnderscore = false } = options;
  const pascalCaseRegex = /^[A-Z][a-zA-Z0-9]*$/;
  return (context) => ({
    JSXOpeningElement(node) {
      const name = node.name;

      // › Guard: must be simple identifier
      if (name.type !== "JSXIdentifier") return;

      const componentName = name.name;

      // ─── Handle leading underscore ───────────────
      if (componentName.startsWith("_")) {
        if (!allowLeadingUnderscore) {
          context.report({
            node: name,
            message: `Component name "${componentName}" should not start with an underscore.`,
          });
        }
        return;
      }

      // › Guard: ignore DOM elements (lowercase)
      const firstChar = componentName[0];
      if (firstChar === undefined) return;
      if (firstChar === firstChar.toLowerCase()) return;

      // ─── Handle all-caps ─────────────────────────
      if (componentName === componentName.toUpperCase()) {
        if (!allowAllCaps) {
          context.report({
            node: name,
            message: `Component name "${componentName}" should use PascalCase, not all uppercase.`,
          });
        }
        return;
      }

      // ─── Validate PascalCase ─────────────────────
      if (!pascalCaseRegex.test(componentName)) {
        context.report({
          node: name,
          message: `Component name "${componentName}" should be in PascalCase.`,
        });
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Disallow JSX prop spreading the same identifier multiple times. */
export function jsxPropsNoSpreadMulti(): RuleFunction {
  return (context, { ast }) => ({
    JSXOpeningElement(node) {
      const seen = new Set<string>();

      // ─── Check each spread attribute ───────────────
      for (const attr of node.attributes) {
        if (attr.type !== "JSXSpreadAttribute") continue;

        // › Extract spread identifier name
        const argument = ast.unwrap(attr.argument);
        let spreadKey: string;
        if (argument.type === "Identifier") {
          spreadKey = argument.name;
        } else {
          spreadKey = context.sourceCode.getText(attr.argument);
        }

        // › Report duplicate spread
        if (seen.has(spreadKey)) {
          context.report({
            node: attr,
            message: `Spreading the same expression "${spreadKey}" multiple times is not allowed.`,
          });
        } else {
          seen.add(spreadKey);
        }
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Disallow JSX props spreading. */
export function jsxPropsNoSpreading(): RuleFunction {
  return (context) => ({
    JSXSpreadAttribute(node) {
      context.report({
        node,
        message: "Props spreading is not allowed.",
      });
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";
import type { TSESTree } from "@typescript-eslint/types";

/** Disallow adjacent inline elements not separated by whitespace. */
export function noAdjacentInlineElements(): RuleFunction {
  /** Set of inline HTML elements. */
  const INLINE_ELEMENTS = new Set([
    "a", "abbr", "acronym", "b", "bdi", "bdo", "big", "br", "cite", "code",
    "dfn", "em", "i", "img", "input", "kbd", "label", "map", "object", "q",
    "samp", "script", "select", "small", "span", "strong", "sub", "sup",
    "textarea", "time", "tt", "var",
  ]);
  return (context) => ({
    JSXElement(node) {
      const children = node.children;

      // ─── Check adjacent pairs ──────────────────────
      for (let i = 0; i < children.length - 1; i++) {
        const current = children[i];
        const next = children[i + 1];

        // › Validate first element
        if (current?.type !== "JSXElement") continue;
        if (current.openingElement.name.type !== "JSXIdentifier") continue;
        const currentName = current.openingElement.name.name;
        if (!INLINE_ELEMENTS.has(currentName)) continue;

        // › Validate second element
        if (next?.type !== "JSXElement") continue;
        if (next.openingElement.name.type !== "JSXIdentifier") continue;
        const nextName = next.openingElement.name.name;
        if (!INLINE_ELEMENTS.has(nextName)) continue;

        // › Report violation
        context.report({
          node: current,
          message: `Adjacent inline elements "${currentName}" and "${nextName}" should be separated by whitespace.`,
        });
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";

/** Enforce destructuring assignment for component props. */
export function noDirectAccessProps(): RuleFunction {
  return (context, { collect }) => {
    const { query, visitor } = collect.components(context);

    return merge(visitor, {
      "Program:exit"(program) {
        for (const { node } of query.all(program)) {
          const [props] = node.params;
          if (props == null) continue;
          if (props.type !== "Identifier") continue;
          const propName = props.name;
          const propVariable = context.sourceCode.getScope(node).variables.find((v) => v.name === propName);
          const propReferences = propVariable?.references ?? [];
          for (const ref of propReferences) {
            const { parent } = ref.identifier;
            if (parent.type !== "MemberExpression") continue;
            context.report({
              message: "Use destructuring assignment for component props.",
              node: parent,
            });
          }
        }
      },
    });
  };
}

import type { RuleFunction } from "@eslint-react/kit";

/** Forbid this.setState() calls. */
export function noSetState(): RuleFunction {
  return (context, { ast }) => ({
    CallExpression(node) {
      const callee = ast.unwrap(node.callee);

      // Check if callee is this.setState
      if (
        callee.type === "MemberExpression" &&
        callee.object.type === "ThisExpression" &&
        callee.property.type === "Identifier" &&
        callee.property.name === "setState"
      ) {
        context.report({
          node,
          message: "this.setState() is not allowed.",
        });
      }
    },
  });
}

import type { RuleFunction } from "@eslint-react/kit";

/** Disallow deprecated string refs. */
export function noStringRefs(): RuleFunction {
  return (context) => ({
    JSXAttribute(node) {
      // Check if this is a ref attribute
      if (node.name.type !== "JSXIdentifier" || node.name.name !== "ref") {
        return;
      }

      // Check if the value is a string literal (string ref)
      const value = node.value;
      if (value?.type === "Literal" && typeof value.value === "string") {
        context.report({
          node,
          message: `String refs are deprecated and should not be used. Use callback refs or React.createRef() instead.`,
        });
      }
    },
  });
}