Merge pull request #1 from manifoldco/dangodev/rollup

Bundle with Rollup, also ship ESM & IIFE versions
manifoldco · Oct 19, 2018 · e84d810 · e84d810
2 parents f5937c0 + e2c7798
commit e84d810
Show file tree

Hide file tree

Showing 9 changed files with 1,880 additions and 3,449 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,13 +1,9 @@
 {
   "comments": false,
-  "presets": [
-    ["@babel/preset-env", { "targets": { "browsers": ["last 2 versions"] } }],
-    "@babel/preset-react",
-    "minify"
-  ],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-transform-react-jsx"
+    ["transform-react-remove-prop-types", { "removeImport": true }]
   ]
 }
diff --git a/README.md b/README.md
@@ -20,9 +20,16 @@ import ScrollAgent from 'react-scroll-agent';
 <ScrollAgent
   nav={({ current, positions }) => (
     <menu>
-      <a href="#section-1" className={current === 0 ? 'is-active' : ''}>Section 1</a>
-      <a href="#section-2" className={current === 1 ? 'is-active' : ''}>Section 2</a>
-      <a onClick={() => window.scrollTo(0, positions[2])} className={current === 2 ? 'is-active' : ''}>
+      <a href="#section-1" className={current === 0 ? 'is-active' : ''}>
+        Section 1
+      </a>
+      <a href="#section-2" className={current === 1 ? 'is-active' : ''}>
+        Section 2
+      </a>
+      <a
+        onClick={() => window.scrollTo(0, positions[2])}
+        className={current === 2 ? 'is-active' : ''}
+      >
         Section 3
       </a>
     </menu>
@@ -39,15 +46,14 @@ import ScrollAgent from 'react-scroll-agent';
   <section id="section-3" data-scrollspy>
     <h1>Section 3</h1>
   </section>
-</ScrollAgent>
+</ScrollAgent>;
 ```
 
-
 ### Props
 
 | Name        | Type       | Required | Default | Description                                                                                                                                                                                     |
 | :---------- | :--------- | :------: | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `selector`  | `String`   | ✅        |         | Any CSS selector to specify which elements in `children` to attach the scrollspy to.                                                                                                            |
+| `selector`  | `String`   |    ✅    |         | Any CSS selector to specify which elements in `children` to attach the scrollspy to.                                                                                                            |
 | `children`  | React Node |          |         | Standard child passthrough. This is where it watches for scroll events.                                                                                                                         |
 | `detectEnd` | `Boolean`  |          | `true`  | If `true`, the last index will be highlighted when scrolled to the bottom. If `false`, then when scrolled to the bottom, `current` will return whichever container is currently at `threshold`. |
 | `nav`       | React Node |          |         | Render prop that returns `current` index in view and all `positions` of items.                                                                                                                  |
@@ -58,7 +64,6 @@ import ScrollAgent from 'react-scroll-agent';
 The `nav` render prop returns the following items:
 
 ```jsx
-
 <ScrollAgent
   nav={({ current, positions }) => (
     <menu>
@@ -82,6 +87,22 @@ The `nav` render prop returns the following items:
 | `current`   | `Number`   | The index of the current item in view, in visual descending order on the page (may not necessarily be DOM order).         |
 | `positions` | `[Number]` | An array of all absolute Y values on the page, ordered from top to bottom. Useful for animating scroll to a certain item. |
 
+### IIFE & ESM
+
+This module ships with ESM and IIFE versions! To load it just request:
+
+#### ESM (9 KB unminified)
+
+```js
+import ScrollAgent from 'react-scroll-agent/esm';
+```
+
+#### IIFE (4 KB, for use in <script> tag)
+
+```
+<script src="//unpkg.com/react-scroll-agent/esm.js"></script>
+```
+
 ### Notes
 
 - If the first item isn’t in view, then `current` will return `-1`. This is expected, and allows more flexibility in styling. If you always want the first item to be highlighted, then check that `current === 0 || current === -1`.

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -3,17 +3,17 @@
     "start": "webpack-serve"
   },
   "dependencies": {
-    "@babel/cli": "^7.0.0-beta.56",
-    "@babel/core": "^7.0.0-beta.56",
-    "@babel/plugin-transform-react-jsx": "^7.0.0-beta.56",
-    "babel-loader": "^8.0.0-beta",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-transform-react-jsx": "^7.0.0",
+    "babel-loader": "^8.0.4",
     "connect-history-api-fallback": "^1.5.0",
     "html-webpack-plugin": "^3.2.0",
     "koa-connect": "^2.0.1",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "webpack": "^4.16.4",
-    "webpack-cli": "^3.1.0",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "webpack": "^4.21.0",
+    "webpack-cli": "^3.1.2",
     "webpack-serve": "^2.0.2"
   }
 }
diff --git a/example/src/app.js b/example/src/app.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import ScrollAgent from '../../dist';
+import ScrollAgent from '../../dist/cjs';
 
 const App = () => (
   <main>