refract-callbag - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0-rc.0

index.es.js

 import $$observable from 'symbol-observable';
-import { createElement, PureComponent } from 'react';
+import { isValidElement, createElement, PureComponent } from 'react';
 
@@ -30,11 +30,17 @@ /*! *****************************************************************************
 
-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 PROPS_EFFECT = '@@refract/effect/props';
+var toProps = function (props) { return ({
+    type: PROPS_EFFECT,
+    payload: {
+        replace: false,
+        props: props
+    }
+}); };
+var asProps = function (props) { return ({
+    type: PROPS_EFFECT,
+    payload: {
+        replace: true,
+        props: props
+    }
+}); };
 
@@ -64,3 +70,52 @@ var fromObs = require('callbag-from-obs');
 
-var configureComponent = function (handler, errorHandler) { return function (aperture, instance) {
+var configureComponent = function (handler, errorHandler) { return function (aperture, instance, isValidElement$$1) {
+    instance.state = {
+        children: null
+    };
+    var setState = function (state) {
+        if (instance.unmounted) {
+            return;
+        }
+        if (instance.mounted) {
+            instance.setState(state);
+        }
+        else {
+            instance.state = state;
+        }
+    };
+    var finalHandler = function (initialProps) {
+        var effectHandler = handler(initialProps);
+        return function (effect) {
+            if (isValidElement$$1 && isValidElement$$1(effect)) {
+                setState({
+                    children: effect
+                });
+            }
+            else if (effect && effect.type === PROPS_EFFECT) {
+                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);
+                }
+            }
+            else {
+                effectHandler(effect);
+            }
+        };
+    };
     var listeners = {
@@ -80,7 +135,7 @@ mount: [],
     }; };
-    var decorateProp = function (prop, propName) {
+    var decorateProp = function (container, prop, propName) {
         if (propName === 'children') {
             return;
         }
-        decoratedProps[propName] = function () {
+        container[propName] = function () {
             var args = [];
@@ -96,3 +151,3 @@ for (var _i = 0; _i < arguments.length; _i++) {
         if (typeof instance.props[propName] === 'function') {
-            decorateProp(instance.props[propName], propName);
+            decorateProp(decoratedProps, instance.props[propName], propName);
         }
@@ -143,6 +198,7 @@ });
         observe: createPropObservable,
-        event: createEventObservable
+        event: createEventObservable,
+        pushEvent: pushEvent
     };
     var sinkObservable = aperture(instance.props)(component);
-    var sinkSubscription = subscribeToSink(sinkObservable, handler(instance.props), errorHandler ? errorHandler(instance.props) : undefined);
+    var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props), errorHandler ? errorHandler(instance.props) : undefined);
     var sendNext = function (prevProps) {
@@ -161,3 +217,3 @@ Object.keys(listeners.props).forEach(function (propName) {
                 nextProps[propName] !== instance.props[propName]) {
-                decorateProp(nextProps[propName], propName);
+                decorateProp(decoratedProps, nextProps[propName], propName);
             }
@@ -177,4 +233,14 @@ });
     instance.getChildProps = function () {
-        var _a = instance.props, children = _a.children, props = __rest(_a, ["children"]);
-        return Object.assign({}, props, decoratedProps, {
+        var _a = instance.state, _b = _a.props, props = _b === void 0 ? {} : _b, replace = _a.replace;
+        if (replace === true) {
+            return Object.assign({}, props, {
+                pushEvent: pushEvent
+            });
+        }
+        else if (replace === false) {
+            return Object.assign({}, instance.props, decoratedProps, props, {
+                pushEvent: pushEvent
+            });
+        }
+        return Object.assign({}, instance.props, decoratedProps, {
             pushEvent: pushEvent
@@ -185,3 +251,5 @@ });
 
+var Empty = function () { return null; };
 var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
+    if (BaseComponent === void 0) { BaseComponent = Empty; }
     return /** @class */ (function (_super) {
@@ -191,6 +259,9 @@ __extends(WithEffects, _super);
             var _this = _super.call(this, props, context) || this;
-            configureComponent(handler, errorHandler)(aperture, _this);
+            _this.mounted = false;
+            _this.unmounted = false;
+            configureComponent(handler, errorHandler)(aperture, _this, isValidElement);
             return _this;
         }
         WithEffects.prototype.componentDidMount = function () {
+            this.mounted = true;
             this.triggerMount();
@@ -205,6 +276,10 @@ };
         WithEffects.prototype.componentWillUnmount = function () {
+            this.unmounted = true;
             this.triggerUnmount();
         };
         WithEffects.prototype.render = function () {
-            return createElement(BaseComponent, this.getChildProps(), this.props.children);
+            if (this.state.children) {
+                return this.state.children;
+            }
+            return createElement(BaseComponent, this.getChildProps());
         };
@@ -232,2 +307,2 @@ return WithEffects;
 
-export { withEffects, compose };
+export { withEffects, compose, asProps, toProps, PROPS_EFFECT };

index.js

@@ -36,11 +36,17 @@ '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 PROPS_EFFECT = '@@refract/effect/props';
+var toProps = function (props) { return ({
+    type: PROPS_EFFECT,
+    payload: {
+        replace: false,
+        props: props
+    }
+}); };
+var asProps = function (props) { return ({
+    type: PROPS_EFFECT,
+    payload: {
+        replace: true,
+        props: props
+    }
+}); };
 
@@ -70,3 +76,52 @@ var fromObs = require('callbag-from-obs');
 
-var configureComponent = function (handler, errorHandler) { return function (aperture, instance) {
+var configureComponent = function (handler, errorHandler) { return function (aperture, instance, isValidElement) {
+    instance.state = {
+        children: null
+    };
+    var setState = function (state) {
+        if (instance.unmounted) {
+            return;
+        }
+        if (instance.mounted) {
+            instance.setState(state);
+        }
+        else {
+            instance.state = state;
+        }
+    };
+    var finalHandler = function (initialProps) {
+        var effectHandler = handler(initialProps);
+        return function (effect) {
+            if (isValidElement && isValidElement(effect)) {
+                setState({
+                    children: effect
+                });
+            }
+            else if (effect && effect.type === PROPS_EFFECT) {
+                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);
+                }
+            }
+            else {
+                effectHandler(effect);
+            }
+        };
+    };
     var listeners = {
@@ -86,7 +141,7 @@ mount: [],
     }; };
-    var decorateProp = function (prop, propName) {
+    var decorateProp = function (container, prop, propName) {
         if (propName === 'children') {
             return;
         }
-        decoratedProps[propName] = function () {
+        container[propName] = function () {
             var args = [];
@@ -102,3 +157,3 @@ for (var _i = 0; _i < arguments.length; _i++) {
         if (typeof instance.props[propName] === 'function') {
-            decorateProp(instance.props[propName], propName);
+            decorateProp(decoratedProps, instance.props[propName], propName);
         }
@@ -149,6 +204,7 @@ });
         observe: createPropObservable,
-        event: createEventObservable
+        event: createEventObservable,
+        pushEvent: pushEvent
     };
     var sinkObservable = aperture(instance.props)(component);
-    var sinkSubscription = subscribeToSink(sinkObservable, handler(instance.props), errorHandler ? errorHandler(instance.props) : undefined);
+    var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props), errorHandler ? errorHandler(instance.props) : undefined);
     var sendNext = function (prevProps) {
@@ -167,3 +223,3 @@ Object.keys(listeners.props).forEach(function (propName) {
                 nextProps[propName] !== instance.props[propName]) {
-                decorateProp(nextProps[propName], propName);
+                decorateProp(decoratedProps, nextProps[propName], propName);
             }
@@ -183,4 +239,14 @@ });
     instance.getChildProps = function () {
-        var _a = instance.props, children = _a.children, props = __rest(_a, ["children"]);
-        return Object.assign({}, props, decoratedProps, {
+        var _a = instance.state, _b = _a.props, props = _b === void 0 ? {} : _b, replace = _a.replace;
+        if (replace === true) {
+            return Object.assign({}, props, {
+                pushEvent: pushEvent
+            });
+        }
+        else if (replace === false) {
+            return Object.assign({}, instance.props, decoratedProps, props, {
+                pushEvent: pushEvent
+            });
+        }
+        return Object.assign({}, instance.props, decoratedProps, {
             pushEvent: pushEvent
@@ -191,3 +257,5 @@ });
 
+var Empty = function () { return null; };
 var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
+    if (BaseComponent === void 0) { BaseComponent = Empty; }
     return /** @class */ (function (_super) {
@@ -197,6 +265,9 @@ __extends(WithEffects, _super);
             var _this = _super.call(this, props, context) || this;
-            configureComponent(handler, errorHandler)(aperture, _this);
+            _this.mounted = false;
+            _this.unmounted = false;
+            configureComponent(handler, errorHandler)(aperture, _this, React.isValidElement);
             return _this;
         }
         WithEffects.prototype.componentDidMount = function () {
+            this.mounted = true;
             this.triggerMount();
@@ -211,6 +282,10 @@ };
         WithEffects.prototype.componentWillUnmount = function () {
+            this.unmounted = true;
             this.triggerUnmount();
         };
         WithEffects.prototype.render = function () {
-            return React.createElement(BaseComponent, this.getChildProps(), this.props.children);
+            if (this.state.children) {
+                return this.state.children;
+            }
+            return React.createElement(BaseComponent, this.getChildProps());
         };
@@ -240,1 +315,4 @@ return WithEffects;
 exports.compose = compose;
+exports.asProps = asProps;
+exports.toProps = toProps;
+exports.PROPS_EFFECT = PROPS_EFFECT;

package.json

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

README.md

 <p align="center">
-    <a href="#"><img src="../../logo/refract-logo-colour.png" height="70" /></a>
+    <a href="#"><img src="https://raw.githubusercontent.com/fanduel-oss/refract/master/logo/refract-logo-colour.png" height="70" /></a>
 </p><br/>
@@ -57,6 +57,6 @@
 | --- | --- | --- | --- | --- |
-| **[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 |
+| **[Callbag](https://github.com/callbag/callbag)** | refract-callbag | refract-inferno-callbag | refract-preact-callbag | refract-redux-callbag |
+| **[Most](https://github.com/cujojs/most)** | refract-most | refract-inferno-most | refract-preact-most | refract-redux-most |
+| **[RxJS](https://github.com/reactivex/rxjs)** | refract-rxjs | refract-inferno-rxjs | refract-preact-rxjs | refract-redux-rxjs |
+| **[xstream](https://github.com/staltz/xstream)** | refract-xstream | refract-inferno-xstream | refract-preact-xstream | refract-redux-xstream |
 <!-- prettier-ignore-end -->
@@ -63,0 +63,0 @@

types/configureComponent.d.ts

@@ -6,3 +6,7 @@ import { Handler, ErrorHandler } from './baseTypes'
     errorHandler?: ErrorHandler<P>
-) => (aperture: Aperture<P, E>, instance: any) => void
+) => (
+    aperture: Aperture<P, E>,
+    instance: any,
+    isValidElement?: (val: any) => boolean
+) => void
 export default configureComponent

types/index.d.ts

@@ -5,2 +5,3 @@ import { withEffects } from './withEffects'
 import { compose, Compose } from './compose'
+import { asProps, toProps, PROPS_EFFECT, PropEffect } from './effects'
 export {
@@ -13,3 +14,7 @@ withEffects,
     compose,
-    Compose
+    Compose,
+    asProps,
+    toProps,
+    PropEffect,
+    PROPS_EFFECT
 }

types/observable.d.ts

 import { Callbag, Source, Sink } from 'callbag'
+import { PushEvent } from './baseTypes'
 export interface Listener<T> {
@@ -11,6 +12,7 @@ next: (val: T) => void
 export interface ObservableComponent {
-    observe: <T = any>(propName: string) => Source<T>
+    observe: <T = any>(propName?: string) => Source<T>
     event: <T>(eventName: string) => Source<T>
     mount: Source<any>
     unmount: Source<any>
+    pushEvent: PushEvent
 }
@@ -17,0 +19,0 @@ export declare type Aperture<P, E> = (

types/withEffects.d.ts

@@ -5,3 +5,8 @@ /// <reference types="react" />
 import { Aperture } from './observable'
-export declare const withEffects: <P, E>(
+export interface State {
+    replace?: boolean
+    props?: any
+    children: React.ReactNode | null
+}
+export declare const withEffects: <P, E, CP = P>(
     handler: Handler<P, E>,
@@ -12,4 +17,4 @@ errorHandler?: ErrorHandler<P>
 ) => (
-    BaseComponent: React.ComponentType<
-        P & {
+    BaseComponent?: React.ComponentType<
+        CP & {
             pushEvent: PushEvent
@@ -16,0 +21,0 @@ }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35619

increased by19.22%

Number of package files

11

increased by10%

Lines of code

729

increased by32.55%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes