@openrewrite/recipes-react 0.2.9

package/src/react-native/view-prop-types.ts

@@ -0,0 +1,63 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, maybeAddImport, maybeRemoveImport} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+/**
+ * Replaces `View.propTypes` with `ViewPropTypes` from the `deprecated-react-native-prop-types` package.
+ *
+ * React Native removed `View.propTypes` in newer versions. This recipe
+ * replaces references to `View.propTypes` with the `ViewPropTypes` export.
+ *
+ * Before:
+ * ```tsx
+ * import { View } from 'react-native';
+ * const styles = View.propTypes;
+ * ```
+ *
+ * After:
+ * ```tsx
+ * import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+ * const styles = ViewPropTypes;
+ * ```
+ *
+ * @see https://github.com/reactjs/react-codemod#reactnative-view-proptypes
+ */
+export class ViewPropTypes extends Recipe {
+    readonly name = "org.openrewrite.react.native.view-prop-types";
+    readonly displayName: string = "Replace `View.propTypes` with `ViewPropTypes`";
+    readonly description: string = "Migrates deprecated `View.propTypes` references to `ViewPropTypes` from `deprecated-react-native-prop-types`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private transformed = false;
+
+            override async visitJsCompilationUnit(cu: any, ctx: ExecutionContext): Promise<J | undefined> {
+                this.transformed = false;
+                let result = await super.visitJsCompilationUnit(cu, ctx);
+                if (this.transformed) {
+                    maybeAddImport(this, {module: "deprecated-react-native-prop-types", member: "ViewPropTypes", onlyIfReferenced: false});
+                    maybeRemoveImport(this, "react-native", "View");
+                }
+                return result;
+            }
+
+            override async visitFieldAccess(fieldAccess: J.FieldAccess, ctx: ExecutionContext): Promise<J | undefined> {
+                let fa = await super.visitFieldAccess(fieldAccess, ctx) as J.FieldAccess;
+
+                // Match View.propTypes
+                if (fa.target.kind !== J.Kind.Identifier) return fa;
+                if ((fa.target as J.Identifier).simpleName !== 'View') return fa;
+                if (fa.name.element.simpleName !== 'propTypes') return fa;
+
+                this.transformed = true;
+
+                // Replace View.propTypes with just ViewPropTypes
+                return {
+                    ...fa.target,
+                    simpleName: 'ViewPropTypes',
+                    prefix: fa.prefix
+                } as J.Identifier;
+            }
+        }();
+    }
+}

package/src/react16/error-boundaries.ts

@@ -0,0 +1,46 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+/**
+ * Renames `unstable_handleError` to `componentDidCatch`.
+ *
+ * React 16 introduced error boundaries with a stable API. This recipe
+ * renames the unstable API to the official one.
+ *
+ * Before:
+ * ```tsx
+ * class ErrorBoundary extends React.Component {
+ *   unstable_handleError(error) { ... }
+ * }
+ * ```
+ *
+ * After:
+ * ```tsx
+ * class ErrorBoundary extends React.Component {
+ *   componentDidCatch(error) { ... }
+ * }
+ * ```
+ */
+export class ErrorBoundaries extends Recipe {
+    readonly name = "org.openrewrite.react.16.error-boundaries";
+    readonly displayName: string = "Rename `unstable_handleError` to `componentDidCatch`";
+    readonly description: string = "Renames the unstable error boundary method to the official `componentDidCatch` API introduced in React 16.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitIdentifier(ident: J.Identifier, ctx: ExecutionContext): Promise<J | undefined> {
+                let id = await super.visitIdentifier(ident, ctx) as J.Identifier;
+
+                if (id.simpleName === 'unstable_handleError') {
+                    return {
+                        ...id,
+                        simpleName: 'componentDidCatch'
+                    } as J.Identifier;
+                }
+
+                return id;
+            }
+        }();
+    }
+}

