Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukasbombach/tree-shakable-component-library
A blueprint for a component library with tree-shaking, TypeScript and a MonoRepo
https://github.com/lukasbombach/tree-shakable-component-library
component-library design-system tree-shaking typescript
Last synced: about 16 hours ago
JSON representation
A blueprint for a component library with tree-shaking, TypeScript and a MonoRepo
- Host: GitHub
- URL: https://github.com/lukasbombach/tree-shakable-component-library
- Owner: LukasBombach
- License: mit
- Created: 2020-02-06T11:08:25.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T03:36:28.000Z (about 4 years ago)
- Last Synced: 2023-03-11T14:25:50.609Z (over 1 year ago)
- Topics: component-library, design-system, tree-shaking, typescript
- Language: TypeScript
- Homepage:
- Size: 1.92 MB
- Stars: 78
- Watchers: 2
- Forks: 8
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tree-shakable component library with TypeScript, StoryBook & Next.js
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](https://twitter.com/luke_schmuke/)
## Install
```bash
git clone https://github.com/LukasBombach/tree-shakable-component-library
cd tree-shakable-component-library
yarn
```
## Run
This MonoRepo has 2 packages
- [`app`](./packages/app) and
- [`ui-library`](./packages/ui-library)
The `app` is a Next.js app that _consumes_ the `ui-library` in the [`index.tsx` page](./packages/app/pages/index.tsx) while the `ui-library` provides bundled [components](./packages/ui-library/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
### Run the app
```bash
cd packages/app
yarn dev
```
You can also run StoryBook from within the `ui-library`
### Run StoryBook
```bash
cd packages/ui-library
yarn storybook
```
You can change or add new components by running
### Develop new components
```bash
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
```bash
cd packages/app
yarn dev
```
## See the tree-shaking
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
1. searching for the string `I SHOULD BE HERE`, which should be found.
This string is part of the [`Button`](./packages/ui-library/components/Button/Button.tsx) component
which has been loaded into the app
2. then search for the string `I MUST NOT BE HERE`
This string is part of the [`Link`](./packages/ui-library/components/Link/Link.tsx) 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.
3. check out the file `packages/ui-library/lib/index.esm.js` which is the bundled file of the ui-library which
includes all components