refract-callbag - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

index.es.js

@@ -109,2 +109,8 @@ import $$observable from 'symbol-observable';
     var data = function () { return fromObs(dataObservable); };
+    var fromEvent = function (eventName, valueTransformer) {
+        return pipe(data(), filter(isEvent(eventName)), map(function (data) {
+            var value = data.payload.value;
+            return valueTransformer ? valueTransformer(value) : value;
+        }));
+    };
     return {
@@ -130,9 +136,5 @@ mount: pipe(data(), filter(isEvent(MOUNT_EVENT)), map(function () { return undefined; })),
         },
-        fromEvent: function (eventName, valueTransformer) {
-            return pipe(data(), filter(isEvent(eventName)), map(function (data) {
-                var value = data.payload.value;
-                return valueTransformer ? valueTransformer(value) : value;
-            }));
-        },
-        pushEvent: pushEvent
+        fromEvent: fromEvent,
+        pushEvent: pushEvent,
+        useEvent: function (eventName) { return [fromEvent(eventName), pushEvent(eventName)]; }
     };
@@ -160,4 +162,4 @@ };
     };
-    var finalHandler = function (initialProps) {
-        var effectHandler = handler(initialProps);
+    var finalHandler = function (initialProps, initialContext) {
+        var effectHandler = handler(initialProps, initialContext);
         return function (effect) {
@@ -227,4 +229,6 @@ if (isValidElement$$1(effect)) {
     var component = createComponent(instance, dataObservable, pushEvent);
-    var sinkObservable = aperture(instance.props)(component);
-    var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props), errorHandler ? errorHandler(instance.props) : undefined);
+    var sinkObservable = aperture(instance.props, instance.context)(component);
+    var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props, instance.context), errorHandler
+        ? errorHandler(instance.props, instance.context)
+        : undefined);
     instance.reDecorateProps = function (nextProps) {
@@ -286,36 +290,39 @@ Object.keys(nextProps).forEach(function (propName) {
 var Empty = function () { return null; };
-var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
+var withEffects = function (handler, errorHandler, Context) { return function (aperture) { return function (BaseComponent) {
     if (BaseComponent === void 0) { BaseComponent = Empty; }
-    return /** @class */ (function (_super) {
-        __extends(WithEffects, _super);
-        function WithEffects(props, context) {
-            var _this = _super.call(this, props, context) || this;
-            _this.mounted = false;
-            _this.unmounted = false;
-            configureComponent(handler, errorHandler)(aperture, _this, isValidElement, isComponentClass);
-            return _this;
-        }
-        WithEffects.prototype.componentDidMount = function () {
-            this.mounted = true;
-            this.triggerMount();
-        };
-        WithEffects.prototype.componentWillReceiveProps = function (nextProps) {
-            this.reDecorateProps(nextProps);
-            this.pushProps(nextProps);
-        };
-        WithEffects.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-            return this.havePropsChanged(nextProps, nextState);
-        };
-        WithEffects.prototype.componentWillUnmount = function () {
-            this.unmounted = true;
-            this.triggerUnmount();
-        };
-        WithEffects.prototype.render = function () {
-            if (this.state.children) {
-                return this.state.children;
+    return _a = /** @class */ (function (_super) {
+            __extends(WithEffects, _super);
+            function WithEffects(props, context) {
+                var _this = _super.call(this, props, context) || this;
+                _this.mounted = false;
+                _this.unmounted = false;
+                configureComponent(handler, errorHandler)(aperture, _this, isValidElement, isComponentClass);
+                return _this;
             }
-            return createElement(BaseComponent, this.getChildProps());
-        };
-        return WithEffects;
-    }(Component));
+            WithEffects.prototype.componentDidMount = function () {
+                this.mounted = true;
+                this.triggerMount();
+            };
+            WithEffects.prototype.componentWillReceiveProps = function (nextProps) {
+                this.reDecorateProps(nextProps);
+                this.pushProps(nextProps);
+            };
+            WithEffects.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+                return this.havePropsChanged(nextProps, nextState);
+            };
+            WithEffects.prototype.componentWillUnmount = function () {
+                this.unmounted = true;
+                this.triggerUnmount();
+            };
+            WithEffects.prototype.render = function () {
+                if (this.state.children) {
+                    return this.state.children;
+                }
+                return createElement(BaseComponent, this.getChildProps());
+            };
+            return WithEffects;
+        }(Component)),
+        _a.contextType = Context,
+        _a;
+    var _a;
 }; }; };
@@ -322,0 +329,0 @@

index.js

@@ -115,2 +115,8 @@ 'use strict';
     var data = function () { return fromObs(dataObservable); };
+    var fromEvent = function (eventName, valueTransformer) {
+        return pipe(data(), filter(isEvent(eventName)), map(function (data) {
+            var value = data.payload.value;
+            return valueTransformer ? valueTransformer(value) : value;
+        }));
+    };
     return {
@@ -136,9 +142,5 @@ mount: pipe(data(), filter(isEvent(MOUNT_EVENT)), map(function () { return undefined; })),
         },
-        fromEvent: function (eventName, valueTransformer) {
-            return pipe(data(), filter(isEvent(eventName)), map(function (data) {
-                var value = data.payload.value;
-                return valueTransformer ? valueTransformer(value) : value;
-            }));
-        },
-        pushEvent: pushEvent
+        fromEvent: fromEvent,
+        pushEvent: pushEvent,
+        useEvent: function (eventName) { return [fromEvent(eventName), pushEvent(eventName)]; }
     };
@@ -166,4 +168,4 @@ };
     };
