@openrewrite/recipes-react 0.2.9

package/src/search/find-react-component.ts

@@ -0,0 +1,254 @@
+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 FindReactComponentRow {
+    @Column({displayName: "Component name", description: "The name of the React component"})
+    componentName!: string;
+
+    @Column({displayName: "File path", description: "The file path where the component is used"})
+    filePath!: string;
+
+    @Column({displayName: "Usage type", description: "How the component is referenced: import, jsx-element, or export"})
+    usageType!: string;
+
+    @Column({displayName: "Import path", description: "The module path the component is imported from"})
+    importPath!: string;
+
+    @Column({displayName: "Is default import", description: "Whether the component is imported as a default export"})
+    isDefaultImport!: boolean;
+
+    @Column({displayName: "Alias name", description: "Local alias name if the component is imported with a different name"})
+    aliasName!: string;
+}
+
+/**
+ * Finds usages of a specific React component across source files.
+ *
+ * Detects:
+ * - Named imports: `import { Button } from 'lib'`
+ * - Default imports: `import Button from 'lib'`
+ * - Aliased imports: `import { Button as Btn } from 'lib'`
+ * - Namespace access: `<Lib.Button />`
+ * - JSX elements: `<Button />` and `<Button>...</Button>`
+ * - Re-exports: `export { Button } from 'lib'`
+ */
+export class FindReactComponent extends Recipe {
+    readonly name = "org.openrewrite.react.search.find-react-component";
+    readonly displayName: string = "Find React component";
+    readonly description: string = "Finds all usages of a specific React component including imports, JSX elements, and exports.";
+
+    @Option({
+        displayName: "Component name",
+        description: "The name of the React component to find (e.g., 'Button', 'TextField')",
+        example: "Button"
+    })
+    componentName!: string;
+
+    @Option({
+        displayName: "Import path",
+        description: "Optional module path to narrow the search (e.g., '@mui/material'). Supports glob patterns.",
+        required: false,
+        example: "@mui/material"
+    })
+    importPath?: string;
+
+    private dataTable = new DataTable<FindReactComponentRow>(
+        "org.openrewrite.react.search.FindReactComponentTable",
+        "React component usages",
+        "Table of all React component usages found in the codebase.",
+        FindReactComponentRow
+    );
+
+    constructor(options?: { componentName?: string; importPath?: string }) {
+        super(options);
+    }
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const componentName = this.componentName;
+        const importPathFilter = this.importPath;
+        const dataTable = this.dataTable;
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            // Track component aliases within the current file
+            private aliases = new Map<string, { importPath: string; isDefault: boolean; alias: string }>();
+            private filePath = "";
+
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                this.aliases.clear();
+                this.filePath = cu.sourcePath ?? "";
+                return super.visitJsCompilationUnit(cu, ctx);
+            }
+
+            // --- Import Detection ---
+
+            override async visitImportSpecifier(spec: JS.ImportSpecifier, ctx: ExecutionContext): Promise<J | undefined> {
+                const specifier = spec.specifier;
+                const importDecl = this.findEnclosingImport();
+                const modulePath = importDecl ? this.getModuleSpecifier(importDecl) : "";
+
+                if (importPathFilter && modulePath && !this.matchesPath(modulePath, importPathFilter)) {
+                    return super.visitImportSpecifier(spec, ctx);
+                }
+
+                if (specifier.kind === JS.Kind.Alias) {
+                    const alias = specifier as JS.Alias;
+                    const propertyName = alias.propertyName.element;
+                    if (isIdentifier(propertyName) && propertyName.simpleName === componentName) {
+                        const aliasIdent = alias.alias;
+                        const aliasName = isIdentifier(aliasIdent) ? aliasIdent.simpleName : componentName;
+                        this.aliases.set(aliasName, {importPath: modulePath, isDefault: false, alias: aliasName});
+                        dataTable.insertRow(ctx, {
+                            componentName, filePath: this.filePath, usageType: "import",
+                            importPath: modulePath, isDefaultImport: false, aliasName
+                        });
+                        return foundSearchResult(spec, componentName);
+                    }
+                } else if (isIdentifier(specifier) && specifier.simpleName === componentName) {
+                    this.aliases.set(componentName, {importPath: modulePath, isDefault: false, alias: ""});
+                    dataTable.insertRow(ctx, {
+                        componentName, filePath: this.filePath, usageType: "import",
+                        importPath: modulePath, isDefaultImport: false, aliasName: ""
+                    });
+                    return foundSearchResult(spec, componentName);
+                }
+
+                return super.visitImportSpecifier(spec, ctx);
+            }
+
+            override async visitImportClause(clause: JS.ImportClause, ctx: ExecutionContext): Promise<J | undefined> {
+                if (clause.name) {
+                    const identifier = clause.name.element;
+                    if (isIdentifier(identifier) && identifier.simpleName === componentName) {
+                        const importDecl = this.findEnclosingImport();
+                        const modulePath = importDecl ? this.getModuleSpecifier(importDecl) : "";
+
+                        if (!importPathFilter || !modulePath || this.matchesPath(modulePath, importPathFilter)) {
+                            this.aliases.set(componentName, {importPath: modulePath, isDefault: true, alias: ""});
+                            dataTable.insertRow(ctx, {
+                                componentName, filePath: this.filePath, usageType: "import",
+                                importPath: modulePath, isDefaultImport: true, aliasName: ""
+                            });
+                            return foundSearchResult(clause, componentName);
+                        }
+                    }
+                }
+                return super.visitImportClause(clause, ctx);
+            }
+
+            // --- JSX Element Detection ---
+
+            override async visitJsxTag(tag: JSX.Tag, ctx: ExecutionContext): Promise<J | undefined> {
+                const t = await super.visitJsxTag(tag, ctx) as JSX.Tag;
+                const openName = t.openName.element;
+
+                if (isIdentifier(openName)) {
+                    const tagName = openName.simpleName;
+                    // When importPathFilter is set, only match components from matching imports
+                    const isTracked = this.aliases.has(tagName);
+                    const matchesName = tagName === componentName;
+                    if (isTracked || (!importPathFilter && matchesName)) {
+                        const info = this.aliases.get(tagName);
+                        dataTable.insertRow(ctx, {
+                            componentName, filePath: this.filePath, usageType: "jsx-element",
+                            importPath: info?.importPath ?? "", isDefaultImport: info?.isDefault ?? false,
+                            aliasName: info?.alias ?? ""
+                        });
+                        return foundSearchResult(t, componentName);
+                    }
+                } else if (openName.kind === J.Kind.FieldAccess) {
+                    // Handle <Namespace.Component />
+                    const fieldAccess = openName as J.FieldAccess;
+                    const nameIdent = fieldAccess.name.element;
+                    if (isIdentifier(nameIdent) && nameIdent.simpleName === componentName && !importPathFilter) {
+                        dataTable.insertRow(ctx, {
+                            componentName, filePath: this.filePath, usageType: "jsx-element",
+                            importPath: "", isDefaultImport: false, aliasName: ""
+                        });
+                        return foundSearchResult(t, componentName);
+                    }
+                }
+
+                return t;
+            }
+
+            // --- Export Detection ---
+
+            override async visitExportDeclaration(exportDecl: JS.ExportDeclaration, ctx: ExecutionContext): Promise<J | undefined> {
+                const e = await super.visitExportDeclaration(exportDecl, ctx) as JS.ExportDeclaration;
+
+                // Check if this export re-exports our component
+                const exportClause = e.exportClause;
+                if (!exportClause) return e;
+
+                // NamedExports: export { Component } from 'lib'
+                if (exportClause.kind === JS.Kind.NamedExports) {
+                    const namedExports = exportClause as JS.NamedExports;
+                    for (const elem of namedExports.elements.elements) {
+                        const el = (elem as any).element ?? elem;
+                        if (el.kind === JS.Kind.ExportSpecifier) {
+                            const spec = el as JS.ExportSpecifier;
+                            const specifier = spec.specifier;
+                            if (isIdentifier(specifier) && specifier.simpleName === componentName) {
+                                const modulePath = this.getExportModuleSpecifier(e);
+                                dataTable.insertRow(ctx, {
+                                    componentName, filePath: this.filePath, usageType: "export",
+                                    importPath: modulePath, isDefaultImport: false, aliasName: ""
+                                });
+                                return foundSearchResult(e, componentName);
+                            }
+                            if (specifier.kind === JS.Kind.Alias) {
+                                const alias = specifier as unknown as JS.Alias;
+                                const propName = alias.propertyName.element;
+                                if (isIdentifier(propName) && propName.simpleName === componentName) {
+                                    const aliasName = isIdentifier(alias.alias) ? alias.alias.simpleName : "";
+                                    const modulePath = this.getExportModuleSpecifier(e);
+                                    dataTable.insertRow(ctx, {
+                                        componentName, filePath: this.filePath, usageType: "export",
+                                        importPath: modulePath, isDefaultImport: false, aliasName
+                                    });
+                                    return foundSearchResult(e, componentName);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                return e;
+            }
+
+            // --- Helpers ---
+
+            private findEnclosingImport(): JS.Import | undefined {
+                return this.cursor.firstEnclosing((t): t is JS.Import =>
+                    (t as any).kind === JS.Kind.Import
+                );
+            }
+
+            private getModuleSpecifier(importDecl: JS.Import): string {
+                if (!importDecl.moduleSpecifier) return "";
+                const spec = importDecl.moduleSpecifier.element;
+                if (spec.kind === J.Kind.Literal) {
+                    return String((spec as J.Literal).value ?? "");
+                }
+                return "";
+            }
+
+            private getExportModuleSpecifier(exportDecl: JS.ExportDeclaration): string {
+                if (!exportDecl.moduleSpecifier) return "";
+                const spec = exportDecl.moduleSpecifier.element;
+                if (spec.kind === J.Kind.Literal) {
+                    return String((spec as J.Literal).value ?? "");
+                }
+                return "";
+            }
+
+            private matchesPath(actual: string, pattern: string): boolean {
+                if (pattern === actual) return true;
+                // Simple glob: * matches any segment
+                const regex = new RegExp("^" + pattern.replace(/\*/g, ".*") + "$");
+                return regex.test(actual);
+            }
+        }();
+    }
+}

package/src/search/find-server-rendering-usage.ts

@@ -0,0 +1,120 @@
+import {Column, DataTable, ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+class ServerRenderingRow {
+    @Column({displayName: "File path", description: "The file path where the SSR API is used"})
+    filePath!: string;
+
+    @Column({displayName: "API name", description: "The name of the server rendering API"})
+    apiName!: string;
+
+    @Column({displayName: "Replacement", description: "The recommended replacement API"})
+    replacement!: string;
+}
+
+const SSR_APIS: Record<string, string> = {
+    'renderToString': 'Consider using renderToPipeableStream or renderToReadableStream for streaming SSR',
+    'renderToStaticMarkup': 'Consider using renderToPipeableStream or renderToReadableStream for streaming SSR',
+    'renderToNodeStream': 'Use renderToPipeableStream instead (removed in React 19)',
+    'renderToStaticNodeStream': 'Use renderToPipeableStream or renderToReadableStream instead (removed in React 19)',
+};
+
+/**
+ * Finds usage of React server-side rendering APIs from `react-dom/server`.
+ *
+ * Detects:
+ * - `renderToString(element)` -- synchronous SSR, consider streaming alternatives
+ * - `renderToStaticMarkup(element)` -- synchronous static markup, consider streaming
+ * - `renderToNodeStream(element)` -- removed in React 19, use `renderToPipeableStream`
+ * - `renderToStaticNodeStream(element)` -- removed in React 19, use streaming APIs
+ *
+ * Also detects named imports and namespace calls (ReactDOMServer.renderToString, ReactDOM.renderToString).
+ */
+export class FindServerRenderingUsage extends Recipe {
+    readonly name = "org.openrewrite.react.search.find-server-rendering-usage";
+    readonly displayName = "Find server-side rendering API usage";
+    readonly description = "Finds usage of React server-side rendering APIs from `react-dom/server` including `renderToString`, `renderToStaticMarkup`, `renderToNodeStream`, and `renderToStaticNodeStream` to help plan SSR migration.";
+
+    private dataTable = new DataTable<ServerRenderingRow>(
+        "org.openrewrite.react.search.ServerRenderingUsageTable",
+        "Server rendering API usages",
+        "Table of all server-side rendering API usages found in the codebase.",
+        ServerRenderingRow
+    );
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const dataTable = this.dataTable;
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private filePath = "";
+            private importedSsrApis = new Set<string>();
+
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                this.filePath = cu.sourcePath ?? "";
+                this.importedSsrApis.clear();
+                return super.visitJsCompilationUnit(cu, ctx);
+            }
+
+            // Detect imports of SSR APIs
+            override async visitImportSpecifier(spec: JS.ImportSpecifier, ctx: ExecutionContext): Promise<J | undefined> {
+                const specifier = spec.specifier;
+
+                let importedName: string | undefined;
+                if (specifier.kind === JS.Kind.Alias) {
+                    const alias = specifier as JS.Alias;
+                    const propName = alias.propertyName.element;
+                    if (isIdentifier(propName)) {
+                        importedName = propName.simpleName;
+                    }
+                } else if (isIdentifier(specifier)) {
+                    importedName = specifier.simpleName;
+                }
+
+                if (importedName && SSR_APIS[importedName]) {
+                    this.importedSsrApis.add(importedName);
+                    dataTable.insertRow(ctx, {
+                        filePath: this.filePath,
+                        apiName: importedName,
+                        replacement: SSR_APIS[importedName]
+                    });
+                    return foundSearchResult(spec, `SSR API: ${importedName}`);
+                }
+
+                return super.visitImportSpecifier(spec, ctx);
+            }
+
+            // Detect method calls: renderToString(...), ReactDOMServer.renderToString(...), etc.
+            override async visitMethodInvocation(method: J.MethodInvocation, ctx: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, ctx) as J.MethodInvocation;
+
+                const methodName = m.name.simpleName;
+
+                if (!SSR_APIS[methodName]) return m;
+
+                // Direct call from named import: renderToString(...)
+                if (!m.select && this.importedSsrApis.has(methodName)) {
+                    return foundSearchResult(m, `SSR API: ${methodName}`);
+                }
+
+                // Namespace call: ReactDOMServer.renderToString(...), ReactDOM.renderToString(...)
+                if (m.select) {
+                    const select = (m.select as any).element ?? m.select;
+                    if (isIdentifier(select)) {
+                        const ns = select.simpleName;
+                        if (ns === 'ReactDOMServer' || ns === 'ReactDOM') {
+                            dataTable.insertRow(ctx, {
+                                filePath: this.filePath,
+                                apiName: `${ns}.${methodName}`,
+                                replacement: SSR_APIS[methodName]
+                            });
+                            return foundSearchResult(m, `SSR API: ${ns}.${methodName}`);
+                        }
+                    }
+                }
+
+                return m;
+            }
+        }();
+    }
+}