package/src/react16/find-dom-node.ts

@@ -0,0 +1,55 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {
+    capture,
+    JavaScriptVisitor,
+    pattern,
+    rewrite,
+    template
+} from "@openrewrite/rewrite/javascript";
+import {Expression, J} from "@openrewrite/rewrite/java";
+
+/**
+ * Replaces `this.getDOMNode()` with `React.findDOMNode(this)`.
+ *
+ * In React 0.13+, `getDOMNode()` on component instances was deprecated
+ * in favor of `React.findDOMNode()`.
+ *
+ * Before:
+ * ```tsx
+ * this.getDOMNode()
+ * this.refs.myRef.getDOMNode()
+ * ```
+ *
+ * After:
+ * ```tsx
+ * React.findDOMNode(this)
+ * React.findDOMNode(this.refs.myRef)
+ * ```
+ */
+export class FindDomNode extends Recipe {
+    readonly name = "org.openrewrite.react.16.find-dom-node";
+    readonly displayName: string = "Replace `getDOMNode()` with `React.findDOMNode()`";
+    readonly description: string = "Migrates deprecated `getDOMNode()` calls to `React.findDOMNode()`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const target = capture<Expression>();
+
+        const rule = rewrite(() => ({
+            before: pattern`${target}.getDOMNode()`,
+            after: template`React.findDOMNode(${target})`
+        }));
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+
+                const result = await rule.tryOn(this.cursor, m!);
+                if (result) {
+                    return result;
+                }
+
+                return m;
+            }
+        }();
+    }
+}

package/src/react16/react-dom-factories.ts

@@ -0,0 +1,99 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {
+    capture,
+    JavaScriptVisitor,
+    pattern,
+    rewrite,
+    template
+} from "@openrewrite/rewrite/javascript";
+import {Expression, J} from "@openrewrite/rewrite/java";
+
+/**
+ * Converts `React.DOM.xxx()` factory calls to `React.createElement('xxx', ...)`.
+ *
+ * React.DOM factories were deprecated in React 15.6 and removed in React 16.
+ *
+ * Before:
+ * ```tsx
+ * React.DOM.div({ className: 'foo' }, 'Hello')
+ * ```
+ *
+ * After:
+ * ```tsx
+ * React.createElement('div', { className: 'foo' }, 'Hello')
+ * ```
+ */
+export class ReactDomFactories extends Recipe {
+    readonly name = "org.openrewrite.react.16.react-dom-factories";
+    readonly displayName: string = "Replace `React.DOM` factories with `createElement`";
+    readonly description: string = "Converts deprecated `React.DOM.xxx()` factory calls to `React.createElement('xxx', ...)`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+
+                // Match React.DOM.xxx() pattern
+                if (!m.select) return m;
+                const select = (m.select as any).element ?? m.select;
+                if (select.kind !== J.Kind.FieldAccess) return m;
+
+                const domAccess = select as J.FieldAccess;
+                if (domAccess.name.element.simpleName !== 'DOM') return m;
+                if (domAccess.target.kind !== J.Kind.Identifier) return m;
+                if ((domAccess.target as J.Identifier).simpleName !== 'React') return m;
+
+                // Get the element name (e.g., 'div', 'span')
+                const elementName = m.name.simpleName;
+
+                // Build React.createElement('elementName', ...args)
+                // Replace the select from React.DOM to React
+                // Replace the method name from 'div' to 'createElement'
+                // Prepend the element name as a string literal to the arguments
+                const elementLiteral: J.Literal = {
+                    kind: J.Kind.Literal,
+                    id: m.name.id,
+                    prefix: m.arguments.elements[0]?.element?.prefix ?? {whitespace: '', comments: []},
+                    markers: m.name.markers,
+                    value: elementName,
+                    valueSource: `'${elementName}'`
+                };
+
+                // Add a space prefix to the original first arg so it follows the comma naturally
+                const originalElements = m.arguments.elements.map((el: any, i: number) => {
+                    if (i === 0 && el.element) {
+                        return {
+                            ...el,
+                            element: {
+                                ...el.element,
+                                prefix: {whitespace: ' ', comments: []}
+                            }
+                        };
+                    }
+                    return el;
+                });
+
+                const newArgs = [
+                    {element: elementLiteral, after: {whitespace: '', comments: []}},
+                    ...originalElements
+                ];
+
+                return {
+                    ...m,
+                    select: {
+                        ...(m.select as any),
+                        element: domAccess.target
+                    },
+                    name: {
+                        ...m.name,
+                        simpleName: 'createElement'
+                    },
+                    arguments: {
+                        ...m.arguments,
+                        elements: newArgs
+                    }
+                } as any as J.MethodInvocation;
+            }
+        }();
+    }
+}

package/src/react16/react-prop-types.ts

@@ -0,0 +1,71 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, maybeAddImport, maybeRemoveImport} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+/**
+ * Moves `React.PropTypes` to the separate `prop-types` package.
+ *
+ * Starting with React 15.5, PropTypes was extracted into its own package.
+ *
+ * Before:
+ * ```tsx
+ * import React from 'react';
+ * MyComponent.propTypes = {
+ *   name: React.PropTypes.string
+ * };
+ * ```
+ *
+ * After:
+ * ```tsx
+ * import React from 'react';
+ * import PropTypes from 'prop-types';
+ * MyComponent.propTypes = {
+ *   name: PropTypes.string
+ * };
+ * ```
+ */
+export class ReactPropTypes extends Recipe {
+    readonly name = "org.openrewrite.react.16.react-prop-types";
+    readonly displayName: string = "Move `React.PropTypes` to `prop-types` package";
+    readonly description: string = "Extracts PropTypes usage from the React namespace to the separate `prop-types` package introduced in React 15.5.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private transformed = false;
+
+            override async visitFieldAccess(fieldAccess: J.FieldAccess, ctx: ExecutionContext): Promise<J | undefined> {
+                let fa = await super.visitFieldAccess(fieldAccess, ctx) as J.FieldAccess;
+
+                // Match React.PropTypes
+                if (fa.target.kind !== J.Kind.Identifier) {
+                    return fa;
+                }
+                const target = fa.target as J.Identifier;
+                if (target.simpleName !== 'React') {
+                    return fa;
+                }
+                if (fa.name.element.simpleName !== 'PropTypes') {
+                    return fa;
+                }
+
+                this.transformed = true;
+
+                // Replace React.PropTypes with just PropTypes
+                return {
+                    ...fa.name.element,
+                    prefix: fa.prefix
+                } as J.Identifier;
+            }
+
+            override async visitJsCompilationUnit(cu: any, ctx: ExecutionContext): Promise<J | undefined> {
+                this.transformed = false;
+                let result = await super.visitJsCompilationUnit(cu, ctx);
+                if (this.transformed) {
+                    maybeAddImport(this, {module: "prop-types", member: "default", alias: "PropTypes", onlyIfReferenced: false});
+                    maybeRemoveImport(this, "react", "PropTypes");
+                }
+                return result;
+            }
+        }();
+    }
+}

package/src/react16/react-to-react-dom.ts

