@eslint-react/kit 4.0.0-beta.3 → 4.0.1-beta.1

package/README.md

@@ -7,7 +7,9 @@ ESLint React's toolkit for building custom React lint rules right inside your `e
 - [Installation](#installation)
 - [Quick Start](#quick-start)
 - [API Reference](#api-reference)
-  - [`defineConfig` (default export)](#defineconfig-default-export)
+  - [`eslintReactKit` (default export)](#eslintreactkit-default-export)
+  - [`RuleDefinition`](#ruledefinition)
+  - [`Builder`](#builder)
   - [`merge`](#merge)
   - [`Kit` — the toolkit object](#kit--the-toolkit-object)
     - [`kit.collect`](#kitcollect) — Semantic collectors
@@ -33,10 +35,32 @@ npm install --save-dev @eslint-react/kit@beta
 ```ts
 import eslintReact from "@eslint-react/eslint-plugin";
 import eslintReactKit, { merge } from "@eslint-react/kit";
+import type { RuleDefinition } from "@eslint-react/kit";
 import eslintJs from "@eslint/js";
 import { defineConfig } from "eslint/config";
 import tseslint from "typescript-eslint";
 
+/** Enforce function declarations for function components. */
+function functionComponentDefinition(): RuleDefinition {
+  return (context, { collect }) => {
+    const { query, visitor } = collect.components(context);
+    return merge(
+      visitor,
+      {
+        "Program:exit"(program) {
+          for (const { node } of query.all(program)) {
+            if (node.type === "FunctionDeclaration") continue;
+            context.report({
+              node,
+              message: "Function components must be defined with function declarations.",
+            });
+          }
+        },
+      },
+    );
+  };
+}
+
 export default defineConfig(
   {
     files: ["**/*.{ts,tsx}"],
@@ -44,55 +68,75 @@ export default defineConfig(
       eslintJs.configs.recommended,
       tseslint.configs.recommended,
       eslintReact.configs["recommended-typescript"],
-      eslintReactKit(
-        {
-          name: "function-component-definition",
-          make: (context, { collect }) => {
-            const { query, visitor } = collect.components(context);
-
-            return merge(
-              visitor,
-              {
-                "Program:exit"(program) {
-                  for (const { node } of query.all(program)) {
-                    if (node.type === "FunctionDeclaration") continue;
-                    context.report({
-                      node,
-                      message: "Function components must be defined with function declarations.",
-                    });
-                  }
-                },
-              },
-            );
-          },
-        },
-      ),
+      eslintReactKit()
+        .use(functionComponentDefinition)
+        .getConfig(),
     ],
-    rules: {
-      "@eslint-react/kit/function-component-definition": "error",
-    },
   },
 );
 ```
 
+The rule name is derived automatically from the function name (`functionComponentDefinition` → `function-component-definition`), and registered as `@eslint-react/kit/function-component-definition` at `"error"` severity.
+
 ## API Reference
 
-### `defineConfig` (default export)
+### `eslintReactKit` (default export)
+
+```ts
+import eslintReactKit from "@eslint-react/kit";
+
+eslintReactKit(): Builder
+```
+
+Creates a `Builder` instance for registering custom rules via the chainable `.use()` API.
+
+### `RuleDefinition`
+
+```ts
+import type { RuleDefinition } from "@eslint-react/kit";
+
+type RuleDefinition = (ctx: RuleContext, kit: RuleToolkit) => RuleListener;
+```
+
+A rule definition is a function that receives the ESLint rule context and the structured `Kit` toolkit, and returns a `RuleListener` (AST visitor object).
+
+Rules are defined as **named functions** that return a `RuleDefinition`. The function name is automatically converted to kebab-case and used as the rule name under the `@eslint-react/kit` plugin namespace.
 
 ```ts
-import defineReactConfig from "@eslint-react/kit";
+// Function name `noForwardRef` → rule name `no-forward-ref`
+// Registered as `@eslint-react/kit/no-forward-ref`
+function noForwardRef(): RuleDefinition {
+  return (context, { is }) => ({ ... });
+}
+
+// Functions that accept options work the same way
+function forbidElements({ forbidden }: ForbidElementsOptions): RuleDefinition {
+  return (context) => ({ ... });
+}
+```
+
+### `Builder`
 
-defineReactConfig(...rules: RuleDefinition[]): Linter.Config
+```ts
+interface Builder {
+  use<F extends (...args: any[]) => RuleDefinition>(factory: F, ...args: Parameters<F>): Builder;
+  getConfig(): Linter.Config;
+}
 ```
 
-Creates an ESLint flat-config object from one or more custom rule definitions. Rules are registered under the `@eslint-react/kit` plugin namespace and enabled at `"error"` severity by default.
+A chainable builder for registering custom rules.
 
-**`RuleDefinition`:**
+| Method      | Description                                                                                                                |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `use`       | Registers a rule factory. The rule name is `kebabCase(factory.name)`. Options type is inferred from the factory signature. |
+| `getConfig` | Returns a `Linter.Config` with all registered rules enabled at `"error"` severity.                                         |
 
-| Field  | Type                             | Description                                                                      |
-| ------ | -------------------------------- | -------------------------------------------------------------------------------- |
-| `name` | `string`                         | Unique rule name. Used as `@eslint-react/kit/<name>` in config.                  |
-| `make` | `(context, kit) => RuleListener` | Rule factory. Receives the ESLint rule context and the structured `Kit` toolkit. |
+```ts
+eslintReactKit()
+  .use(noForwardRef) // no-arg factory
+  .use(forbidElements, { forbidden: new Map() }) // factory with inferred options
+  .getConfig();
+```
 
 ### `merge`
 
@@ -108,7 +152,7 @@ This is essential for combining a collector's `visitor` with your own inspection
 
 ### Kit — the toolkit object
 
-The second argument to `make` is a structured `Kit` object:
+The second argument passed to the `RuleDefinition` function is a structured `Kit` object:
 
 ```
 kit
@@ -273,9 +317,10 @@ Exposes the normalized `react-x` settings from the ESLint shared configuration (
 **Usage:**
 
 ```ts
-defineReactConfig({
-  name: "require-react-19",
-  make: (context, { settings }) => ({
+import type { RuleDefinition } from "@eslint-react/kit";
+
+function requireReact19(): RuleDefinition {
+  return (context, { settings }) => ({
     Program(program) {
       if (!settings.version.startsWith("19.")) {
         context.report({
@@ -284,8 +329,8 @@ defineReactConfig({
         });
       }
     },
-  }),
-});
+  });
+}
 ```
 
 ---
@@ -297,16 +342,22 @@ defineReactConfig({
 This is a simplified kit reimplementation of the built-in [`react-x/no-forwardRef`](https://beta.eslint-react.xyz/docs/rules/no-forward-ref) rule.
 
 ```ts
-defineReactConfig({
-  name: "no-forward-ref",
-  make: (context, { is }) => ({
+import type { RuleDefinition } from "@eslint-react/kit";
+
+function noForwardRef(): RuleDefinition {
+  return (context, { is }) => ({
     CallExpression(node) {
       if (is.forwardRefCall(node)) {
         context.report({ node, message: "forwardRef is deprecated in React 19. Pass ref as a prop instead." });
       }
     },
-  }),
-});
+  });
+}
+
+// Usage
+eslintReactKit()
+  .use(noForwardRef)
+  .getConfig();
 ```
 
 ### Component: Destructure component props
@@ -314,9 +365,11 @@ defineReactConfig({
 This is a simplified kit reimplementation of the built-in [`react-x/prefer-destructuring-assignment`](https://beta.eslint-react.xyz/docs/rules/prefer-destructuring-assignment) rule.
 
 ```ts
-defineReactConfig({
-  name: "destructure-component-props",
-  make: (context, { collect }) => {
+import type { RuleDefinition } from "@eslint-react/kit";
+import { merge } from "@eslint-react/kit";
+
+function destructureComponentProps(): RuleDefinition {
+  return (context, { collect }) => {
     const { query, visitor } = collect.components(context);
 
     return merge(visitor, {
@@ -324,13 +377,13 @@ defineReactConfig({
         for (const { node } of query.all(program)) {
           const [props] = node.params;
           if (props == null) continue;
-          if (props.type !== AST.Identifier) 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 !== AST.MemberExpression) continue;
+            if (parent.type !== "MemberExpression") continue;
             context.report({
               message: "Use destructuring assignment for component props.",
               node: parent,
@@ -339,8 +392,13 @@ defineReactConfig({
         }
       },
     });
-  },
-});
+  };
+}
+
+// Usage
+eslintReactKit()
+  .use(destructureComponentProps)
+  .getConfig();
 ```
 
 ### Hooks: Warn on custom hooks that don't call other hooks
@@ -348,9 +406,11 @@ defineReactConfig({
 This is a simplified kit reimplementation of the built-in [`react-x/no-unnecessary-use-prefix`](https://beta.eslint-react.xyz/docs/rules/no-unnecessary-use-prefix) rule.
 
 ```ts
-defineReactConfig({
-  name: "no-unnecessary-use-prefix",
-  make: (context, { collect }) => {
+import type { RuleDefinition } from "@eslint-react/kit";
+import { merge } from "@eslint-react/kit";
+
+function noUnnecessaryUsePrefix(): RuleDefinition {
+  return (context, { collect }) => {
     const { query, visitor } = collect.hooks(context);
 
     return merge(visitor, {
@@ -365,8 +425,13 @@ defineReactConfig({
         }
       },
     });
-  },
-});
+  };
+}
+
+// Usage
+eslintReactKit()
+  .use(noUnnecessaryUsePrefix)
+  .getConfig();
 ```
 
 ### Multiple Collectors: No component/hook factories
@@ -375,9 +440,23 @@ Disallow defining components or hooks inside other functions (factory pattern).
 This is a simplified kit reimplementation of the built-in [`react-x/component-hook-factories`](https://beta.eslint-react.xyz/docs/rules/component-hook-factories) rule.
 
 ```ts
-defineReactConfig({
-  name: "component-hook-factories",
-  make: (context, { collect }) => {
+import type { RuleDefinition } from "@eslint-react/kit";
+import { merge } from "@eslint-react/kit";
+import type { TSESTree } from "@typescript-eslint/utils";
+
+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";
+}
+
+function componentHookFactories(): RuleDefinition {
+  return (context, { collect }) => {
     const fc = collect.components(context);
     const hk = collect.hooks(context);
     return merge(
@@ -398,19 +477,13 @@ defineReactConfig({
         },
       },
     );
-  },
-});
-
-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";
-}
+// Usage
+eslintReactKit()
+  .use(componentHookFactories)
+  .getConfig();
 ```
 
 ## More Examples

package/dist/index.d.ts

@@ -17,17 +17,13 @@ interface CollectorWithContext<T> extends Collector<T> {
     all(program: TSESTree.Program): T[];
   };
 }
-interface RuleDefinition {
-  name: string;
-  make(ctx: RuleContext, kit: RuleToolkit): RuleListener;
-}
 interface RuleToolkit {
   collect: {
-    components(ctx: RuleContext, options?: {
+    components(context: RuleContext, options?: {
       collectDisplayName?: boolean;
       hint?: bigint;
     }): CollectorWithContext<core.FunctionComponentSemanticNode>;
-    hooks(ctx: RuleContext): CollectorWithContext<core.HookSemanticNode>;
+    hooks(context: RuleContext): CollectorWithContext<core.HookSemanticNode>;
   };
   flag: {
     component: typeof core.ComponentFlag;
@@ -103,7 +99,14 @@ interface RuleToolkit {
   };
   settings: ESLintReactSettingsNormalized;
 }
-declare function defineConfig(...rules: RuleDefinition[]): Linter.Config;
+type RuleDefinition = (context: RuleContext, toolkit: RuleToolkit) => RuleListener;
+interface Builder {
+  getConfig(args?: {
+    files?: string[];
+  }): Linter.Config;
+  use<F extends (...args: any[]) => RuleDefinition>(factory: F, ...args: Parameters<F>): Builder;
+}
+declare function eslintReactKit(): Builder;
 declare module "@typescript-eslint/utils/ts-eslint" {
   interface RuleContext<MessageIds extends string = string, Options extends readonly unknown[] = readonly unknown[]> {
     report(descriptor: {
@@ -121,4 +124,4 @@ declare module "@typescript-eslint/utils/ts-eslint" {
   }
 }
 //#endregion
-export { Collector, CollectorWithContext, RuleDefinition, type RuleFix, type RuleFixer, type RuleListener, defineConfig as default, defineConfig, merge };
+export { Builder, Collector, CollectorWithContext, RuleDefinition, type RuleFix, type RuleFixer, type RuleListener, eslintReactKit as default, merge };

package/dist/index.js

@@ -1,17 +1,18 @@
 import * as core from "@eslint-react/core";
-import { defineRuleListener as merge, getSettingsFromContext } from "@eslint-react/shared";
+import { IdGenerator, defineRuleListener as merge, getSettingsFromContext } from "@eslint-react/shared";
+import { kebabCase } from "string-ts";
 
 //#region package.json
 var name = "@eslint-react/kit";
-var version = "4.0.0-beta.3";
+var version = "4.0.1-beta.1";
 
 //#endregion
 //#region src/index.ts
-function createKit(ctx) {
+function makeRuleToolkit(context) {
 	return {
 		collect: {
-			components(ctx, options) {
-				const { api, visitor } = core.getComponentCollector(ctx, options);
+			components(context, options) {
+				const { api, visitor } = core.getComponentCollector(context, options);
 				return {
 					query: { all(program) {
 						return api.getAllComponents(program);
@@ -19,8 +20,8 @@ function createKit(ctx) {
 					visitor
 				};
 			},
-			hooks(ctx) {
-				const { api, visitor } = core.getHookCollector(ctx);
+			hooks(context) {
+				const { api, visitor } = core.getHookCollector(context);
 				return {
 					query: { all(program) {
 						return api.getAllHooks(program);
@@ -35,45 +36,45 @@ function createKit(ctx) {
 			Default: core.DEFAULT_COMPONENT_DETECTION_HINT
 		} },
 		is: {
-			captureOwnerStack: core.isCaptureOwnerStack(ctx),
-			captureOwnerStackCall: core.isCaptureOwnerStackCall(ctx),
-			childrenCount: core.isChildrenCount(ctx),
-			childrenCountCall: core.isChildrenCountCall(ctx),
-			childrenForEach: core.isChildrenForEach(ctx),
-			childrenForEachCall: core.isChildrenForEachCall(ctx),
-			childrenMap: core.isChildrenMap(ctx),
-			childrenMapCall: core.isChildrenMapCall(ctx),
-			childrenOnly: core.isChildrenOnly(ctx),
-			childrenOnlyCall: core.isChildrenOnlyCall(ctx),
-			childrenToArray: core.isChildrenToArray(ctx),
-			childrenToArrayCall: core.isChildrenToArrayCall(ctx),
-			cloneElement: core.isCloneElement(ctx),
-			cloneElementCall: core.isCloneElementCall(ctx),
-			componentDefinition: (node, hint) => core.isComponentDefinition(ctx, node, hint),
+			captureOwnerStack: core.isCaptureOwnerStack(context),
+			captureOwnerStackCall: core.isCaptureOwnerStackCall(context),
+			childrenCount: core.isChildrenCount(context),
+			childrenCountCall: core.isChildrenCountCall(context),
+			childrenForEach: core.isChildrenForEach(context),
+			childrenForEachCall: core.isChildrenForEachCall(context),
+			childrenMap: core.isChildrenMap(context),
+			childrenMapCall: core.isChildrenMapCall(context),
+			childrenOnly: core.isChildrenOnly(context),
+			childrenOnlyCall: core.isChildrenOnlyCall(context),
+			childrenToArray: core.isChildrenToArray(context),
+			childrenToArrayCall: core.isChildrenToArrayCall(context),
+			cloneElement: core.isCloneElement(context),
+			cloneElementCall: core.isCloneElementCall(context),
+			componentDefinition: (node, hint) => core.isComponentDefinition(context, node, hint),
 			componentName: core.isComponentName,
 			componentNameLoose: core.isComponentNameLoose,
-			componentWrapperCall: (node) => core.isComponentWrapperCall(ctx, node),
-			componentWrapperCallback: (node) => core.isComponentWrapperCallback(ctx, node),
-			componentWrapperCallLoose: (node) => core.isComponentWrapperCallLoose(ctx, node),
-			createContext: core.isCreateContext(ctx),
-			createContextCall: core.isCreateContextCall(ctx),
-			createElement: core.isCreateElement(ctx),
-			createElementCall: core.isCreateElementCall(ctx),
-			createRef: core.isCreateRef(ctx),
-			createRefCall: core.isCreateRefCall(ctx),
-			forwardRef: core.isForwardRef(ctx),
-			forwardRefCall: core.isForwardRefCall(ctx),
+			componentWrapperCall: (node) => core.isComponentWrapperCall(context, node),
+			componentWrapperCallback: (node) => core.isComponentWrapperCallback(context, node),
+			componentWrapperCallLoose: (node) => core.isComponentWrapperCallLoose(context, node),
+			createContext: core.isCreateContext(context),
+			createContextCall: core.isCreateContextCall(context),
+			createElement: core.isCreateElement(context),
+			createElementCall: core.isCreateElementCall(context),
+			createRef: core.isCreateRef(context),
+			createRefCall: core.isCreateRefCall(context),
+			forwardRef: core.isForwardRef(context),
+			forwardRefCall: core.isForwardRefCall(context),
 			hook: core.isHook,
 			hookCall: core.isHookCall,
 			hookName: core.isHookName,
 			initializedFromReact: core.isInitializedFromReact,
 			initializedFromReactNative: core.isInitializedFromReactNative,
-			lazy: core.isLazy(ctx),
-			lazyCall: core.isLazyCall(ctx),
-			memo: core.isMemo(ctx),
-			memoCall: core.isMemoCall(ctx),
-			reactAPI: (api) => core.isReactAPI(api)(ctx),
-			reactAPICall: (api) => core.isReactAPICall(api)(ctx),
+			lazy: core.isLazy(context),
+			lazyCall: core.isLazyCall(context),
+			memo: core.isMemo(context),
+			memoCall: core.isMemoCall(context),
+			reactAPI: (api) => core.isReactAPI(api)(context),
+			reactAPICall: (api) => core.isReactAPICall(api)(context),
 			useActionStateCall: core.isUseActionStateCall,
 			useCall: core.isUseCall,
 			useCallbackCall: core.isUseCallbackCall,
@@ -98,36 +99,43 @@ function createKit(ctx) {
 			useSyncExternalStoreCall: core.isUseSyncExternalStoreCall,
 			useTransitionCall: core.isUseTransitionCall
 		},
-		settings: getSettingsFromContext(ctx)
+		settings: getSettingsFromContext(context)
 	};
 }
-function defineConfig(...rules) {
-	return {
-		files: ["**/*.ts", "**/*.tsx"],
-		plugins: { [name]: {
-			meta: {
-				name,
-				version
-			},
-			rules: rules.reduce((acc, { name, make }) => {
-				Reflect.set(acc, name, {
-					meta: {
-						fixable: "code",
-						hasSuggestions: true
-					},
-					create(ctx) {
-						return make(ctx, createKit(ctx));
-					}
-				});
-				return acc;
-			}, {})
-		} },
-		rules: rules.reduce((acc, { name: name$1 }) => {
-			acc[`${name}/${name$1}`] = "error";
-			return acc;
-		}, {})
+function eslintReactKit() {
+	const idGen = new IdGenerator();
+	const plugin = {
+		meta: {
+			name,
+			version
+		},
+		rules: {}
+	};
+	const builder = {
+		getConfig({ files = ["**/*.ts", "**/*.tsx"] } = {}) {
+			return {
+				files,
+				plugins: { [name]: plugin },
+				rules: Object.keys(plugin.rules).reduce((acc, name$1) => {
+					acc[`${name}/${name$1}`] = "error";
+					return acc;
+				}, {})
+			};
+		},
+		use(make, ...args) {
+			const name = kebabCase(make.name === "" ? idGen.next() : make.name);
+			Reflect.set(plugin.rules, name, {
+				meta: {
+					fixable: "code",
+					hasSuggestions: true
+				},
+				create: (context) => make(...args)(context, makeRuleToolkit(context))
+			});
+			return builder;
+		}
 	};
+	return builder;
 }
 
 //#endregion
-export { defineConfig as default, defineConfig, merge };
+export { eslintReactKit as default, merge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/kit",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.1-beta.1",
   "description": "ESLint React's utility module for building custom rules.",
   "keywords": [
     "react",
@@ -37,9 +37,10 @@
   ],
   "dependencies": {
     "@typescript-eslint/utils": "^8.57.2",
-    "@eslint-react/core": "4.0.0-beta.3",
-    "@eslint-react/shared": "4.0.0-beta.3",
-    "@eslint-react/ast": "4.0.0-beta.3"
+    "string-ts": "^2.3.1",
+    "@eslint-react/ast": "4.0.1-beta.1",
+    "@eslint-react/core": "4.0.1-beta.1",
+    "@eslint-react/shared": "4.0.1-beta.1"
   },
   "devDependencies": {
     "eslint": "^10.1.0",