Skip to content

Commit 7a0dfe5

Browse files
bedrich-schindleradamkudrna
authored andcommitted
Configure webpack to bundle library without react and react-dom, let fail build when set size is exceeded (#112)
1 parent e263700 commit 7a0dfe5

File tree

4 files changed

+2494
-6434
lines changed

4 files changed

+2494
-6434
lines changed

README.md

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ React UI consists of the following building blocks:
1818

1919
To use React UI in your app:
2020

21-
1. Install it with `$ npm install --save @react-ui-org/react-ui`.
22-
2. First import the **theme layer** to the topmost level of your React app.
21+
1. Install `react` and `react-dom` in your application with `$ npm install --save react react-dom`
22+
2. Install `react-ui` with `$ npm install --save @react-ui-org/react-ui`.
23+
3. First import the **theme layer** to the topmost level of your React app.
2324
Either use the bundled theme as is:
2425
```js
2526
// app.jsx
@@ -35,21 +36,21 @@ To use React UI in your app:
3536

3637
ℹ️ Technically it is possible to import the theme layer anywhere later in the app.
3738
But it's a nice habit to declare variables before using them and that's what we are doing here.
38-
3. Add React UI **foundation styles**, the ground-zero CSS for React UI components:
39+
4. Add React UI **foundation styles**, the ground-zero CSS for React UI components:
3940
```js
4041
// app.jsx
4142
import '@react-ui-org/react-ui/src/lib/theme.scss';
4243
import '@react-ui-org/react-ui/src/lib/foundation.scss';
4344
```
44-
4. Optionally add the **helper and utility classes** bundles:
45+
5. Optionally add the **helper and utility classes** bundles:
4546
```js
4647
// app.jsx
4748
import '@react-ui-org/react-ui/src/lib/theme.scss';
4849
import '@react-ui-org/react-ui/src/lib/foundation.scss';
4950
import '@react-ui-org/react-ui/src/lib/helpers.scss';
5051
import '@react-ui-org/react-ui/src/lib/utilities.scss';
5152
```
52-
5. Finally, use React UI **components** just like you are used to:
53+
6. Finally, use React UI **components** just like you are used to:
5354
```js
5455
// MyDashboardScreen.jsx
5556
import React from 'react';
@@ -117,3 +118,24 @@ To publish the new version:
117118
3. Create new tag: `git tag -a vX.Y.Z -m "vX.Y.Z"`
118119
4. Push new tag: `git push --tags`
119120
5. Publish new version on npm: `npm publish --access public`
121+
122+
### Package linking
123+
124+
The best option for development of React UI is to link `react-ui` into your application with `npm link`.
125+
126+
1. In React UI repository run `npm link`
127+
2. In your application run `npm link @react-ui-org/react-ui`
128+
129+
To prevent [Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react)
130+
when React UI is linked, add following code to Webpack configuration of your client:
131+
132+
```
133+
const path = require('path');
134+
135+
resolve: {
136+
alias: {
137+
react: path.resolve('./node_modules/react'),
138+
'react-dom': path.resolve('./node_modules/react-dom'),
139+
},
140+
}
141+
```

0 commit comments

Comments
 (0)