@@ -0,0 +1,104 @@
+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";
+
+const DOM_METHODS = new Set([
+    'render',
+    'findDOMNode',
+    'unmountComponentAtNode',
+    'unstable_batchedUpdates',
+    'unstable_renderSubtreeIntoContainer',
+]);
+
+/**
+ * Splits `React.render()` and other DOM methods to `ReactDOM`.
+ *
+ * In React 0.14+, DOM-specific methods were moved to the `react-dom` package.
+ *
+ * Before:
+ * ```tsx
+ * import React from 'react';
+ * React.render(<App />, document.getElementById('root'));
+ * ```
+ *
+ * After:
+ * ```tsx
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * ReactDOM.render(<App />, document.getElementById('root'));
+ * ```
+ */
+export class ReactToReactDom extends Recipe {
+    readonly name = "org.openrewrite.react.16.react-to-react-dom";
+    readonly displayName: string = "Split `React` DOM methods to `ReactDOM`";
+    readonly description: string = "Moves DOM-specific methods like `React.render()` and `React.findDOMNode()` to `ReactDOM` from the `react-dom` package.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private needsReactDOM = false;
+
+            override async visitJsCompilationUnit(cu: any, ctx: ExecutionContext): Promise<J | undefined> {
+                this.needsReactDOM = false;
+                let result = await super.visitJsCompilationUnit(cu, ctx);
+                if (this.needsReactDOM) {
+                    maybeAddImport(this, {module: "react-dom", member: "default", alias: "ReactDOM", onlyIfReferenced: false});
+                }
+                return result;
+            }
+
+            override async visitFieldAccess(fieldAccess: J.FieldAccess, ctx: ExecutionContext): Promise<J | undefined> {
+                let fa = await super.visitFieldAccess(fieldAccess, ctx) as J.FieldAccess;
+
+                if (fa.target.kind !== J.Kind.Identifier) {
+                    return fa;
+                }
+                const target = fa.target as J.Identifier;
+                if (target.simpleName !== 'React') {
+                    return fa;
+                }
+
+                const methodName = fa.name.element.simpleName;
+                if (!DOM_METHODS.has(methodName)) {
+                    return fa;
+                }
+
+                this.needsReactDOM = true;
+
+                // Replace React with ReactDOM
+                return {
+                    ...fa,
+                    target: {
+                        ...target,
+                        simpleName: 'ReactDOM'
+                    } as J.Identifier
+                } as any as J.FieldAccess;
+            }
+
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+
+                if (!m.select) return m;
+                const select = (m.select as any).element ?? m.select;
+                if (select.kind !== J.Kind.Identifier) return m;
+                if ((select as J.Identifier).simpleName !== 'React') return m;
+
+                const methodName = m.name.simpleName;
+                if (!DOM_METHODS.has(methodName)) return m;
+
+                this.needsReactDOM = true;
+
+                return {
+                    ...m,
+                    select: {
+                        ...(m.select as any),
+                        element: {
+                            ...select,
+                            simpleName: 'ReactDOM'
+                        }
+                    }
+                } as any as J.MethodInvocation;
+            }
+        }();
+    }
+}

package/src/react16/replace-create-factory.ts

