transformAsChild() — ui Function Reference

Architecture documentation for the transformAsChild() function in transform-aschild.ts from the ui codebase.

Function typescript FrameworkTooling TemplateSync

Entity Profile

FrameworkTooling→ TemplateSync→ transformAsChild() — ui Function Reference

Dependency Diagram

graph TD
  16344051_8bae_403b_faba_ac45e133f3cc["transformAsChild()"]
  596d8028_0c11_1eb9_f95e_135ad1aeb663["transform-aschild.ts"]
  16344051_8bae_403b_faba_ac45e133f3cc -->|defined in| 596d8028_0c11_1eb9_f95e_135ad1aeb663
  style 16344051_8bae_403b_faba_ac45e133f3cc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-aschild.ts lines 24–145

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
    }

    // Get child element info.
    let childTagName: string
    let childProps: string
    let childChildren: string

    if (childElement.getKind() === SyntaxKind.JsxSelfClosingElement) {
      const selfClosing = childElement.asKindOrThrow(
        SyntaxKind.JsxSelfClosingElement
      )
      childTagName = selfClosing.getTagNameNode().getText()
      childProps = selfClosing
        .getAttributes()
        .map((attr) => attr.getText())
        .join(" ")
      childChildren = ""
    } else {
      const jsxChild = childElement.asKindOrThrow(SyntaxKind.JsxElement)
      const openingEl = jsxChild.getOpeningElement()
      childTagName = openingEl.getTagNameNode().getText()
      childProps = openingEl
        .getAttributes()
        .map((attr) => attr.getText())
        .join(" ")
      // Get the children's text content.
      childChildren = jsxChild
        .getJsxChildren()
        .map((c) => c.getText())
        .join("")
    }

    // Determine if we need nativeButton={false}.
    // Add it when the child element is a non-button element.
    const needsNativeButton =
      ELEMENTS_REQUIRING_NATIVE_BUTTON_FALSE.includes(childTagName)

    transformations.push({
      parentElement: jsxElement,
      parentTagName,
      childTagName,
      childProps,
      childChildren,
      needsNativeButton,
    })
  }