Add debug/is-from-ref rule (#1433)

Author: Rel1cx

apps/website/content/docs/rules/meta.json

@@ -103,6 +103,7 @@
     "debug-function-component",
     "debug-hook",
     "debug-is-from-react",
+    "debug-is-from-ref",
     "debug-jsx"
   ]
 }

apps/website/content/docs/rules/overview.mdx

@@ -177,6 +177,7 @@ full: true
     - [`function-component`](./debug-function-component) - Reports all function components in JSON format
     - [`hook`](./debug-hook) - Reports all React Hooks in JSON format
     - [`is-from-react`](./debug-is-from-react) - Reports all identifiers initialized from React in JSON format
+    - [`is-from-ref`](./debug-is-from-ref) - Reports all identifiers initialized or derived from refs in JSON format
     - [`jsx`](./debug-jsx) - Reports all JSX elements and fragments in JSON format
   </Tab>
 
@@ -328,13 +329,14 @@ full: true
       These rules are useful for code metrics, code transformation, issue reporting, or when building custom tooling that needs to identify specific patterns.
     </Callout>
 
-    | Rule                                             |  🌟  | Description                                                   |
-    | :----------------------------------------------- | :--: | :------------------------------------------------------------ |
-    | [`class-component`](debug-class-component)       | `🐞` | Reports all class components in JSON format                   |
-    | [`function-component`](debug-function-component) | `🐞` | Reports all function components in JSON format                |
-    | [`hook`](debug-hook)                             | `🐞` | Reports all React Hooks in JSON format                        |
-    | [`is-from-react`](debug-is-from-react)           | `🐞` | Reports all identifiers initialized from React in JSON format |
-    | [`jsx`](debug-jsx)                               | `🐞` | Reports all JSX elements and fragments in JSON format         |
+    | Rule                                             |  🌟  | Description                                                             |
+    | :----------------------------------------------- | :--: | :---------------------------------------------------------------------- |
+    | [`class-component`](debug-class-component)       | `🐞` | Reports all class components in JSON format                             |
+    | [`function-component`](debug-function-component) | `🐞` | Reports all function components in JSON format                          |
+    | [`hook`](debug-hook)                             | `🐞` | Reports all React Hooks in JSON format                                  |
+    | [`is-from-react`](debug-is-from-react)           | `🐞` | Reports all identifiers initialized from React in JSON format           |
+    | [`is-from-ref`](debug-is-from-ref)               | `🐞` | Reports all identifiers initialized or derived from refs in JSON format |
+    | [`jsx`](debug-jsx)                               | `🐞` | Reports all JSX elements and fragments in JSON format                   |
 
     {/* VERIFY_RULES_METAS_END */}
   </Tab>

packages/core/docs/README.md

@@ -139,8 +139,9 @@
 | [isComponentWrapperCallbackLoose](functions/isComponentWrapperCallbackLoose.md) | Check if the node is a callback function passed to a component wrapper loosely |
 | [isComponentWrapperCallLoose](functions/isComponentWrapperCallLoose.md) | Check if the node is a call expression for a component wrapper loosely |
 | [isDeclaredInRenderPropLoose](functions/isDeclaredInRenderPropLoose.md) | Unsafe check whether given node is declared inside a render prop `_ = <Component renderRow={"node"} /> ` ^^^^^^ ` _ = <Component rows={ [{ render: "node" }] } /> ` ^^^^^^ `` |
-| [isInitializedFromReact](functions/isInitializedFromReact.md) | Checks if a variable is initialized from React import |
+| [isInitializedFromReact](functions/isInitializedFromReact.md) | Checks if a variable is initialized or derived from React import |
 | [isInitializedFromReactNative](functions/isInitializedFromReactNative.md) | Checks if a variable is initialized from React Native import |
+| [isInitializedFromRef](functions/isInitializedFromRef.md) | Checks if the variable with the given name is initialized or derived from a ref |
 | [isInsideComponentOrHook](functions/isInsideComponentOrHook.md) | Checks if a given AST node is inside a React component or hook |
 | [isJsxFragmentElement](functions/isJsxFragmentElement.md) | Determines if a JSX element is a React Fragment Fragments can be imported from React and used like <Fragment> or <React.Fragment> |
 | [isJsxHostElement](functions/isJsxHostElement.md) | Determines if a JSX element is a host element Host elements in React start with lowercase letters (e.g., div, span) |
@@ -154,6 +155,7 @@
 | [isReactHookCallWithName](functions/isReactHookCallWithName.md) | Checks if a node is a call to a specific React hook. Returns a function that accepts a hook name to check against. |
 | [isReactHookId](functions/isReactHookId.md) | - |
 | [isReactHookName](functions/isReactHookName.md) | Catch all identifiers that begin with "use" followed by an uppercase Latin character to exclude identifiers like "user". |
