This repository is the demonstration of my dev.to article
๐ https://dev.to/lukasbombach/how-to-write-a-tree-shakable-component-library-4ied
demonstrating how to implement a tree-shakable component library (with TypeScript, StoryBook & Next.js all in a Monorepo).
For questions you can find me on twitter as @luke_schmuke
git clone https://github.com/LukasBombach/tree-shakable-component-library
cd tree-shakable-component-library
yarn
This MonoRepo has 2 packages
app
andui-library
The app
is a Next.js app that consumes the ui-library
in the index.tsx
page while the ui-library
provides bundled components.
You can run the app by switching to the app folder and run yarn dev
or yarn start
*
* both packages have postinstall
script that runs yarn build
in each project
cd packages/app
yarn dev
You can also run StoryBook from within the ui-library
cd packages/ui-library
yarn storybook
You can change or add new components by running
cd packages/ui-library
yarn build -w
in another terminal you can run the app in parallel and it will auto-update with hot-module-reloading
cd packages/app
yarn dev
You can very simple see that the app actually does tree-shake your code by opening this project in a code
editor and searching all files in packages/app/.next
and
- searching for the string
I SHOULD BE HERE
, which should be found. This string is part of theButton
component which has been loaded into the app - then search for the string
I MUST NOT BE HERE
This string is part of theLink
component which has not been loaded into the app even though it has been bundled in the ui library and should not be bundled in the app. - check out the file
packages/ui-library/lib/index.esm.js
which is the bundled file of the ui-library which includes all components