https://github.com/tarsisexistence/monoreact-package-example
Example of the re-space package submodule
https://github.com/tarsisexistence/monoreact-package-example
Last synced: 3 months ago
JSON representation
Example of the re-space package submodule
- Host: GitHub
- URL: https://github.com/tarsisexistence/monoreact-package-example
- Owner: tarsisexistence
- Created: 2020-04-11T16:58:01.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-12T23:41:35.000Z (over 3 years ago)
- Last Synced: 2025-01-08T08:15:49.688Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 44.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# User Guide
> This package meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
## Commands
Monoreact scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
```
yarn start
```
This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
Then run either example playground or storybook:
### Docz
Run inside another terminal:
```
yarn docz
```
This loads the component documentation of `*.mdx` extension.
### Example
Then run the example inside another:
```
cd example
yarn install
yarn start
```
The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure the package is running in watch mode.
To do a one-off build, use `yarn build`.
To run tests, use `yarn test`.
### Jest
Jest tests are set up to run with `yarn test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.
### Rollup
The package uses [Rollup v1.x](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
### TypeScript
`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
## Using the Playground
```
cd example
yarn install
yarn start
```
The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure the package is running in watch mode like we recommend above.
## Named Exports
Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
## Including Styles
There are many ways to ship styles, including with CSS-in-JS. Configure how you like.
For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
## Publishing to NPM
We recommend using https://github.com/sindresorhus/np.