@openrewrite/recipes-react 0.2.9

package/src/react19/no-implicit-ref-callback-return.ts

@@ -0,0 +1,123 @@
+import {emptyMarkers, ExecutionContext, markers, randomId, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS, JSX} from "@openrewrite/rewrite/javascript";
+import {Expression, J} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+const emptySpace = {kind: 'org.openrewrite.java.tree.Space' as const, whitespace: '', comments: []};
+const singleSpace = {kind: 'org.openrewrite.java.tree.Space' as const, whitespace: ' ', comments: []};
+
+/**
+ * Converts implicit returns in ref callbacks to block bodies.
+ *
+ * In React 19, ref callbacks can return a cleanup function.
+ * Arrow functions with expression bodies implicitly return a value,
+ * which React would incorrectly interpret as a cleanup function.
+ *
+ * Before:
+ * ```tsx
+ * <div ref={current => (instance = current)} />
+ * ```
+ *
+ * After:
+ * ```tsx
+ * <div ref={current => { instance = current; }} />
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#cleanup-functions-for-refs
+ */
+export class NoImplicitRefCallbackReturn extends Recipe {
+    readonly name = "org.openrewrite.react.19.no-implicit-ref-callback-return";
+    readonly displayName: string = "Remove implicit ref callback returns";
+    readonly description: string = "In React 19, ref callbacks can return cleanup functions. Arrow functions with expression bodies implicitly return values, which React would interpret as cleanup functions. This recipe wraps them in block bodies.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitJsxAttribute(attribute: JSX.Attribute, ctx: ExecutionContext): Promise<J | undefined> {
+                let attr = await super.visitJsxAttribute(attribute, ctx) as JSX.Attribute;
+
+                // Check if the attribute key is "ref"
+                if (attr.key.kind !== J.Kind.Identifier) {
+                    return attr;
+                }
+                if ((attr.key as J.Identifier).simpleName !== 'ref') {
+                    return attr;
+                }
+
+                if (!attr.value) {
+                    return attr;
+                }
+
+                const valueExpr = attr.value.element;
+
+                // The ref value is wrapped in JSX embedded expression: {expr}
+                if (valueExpr.kind !== JS.Kind.JsxEmbeddedExpression) {
+                    return attr;
+                }
+
+                const embedded = valueExpr as JSX.EmbeddedExpression;
+                const innerExpr = (embedded.expression as any).element ?? embedded.expression;
+
+                // Check if it's an arrow function
+                if (innerExpr.kind !== JS.Kind.ArrowFunction) {
+                    return attr;
+                }
+
+                const arrowFn = innerExpr as JS.ArrowFunction;
+                const lambda = arrowFn.lambda;
+
+                // Check if body is an expression (not a block)
+                if (!lambda.body || lambda.body.kind === J.Kind.Block) {
+                    return attr;
+                }
+
+                // The body is an expression — unwrap parentheses if present
+                let stmtExpr: Expression = lambda.body as any;
+                if (stmtExpr.kind === J.Kind.Parentheses) {
+                    stmtExpr = ((stmtExpr as J.Parentheses<Expression>).tree as any).element;
+                }
+
+                // Strip prefix from the expression since ExpressionStatement carries the space
+                stmtExpr = {...stmtExpr, prefix: emptySpace} as any;
+
+                const semicolonMarkers = markers({
+                    kind: J.Markers.Semicolon,
+                    id: randomId()
+                });
+
+                const exprStatement: JS.ExpressionStatement = {
+                    kind: JS.Kind.ExpressionStatement,
+                    id: randomId(),
+                    prefix: singleSpace,
+                    markers: emptyMarkers,
+                    expression: stmtExpr
+                };
+
+                const block: J.Block = {
+                    kind: J.Kind.Block,
+                    id: randomId(),
+                    prefix: lambda.body.prefix,
+                    markers: emptyMarkers,
+                    static: {
+                        kind: J.Kind.RightPadded,
+                        element: false,
+                        after: emptySpace,
+                        markers: emptyMarkers
+                    } as any,
+                    statements: [{
+                        kind: J.Kind.RightPadded,
+                        element: exprStatement,
+                        after: emptySpace,
+                        markers: semicolonMarkers
+                    } as any],
+                    end: singleSpace
+                };
+
+                return create(attr, draft => {
+                    const embeddedDraft = draft.value!.element as any;
+                    const innerDraft = embeddedDraft.expression.element ?? embeddedDraft.expression;
+                    innerDraft.lambda.body = block;
+                });
+            }
+        }();
+    }
+}

