transform-aschild.ts — ui Source File

Source Code

import { Transformer } from "@/src/utils/transformers"
import { JsxElement, SyntaxKind } from "ts-morph"

// Elements that require nativeButton={false} when used as render prop.
// These are non-button elements that don't have native button semantics.
const ELEMENTS_REQUIRING_NATIVE_BUTTON_FALSE = [
  "a",
  "span",
  "div",
  "Link",
  "label",
  "Label",
]

interface TransformInfo {
  parentElement: JsxElement
  parentTagName: string
  childTagName: string
  childProps: string
  childChildren: string
  needsNativeButton: boolean
}

export const transformAsChild: Transformer = async ({ sourceFile, config }) => {
  // Only run for base- styles.
  if (!config.style?.startsWith("base-")) {
    return sourceFile
  }

  // Collect all transformations first, then apply them in reverse order.
  // This prevents issues with invalidated nodes when modifying the tree.
  const transformations: TransformInfo[] = []

  // Find all JSX elements with asChild attribute.
  const jsxElements = sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement)

  for (const jsxElement of jsxElements) {
    const openingElement = jsxElement.getOpeningElement()
    const asChildAttr = openingElement.getAttribute("asChild")

    if (!asChildAttr) {
      continue
    }

    const parentTagName = openingElement.getTagNameNode().getText()
    const children = jsxElement.getJsxChildren()

    // Find the first JSX element child (skip whitespace/text).
    const childElement = children.find(
      (child) =>
        child.getKind() === SyntaxKind.JsxElement ||
        child.getKind() === SyntaxKind.JsxSelfClosingElement
    )

    if (!childElement) {
      // No child element found, just remove asChild.
      asChildAttr.remove()
      continue
    }

// ... (86 more lines)