\n\n## Overview\n\nThis is a starter template for JavaScript libraries, using [Rollup](https://www.rollupjs.org/) module bundler. It generates a dual-module package (ESM + CommonJS), ready to be published to NPM.\n\nRead the accompanying [blog post](https://www.misha.wtf/blog/rollup-library-starter) for full details on this template.\n\n## Usage\n\nTo use this template as the base of your project, clone it using git:\n\n```bash\ngit clone https://github.com/mryechkin/rollup-library-starter.git \ncd \n```\n\nThen make it your own:\n\n```bash\nrm -rf .git && git init && npm init\ngit add .\ngit commit -m \"Initial commit\"\n```\n\nInstall dependencies:\n\n```bash\nnpm i\n```\n\nModify and structure code inside `src` as needed.\n\nThen, build the package:\n\n```bash\nnpm run build\n```\n\nThis will generate a dual-bundle package inside the `dist` folder, with both `esm` and `cjs` versions of the library code (ES Modules, and CommonJS).\n\n## Project Structure\n\nThis template follows a file structure that generally looks like this:\n\n```\nsrc/\n├── components/\n│ ├── Component1/\n│ │ ├── Component1.js\n│ │ └── index.js\n│ ├── Component2/\n│ │ ├── Component2.js\n│ │ └── index.js\n│ └── index.js\n├── utils/\n│ └── index.js\n└── index.js\n```\n\nAbove, `src` is the main folder for all of the library code. Inside it there are `components` and `utils` folders, and the main `index.js` file.\n\nThe `components` and `utils` folders are there for example purposes, but you can use these as your starting point for organizing your library code.\n\n### Barrel File (index.js)\n\nThe root-level `index.js` will be the entry point into the library. Often called a \"barrel\" file, it exports everything that you'd like to have included in the bundle:\n\n```jsx\n// src/index.js\nexport * from './components';\nexport * from './utils';\n```\n\nThe above will export everything from `components` and `utils`, which in turn each have an `index.js` of their own.\n\nHaving this root `index.js` file is the only hard requirement for this template, as it's used by Rollup to configure the entry point of the library. When it comes to folders and how they're organized, that is entirely up to your library's needs.\n\n### Folders\n\nInside `components`, there are two more folders - `Component1` and `Component2` - one for each individual component in our library. We also have an `index.js` file to specify all the exports, similar to the root one:\n\n```jsx\n// src/components/index.js\nexport { default as Component1 } from './Component1';\nexport { default as Component2 } from './Component2';\n```\n\nThe above will re-export the default export of each specified folder (in this case `Component1` and `Component2`). If there were named exports, you can re-export those as well:\n\n```jsx\n// src/components/index.js\nexport { default as Component1, foo, bar } from './Component1';\n```\n\nThe convention for the component folders is to have a main component file `Component1.js`, and an `index.js` file with the exports.\n\nFor example, for the `Button` component:\n\n```jsx\n// src/components/Button/Button.js\nconst Button = (props) => {\n // ...\n};\n\nexport const VARIANT = {\n PRIMARY: 'primary',\n SECONDARY: 'secondary',\n};\n\nexport default Button;\n```\n\nHere, we have the main `Button` component itself as the **default** export, and the `VARIANT` constant as a **named** export.\n\nThen, inside the `Button` index file, we re-export them:\n\n```jsx\n// src/components/Button/index.js\nimport Button, { VARIANT } from './Button';\n\nexport default Object.assign(Button, {\n VARIANT,\n});\n```\n\nNotice the `Object.assign()` above. This lets us assign the `VARIANT` constant as a static property on the `Button` component, allowing for something like this:\n\n```jsx\nimport { Button } from 'my-library';\n\n;\n```\n\nThis convention allows for a clean way to organize your modules, and works great with Rollup. Rollup will also warn you if there are any circular dependencies in your modules.\n\nFor more details, see the [blog post](https://www.misha.wtf/blog/rollup-library-starter#folder-structure).\n\n## Plugins\n\nThis template includes the following [Rollup](https://www.rollupjs.org/) plugins:\n\n- [`@rollup/plugin-alias`](https://www.npmjs.com/package/@rollup/plugin-alias)\n- [`@rollup/plugin-babel`](https://github.com/rollup/plugins/tree/master/packages/babel)\n- [`@rollup/plugin-commonjs`](https://www.npmjs.com/package/@rollup/plugin-commonjs)\n- [`@rollup/plugin-node-resolve`](https://www.npmjs.com/package/@rollup/plugin-node-resolve)\n- [`@rollup/plugin-terser`](https://www.npmjs.com/package/@rollup/plugin-terser)\n- [`rollup-plugin-analyzer`](https://www.npmjs.com/package/rollup-plugin-analyzer)\n- [`rollup-plugin-preserve-directives`](https://github.com/Ephem/rollup-plugin-preserve-directives)\n\nAnd the following [Babel](https://babeljs.io) plugins:\n\n- [`@babel/plugin-transform-runtime`](https://babeljs.io/docs/babel-plugin-transform-runtime/)\n- [`@babel/preset-env`](https://babeljs.io/docs/babel-preset-env.html)\n- [`@babel/preset-react`](https://babeljs.io/docs/babel-preset-react)\n\n## Rollup Config\n\nFor details of all the configuration options used in this template, please see the accompanying [blog post](https://www.misha.wtf/blog/rollup-library-starter).\n\n## Usage with Server Components\n\nThis template supports usage of the [`\"use client\"`](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive) directive for denoting Client vs Server Component, thanks to the [`rollup-plugin-preserve-directives`](https://github.com/Ephem/rollup-plugin-preserve-directives) plugin.\n\nTo mark a component as a **Client Component**, add `'use client'` at the very top of the file:\n\n```jsx\n// src/components/Button.js\n'use client';\n\nconst Button = (props) => {\n // ...\n};\n\n// ...\n```\n\nThe `rollup-plugin-preserve-directives` plugin, together with the `preserveModules` output option, ensures that the `'use client'` directive does not get discarded during build time.\n\n> **Warning**\n> It's important that `preserveModules` is set to `true` for this to work as expected.\n\nNote as well that if using the `Object.assign()` pattern for sub-components, the component MUST be a Client Component, otherwise you may get an error like _\"Cannot dot into a client module from a server component.\"_\n\n## Author\n\n[Mykhaylo Ryechkin](https://github.com/mryechkin)\n\n\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","readmeFilename":"README.md"}
![\"Rollup\"](\"https://img.shields.io/github/package-json/dependency-version/mryechkin/rollup-library-starter/dev/rollup?color=%23ef3334&style=for-the-badge\")
\n \n \n ![\"License\"](\"https://img.shields.io/github/license/mryechkin/rollup-library-starter?style=for-the-badge\")
\n \n![\"Rollup](\"https://www.misha.wtf/_next/image?url=%2Fblog%2Frollup-library-starter%2Fcover.png&w=640&q=100\")
\n![\"Buy](\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\")
\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","readmeFilename":"README.md"}