transformRender() — ui Function Reference

Architecture documentation for the transformRender() function in transform-render.ts from the ui codebase.

Function typescript FrameworkTooling CLICore

Entity Profile

FrameworkTooling→ CLICore→ transformRender() — ui Function Reference

Dependency Diagram

graph TD
  fe4fc58d_4082_29d3_8471_8089c055fd57["transformRender()"]
  53d6baa6_7fd1_a1aa_6718_e4a746737a82["transform-render.ts"]
  fe4fc58d_4082_29d3_8471_8089c055fd57 -->|defined in| 53d6baa6_7fd1_a1aa_6718_e4a746737a82
  style fe4fc58d_4082_29d3_8471_8089c055fd57 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-render.ts lines 10–129

export const transformRender: 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 render attribute.
  const jsxElements = sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement)

  for (const jsxElement of jsxElements) {
    const openingElement = jsxElement.getOpeningElement()
    const renderAttr = openingElement.getAttribute("render")

    if (!renderAttr) {
      continue
    }

    // Get the children of the parent element.
    const children = jsxElement.getJsxChildren()
    const childrenText = children
      .map((c) => c.getText())
      .join("")
      .trim()

    // If there are no children, nothing to transform.
    if (!childrenText) {
      continue
    }

    // Get the render attribute value.
    if (renderAttr.getKind() !== SyntaxKind.JsxAttribute) {
      continue
    }

    const jsxAttr = renderAttr.asKindOrThrow(SyntaxKind.JsxAttribute)
    const initializer = jsxAttr.getInitializer()

    if (!initializer) {
      continue
    }

    // The render value should be a JSX expression like {<Button />}.
    if (initializer.getKind() !== SyntaxKind.JsxExpression) {
      continue
    }

    const jsxExpression = initializer.asKindOrThrow(SyntaxKind.JsxExpression)
    const expression = jsxExpression.getExpression()

    if (!expression) {
      continue
    }

    // Check if the expression is a self-closing JSX element.
    if (expression.getKind() !== SyntaxKind.JsxSelfClosingElement) {
      // If it's already a full JSX element with children, skip it.
      continue
    }

    const selfClosingElement = expression.asKindOrThrow(
      SyntaxKind.JsxSelfClosingElement
    )
    const tagName = selfClosingElement.getTagNameNode().getText()
    const attributes = selfClosingElement
      .getAttributes()
      .map((attr) => attr.getText())
      .join(" ")

    // Build new render prop value with children moved inside.
    const newRenderValue = attributes
      ? `{<${tagName} ${attributes}>${childrenText}</${tagName}>}`
      : `{<${tagName}>${childrenText}</${tagName}>}`

    // Get the parent tag name and other attributes.
    const parentTagName = openingElement.getTagNameNode().getText()
    const otherAttrs = openingElement
      .getAttributes()