refract-preact-xstream - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0-rc.0

index.es.js

@@ -30,11 +30,17 @@ import xs from 'xstream';
 
-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
+    }
+}); };
 
@@ -60,3 +66,52 @@ var subscribeToSink = function (sink, next, error) {
 
-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 = {
@@ -76,7 +131,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 = [];
@@ -92,3 +147,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);
         }
@@ -139,6 +194,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) {
@@ -157,3 +213,3 @@ Object.keys(listeners.props).forEach(function (propName) {
                 nextProps[propName] !== instance.props[propName]) {
-                decorateProp(nextProps[propName], propName);
+                decorateProp(decoratedProps, nextProps[propName], propName);
             }
@@ -173,4 +229,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
@@ -181,3 +247,13 @@ });
 
+var Empty = function () { return null; };
+var isValidElement = function (value) {
+    return Boolean(value) &&
+        typeof value === 'object' &&
+        'nodeName' in value &&
+        'children' in value &&
+        'attributes' in value &&
+        'key' in value;
+};
 var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
+    if (BaseComponent === void 0) { BaseComponent = Empty; }
     return /** @class */ (function (_super) {
@@ -187,6 +263,9 @@ __extends(WithEffects, _super);
             var _this = _super.call(this, props) || 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();
@@ -201,6 +280,10 @@ };
         WithEffects.prototype.componentWillUnmount = function () {
+            this.unmounted = true;
             this.triggerUnmount();
         };
         WithEffects.prototype.render = function () {
-            return h(BaseComponent, this.getChildProps(), this.props.children);
+            if (this.state.children) {
+                return this.state.children;
+            }
+            return h(BaseComponent, this.getChildProps());
         };
@@ -228,2 +311,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
+    }
+}); };
 
@@ -66,3 +72,52 @@ var subscribeToSink = function (sink, next, error) {
 
-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 = {
@@ -82,7 +137,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 = [];
@@ -98,3 +153,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);
         }
@@ -145,6 +200,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) {
@@ -163,3 +219,3 @@ Object.keys(listeners.props).forEach(function (propName) {
                 nextProps[propName] !== instance.props[propName]) {
-                decorateProp(nextProps[propName], propName);
+                decorateProp(decoratedProps, nextProps[propName], propName);
             }
@@ -179,4 +235,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
@@ -187,3 +253,13 @@ });
 
+var Empty = function () { return null; };
+var isValidElement = function (value) {
+    return Boolean(value) &&
+        typeof value === 'object' &&
+        'nodeName' in value &&
+        'children' in value &&
+        'attributes' in value &&
+        'key' in value;
+};
 var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
+    if (BaseComponent === void 0) { BaseComponent = Empty; }
     return /** @class */ (function (_super) {
@@ -193,6 +269,9 @@ __extends(WithEffects, _super);
             var _this = _super.call(this, props) || 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();
@@ -207,6 +286,10 @@ };
         WithEffects.prototype.componentWillUnmount = function () {
+            this.unmounted = true;
             this.triggerUnmount();
         };
         WithEffects.prototype.render = function () {
-            return preact.h(BaseComponent, this.getChildProps(), this.props.children);
+            if (this.state.children) {
+                return this.state.children;
+            }
+            return preact.h(BaseComponent, this.getChildProps());
         };
@@ -236,1 +319,4 @@ return WithEffects;
 exports.compose = compose;
+exports.asProps = asProps;
+exports.toProps = toProps;
+exports.PROPS_EFFECT = PROPS_EFFECT;

package.json

 {
     "name": "refract-preact-xstream",
-    "description":
-        "Refract bindings for Preact with xstream: master your app effects reactively!",
-    "version": "1.0.0",
+    "description": "Refract bindings for Preact with xstream: 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 { Stream, Listener, Subscription } from 'xstream'
+import { PushEvent } from './baseTypes'
 export { Listener, Subscription }
 export interface ObservableComponent {
-    observe: <T>(propName: string) => Stream<T>
+    observe: <T>(propName?: string) => Stream<T>
     event: <T>(eventName: string) => Stream<T>
     mount: Stream<any>
     unmount: Stream<any>
+    pushEvent: PushEvent
 }
@@ -9,0 +11,0 @@ export declare type Aperture<P, E> = (

types/withEffects.d.ts

@@ -1,5 +0,10 @@
-import { ComponentFactory } from 'preact'
+import { ComponentFactory, VNode } from 'preact'
 import { Handler, ErrorHandler, PushEvent } from './baseTypes'
 import { Aperture } from './observable'
-export declare const withEffects: <P, E>(
+export interface State {
+    replace?: boolean
+    props?: any
+    children: VNode | null
+}
+export declare const withEffects: <P, E, CP = P>(
     handler: Handler<P, E>,
@@ -10,4 +15,4 @@ errorHandler?: ErrorHandler<P>
 ) => (
-    BaseComponent: ComponentFactory<
-        P & {
+    BaseComponent?: ComponentFactory<
+        CP & {
             pushEvent: PushEvent
@@ -14,0 +19,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

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

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

Total package byte prevSize

35300

increased by21.23%

Number of package files

11

increased by10%

Lines of code

729

increased by36.52%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes