refract-callbag - npm Package Compare versions

Comparing version 1.0.0-3 to 1.0.0-4

index.es.js

 import $$observable from 'symbol-observable';
-import { createElement, Component } from 'react';
+import { createElement, PureComponent } from 'react';
 
@@ -61,3 +61,3 @@ /*! *****************************************************************************
 
-var withEffects = function (effectHandler, errorHandler) { return function (effectFactory) { return function (BaseComponent) {
+var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
     return /** @class */ (function (_super) {
@@ -71,2 +71,3 @@ __extends(WithEffects, _super);
                 unmount: [],
+                allProps: [],
                 props: {},
@@ -91,10 +92,23 @@ fnProps: {}
                 var options = __assign({ initialValue: true }, opts);
-                var listenerType = typeof _this.props[propName] === 'function'
-                    ? 'fnProps'
-                    : 'props';
+                var listenerType = propName
+                    ? typeof _this.props[propName] === 'function'
+                        ? 'fnProps'
+                        : 'props'
+                    : 'allProps';
                 return createObservable(function (listener) {
+                    if (options.initialValue) {
+                        if (listenerType === 'props') {
+                            listener.next(_this.props[propName]);
+                        }
+                        if (listenerType === 'allProps') {
+                            listener.next(_this.props);
+                        }
+                    }
+                    if (listenerType === 'allProps') {
+                        _this.listeners.allProps = _this.listeners.allProps.concat(listener);
+                        return function () {
+                            _this.listeners.allProps.filter(function (l) { return l !== listener; });
+                        };
+                    }
                     _this.listeners[listenerType][propName] = (_this.listeners[listenerType][propName] || []).concat(listener);
-                    if (listenerType === 'props' && options.initialValue) {
-                        listener.next(_this.props[propName]);
-                    }
                     return function () {
@@ -110,4 +124,4 @@ _this.listeners[listenerType][propName].filter(function (l) { return l !== listener; });
             };
-            var sinkObservable = effectFactory(_this.props)(_this.component);
-            _this.sinkSubscription = subscribeToSink(sinkObservable, effectHandler(_this.props), errorHandler);
+            var sinkObservable = aperture(_this.props)(_this.component);
+            _this.sinkSubscription = subscribeToSink(sinkObservable, handler(_this.props), errorHandler ? errorHandler(_this.props) : undefined);
             return _this;
@@ -147,2 +161,3 @@ }
             });
+            this.listeners.allProps.forEach(function (l) { return l.next(_this.props); });
         };
@@ -162,5 +177,5 @@ WithEffects.prototype.decorateProp = function (prop, propName) {
         return WithEffects;
-    }(Component));
+    }(PureComponent));
 }; }; };
 
 export { withEffects };

index.js

@@ -67,3 +67,3 @@ 'use strict';
 
-var withEffects = function (effectHandler, errorHandler) { return function (effectFactory) { return function (BaseComponent) {
+var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
     return /** @class */ (function (_super) {
@@ -77,2 +77,3 @@ __extends(WithEffects, _super);
                 unmount: [],
+                allProps: [],
                 props: {},
@@ -97,10 +98,23 @@ fnProps: {}
                 var options = __assign({ initialValue: true }, opts);
-                var listenerType = typeof _this.props[propName] === 'function'
-                    ? 'fnProps'
-                    : 'props';
+                var listenerType = propName
+                    ? typeof _this.props[propName] === 'function'
+                        ? 'fnProps'
+                        : 'props'
+                    : 'allProps';
                 return createObservable(function (listener) {
+                    if (options.initialValue) {
+                        if (listenerType === 'props') {
+                            listener.next(_this.props[propName]);
+                        }
+                        if (listenerType === 'allProps') {
+                            listener.next(_this.props);
+                        }
+                    }
+                    if (listenerType === 'allProps') {
+                        _this.listeners.allProps = _this.listeners.allProps.concat(listener);
+                        return function () {
+                            _this.listeners.allProps.filter(function (l) { return l !== listener; });
+                        };
+                    }
                     _this.listeners[listenerType][propName] = (_this.listeners[listenerType][propName] || []).concat(listener);
-                    if (listenerType === 'props' && options.initialValue) {
-                        listener.next(_this.props[propName]);
-                    }
                     return function () {
@@ -116,4 +130,4 @@ _this.listeners[listenerType][propName].filter(function (l) { return l !== listener; });
             };
-            var sinkObservable = effectFactory(_this.props)(_this.component);
-            _this.sinkSubscription = subscribeToSink(sinkObservable, effectHandler(_this.props), errorHandler);
+            var sinkObservable = aperture(_this.props)(_this.component);
+            _this.sinkSubscription = subscribeToSink(sinkObservable, handler(_this.props), errorHandler ? errorHandler(_this.props) : undefined);
             return _this;
@@ -153,2 +167,3 @@ }
             });
+            this.listeners.allProps.forEach(function (l) { return l.next(_this.props); });
         };
@@ -168,5 +183,5 @@ WithEffects.prototype.decorateProp = function (prop, propName) {
         return WithEffects;
-    }(React.Component));
+    }(React.PureComponent));
 }; }; };
 
 exports.withEffects = withEffects;

