refract-callbag - npm Package Compare versions

Comparing version 1.0.0-7 to 1.0.0-8

index.es.js

@@ -30,2 +30,12 @@ import $$observable from 'symbol-observable';
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+}
+
 var fromObs = require('callbag-from-obs');
@@ -54,2 +64,117 @@ var toObs = require('callbag-to-obs');
 
+var configureComponent = function (handler, errorHandler) { return function (aperture, instance) {
+    var listeners = {
+        mount: [],
+        unmount: [],
+        allProps: [],
+        props: {},
+        fnProps: {},
+        event: {}
+    };
+    var decoratedProps = {};
+    var pushEvent = function (eventName) { return function (val) {
+        (listeners.event[eventName] || []).forEach(function (listener) {
+            return listener.next(val);
+        });
+    }; };
+    var decorateProp = function (prop, propName) {
+        if (propName === 'children') {
+            return;
+        }
+        decoratedProps[propName] = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            (listeners.fnProps[propName] || []).forEach(function (l) { return l.next(args[0]); });
+            return prop.apply(void 0, args);
+        };
+    };
+    Object.keys(instance.props).forEach(function (propName) {
+        if (typeof instance.props[propName] === 'function') {
+            decorateProp(instance.props[propName], propName);
+        }
+    });
+    var mountObservable = createObservable(function (listener) {
+        listeners.mount = listeners.mount.concat(listener);
+        return function () { return listeners.mount.filter(function (l) { return l !== listener; }); };
+    });
+    var unmountObservable = createObservable(function (listener) {
+        listeners.unmount = listeners.unmount.concat(listener);
+        return function () { return listeners.unmount.filter(function (l) { return l !== listener; }); };
+    });
+    var createPropObservable = function (propName) {
+        var listenerType = propName
+            ? typeof instance.props[propName] === 'function'
+                ? 'fnProps'
+                : 'props'
+            : 'allProps';
+        return createObservable(function (listener) {
+            if (listenerType === 'allProps') {
+                listener.next(instance.props);
+                listeners.allProps = listeners.allProps.concat(listener);
+                return function () {
+                    listeners.allProps.filter(function (l) { return l !== listener; });
+                };
+            }
+            if (listenerType === 'props') {
+                listener.next(instance.props[propName]);
+            }
+            listeners[listenerType][propName] = (listeners[listenerType][propName] || []).concat(listener);
+            return function () {
+                listeners[listenerType][propName].filter(function (l) { return l !== listener; });
+            };
+        });
+    };
+    var createEventObservable = function (eventName) {
+        return createObservable(function (listener) {
+            listeners.event[eventName] = (listeners.event[eventName] || []).concat(listener);
+            return function () {
+                listeners.event[eventName].filter(function (l) { return l !== listener; });
+            };
+        });
+    };
+    var component = {
+        mount: mountObservable,
+        unmount: unmountObservable,
+        observe: createPropObservable,
+        event: createEventObservable
+    };
+    var sinkObservable = aperture(instance.props)(component);
+    var sinkSubscription = subscribeToSink(sinkObservable, handler(instance.props), errorHandler ? errorHandler(instance.props) : undefined);
+    var sendNext = function (prevProps) {
+        Object.keys(listeners.props).forEach(function (propName) {
+            var prop = instance.props[propName];
+            if (!prevProps || prevProps[propName] !== prop) {
+                listeners.props[propName].forEach(function (l) { return l.next(prop); });
+            }
+        });
+        listeners.allProps.forEach(function (l) { return l.next(instance.props); });
+    };
+    instance.reDecorateProps = function (nextProps) {
+        Object.keys(nextProps).forEach(function (propName) {
+            if (typeof instance.props[propName] === 'function' &&
+                nextProps[propName] !== instance.props[propName]) {
+                decorateProp(nextProps[propName], propName);
+            }
+        });
+    };
+    instance.pushProps = function (prevProps) {
+        sendNext(prevProps);
+    };
+    instance.triggerMount = function () {
+        listeners.mount.forEach(function (l) { return l.next(undefined); });
+    };
+    instance.triggerUnmount = function () {
+        listeners.unmount.forEach(function (l) { return l.next(undefined); });
+        sinkSubscription.unsubscribe();
+    };
+    instance.getChildProps = function () {
+        var _a = instance.props, children = _a.children, props = __rest(_a, ["children"]);
+        return Object.assign({}, props, decoratedProps, {
+            pushEvent: pushEvent
+        });
+    };
+}; };
+
 var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
