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
reactjs · Oct 5, 2017 · 46c1a60 · 46c1a60
1 parent de59048
commit 46c1a60
Show file tree

Hide file tree

Showing 17 changed files with 836 additions and 1,721 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.babelrc.js b/.babelrc.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const target = process.env.BABEL_TARGET;
+const modules = target === 'rollup' ? false : 'commonjs';
+
+const options = {
+  presets: [['env', { loose: true, modules }], 'react'],
+  plugins: ['transform-object-rest-spread', ['transform-class-properties', { loose: true }]],
+};
+
+if (target === 'rollup') {
+  options.plugins.push('external-helpers');
+} else {
+  options.plugins.push(['transform-react-remove-prop-types', { mode: 'wrap' }]);
+}
+
+module.exports = options;
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,4 @@
 /webpack.*
 examples
+lib
+dist
diff --git a/.eslintrc b/.eslintrc
@@ -5,13 +5,14 @@
     "browser": true,
     "node": true
   },
-  "plugins": [
-    "prettier"
-  ],
+  "plugins": ["prettier"],
   "rules": {
     "arrow-parens": "off",
     "no-plusplus": "off",
-    "prettier/prettier": ["error", { "singleQuote": true, "printWidth": 100, "trailingComma": "all"}],
+    "prettier/prettier": [
+      "error",
+      { "singleQuote": true, "printWidth": 100, "trailingComma": "all" }
+    ],
     "react/require-default-props": "off",
     "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
     "react/forbid-prop-types": "off",
@@ -20,7 +21,7 @@
     "import/no-extraneous-dependencies": [
       "error",
       {
-        "devDependencies": ["**/__tests__/**/*"],
+        "devDependencies": ["**/__tests__/**/*", "rollup.config.js"],
         "optionalDependencies": false
       }
     ]

diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ build/
 node_modules/
 npm-debug.log
 lib/
+dist/
diff --git a/README.md b/README.md
@@ -2,26 +2,24 @@
 
 Accessible react tab component
 
-> Supports React 0.14.9+ and 15.3+
+> Supports React 0.14.9+, 15.3+ and 16+
 
 ## Installing
 
 ```bash
 yarn add react-tabs
 ```
 
-You can also still use npm
-
-```bash
-npm install react-tabs --save
-```
-
-Or use directly in your html as UMD component
+You can also use react-tabs directly as UMD build in an HTML document by adding
 
 ```html
-<script src="https://unpkg.com/react-tabs@1.0.0/dist/react-tabs.min.js" />
+<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js" />
+<!-- or -->
+<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js" />
 ```
 
+For example usages of the UMD builds have a look at the [`examples/umd`](./examples/umd/) folder
+
 ## Demo
 
 https://reactcommunity.org/react-tabs/example/
@@ -54,7 +52,7 @@ export default () => (
 
 ### resetIdCounter(): void
 
-Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels. 
+Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.
 
 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.
 
@@ -302,6 +300,20 @@ When using LESS you can easily import the default styles
 @import '../../path/to/node_modules/react-tabs/style/react-tabs.less';
 ```
 
+### UMD
+
+When using the UMD version of react-tabs you can easily use the default styles by adding
+
+```html
+<html>
+  <head>
+    ...
+    <link rel="stylesheet" href="https://unpkg.com/react-tabs@2/style/react-tabs.css">
+  </head>
+  ...
+</html>
+```
+
 ### Custom
 
 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.
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ build/ @@
     node_modules/
     npm-debug.log
     lib/
+    dist/