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 "@local/samples";

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;
};

const DEFAULT_RULE = "^(is|has|should)[A-Z]([A-Za-z0-9]?)+";

/**
 * Flattens a union type into its constituent types
 * @param t The type to flatten
 * @returns The flattened types
 */
function flattenTypes(t: ts.Type): ts.Type[] {
  return t.isUnion() ? t.types.flatMap(flattenTypes) : [t];
}

/**
 * Checks whether the given type is boolean or a union containing boolean
 * @param t The type to check
 * @returns True if the type is boolean-like, false otherwise
 */
function isBooleanLikeType(t: ts.Type) {
  return flattenTypes(t).some((t) => (t.getFlags() & ts.TypeFlags.BooleanLike) > 0);
}

/** Enforce boolean prop naming convention. */
export function booleanPropNaming(options?: BooleanPropNamingOptions): RuleFunction {
  const { rule = DEFAULT_RULE } = options ?? {};
  const regex = new RegExp(rule);

  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);

        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();

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

            // Guard: must be a boolean-like type
            if (!isBooleanLikeType(propType)) continue;

            // Guard: must not already match the naming pattern
            if (regex.test(prop.name)) continue;

            // Guard: must have a declaration to report on
            const decls = prop.getDeclarations();
            if (decls == null || decls.length === 0) continue;

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

            // Report on the prop key when available
            const declNode = srv.tsNodeToESTreeNodeMap.get(decl);
            const node = "key" in declNode ? declNode.key : declNode;
            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) => {
    // Fast path: skip if `checked` is not present in the file
    if (!context.sourceCode.text.includes("checked")) return {};

    return {
      JSXOpeningElement(node) {
        // Guard: only check <input> elements
        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;

        // Guard: satisfied by onChange or readOnly
        if (attrs.has("onChange") || attrs.has("readOnly")) return;

        context.report({
          message: "`checked` requires `onChange` or `readOnly`.",
          node,
        });
      },
    };
  };
}

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;

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

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

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

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;

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

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

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

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({ message: forbidden.get(name)!, node });
    },
  });
}

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

type RuleContext = Parameters<RuleFunction>[0];

/** 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) {
          for (const { node } of query.all(program)) {
            // Guard: must not already be an arrow function
            if (node.type === "ArrowFunctionExpression") continue;

            context.report({
              message: "Function components must be defined with arrow functions.",
              node,
              suggest: [
                {
                  desc: "Convert to arrow function.",
                  fix: buildFix(context, node),
                },
              ],
            });
          }
        },
      },
    );
  };
}

/**
 * Builds a fix that converts a function component into an arrow function
 * @param context The rule context
 * @param node The component function node
 * @returns A fixer function that applies the conversion, or yields null when the node cannot be converted
 */
function buildFix(context: RuleContext, node: TSESTree.FunctionDeclaration | TSESTree.FunctionExpression) {
  return (fixer: RuleFixer): RuleFix | null => {
    const src = context.sourceCode;
    // Guard: generator functions can't be converted to arrow functions
    if (node.generator) return null;

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

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

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

    // `{ Foo: function() {} }` -> `{ Foo: () => {} }`
    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({
        fix: (fixer) => fixer.removeRange([node.name.range[1], value.range[1]]),
        message: "Omit the value for boolean attributes.",
        node,
      });
    },
  });
}

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) => {
    // Fast path: skip if the fragment form this mode targets is not present in the file
    const fragmentHint = mode === "syntax" ? "Fragment" : "<>";
    if (!context.sourceCode.text.includes(fragmentHint)) return {};

    /** Report a standard-form fragment (`<Fragment>` / `<React.Fragment>`) that should use shorthand syntax. */
    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({
        fix(fixer) {
          const closing = node.parent.closingElement;
          if (closing == null) return null;
          return [fixer.replaceText(node, "<>"), fixer.replaceText(closing, "</>")];
        },
        message: `Use shorthand fragment syntax '<>...</>' instead of '<${pattern}>...</${pattern}'.`,
        node,
      });
    }

    return {
      JSXFragment(node) {
        if (mode !== "element") return;

        context.report({
          fix(fixer) {
            return [
              fixer.replaceText(node.openingFragment, "<React.Fragment>"),
              fixer.replaceText(node.closingFragment, "</React.Fragment>"),
            ];
          },
          message: "Use '<React.Fragment>...</React.Fragment>' instead of shorthand '<>...</>'.",
          node,
        });
      },
      JSXOpeningElement(node) {
        const name = node.name;

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

        // Guard: only `<React.Fragment>` member expressions are relevant below
        if (name.type !== "JSXMemberExpression") return;
        if (name.object.type !== "JSXIdentifier" || name.object.name !== "React") return;
        if (name.property.name !== "Fragment") return;

        if (mode === "syntax") {
          reportSyntaxPreferred(node, "React.Fragment");
        }
      },
    };
  };
}

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

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

