A small package used to dynamically load React applications and / or components that are bundled independently. This package aims to fill a space where a user wants to control how their application is bundled and not be tied to any specific bundle tool.
For most, using React.lazyload in combination with split chunks will be the preferable choice or utilizing the package loadable. However these methods rely on the bundler to split code into chunks by parsing dynamic import statements placed by a user to designate where code should be split.
react-bndl takes a different approach, allowing the user to create dedicated bundles using the compiling tools of their choice. Finally, bundles are loaded via the document script process, which allows for more complex management when it comes to splitting and loading application code.
There are two main pieces to react-bndl, BundleComponent and useBundle. Each has their own use case, but most will probably use BundleComponent.
npm install react-bndl
BundleComponent is a react component that will load deployed react bundles asynchronously, displaying a loading state until completed. A custom loader can be supplied via LoaderComponent. The component also has an onError callback in the event loading the bundle encounters an error internally.
- See more here
Example: Component + Custom Loader
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import { BundleComponent } from 'react-bndl';
function App() {
return (
<>
<BundleComponent
path="./assets/home.js"
name="@app/home"
LoaderComponent={
<Box sx={{ display: 'flex' }}>
<CircularProgress />
</Box>
}
onError={
(error) => console.log(error)
}
/>
<>
)
}Example: React Router
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { BundleComponent } from 'react-bndl';
export function App() {
return (
<Routes>
<Route path="about"
element={
<BundleComponent
path="./assets/about.js"
name="@app/about"
/>
}
/>
<Route path="/"
element={
<BundleComponent
path="./assets/home.js"
name="@app/home"
/>
}
/>
</Routes>
);
};The useBundle hook allows you to manage when each bundle is loaded, and the current state of loading them.
- See more here
Example: Hook & DynamicComponent
import { DynamicComponent, useBundle } from 'react-bndl';
export function App() {
const { isLoading, data, error } = useBundle({
path: './assets/home.js',
name:'@app/home'
});
useEffect(() => {
if (error) {
// Report error
}
}, [error]);
return (
<>
{(isLoading && !data)?
<div>Loading</div> :
(!isLoading && error)?
<div>{error.message}</div>:
<DynamicComponent component={data}>
Dynamic Component
</DynamicComponent>
}
</>
);
};A demo application was created to mimic the use cases for this package, it imports the library source code by using pnpm workspaces. All information related to the demo can be found here.
- Requires NodeJS v18.16+ and PNPM v8.0+
Install all dependencies, create vendors bundle for demo application
pnpm install
Run demo application in development mode to test react-bndl library
pnpm start
start: Starts development server and builds demo application in development modestart: Starts development server onlybuild:lib: Create production distribution that exports a CommonJS and ESM version of the react-bndl librarybuild:app: Create a production bundle of the demo applicationfix:lint: Attempt to fix any lint errorstest:lint: Check lint in packagestest:types: Type check packagestest:component: Run Jest unit tests for lib/srctest:end-to-end: Run Playwright tests that utilize the demo application to mock a real implementationtest:integration: Run Playwright Component tests against the distribution of the react-bndl lib ESM file
For all unit and component testing, the React version of Testing Library is used. For end to end testing, and integration testing for the package distribution Playwright testing is leveraged. Playwright's experimental component testing is used as well, see more here.