package/src/react19/remove-context-provider.ts

@@ -0,0 +1,87 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+import {JS, JSX} from "@openrewrite/rewrite/javascript";
+
+/**
+ * Removes `.Provider` from Context JSX elements.
+ *
+ * In React 19, `<Context.Provider>` is deprecated in favor of
+ * rendering `<Context>` directly as a provider.
+ *
+ * Before:
+ * ```tsx
+ * <ThemeContext.Provider value={theme}>
+ *   {children}
+ * </ThemeContext.Provider>
+ * ```
+ *
+ * After:
+ * ```tsx
+ * <ThemeContext value={theme}>
+ *   {children}
+ * </ThemeContext>
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#context-as-a-provider
+ */
+export class RemoveContextProvider extends Recipe {
+    readonly name = "org.openrewrite.react.19.remove-context-provider";
+    readonly displayName: string = "Remove `Context.Provider` wrapper";
+    readonly description: string = "In React 19, `<Context.Provider>` is deprecated. Render `<Context>` directly as a provider instead.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitJsxTag(tag: JSX.Tag, ctx: ExecutionContext): Promise<J | undefined> {
+                let t = await super.visitJsxTag(tag, ctx) as JSX.Tag;
+
+                const openName = t.openName.element;
+
+                // Check if the opening tag is a FieldAccess like Something.Provider
+                if (openName.kind !== J.Kind.FieldAccess) {
+                    return t;
+                }
+
+                const fieldAccess = openName as J.FieldAccess;
+                const propertyName = fieldAccess.name.element.simpleName;
+
+                if (propertyName !== 'Provider') {
+                    return t;
+                }
+
+                // Replace the FieldAccess with just the target (e.g., ThemeContext)
+                const target = fieldAccess.target as J.Identifier;
+                const newName: J.Identifier = {
+                    ...target,
+                    prefix: openName.prefix
+                };
+
+                // Update the opening tag name
+                const result = {
+                    ...t,
+                    openName: {
+                        ...t.openName,
+                        element: newName
+                    }
+                } as any;
+
+                // Also update the closing tag name if present (non-self-closing tags)
+                if (t.closingName) {
+                    const closingElement = t.closingName.element;
+                    if (closingElement.kind === J.Kind.FieldAccess) {
+                        const closingTarget = (closingElement as J.FieldAccess).target as J.Identifier;
+                        result.closingName = {
+                            ...t.closingName,
+                            element: {
+                                ...closingTarget,
+                                prefix: closingElement.prefix
+                            }
+                        };
+                    }
+                }
+
+                return result as JSX.Tag;
+            }
+        }();
+    }
+}

package/src/react19/remove-forward-ref.ts

@@ -0,0 +1,69 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {
+    capture,
+    fromRecipe,
+    JavaScriptVisitor,
+    maybeRemoveImport,
+    pattern,
+    rewrite,
+    template
+} from "@openrewrite/rewrite/javascript";
+import {Expression, J} from "@openrewrite/rewrite/java";
+import {SimplifyObjectPatternProperty} from "../simplify-object-pattern-property";
+
+export class RemoveForwardRef extends Recipe {
+    readonly name = "org.openrewrite.react.19.remove-forward-ref";
+    readonly displayName: string = "Remove `React.forwardRef` wrapper";
+    readonly description: string = "`React.forwardRef` is deprecated for Function Components in React 19. This recipe removes the `forwardRef` wrapper and converts ref to a regular prop.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        // Pattern: forwardRef((props, ref) => body)
+        const reactOptions = {
+            context: ['import { forwardRef } from "react";'],
+            dependencies: {'@types/react': '^19.0.0'}
+        };
+        const {props, ref, body, name, refType, propsType} = {
+            props: capture<Expression>({variadic: true}),
+            ref: capture(),
+            body: capture({variadic: true}),
+            name: capture(),
+            refType: capture(),
+            propsType: capture()
+        };
+
+        const rule =
+            // Handle forwardRef with type parameters: forwardRef<Ref, Props>((props, ref) => body)
+            // Note: This creates a typed arrow function with ref as part of props
+            rewrite(() => ({
+                before: pattern`forwardRef<${refType}, ${propsType}>((${props}, ${ref}) => ${body})`.configure(reactOptions),
+                after: template`({ ref: ${ref}, ...${props} }: ${propsType} & { ref?: React.Ref<${refType}> }) => ${body}`
+            })).orElse(rewrite(() => ({
+                before: pattern`forwardRef((${props}, ${ref}) => ${body})`.configure(reactOptions),
+                after: template`({ ref: ${ref}, ...${props} }) => ${body}`
+            }))).orElse(rewrite(() => ({
+                before: pattern`forwardRef(function ${name}({${props}}, ${ref}) {${body}})`.configure(reactOptions),
+                after: template`function ${name}({ ref: ${ref}, ${props} }) {${body}}`
+            }))).orElse(rewrite(() => ({
+                before: pattern`forwardRef(function ${name}(${props}, ${ref}) {${body}})`.configure(reactOptions),
+                after: template`function ${name}({ ref: ${ref}, ...${props} }) {${body}}`
+            })));
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, p);
+
+                let result = await rule
+                    .andThen(fromRecipe(new SimplifyObjectPatternProperty(), p))
+                    .tryOn(this.cursor, m!);
+                if (result) {
+                    maybeRemoveImport(this, "react", "default");
+                    maybeRemoveImport(this, "react", "forwardRef");
+
+                    return result;
+                }
+
+                return m;
+            }
+        }();
+    }
+}

