Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/starptech/shikaka
Opinionated UI component library bundler
https://github.com/starptech/shikaka
bundler css-modules esm react rollup sass ui-components
Last synced: about 1 month ago
JSON representation
Opinionated UI component library bundler
- Host: GitHub
- URL: https://github.com/starptech/shikaka
- Owner: StarpTech
- License: mit
- Created: 2020-05-24T15:36:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T20:18:22.000Z (over 1 year ago)
- Last Synced: 2024-10-03T23:42:16.578Z (about 1 month ago)
- Topics: bundler, css-modules, esm, react, rollup, sass, ui-components
- Language: JavaScript
- Homepage:
- Size: 2.62 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# shikaka
> Q: Do you want to bundle your UI components as easy as possible?
> A: [Shikaka!](https://www.youtube.com/watch?v=PcjFVTI4_Gw)
## Features
- Fast, zero-config by default.
- It cares about Tree-Shaking (Rollup), Minification (Terser), Autoprefixing (PostCSS) and Polyfilling (Babel).
- Built-in support for [`CSS Modules`](https://github.com/css-modules/css-modules) in `SASS`, `LESS` or `CSS`.
- Works with Typescript and React.
- Creates multiple optimized entry points.
This tool is not built as an alternative to webpack or rollup. We don't bundle `node_modules` or supporting every project requirement. The output by this library is intented to use in a modern module bundler like Parcel or Webpack. This tool was created due to the frustration of bundling React components with good defaults and first-class CSS Modules support.
## Example
### Multiple entry points
It operates on a fixed directory structure like:
```
$ shikaka src/index.js
your-library
└── src
├── components
│ └── Button
│ ├── index.js
│ └── index.module.css
└── index.js
```
and produces by default this:
```
dist
├── Button.js
├── index.js
├── Modal.js
└── styles.css
```
consumable:
```js
import { Button } from 'your-module' // or
import Button from 'your-module/dist/Button'
```
### Single entry point
You can also just pass a single entry point without having a `components` directory.
```
$ shikaka src/index.js
your-library
└── src
└── index.js
```
It produces this:
```
dist
└── index.js
```
consumable:
```js
import MyHook from 'your-module'
```
## Installation & Setup
1. Install by running: `npm i -D shikaka`
2. Set up your `package.json`:
```js
{
"name": "foo", // your package name
"source": "src/index.js", // your source code
"main": "dist/cjs/index.js", // for CommonJS/Node bundle
"module": "dist/es/index.js", // for ESM bundle
"types": "dist/index.d.ts" // when you use TS
"scripts": {
"build": "shikaka src/index.js --format cjs --format es" // by default only ESM
},
"browserslist": [ // your supported browsers (used to configure babel and postcss)
"defaults",
"not ie 11",
"not IE_Mob 11"
],
}
```
## TypeScript
We automatically use [rollup-plugin-typescript2](https://github.com/ezolenko/rollup-plugin-typescript2) when the entry file ends with `.ts` extension, however you have to install [rollup-plugin-typescript2](https://github.com/ezolenko/rollup-plugin-typescript2) alongside `typescript` to make it work.
## Help
```
shikaka -h
```
## Development
### Installation
```
yarn install
```
### Tests
If you change the code, update the tests and run:
```
yarn test
```
### Storybook
Test a library fixture output as it would be your real library with [Storybook](https://storybook.js.org/).
```
node cli.js src/index.js --out-dir test/fixtures/library/dist --root-dir test/fixtures/library
yarn storybook
```
### Alternatives
- [create-react-library](https://github.com/transitive-bullshit/create-react-library) As the name suggest, it's like create-react-app but for libraries. The difference between Shikaka is that it produce a complete library template and relies directly on the build tools like rollup and babel. Shikaka was only build to bundle your library with good defaults so you can publish your library without worrying about size and compatibility.
### Inspired by
- [bili](https://github.com/egoist/bili) - Bili makes it easier to bundle JavaScript libraries.
- [microbundle](https://github.com/developit/microbundle) - Zero-configuration bundler for tiny modules.