├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── packages ├── app │ ├── next-env.d.ts │ ├── package.json │ ├── pages │ │ └── index.tsx │ └── tsconfig.json └── ui-library │ ├── .gitignore │ ├── .storybook │ ├── config.js │ └── webpack.config.js │ ├── components │ ├── Button │ │ ├── Button.stories.tsx │ │ └── Button.tsx │ ├── Link │ │ ├── Link.stories.tsx │ │ └── Link.tsx │ └── index.ts │ ├── package.json │ ├── rollup.config.ts │ └── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Ströer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tree-shakable component library with TypeScript, StoryBook & Next.js 2 | 3 | This repository is the demonstration of my dev.to article 4 | 5 | 👉 https://dev.to/lukasbombach/how-to-write-a-tree-shakable-component-library-4ied 6 | 7 | demonstrating how to implement a tree-shakable component library (with TypeScript, StoryBook & Next.js 8 | all in a Monorepo). 9 | 10 | For questions you can find me on twitter as [@luke_schmuke](https://twitter.com/luke_schmuke/) 11 | 12 | ## Install 13 | 14 | ```bash 15 | git clone https://github.com/LukasBombach/tree-shakable-component-library 16 | cd tree-shakable-component-library 17 | yarn 18 | ``` 19 | 20 | ## Run 21 | 22 | This MonoRepo has 2 packages 23 | 24 | - [`app`](./packages/app) and 25 | - [`ui-library`](./packages/ui-library) 26 | 27 | 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). 28 | 29 | You can run the app by switching to the app folder and run `yarn dev` or `yarn start`\*
30 | \* both packages have `postinstall` script that runs `yarn build` in each project 31 | 32 | ### Run the app 33 | 34 | ```bash 35 | cd packages/app 36 | yarn dev 37 | ``` 38 | 39 | You can also run StoryBook from within the `ui-library` 40 | 41 | ### Run StoryBook 42 | 43 | ```bash 44 | cd packages/ui-library 45 | yarn storybook 46 | ``` 47 | 48 | You can change or add new components by running 49 | 50 | ### Develop new components 51 | 52 | ```bash 53 | cd packages/ui-library 54 | yarn build -w 55 | ``` 56 | 57 | in another terminal you can run the app in parallel and it will auto-update with hot-module-reloading 58 | 59 | ```bash 60 | cd packages/app 61 | yarn dev 62 | ``` 63 | 64 | ## See the tree-shaking 65 | 66 | You can very simple see that the app actually does tree-shake your code by opening this project in a code 67 | editor and searching all files in `packages/app/.next` and 68 | 69 | 1. searching for the string `I SHOULD BE HERE`, which should be found. 70 | This string is part of the [`Button`](./packages/ui-library/components/Button/Button.tsx) component 71 | which has been loaded into the app 72 | 2. then search for the string `I MUST NOT BE HERE` 73 | This string is part of the [`Link`](./packages/ui-library/components/Link/Link.tsx) component which has 74 | **not** been loaded into the app even though it has been bundled in the ui library and should not be 75 | bundled in the app. 76 | 3. check out the file `packages/ui-library/lib/index.esm.js` which is the bundled file of the ui-library which 77 | includes all components 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tree-shakable-component-library", 3 | "version": "1.0.0", 4 | "repository": "https://github.com/LukasBombach/tree-shakable-component-library", 5 | "author": "Lukas Bombach ", 6 | "license": "MIT", 7 | "private": true, 8 | "workspaces": [ 9 | "packages/*" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /packages/app/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /packages/app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "next", 8 | "build": "next build", 9 | "start": "next start", 10 | "postinstall": "yarn build" 11 | }, 12 | "dependencies": { 13 | "next": "9.2.1", 14 | "react": "16.12.0", 15 | "react-dom": "16.12.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "13.7.0", 19 | "typescript": "3.7.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/app/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "ui-library"; 2 | 3 | export default function HomePage() { 4 | return ( 5 |
6 |

Welcome to t-online

7 |

8 | 9 |

