dequelabs / dequelabs/cauldron

chore(react): migrate library build from Rollup to Vite (lib mode)

Open
#2,348 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

## 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

1. Icon dynamic imports — Vite ships `@rollup/plugin-dynamic-import-vars` internally; verify per-icon chunks are still emitted
2. SVGR output parity (both plugins wrap `@svgr/core`; spot-check one icon)
3. `process.env.NODE_ENV` must not be inlined in the lib build
4. `.d.ts` emission via `vite-plugin-dts` instead of `@rollup/plugin-typescript`
5. The `/^react-syntax-highlighter/` external regex must be preserved exactly

## Verification plan

- [ ] `yarn --cwd=packages/react build` produces `lib/` with parity to the previous Rollup output (`diff -r` the trees; bundle size within ~5%)
- [ ] `lib/` still contains `process.env.NODE_ENV` as a runtime reference
- [ ] `lib/index.d.ts` and per-component `.d.ts` files are present and type-check
- [ ] Docs site (`yarn dev` from repo root) renders icons correctly against the new `lib/`
- [ ] `yarn --cwd=packages/react test` passes (tests don't go through the bundler, so should be unaffected)
- [ ] Playwright CT screenshots (`yarn screenshots`) catch no visual regressions
- [ ] `npm pack --dry-run` in `packages/react` matches today's published file list

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.