Skip to content

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

Description

@anastasialanz

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:libvite build, devvite 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions