buildComponentFiles() — ui Function Reference

Architecture documentation for the buildComponentFiles() function in route.ts from the ui codebase.

Function typescript DesignEngine Transformers calls 1 called by 1

Entity Profile

DesignEngine→ Transformers→ buildComponentFiles() — ui Function Reference

Dependency Diagram

graph TD
  719cc2c8_7eb3_0bdf_dba1_ef9bc67fdd74["buildComponentFiles()"]
  2306a3f2_6413_2045_0888_633ffb84f9ee["route.ts"]
  719cc2c8_7eb3_0bdf_dba1_ef9bc67fdd74 -->|defined in| 2306a3f2_6413_2045_0888_633ffb84f9ee
  99866bc1_a32a_eb11_ee85_68ceecc601f6["buildV0Payload()"]
  99866bc1_a32a_eb11_ee85_68ceecc601f6 -->|calls| 719cc2c8_7eb3_0bdf_dba1_ef9bc67fdd74
  883da9d7_d65a_9fb0_bb2c_8fa923c8fb02["getRegistryItemFile()"]
  719cc2c8_7eb3_0bdf_dba1_ef9bc67fdd74 -->|calls| 883da9d7_d65a_9fb0_bb2c_8fa923c8fb02
  style 719cc2c8_7eb3_0bdf_dba1_ef9bc67fdd74 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/create/v0/route.ts lines 212–280

async function buildComponentFiles(designSystemConfig: DesignSystemConfig) {
  const files = []
  const allItemsForBase = Object.values(Index[designSystemConfig.base])
    .filter(
      (item: RegistryItem) =>
        item.type === "registry:ui" || item.name === "example"
    )
    .map((item) => item.name)

  const registryItemFiles = await Promise.all(
    allItemsForBase.map(async (name) => {
      const file = await getRegistryItemFile(name, designSystemConfig)
      return file
    })
  )
  files.push(...registryItemFiles)

  const pageFile = {
    path: "app/page.tsx",
    type: "registry:page",
    target: "app/page.tsx",
    content: dedent`
      import { Button } from "@/components/ui/button";
      export default function Page() {
        return <Button>Click me</Button>
      }
    `,
  }

  // Build the actual item component.
  if (designSystemConfig.item) {
    const itemComponentFile = await getRegistryItemFile(
      designSystemConfig.item,
      designSystemConfig
    )
    if (itemComponentFile) {
      // Find the export default function from the component file.
      const exportDefault = itemComponentFile.content.match(
        /export default function (\w+)/
      )
      if (exportDefault) {
        const functionName = exportDefault[1]

        // Replace the export default function with a named export.
        itemComponentFile.content = itemComponentFile.content.replace(
          /export default function (\w+)/,
          `export function ${functionName}`
        )

        // Import and render the item on the page.
        pageFile.content = dedent`import { ${functionName} } from "@/components/${designSystemConfig.item}";

        export default function Page() {
          return <${functionName} />
        }`
      }

      files.push({
        ...itemComponentFile,
        target: `components/${designSystemConfig.item}.tsx`,
        type: "registry:component",
      })
    }
  }

  files.push(pageFile)

  return z.array(registryItemFileSchema).parse(files)
}