@@ -0,0 +1,96 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+/**
+ * Replaces `React.createFactory(type)(props, children)` with
+ * `React.createElement(type, props, children)`.
+ *
+ * `React.createFactory` was deprecated in React 15.6 and removed in React 16.
+ * This recipe handles the case where the factory is immediately invoked inline
+ * (chained call), transforming it into the equivalent `createElement` call.
+ *
+ * Before:
+ * ```tsx
+ * const el = React.createFactory('div')({className: 'foo'}, 'Hello');
+ * ```
+ *
+ * After:
+ * ```tsx
+ * const el = React.createElement('div', {className: 'foo'}, 'Hello');
+ * ```
+ */
+export class ReplaceCreateFactory extends Recipe {
+    readonly name = "org.openrewrite.react.16.replace-create-factory";
+    readonly displayName: string = "Replace `React.createFactory` with `React.createElement`";
+    readonly description: string = "Replaces `React.createFactory(type)(props, children)` with `React.createElement(type, props, children)`. React.createFactory was deprecated in React 15.6 and removed in React 16.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitFunctionCall(functionCall: JS.FunctionCall, p: ExecutionContext): Promise<J | undefined> {
+                let fc = await super.visitFunctionCall(functionCall, p) as JS.FunctionCall;
+
+                // The function field is a RightPadded wrapping the callee expression
+                if (!fc.function) return fc;
+                const callee = (fc.function as any).element ?? fc.function;
+
+                // Check if the callee is a MethodInvocation (React.createFactory(...))
+                if (callee.kind !== J.Kind.MethodInvocation) return fc;
+                const innerCall = callee as J.MethodInvocation;
+
+                // Check if inner call is createFactory
+                if (innerCall.name.simpleName !== 'createFactory') return fc;
+
+                // Require a select (React.createFactory, not bare createFactory)
+                if (!innerCall.select) return fc;
+
+                // Get the type argument from createFactory(type)
+                const innerArgs = innerCall.arguments?.elements;
+                if (!innerArgs || innerArgs.length !== 1) return fc;
+
+                const typeArg = innerArgs[0];
+
+                // Build new argument list: prepend typeArg to outer args
+                // Filter out J.Empty placeholders from outer args
+                const outerArgs = fc.arguments.elements.filter((el: any) => {
+                    const element = el.element ?? el;
+                    return element.kind !== J.Kind.Empty;
+                });
+
+                // Add a space prefix to the original first outer arg so it follows the comma naturally
+                const newOuterArgs = outerArgs.map((el: any, i: number) => {
+                    if (i === 0 && el.element) {
+                        return {
+                            ...el,
+                            element: {
+                                ...el.element,
+                                prefix: {whitespace: ' ', comments: []}
+                            }
+                        };
+                    }
+                    return el;
+                });
+
+                const newArgs = outerArgs.length > 0
+                    ? [typeArg, ...newOuterArgs]
+                    : [typeArg];
+
+                // Build a MethodInvocation: React.createElement(type, props, children)
+                // Preserve the prefix from the outer FunctionCall node
+                return {
+                    ...innerCall,
+                    prefix: (fc as any).prefix,
+                    select: innerCall.select,
+                    name: {
+                        ...innerCall.name,
+                        simpleName: 'createElement'
+                    },
+                    arguments: {
+                        ...fc.arguments,
+                        elements: newArgs
+                    }
+                } as any as J.MethodInvocation;
+            }
+        }();
+    }
+}

package/src/react16/upgrade-to-react-16.ts

@@ -0,0 +1,37 @@
+import {Recipe} from "@openrewrite/rewrite";
+import {ErrorBoundaries} from "./error-boundaries";
+import {FindDomNode} from "./find-dom-node";
+import {ReactPropTypes} from "./react-prop-types";
+import {ReactDomFactories} from "./react-dom-factories";
+import {ReactToReactDom} from "./react-to-react-dom";
+import {ReplaceCreateFactory} from "./replace-create-factory";
+
+/**
+ * Composite recipe that applies all React 16 migration recipes.
+ *
+ * Changes include:
+ * - Move `React.PropTypes` to `prop-types` package
+ * - Replace `React.DOM` factories with `createElement`
+ * - Split `React` DOM methods to `ReactDOM`
+ * - Replace `getDOMNode()` with `React.findDOMNode()`
+ * - Rename `unstable_handleError` to `componentDidCatch`
+ * - Replace `React.createFactory` with `React.createElement`
+ *
+ * @see https://reactjs.org/blog/2017/09/26/react-v16.0.html
+ */
+export class UpgradeToReact16 extends Recipe {
+    readonly name = "org.openrewrite.react.migrate.upgrade-to-react-16";
+    readonly displayName = "Upgrade to React 16";
+    readonly description = "Migrate deprecated APIs for React 16 compatibility. Includes PropTypes extraction, ReactDOM split, DOM factory replacement, createFactory replacement, and error boundary API updates.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            new ReactPropTypes(),
+            new ReactDomFactories(),
+            new ReactToReactDom(),
+            new FindDomNode(),
+            new ErrorBoundaries(),
+            new ReplaceCreateFactory(),
+        ];
+    }
+}