refract-xstream - npm Package Compare versions

Comparing version 1.0.0-3 to 1.0.0-4

index.es.js

 import xs from 'xstream';
-import { createElement, Component } from 'react';
+import { createElement, PureComponent } from 'react';
 
@@ -57,3 +57,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) {
@@ -67,2 +67,3 @@ __extends(WithEffects, _super);
                 unmount: [],
+                allProps: [],
                 props: {},
@@ -87,10 +88,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 () {
@@ -106,4 +120,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;
@@ -143,2 +157,3 @@ }
             });
+            this.listeners.allProps.forEach(function (l) { return l.next(_this.props); });
         };
@@ -158,5 +173,5 @@ WithEffects.prototype.decorateProp = function (prop, propName) {
         return WithEffects;
-    }(Component));
+    }(PureComponent));
 }; }; };
 
 export { withEffects };

index.js

@@ -63,3 +63,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) {
@@ -73,2 +73,3 @@ __extends(WithEffects, _super);
                 unmount: [],
+                allProps: [],
                 props: {},
@@ -93,10 +94,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 () {
@@ -112,4 +126,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;
@@ -149,2 +163,3 @@ }
             });
+            this.listeners.allProps.forEach(function (l) { return l.next(_this.props); });
         };
@@ -164,5 +179,5 @@ WithEffects.prototype.decorateProp = function (prop, propName) {
         return WithEffects;
-    }(React.Component));
+    }(React.PureComponent));
 }; }; };
 
 exports.withEffects = withEffects;

package.json

 {
     "name": "refract-xstream",
-    "version": "1.0.0-3",
+    "version": "1.0.0-4",
     "main": "index.js",
@@ -11,5 +11,5 @@ "jsnext:main": "index.es.js",
     "peerDependencies": {
-        "react": ">= 15.0.0 < 16.0.0",
+        "react": ">= 15.0.0 < 17.0.0",
         "xstream": ">= 1.0.0 < 12.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

@@ -9,3 +9,3 @@ import xs, { Stream, Listener, Subscription } from 'xstream'
         propName: string,
-        options: Partial<ObserveOptions>
+        options?: Partial<ObserveOptions>
     ) => Stream<T>
@@ -16,3 +16,3 @@ mount: Stream<any>
 
-export type EffectFactory<P, E> = (
+export type Aperture<P, E> = (
     props: P
@@ -19,0 +19,0 @@ ) => (component: ObservableComponent) => Stream<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

@@ -7,3 +7,3 @@ import xs, { Stream, Listener, Subscription } from 'xstream'
         propName: string,
-        options: Partial<ObserveOptions>
+        options?: Partial<ObserveOptions>
     ) => Stream<T>
@@ -13,3 +13,3 @@ mount: Stream<any>
 }
-export declare type EffectFactory<P, E> = (
+export declare type Aperture<P, E> = (
     props: P
@@ -16,0 +16,0 @@ ) => (component: ObservableComponent) => Stream<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>

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

28863

increased by9.16%

Lines of code

695

increased by7.92%

No dependency changes