diffComponent() — ui Function Reference

Architecture documentation for the diffComponent() function in diff.ts from the ui codebase.

Function typescript FrameworkTooling CLICore called by 1

Entity Profile

FrameworkTooling→ CLICore→ diffComponent() — ui Function Reference

Dependency Diagram

graph TD
  10184aee_4172_7de0_9408_131d59d38e8a["diffComponent()"]
  d3456bc0_654c_565f_5730_78cca3c9f4c8["diff.ts"]
  10184aee_4172_7de0_9408_131d59d38e8a -->|defined in| d3456bc0_654c_565f_5730_78cca3c9f4c8
  b4fcf087_084f_27d7_c2a4_74d4dadef3b5["diff()"]
  b4fcf087_084f_27d7_c2a4_74d4dadef3b5 -->|calls| 10184aee_4172_7de0_9408_131d59d38e8a
  style 10184aee_4172_7de0_9408_131d59d38e8a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/commands/diff.ts lines 147–201

async function diffComponent(
  component: z.infer<typeof registryIndexSchema>[number],
  config: Config
) {
  const payload = await fetchTree(config.style, [component])
  const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)

  if (!payload) {
    return []
  }

  const changes = []

  for (const item of payload) {
    const targetDir = await getItemTargetPath(config, item)

    if (!targetDir) {
      continue
    }

    for (const file of item.files ?? []) {
      const filePath = path.resolve(
        targetDir,
        typeof file === "string" ? file : file.path
      )

      if (!existsSync(filePath)) {
        continue
      }

      const fileContent = await fs.readFile(filePath, "utf8")

      if (typeof file === "string" || !file.content) {
        continue
      }

      const registryContent = await transform({
        filename: file.path,
        raw: file.content,
        config,
        baseColor,
      })

      const patch = diffLines(registryContent as string, fileContent)
      if (patch.length > 1) {
        changes.push({
          filePath,
          patch,
        })
      }
    }
  }

  return changes
}