@@ -60,118 +185,20 @@ return /** @class */ (function (_super) {
             var _this = _super.call(this, props, context) || this;
-            _this.decoratedProps = {};
-            _this.listeners = {
-                mount: [],
-                unmount: [],
-                allProps: [],
-                props: {},
-                fnProps: {},
-                event: {}
-            };
-            _this.pushEvent = function (eventName) { return function (val) {
-                var listeners = _this.listeners.event[eventName] || [];
-                listeners.forEach(function (listener) { return listener.next(val); });
-            }; };
-            Object.keys(props).forEach(function (propName) {
-                var prop = props[propName];
-                if (typeof prop === 'function') {
-                    _this.decorateProp(prop, propName);
-                }
-            });
-            var mountObservable = createObservable(function (listener) {
-                _this.listeners.mount = _this.listeners.mount.concat(listener);
-                return function () { return _this.listeners.mount.filter(function (l) { return l !== listener; }); };
-            });
-            var unmountObservable = createObservable(function (listener) {
-                _this.listeners.unmount = _this.listeners.unmount.concat(listener);
-                return function () { return _this.listeners.unmount.filter(function (l) { return l !== listener; }); };
-            });
-            var createPropObservable = function (propName) {
-                var listenerType = propName
-                    ? typeof _this.props[propName] === 'function'
-                        ? 'fnProps'
-                        : 'props'
-                    : 'allProps';
-                return createObservable(function (listener) {
-                    if (listenerType === 'allProps') {
-                        listener.next(_this.props);
-                        _this.listeners.allProps = _this.listeners.allProps.concat(listener);
-                        return function () {
-                            _this.listeners.allProps.filter(function (l) { return l !== listener; });
-                        };
-                    }
-                    if (listenerType === 'props') {
-                        listener.next(_this.props[propName]);
-                    }
-                    _this.listeners[listenerType][propName] = (_this.listeners[listenerType][propName] || []).concat(listener);
-                    return function () {
-                        _this.listeners[listenerType][propName].filter(function (l) { return l !== listener; });
-                    };
-                });
-            };
-            var createSignalObservable = function (eventName) {
-                return createObservable(function (listener) {
-                    _this.listeners.event[eventName] = (_this.listeners.event[eventName] || []).concat(listener);
-                    return function () {
-                        _this.listeners.event[eventName].filter(function (l) { return l !== listener; });
-                    };
-                });
-            };
-            _this.component = {
-                mount: mountObservable,
-                unmount: unmountObservable,
-                observe: createPropObservable,
-                event: createSignalObservable
-            };
-            var sinkObservable = aperture(_this.props)(_this.component);
-            _this.sinkSubscription = subscribeToSink(sinkObservable, handler(_this.props), errorHandler ? errorHandler(_this.props) : undefined);
+            configureComponent(handler, errorHandler)(aperture, _this);
             return _this;
         }
         WithEffects.prototype.componentDidMount = function () {
-            this.listeners.mount.forEach(function (l) { return l.next(undefined); });
+            this.triggerMount();
         };
         WithEffects.prototype.componentWillReceiveProps = function (nextProps) {
-            var _this = this;
-            // Note: this will be replaced by getDerivedStateFromProps
-            // but for now, we want to support React < 16.3.0
-            Object.keys(nextProps).forEach(function (propName) {
-                if (typeof _this.props[propName] === 'function' &&
-                    nextProps[propName] !== _this.props[propName]) {
-                    _this.decorateProp(nextProps[propName], propName);
-                }
-            });
+            this.reDecorateProps(nextProps);
         };
         WithEffects.prototype.componentDidUpdate = function (prevProps) {
-            this.sendNext(prevProps);
+            this.pushProps(prevProps);
         };
         WithEffects.prototype.componentWillUnmount = function () {
-            this.listeners.unmount.forEach(function (l) { return l.next(undefined); });
-            this.sinkSubscription.unsubscribe();
+            this.triggerUnmount();
         };
         WithEffects.prototype.render = function () {
-            return createElement(BaseComponent, Object.assign({}, this.props, this.decoratedProps, {
-                pushEvent: this.pushEvent
-            }));
+            return createElement(BaseComponent, this.getChildProps(), this.props.children);
         };
-        WithEffects.prototype.sendNext = function (prevProps) {
-            var _this = this;
-            Object.keys(this.listeners.props).forEach(function (propName) {
-                var prop = _this.props[propName];
-                if (!prevProps || prevProps[propName] !== prop) {
-                    _this.listeners.props[propName].forEach(function (l) { return l.next(prop); });
-                }
-            });
-            this.listeners.allProps.forEach(function (l) { return l.next(_this.props); });
-        };
-        WithEffects.prototype.decorateProp = function (prop, propName) {
-            var _this = this;
-            this.decoratedProps[propName] = function () {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                var listeners = _this.listeners.fnProps[propName] || [];
-                listeners.forEach(function (l) { return l.next(args[0]); });
-                return prop.apply(void 0, args);
-            };
-        };
         return WithEffects;
@@ -178,0 +205,0 @@ }(PureComponent));

