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:
47
vite.lib.config.ts
Normal file
47
vite.lib.config.ts
Normal 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,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user