transformJsx() — ui Function Reference

Architecture documentation for the transformJsx() function in transform-jsx.ts from the ui codebase.

Function typescript FrameworkTooling TemplateSync

Entity Profile

FrameworkTooling→ TemplateSync→ transformJsx() — ui Function Reference

Dependency Diagram

graph TD
  187f205b_da70_83da_0914_3022a99e40b5["transformJsx()"]
  b0b22f77_9304_6932_9684_47a29fa91040["transform-jsx.ts"]
  187f205b_da70_83da_0914_3022a99e40b5 -->|defined in| b0b22f77_9304_6932_9684_47a29fa91040
  style 187f205b_da70_83da_0914_3022a99e40b5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-jsx.ts lines 64–95

export const transformJsx: Transformer<string> = async ({
  sourceFile,
  config,
}) => {
  const output = sourceFile.getFullText()

  if (config.tsx) {
    return output
  }

  const ast = recast.parse(output, {
    parser: {
      parse: (code: string) => {
        return parse(code, PARSE_OPTIONS)
      },
    },
  })

  const result = transformFromAstSync(ast, output, {
    cloneInputAst: false,
    code: false,
    ast: true,
    plugins: [transformTypescript],
    configFile: false,
  })

  if (!result || !result.ast) {
    throw new Error("Failed to transform JSX")
  }

  return recast.print(result.ast).code
}