Make powerplug fully treeshakable (#104)

The latest a couple of bytes (rollup: 365, webpack: 1356) are just left
imports. They can't be treeshaked by default because itself may have
side effects. But we may be sure that everything else will not exist if
powerplug will be used by unused library.

Author: TrySound

.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "dist/react-powerplug.umd.js": {
-    "bundled": 22959,
-    "minified": 9274,
-    "gzipped": 2551
+    "bundled": 22909,
+    "minified": 9228,
+    "gzipped": 2522
   },
   "dist/react-powerplug.cjs.js": {
-    "bundled": 20067,
-    "minified": 10303,
-    "gzipped": 2422
+    "bundled": 20017,
+    "minified": 10236,
+    "gzipped": 2402
   },
   "dist/react-powerplug.esm.js": {
-    "bundled": 19405,
-    "minified": 9743,
-    "gzipped": 2291,
+    "bundled": 19355,
+    "minified": 9676,
+    "gzipped": 2267,
     "treeshaked": {
-      "rollup": 1025,
-      "webpack": 1835
+      "rollup": 365,
+      "webpack": 1356
     }
   }
 }

package.json

@@ -10,7 +10,6 @@
     "dist",
     "src"
   ],
-  "sideEffects": false,
   "scripts": {
     "build:flow": "echo \"// @flow\n\nexport * from '../src'\" > dist/react-powerplug.cjs.js.flow",
     "build:code": "cross-env NODE_ENV=code rollup -c",
@@ -84,12 +83,12 @@
     "react-dom": "^16.2.0",
     "react-test-renderer": "^16.2.0",
     "rimraf": "^2.6.1",
-    "rollup": "^0.57.1",
+    "rollup": "^0.59.1",
     "rollup-plugin-babel": "^4.0.0-beta.4",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-size-snapshot": "^0.4.1",
-    "rollup-plugin-uglify": "^3.0.0"
+    "rollup-plugin-uglify": "^4.0.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"

rollup.config.js

@@ -1,14 +1,17 @@
 import nodeResolve from 'rollup-plugin-node-resolve'
 import babel from 'rollup-plugin-babel'
 import replace from 'rollup-plugin-replace'
-import uglify from 'rollup-plugin-uglify'
+import { uglify } from 'rollup-plugin-uglify'
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
-
-const pkg = require('./package.json')
+import pkg from './package.json'
 
 const input = './src/index.js'
 
-const isExternal = id => !id.startsWith('.') && !id.startsWith('/')
+const external = id => !id.startsWith('.') && !id.startsWith('/')
+
+const globals = { react: 'React' }
+
+const name = 'ReactPowerPlug'
 
 const getBabelOptions = ({ useESModules }) => ({
   exclude: '**/node_modules/**',
@@ -27,12 +30,10 @@ export default [
     output: {
       file: 'dist/react-powerplug.umd.js',
       format: 'umd',
-      name: 'ReactPowerPlug',
-      globals: {
-        react: 'React',
-      },
+      name,
+      globals,
     },
-    external: ['react'],
+    external: Object.keys(globals),
     plugins: [
       nodeResolve(),
       babel(getBabelOptions({ useESModules: true })),
@@ -46,12 +47,10 @@ export default [
     output: {
       file: 'dist/react-powerplug.min.js',
       format: 'umd',
-      name: 'ReactPowerPlug',
-      globals: {
-        react: 'React',
-      },
+      name,
+      globals,
     },
-    external: ['react'],
+    external: Object.keys(globals),
     plugins: [
       nodeResolve(),
       babel(getBabelOptions({ useESModules: true })),
@@ -70,14 +69,14 @@ export default [
   {
     input,
     output: { file: pkg.main, format: 'cjs' },
-    external: isExternal,
+    external,
     plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()],
   },
 
   {
     input,
     output: { file: pkg.module, format: 'es' },
-    external: isExternal,
+    external,
     plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()],
   },
 ]

src/components/State.js

@@ -3,18 +3,15 @@ import renderProps from '../utils/renderProps'
 import noop from '../utils/noop'
 
 class State extends Component {
-  static defaultProps = {
-    initial: {},
-    onChange: noop,
-  }
-
   state = {
-    ...this.props.initial
+    ...this.props.initial,
   }
 
   _setState = (updater, cb = noop) => {
     this.setState(updater, () => {
-      this.props.onChange(this.state)
+      if (this.props.onChange) {
+        this.props.onChange(this.state)
+      }
       cb()
     })
   }