Add support for componentWillReceiveProps (#72)

#72

README.md

@@ -157,7 +157,7 @@ const hoc = prepared(sideEffect, opts);
   - `defer: boolean` - Optional. Defaults to `true`. If the component is deferred, skip the prepare step
   - `boundary: boolean` - Optional. Defaults to `false`. Stop traversing if the component is defer or boundary
   - `componentDidMount: boolean` - Optional. Defaults to `true`. On the browser, `sideEffect` is called when the component is mounted.
-  - `componentWillReceiveProps: boolean` - Optional. Defaults to `true`. On the browser, `sideEffect` is called again whenever the component receive props.
+  - `componentWillReceiveProps: boolean` - Optional. Defaults to `false`. On the browser, `sideEffect` is called again whenever the component receive props.
   - `forceUpdate: boolean` - Optional. Defaults to `false`.
   - `contextTypes: Object` - Optional. Custom React context types to add to the prepared component.
 - `hoc: (Component: React.Component) => React.Component` - A higher-order component that returns a component that awaits for async side effects before rendering

package.json

@@ -36,6 +36,8 @@
     "@babel/preset-react": "7.0.0-beta.40",
     "babel-eslint": "8.2.2",
     "create-universal-package": "3.4.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "4.18.1",
     "eslint-config-fusion": "^1.0.0",
     "eslint-plugin-cup": "1.0.0",

src/__tests__/__node__/prepare-render.node.js

@@ -7,8 +7,12 @@
 /* eslint-disable react/no-multi-comp */
 import tape from 'tape-cup';
 import React, {Component} from 'react';
+import Enzyme, {shallow} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import {prepare, prepared} from '../../index.js';
 
+Enzyme.configure({adapter: new Adapter()});
+
 tape('Preparing a sync app', t => {
   let numConstructors = 0;
   let numRenders = 0;
@@ -326,3 +330,59 @@ tape('Rendering a component triggers componentWillMount before render', t => {
     t.end();
   });
 });
+
+tape('Preparing an async app with componentWillReceiveProps option', t => {
+  let numConstructors = 0;
+  let numRenders = 0;
+  let numChildRenders = 0;
+  let numPrepares = 0;
+  class SimpleComponent extends Component {
+    constructor(props, context) {
+      super(props, context);
+      t.equal(
+        context.__IS_PREPARE__,
+        true,
+        'sets __IS_PREPARE__ to true in context'
+      );
+      numConstructors++;
+    }
+    render() {
+      numRenders++;
+      return <SimplePresentational />;
+    }
+  }
+  function SimplePresentational() {
+    numChildRenders++;
+    return <div>Hello World</div>;
+  }
+  const AsyncParent = prepared(
+    props => {
+      numPrepares++;
+      t.equal(
+        props.data,
+        'test',
+        'passes props through to prepared component correctly'
+      );
+      return Promise.resolve();
+    },
+    {
+      componentWillReceiveProps: true,
+    }
+  )(SimpleComponent);
+  const app = <AsyncParent data="test" />;
+  const p = prepare(app);
+  t.ok(p instanceof Promise, 'prepare returns a promise');
+  p.then(() => {
+    t.equal(numPrepares, 1, 'runs the prepare function once');
+    t.equal(numConstructors, 1, 'constructs SimpleComponent once');
+    t.equal(numRenders, 1, 'renders SimpleComponent once');
+    t.equal(numChildRenders, 1, 'renders SimplePresentational once');
+    // triggers componentDidMount
+    const wrapper = shallow(app);
+    t.equal(numPrepares, 2, 'runs prepare on componentDidMount');
+    // triggers componentWillReceiveProps
+    wrapper.setProps({test: true});
+    t.equal(numPrepares, 3, 'runs prepare on componentWillReceiveProps');
+    t.end();
+  });
+});

src/prepared.js

@@ -14,7 +14,7 @@ const prepared = (prepare, opts = {}) => OriginalComponent => {
       boundary: false,
       defer: false,
       componentDidMount: true,
-      componentWillReceiveProps: true,
+      componentWillReceiveProps: false,
       contextTypes: {},
       forceUpdate: false,
     },
@@ -31,12 +31,11 @@ const prepared = (prepare, opts = {}) => OriginalComponent => {
       }
     }
 
-    // // TODO(#5): Figure out if we want to run prepare on componentWillReceiveProps
-    // componentWillReceiveProps(nextProps, nextContext) {
-    //   if (componentWillReceiveProps) {
-    //     prepare(nextProps, nextContext);
-    //   }
-    // }
+    componentWillReceiveProps(nextProps, nextContext) {
+      if (opts.componentWillReceiveProps) {
+        prepare(nextProps, nextContext);
+      }
+    }
 
     render() {
       return <OriginalComponent {...this.props} />;