package/src/react19/remove-prop-types.ts

@@ -0,0 +1,86 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+/**
+ * Removes `Component.propTypes` assignments.
+ *
+ * In React 19, PropTypes are silently ignored at runtime.
+ * This recipe removes the `propTypes` assignments to clean up code.
+ *
+ * Before:
+ * ```tsx
+ * import PropTypes from 'prop-types';
+ *
+ * function Greeting({name}) {
+ *     return <div>Hello {name}</div>;
+ * }
+ * Greeting.propTypes = {
+ *     name: PropTypes.string.isRequired
+ * };
+ * ```
+ *
+ * After:
+ * ```tsx
+ * function Greeting({name}) {
+ *     return <div>Hello {name}</div>;
+ * }
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes
+ */
+export class RemovePropTypes extends Recipe {
+    readonly name = "org.openrewrite.react.19.remove-prop-types";
+    readonly displayName: string = "Remove `propTypes` assignments";
+    readonly description: string = "Removes `Component.propTypes = {...}` assignments. PropTypes are silently ignored in React 19.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                let result = await super.visitJsCompilationUnit(cu, ctx) as JS.CompilationUnit;
+
+                // Find and remove propTypes assignment statements
+                const statementsToRemove = new Set<string>();
+
+                for (const stmt of result.statements) {
+                    const s = stmt.element;
+                    if (!s) continue;
+
+                    let assignment: J.Assignment | undefined;
+
+                    if (s.kind === JS.Kind.ExpressionStatement) {
+                        const exprStmt = s as JS.ExpressionStatement;
+                        const expr = exprStmt.expression;
+                        if (expr.kind === J.Kind.Assignment) {
+                            assignment = expr as J.Assignment;
+                        }
+                    } else if (s.kind === J.Kind.Assignment) {
+                        assignment = s as J.Assignment;
+                    }
+
+                    if (!assignment) continue;
+
+                    // Check for Component.propTypes = { ... }
+                    if (assignment.variable.kind !== J.Kind.FieldAccess) continue;
+                    const fa = assignment.variable as J.FieldAccess;
+                    if (fa.name.element.simpleName !== 'propTypes') continue;
+                    if (!isIdentifier(fa.target)) continue;
+
+                    statementsToRemove.add((s as any).id);
+                }
+
+                if (statementsToRemove.size === 0) return result;
+
+                const filteredStatements = result.statements.filter(stmt => {
+                    const s = stmt.element;
+                    return !s || !statementsToRemove.has((s as any).id);
+                });
+
+                return create(result, draft => {
+                    draft.statements = filteredStatements as any;
+                });
+            }
+        }();
+    }
+}

package/src/react19/remove-react-fc.ts

