추상구문트리(AST)와 Codemod로 기존 코드를 안전하게 마이그레이션하기

다국어함수("PRODUCT_TITLE") || "상품명"

LogicalExpression (||)
├─ left: CallExpression
│  ├─ callee: Identifier(다국어함수)
│  └─ arguments: ["PRODUCT_TITLE"]
└─ right: StringLiteral("상품명")

코드 → AST → 변환 → 새로운 코드

const parser = require("@babel/parser")

const code = `
  const add = (a, b) => a + b;
`;

const ast = parser.parse(code, {
  sourceType: "module",
  plugins: ["typescript", "jsx"]
})

const traverse = require("@babel/traverse").default

traverse(ast, {
  CallExpression(path) {
    // 특정 함수 호출을 탐지
  }
})

const t = require("@babel/types")

if (t.isCallExpression(node)) {
  // node는 CallExpression임이 보장됨
}

if (t.isIdentifier(node.callee, { name: "다국어함수" })) {
  // callee가 Identifier이고 이름이 "다국어함수"인 경우만 통과
}

const generate = require("@babel/generator").default
const output = generate(ast).code

function ProductTitle() {
  const { t } = useTranslation()
  return <h1>{t("TITLE", "상품명")}</h1>
}

export const STATUS_LABEL = t("ACTIVE", "활성")

function isComponentFile(ast) {
  let hasJSX = false
  let hasReactImport = false
  let hasComponentLikeFunction = false

  traverse(ast, {
    JSXElement() {
      hasJSX = true
    },
    ImportDeclaration(path) {
      if (path.node.source.value.toLowerCase() === "react") {
        hasReactImport = true
      }
    },
    FunctionDeclaration(path) {
      const name = path.node.id?.name
      if (!name) return

      const isComponent = name[0] === name[0].toUpperCase()
      const isHook = name.startsWith("use")

      if (isComponent || isHook) {
        hasComponentLikeFunction = true
      }
    }
  })

  return (hasJSX || hasReactImport) && hasComponentLikeFunction
}

다국어함수("PRODUCT.TITLE") || "상품명"

LogicalExpression(path) {
  const { node } = path

  // 1) "||" 인 경우만 처리한다.
  //   - &&, ?? 같은 다른 논리식은 변환 대상이 아니다.
  if (node.operator !== "||") return

  // 2) 좌항이 "다국어함수(...)" 호출인지 확인한다.
  //   - left가 CallExpression이어야 하고
  //   - callee가 Identifier("다국어함수")여야 한다.
  //
  // 예: 다국어함수("A") || "a"  ✅
  // 예: other("A") || "a"       ❌
  // 예: obj.다국어함수("A") || "a"  ❌ (MemberExpression 케이스면 별도 대응 필요)
  if (
    !t.isCallExpression(node.left) ||
    !t.isIdentifier(node.left.callee, { name: "다국어함수" })
  ) {
    return
  }

  // 3) 기존 노드를 재사용해서 t(key, fallback) 형태로 재조립한다.
  //
  // - key는 좌항 호출의 첫 번째 인자: node.left.arguments[0]
  // - fallback은 논리식 우항: node.right
  //
  // 여기서 중요한 점:
  // node.right가 단순 문자열이 아니라 함수 호출, 변수, 템플릿 리터럴 등
  // "표현식(Expression)"이면 무엇이든 그대로 fallback 인자로 옮길 수 있다.
  const newCall = t.callExpression(
    t.identifier("t"),
    [node.left.arguments[0], node.right]
  )

  // 4) 원래 LogicalExpression 전체를 새로운 CallExpression로 교체한다.
  // 즉, (다국어함수(...) || fallback) 라는 구조 자체를 t(...)로 바꿔치기한다.
  path.replaceWith(newCall)
}

다국어함수("PRODUCT.TITLE")

CallExpression(path) {
  const { node, parent } = path

  if (
    t.isIdentifier(node.callee, { name: "다국어함수" }) &&
    !t.isLogicalExpression(parent)
  ) {
    const newCall = t.callExpression(
      t.identifier("t"),
      [node.arguments[0]]
    )

    path.replaceWith(newCall)
  }
}

FunctionDeclaration(path) {
  // 1. 이 함수 내부에서 t()가 실제로 사용되는지 검사
  // componentUsesT는 하위 노드를 순회하며
  // CallExpression 중 callee가 Identifier("t")인 경우가 있는지 확인한다.
  if (!componentUsesT(path)) return

  // 2. const { t } = useTranslation() AST 노드 생성
  // 아래 구조를 AST로 직접 조립한다.
  //
  // const { t } = useTranslation()
  //
  // - VariableDeclaration (const)
  //   - VariableDeclarator
  //     - id: ObjectPattern { t }
  //     - init: CallExpression(useTranslation)
  //
  const hookDecl = t.variableDeclaration("const", [
    t.variableDeclarator(
      // { t } 구조 생성 (ObjectPattern)
      t.objectPattern([
        t.objectProperty(
          t.identifier("t"),   // key
          t.identifier("t"),   // value
          false,
          true                 // shorthand: true → { t: t } 대신 { t }
        )
      ]),
      // useTranslation() 호출 생성
      t.callExpression(
        t.identifier("useTranslation"),
        []
      )
    )
  ])

  // 3. 함수 body의 가장 앞에 삽입
  // React Hooks Rule에 따라 조건문 내부가 아니라
  // 항상 함수 최상단에 위치해야 한다.
  path.node.body.body.unshift(hookDecl)
}

node transform-i18n.js src/components --recursive