Skip to content

Commit 46c1a60

Browse files
danezdanez
authored
fix(umd): Fix the umd builds by switching to rollup (#212)
* fix(umd): Fix the umd builds * Add exmaples for umd * Correct version of external-helpers
1 parent de59048 commit 46c1a60

17 files changed

+836
-1721
lines changed

‎.babelrc

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎.babelrc.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use strict';
2+
3+
const target = process.env.BABEL_TARGET;
4+
const modules = target === 'rollup' ? false : 'commonjs';
5+
6+
const options = {
7+
presets: [['env', { loose: true, modules }], 'react'],
8+
plugins: ['transform-object-rest-spread', ['transform-class-properties', { loose: true }]],
9+
};
10+
11+
if (target === 'rollup') {
12+
options.plugins.push('external-helpers');
13+
} else {
14+
options.plugins.push(['transform-react-remove-prop-types', { mode: 'wrap' }]);
15+
}
16+
17+
module.exports = options;

‎.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
/webpack.*
22
examples
3+
lib
4+
dist

‎.eslintrc

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
"browser": true,
66
"node": true
77
},
8-
"plugins": [
9-
"prettier"
10-
],
8+
"plugins": ["prettier"],
119
"rules": {
1210
"arrow-parens": "off",
1311
"no-plusplus": "off",
14-
"prettier/prettier": ["error", { "singleQuote": true, "printWidth": 100, "trailingComma": "all"}],
12+
"prettier/prettier": [
13+
"error",
14+
{ "singleQuote": true, "printWidth": 100, "trailingComma": "all" }
15+
],
1516
"react/require-default-props": "off",
1617
"react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
1718
"react/forbid-prop-types": "off",
@@ -20,7 +21,7 @@
2021
"import/no-extraneous-dependencies": [
2122
"error",
2223
{
23-
"devDependencies": ["**/__tests__/**/*"],
24+
"devDependencies": ["**/__tests__/**/*", "rollup.config.js"],
2425
"optionalDependencies": false
2526
}
2627
]

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ build/
22
node_modules/
33
npm-debug.log
44
lib/
5+
dist/

‎README.md

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,24 @@
22

33
Accessible react tab component
44

5-
> Supports React 0.14.9+ and 15.3+
5+
> Supports React 0.14.9+, 15.3+ and 16+
66
77
## Installing
88

99
```bash
1010
yarn add react-tabs
1111
```
1212

13-
You can also still use npm
14-
15-
```bash
16-
npm install react-tabs --save
17-
```
18-
19-
Or use directly in your html as UMD component
13+
You can also use react-tabs directly as UMD build in an HTML document by adding
2014

2115
```html
22-
<script src="https://unpkg.com/[email protected]/dist/react-tabs.min.js" />
16+
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js" />
17+
<!-- or -->
18+
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js" />
2319
```
2420
21+
For example usages of the UMD builds have a look at the [`examples/umd`](./examples/umd/) folder
22+
2523
## Demo
2624
2725
https://reactcommunity.org/react-tabs/example/
@@ -54,7 +52,7 @@ export default () => (
5452
5553
### resetIdCounter(): void
5654
57-
Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.
55+
Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.
5856
5957
You should never need to use this in the browser. Only if you are running an isomorphic react app that is rendered on the server you should call `resetIdCounter()` before every render so that the ids that get generated on the server match the ids generated in the browser.
6058
@@ -302,6 +300,20 @@ When using LESS you can easily import the default styles
302300
@import '../../path/to/node_modules/react-tabs/style/react-tabs.less';
303301
```
304302
303+
### UMD
304+
305+
When using the UMD version of react-tabs you can easily use the default styles by adding
306+
307+
```html
308+
<html>
309+
<head>
310+
...
311+
<link rel="stylesheet" href="https://unpkg.com/react-tabs@2/style/react-tabs.css">
312+
</head>
313+
...
314+
</html>
315+
```
316+
305317
### Custom
306318
307319
You can also always just simply copy the default style to your own css/scss/less and modify it to your own needs. The changelog will always tell you when classes change and we also consider changes that break the styling as semver major.

0 commit comments

Comments
 (0)