@@ -0,0 +1,247 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {
+    capture,
+    JavaScriptVisitor,
+    pattern,
+    rewrite,
+    template,
+    maybeRemoveImport
+} from "@openrewrite/rewrite/javascript";
+import {Expression, J, singleSpace, emptySpace} from "@openrewrite/rewrite/java";
+import {JS} from "@openrewrite/rewrite/javascript";
+
+/**
+ * Removes React.FC and FC type annotations from functional components.
+ *
+ * React.FC (FunctionComponent) was historically used to type React components,
+ * but it has several drawbacks:
+ * - It implicitly types children, which can mask errors
+ * - It makes generic components harder to type
+ * - It's no longer recommended by the React TypeScript community
+ *
+ * This recipe transforms:
+ * - `const App: React.FC<Props> = (props) => ...` to `const App = (props: Props) => ...`
+ * - `const App: FC<Props> = ({ name }) => ...` to `const App = ({ name }: Props) => ...`
+ * - `const App: React.FC = () => ...` to `const App = () => ...`
+ */
+export class RemoveReactFC extends Recipe {
+    readonly name = "org.openrewrite.react.19.remove-react-fc";
+    readonly displayName: string = "Remove `React.FC` type annotation";
+    readonly description: string = "Removes `React.FC` and `FC` type annotations from functional components, moving the props type to the function parameter instead.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const reactOptions = {
+            context: ['import { FC } from "react";'],
+            dependencies: {'@types/react': '^18.0.0'}
+        };
+
+        const {props, body, propsType} = {
+            props: capture<Expression>({variadic: true}),
+            body: capture({variadic: true}),
+            propsType: capture()
+        };
+
+        // Pattern: FC<Props>((props) => body) - matches the type annotation + arrow function
+        // This targets the initializer expression where the FC type wraps the arrow function
+        const ruleWithPropsType = rewrite(() => ({
+            before: pattern`FC<${propsType}>((${props}) => ${body})`.configure(reactOptions),
+            after: template`(${props}: ${propsType}) => ${body}`
+        }));
+
+        // Pattern without type argument: FC(() => body)
+        const ruleWithoutPropsType = rewrite(() => ({
+            before: pattern`FC(() => ${body})`.configure(reactOptions),
+            after: template`() => ${body}`
+        }));
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitVariableDeclarations(varDecl: J.VariableDeclarations, ctx: ExecutionContext): Promise<J | undefined> {
+                let v = await super.visitVariableDeclarations(varDecl, ctx) as J.VariableDeclarations;
+
+                // Check if there's a type expression that could be FC or React.FC
+                if (!v.typeExpression) {
+                    return v;
+                }
+
+                // Check if type is wrapped in JS.TypeInfo
+                const typeExpr = v.typeExpression;
+                if (typeExpr.kind !== JS.Kind.TypeInfo) {
+                    return v;
+                }
+
+                const typeInfo = typeExpr as JS.TypeInfo;
+                const isFCType = this.isFunctionalComponentType(typeInfo.typeIdentifier);
+
+                if (!isFCType) {
+                    return v;
+                }
+
+                // Get the props type argument if present
+                const propsTypeArg = this.getPropsTypeArgument(typeInfo.typeIdentifier);
+
+                // Get the initializer (should be an arrow function)
+                if (v.variables.length !== 1) {
+                    return v;
+                }
+
+                const namedVar = v.variables[0].element;
+                if (!namedVar.initializer) {
+                    return v;
+                }
+
+                const initializer = namedVar.initializer.element;
+
+                // Check if initializer is an arrow function
+                if (initializer.kind !== JS.Kind.ArrowFunction) {
+                    return v;
+                }
+
+                const arrowFn = initializer as JS.ArrowFunction;
+
+                // Modify the arrow function to add props type to the first parameter
+                const modifiedArrowFn = propsTypeArg
+                    ? this.addPropsTypeToArrowFunction(arrowFn, propsTypeArg)
+                    : arrowFn;
+
+                // Remove the type expression and update the initializer
+                maybeRemoveImport(this, "react", "FC");
+                maybeRemoveImport(this, "react", "FunctionComponent");
+
+                const updatedVarDecl: J.VariableDeclarations = {
+                    ...v,
+                    typeExpression: undefined,
+                    variables: [{
+                        ...v.variables[0],
+                        element: {
+                            ...namedVar,
+                            initializer: {
+                                ...namedVar.initializer,
+                                element: modifiedArrowFn
+                            }
+                        }
+                    }]
+                };
+
+                return updatedVarDecl;
+            }
+
+            /**
+             * Check if the type identifier is FC, React.FC, FunctionComponent, or React.FunctionComponent
+             */
+            private isFunctionalComponentType(typeIdentifier: any): boolean {
+                // Handle ParameterizedType: FC<Props>
+                if (typeIdentifier.kind === J.Kind.ParameterizedType) {
+                    const paramType = typeIdentifier as J.ParameterizedType;
+                    return this.isFCIdentifier(paramType.class);
+                }
+
+                // Handle bare FC (no type argument)
+                return this.isFCIdentifier(typeIdentifier);
+            }
+
+            /**
+             * Check if an expression is FC, React.FC, FunctionComponent, or React.FunctionComponent
+             */
+            private isFCIdentifier(expr: any): boolean {
+                // Direct identifier: FC or FunctionComponent
+                if (expr.kind === J.Kind.Identifier) {
+                    const name = (expr as J.Identifier).simpleName;
+                    return name === 'FC' || name === 'FunctionComponent';
+                }
+
+                // FieldAccess: React.FC or React.FunctionComponent
+                if (expr.kind === J.Kind.FieldAccess) {
+                    const fieldAccess = expr as J.FieldAccess;
+                    const fieldName = fieldAccess.name.element.simpleName;
+
+                    if (fieldName !== 'FC' && fieldName !== 'FunctionComponent') {
+                        return false;
+                    }
+
+                    // Check if target is React
+                    if (fieldAccess.target.kind === J.Kind.Identifier) {
+                        return (fieldAccess.target as J.Identifier).simpleName === 'React';
+                    }
+                }
+
+                return false;
+            }
+
+            /**
+             * Extract the props type from FC<Props> or React.FC<Props>
+             */
+            private getPropsTypeArgument(typeIdentifier: any): Expression | undefined {
+                if (typeIdentifier.kind === J.Kind.ParameterizedType) {
+                    const paramType = typeIdentifier as J.ParameterizedType;
+                    if (paramType.typeParameters && paramType.typeParameters.elements.length > 0) {
+                        return paramType.typeParameters.elements[0].element;
+                    }
+                }
+                return undefined;
+            }
+
+            /**
+             * Add props type annotation to the first parameter of an arrow function
+             */
+            private addPropsTypeToArrowFunction(arrowFn: JS.ArrowFunction, propsType: Expression): JS.ArrowFunction {
+                const lambda = arrowFn.lambda;
+
+                // If no parameters, nothing to type
+                if (!lambda.parameters || lambda.parameters.parameters.length === 0) {
+                    return arrowFn;
+                }
+
+                const params = lambda.parameters.parameters;
+                const firstParam = params[0].element;
+
+                // Add type annotation to the first parameter
+                if (firstParam.kind === J.Kind.VariableDeclarations) {
+                    const varDecl = firstParam as J.VariableDeclarations;
+
+                    // If it already has a type, don't override
+                    if (varDecl.typeExpression) {
+                        return arrowFn;
+                    }
+
+                    // Wrap the props type in a TypeInfo node
+                    // The TypeInfo prefix comes BEFORE the colon in rendering
+                    // The typeIdentifier prefix comes AFTER the colon
+                    const typeInfo: JS.TypeInfo = {
+                        kind: JS.Kind.TypeInfo,
+                        id: propsType.id,
+                        prefix: emptySpace,  // No space before the colon
+                        markers: propsType.markers,
+                        typeIdentifier: {
+                            ...propsType,
+                            prefix: singleSpace  // Space after the colon (: Props)
+                        }
+                    };
+
+                    const updatedVarDecl: J.VariableDeclarations = {
+                        ...varDecl,
+                        typeExpression: typeInfo
+                    };
+
+                    return {
+                        ...arrowFn,
+                        lambda: {
+                            ...lambda,
+                            parameters: {
+                                ...lambda.parameters,
+                                parameters: [
+                                    {
+                                        ...params[0],
+                                        element: updatedVarDecl
+                                    },
+                                    ...params.slice(1)
+                                ]
+                            }
+                        }
+                    };
+                }
+
+                return arrowFn;
+            }
+        }();
+    }
+}

package/src/react19/replace-act-import.ts

@@ -0,0 +1,36 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {ChangeImport} from "@openrewrite/rewrite/javascript";
+
+/**
+ * Migrates `act` imports from `react-dom/test-utils` to `react`.
+ *
+ * In React 19, the `act` function has been moved from `react-dom/test-utils`
+ * to `react` itself. This recipe automatically updates imports.
+ *
+ * Before:
+ * ```tsx
+ * import { act } from 'react-dom/test-utils';
+ * ```
+ *
+ * After:
+ * ```tsx
+ * import { act } from 'react';
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-dom-test-utils
+ */
+export class ReplaceActImport extends Recipe {
+    readonly name = "org.openrewrite.react.19.replace-act-import";
+    readonly displayName: string = "Replace `act` import from react-dom/test-utils";
+    readonly description: string = "In React 19, `act` has been moved from `react-dom/test-utils` to `react`. This recipe updates the import statement.";
+
+    private changeImport = new ChangeImport({
+        oldModule: "react-dom/test-utils",
+        oldMember: "act",
+        newModule: "react"
+    });
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return this.changeImport.editor();
+    }
+}