10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": false, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve" 16 | }, 17 | "exclude": ["node_modules"], 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/ui-library/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | -------------------------------------------------------------------------------- /packages/ui-library/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from "@storybook/react"; 2 | 3 | const loader = require.context("../components", true, /\.stories\.tsx?$/); 4 | 5 | configure(loader, module); 6 | -------------------------------------------------------------------------------- /packages/ui-library/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = ({ config }) => { 2 | config.module.rules.push({ 3 | test: /\.tsx?$/, 4 | loader: require.resolve("babel-loader"), 5 | options: { 6 | presets: [require.resolve("babel-preset-react-app")], 7 | }, 8 | }); 9 | 10 | config.resolve.extensions.push(".ts", ".tsx"); 11 | 12 | return config; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ui-library/components/Button/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Button from "./Button"; 3 | 4 | export default { title: "Button", component: Button }; 5 | 6 | export const withText = () => ; 7 | -------------------------------------------------------------------------------- /packages/ui-library/components/Button/Button.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react"; 2 | 3 | export interface ButtonProps { 4 | children?: ReactNode; 5 | } 6 | 7 | export default ({ children }: ButtonProps) => ; 8 | -------------------------------------------------------------------------------- /packages/ui-library/components/Link/Link.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "./Link"; 3 | 4 | export default { title: "Link", component: Link }; 5 | 6 | export const withText = () => ; 7 | -------------------------------------------------------------------------------- /packages/ui-library/components/Link/Link.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react"; 2 | 3 | export interface LinkProps { 4 | children?: ReactNode; 5 | href?: string; 6 | } 7 | 8 | export default ({ children, href }: LinkProps) => ( 9 | I MUST NOT BE HERE 10 | ); 11 | -------------------------------------------------------------------------------- /packages/ui-library/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Button } from "./Button/Button"; 2 | export { default as Link } from "./Link/Link"; 3 | -------------------------------------------------------------------------------- /packages/ui-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-library", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "storybook": "start-storybook -p 6006 -c .storybook", 7 | "build": "rollup -c rollup.config.ts", 8 | "postinstall": "yarn build" 9 | }, 10 | "main": "lib/index.cjs.js", 11 | "module": "lib/index.esm.js", 12 | "types": "lib/types", 13 | "devDependencies": { 14 | "@babel/core": "7.8.4", 15 | "@rollup/plugin-commonjs": "11.0.2", 16 | "@rollup/plugin-node-resolve": "7.1.1", 17 | "@storybook/react": "5.3.12", 18 | "babel-loader": "8.0.6", 19 | "babel-preset-react-app": "9.1.1", 20 | "react": "16.12.0", 21 | "react-dom": "16.12.0", 22 | "rollup": "1.31.0", 23 | "rollup-plugin-typescript2": "0.25.3", 24 | "typescript": "3.7.5" 25 | }, 26 | "peerDependencies": { 27 | "react": ">=16.8", 28 | "react-dom": ">=16.8" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/ui-library/rollup.config.ts: -------------------------------------------------------------------------------- 1 | import commonjs from "@rollup/plugin-commonjs"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import typescript from "rollup-plugin-typescript2"; 4 | import pkg from "./package.json"; 5 | 6 | export default { 7 | input: "components/index.ts", 8 | output: [ 9 | { 10 | file: pkg.main, 11 | format: "cjs", 12 | }, 13 | { 14 | file: pkg.module, 15 | format: "es", 16 | }, 17 | ], 18 | external: ["react"], 19 | plugins: [ 20 | resolve(), 21 | commonjs(), 22 | typescript({ 23 | useTsconfigDeclarationDir: true, 24 | }), 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/ui-library/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "declarationDir": "lib/types", 5 | "esModuleInterop": true, 6 | "moduleResolution": "Node", 7 | "jsx": "react", 8 | "resolveJsonModule": true, 9 | "strict": true, 10 | "target": "ESNext" 11 | }, 12 | "include": ["components/**/*"], 13 | "exclude": ["components/**/*.stories.tsx"] 14 | } 15 | --------------------------------------------------------------------------------