@openrewrite/recipes-react 0.2.9

package/src/react19/use-ref-required-initial.ts

@@ -0,0 +1,75 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+/**
+ * Adds `undefined` argument to `useRef()` calls with no arguments.
+ *
+ * In `@types/react` 19, `useRef()` with no arguments is no longer valid.
+ * You must pass an explicit initial value, typically `undefined` or `null`.
+ *
+ * Before:
+ * ```tsx
+ * const ref = useRef();
+ * ```
+ *
+ * After:
+ * ```tsx
+ * const ref = useRef(undefined);
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#different-types
+ */
+export class UseRefRequiredInitial extends Recipe {
+    readonly name = "org.openrewrite.react.19.use-ref-required-initial";
+    readonly displayName: string = "Add initial value to `useRef()` calls";
+    readonly description: string = "Adds `undefined` as initial argument to `useRef()` calls with no arguments. Required by `@types/react` 19.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, ctx: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, ctx) as J.MethodInvocation;
+
+                // Match useRef() or React.useRef() with no arguments
+                if (m.name.simpleName !== 'useRef') return m;
+
+                // Check it has no arguments (empty args list)
+                const args = m.arguments;
+                if (!args) return m;
+
+                const argElements = args.elements;
+                if (!argElements) return m;
+
+                // Empty args means a single J.Empty element
+                if (argElements.length === 1) {
+                    const firstArg = argElements[0];
+                    const argNode = (firstArg as any).element ?? firstArg;
+                    if (argNode.kind === J.Kind.Empty) {
+                        // Replace the empty arg with `undefined`
+                        const undefinedIdent: J.Identifier = {
+                            kind: J.Kind.Identifier,
+                            id: argNode.id,
+                            prefix: argNode.prefix,
+                            markers: argNode.markers,
+                            annotations: [],
+                            simpleName: 'undefined'
+                        };
+
+                        return create(m, draft => {
+                            const draftArg = draft.arguments!.elements[0];
+                            const draftArgPadded = draftArg as any;
+                            if (draftArgPadded.element) {
+                                draftArgPadded.element = undefinedIdent;
+                            } else {
+                                draft.arguments!.elements[0] = undefinedIdent as any;
+                            }
+                        });
+                    }
+                }
+
+                return m;
+            }
+        }();
+    }
+}

package/src/refactoring/class-to-functional.ts

