formatCode() — ui Function Reference

Architecture documentation for the formatCode() function in rehype.ts from the ui codebase.

Function typescript DocumentationAtlas SearchAPI calls 2 called by 1

Entity Profile

DocumentationAtlas→ SearchAPI→ formatCode() — ui Function Reference

Dependency Diagram

graph TD
  57fb1ae2_1d20_217c_ddee_7f949e8a5347["formatCode()"]
  e2427336_4794_0f1c_982a_f2089ffcec85["rehype.ts"]
  57fb1ae2_1d20_217c_ddee_7f949e8a5347 -->|defined in| e2427336_4794_0f1c_982a_f2089ffcec85
  d0e9b290_610b_ba71_e7bb_ceeef3917003["rehypeComponent()"]
  d0e9b290_610b_ba71_e7bb_ceeef3917003 -->|calls| 57fb1ae2_1d20_217c_ddee_7f949e8a5347
  f69c1662_c2d3_9289_3290_fd94b6192fd1["getStyleMap()"]
  57fb1ae2_1d20_217c_ddee_7f949e8a5347 -->|calls| f69c1662_c2d3_9289_3290_fd94b6192fd1
  2a66a072_9a7a_a23a_b498_198409f7e296["buildDisplayConfig()"]
  57fb1ae2_1d20_217c_ddee_7f949e8a5347 -->|calls| 2a66a072_9a7a_a23a_b498_198409f7e296
  style 57fb1ae2_1d20_217c_ddee_7f949e8a5347 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/lib/rehype.ts lines 109–145

export async function formatCode(code: string, styleName: string) {
  code = code.replaceAll(`@/registry/${styleName}/`, "@/components/")

  for (const base of BASES) {
    code = code.replaceAll(`@/registry/bases/${base.name}/`, "@/components/")
    code = code.replaceAll(`@/examples/${base.name}/ui/`, "@/components/ui/")
    code = code.replaceAll(`@/examples/${base.name}/lib/`, "@/lib/")
    code = code.replaceAll(`@/examples/${base.name}/hooks/`, "@/hooks/")
  }

  code = code.replaceAll("export default", "export")

  try {
    const styleMap = await getStyleMap(styleName)
    const transformed = await transformStyle(code, { styleMap })
    const config = buildDisplayConfig(styleName)
    const project = new Project({ compilerOptions: {} })
    const sourceFile = project.createSourceFile("component.tsx", transformed, {
      scriptKind: ScriptKind.TSX,
    })

    const transformers = [transformIcons, transformMenu, transformRender]
    for (const transformer of transformers) {
      await transformer({
        filename: "component.tsx",
        raw: transformed,
        sourceFile,
        config,
      })
    }

    return sourceFile.getText()
  } catch (error) {
    console.error("Transform failed:", error)
    return code
  }
}