@openrewrite/recipes-react 0.2.9

package/src/refactoring/sort-comp.ts

@@ -0,0 +1,135 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+const LIFECYCLE_METHODS = [
+    'displayName',
+    'propTypes',
+    'contextTypes',
+    'childContextTypes',
+    'mixins',
+    'statics',
+    'defaultProps',
+    'constructor',
+    'getDefaultProps',
+    'state',
+    'getInitialState',
+    'getChildContext',
+    'getDerivedStateFromProps',
+    'componentWillMount',
+    'UNSAFE_componentWillMount',
+    'componentDidMount',
+    'componentWillReceiveProps',
+    'UNSAFE_componentWillReceiveProps',
+    'shouldComponentUpdate',
+    'componentWillUpdate',
+    'UNSAFE_componentWillUpdate',
+    'getSnapshotBeforeUpdate',
+    'componentDidUpdate',
+    'componentDidCatch',
+    'componentWillUnmount',
+];
+
+/**
+ * Reorders React component methods to match ESLint `react/sort-comp` ordering.
+ *
+ * Default order:
+ * 1. Static methods and properties
+ * 2. Lifecycle methods
+ * 3. Event handlers (on*)
+ * 4. Getter/setter methods
+ * 5. Other instance methods
+ * 6. render()
+ *
+ * @see https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md
+ */
+export class SortComp extends Recipe {
+    readonly name = "org.openrewrite.react.refactoring.sort-comp";
+    readonly displayName: string = "Sort React component methods";
+    readonly description: string = "Reorders React component methods to follow the recommended lifecycle ordering convention.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitClassDeclaration(classDecl: J.ClassDeclaration, ctx: ExecutionContext): Promise<J | undefined> {
+                let cd = await super.visitClassDeclaration(classDecl, ctx) as J.ClassDeclaration;
+
+                if (!cd.body || cd.body.statements.length <= 1) {
+                    return cd;
+                }
+
+                const stmts = cd.body.statements;
+                const sorted = [...stmts].sort((a, b) => {
+                    const nameA = this.getMethodName(a.element);
+                    const nameB = this.getMethodName(b.element);
+                    const orderA = this.getSortOrder(nameA, a.element);
+                    const orderB = this.getSortOrder(nameB, b.element);
+                    if (orderA !== orderB) return orderA - orderB;
+                    return 0; // preserve original order within same category
+                });
+
+                // Check if order actually changed
+                const changed = sorted.some((s, i) => s !== stmts[i]);
+                if (!changed) return cd;
+
+                return {
+                    ...cd,
+                    body: {
+                        ...cd.body,
+                        statements: sorted
+                    }
+                } as any as J.ClassDeclaration;
+            }
+
+            private getMethodName(node: J | undefined): string {
+                if (!node) return '';
+                if (node.kind === J.Kind.MethodDeclaration) {
+                    return (node as J.MethodDeclaration).name.simpleName;
+                }
+                if (node.kind === J.Kind.VariableDeclarations) {
+                    const vars = node as J.VariableDeclarations;
+                    if (vars.variables.length > 0) {
+                        const name = vars.variables[0].element.name;
+                        if (name.kind === J.Kind.Identifier) {
+                            return (name as J.Identifier).simpleName;
+                        }
+                    }
+                }
+                return '';
+            }
+
+            private isStatic(node: J | undefined): boolean {
+                if (!node) return false;
+                if (node.kind === J.Kind.MethodDeclaration) {
+                    const method = node as J.MethodDeclaration;
+                    return method.modifiers?.some(m => m.keyword === 'static') ?? false;
+                }
+                if (node.kind === J.Kind.VariableDeclarations) {
+                    const vars = node as J.VariableDeclarations;
+                    return vars.modifiers?.some(m => m.keyword === 'static') ?? false;
+                }
+                return false;
+            }
+
+            private getSortOrder(name: string, node: J | undefined): number {
+                // 0: static methods/properties
+                if (this.isStatic(node)) return 0;
+
+                // 1: lifecycle methods
+                const lifecycleIndex = LIFECYCLE_METHODS.indexOf(name);
+                if (lifecycleIndex >= 0) return 100 + lifecycleIndex;
+
+                // 5: render is always last
+                if (name === 'render') return 500;
+
+                // 2: event handlers (on*)
+                if (/^on[A-Z]/.test(name)) return 200;
+
+                // 3: getters/setters
+                if (/^(get|set)[A-Z]/.test(name)) return 300;
+
+                // 4: everything else
+                return 400;
+            }
+        }();
+    }
+}

package/src/search/find-hook-usage.ts

