react-comp-lib-enterprise

Enterprise React component library built on BlueprintJS and AgGrid.

| Feature | Detail | |---------|--------| | 🌲 Tree-shaking | sideEffects manifest + usedExports + ESM build | | ✂️ Code splitting | Per-component webpack entry → individual dist/esm/<Name>.js chunks | | 💤 Lazy loading | React.lazy() + Suspense — demo in demo/App.jsx | | ⚡ Fast Refresh | @pmmmwh/react-refresh-webpack-plugin — state preserved across hot reloads | | 🐛 Debuggable | Inline source maps in every output file | | 🚀 Production cache | Webpack 5 filesystem cache + babel-loader cache | | 📦 Bundle analysis | npm run build:analyze → bundle-report.html | | 🔍 ESLint + Prettier | Pre-configured, run npm run lint / npm run format |

Quick start

npm install
npm start              # demo app → http://localhost:3000  (Hot Reload + Fast Refresh)
npm test               # run all specs
npm run build          # build library → dist/
npm run build:analyze  # build + open bundle-report.html
npm run lint           # ESLint
npm run format         # Prettier

Project structure

react-comp-lib/
├── src/
│   ├── index.js                    ← manual barrel — edit when adding components
│   └── components/
│       ├── specs/                  ← ALL unit tests live here
│       │   ├── AgDataGrid.spec.js
│       │   ├── BpAlert.spec.js
│       │   ├── BpButton.spec.js
│       │   ├── BpCard.spec.js
│       │   ├── BpInput.spec.js
│       │   └── BpTag.spec.js
│       ├── AgDataGrid/
│       ├── BpAlert/
│       ├── BpButton/
│       ├── BpCard/
│       ├── BpInput/
│       └── BpTag/
├── demo/                           ← local dev app (lazy-loaded sections)
├── webpack.lib.config.js           ← CJS + ESM library build
├── webpack.demo.config.js          ← dev server with React Fast Refresh
├── babel.config.js
├── jest.config.js
├── jest.setup.js
├── .eslintrc.js
├── .prettierrc
└── package.json

Adding a new component

1. Create src/components/MyComp/MyComp.jsx
2. Create src/components/MyComp/index.js → export { MyComp } from "./MyComp";
3. Add a line in src/index.js → export * from "./components/MyComp";
4. Add an entry in webpack.lib.config.js → MyComp: "./src/components/MyComp/index.js"
5. Create src/components/specs/MyComp.spec.js

Tree-shaking

Webpack 5 / Vite eliminate unused components at build time via the ESM output:

import { BpButton } from "react-comp-lib";          // only BpButton chunk loaded
import "react-comp-lib/dist/styles.css";

Three mechanisms work together:

| Mechanism | Where | |-----------|-------| | "sideEffects": ["*.css"] | package.json — marks JS as side-effect free | | usedExports: true | webpack.lib.config.js — annotates unused exports for Terser | | ESM output (type: "module") | webpack.lib.config.js — static imports = eliminatable |

Code splitting

The library ships one JS file per component in dist/esm/:

dist/esm/BpButton.js    ← 3 kB
dist/esm/BpCard.js      ← 2 kB
dist/esm/AgDataGrid.js  ← 4 kB

Import only what you use — the rest never enters your bundle.

Lazy loading (consumer)

import { lazy, Suspense } from "react";

const AgDataGrid = lazy(() =>
  import("react-comp-lib/dist/esm/AgDataGrid")
    .then(m => ({ default: m.AgDataGrid }))
);

function App() {
  return (
    <Suspense fallback={<div>Loading grid…</div>}>
      <AgDataGrid rowData={rows} columnDefs={cols} />
    </Suspense>
  );
}

React Fast Refresh (HMR)

npm start runs webpack-dev-server with @pmmmwh/react-refresh-webpack-plugin. Edit any component — React state is preserved, only the changed component re-renders.

react-refresh/babel is injected by webpack-dev-server's babel-loader options only, never by babel.config.js, so it never contaminates the library build or test runs.

Bundle analysis

npm run build:analyze
# Opens bundle-report.html — shows per-module size breakdown

Production caching

| Layer | Mechanism | |-------|-----------| | Webpack build cache | cache: { type: "filesystem" } in webpack.lib.config.js — stores compilation graph on disk between builds | | Babel cache | babel-loader cacheDirectory: true — skips re-transpiling unchanged files | | Consumer CDN caching | dist/esm/[name].js filenames are stable — publish with a version bump to invalidate |

Publishing

npm test && npm run build          # verify everything passes
npm pack --dry-run                 # check file list
npm version patch                  # bump semver
npm publish --access public

License

MIT