@openrewrite/recipes-react 0.2.9

package/src/simplify-react-imports.ts

@@ -0,0 +1,241 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, maybeAddImport} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+import {JS} from "@openrewrite/rewrite/javascript";
+
+/**
+ * Common React hooks and utilities that can be imported directly instead of
+ * accessed through the React namespace.
+ */
+const REACT_EXPORTS = new Set([
+    // Hooks
+    'useState',
+    'useEffect',
+    'useContext',
+    'useReducer',
+    'useCallback',
+    'useMemo',
+    'useRef',
+    'useImperativeHandle',
+    'useLayoutEffect',
+    'useDebugValue',
+    'useDeferredValue',
+    'useTransition',
+    'useId',
+    'useSyncExternalStore',
+    'useInsertionEffect',
+    // React 19 hooks
+    'useActionState',
+    'useFormStatus',
+    'useOptimistic',
+    'use',
+    // React 19 APIs
+    'cache',
+    // Components
+    'Fragment',
+    'Suspense',
+    'StrictMode',
+    'Profiler',
+    // APIs
+    'createContext',
+    'forwardRef',
+    'lazy',
+    'memo',
+    'startTransition',
+    'Children',
+    'cloneElement',
+    'createElement',
+    'createRef',
+    'isValidElement',
+]);
+
+/**
+ * Check if a MethodInvocation is `React.xxx()` where xxx is a known React export.
+ * Returns the method name if it is, undefined otherwise.
+ */
+function getReactMethodName(method: J.MethodInvocation): string | undefined {
+    const methodName = method.name?.simpleName;
+    if (!methodName || !REACT_EXPORTS.has(methodName)) return undefined;
+
+    // Check if the select (the target) is the React identifier
+    // In J.MethodInvocation, select is wrapped in RightPadded
+    const select = method.select;
+    if (!select) return undefined;
+
+    // The select might be a RightPadded<Expression> or directly an Expression
+    // Let's check if it's an Identifier named "React"
+    const selectExpr = (select as any).element ?? select;
+    if (selectExpr?.kind !== J.Kind.Identifier) return undefined;
+
+    const identifier = selectExpr as J.Identifier;
+    if (identifier.simpleName !== 'React') return undefined;
+
+    return methodName;
+}
+
+/**
+ * Simplifies React namespace usage by converting `React.xxx` to direct imports.
+ *
+ * Instead of:
+ * ```tsx
+ * import React from 'react';
+ * const [count, setCount] = React.useState(0);
+ * ```
+ *
+ * This recipe produces:
+ * ```tsx
+ * import React, { useState } from 'react';
+ * const [count, setCount] = useState(0);
+ * ```
+ *
+ * This is a modern best practice that:
+ * - Reduces bundle size when tree-shaking is applied
+ * - Makes code more readable
+ * - Aligns with React team recommendations
+ */
+export class SimplifyReactImports extends Recipe {
+    readonly name = "org.openrewrite.react.simplify-react-imports";
+    readonly displayName: string = "Simplify `React.xxx` to direct imports";
+    readonly description: string = "Converts `React.useState`, `React.useEffect`, and other React namespace accesses to direct named imports.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            // Track which React exports we've used in this file
+            private usedExports = new Set<string>();
+            // Track locally defined identifiers to avoid naming conflicts
+            private localIdentifiers = new Set<string>();
+
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                // Reset tracking for each file
+                this.usedExports = new Set<string>();
+                this.localIdentifiers = new Set<string>();
+
+                // First pass: collect all locally defined identifiers
+                await this.collectLocalIdentifiers(cu, ctx);
+
+                // Second pass: visit and transform all React.xxx usages
+                let result = await super.visitJsCompilationUnit(cu, ctx) as JS.CompilationUnit;
+
+                // Second pass: add imports for all used exports
+                // We set onlyIfReferenced: false since we already know these are used (we just transformed them)
+                for (const exportName of this.usedExports) {
+                    maybeAddImport(this, {module: "react", member: exportName, onlyIfReferenced: false});
+                }
+
+                return result;
+            }
+
+            /**
+             * Collect all locally defined identifiers to detect potential naming conflicts.
+             * This includes variable declarations, function declarations, and non-React imports.
+             */
+            private async collectLocalIdentifiers(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<void> {
+                const collector = new class extends JavaScriptVisitor<ExecutionContext> {
+                    constructor(private identifiers: Set<string>) {
+                        super();
+                    }
+
+                    override async visitVariableDeclarations(varDecl: J.VariableDeclarations, ctx: ExecutionContext): Promise<J | undefined> {
+                        for (const v of varDecl.variables) {
+                            const name = v.element.name;
+                            if (name.kind === J.Kind.Identifier) {
+                                this.identifiers.add((name as J.Identifier).simpleName);
+                            }
+                        }
+                        return super.visitVariableDeclarations(varDecl, ctx);
+                    }
+
+                    override async visitMethodDeclaration(method: J.MethodDeclaration, ctx: ExecutionContext): Promise<J | undefined> {
+                        this.identifiers.add(method.name.simpleName);
+                        return super.visitMethodDeclaration(method, ctx);
+                    }
+
+                    override async visitImportSpecifier(spec: JS.ImportSpecifier, ctx: ExecutionContext): Promise<J | undefined> {
+                        // Track named imports
+                        const specifier = spec.specifier;
+
+                        if (specifier.kind === JS.Kind.Alias) {
+                            // Aliased import: import { useState as myUseState }
+                            const alias = specifier as JS.Alias;
+                            const aliasIdent = alias.alias;
+                            if (aliasIdent.kind === J.Kind.Identifier) {
+                                this.identifiers.add((aliasIdent as J.Identifier).simpleName);
+                            }
+                        } else if (specifier.kind === J.Kind.Identifier) {
+                            // Direct import: import { useState }
+                            // We don't track these as conflicts since they're the imports we manage
+                        }
+
+                        return super.visitImportSpecifier(spec, ctx);
+                    }
+                }(this.localIdentifiers);
+
+                await collector.visit(cu, ctx);
+            }
+
+            override async visitMethodInvocation(method: J.MethodInvocation, ctx: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, ctx) as J.MethodInvocation;
+
+                const methodName = getReactMethodName(m);
+                if (!methodName) {
+                    return m;
+                }
+
+                // Skip transformation if there's a local identifier with the same name
+                if (this.localIdentifiers.has(methodName)) {
+                    return m;
+                }
+
+                // Track that we used this export
+                this.usedExports.add(methodName);
+
+                // Transform React.xxx() to xxx() by removing the select
+                // The original structure is: [prefix]React.useState(...)
+                // We need: [prefix]useState(...)
+                // The method name's prefix currently has the dot's spacing, we need to use the original prefix
+                const result: J.MethodInvocation = {
+                    ...m,
+                    select: undefined,
+                    name: m.name  // Keep the name as-is
+                };
+
+                return result;
+            }
+
+            override async visitFieldAccess(fieldAccess: J.FieldAccess, ctx: ExecutionContext): Promise<J | undefined> {
+                let fa = await super.visitFieldAccess(fieldAccess, ctx) as J.FieldAccess;
+
+                // Check if this is React.xxx access (for non-call usages like JSX element names)
+                if (fa.target.kind !== J.Kind.Identifier) {
+                    return fa;
+                }
+
+                const target = fa.target as J.Identifier;
+                if (target.simpleName !== 'React') {
+                    return fa;
+                }
+
+                const memberName = fa.name.element.simpleName;
+                if (!REACT_EXPORTS.has(memberName)) {
+                    return fa;
+                }
+
+                // Skip transformation if there's a local identifier with the same name
+                if (this.localIdentifiers.has(memberName)) {
+                    return fa;
+                }
+
+                // Track that we used this export
+                this.usedExports.add(memberName);
+
+                // Return just the identifier (removing React. prefix)
+                const identifier: J.Identifier = {
+                    ...fa.name.element,
+                    prefix: fa.prefix  // Preserve the original whitespace
+                };
+
+                return identifier;
+            }
+        }();
+    }
+}