/** Enforce naming convention for JSX event handlers. */
export function jsxHandlerNames(options: JsxHandlerNamesOptions = {}): RuleFunction {
  const {
    checkInlineFunction = false,
    eventHandlerPrefix = "handle",
    eventHandlerPropPrefix = "on",
  } = 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;

      // Guard: must have an expression container value
      const value = node.value;
      if (value?.type !== "JSXExpressionContainer") return;

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

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

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

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

/** 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) {
      const depth = getJsxDepth(node);

      // Guard: only report elements nested deeper than the limit
      if (depth <= max) return;

      context.report({
        message: `JSX element exceeds maximum depth of ${max} (found ${depth}).`,
        node,
      });
    },
  });
}

function getJsxDepth({ parent }: TSESTree.Node) {
  let depth = 0;

  while (parent != null && parent.type !== "Program") {
    if (parent.type === "JSXElement") {
      depth++;
    }
    parent = parent.parent;
  }

  return depth;
}

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

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

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

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

      // Report: inline function
      if (expr.type === "ArrowFunctionExpression" || expr.type === "FunctionExpression") {
        context.report({ message: "JSX props should not use inline functions.", node });
        return;
      }

      // Report: .bind() call
      if (is.APICall("bind")(expr)) {
        context.report({ message: "JSX props should not use .bind().", node });
      }
    },
  });
}

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) {
      // Track prop names already seen on this element
      const seen = new Set<string>();

      for (const attr of node.attributes) {
        // Guard: only plain attributes with simple names can be duplicates
        if (attr.type !== "JSXAttribute") continue;
        if (attr.name.type !== "JSXIdentifier") continue;

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

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

        seen.add(name);
      }
    },
  });
}

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

/** Options for {@link jsxNoLiterals}. */
export type JsxNoLiteralsOptions = {
  /** 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;
  /** Enforces no string literals used as children, wrapped or unwrapped. */
  noStrings?: boolean;
};

/** Disallow usage of string literals in JSX. */
export function jsxNoLiterals(options: JsxNoLiteralsOptions = {}): RuleFunction {
  const { allowedStrings = [], ignoreProps = true, noStrings = false } = options;
  const allowedSet = new Set(allowedStrings);

  return (context) => {
    /** Report a string literal or JSX text used as a child, honoring the `noStrings` option. */
    const reportLiteralInChildren = (node: TSESTree.Literal | TSESTree.JSXText, text: string) => {
      if (noStrings) {
        context.report({
          message: `String literals are not allowed as JSX children.`,
          node,
        });
        return;
      }
      context.report({
        message: `String literals should be wrapped in JSX expression: {'${text}'}`,
        node,
      });
    };

    return {
      Literal(node) {
        // Guard: only string literals are relevant
        if (typeof node.value !== "string") return;
        const text = node.value.trim();
        // Guard: skip empty and allowed strings
        if (text === "" || allowedSet.has(text)) return;

        const parent = node.parent;

        // Case: string literal used as a prop value
        if (parent.type === "JSXAttribute") {
          // Guard: literals in props are ignored unless ignoreProps is disabled
          if (ignoreProps) return;
          context.report({
            message: [
              "String literals are not allowed in JSX props.",
              `Use {'${text}'} instead.`,
            ].join(" "),
            node,
          });
          return;
        }

        // Guard: already wrapped in an expression container
        if (parent.type === "JSXExpressionContainer") return;

        // Case: string literal used as a child of a JSX element or fragment
        if (parent.type === "JSXElement" || parent.type === "JSXFragment") {
          reportLiteralInChildren(node, text);
        }
      },

      JSXText(node) {
        const text = node.value.trim();
        // Guard: skip empty and allowed strings
        if (text === "" || allowedSet.has(text)) return;

        reportLiteralInChildren(node, 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;
};

/** Matches a PascalCase identifier like `MyComponent`. */
const PASCAL_CASE_PATTERN = /^[A-Z][a-zA-Z0-9]*$/;

/** Enforce PascalCase for user-defined JSX components. */
export function jsxPascalCase(options: JsxPascalCaseOptions = {}): RuleFunction {
  const { allowAllCaps = false, allowLeadingUnderscore = false } = options;
  return (context) => ({
    JSXOpeningElement(node) {
      const name = node.name;

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

      const componentName = name.name;

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

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

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

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

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>();

      for (const attr of node.attributes) {
        // Guard: only spread attributes are relevant
        if (attr.type !== "JSXSpreadAttribute") continue;

        // Use the identifier name for plain spreads, otherwise the source text as the key
        const argument = ast.unwrap(attr.argument);
        const spreadKey = argument.type === "Identifier" ? argument.name : context.sourceCode.getText(attr.argument);

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

        seen.add(spreadKey);
      }
    },
  });
}

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

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

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

/** Tag names 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",
]);

/** Disallow adjacent inline elements not separated by whitespace. */
export function noAdjacentInlineElements(): RuleFunction {
  return (context) => ({
    JSXElement(node) {
      const children = node.children;

      // Check each pair of adjacent children
      for (let i = 0; i < children.length - 1; i++) {
        const currentName = getInlineElementName(children[i]);
        const nextName = getInlineElementName(children[i + 1]);

        // Guard: both neighbors must be inline elements
        if (currentName == null || nextName == null) continue;

        context.report({
          message: `Adjacent inline elements "${currentName}" and "${nextName}" should be separated by whitespace.`,
          node: children[i]!,
        });
      }
    },
  });
}

/**
 * Get the tag name of a JSX child when it is an inline element with a simple identifier name
 * @param child The JSX child to inspect
 * @returns The lowercase tag name, or null when the child is not an inline element
 */
function getInlineElementName(child: TSESTree.JSXElement["children"][number] | undefined) {
  if (child?.type !== "JSXElement") return null;

  const name = child.openingElement.name;
  if (name.type !== "JSXIdentifier") return null;

  return INLINE_ELEMENTS.has(name.name) ? name.name : null;
}

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;
          // Guard: only check components with a plain identifier props parameter (e.g. `props`, not destructuring)
          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 ?? [];

          // Report every member access on the props object (e.g. `props.foo`)
          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,
            });
          }
        }
      },
    });
  };
}