Add library build for package distribution

Add a separate Vite library build (vite.lib.config.ts + `build:lib`) that
bundles src/index.ts to ESM with React/react-dom externalised and the 97
internal `@/` imports resolved at build time, plus type declarations and
copies of tokens.css / typography.css into dist. Point package.json
exports/main/types at dist and make react a peer dependency, so ADS can be
consumed as an installed package (@geljic/ads3-design-system) rather than a
file: + `@/` alias dependency.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-05 12:44:26 +10:00
parent 1c87e23e5d
commit 69751eb6f2
3 changed files with 731 additions and 12 deletions

47
vite.lib.config.ts Normal file
View File

@@ -0,0 +1,47 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts'
import { resolve } from 'node:path'
// Library build for distribution as an installable package (@geljic/ads3-design-system).
// Kept separate from vite.config.ts so the Storybook + Vitest setup there stays untouched.
// Build with: npm run build:lib
export default defineConfig({
plugins: [
react(),
dts({
tsconfigPath: './tsconfig.app.json',
// Emit `dist/index.d.ts` (+ per-file declarations) rather than nesting under dist/src.
entryRoot: 'src',
include: ['src'],
exclude: [
'src/**/*.stories.tsx',
'src/**/*.test.tsx',
'src/main.tsx',
'src/App.tsx',
'src/**/_story-helpers*',
],
}),
],
resolve: {
// Resolve ADS's 97 internal `@/...` imports at build time so they never leak to consumers.
alias: { '@': resolve(__dirname, 'src') },
},
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
formats: ['es'],
fileName: () => 'index.js',
},
rollupOptions: {
// React is a peer dep — externalise it (and the automatic JSX runtime) to avoid bundling a
// second copy. Everything else (clsx, tailwind-merge, @floating-ui) is small and bundled.
external: ['react', 'react-dom', 'react/jsx-runtime'],
output: { preserveModules: false },
},
sourcemap: true,
emptyOutDir: true,
// Library output only — don't copy public/ (favicons, logos) into the package.
copyPublicDir: false,
},
})