component-hook-factories

import type { RuleDefinition } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";
import type { TSESTree } from "@typescript-eslint/utils";

/** Disallow defining components or hooks inside other functions (factory pattern). */
export function componentHookFactories(): RuleDefinition {
  function findParent(
    { parent }: TSESTree.Node,
    test: (n: TSESTree.Node) => boolean,
  ): TSESTree.Node | null {
    if (parent == null) return null;
    if (test(parent)) return parent;
    if (parent.type === "Program") return null;
    return findParent(parent, test);
  }

  function isFunction({ type }: TSESTree.Node) {
    return type === "FunctionDeclaration" || type === "FunctionExpression" || type === "ArrowFunctionExpression";
  }

  return (context, { collect }) => {
    const fc = collect.components(context);
    const hk = collect.hooks(context);
    return merge(
      fc.visitor,
      hk.visitor,
      {
        "Program:exit"(program) {
          const comps = fc.query.all(program);
          const hooks = hk.query.all(program);
          for (const { name, node, kind } of [...comps, ...hooks]) {
            if (name == null) continue;
            if (findParent(node, isFunction) == null) continue;
            context.report({
              node,
              message: `Don't define ${kind} "${name}" inside a function. Move it to the module level.`,
            });
          }
        },
      },
    );
  };
}

import eslintReactKit from "@eslint-react/kit";
import { componentHookFactories } from "./eslint.config.rules";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(componentHookFactories)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];

// ❌ Factory function creating components
function createComponent(defaultValue) {
  return function Component() {
    // ...
  };
}

// ❌ Component defined inside another component
function Parent() {
  function Child() {
    return <div />;
  }

  return <Child />;
}

// ❌ Hook factory function
function createCustomHook(endpoint) {
  return function useData() {
    // ...
  };
}

// ❌ Hook defined inside a component
function MyComponent() {
  function useLocalState() {
    return useState(0);
  }
  // ...
}

// ✅ Component defined at module level
function Component({ defaultValue }) {
  // ...
}

// ✅ Custom hook at module level
function useData(endpoint) {
  // ...
}

// ✅ Pass props instead of using a factory
function Button({ color, children }) {
  return (
    <button style={{ backgroundColor: color }}>
      {children}
    </button>
  );
}

function App() {
  return (
    <>
      <Button color="red">Red</Button>
      <Button color="blue">Blue</Button>
    </>
  );
}