+| [isRefName](functions/isRefName.md) | Checks if a given name corresponds to a ref name |
 | [isRenderFunctionLoose](functions/isRenderFunctionLoose.md) | Unsafe check whether given node is a render function `const renderRow = () => <div /> ` ^^^^^^^^^^^^` _ = <Component renderRow={() => <div />} /> ` ^^^^^^^^^^^^^ `` |
 | [isRenderMethodLike](functions/isRenderMethodLike.md) | Check whether given node is a render method of a class component |
 | [isRenderPropLoose](functions/isRenderPropLoose.md) | Unsafe check whether given JSXAttribute is a render prop `_ = <Component renderRow={() => <div />} /> ` ^^^^^^^^^^^^^^^^^^^^^^^^^ `` |

packages/core/docs/functions/isInitializedFromReact.md

@@ -9,7 +9,7 @@ function isInitializedFromReact(
    importSource: string): boolean;
 ```
 
-Checks if a variable is initialized from React import
+Checks if a variable is initialized or derived from React import
 
 ## Parameters
 
@@ -23,4 +23,4 @@ Checks if a variable is initialized from React import
 
 `boolean`
 
-True if the variable is initialized from React import
+True if the variable is initialized or derived from React import

packages/core/docs/functions/isInitializedFromRef.md

@@ -0,0 +1,22 @@
+[@eslint-react/core](../README.md) / isInitializedFromRef
+
+# Function: isInitializedFromRef()
+
+```ts
+function isInitializedFromRef(name: string, initialScope: Scope): boolean;
+```
+
+Checks if the variable with the given name is initialized or derived from a ref
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------ | ------ | ------ |
+| `name` | `string` | The variable name |
+| `initialScope` | `Scope` | The initial scope |
+
+## Returns
+
+`boolean`
+
+True if the variable is derived from a ref, false otherwise

packages/core/docs/functions/isRefName.md

@@ -0,0 +1,21 @@
+[@eslint-react/core](../README.md) / isRefName
+
+# Function: isRefName()
+
+```ts
+function isRefName(name: string): boolean;
+```
+
+Checks if a given name corresponds to a ref name
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------ | ------ | ------ |
+| `name` | `string` | The name to check |
+
+## Returns
+
+`boolean`
+
+True if the name is "ref" or ends with "Ref"

packages/core/src/api/is-from-react.ts

@@ -2,11 +2,11 @@ import { findImportSource } from "@eslint-react/var";
 import type { Scope } from "@typescript-eslint/scope-manager";
 
 /**
- * Checks if a variable is initialized from React import
+ * Checks if a variable is initialized or derived from React import
  * @param name The variable name
  * @param initialScope The initial scope
  * @param importSource Alternative import source of React (e.g., "preact/compat")
- * @returns True if the variable is initialized from React import
+ * @returns True if the variable is initialized or derived from React import
  */
 export function isInitializedFromReact(
   name: string,

packages/core/src/index.ts

@@ -3,4 +3,5 @@ export * from "./component";
 export * from "./hierarchy";
 export * from "./hook";
 export * from "./jsx";
+export * from "./ref";
 export type * from "./semantic";

packages/core/src/ref/is-from-ref.ts

@@ -1,12 +1,32 @@
-/* eslint-disable jsdoc/require-returns-check */
+import { findVariable } from "@eslint-react/var";
 import type { Scope } from "@typescript-eslint/scope-manager";
-import type { TSESTree } from "@typescript-eslint/types";
+import { AST_NODE_TYPES as T } from "@typescript-eslint/utils";
+
+import { isUseRefCall } from "../hook";
+import { isRefName } from "./ref-name";
 
 /**
- * Checks whether a given node is derived from a ref.
- * @todo Implement the function logic
- * @param node The AST node to check
- * @param initialScope The initial scope to start the search from
- * @returns True if the node is derived from a ref, false otherwise
+ * Checks if the variable with the given name is initialized or derived from a ref
+ * @param name The variable name
+ * @param initialScope The initial scope
+ * @returns True if the variable is derived from a ref, false otherwise
  */
-export function isFromRef(node: TSESTree.Node, initialScope: Scope) {}
+export function isInitializedFromRef(name: string, initialScope: Scope) {
+  for (const { node } of findVariable(initialScope)(name)?.defs ?? []) {
+    if (node.type !== T.VariableDeclarator) continue;
+    const init = node.init;
+    if (init == null) continue;
+    switch (true) {
+      // const identifier = anotherRef.current;
+      case init.type === T.MemberExpression
+        && init.object.type === T.Identifier
+        && isRefName(init.object.name):
+        return true;
+      // const identifier = useRef();
+      case init.type === T.CallExpression
+        && isUseRefCall(init):
+        return true;
+    }
+  }
+  return false;
+}

packages/plugins/eslint-plugin-react-debug/README.md

@@ -45,6 +45,7 @@ export default defineConfig(
 - [`function-component`](./debug-function-component) - Reports all function components
 - [`hook`](./debug-hook) - Reports all `React` hooks
 - [`is-from-react`](./debug-is-from-react) - Reports identifiers initialized from `React`
+- [`is-from-ref`](./debug-is-from-ref) - Reports identifiers initialized or derived from refs
 - [`jsx`](./debug-jsx) - Reports all `JSX` elements and fragments
 
 ## Rules