@@ -0,0 +1,229 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {capture, JavaScriptVisitor, pattern, raw, rewrite, template} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+const LIFECYCLE_METHODS = new Set([
+    'componentWillMount', 'UNSAFE_componentWillMount',
+    'componentDidMount', 'componentWillReceiveProps',
+    'UNSAFE_componentWillReceiveProps', 'shouldComponentUpdate',
+    'componentWillUpdate', 'UNSAFE_componentWillUpdate',
+    'getSnapshotBeforeUpdate', 'componentDidUpdate',
+    'componentDidCatch', 'componentWillUnmount',
+    'getDerivedStateFromProps', 'getDerivedStateFromError',
+    'getDefaultProps', 'getInitialState',
+]);
+
+/**
+ * Converts simple class components (render-only) to functional components.
+ *
+ * Only transforms class components that:
+ * - Have only a `render` method (no other instance methods)
+ * - Have no state
+ * - Have no lifecycle methods
+ * - Have no refs
+ *
+ * Before:
+ * ```tsx
+ * class MyComponent extends React.Component {
+ *   render() {
+ *     return <div>{this.props.name}</div>;
+ *   }
+ * }
+ * ```
+ *
+ * After:
+ * ```tsx
+ * function MyComponent(props) {
+ *   return <div>{props.name}</div>;
+ * }
+ * ```
+ *
+ * @see https://github.com/reactjs/react-codemod#pure-component
+ */
+export class ClassToFunctional extends Recipe {
+    readonly name = "org.openrewrite.react.refactoring.class-to-functional";
+    readonly displayName: string = "Convert class components to functional components";
+    readonly description: string = "Converts simple render-only class components to functional components.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        // Rewrite rules for replacing this.props references
+        const field = capture();
+        const thisPropsFieldRule = rewrite(() => ({
+            before: pattern`this.props.${field}`,
+            after: template`props.${field}`
+        }));
+        const thisPropsRule = rewrite(() => ({
+            before: pattern`this.props`,
+            after: template`props`
+        }));
+
+        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 (!this.extendsReactComponent(cd)) {
+                    return cd;
+                }
+
+                const analysis = this.analyzeClassBody(cd);
+                if (!analysis.canConvert) {
+                    return cd;
+                }
+
+                const renderMethod = analysis.renderMethod!;
+                if (!renderMethod.body) {
+                    return cd;
+                }
+
+                // Replace this.props references with props in the render body
+                const transformedBody = await this.replaceThisProps(renderMethod.body, ctx);
+
+                // Use template to construct the function declaration
+                const className = cd.name.simpleName;
+                const funcDecl = await template`function ${raw(className)}(props) {}`.apply(cd, this.cursor);
+                if (!funcDecl) return cd;
+
+                // Adjust render body indentation to match function (not class) nesting
+                const classBodyIndent = this.getIndent(renderMethod.prefix);
+                const adjustedBody = this.adjustIndentation(transformedBody as J.Block, classBodyIndent);
+
+                // Splice the transformed render body into the template-constructed function
+                const func = funcDecl as J.MethodDeclaration;
+                return {...func, body: adjustedBody} as any as J.MethodDeclaration;
+            }
+
+            private extendsReactComponent(cd: J.ClassDeclaration): boolean {
+                if (!cd.extends) return false;
+                const extendsType = cd.extends.element;
+
+                if (extendsType.kind === J.Kind.FieldAccess) {
+                    const fa = extendsType as J.FieldAccess;
+                    const name = fa.name.element.simpleName;
+                    if (name !== 'Component' && name !== 'PureComponent') return false;
+                    if (fa.target.kind !== J.Kind.Identifier) return false;
+                    return (fa.target as J.Identifier).simpleName === 'React';
+                }
+
+                if (extendsType.kind === J.Kind.Identifier) {
+                    const name = (extendsType as J.Identifier).simpleName;
+                    return name === 'Component' || name === 'PureComponent';
+                }
+
+                return false;
+            }
+
+            private analyzeClassBody(cd: J.ClassDeclaration): {
+                canConvert: boolean;
+                renderMethod?: J.MethodDeclaration;
+            } {
+                let renderMethod: J.MethodDeclaration | undefined;
+                let hasDisqualifyingMember = false;
+
+                for (const stmt of cd.body.statements) {
+                    const s = stmt.element;
+                    if (!s) continue;
+
+                    if (s.kind === J.Kind.MethodDeclaration) {
+                        const method = s as J.MethodDeclaration;
+                        const name = method.name.simpleName;
+
+                        if (name === 'render') {
+                            renderMethod = method;
+                        } else if (name === 'constructor') {
+                            if (!this.isSimpleConstructor(method)) {
+                                hasDisqualifyingMember = true;
+                            }
+                        } else if (LIFECYCLE_METHODS.has(name)) {
+                            hasDisqualifyingMember = true;
+                        } else {
+                            const isStatic = method.modifiers?.some(m => m.keyword === 'static');
+                            if (!isStatic) {
+                                hasDisqualifyingMember = true;
+                            }
+                        }
+                    } else if (s.kind === J.Kind.VariableDeclarations) {
+                        const vars = s as J.VariableDeclarations;
+                        const isStatic = vars.modifiers?.some(m => m.keyword === 'static');
+                        if (!isStatic) {
+                            hasDisqualifyingMember = true;
+                        }
+                    }
+                }
+
+                return {
+                    canConvert: !!renderMethod && !hasDisqualifyingMember,
+                    renderMethod
+                };
+            }
+
+            private isSimpleConstructor(method: J.MethodDeclaration): boolean {
+                if (!method.body) return true;
+                const stmts = method.body.statements;
+                if (stmts.length === 0) return true;
+                if (stmts.length > 1) return false;
+
+                const firstStmt = stmts[0].element;
+                if (!firstStmt) return true;
+
+                if (firstStmt.kind === J.Kind.MethodInvocation) {
+                    const call = firstStmt as J.MethodInvocation;
+                    return call.name.simpleName === 'super';
+                }
+
+                return false;
+            }
+
+            private async replaceThisProps(body: J.Block, ctx: ExecutionContext): Promise<J.Block> {
+                const replacer = new class extends JavaScriptVisitor<ExecutionContext> {
+                    override async visitFieldAccess(fieldAccess: J.FieldAccess, ctx: ExecutionContext): Promise<J | undefined> {
+                        let fa = await super.visitFieldAccess(fieldAccess, ctx) as J.FieldAccess;
+
+                        let result = await thisPropsFieldRule.tryOn(this.cursor, fa);
+                        if (result) return result;
+
+                        result = await thisPropsRule.tryOn(this.cursor, fa);
+                        if (result) return result;
+
+                        return fa;
+                    }
+                }();
+
+                return await replacer.visit(body, ctx) as J.Block;
+            }
+
+            private getIndent(space: any): string {
+                if (!space || typeof space.whitespace !== 'string') return '';
+                const ws = space.whitespace as string;
+                const lastNewline = ws.lastIndexOf('\n');
+                if (lastNewline === -1) return '';
+                return ws.substring(lastNewline + 1);
+            }
+
+            private adjustIndentation(body: J.Block, indentToRemove: string): J.Block {
+                if (!indentToRemove) return body;
+                return {
+                    ...body,
+                    statements: body.statements.map(stmt => ({
+                        ...stmt,
+                        element: stmt.element ? {
+                            ...stmt.element,
+                            prefix: this.removeIndent(stmt.element.prefix, indentToRemove)
+                        } : stmt.element
+                    })) as any,
+                    end: this.removeIndent(body.end, indentToRemove)
+                };
+            }
+
+            private removeIndent(space: any, indent: string): any {
+                if (!space || typeof space.whitespace !== 'string') return space;
+                const ws = space.whitespace as string;
+                const adjusted = ws.split('\n').map((line: string, i: number) => {
+                    if (i === 0) return line;
+                    if (line.startsWith(indent)) return line.substring(indent.length);
+                    return line;
+                }).join('\n');
+                return adjusted !== ws ? {...space, whitespace: adjusted} : space;
+            }
+        }();
+    }
+}

