shadcn-ui 多设计系统兼容架构深度分析#

export const BASES: z.infer<typeof registryItemSchema>[] = [
  {
    name: "radix",
    type: "registry:style",
    title: "Radix UI",
    description: "Optimized for fast development, easy maintenance, and accessibility.",
    dependencies: ["radix-ui"],  // npm 包依赖
    meta: {
      logo: "<svg>...</svg>",    // Radix UI logo
    },
  },
  {
    name: "base",
    type: "registry:style",
    title: "Base UI",
    description: "Components for building accessible web apps and design systems.",
    dependencies: ["@base-ui/react"],  // npm 包依赖
    meta: {
      logo: "<svg>...</svg>",          // Base UI logo
    },
  },
]

import { Dialog as DialogPrimitive } from "radix-ui"

// Radix UI 术语
function DialogOverlay({ ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return <DialogPrimitive.Overlay {...props} />
}

function DialogContent({ ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
  return (
    <DialogPrimitive.Content {...props}>
      {children}
      {showCloseButton && (
        // Radix UI 使用 asChild
        <DialogPrimitive.Close asChild>
          <Button>
            <XIcon />
          </Button>
        </DialogPrimitive.Close>
      )}
    </DialogPrimitive.Content>
  )
}

import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"

// Base UI 术语
function DialogOverlay({ ...props }: DialogPrimitive.Backdrop.Props) {
  return <DialogPrimitive.Backdrop {...props} />
}

function DialogContent({ ...props }: DialogPrimitive.Popup.Props) {
  return (
    <DialogPrimitive.Popup {...props}>
      {children}
      {showCloseButton && (
        // Base UI 使用 render prop
        <DialogPrimitive.Close
          render={<Button />}
        >
          <XIcon />
        </DialogPrimitive.Close>
      )}
    </DialogPrimitive.Popup>
  )
}

// bases/radix/ui/combobox.tsx 和 bases/base/ui/combobox.tsx 完全一样
import { Combobox as ComboboxPrimitive } from "@base-ui/react"

// 主流程
console.log("🏗️ Building bases...")
await buildBasesIndex(Array.from(BASES))  // 构建 bases/__index__.tsx
await buildBases(Array.from(BASES))       // 构建所有 base × style 组合

const stylesToBuild = getStylesToBuild()
// 结果：["radix-vega", "radix-nova", "radix-maia", "radix-lyra", "radix-mira",
//        "base-vega", "base-nova", "base-maia", "base-lyra", "base-mira"]

console.log("💅 Building styles...")
for (const style of stylesToBuild) {
  await buildRegistryJsonFile(style.name)
  await buildRegistry(style.name)
  console.log(`   ✅ ${style.name}`)
}

function getStylesToBuild() {
  const stylesToBuild: { name: string; title: string }[] = []

  // 笛卡尔积：BASES × STYLES
  for (const base of BASES) {
    for (const style of STYLES) {
      stylesToBuild.push({
        name: `${base.name}-${style.name}`,  // 如 "radix-vega"
        title: `${base.title} ${style.title}`,  // 如 "Radix UI Vega"
      })
    }
  }

  return stylesToBuild
}

async function buildBases(bases: Base[]) {
  for (const base of bases) {
    // 1. 读取 base 的 registry
    const { registry: baseRegistry } = await import(
      `../registry/bases/${base.name}/registry.ts`
    )

    // 2. 验证 Zod schema
    const result = registrySchema.safeParse(baseRegistry)
    if (!result.success) {
      throw new Error(`Invalid registry schema for ${base.name}`)
    }

    const registryItems = result.data.items

    // 3. 为每个 style 生成组合
    for (const style of STYLES) {
      console.log(`   ✅ ${base.name}-${style.name}...`)

      // 4. 创建输出目录
      const styleOutputDir = `registry/${base.name}-${style.name}`
      await fs.mkdir(styleOutputDir, { recursive: true })

      // 5. 读取 style 的样式映射
      const styleContent = await fs.readFile(
        path.join(process.cwd(), `registry/styles/style-${style.name}.css`),
        "utf8"
      )
      const styleMap = createStyleMap(styleContent)

      // 6. 转换每个组件文件
      for (const registryItem of registryItems) {
        for (const file of registryItem.files) {
          // 6.1 读取源文件
          const source = await fs.readFile(
            `registry/bases/${base.name}/${file.path}`,
            "utf8"
          )

          // 6.2 应用样式转换
          const transformedContent = await transformStyle(source, {
            styleMap: styleMap,
          })

          // 6.3 写入目标文件
          const outputPath = `registry/${base.name}-${style.name}/${file.path}`
          await fs.writeFile(outputPath, transformedContent)
        }
      }
    }
  }
}

// cn-button 是样式占位符
<button
  className={cn("cn-button", className)}
  {...props}
/>

.cn-button {
  @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2;
}

<button
  className={cn(
    "inline-flex items-center justify-center gap-2 rounded-md px-4 py-2",
    className
  )}
  {...props}
/>

// 用户代码（不需要知道底层是 Radix 还是 Base）
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button>Action</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

function DialogContent({ showCloseButton = true, children, ...props }) {
  return (
    <DialogPortal>
      <DialogOverlay />
      <DialogPrimitive.Content {...props}>
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close asChild>  {/* Radix UI 特性 */}
            <Button size="icon-sm">
              <XIcon />
            </Button>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogContent({ showCloseButton = true, children, ...props }) {
  return (
    <DialogPortal>
      <DialogOverlay />
      <DialogPrimitive.Popup {...props}>  {/* Base UI: Popup 而非 Content */}
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            render={<Button size="icon-sm" />}  {/* Base UI: render prop */}
          >
            <XIcon />
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Popup>
    </DialogPortal>
  )
}

// Radix UI Button
<DialogPrimitive.Close asChild>
  <Button variant="ghost" size="icon-sm">
    <XIcon />
  </Button>
</DialogPrimitive.Close>

// Base UI Button
<DialogPrimitive.Close
  render={<Button variant="ghost" size="icon-sm" />}
>
  <XIcon />
</DialogPrimitive.Close>

React.ComponentProps<typeof DialogPrimitive.Content>

DialogPrimitive.Popup.Props

// Radix Base
function DialogContent({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
  return <DialogPrimitive.Content {...props} />
}

// Base UI Base
function DialogContent({
  ...props
}: DialogPrimitive.Popup.Props) {
  return <DialogPrimitive.Popup {...props} />
}

npx shadcn@latest init

{
  "style": "radix-vega",  // 或 "base-vega"
  "registries": {
    "@shadcn": "https://ui.shadcn.com/r/styles/{style}/{name}.json"
  }
}

# 添加 button 组件（Radix UI 实现）
GET https://ui.shadcn.com/r/styles/radix-vega/button.json

# 添加 button 组件（Base UI 实现）
GET https://ui.shadcn.com/r/styles/base-vega/button.json

{
  "name": "button",
  "type": "registry:ui",
  "dependencies": ["@radix-ui/react-slot"],  // Radix 版本
  // 或 "@base-ui/react" 对于 Base 版本
  "files": [
    {
      "path": "ui/button.tsx",
      "content": "...",  // 完整源代码
      "type": "registry:ui",
      "target": "components/ui/button.tsx"
    }
  ],
  "tailwind": {
    "config": {
      "plugins": ["tailwindcss-animate"]
    }
  }
}

// 1. 读取 components.json
const config = await getConfig()
const style = config.style  // "radix-vega" 或 "base-vega"

// 2. 构建 Registry URL
const registryUrl = config.registries["@shadcn"]
  .replace("{style}", style)
  .replace("{name}", "button")

// 3. 获取组件数据
const componentData = await fetch(registryUrl).then(r => r.json())

// 4. 安装 npm 依赖
if (componentData.dependencies) {
  await installDependencies(componentData.dependencies)
  // 对于 radix-vega: npm install @radix-ui/react-slot
  // 对于 base-vega: npm install @base-ui/react
}

// 5. 写入文件
for (const file of componentData.files) {
  const targetPath = path.join(config.resolvedPaths.components, file.target)
  await fs.writeFile(targetPath, file.content)
}

// ❌ 在运行时判断使用哪个库
function Dialog({ useRadix = true, ...props }) {
  if (useRadix) {
    return <RadixDialog {...props} />
  } else {
    return <BaseDialog {...props} />
  }
}

// ✅ 构建时生成不同版本
// radix-vega/ui/dialog.tsx
import { Dialog as DialogPrimitive } from "radix-ui"

// base-vega/ui/dialog.tsx
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"

// 用户只会下载其中一个版本

// bases/radix/ui/combobox.tsx
import { Combobox as ComboboxPrimitive } from "@base-ui/react"

// bases/base/ui/combobox.tsx
import { Combobox as ComboboxPrimitive } from "@base-ui/react"

{
  "style": "base-vega"  // 从 "radix-vega" 改为 "base-vega"
}

npx shadcn@latest add button --overwrite

# 自动安装 @base-ui/react
npm install @base-ui/react

# 如果不再使用 Radix UI 组件，可以卸载
npm uninstall @radix-ui/react-dialog @radix-ui/react-slot ...

mkdir apps/v4/registry/bases/ariakit
cd apps/v4/registry/bases/ariakit

import { type Registry } from "shadcn/schema"

export const registry = {
  name: "shadcn/ui",
  homepage: "https://ui.shadcn.com",
  items: [
    {
      name: "button",
      type: "registry:ui",
      files: ["ui/button.tsx"],
      dependencies: ["ariakit"],
    },
    // ... 更多组件
  ],
} satisfies Registry

// apps/v4/registry/bases/ariakit/ui/button.tsx
import * as Ariakit from "ariakit"

function Button({ className, ...props }) {
  return (
    <Ariakit.Button
      className={cn("cn-button", className)}
      {...props}
    />
  )
}

// apps/v4/registry/bases.ts
export const BASES = [
  { name: "radix", ... },
  { name: "base", ... },
  {
    name: "ariakit",
    type: "registry:style",
    title: "Ariakit",
    dependencies: ["ariakit"],
  },
]

pnpm run registry:build