Project 8: Publishing a Cross-Framework Component Library

examples/library-mode-demo/
├── pnpm-workspace.yaml
├── package.json (root)
└── packages/
    ├── core/              ← Framework-agnostic core logic
    │   ├── src/index.ts
    │   ├── vite.config.ts
    │   └── package.json
    ├── react/             ← React adapter
    ├── vue/               ← Vue 3 adapter
    ├── svelte/            ← Svelte adapter
    └── solid/             ← Solid.js adapter

export interface ButtonConfig {
  variant: "primary" | "secondary" | "ghost"
  size: "sm" | "md" | "lg"
  disabled: boolean
}

/** Generate CSS class names from config */
export function getButtonClasses(config: Partial<ButtonConfig>): string {
  const { variant = "primary", size = "md", disabled = false } = config
  const base = "btn"
  const variants = { primary: "btn-primary", secondary: "btn-secondary", ghost: "btn-ghost" }
  const sizes = { sm: "btn-sm", md: "btn-md", lg: "btn-lg" }
  const disabledCls = disabled ? "btn-disabled" : ""
  return [base, variants[variant], sizes[size], disabledCls].filter(Boolean).join(" ")
}

import { defineConfig } from "vite"
import { resolve } from "node:path"

export default defineConfig({
  build: {
    lib: {
      entry: resolve("src/index.ts"),
      formats: ["es", "cjs"],
      fileName: (format) => `index.${format === "es" ? "js" : "cjs"}`,
    },
  },
})

import type { ButtonHTMLAttributes } from "react"
import { getButtonClasses, type ButtonConfig } from "@ui-kit/core"

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<ButtonConfig> {
  children: React.ReactNode
}

export function Button({ variant, size, disabled, children, className = "", ...props }: ButtonProps) {
  const classes = getButtonClasses({ variant, size, disabled: disabled ?? false })
  return (
    <button className={`${classes} ${className}`} disabled={disabled} {...props}>
      {children}
    </button>
  )
}

export type { ButtonConfig }

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { resolve } from "node:path"

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: resolve("src/index.tsx"),
      formats: ["es", "cjs"],
      fileName: (format) => `index.${format === "es" ? "js" : "cjs"}`,
    },
    rolldownOptions: {
      external: ["react", "react/jsx-runtime", "@ui-kit/core"],
      output: {
        globals: { react: "React", "@ui-kit/core": "UIKitCore" },
      },
    },
  },
})

<script setup lang="ts">
import { computed } from "vue"
import { getButtonClasses } from "@ui-kit/core"
import type { ButtonConfig } from "@ui-kit/core"

const props = withDefaults(defineProps<Partial<ButtonConfig>>(), {
  variant: "primary",
  size: "md",
  disabled: false,
})

const classes = computed(() => getButtonClasses(props))
</script>

<template>
  <button :class="classes" :disabled="disabled">
    <slot />
  </button>
</template>

cd examples/library-mode-demo
pnpm install

# Build core first (other packages depend on it)
pnpm -F @ui-kit/core build

# Then build each framework adapter
pnpm -F @ui-kit/react build
pnpm -F @ui-kit/vue build
# ...

pnpm build  # Turborepo builds in dependency order

// React project
import { Button } from "@ui-kit/react"
;<Button variant="primary" size="lg">
  Click me
</Button>

// Vue project
import { Button } from "@ui-kit/vue"
;<Button variant="secondary">Click me</Button>

// Svelte project
import { Button } from "@ui-kit/svelte"
;<Button>Click me</Button>

// Add Input component core logic to @ui-kit/core:
// - InputConfig: { type: "text" | "password" | "email", disabled, error }
// - getInputClasses(config): returns a CSS class name string
// - validateInput(value: string, type: InputConfig["type"]): boolean

export interface InputConfig {
  // TODO
}

export function getInputClasses(config: Partial<InputConfig>): string {
  // TODO
}

export function validateInput(value: string, type: InputConfig["type"]): boolean {
  // TODO
}