Summary
Replace the Rollup-based build of @deque/cauldron-react with Vite's library mode. packages/react is the only package that would change — packages/styles (postcss-cli), the docs site (webpack), and Playwright CT (already on Vite) stay as-is.
The migration must preserve the published contract:
main: lib/index.js (CJS), types: lib/index.d.ts, style: lib/cauldron.css
- Code-split chunks for the icon SVGs (driven by
import(`./icons/${iconName}.svg`) in packages/react/src/components/Icon/index.tsx)
- Externals:
dependencies + peerDependencies + /^react-syntax-highlighter/
- SVGR svgo config:
removeViewBox: false, removeDimensions, force width=24/height=24
process.env.NODE_ENV left as a runtime reference (Icon's test-mode guard depends on it)
Proposed approach
- Add
packages/react/vite.config.ts using build.lib + @vitejs/plugin-react + vite-plugin-svgr + vite-plugin-dts
- Swap
devDependencies: drop rollup, @rollup/plugin-typescript, @rollup/plugin-commonjs, @rollup/plugin-dynamic-import-vars, @svgr/rollup; add vite, @vitejs/plugin-react, vite-plugin-svgr, vite-plugin-dts
- Update scripts:
build:lib → vite build, dev → vite build --watch (CSS step unchanged)
- Delete
packages/react/rollup.config.js after parity is verified
- Out of scope: Jest setup,
.babelrc, postcss.config.js, the docs-site webpack config
Migration risks
- Icon dynamic imports — Vite ships
@rollup/plugin-dynamic-import-vars internally; verify per-icon chunks are still emitted
- SVGR output parity (both plugins wrap
@svgr/core; spot-check one icon)
process.env.NODE_ENV must not be inlined in the lib build
.d.ts emission via vite-plugin-dts instead of @rollup/plugin-typescript
- The
/^react-syntax-highlighter/ external regex must be preserved exactly
Verification plan
Summary
Replace the Rollup-based build of
@deque/cauldron-reactwith Vite's library mode.packages/reactis the only package that would change —packages/styles(postcss-cli), the docs site (webpack), and Playwright CT (already on Vite) stay as-is.The migration must preserve the published contract:
main: lib/index.js(CJS),types: lib/index.d.ts,style: lib/cauldron.cssimport(`./icons/${iconName}.svg`)inpackages/react/src/components/Icon/index.tsx)dependencies+peerDependencies+/^react-syntax-highlighter/removeViewBox: false,removeDimensions, forcewidth=24/height=24process.env.NODE_ENVleft as a runtime reference (Icon's test-mode guard depends on it)Proposed approach
packages/react/vite.config.tsusingbuild.lib+@vitejs/plugin-react+vite-plugin-svgr+vite-plugin-dtsdevDependencies: droprollup,@rollup/plugin-typescript,@rollup/plugin-commonjs,@rollup/plugin-dynamic-import-vars,@svgr/rollup; addvite,@vitejs/plugin-react,vite-plugin-svgr,vite-plugin-dtsbuild:lib→vite build,dev→vite build --watch(CSS step unchanged)packages/react/rollup.config.jsafter parity is verified.babelrc,postcss.config.js, the docs-site webpack configMigration risks
@rollup/plugin-dynamic-import-varsinternally; verify per-icon chunks are still emitted@svgr/core; spot-check one icon)process.env.NODE_ENVmust not be inlined in the lib build.d.tsemission viavite-plugin-dtsinstead of@rollup/plugin-typescript/^react-syntax-highlighter/external regex must be preserved exactlyVerification plan
yarn --cwd=packages/react buildproduceslib/with parity to the previous Rollup output (diff -rthe trees; bundle size within ~5%)lib/still containsprocess.env.NODE_ENVas a runtime referencelib/index.d.tsand per-component.d.tsfiles are present and type-checkyarn devfrom repo root) renders icons correctly against the newlib/yarn --cwd=packages/react testpasses (tests don't go through the bundler, so should be unaffected)yarn screenshots) catch no visual regressionsnpm pack --dry-runinpackages/reactmatches today's published file list