package/src/simplify-object-pattern-property.ts

@@ -0,0 +1,71 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+/**
+ * Simplifies object pattern properties where the key and value have the same name.
+ *
+ * Examples:
+ * - `{ x: x }` → `{ x }`
+ * - `{ ref: ref, ...props }` → `{ ref, ...props }`
+ * - `{ foo: foo, bar: bar }` → `{ foo, bar }`
+ */
+export class SimplifyObjectPatternProperty extends Recipe {
+    readonly name = "org.openrewrite.javascript.cleanup.simplify-object-pattern-property";
+    readonly displayName: string = "Simplify object pattern properties";
+    readonly description: string = "Simplifies object destructuring patterns where the property name and variable name are the same (e.g., `{ x: x }` becomes `{ x }`).";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitObjectBindingPattern(pattern: JS.ObjectBindingPattern, p: ExecutionContext): Promise<J | undefined> {
+                // First, recursively visit children
+                const visited = await super.visitObjectBindingPattern(pattern, p) as JS.ObjectBindingPattern;
+
+                // Now simplify any properties where key === value
+                const simplifiedBindings = visited.bindings.elements.map(right => {
+                    const element = right.element;
+
+                    // Check if this is a property assignment pattern (e.g., { x: x })
+                    if (element.kind === JS.Kind.BindingElement) {
+                        const binding = element as JS.BindingElement;
+
+                        // Check if the property name is an identifier
+                        if (binding.propertyName && binding.propertyName.element.kind === J.Kind.Identifier) {
+                            const propName = (binding.propertyName.element as J.Identifier).simpleName;
+
+                            // Check if the assignment is also an identifier with the same name
+                            if (binding.name && binding.name.kind === J.Kind.Identifier) {
+                                const assignmentName = (binding.name as J.Identifier).simpleName;
+
+                                // If they match, simplify to just the identifier
+                                if (propName === assignmentName) {
+                                    // Create a new binding element with propertyName set to undefined (shorthand syntax)
+                                    // Also need to update the name's prefix to remove extra spacing
+                                    return {
+                                        ...right,
+                                        element: {
+                                            ...binding,
+                                            propertyName: undefined,
+                                            name: {
+                                                ...binding.name,
+                                                prefix: binding.propertyName!.element.prefix
+                                            }
+                                        }
+                                    } as J.RightPadded<JS.BindingElement>;
+                                }
+                            }
+                        }
+                    }
+
+                    return right;
+                });
+
+                // Return the pattern with simplified bindings using Mutative
+                return create(visited, draft => {
+                    draft.bindings.elements = simplifiedBindings;
+                });
+            }
+        }();
+    }
+}