package.json

 {
     "name": "refract-callbag",
-    "version": "1.0.0-3",
+    "version": "1.0.0-4",
     "main": "index.js",
@@ -10,2 +10,5 @@ "jsnext:main": "index.es.js",
     "license": "MIT",
+    "peerDependencies": {
+        "react": ">= 15.0.0 < 17.0.0"
+    },
     "devDependencies": {
@@ -15,2 +18,3 @@ "callbag-map": "~1.0.1"
     "dependencies": {
+        "callbag": "~1.1.0",
         "callbag-from-obs": "~1.2.0",
@@ -17,0 +21,0 @@ "callbag-to-obs": "~1.0.0",

src/__tests__/index.ts

 import * as React from 'react'
-import { withEffects, EffectHandler, ObservableComponent } from '../index'
-import effectFactory, { Effect, Props } from './effectFactory'
+import { withEffects, Handler, ObservableComponent } from '../index'
+import aperture, { Effect, Props } from './aperture'
 import { shallow, mount } from 'enzyme'
@@ -9,5 +9,3 @@
 
-    const effectHandler: EffectHandler<Props, Effect> = props => (
-        value: Effect
-    ) => {
+    const handler: Handler<Props, Effect> = props => (value: Effect) => {
         noop(value)
@@ -17,5 +15,5 @@ }
     it('should create a HoC', () => {
-        const WithEffects = withEffects<Props, Effect>(effectHandler)(
-            effectFactory
-        )(() => React.createElement('div'))
+        const WithEffects = withEffects<Props, Effect>(handler)(aperture)(() =>
+            React.createElement('div')
+        )
     })
@@ -28,3 +26,3 @@
             () => effectValueHandler
-        )(effectFactory)(({ setValue }) =>
+        )(aperture)(({ setValue }) =>
             React.createElement('button', {
@@ -31,0 +29,0 @@ onClick: () => setValue(10)

src/baseTypes.ts

@@ -10,2 +10,3 @@ import { Listener } from './observable'
     unmount: Array<Partial<Listener<any>>>
+    allProps: Array<Partial<Listener<any>>>
     props: PropListeners
@@ -15,6 +16,8 @@ fnProps: PropListeners
 
-export type EffectHandler<P, E> = (intialProps: P) => (val: E) => void
+export type Handler<P, E> = (intialProps: P) => (val: E) => void
 
+export type ErrorHandler<P> = (intialProps: P) => (error: any) => void
+
 export interface ObserveOptions {
     initialValue: boolean
 }

src/index.ts

 import { withEffects } from './withEffects'
-import { ObservableComponent, EffectFactory } from './observable'
-import { EffectHandler, ObserveOptions } from './baseTypes'
+import { ObservableComponent, Aperture } from './observable'
+import { ErrorHandler, Handler, ObserveOptions } from './baseTypes'
 
@@ -8,5 +8,6 @@ export {
     ObservableComponent,
-    EffectFactory,
-    EffectHandler,
+    Aperture,
+    Handler,
+    ErrorHandler,
     ObserveOptions
 }

src/observable.ts

 import $$observable from 'symbol-observable'
+import { Callbag, Source, Sink } from 'callbag'
 const fromObs = require('callbag-from-obs')
@@ -6,11 +7,2 @@ const toObs = require('callbag-to-obs')
 
-export interface Callbag<I, O> {
-    (t: 0, d: Callbag<O, I>): void
-    (t: 1, d: I): void
-    (t: 2, d?: any): void
-}
-
-export type Source<T> = Callbag<void, T>
-export type Sink<T> = Callbag<T, void>
-
 export interface Listener<T> {
@@ -29,3 +21,3 @@ next: (val: T) => void
         propName: string,
-        options: Partial<ObserveOptions>
+        options?: Partial<ObserveOptions>
     ) => Source<T>
@@ -36,3 +28,3 @@ mount: Source<any>
 
-export type EffectFactory<P, E> = (
+export type Aperture<P, E> = (
     props: P
@@ -39,0 +31,0 @@ ) => (component: ObservableComponent) => Sink<E>

src/withEffects.ts

@@ -6,3 +6,4 @@ import * as React from 'react'
     Listeners,
-    EffectHandler,
+    Handler,
+    ErrorHandler,
     ObserveOptions
@@ -16,12 +17,12 @@ } from './baseTypes'
     subscribeToSink,
-    EffectFactory
+    Aperture
 } from './observable'
 
 export const withEffects = <P, E>(
-    effectHandler: EffectHandler<P, E>,
-    errorHandler?: (err: any) => void
-) => (effectFactory: EffectFactory<P, E>) => (
+    handler: Handler<P, E>,
+    errorHandler?: ErrorHandler<P>
+) => (aperture: Aperture<P, E>) => (
     BaseComponent: React.ComponentType<P>
 ): React.ComponentClass<P> =>
-    class WithEffects extends React.Component<P> {
+    class WithEffects extends React.PureComponent<P> {
         private listeners: Listeners
@@ -38,2 +39,3 @@ private decoratedProps: Partial<P> = {}
                 unmount: [],
+                allProps: [],
                 props: {},
@@ -64,4 +66,4 @@ fnProps: {}
             const createPropObservable = <T>(
-                propName: string,
-                opts: Partial<ObserveOptions>
+                propName?: string,
+                opts?: Partial<ObserveOptions>
             ) => {
@@ -72,8 +74,29 @@ const options: ObserveOptions = {
                 }
-                const listenerType =
-                    typeof this.props[propName] === 'function'
+                const listenerType = propName
+                    ? typeof this.props[propName] === 'function'
                         ? 'fnProps'
                         : 'props'
+                    : 'allProps'
 
                 return createObservable<T>(listener => {
+                    if (options.initialValue) {
+                        if (listenerType === 'props') {
+                            listener.next(this.props[propName])
+                        }
+
+                        if (listenerType === 'allProps') {
+                            listener.next(this.props)
+                        }
+                    }
+
+                    if (listenerType === 'allProps') {
+                        this.listeners.allProps = this.listeners.allProps.concat(
+                            listener
+                        )
+
+                        return () => {
+                            this.listeners.allProps.filter(l => l !== listener)
+                        }
+                    }
+
                     this.listeners[listenerType][propName] = (
@@ -83,6 +106,2 @@ this.listeners[listenerType][propName] || []
 
-                    if (listenerType === 'props' && options.initialValue) {
-                        listener.next(this.props[propName])
-                    }
-
                     return () => {
@@ -100,13 +119,13 @@ this.listeners[listenerType][propName].filter(
                 observe: <T>(
-                    propName: string,
-                    options: Partial<ObserveOptions>
+                    propName?: string,
+                    options?: Partial<ObserveOptions>
                 ) => createPropObservable<T>(propName, options)
             }
 
-            const sinkObservable = effectFactory(this.props)(this.component)
+            const sinkObservable = aperture(this.props)(this.component)
 
             this.sinkSubscription = subscribeToSink<E>(
                 sinkObservable,
-                effectHandler(this.props),
-                errorHandler
+                handler(this.props),
+                errorHandler ? errorHandler(this.props) : undefined
             )
@@ -156,2 +175,4 @@ }
             })
+
+            this.listeners.allProps.forEach(l => l.next(this.props))
         }
@@ -158,0 +179,0 @@

types/baseTypes.d.ts

@@ -8,8 +8,10 @@ import { Listener } from './observable'
     unmount: Array<Partial<Listener<any>>>
+    allProps: Array<Partial<Listener<any>>>
     props: PropListeners
     fnProps: PropListeners
 }
-export declare type EffectHandler<P, E> = (intialProps: P) => (val: E) => void
+export declare type Handler<P, E> = (intialProps: P) => (val: E) => void
+export declare type ErrorHandler<P> = (intialProps: P) => (error: any) => void
 export interface ObserveOptions {
     initialValue: boolean
 }

types/index.d.ts

 import { withEffects } from './withEffects'
-import { ObservableComponent, EffectFactory } from './observable'
-import { EffectHandler, ObserveOptions } from './baseTypes'
+import { ObservableComponent, Aperture } from './observable'
+import { ErrorHandler, Handler, ObserveOptions } from './baseTypes'
 export {
     withEffects,
     ObservableComponent,
-    EffectFactory,
-    EffectHandler,
+    Aperture,
+    Handler,
+    ErrorHandler,
     ObserveOptions
 }

types/observable.d.ts

@@ -0,9 +1,3 @@
+import { Callbag, Source, Sink } from 'callbag'
 import { ObserveOptions } from './baseTypes'
-export interface Callbag<I, O> {
-    (t: 0, d: Callbag<O, I>): void
-    (t: 1, d: I): void
-    (t: 2, d?: any): void
-}
-export declare type Source<T> = Callbag<void, T>
-export declare type Sink<T> = Callbag<T, void>
 export interface Listener<T> {
@@ -20,3 +14,3 @@ next: (val: T) => void
         propName: string,
-        options: Partial<ObserveOptions>
+        options?: Partial<ObserveOptions>
     ) => Source<T>
@@ -26,3 +20,3 @@ mount: Source<any>
 }
-export declare type EffectFactory<P, E> = (
+export declare type Aperture<P, E> = (
     props: P
@@ -29,0 +23,0 @@ ) => (component: ObservableComponent) => Sink<E>

types/withEffects.d.ts

 /// <reference types="react" />
 import * as React from 'react'
-import { EffectHandler } from './baseTypes'
-import { EffectFactory } from './observable'
+import { Handler, ErrorHandler } from './baseTypes'
+import { Aperture } from './observable'
 export declare const withEffects: <P, E>(
-    effectHandler: EffectHandler<P, E>,
-    errorHandler?: (err: any) => void
+    handler: Handler<P, E>,
+    errorHandler?: ErrorHandler<P>
 ) => (
-    effectFactory: EffectFactory<P, E>
+    aperture: Aperture<P, E>
 ) => (BaseComponent: React.ComponentType<P>) => React.ComponentClass<P>

No alert changes

Improved metrics

Total package byte prevSize

29928

increased by7.92%

Lines of code

720

increased by5.73%

Worsened metrics

Dependency count

5

increased by66.67%

Dependency changes

• + Addedcallbag@~1.1.0

• + Addedcallbag@1.1.0(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)