Merge pull request #16 from kouhin/release/v0.4.1

Release/v0.4.1
kouhin · Mar 1, 2017 · e0ed8e6 · e0ed8e6
2 parents 05ed718 + bd89e16
commit e0ed8e6
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 80 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
-The MIT License (MIT)
+MIT License
 
-Copyright (c) 2015 Jason
+Copyright (c) 2016 - 2017 HOU Bin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "react-router-hook",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Universal data fetching and lifecycle management for react router with multiple components",
   "main": "./lib/index.js",
   "scripts": {
-    "prepare": "npm run clean && npm run build",
     "build": "babel src --out-dir lib",
     "clean": "rimraf lib",
     "lint": "eslint src",
+    "prepublish": "npm run clean && npm run test && npm run build",
     "test": "eslint src"
   },
   "files": [

diff --git a/src/RouterHookContainer.js b/src/RouterHookContainer.js
@@ -28,17 +28,18 @@ export default class RouterHookContainer extends React.Component {
     this.reloadComponent = this.reloadComponent.bind(this);
     this.mounted = false;
 
-    const initStatus = getInitStatus(
-      props.children.type,
-      this.props.routerWillEnterHooks,
-    );
     this.shouldReload = false;
-    this.status = initStatus;
-    this.childProps = {};
+    this.state = {
+      status: getInitStatus(
+        props.children.type,
+        this.props.routerWillEnterHooks,
+      ),
+      childProps: {},
+    };
   }
 
   componentWillMount() {
-    this.context.routerHookContext.setComponentStatus(this.Component, this.status);
+    this.context.routerHookContext.setComponentStatus(this.Component, this.state.status);
   }
 
   componentDidMount() {
@@ -50,11 +51,13 @@ export default class RouterHookContainer extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (this.props.renderProps.location !== nextProps.renderProps.location) {
-      this.status = getInitStatus(
-        this.Component,
-        this.props.routerWillEnterHooks,
-      );
-      this.childProps = {};
+      this.setState({
+        status: getInitStatus(
+          this.Component,
+          this.props.routerWillEnterHooks,
+        ),
+        childProps: {},
+      });
       this.shouldReload = true;
       if (this.mounted) {
         this.forceUpdate();
@@ -67,10 +70,6 @@ export default class RouterHookContainer extends React.Component {
     }
   }
 
-  shouldComponentUpdate() {
-    return false;
-  }
-
   componentDidUpdate() {
     if (this.shouldReload) {
       this.shouldReload = false;
@@ -85,8 +84,10 @@ export default class RouterHookContainer extends React.Component {
   }
 
   setStatus(status, shouldReport, err) {
-    const shouldUpdate = this.status !== status;
-    this.status = status;
+    const shouldUpdate = this.state.status !== status;
+    this.setState({
+      status,
+    });
     if (shouldReport) {
       this.context.routerHookContext.setComponentStatus(this.Component, status, err);
     }
@@ -131,13 +132,15 @@ export default class RouterHookContainer extends React.Component {
     const args = {
       ...renderProps,
       ...locals,
-      getProps: () => this.childProps,
+      getProps: () => this.state.childProps,
       setProps: (p) => {
         if (location === renderProps.location) {
-          this.childProps = {
-            ...this.childProps,
-            ...p,
-          };
+          this.setState({
+            childProps: {
+              ...this.state.childProps,
+              ...p,
+            },
+          });
           if (this.mounted) {
             this.forceUpdate();
           }
@@ -213,7 +216,6 @@ export default class RouterHookContainer extends React.Component {
   }
 
   render() {
-    const status = this.status;
     /* eslint-disable no-unused-vars */
     const {
       children,
@@ -226,19 +228,19 @@ export default class RouterHookContainer extends React.Component {
     /* eslint-enable no-unused-vars */
     const passProps = {
       ...restProps,
-      ...this.childProps,
-      componentStatus: status,
+      ...this.state.childProps,
+      componentStatus: this.state.status,
       reloadComponent: this.reloadComponent,
     };
 
-    if (status === ComponentStatus.INIT) {
+    if (this.state.status === ComponentStatus.INIT) {
       if (!this.prevChildren) {
         return null;
       }
       return React.cloneElement(this.prevChildren, passProps);
     }
 
-    this.prevChildren = React.cloneElement(this.props.children, passProps);
+    this.prevChildren = React.cloneElement(children, passProps);
     return this.prevChildren;
   }
 }
diff --git a/src/RouterHookContext.js b/src/RouterHookContext.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import throttle from 'lodash/throttle';
 import EventEmitter from 'eventemitter3';
 import { ComponentStatus, routerHookPropName } from './constants';
 import getAllComponents from './getAllComponents';
@@ -16,7 +15,7 @@ const noop = () => null;
 export default class RouterHookContext extends React.Component {
   static propTypes = {
     children: React.PropTypes.node.isRequired,
-    components: componentsShape.isRequired,
+    components: React.PropTypes.arrayOf(componentsShape).isRequired,
     location: locationShape.isRequired,
     onAborted: React.PropTypes.func.isRequired,
     onCompleted: React.PropTypes.func.isRequired,
@@ -34,7 +33,7 @@ export default class RouterHookContext extends React.Component {
     this.setComponentStatus = this.setComponentStatus.bind(this);
     this.getComponentStatus = this.getComponentStatus.bind(this);
     this.addLoadingListener = this.addLoadingListener.bind(this);
-    this.updateRouterLoading = throttle(this.updateRouterLoading, 100).bind(this);
+    this.updateRouterLoading = this.updateRouterLoading.bind(this);
     this.loading = false;
   }
 
@@ -56,14 +55,13 @@ export default class RouterHookContext extends React.Component {
     if (nextProps.location === this.props.location) {
       return;
     }
-    this.componentStatuses = {};
     if (this.loading) {
       this.props.onAborted();
     }
   }
 
   componentWillUnmount() {
-    if (!this.routerEventEmitter) {
+    if (this.routerEventEmitter) {
       this.routerEventEmitter.removeAllListeners(CHANGE_LOADING_STATE);
       this.routerEventEmitter = null;
     }
@@ -104,6 +102,9 @@ export default class RouterHookContext extends React.Component {
   }
 
   updateRouterLoading() {
+    if (!canUseDOM) {
+      return;
+    }
     const components = getAllComponents(this.props.components);
     let total = 0;
     let init = 0;

diff --git a/src/routerHooks.js b/src/routerHooks.js
@@ -4,7 +4,7 @@ import uuid from 'uuid';
 import { routerHookPropName } from './constants';
 
 const routerHooks = (hooks) => {
-  hooks.id = uuid();
+  hooks.id = hooks.id || uuid();
   return (Component) => {
     Component[routerHookPropName] = hooks;
     return Component;

diff --git a/src/triggerHooksOnServer.js b/src/triggerHooksOnServer.js
@@ -1,6 +1,3 @@
-import map from 'async/map';
-import eachSeries from 'async/eachSeries';
-import asyncify from 'async/asyncify';
 import getAllComponents from './getAllComponents';
 import { routerHookPropName } from './constants';
 
@@ -18,46 +15,26 @@ export default function triggerHooksOnServer(
     ...locals,
   };
 
-  const components = getAllComponents(renderProps.components);
-
-  const run = (asyncCallback) => {
-    map(components, (component, cb) => {
-      const routerHooks = component[routerHookPropName];
-      if (!routerHooks) {
-        cb();
-        return;
-      }
-      const runHooks = hooks.map(key => routerHooks[key]).filter(f => f);
-      if (runHooks.length < 1) {
-        cb();
-        return;
-      }
-      eachSeries(runHooks, (hook, hookCb) => {
-        asyncify(hook)(args, hookCb);
-      }, (err) => {
-        if (err && onComponentError) {
-          onComponentError({ Component: component, error: err });
-          cb();
-          return;
-        }
-        cb(err);
-      });
-    }, (err) => {
-      asyncCallback(err);
-    });
-  };
+  const promises = getAllComponents(renderProps.components)
+        .map((component) => {
+          const routerHooks = component[routerHookPropName];
+          if (!routerHooks) return null;
+          const runHooks = hooks.map(key => routerHooks[key]).filter(f => f);
+          if (runHooks.length < 1) return null;
+          return runHooks.reduce(
+            (total, current) => total.then(() => current(args))
+            , Promise.resolve())
+            .catch(err => onComponentError({ Component: component, error: err }));
+        })
+        .filter(p => p);
 
   if (callback) {
-    run(callback);
+    Promise.all(promises)
+      .then(() => {
+        callback();
+      })
+      .catch(callback);
     return null;
   }
-  return new Promise((resolve, reject) => {
-    run((err) => {
-      if (err) {
-        reject(err);
-        return;
-      }
-      resolve();
-    });
-  });
+  return Promise.all(promises);
 }