-    var finalHandler = function (initialProps) {
-        var effectHandler = handler(initialProps);
+    var finalHandler = function (initialProps, initialContext) {
+        var effectHandler = handler(initialProps, initialContext);
         return function (effect) {
@@ -233,4 +235,6 @@ if (isValidElement(effect)) {
     var component = createComponent(instance, dataObservable, pushEvent);
-    var sinkObservable = aperture(instance.props)(component);
-    var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props), errorHandler ? errorHandler(instance.props) : undefined);
+    var sinkObservable = aperture(instance.props, instance.context)(component);
+    var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props, instance.context), errorHandler
+        ? errorHandler(instance.props, instance.context)
+        : undefined);
     instance.reDecorateProps = function (nextProps) {
@@ -292,36 +296,39 @@ Object.keys(nextProps).forEach(function (propName) {
 var Empty = function () { return null; };
-var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
+var withEffects = function (handler, errorHandler, Context) { return function (aperture) { return function (BaseComponent) {
     if (BaseComponent === void 0) { BaseComponent = Empty; }
-    return /** @class */ (function (_super) {
-        __extends(WithEffects, _super);
-        function WithEffects(props, context) {
-            var _this = _super.call(this, props, context) || this;
-            _this.mounted = false;
-            _this.unmounted = false;
-            configureComponent(handler, errorHandler)(aperture, _this, React.isValidElement, isComponentClass);
-            return _this;
-        }
-        WithEffects.prototype.componentDidMount = function () {
-            this.mounted = true;
-            this.triggerMount();
-        };
-        WithEffects.prototype.componentWillReceiveProps = function (nextProps) {
-            this.reDecorateProps(nextProps);
-            this.pushProps(nextProps);
-        };
-        WithEffects.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-            return this.havePropsChanged(nextProps, nextState);
-        };
-        WithEffects.prototype.componentWillUnmount = function () {
-            this.unmounted = true;
-            this.triggerUnmount();
-        };
-        WithEffects.prototype.render = function () {
-            if (this.state.children) {
-                return this.state.children;
+    return _a = /** @class */ (function (_super) {
+            __extends(WithEffects, _super);
+            function WithEffects(props, context) {
+                var _this = _super.call(this, props, context) || this;
+                _this.mounted = false;
+                _this.unmounted = false;
+                configureComponent(handler, errorHandler)(aperture, _this, React.isValidElement, isComponentClass);
+                return _this;
             }
-            return React.createElement(BaseComponent, this.getChildProps());
-        };
-        return WithEffects;
-    }(React.Component));
+            WithEffects.prototype.componentDidMount = function () {
+                this.mounted = true;
+                this.triggerMount();
+            };
+            WithEffects.prototype.componentWillReceiveProps = function (nextProps) {
+                this.reDecorateProps(nextProps);
+                this.pushProps(nextProps);
+            };
+            WithEffects.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+                return this.havePropsChanged(nextProps, nextState);
+            };
+            WithEffects.prototype.componentWillUnmount = function () {
+                this.unmounted = true;
+                this.triggerUnmount();
+            };
+            WithEffects.prototype.render = function () {
+                if (this.state.children) {
+                    return this.state.children;
+                }
+                return React.createElement(BaseComponent, this.getChildProps());
+            };
+            return WithEffects;
+        }(React.Component)),
+        _a.contextType = Context,
+        _a;
+    var _a;
 }; }; };
@@ -328,0 +335,0 @@

package.json

 {
     "name": "refract-callbag",
     "description": "Refract bindings for React with Callbag: harness the power of reactive programming to supercharge your components!",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "main": "index.js",
@@ -6,0 +6,0 @@ "jsnext:main": "index.es.js",

README.md

@@ -42,3 +42,3 @@ <p align="center">
 *   [Manage side effects](https://refract.js.org/) like API calls, analytics, logging, etc.
-*   [Manipulate, replace and inject props](https://refract.js.org/usage/pushing-props), you can even [fully replace Redux `connect` HoC](https://refract.js.org/recipes/replace-connect)
+*   [Manipulate, replace and inject props](https://refract.js.org/usage/pushing-to-props), you can even [fully replace Redux `connect` HoC](https://refract.js.org/recipes/replacing-connect)
 *   [Handle state](https://refract.js.org/recipes/handling-state)
@@ -45,0 +45,0 @@ *   [Render components](https://refract.js.org/usage/rendering-components)

types/baseTypes.d.ts

@@ -1,3 +0,9 @@
-export declare type Handler<P, E> = (intialProps: P) => (val: E) => void
-export declare type ErrorHandler<P> = (intialProps: P) => (error: any) => void
+export declare type Handler<P, E, C = any> = (
+    intialProps: P,
+    initialContext: C
+) => (val: E) => void
+export declare type ErrorHandler<P, C = any> = (
+    intialProps: P,
+    initialContext: C
+) => (error: any) => void
 export declare type PushEvent = (eventName: string) => <T>(val: T) => void

types/configureComponent.d.ts

 import { Handler, ErrorHandler } from './baseTypes'
 import { Aperture } from './observable'
-declare const configureComponent: <P, E>(
-    handler: Handler<P, E>,
-    errorHandler?: ErrorHandler<P>
+declare const configureComponent: <P, E, Ctx>(
+    handler: Handler<P, E, Ctx>,
+    errorHandler?: ErrorHandler<P, any>
 ) => (
-    aperture: Aperture<P, E>,
+    aperture: Aperture<P, E, Ctx>,
     instance: any,
@@ -9,0 +9,0 @@ isValidElement?: (val: any) => boolean,

types/observable.d.ts

@@ -23,5 +23,7 @@ import { Callbag, Source, Sink } from 'callbag'
     pushEvent: PushEvent
+    useEvent: <T>(eventName: string) => [Source<T>, (val: T) => any]
 }
-export declare type Aperture<P, E> = (
-    props: P
+export declare type Aperture<P, E, C = any> = (
+    initialProps: P,
+    initialContext: C
 ) => (component: ObservableComponent) => Sink<E>
@@ -28,0 +30,0 @@ export declare const subscribeToSink: <T>(

types/withEffects.d.ts

@@ -11,7 +11,8 @@ /// <reference types="react" />
 }
-export declare const withEffects: <P, E, CP = P>(
-    handler: Handler<P, E>,
-    errorHandler?: ErrorHandler<P>
+export declare const withEffects: <P, E, CP = P, C = any>(
+    handler: Handler<P, E, C>,
+    errorHandler?: ErrorHandler<P, C>,
+    Context?: React.Context<C>
 ) => (
-    aperture: Aperture<P, E>
+    aperture: Aperture<P, E, C>
 ) => (
@@ -18,0 +19,0 @@ BaseComponent?: React.ComponentType<

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

Total package byte prevSize

42170

increased by2.66%

Lines of code

865

increased by2.73%

No dependency changes