Quickstart

# yaml-language-server: $schema=https://raw.githubusercontent.com/codemod/codemod/refs/heads/main/schemas/workflow.json

version: "1"

params:
  schema:
    run_ai_step:
      name: "Run AI step"
      description: "Enable AI-powered fixups for edge cases"
      type: string
      default: "false"

nodes:
  - id: extract-inner-components
    name: Extract inner React components to module scope
    type: automatic
    steps:
      - name: "Move inner components to module scope"
        js-ast-grep:
          js_file: scripts/codemod.ts
          language: "tsx"

      - name: "AI fixups for complex cases"
        if: params.run_ai_step == "true"
        ai:
          prompt: |
            The previous AST step extracted inner React components to module scope.
            Some cases could not be handled deterministically. Scan for remaining
            components defined inside other components and fix them:

            1. If the inner component closes over parent state or props, convert those
               to explicit props on the extracted component and update the call site.
            2. If the inner component uses generics from the parent, lift the type
               parameters to the extracted component's signature.
            3. Add a TODO comment for any case you cannot safely transform.

            Only modify files that still contain inner component definitions.

import type { Codemod, Edit } from "codemod:ast-grep";
import type { SgNode } from "codemod:ast-grep";
import type TSX from "codemod:ast-grep/langs/tsx";

const codemod: Codemod<TSX> = async (root) => {
  const rootNode = root.root();
  const edits: Edit[] = [];

  // Find function components defined inside other function components.
  // A component is a function_declaration whose name starts with uppercase,
  // nested inside another function_declaration's statement_block.
  const innerFuncComponents = rootNode.findAll({
    rule: {
      kind: "function_declaration",
      has: {
        field: "name",
        kind: "identifier",
        regex: "^[A-Z]",
      },
      inside: {
        kind: "statement_block",
        inside: {
          kind: "function_declaration",
          has: {
            field: "name",
            kind: "identifier",
            regex: "^[A-Z]",
          },
        },
      },
    },
  });

  // Find arrow function components: `const Foo = (...) => { ... }`
  const innerArrowComponents = rootNode.findAll({
    rule: {
      kind: "lexical_declaration",
      has: {
        kind: "variable_declarator",
        has: {
          field: "name",
          kind: "identifier",
          regex: "^[A-Z]",
        },
      },
      inside: {
        kind: "statement_block",
        inside: {
          kind: "function_declaration",
          has: {
            field: "name",
            kind: "identifier",
            regex: "^[A-Z]",
          },
        },
      },
    },
  });

  if (innerFuncComponents.length === 0 && innerArrowComponents.length === 0) {
    return null;
  }

  const allInner = [...innerFuncComponents, ...innerArrowComponents];

  // Group by parent component
  const parentMap = new Map<
    number,
    { parent: SgNode<TSX>; children: SgNode<TSX>[] }
  >();

  for (const inner of allInner) {
    const ancestors = inner.ancestors();
    const parentComponent = ancestors.find(
      (a) =>
        a.kind() === "function_declaration" &&
        a.field("name")?.matches({ rule: { regex: "^[A-Z]" } }),
    );
    if (!parentComponent) continue;

    const parentId = parentComponent.id();
    if (!parentMap.has(parentId)) {
      parentMap.set(parentId, { parent: parentComponent, children: [] });
    }
    parentMap.get(parentId)!.children.push(inner);
  }

  for (const { parent, children } of parentMap.values()) {
    const extractedParts: string[] = [];

    for (const child of children) {
      extractedParts.push(child.text());

      // Remove the inner component from its original location
      edits.push({
        startPos: child.range().start.index,
        endPos: child.range().end.index,
        insertedText: "",
      });
    }

    // Insert extracted components before the parent function.
    // If the parent is wrapped in an export_statement, insert before that instead.
    const parentParent = parent.parent();
    const insertTarget =
      parentParent && parentParent.kind() === "export_statement"
        ? parentParent
        : parent;

    const insertText = extractedParts.join("\n\n") + "\n\n";
    edits.push({
      startPos: insertTarget.range().start.index,
      endPos: insertTarget.range().start.index,
      insertedText: insertText,
    });
  }

  return rootNode.commitEdits(edits);
};

export default codemod;