package/src/refactoring/create-class-to-es6.ts

@@ -0,0 +1,309 @@
+import {ExecutionContext, printer, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS, raw, template} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+const LIFECYCLE_METHODS = new Set([
+    'render',
+    'componentWillMount', 'UNSAFE_componentWillMount',
+    'componentDidMount', 'componentWillReceiveProps',
+    'UNSAFE_componentWillReceiveProps', 'shouldComponentUpdate',
+    'componentWillUpdate', 'UNSAFE_componentWillUpdate',
+    'getSnapshotBeforeUpdate', 'componentDidUpdate',
+    'componentDidCatch', 'componentWillUnmount',
+    'getDerivedStateFromProps', 'getDerivedStateFromError',
+]);
+
+const SEMICOLON_KIND = "org.openrewrite.java.marker.Semicolon";
+
+/**
+ * Converts `React.createClass()` to ES6 class syntax.
+ *
+ * Handles:
+ * - `getInitialState()` → class property `state = {...}`
+ * - `getDefaultProps()` → `static defaultProps = {...}`
+ * - Static properties (propTypes, contextTypes) → class statics
+ * - Auto-binding of methods → arrow function class fields
+ * - Lifecycle methods and render → regular class methods
+ * - Skips conversion if mixins are present
+ *
+ * @see https://github.com/reactjs/react-codemod#class
+ */
+export class CreateClassToES6 extends Recipe {
+    readonly name = "org.openrewrite.react.refactoring.create-class-to-es6";
+    readonly displayName: string = "Convert `createClass` to ES6 class";
+    readonly description: string = "Converts `React.createClass()` and `createReactClass()` calls to ES6 class syntax.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private convertedClassIds = new Set<string>();
+
+            private stripSemicolonFromConverted(statements: any[]): { modified: boolean, statements: any[] } {
+                let modified = false;
+                const newStatements = statements.map((stmt: any) => {
+                    if (stmt.element && this.convertedClassIds.has(stmt.element.id)) {
+                        const hasSemicolon = stmt.markers?.markers?.some(
+                            (m: any) => m.kind === SEMICOLON_KIND
+                        );
+                        if (hasSemicolon) {
+                            modified = true;
+                            return {
+                                ...stmt,
+                                markers: {
+                                    ...stmt.markers,
+                                    markers: stmt.markers.markers.filter(
+                                        (m: any) => m.kind !== SEMICOLON_KIND
+                                    )
+                                }
+                            };
+                        }
+                    }
+                    return stmt;
+                });
+                return { modified, statements: newStatements };
+            }
+
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                let c = await super.visitJsCompilationUnit(cu, ctx) as JS.CompilationUnit;
+                if (this.convertedClassIds.size === 0) return c;
+
+                const result = this.stripSemicolonFromConverted(c.statements as any);
+                return result.modified ? {...c, statements: result.statements} as any : c;
+            }
+
+            override async visitBlock(block: J.Block, ctx: ExecutionContext): Promise<J | undefined> {
+                let b = await super.visitBlock(block, ctx) as J.Block;
+                if (this.convertedClassIds.size === 0) return b;
+
+                const result = this.stripSemicolonFromConverted(b.statements as any);
+                return result.modified ? {...b, statements: result.statements} as any : b;
+            }
+
+            override async visitVariableDeclarations(varDecl: J.VariableDeclarations, ctx: ExecutionContext): Promise<J | undefined> {
+                let vd = await super.visitVariableDeclarations(varDecl, ctx) as J.VariableDeclarations;
+
+                if (!vd.variables || vd.variables.length !== 1) return vd;
+
+                const namedVar = vd.variables[0].element as J.VariableDeclarations.NamedVariable;
+                if (!namedVar.initializer) return vd;
+
+                const init = namedVar.initializer.element;
+                if (init.kind !== J.Kind.MethodInvocation) return vd;
+
+                const methodInv = init as J.MethodInvocation;
+                if (!this.isCreateClassCall(methodInv)) return vd;
+
+                const componentName = (namedVar.name as J.Identifier).simpleName;
+
+                // Get spec object (first argument)
+                const args = methodInv.arguments.elements;
+                if (args.length === 0) return vd;
+
+                const specArg = args[0].element;
+                if (specArg.kind !== J.Kind.NewClass) return vd;
+
+                const specObj = specArg as J.NewClass;
+                if (!specObj.body) return vd;
+
+                // Check for mixins — skip conversion if present
+                if (this.hasMixins(specObj.body)) return vd;
+
+                // Build transformed class members
+                const memberIndent = this.getMemberIndent(specObj.body);
+                const members = await this.transformMembers(specObj.body, memberIndent, ctx);
+
+                // Construct class declaration using template
+                const classDecl = await template`class ${raw(componentName)} extends React.Component {}`.apply(vd, this.cursor);
+                if (!classDecl) return vd;
+
+                // Splice transformed members into class body
+                const cd = classDecl as J.ClassDeclaration;
+                const result = {
+                    ...cd,
+                    body: {
+                        ...cd.body,
+                        statements: members
+                    }
+                } as any as J.ClassDeclaration;
+
+                // Track converted node ID so visitBlock can strip the trailing semicolon
+                this.convertedClassIds.add(result.id);
+
+                return result;
+            }
+
+            private isCreateClassCall(method: J.MethodInvocation): boolean {
+                if (method.name.simpleName === 'createClass' && method.select) {
+                    if (method.select.element.kind === J.Kind.Identifier) {
+                        return (method.select.element as J.Identifier).simpleName === 'React';
+                    }
+                }
+                if (method.name.simpleName === 'createReactClass' && !method.select) {
+                    return true;
+                }
+                return false;
+            }
+
+            private hasMixins(body: J.Block): boolean {
+                for (const stmt of body.statements) {
+                    const s = stmt.element;
+                    if (s.kind === JS.Kind.PropertyAssignment) {
+                        const prop = s as JS.PropertyAssignment;
+                        if (this.getPropertyKeyName(prop) === 'mixins') return true;
+                    }
+                }
+                return false;
+            }
+
+            private getPropertyKeyName(prop: JS.PropertyAssignment): string | undefined {
+                const keyExpr = prop.name.element;
+                if (keyExpr.kind === J.Kind.Identifier) {
+                    return (keyExpr as J.Identifier).simpleName;
+                }
+                return undefined;
+            }
+
+            private getMemberIndent(body: J.Block): any {
+                // Get the prefix of the first member to use as indentation reference
+                for (const stmt of body.statements) {
+                    if (stmt.element?.prefix) return stmt.element.prefix;
+                }
+                return undefined;
+            }
+
+            private async transformMembers(body: J.Block, memberIndent: any, ctx: ExecutionContext): Promise<any[]> {
+                const members: any[] = [];
+
+                for (const stmt of body.statements) {
+                    const s = stmt.element;
+
+                    if (s.kind === J.Kind.MethodDeclaration) {
+                        const method = s as J.MethodDeclaration;
+                        const name = method.name.simpleName;
+
+                        if (name === 'getInitialState') {
+                            const stateInit = await this.convertGetInitialState(method, memberIndent, ctx);
+                            if (stateInit) members.push({...stmt, element: stateInit});
+                        } else if (name === 'getDefaultProps') {
+                            const defaultProps = await this.convertGetDefaultProps(method, memberIndent, ctx);
+                            if (defaultProps) members.push({...stmt, element: defaultProps});
+                        } else if (LIFECYCLE_METHODS.has(name)) {
+                            members.push(stmt);
+                        } else {
+                            const arrowProp = await this.convertToArrowProperty(method, memberIndent, ctx);
+                            if (arrowProp) {
+                                members.push({...stmt, element: arrowProp});
+                            } else {
+                                members.push(stmt);
+                            }
+                        }
+                    } else if (s.kind === JS.Kind.PropertyAssignment) {
+                        const prop = s as JS.PropertyAssignment;
+                        const keyName = this.getPropertyKeyName(prop);
+
+                        if (keyName === 'propTypes' || keyName === 'contextTypes' || keyName === 'childContextTypes') {
+                            const staticProp = await this.convertToStaticProperty(prop, keyName, memberIndent, ctx);
+                            if (staticProp) {
+                                members.push({...stmt, element: staticProp});
+                            } else {
+                                members.push(stmt);
+                            }
+                        } else if (keyName === 'displayName' || keyName === 'statics' || keyName === 'mixins') {
+                            // Skip displayName (inferred from class name), statics, mixins
+                        } else {
+                            members.push(stmt);
+                        }
+                    }
+                }
+
+                return members;
+            }
+
+            private async convertGetInitialState(method: J.MethodDeclaration, indent: any, ctx: ExecutionContext): Promise<J | undefined> {
+                if (!method.body) return undefined;
+                const stmts = method.body.statements;
+                if (stmts.length !== 1) return undefined;
+
+                const firstStmt = stmts[0].element;
+                if (firstStmt.kind !== J.Kind.Return) return undefined;
+
+                const returnStmt = firstStmt as J.Return;
+                if (!returnStmt.expression) return undefined;
+
+                const result = await template`state = ${returnStmt.expression}`.apply(method, this.cursor);
+                if (result && indent) {
+                    return {...(result as any), prefix: indent};
+                }
+                return result;
+            }
+
+            private async convertGetDefaultProps(method: J.MethodDeclaration, indent: any, ctx: ExecutionContext): Promise<J | undefined> {
+                if (!method.body) return undefined;
+                const stmts = method.body.statements;
+                if (stmts.length !== 1) return undefined;
+
+                const firstStmt = stmts[0].element;
+                if (firstStmt.kind !== J.Kind.Return) return undefined;
+
+                const returnStmt = firstStmt as J.Return;
+                if (!returnStmt.expression) return undefined;
+
+                const result = await template`static defaultProps = ${returnStmt.expression}`.apply(method, this.cursor);
+                if (result && indent) {
+                    return {...(result as any), prefix: indent};
+                }
+                return result;
+            }
+
+            private async convertToArrowProperty(method: J.MethodDeclaration, indent: any, ctx: ExecutionContext): Promise<J | undefined> {
+                if (!method.body) return undefined;
+
+                const name = method.name.simpleName;
+
+                const params = method.parameters?.elements ?? [];
+                let paramsSource = '';
+                if (params.length > 0) {
+                    const paramStrs = await Promise.all(params.map(async (p: any) =>
+                        (await printer(this.cursor).print(p.element)).trim()
+                    ));
+                    paramsSource = paramStrs.join(', ');
+                }
+
+                // Create stub with empty body, then splice in original body to preserve whitespace
+                const stub = await template`${raw(name)} = (${raw(paramsSource)}) => {}`.apply(method, this.cursor);
+                if (!stub) return undefined;
+
+                // Navigate into the J.Assignment -> JS.ArrowFunction -> J.Lambda to replace the empty body
+                const s = stub as any;
+                const result = {
+                    ...s,
+                    assignment: {
+                        ...s.assignment,
+                        element: {
+                            ...s.assignment.element,
+                            lambda: {
+                                ...s.assignment.element.lambda,
+                                body: method.body
+                            }
+                        }
+                    }
+                };
+                if (result && indent) {
+                    return {...(result as any), prefix: indent};
+                }
+                return result;
+            }
+
+
+
+            private async convertToStaticProperty(prop: JS.PropertyAssignment, name: string, indent: any, ctx: ExecutionContext): Promise<J | undefined> {
+                if (!prop.initializer) return undefined;
+
+                const result = await template`static ${raw(name)} = ${prop.initializer}`.apply(prop, this.cursor);
+                if (result && indent) {
+                    return {...(result as any), prefix: indent};
+                }
+                return result;
+            }
+        }();
+    }
+}