add display name for Connect

Author: jcouyang

lib/react-most.js

@@ -16,8 +16,9 @@ const CONTEXT_TYPE = {
 }
 
 export function connect(main, initprops={}) {
-  return function(ReactClass){
-    if (ReactClass.contextTypes === CONTEXT_TYPE) {
+  return function(WrappedComponent){
+    let connectDisplayName = `Connect(${getDisplayName(WrappedComponent)})`
+    if (WrappedComponent.contextTypes === CONTEXT_TYPE) {
       class Connect extends React.PureComponent {
         constructor(props, context) {
           super(props, context);
@@ -26,54 +27,57 @@ export function connect(main, initprops={}) {
           this.actions = mergeAll([actions, props.actions])
         }
         render(){
-          return <ReactClass {...this.props} {...initprops} sink$={this.sink$} actions={this.actions}/>
+          return <WrappedComponent {...this.props} {...initprops} sink$={this.sink$} actions={this.actions}/>
         }
       }
-      Connect.contextTypes = CONTEXT_TYPE
-      return Connect
-    }
-    class Connect extends React.PureComponent {
-      constructor(props, context) {
-        super(props, context);
-        if(initprops.history || props.history){
-          initprops.history = initHistory(context[HISTORY_STREAM])
-          initprops.history.travel.observe(state=>{
-            return this.setState(state)
-          })
-        }
-
-        let [actions, sink$] = actionsAndSinks(main(context[INTENT_STREAM],props), this)
-        this.sink$ = sink$.concat(props.sink$||[])
-        this.actions = mergeAll([actions, props.actions])
-        let defaultKey = keys(ReactClass.defaultProps)
-        this.state = mergeAll([ReactClass.defaultProps, pick(defaultKey, props)])
-      }
-      componentWillReceiveProps(nextProps){
-        this.setState(state=>pick(keys(state), nextProps))
-      }
-      componentDidMount(){
-        this.context[EACH_FLATMAP](this.sink$, (action)=>{
-          if(action instanceof Function) {
-            this.setState((prevState, props)=>{
-              let newState = action.call(this, prevState,props);
-              if(initprops.history && newState != prevState){
-                initprops.history.cursor = -1;
-                this.context[HISTORY_STREAM].send(prevState);
-              }
-              return newState;
-            });
-          } else {
-            /* istanbul ignore next */
-            console.warn('action', action,'need to be a Function which map from current state to new state');
+      Connect.contextTypes = CONTEXT_TYPE;
+      Connect.displayName = connectDisplayName;
+      return Connect;
+    }else{
+      class Connect extends React.PureComponent {
+        constructor(props, context) {
+          super(props, context);
+          if(initprops.history || props.history){
+            initprops.history = initHistory(context[HISTORY_STREAM])
+            initprops.history.travel.observe(state=>{
+              return this.setState(state)
+            })
           }
-        });
-      }
-      render() {
-        return <ReactClass {...this.props} {...this.state} {...initprops} actions={this.actions} />
+
+          let [actions, sink$] = actionsAndSinks(main(context[INTENT_STREAM],props), this)
+          this.sink$ = sink$.concat(props.sink$||[])
+          this.actions = mergeAll([actions, props.actions])
+          let defaultKey = keys(WrappedComponent.defaultProps)
+          this.state = mergeAll([WrappedComponent.defaultProps, pick(defaultKey, props)])
+        }
+        componentWillReceiveProps(nextProps){
+          this.setState(state=>pick(keys(state), nextProps))
+        }
+        componentDidMount(){
+          this.context[EACH_FLATMAP](this.sink$, (action)=>{
+            if(action instanceof Function) {
+              this.setState((prevState, props)=>{
+                let newState = action.call(this, prevState,props);
+                if(initprops.history && newState != prevState){
+                  initprops.history.cursor = -1;
+                  this.context[HISTORY_STREAM].send(prevState);
+                }
+                return newState;
+              });
+            } else {
+              /* istanbul ignore next */
+              console.warn('action', action,'need to be a Function which map from current state to new state');
+            }
+          });
+        }
+        render() {
+          return <WrappedComponent {...this.props} {...this.state} {...initprops} actions={this.actions} />
+        }
       }
+      Connect.contextTypes = CONTEXT_TYPE;
+      Connect.displayName = connectDisplayName;
+      return Connect;
     }
-    Connect.contextTypes = CONTEXT_TYPE;
-    return Connect;
   }
 }
 
@@ -137,3 +141,7 @@ function actionsAndSinks(sinks, self){
   }
   return [_actions, _sinks]
 }
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
+}