index.js

@@ -36,2 +36,12 @@ 'use strict';
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+}
+
 var fromObs = require('callbag-from-obs');
@@ -60,2 +70,117 @@ var toObs = require('callbag-to-obs');
 
+var configureComponent = function (handler, errorHandler) { return function (aperture, instance) {
+    var listeners = {
+        mount: [],
+        unmount: [],
+        allProps: [],
+        props: {},
+        fnProps: {},
+        event: {}
+    };
+    var decoratedProps = {};
+    var pushEvent = function (eventName) { return function (val) {
+        (listeners.event[eventName] || []).forEach(function (listener) {
+            return listener.next(val);
+        });
+    }; };
+    var decorateProp = function (prop, propName) {
+        if (propName === 'children') {
+            return;
+        }
+        decoratedProps[propName] = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            (listeners.fnProps[propName] || []).forEach(function (l) { return l.next(args[0]); });
+            return prop.apply(void 0, args);
+        };
+    };
+    Object.keys(instance.props).forEach(function (propName) {
+        if (typeof instance.props[propName] === 'function') {
+            decorateProp(instance.props[propName], propName);
+        }
+    });
+    var mountObservable = createObservable(function (listener) {
+        listeners.mount = listeners.mount.concat(listener);
+        return function () { return listeners.mount.filter(function (l) { return l !== listener; }); };
+    });
+    var unmountObservable = createObservable(function (listener) {
+        listeners.unmount = listeners.unmount.concat(listener);
+        return function () { return listeners.unmount.filter(function (l) { return l !== listener; }); };
+    });
+    var createPropObservable = function (propName) {
+        var listenerType = propName
+            ? typeof instance.props[propName] === 'function'
+                ? 'fnProps'
+                : 'props'
+            : 'allProps';
+        return createObservable(function (listener) {
+            if (listenerType === 'allProps') {
+                listener.next(instance.props);
+                listeners.allProps = listeners.allProps.concat(listener);
+                return function () {
+                    listeners.allProps.filter(function (l) { return l !== listener; });
+                };
+            }
+            if (listenerType === 'props') {
+                listener.next(instance.props[propName]);
+            }
+            listeners[listenerType][propName] = (listeners[listenerType][propName] || []).concat(listener);
+            return function () {
+                listeners[listenerType][propName].filter(function (l) { return l !== listener; });
+            };
+        });
+    };
+    var createEventObservable = function (eventName) {
+        return createObservable(function (listener) {
+            listeners.event[eventName] = (listeners.event[eventName] || []).concat(listener);
+            return function () {
+                listeners.event[eventName].filter(function (l) { return l !== listener; });
+            };
+        });
+    };
+    var component = {
+        mount: mountObservable,
+        unmount: unmountObservable,
+        observe: createPropObservable,
+        event: createEventObservable
+    };
+    var sinkObservable = aperture(instance.props)(component);
+    var sinkSubscription = subscribeToSink(sinkObservable, handler(instance.props), errorHandler ? errorHandler(instance.props) : undefined);
+    var sendNext = function (prevProps) {
+        Object.keys(listeners.props).forEach(function (propName) {
+            var prop = instance.props[propName];
+            if (!prevProps || prevProps[propName] !== prop) {
+                listeners.props[propName].forEach(function (l) { return l.next(prop); });
+            }
+        });
+        listeners.allProps.forEach(function (l) { return l.next(instance.props); });
+    };
+    instance.reDecorateProps = function (nextProps) {
+        Object.keys(nextProps).forEach(function (propName) {
+            if (typeof instance.props[propName] === 'function' &&
+                nextProps[propName] !== instance.props[propName]) {
+                decorateProp(nextProps[propName], propName);
+            }
+        });
+    };
+    instance.pushProps = function (prevProps) {
+        sendNext(prevProps);
+    };
+    instance.triggerMount = function () {
+        listeners.mount.forEach(function (l) { return l.next(undefined); });
+    };
+    instance.triggerUnmount = function () {
+        listeners.unmount.forEach(function (l) { return l.next(undefined); });
+        sinkSubscription.unsubscribe();
+    };
+    instance.getChildProps = function () {
+        var _a = instance.props, children = _a.children, props = __rest(_a, ["children"]);
+        return Object.assign({}, props, decoratedProps, {
+            pushEvent: pushEvent
+        });
+    };
+}; };
+
 var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
