feat(eslint-rules): add consistent-base-hook rule for v9 base hooks

packages/eslint-plugin/src/internal.js

@@ -35,6 +35,7 @@ const __internal = {
           /** @type {import('eslint').Linter.RulesRecord} */
           rules: {
             '@nx/workspace-consistent-callback-type': 'error',
+            '@nx/workspace-consistent-base-hook': 'error',
             '@nx/workspace-no-restricted-globals': restrictedGlobals.react,
             '@nx/workspace-no-missing-jsx-pragma': ['error', { runtime: 'automatic' }],
           },

packages/react-components/react-tags/library/src/components/TagGroup/useTagGroup.ts

@@ -27,6 +27,7 @@ type UseTagGroupBaseOptions = {
  * @param props - props from this instance of TagGroup (without appearance, size)
  * @param ref - reference to root HTMLDivElement of TagGroup
  */
+// eslint-disable-next-line @nx/workspace-consistent-base-hook -- accepts an extra `options` arg used internally by `useTagGroup_unstable` to coordinate focus after a tag is dismissed
 export const useTagGroupBase_unstable = (
   props: TagGroupBaseProps,
   ref: React.Ref<HTMLDivElement>,

tools/eslint-rules/index.ts

@@ -4,6 +4,7 @@ import {
   RULE_NAME as consistentCallbackTypeName,
   rule as consistentCallbackType,
 } from './rules/consistent-callback-type';
+import { RULE_NAME as consistentBaseHookName, rule as consistentBaseHook } from './rules/consistent-base-hook';
 
 /**
  * Import your custom workspace rules at the top of this file.
@@ -32,6 +33,7 @@ module.exports = {
    */
   rules: {
     [consistentCallbackTypeName]: consistentCallbackType,
+    [consistentBaseHookName]: consistentBaseHook,
     [noRestrictedGlobalsName]: noRestrictedGlobals,
     [noMissingJsxPragmaName]: noMissingJsxPragma,
   },

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/src/components/Sibling/useSiblingBase.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+// Sibling base hook used to verify cross-file pair detection in the rule's spec.
+// The wrapping state hook lives in `useSibling.ts` next to this file.
+export const useSiblingBase_unstable = (props: { a: number }, ref: React.Ref<HTMLElement>) => {
+  return { props, ref };
+};

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/src/dummy.ts

@@ -0,0 +1,4 @@
+// Placeholder so the tsconfig has an actual file to anchor the project.
+// RuleTester test cases reference filenames inside this directory but their
+// content comes from the inline `code` field.
+export const dummy = 1;

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/src/test.ts

@@ -0,0 +1,4 @@
+// Placeholder anchor for typed RuleTester cases. The actual code being linted
+// comes from each test's inline `code` field; this file just needs to exist so
+// that the fixture tsconfig's Program contains the filename used by tests.
+export {};

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/stubs/cyclic-pkg/a.ts

@@ -0,0 +1,5 @@
+import { useB } from './b';
+
+export function useA(): number {
+  return useB() + 1;
+}

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/stubs/cyclic-pkg/b.ts

@@ -0,0 +1,6 @@
+import { useA } from './a';
+
+export function useB(): number {
+  // Pretend lazy ref to break true cycle at runtime; the static graph is cyclic.
+  return (useA as unknown as () => number).length;
+}

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/stubs/cyclic-pkg/index.ts

@@ -0,0 +1,3 @@
+// Cyclic re-export — exercises the cycle-safety of the transitive walk.
+export { useA } from './a';
+export { useB } from './b';

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/stubs/heavy-runtime/index.ts

@@ -0,0 +1,5 @@
+export function runHeavy(): { tag: 'heavy' } {
+  return { tag: 'heavy' };
+}
+
+export type HeavyOptions = { kind: 'heavy' };

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/stubs/light-helper/index.ts

@@ -0,0 +1,3 @@
+export function runLight(_opts?: { mode: 'light' }): void {
+  /* noop */
+}

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/stubs/watched-pkg/heavy.ts

@@ -0,0 +1,7 @@
+import { runHeavy } from 'heavy-runtime';
+
+export type HeavyType = { tag: 'heavy' };
+
+export function useHeavy(): HeavyType {
+  return runHeavy();
+}

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/stubs/watched-pkg/index.ts

@@ -0,0 +1,9 @@
+import type { HeavyType } from './heavy';
+
+export { useHeavy } from './heavy';
+export { useLight } from './light';
+export type { LightOptions } from './light';
+// Re-export of a type-only thing from the heavy module — must not count as a runtime reach.
+export type { HeavyType } from './heavy';
+
+export type HeavyWrapper = { tag: 'heavy-wrapper'; inner: HeavyType };

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/stubs/watched-pkg/light.ts

@@ -0,0 +1,7 @@
+import { runLight } from 'light-helper';
+
+export type LightOptions = { mode: 'light' };
+
+export function useLight(opts?: LightOptions): void {
+  runLight(opts);
+}

tools/eslint-rules/rules/__fixtures__/consistent-base-hook/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": ["ES2022", "DOM"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "watched-pkg": ["./stubs/watched-pkg/index.ts"],
+      "watched-pkg/*": ["./stubs/watched-pkg/*"],
+      "heavy-runtime": ["./stubs/heavy-runtime/index.ts"],
+      "light-helper": ["./stubs/light-helper/index.ts"],
+      "cyclic-pkg": ["./stubs/cyclic-pkg/index.ts"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "stubs/**/*.ts"]
+}