@@ -0,0 +1,226 @@
+import {Column, DataTable, ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+const BUILT_IN_HOOKS = new Set([
+    "useState", "useEffect", "useContext", "useReducer", "useCallback",
+    "useMemo", "useRef", "useImperativeHandle", "useLayoutEffect",
+    "useDebugValue", "useDeferredValue", "useTransition", "useId",
+    "useSyncExternalStore", "useInsertionEffect", "useOptimistic",
+    "useFormStatus", "useFormState", "useActionState", "use"
+]);
+
+const HOOK_CATEGORIES: Record<string, string> = {
+    useState: "state", useReducer: "state",
+    useEffect: "effect", useLayoutEffect: "effect", useInsertionEffect: "effect",
+    useContext: "context", use: "context",
+    useRef: "ref", useImperativeHandle: "ref",
+    useMemo: "memo",
+    useCallback: "callback",
+    useId: "id",
+    useDeferredValue: "concurrency", useTransition: "concurrency",
+    useSyncExternalStore: "sync",
+    useDebugValue: "debug",
+    useOptimistic: "state", useFormStatus: "state", useFormState: "state", useActionState: "state"
+};
+
+class FindHookUsageRow {
+    @Column({displayName: "Hook name", description: "The name of the hook"})
+    hookName!: string;
+
+    @Column({displayName: "File path", description: "The file path where the hook is used"})
+    filePath!: string;
+
+    @Column({displayName: "Component name", description: "The name of the enclosing component or custom hook"})
+    componentName!: string;
+
+    @Column({displayName: "Hook type", description: "Whether the hook is built-in or custom"})
+    hookType!: string;
+
+    @Column({displayName: "Hook category", description: "The category of the hook (state, effect, ref, memo, callback, context, custom)"})
+    hookCategory!: string;
+
+    @Column({displayName: "Is conditional", description: "Whether the hook is called inside a conditional block"})
+    isConditional!: boolean;
+
+    @Column({displayName: "Is in loop", description: "Whether the hook is called inside a loop"})
+    isInLoop!: boolean;
+}
+
+/**
+ * Finds React hook usage across source files.
+ *
+ * Detects both built-in hooks (useState, useEffect, etc.) and custom hooks
+ * (functions starting with "use" followed by an uppercase letter).
+ *
+ * Reports violations of the Rules of Hooks:
+ * - Hooks called inside conditionals
+ * - Hooks called inside loops
+ */
+export class FindHookUsage extends Recipe {
+    readonly name = "org.openrewrite.react.search.find-hook-usage";
+    readonly displayName: string = "Find React hook usage";
+    readonly description: string = "Finds all React hook usages including built-in and custom hooks, and detects Rules of Hooks violations.";
+
+    private dataTable = new DataTable<FindHookUsageRow>(
+        "org.openrewrite.react.search.FindHookUsageTable",
+        "React hook usages",
+        "Table of all React hook usages found in the codebase.",
+        FindHookUsageRow
+    );
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const dataTable = this.dataTable;
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private filePath = "";
+            private componentStack: string[] = [];
+            private conditionalDepth = 0;
+            private loopDepth = 0;
+
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                this.filePath = cu.sourcePath ?? "";
+                this.componentStack = [];
+                this.conditionalDepth = 0;
+                this.loopDepth = 0;
+                return super.visitJsCompilationUnit(cu, ctx);
+            }
+
+            // Track component/function scope for reporting
+            override async visitMethodDeclaration(method: J.MethodDeclaration, ctx: ExecutionContext): Promise<J | undefined> {
+                const name = method.name.simpleName;
+                this.componentStack.push(name);
+                const result = await super.visitMethodDeclaration(method, ctx);
+                this.componentStack.pop();
+                return result;
+            }
+
+            override async visitLambda(lambda: J.Lambda, ctx: ExecutionContext): Promise<J | undefined> {
+                // Try to get the variable name this lambda is assigned to
+                const varName = this.getLambdaName();
+                if (varName) {
+                    this.componentStack.push(varName);
+                }
+                const result = await super.visitLambda(lambda, ctx);
+                if (varName) {
+                    this.componentStack.pop();
+                }
+                return result;
+            }
+
+            // Track conditionals
+            override async visitIf(ifStmt: J.If, ctx: ExecutionContext): Promise<J | undefined> {
+                this.conditionalDepth++;
+                const result = await super.visitIf(ifStmt, ctx);
+                this.conditionalDepth--;
+                return result;
+            }
+
+            override async visitTernary(ternary: J.Ternary, ctx: ExecutionContext): Promise<J | undefined> {
+                this.conditionalDepth++;
+                const result = await super.visitTernary(ternary, ctx);
+                this.conditionalDepth--;
+                return result;
+            }
+
+            // Track loops
+            override async visitForLoop(forLoop: J.ForLoop, ctx: ExecutionContext): Promise<J | undefined> {
+                this.loopDepth++;
+                const result = await super.visitForLoop(forLoop, ctx);
+                this.loopDepth--;
+                return result;
+            }
+
+            override async visitForEachLoop(forEachLoop: J.ForEachLoop, ctx: ExecutionContext): Promise<J | undefined> {
+                this.loopDepth++;
+                const result = await super.visitForEachLoop(forEachLoop, ctx);
+                this.loopDepth--;
+                return result;
+            }
+
+            override async visitWhileLoop(whileLoop: J.WhileLoop, ctx: ExecutionContext): Promise<J | undefined> {
+                this.loopDepth++;
+                const result = await super.visitWhileLoop(whileLoop, ctx);
+                this.loopDepth--;
+                return result;
+            }
+
+            override async visitDoWhileLoop(doWhileLoop: J.DoWhileLoop, ctx: ExecutionContext): Promise<J | undefined> {
+                this.loopDepth++;
+                const result = await super.visitDoWhileLoop(doWhileLoop, ctx);
+                this.loopDepth--;
+                return result;
+            }
+
+            // Detect hook calls
+            override async visitMethodInvocation(method: J.MethodInvocation, ctx: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, ctx) as J.MethodInvocation;
+
+                const hookName = this.getHookName(m);
+                if (!hookName) return m;
+
+                const isBuiltIn = BUILT_IN_HOOKS.has(hookName);
+                const hookType = isBuiltIn ? "built-in" : "custom";
+                const hookCategory = HOOK_CATEGORIES[hookName] ?? "custom";
+                const componentName = this.componentStack.length > 0
+                    ? this.componentStack[this.componentStack.length - 1]
+                    : "<module>";
+
+                dataTable.insertRow(ctx, {
+                    hookName,
+                    filePath: this.filePath,
+                    componentName,
+                    hookType,
+                    hookCategory,
+                    isConditional: this.conditionalDepth > 0,
+                    isInLoop: this.loopDepth > 0
+                });
+
+                return foundSearchResult(m, hookName);
+            }
+
+            private getHookName(method: J.MethodInvocation): string | null {
+                // Direct call: useState(...)
+                const name = method.name.simpleName;
+                if (this.isHookName(name) && !method.select) {
+                    return name;
+                }
+
+                // Namespaced call: React.useState(...)
+                if (this.isHookName(name) && method.select) {
+                    const select = (method.select as any).element ?? method.select;
+                    if (isIdentifier(select)) {
+                        return name;
+                    }
+                }
+
+                return null;
+            }
+
+            private isHookName(name: string): boolean {
+                // React hooks convention: starts with "use" followed by uppercase letter
+                return name.length > 3 && name.startsWith("use") && name[3] === name[3].toUpperCase();
+            }
+
+            private getLambdaName(): string | null {
+                // Walk up the cursor to find a variable declaration
+                let cursor = this.cursor;
+                while (cursor.parent) {
+                    const node = cursor.parent.value;
+                    if (!node || typeof node !== 'object') break;
+                    if ((node as any).kind === J.Kind.NamedVariable) {
+                        const namedVar = node as J.VariableDeclarations.NamedVariable;
+                        const name = namedVar.name;
+                        if (isIdentifier(name)) {
+                            return name.simpleName;
+                        }
+                    }
+                    if ((node as any).kind === JS.Kind.ScopedVariableDeclarations) break;
+                    if ((node as any).kind === J.Kind.MethodDeclaration) break;
+                    cursor = cursor.parent;
+                }
+                return null;
+            }
+        }();
+    }
+}

