UNPKG

monoreact

Version:

React workspaces implementation

github.com/tarsinzer/monoreact

tarsinzer/monoreact

80 lines (46 loc) • 2.08 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
This package meant for developing React components (not applications) 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`. ## Commands ### Watch **Monoreact** scaffolds your new library inside `/src`, (bonus: sets up a [Parcel-based](https://parceljs.org) playground for that package inside `/playground` to test your components inside separate index.html). ``` 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 docz. ### Build When you need to build your package without watching changes: ``` yarn build ``` The output will be available inside `/dist` ### Lint **Monoreact** provides predefined `eslint` configuration (available only workspace project at the moment): ``` yarn lint ``` ### 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 v2.x](https://rollupjs.org) as a bundler and generates one rollup config for ES module format and build settings. ### 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 Docz Run inside another terminal: ``` yarn docz ``` This loads the component documentation of `*.mdx` extension. ### Using the Playground You can generate playground via `monoreact add playground` ``` cd playground 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. <br/> ### Including Styles It supports postcss, sass and modularity. <br/> ## User Guide > If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)