@@ -66,118 +191,20 @@ return /** @class */ (function (_super) {
             var _this = _super.call(this, props, context) || this;
-            _this.decoratedProps = {};
-            _this.listeners = {
-                mount: [],
-                unmount: [],
-                allProps: [],
-                props: {},
-                fnProps: {},
-                event: {}
-            };
-            _this.pushEvent = function (eventName) { return function (val) {
-                var listeners = _this.listeners.event[eventName] || [];
-                listeners.forEach(function (listener) { return listener.next(val); });
-            }; };
-            Object.keys(props).forEach(function (propName) {
-                var prop = props[propName];
-                if (typeof prop === 'function') {
-                    _this.decorateProp(prop, propName);
-                }
-            });
-            var mountObservable = createObservable(function (listener) {
-                _this.listeners.mount = _this.listeners.mount.concat(listener);
-                return function () { return _this.listeners.mount.filter(function (l) { return l !== listener; }); };
-            });
-            var unmountObservable = createObservable(function (listener) {
-                _this.listeners.unmount = _this.listeners.unmount.concat(listener);
-                return function () { return _this.listeners.unmount.filter(function (l) { return l !== listener; }); };
-            });
-            var createPropObservable = function (propName) {
-                var listenerType = propName
-                    ? typeof _this.props[propName] === 'function'
-                        ? 'fnProps'
-                        : 'props'
-                    : 'allProps';
-                return createObservable(function (listener) {
-                    if (listenerType === 'allProps') {
-                        listener.next(_this.props);
-                        _this.listeners.allProps = _this.listeners.allProps.concat(listener);
-                        return function () {
-                            _this.listeners.allProps.filter(function (l) { return l !== listener; });
-                        };
-                    }
-                    if (listenerType === 'props') {
-                        listener.next(_this.props[propName]);
-                    }
-                    _this.listeners[listenerType][propName] = (_this.listeners[listenerType][propName] || []).concat(listener);
-                    return function () {
-                        _this.listeners[listenerType][propName].filter(function (l) { return l !== listener; });
-                    };
-                });
-            };
-            var createSignalObservable = function (eventName) {
-                return createObservable(function (listener) {
-                    _this.listeners.event[eventName] = (_this.listeners.event[eventName] || []).concat(listener);
-                    return function () {
-                        _this.listeners.event[eventName].filter(function (l) { return l !== listener; });
-                    };
-                });
-            };
-            _this.component = {
-                mount: mountObservable,
-                unmount: unmountObservable,
-                observe: createPropObservable,
-                event: createSignalObservable
-            };
-            var sinkObservable = aperture(_this.props)(_this.component);
-            _this.sinkSubscription = subscribeToSink(sinkObservable, handler(_this.props), errorHandler ? errorHandler(_this.props) : undefined);
+            configureComponent(handler, errorHandler)(aperture, _this);
             return _this;
         }
         WithEffects.prototype.componentDidMount = function () {
-            this.listeners.mount.forEach(function (l) { return l.next(undefined); });
+            this.triggerMount();
         };
         WithEffects.prototype.componentWillReceiveProps = function (nextProps) {
-            var _this = this;
-            // Note: this will be replaced by getDerivedStateFromProps
-            // but for now, we want to support React < 16.3.0
-            Object.keys(nextProps).forEach(function (propName) {
-                if (typeof _this.props[propName] === 'function' &&
-                    nextProps[propName] !== _this.props[propName]) {
-                    _this.decorateProp(nextProps[propName], propName);
-                }
-            });
+            this.reDecorateProps(nextProps);
         };
         WithEffects.prototype.componentDidUpdate = function (prevProps) {
-            this.sendNext(prevProps);
+            this.pushProps(prevProps);
         };
         WithEffects.prototype.componentWillUnmount = function () {
-            this.listeners.unmount.forEach(function (l) { return l.next(undefined); });
-            this.sinkSubscription.unsubscribe();
+            this.triggerUnmount();
         };
         WithEffects.prototype.render = function () {
-            return React.createElement(BaseComponent, Object.assign({}, this.props, this.decoratedProps, {
-                pushEvent: this.pushEvent
-            }));
+            return React.createElement(BaseComponent, this.getChildProps(), this.props.children);
         };
-        WithEffects.prototype.sendNext = function (prevProps) {
-            var _this = this;
-            Object.keys(this.listeners.props).forEach(function (propName) {
-                var prop = _this.props[propName];
-                if (!prevProps || prevProps[propName] !== prop) {
-                    _this.listeners.props[propName].forEach(function (l) { return l.next(prop); });
-                }
-            });
-            this.listeners.allProps.forEach(function (l) { return l.next(_this.props); });
-        };
-        WithEffects.prototype.decorateProp = function (prop, propName) {
-            var _this = this;
-            this.decoratedProps[propName] = function () {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                var listeners = _this.listeners.fnProps[propName] || [];
-                listeners.forEach(function (l) { return l.next(args[0]); });
-                return prop.apply(void 0, args);
-            };
-        };
         return WithEffects;
@@ -184,0 +211,0 @@ }(React.PureComponent));