package/src/search/find-prop-usage.ts

@@ -0,0 +1,176 @@
+import {Column, DataTable, ExecutionContext, foundSearchResult, Option, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS, JSX} from "@openrewrite/rewrite/javascript";
+import {Expression, isIdentifier, J} from "@openrewrite/rewrite/java";
+
+class FindPropUsageRow {
+    @Column({displayName: "Component name", description: "The name of the JSX element receiving the prop"})
+    componentName!: string;
+
+    @Column({displayName: "File path", description: "The file path where the prop usage is found"})
+    filePath!: string;
+
+    @Column({displayName: "Prop name", description: "The name of the prop"})
+    propName!: string;
+
+    @Column({displayName: "Prop value type", description: "The type of value passed to the prop (string, expression, boolean, spread)"})
+    propValueType!: string;
+
+    @Column({displayName: "Prop value", description: "The literal value if available"})
+    propValue!: string;
+
+    @Column({displayName: "Is spread", description: "Whether this prop comes from a spread attribute"})
+    isSpread!: boolean;
+}
+
+/**
+ * Finds prop usages across React components.
+ *
+ * Detects:
+ * - String literal props: `<Button variant="primary" />`
+ * - Expression props: `<Button onClick={handler} />`
+ * - Boolean shorthand props: `<Button disabled />`
+ * - Spread props: `<Button {...props} />`
+ *
+ * Can optionally filter by component name and/or prop name.
+ */
+export class FindPropUsage extends Recipe {
+    readonly name = "org.openrewrite.react.search.find-prop-usage";
+    readonly displayName: string = "Find React prop usage";
+    readonly description: string = "Finds all prop usages on React JSX elements, with optional filtering by component and prop name.";
+
+    @Option({
+        displayName: "Component name",
+        description: "Optional component name to filter (e.g., 'Button'). If not specified, finds props on all components.",
+        required: false,
+        example: "Button"
+    })
+    componentName?: string;
+
+    @Option({
+        displayName: "Prop name",
+        description: "Optional prop name to filter (e.g., 'onClick'). If not specified, finds all props.",
+        required: false,
+        example: "onClick"
+    })
+    propName?: string;
+
+    private dataTable = new DataTable<FindPropUsageRow>(
+        "org.openrewrite.react.search.FindPropUsageTable",
+        "React prop usages",
+        "Table of all React prop usages found in the codebase.",
+        FindPropUsageRow
+    );
+
+    constructor(options?: { componentName?: string; propName?: string }) {
+        super(options);
+    }
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const filterComponent = this.componentName;
+        const filterProp = this.propName;
+        const dataTable = this.dataTable;
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private filePath = "";
+
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                this.filePath = cu.sourcePath ?? "";
+                return super.visitJsCompilationUnit(cu, ctx);
+            }
+
+            override async visitJsxAttribute(attribute: JSX.Attribute, ctx: ExecutionContext): Promise<J | undefined> {
+                const attr = await super.visitJsxAttribute(attribute, ctx) as JSX.Attribute;
+
+                // Get the enclosing JSX tag
+                const tag = this.cursor.firstEnclosing((t): t is JSX.Tag =>
+                    t.kind === JS.Kind.JsxTag
+                );
+                if (!tag) return attr;
+
+                const tagName = this.getTagName(tag);
+
+                // Apply component filter
+                if (filterComponent && tagName !== filterComponent) return attr;
+
+                // Get prop name
+                const key = attr.key;
+                if (!isIdentifier(key)) return attr;
+                const propNameStr = key.simpleName;
+
+                // Apply prop name filter
+                if (filterProp && propNameStr !== filterProp) return attr;
+
+                // Determine value type and value
+                let propValueType: string;
+                let propValue: string;
+
+                if (!attr.value) {
+                    // Boolean shorthand: <Button disabled />
+                    propValueType = "boolean";
+                    propValue = "true";
+                } else {
+                    const valueExpr = attr.value.element;
+                    if (valueExpr.kind === J.Kind.Literal) {
+                        const literal = valueExpr as J.Literal;
+                        propValueType = typeof literal.value === 'string' ? "string" : String(typeof literal.value);
+                        propValue = String(literal.value ?? "");
+                    } else {
+                        propValueType = "expression";
+                        propValue = "";
+                    }
+                }
+
+                dataTable.insertRow(ctx, {
+                    componentName: tagName,
+                    filePath: this.filePath,
+                    propName: propNameStr,
+                    propValueType,
+                    propValue,
+                    isSpread: false
+                });
+
+                return foundSearchResult(attr, propNameStr);
+            }
+
+            override async visitJsxSpreadAttribute(spread: JSX.SpreadAttribute, ctx: ExecutionContext): Promise<J | undefined> {
+                const s = await super.visitJsxSpreadAttribute(spread, ctx) as JSX.SpreadAttribute;
+
+                // Get the enclosing JSX tag
+                const tag = this.cursor.firstEnclosing((t): t is JSX.Tag =>
+                    t.kind === JS.Kind.JsxTag
+                );
+                if (!tag) return s;
+
+                const tagName = this.getTagName(tag);
+                if (filterComponent && tagName !== filterComponent) return s;
+
+                // For spreads, we don't apply prop name filter since spread contains multiple props
+                if (filterProp) return s;
+
+                dataTable.insertRow(ctx, {
+                    componentName: tagName,
+                    filePath: this.filePath,
+                    propName: "...",
+                    propValueType: "spread",
+                    propValue: "",
+                    isSpread: true
+                });
+
+                return foundSearchResult(s, "...");
+            }
+
+            private getTagName(tag: JSX.Tag): string {
+                const openName = tag.openName.element;
+                if (isIdentifier(openName)) {
+                    return openName.simpleName;
+                } else if (openName.kind === J.Kind.FieldAccess) {
+                    const fa = openName as J.FieldAccess;
+                    const target = isIdentifier(fa.target) ? fa.target.simpleName + "." : "";
+                    const name = fa.name.element;
+                    return target + (isIdentifier(name) ? name.simpleName : "");
+                }
+                return "";
+            }
+        }();
+    }
+}