refract-xstream - npm Package Compare versions

Comparing version 2.0.0-rc.0 to 2.0.0-rc.1

index.es.js

 import xs from 'xstream';
-import { isValidElement, createElement, PureComponent } from 'react';
+import { isValidElement, createElement, Component } from 'react';
 
@@ -30,2 +30,10 @@ /*! *****************************************************************************
 
+var __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+};
+
 var PROPS_EFFECT = '@@refract/effect/props';
@@ -66,5 +74,12 @@ var toProps = function (props) { return ({
 
+var shallowEquals = function (left, right) {
+    return left === right ||
+        (Object.keys(left).length === Object.keys(right).length &&
+            Object.keys(left).every(function (leftKey) { return left[leftKey] === right[leftKey]; }));
+};
 var configureComponent = function (handler, errorHandler) { return function (aperture, instance, isValidElement$$1) {
     instance.state = {
-        children: null
+        children: null,
+        props: {},
+        decoratedProps: {}
     };
@@ -92,21 +107,16 @@ var setState = function (state) {
                 var payload_1 = effect.payload;
-                if (payload_1.replace) {
-                    setState({
-                        replace: payload_1.replace,
-                        props: Object.keys(payload_1.props || {}).reduce(function (props, propName) {
-                            var prop = payload_1.props[propName];
-                            if (propName !== 'children' &&
-                                typeof prop === 'function') {
-                                decorateProp(props, prop, propName);
-                            }
-                            else {
-                                props[propName] = prop;
-                            }
-                            return props;
-                        }, {})
-                    });
-                }
-                else {
-                    setState(payload_1);
-                }
+                setState({
+                    replace: payload_1.replace,
+                    props: payload_1.props,
+                    decoratedProps: Object.keys(payload_1.props || {}).reduce(function (props, propName) {
+                        var prop = payload_1.props[propName];
+                        var previousProp = instance.state.props[propName];
+                        if (propName !== 'children' &&
+                            typeof prop === 'function' &&
+                            prop !== previousProp) {
+                            decorateProp(props, prop, propName);
+                        }
+                        return props;
+                    }, {})
+                });
             }
@@ -209,3 +219,4 @@ else {
         Object.keys(nextProps).forEach(function (propName) {
-            if (typeof instance.props[propName] === 'function' &&
+            if (propName !== 'children' &&
+                typeof instance.props[propName] === 'function' &&
                 nextProps[propName] !== instance.props[propName]) {
@@ -227,17 +238,28 @@ decorateProp(decoratedProps, nextProps[propName], propName);
     instance.getChildProps = function () {
-        var _a = instance.state, _b = _a.props, props = _b === void 0 ? {} : _b, replace = _a.replace;
-        if (replace === true) {
-            return Object.assign({}, props, {
-                pushEvent: pushEvent
-            });
+        var state = instance.state;
+        var stateProps = __assign({}, state.props, state.decoratedProps);
+        if (state.replace === true) {
+            return __assign({}, stateProps, { pushEvent: pushEvent });
         }
-        else if (replace === false) {
-            return Object.assign({}, instance.props, decoratedProps, props, {
-                pushEvent: pushEvent
-            });
+        var componentProps = __assign({}, instance.props, decoratedProps, { pushEvent: pushEvent });
+        if (state.replace === false) {
+            return __assign({}, componentProps, stateProps);
         }
-        return Object.assign({}, instance.props, decoratedProps, {
-            pushEvent: pushEvent
-        });
+        return componentProps;
     };
+    instance.havePropsChanged = function (newProps, newState) {
+        var state = instance.state;
+        if (state.children) {
+            return state.children !== newState.children;
+        }
+        var haveStatePropsChanged = !shallowEquals(state.props, newState.props);
+        if (newState.replace === true) {
+            return haveStatePropsChanged;
+        }
+        var havePropsChanged = !shallowEquals(instance.props, newProps);
+        if (newState.replace === false) {
+            return havePropsChanged || haveStatePropsChanged;
+        }
+        return havePropsChanged;
+    };
 }; };
@@ -264,2 +286,5 @@
         };
+        WithEffects.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+            return this.havePropsChanged(nextProps, nextState);
+        };
         WithEffects.prototype.componentDidUpdate = function (prevProps) {
@@ -279,3 +304,3 @@ this.pushProps(prevProps);
         return WithEffects;
-    }(PureComponent));
+    }(Component));
 }; }; };
@@ -282,0 +307,0 @@

index.js

@@ -36,2 +36,10 @@ 'use strict';
 
+var __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+};
+
 var PROPS_EFFECT = '@@refract/effect/props';
@@ -72,5 +80,12 @@ var toProps = function (props) { return ({
 
+var shallowEquals = function (left, right) {
+    return left === right ||
+        (Object.keys(left).length === Object.keys(right).length &&
+            Object.keys(left).every(function (leftKey) { return left[leftKey] === right[leftKey]; }));
+};
 var configureComponent = function (handler, errorHandler) { return function (aperture, instance, isValidElement) {
     instance.state = {
-        children: null
+        children: null,
+        props: {},
+        decoratedProps: {}
     };
@@ -98,21 +113,16 @@ var setState = function (state) {
                 var payload_1 = effect.payload;
-                if (payload_1.replace) {
-                    setState({
-                        replace: payload_1.replace,
-                        props: Object.keys(payload_1.props || {}).reduce(function (props, propName) {
-                            var prop = payload_1.props[propName];
-                            if (propName !== 'children' &&
-                                typeof prop === 'function') {
-                                decorateProp(props, prop, propName);
-                            }
-                            else {
-                                props[propName] = prop;
-                            }
-                            return props;
-                        }, {})
-                    });
-                }
-                else {
-                    setState(payload_1);
-                }
+                setState({
+                    replace: payload_1.replace,
+                    props: payload_1.props,
+                    decoratedProps: Object.keys(payload_1.props || {}).reduce(function (props, propName) {
+                        var prop = payload_1.props[propName];
+                        var previousProp = instance.state.props[propName];
+                        if (propName !== 'children' &&
+                            typeof prop === 'function' &&
+                            prop !== previousProp) {
+                            decorateProp(props, prop, propName);
+                        }
+                        return props;
+                    }, {})
+                });
             }
@@ -215,3 +225,4 @@ else {
         Object.keys(nextProps).forEach(function (propName) {
-            if (typeof instance.props[propName] === 'function' &&
+            if (propName !== 'children' &&
+                typeof instance.props[propName] === 'function' &&
                 nextProps[propName] !== instance.props[propName]) {
@@ -233,17 +244,28 @@ decorateProp(decoratedProps, nextProps[propName], propName);
     instance.getChildProps = function () {
-        var _a = instance.state, _b = _a.props, props = _b === void 0 ? {} : _b, replace = _a.replace;
-        if (replace === true) {
-            return Object.assign({}, props, {
-                pushEvent: pushEvent
-            });
+        var state = instance.state;
+        var stateProps = __assign({}, state.props, state.decoratedProps);
+        if (state.replace === true) {
+            return __assign({}, stateProps, { pushEvent: pushEvent });
         }
-        else if (replace === false) {
-            return Object.assign({}, instance.props, decoratedProps, props, {
-                pushEvent: pushEvent
-            });
+        var componentProps = __assign({}, instance.props, decoratedProps, { pushEvent: pushEvent });
+        if (state.replace === false) {
+            return __assign({}, componentProps, stateProps);
         }
-        return Object.assign({}, instance.props, decoratedProps, {
-            pushEvent: pushEvent
-        });
+        return componentProps;
     };
+    instance.havePropsChanged = function (newProps, newState) {
+        var state = instance.state;
+        if (state.children) {
+            return state.children !== newState.children;
+        }
+        var haveStatePropsChanged = !shallowEquals(state.props, newState.props);
+        if (newState.replace === true) {
+            return haveStatePropsChanged;
+        }
+        var havePropsChanged = !shallowEquals(instance.props, newProps);
+        if (newState.replace === false) {
+            return havePropsChanged || haveStatePropsChanged;
+        }
+        return havePropsChanged;
+    };
 }; };
@@ -270,2 +292,5 @@
         };
+        WithEffects.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+            return this.havePropsChanged(nextProps, nextState);
+        };
         WithEffects.prototype.componentDidUpdate = function (prevProps) {
@@ -285,3 +310,3 @@ this.pushProps(prevProps);
         return WithEffects;
-    }(React.PureComponent));
+    }(React.Component));
 }; }; };
@@ -288,0 +313,0 @@

package.json

 {
     "name": "refract-xstream",
     "description": "Refract bindings for React with xstream: master your app effects reactively!",
-    "version": "2.0.0-rc.0",
+    "version": "2.0.0-rc.1",
     "main": "index.js",
@@ -6,0 +6,0 @@ "jsnext:main": "index.es.js",

types/withEffects.d.ts

@@ -7,3 +7,4 @@ /// <reference types="react" />
     replace?: boolean
-    props?: any
+    props: object
+    decoratedProps: object
     children: React.ReactNode | null
@@ -10,0 +11,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

37330

increased by6.83%

Lines of code

763

increased by6.86%

No dependency changes