package.json

 {
     "name": "refract-callbag",
-    "version": "1.0.0-7",
+    "version": "1.0.0-8",
     "main": "index.js",
@@ -13,5 +13,2 @@ "jsnext:main": "index.es.js",
     },
-    "devDependencies": {
-        "callbag-map": "~1.0.1"
-    },
     "dependencies": {
@@ -18,0 +15,0 @@ "callbag": "~1.1.0",

README.md

@@ -6,3 +6,3 @@ <p align="center">
 <p align="center">
-    Master your React app's effects through the<br/>
+    Master your component's effects through the<br/>
     power of reactive programming.
@@ -33,3 +33,3 @@ </p>
 
-Refract is an extensible library built for React. In addition we provide a Redux integration, which can also serve as a template for integrations with other libraries.
+Refract is an extensible library built for React, with bindings available for Inferno and Preact. In addition we provide a Redux integration, which can also serve as a template for integrations with other libraries.
 
@@ -52,3 +52,3 @@ # Why?
 
-Refract is available for a number of reactive programming libraries. For each library, a Refract integration is available for both React and Redux.
+Refract is available for a number of reactive programming libraries. For each library, a Refract integration is available for React, Inferno, Preact and Redux.
 
@@ -58,8 +58,8 @@ Available packages:
 <!-- prettier-ignore-start -->
-| | [React](https://github.com/facebook/react) | [Redux](https://github.com/reduxjs/redux) |
-| --- | --- | --- |
-| **[Callbag](https://github.com/callbag/callbag)** | refract-callbag | refract-redux-callbag |
-| **[Most](https://github.com/cujojs/most)** | refract-most | refract-redux-most |
-| **[RxJS](https://github.com/reactivex/rxjs)** | refract-rxjs | refract-redux-rxjs |
-| **[xstream](https://github.com/staltz/xstream)** | refract-xstream | refract-redux-xstream |
+| | [React](https://github.com/facebook/react) | [Inferno](https://infernojs.org/) | [Preact](https://preactjs.com/) | [Redux](https://github.com/reduxjs/redux) |
+| --- | --- | --- | --- | --- |
+| **[Callbag](https://github.com/callbag/callbag)** | refract-callbag | refract-inferno-callbag | refact-preact-callbag | refract-redux-callbag |
+| **[Most](https://github.com/cujojs/most)** | refract-most | refract-inferno-most | refact-preact-most | refract-redux-most |
+| **[RxJS](https://github.com/reactivex/rxjs)** | refract-rxjs | refract-inferno-rxjs | refact-preact-rxjs | refract-redux-rxjs |
+| **[xstream](https://github.com/staltz/xstream)** | refract-xstream | refract-inferno-xstream | refact-preact-xstream | refract-redux-xstream |
 <!-- prettier-ignore-end -->
@@ -66,0 +66,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

28604

decreased by-24.64%

Number of package files

10

decreased by-33.33%

Lines of code

550

decreased by-30.2%

No dependency changes