refract-callbag - npm Package Compare versions

Comparing version 2.2.2 to 3.0.0

index.es.js

 import startWith from 'callbag-start-with';
 import $$observable from 'symbol-observable';
-import { isValidElement, createElement, Component } from 'react';
+import { useState, useLayoutEffect, useEffect, isValidElement, createElement, Component } from 'react';
 
@@ -40,2 +40,3 @@ /*! *****************************************************************************
 var PROPS_EFFECT = '@@refract/effect/props';
+var COMPONENT_EFFECT = '@@refract/effect/component';
 var toProps = function (props) { return ({
@@ -55,2 +56,6 @@ type: PROPS_EFFECT,
 }); };
+var toRender = function (data) { return ({
+    type: COMPONENT_EFFECT,
+    payload: data
+}); };
 
@@ -110,6 +115,5 @@ var MOUNT_EVENT = '@@refract/event/mount';
 };
-var createComponent = function (instance, dataObservable, pushEvent) {
-    var data = function () { return fromObs(dataObservable); };
+var getComponentBase = function (data, pushEvent) {
     var fromEvent = function (eventName, valueTransformer) {
-        return pipe(data(), filter(isEvent(eventName)), map(function (data) {
+        return pipe(data, filter(isEvent(eventName)), map(function (data) {
             var value = data.payload.value;
@@ -120,21 +124,4 @@ return valueTransformer ? valueTransformer(value) : value;
     return {
-        mount: pipe(data(), filter(isEvent(MOUNT_EVENT)), map(function () { return undefined; })),
-        unmount: pipe(data(), filter(isEvent(UNMOUNT_EVENT)), map(function () { return undefined; })),
-        observe: function (propName, valueTransformer) {
-            if (propName && typeof instance.props[propName] === 'function') {
-                return pipe(data(), filter(isCallback(propName)), map(function (data) {
-                    var args = data.payload.args;
-                    return valueTransformer
-                        ? valueTransformer(args)
-                        : args[0];
-                }));
-            }
-            if (propName) {
-                return pipe(data(), filter(isProps), map(function (data) {
-                    var prop = data.payload[propName];
-                    return valueTransformer ? valueTransformer(prop) : prop;
-                }), dropRepeats());
-            }
-            return pipe(data(), filter(isProps), map(function (data) { return data.payload; }), dropRepeats(shallowEquals));
-        },
+        mount: pipe(data, filter(isEvent(MOUNT_EVENT)), map(function () { return undefined; })),
+        unmount: pipe(data, filter(isEvent(UNMOUNT_EVENT)), map(function () { return undefined; })),
         fromEvent: fromEvent,
@@ -154,4 +141,25 @@ pushEvent: pushEvent,
 };
+var getObserve = function (getProp, data) {
+    return function observe(propName, valueTransformer) {
+        if (propName && typeof getProp(propName) === 'function') {
+            return pipe(data(), filter(isCallback(propName)), map(function (data) {
+                var args = data.payload.args;
+                return valueTransformer ? valueTransformer(args) : args[0];
+            }));
+        }
+        if (propName) {
+            return pipe(data(), filter(isProps), map(function (data) {
+                var prop = data.payload[propName];
+                return valueTransformer ? valueTransformer(prop) : prop;
+            }), dropRepeats());
+        }
+        return pipe(data(), filter(isProps), map(function (data) { return data.payload; }), dropRepeats(shallowEquals));
+    };
+};
+var createComponent = function (getProp, dataObservable, pushEvent) {
+    var data = function () { return fromObs(dataObservable); };
+    return __assign({ observe: getObserve(getProp, data) }, getComponentBase(data(), pushEvent));
+};
 
-var configureComponent = function (handler, errorHandler) { return function (aperture, instance, isValidElement$$1, isComponentClass) {
+var configureComponent = function (aperture, instance, isValidElement$$1, isComponentClass, handler, errorHandler) {
     if (isValidElement$$1 === void 0) { isValidElement$$1 = function () { return false; }; }
@@ -176,3 +184,5 @@ if (isComponentClass === void 0) { isComponentClass = function () { return false; }; }
     var finalHandler = function (initialProps, initialContext) {
-        var effectHandler = handler(initialProps, initialContext);
+        var effectHandler = handler
+            ? handler(initialProps, initialContext)
+            : function () { return void 0; };
         return function (effect) {
@@ -241,4 +251,4 @@ if (isValidElement$$1(effect)) {
         _a);
-    var component = createComponent(instance, dataObservable, pushEvent);
-    var sinkObservable = aperture(instance.props, instance.context)(component);
+    var component = createComponent(function (propName) { return instance.props[propName]; }, dataObservable, pushEvent);
+    var sinkObservable = aperture(component, instance.props, instance.context);
     var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props, instance.context), errorHandler
@@ -295,3 +305,3 @@ ? errorHandler(instance.props, instance.context)
     var _a;
-}; };
+};
 
@@ -304,40 +314,43 @@ var isComponentClass = function (ComponentClass) {
 var Empty = function () { return null; };
-var withEffects = function (handler, errorHandler, Context) { return function (aperture) { return function (BaseComponent) {
-    if (BaseComponent === void 0) { BaseComponent = Empty; }
-    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;
-            }
-            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;
+var withEffects = function (aperture, config) {
+    if (config === void 0) { config = {}; }
+    return function (BaseComponent) {
+        if (BaseComponent === void 0) { BaseComponent = Empty; }
+        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(aperture, _this, isValidElement, isComponentClass, config.handler, config.errorHandler);
+                    return _this;
                 }
-                return createElement(BaseComponent, this.getChildProps());
-            };
-            return WithEffects;
-        }(Component)),
-        _a.contextType = Context,
-        _a;
-    var _a;
-}; }; };
+                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 = config.Context,
+            _a;
+        var _a;
+    };
+};
 
@@ -361,2 +374,90 @@ var identity = function (arg) { return arg; };
 
-export { withEffects, compose, asProps, toProps, PROPS_EFFECT };
+var configureHook = function (aperture, data, handler, errorHandler) {
+    if (handler === void 0) { handler = function () { return function () { return void 0; }; }; }
+    var returnedData;
+    var lastData = data;
+    var setComponentData;
+    var finalHandler = function (initialData) {
+        var effectHandler = handler(initialData);
+        return function (effect) {
+            if (effect && effect.type === COMPONENT_EFFECT) {
+                if (setComponentData) {
+                    setComponentData(effect.payload);
+                }
+                else {
+                    returnedData = effect.payload;
+                }
+            }
+            else {
+                effectHandler(effect);
+            }
+        };
+    };
+    var listeners = [];
+    var addListener = function (listener) {
+        listeners = listeners.concat(listener);
+    };
+    var removeListener = function (listener) {
+        listeners = listeners.filter(function (l) { return l !== listener; });
+    };
+    var pushEvent = function (eventName) { return function (val) {
+        listeners.forEach(function (listener) {
+            listener.next(createEventData(eventName, val));
+        });
+    }; };
+    var dataObservable = (_a = {
+            subscribe: function (listener) {
+                addListener(listener);
+                listener.next(createPropsData(lastData));
+                return { unsubscribe: function () { return removeListener(listener); } };
+            }
+        },
+        _a[$$observable] = function () {
+            return this;
+        },
+        _a);
+    var component = createComponent(function (propName) { return data[propName]; }, dataObservable, pushEvent);
+    var sinkObservable = aperture(component, data);
+    var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(data), errorHandler ? errorHandler(data) : undefined);
+    var pushMountEvent = function () {
+        pushEvent(MOUNT_EVENT)(undefined);
+    };
+    var pushUnmountEvent = function () {
+        pushEvent(UNMOUNT_EVENT)(undefined);
+    };
+    return {
+        data: returnedData,
+        unsubscribe: function () {
+            pushUnmountEvent();
+            sinkSubscription.unsubscribe();
+        },
+        pushMountEvent: pushMountEvent,
+        pushData: function (data) {
+            lastData = data;
+            listeners.forEach(function (listener) {
+                listener.next(createPropsData(data));
+            });
+        },
+        registerSetData: function (setData) {
+            setComponentData = function (data) { return setData(function (hook) { return (__assign({}, hook, { data: data })); }); };
+        }
+    };
+    var _a;
+};
+
+// @ts-ignore
+var useRefract = function (aperture, data, config) {
+    if (config === void 0) { config = {}; }
+    var _a = useState(configureHook(aperture, data, config.handler, config.errorHandler)), hook = _a[0], setData = _a[1];
+    useLayoutEffect(function () {
+        hook.registerSetData(setData);
+        hook.pushMountEvent();
+        return function () { return hook.unsubscribe(); };
+    }, []);
+    useEffect(function () {
+        hook.pushData(data);
+    });
+    return hook.data;
+};
+
+export { withEffects, compose, asProps, toProps, PROPS_EFFECT, useRefract, toRender, COMPONENT_EFFECT };

index.js

@@ -46,2 +46,3 @@ 'use strict';
 var PROPS_EFFECT = '@@refract/effect/props';
+var COMPONENT_EFFECT = '@@refract/effect/component';
 var toProps = function (props) { return ({
@@ -61,2 +62,6 @@ type: PROPS_EFFECT,
 }); };
+var toRender = function (data) { return ({
+    type: COMPONENT_EFFECT,
+    payload: data
+}); };
 
@@ -116,6 +121,5 @@ var MOUNT_EVENT = '@@refract/event/mount';
 };
-var createComponent = function (instance, dataObservable, pushEvent) {
-    var data = function () { return fromObs(dataObservable); };
+var getComponentBase = function (data, pushEvent) {
     var fromEvent = function (eventName, valueTransformer) {
-        return pipe(data(), filter(isEvent(eventName)), map(function (data) {
+        return pipe(data, filter(isEvent(eventName)), map(function (data) {
             var value = data.payload.value;
@@ -126,21 +130,4 @@ return valueTransformer ? valueTransformer(value) : value;
     return {
-        mount: pipe(data(), filter(isEvent(MOUNT_EVENT)), map(function () { return undefined; })),
-        unmount: pipe(data(), filter(isEvent(UNMOUNT_EVENT)), map(function () { return undefined; })),
-        observe: function (propName, valueTransformer) {
-            if (propName && typeof instance.props[propName] === 'function') {
-                return pipe(data(), filter(isCallback(propName)), map(function (data) {
-                    var args = data.payload.args;
-                    return valueTransformer
-                        ? valueTransformer(args)
-                        : args[0];
-                }));
-            }
-            if (propName) {
-                return pipe(data(), filter(isProps), map(function (data) {
-                    var prop = data.payload[propName];
-                    return valueTransformer ? valueTransformer(prop) : prop;
-                }), dropRepeats());
-            }
-            return pipe(data(), filter(isProps), map(function (data) { return data.payload; }), dropRepeats(shallowEquals));
-        },
+        mount: pipe(data, filter(isEvent(MOUNT_EVENT)), map(function () { return undefined; })),
+        unmount: pipe(data, filter(isEvent(UNMOUNT_EVENT)), map(function () { return undefined; })),
         fromEvent: fromEvent,
@@ -160,4 +147,25 @@ pushEvent: pushEvent,
 };
+var getObserve = function (getProp, data) {
+    return function observe(propName, valueTransformer) {
+        if (propName && typeof getProp(propName) === 'function') {
+            return pipe(data(), filter(isCallback(propName)), map(function (data) {
+                var args = data.payload.args;
+                return valueTransformer ? valueTransformer(args) : args[0];
+            }));
+        }
+        if (propName) {
+            return pipe(data(), filter(isProps), map(function (data) {
+                var prop = data.payload[propName];
+                return valueTransformer ? valueTransformer(prop) : prop;
+            }), dropRepeats());
+        }
+        return pipe(data(), filter(isProps), map(function (data) { return data.payload; }), dropRepeats(shallowEquals));
+    };
+};
+var createComponent = function (getProp, dataObservable, pushEvent) {
+    var data = function () { return fromObs(dataObservable); };
+    return __assign({ observe: getObserve(getProp, data) }, getComponentBase(data(), pushEvent));
+};
 
-var configureComponent = function (handler, errorHandler) { return function (aperture, instance, isValidElement, isComponentClass) {
+var configureComponent = function (aperture, instance, isValidElement, isComponentClass, handler, errorHandler) {
     if (isValidElement === void 0) { isValidElement = function () { return false; }; }
@@ -182,3 +190,5 @@ if (isComponentClass === void 0) { isComponentClass = function () { return false; }; }
     var finalHandler = function (initialProps, initialContext) {
-        var effectHandler = handler(initialProps, initialContext);
+        var effectHandler = handler
+            ? handler(initialProps, initialContext)
+            : function () { return void 0; };
         return function (effect) {
@@ -247,4 +257,4 @@ if (isValidElement(effect)) {
         _a);
-    var component = createComponent(instance, dataObservable, pushEvent);
-    var sinkObservable = aperture(instance.props, instance.context)(component);
+    var component = createComponent(function (propName) { return instance.props[propName]; }, dataObservable, pushEvent);
+    var sinkObservable = aperture(component, instance.props, instance.context);
     var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props, instance.context), errorHandler
@@ -301,3 +311,3 @@ ? errorHandler(instance.props, instance.context)
     var _a;
-}; };
+};
 
@@ -310,40 +320,43 @@ var isComponentClass = function (ComponentClass) {
 var Empty = function () { return null; };
-var withEffects = function (handler, errorHandler, Context) { return function (aperture) { return function (BaseComponent) {
-    if (BaseComponent === void 0) { BaseComponent = Empty; }
-    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;
-            }
-            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;
+var withEffects = function (aperture, config) {
+    if (config === void 0) { config = {}; }
+    return function (BaseComponent) {
+        if (BaseComponent === void 0) { BaseComponent = Empty; }
+        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(aperture, _this, React.isValidElement, isComponentClass, config.handler, config.errorHandler);
+                    return _this;
                 }
-                return React.createElement(BaseComponent, this.getChildProps());
-            };
-            return WithEffects;
-        }(React.Component)),
-        _a.contextType = Context,
-        _a;
-    var _a;
-}; }; };
+                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 = config.Context,
+            _a;
+        var _a;
+    };
+};
 
@@ -367,2 +380,90 @@ var identity = function (arg) { return arg; };
 
+var configureHook = function (aperture, data, handler, errorHandler) {
+    if (handler === void 0) { handler = function () { return function () { return void 0; }; }; }
+    var returnedData;
+    var lastData = data;
+    var setComponentData;
+    var finalHandler = function (initialData) {
+        var effectHandler = handler(initialData);
+        return function (effect) {
+            if (effect && effect.type === COMPONENT_EFFECT) {
+                if (setComponentData) {
+                    setComponentData(effect.payload);
+                }
+                else {
+                    returnedData = effect.payload;
+                }
+            }
+            else {
+                effectHandler(effect);
+            }
+        };
+    };
+    var listeners = [];
+    var addListener = function (listener) {
+        listeners = listeners.concat(listener);
+    };
+    var removeListener = function (listener) {
+        listeners = listeners.filter(function (l) { return l !== listener; });
+    };
+    var pushEvent = function (eventName) { return function (val) {
+        listeners.forEach(function (listener) {
+            listener.next(createEventData(eventName, val));
+        });
+    }; };
+    var dataObservable = (_a = {
+            subscribe: function (listener) {
+                addListener(listener);
+                listener.next(createPropsData(lastData));
+                return { unsubscribe: function () { return removeListener(listener); } };
+            }
+        },
+        _a[$$observable] = function () {
+            return this;
+        },
+        _a);
+    var component = createComponent(function (propName) { return data[propName]; }, dataObservable, pushEvent);
+    var sinkObservable = aperture(component, data);
+    var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(data), errorHandler ? errorHandler(data) : undefined);
+    var pushMountEvent = function () {
+        pushEvent(MOUNT_EVENT)(undefined);
+    };
+    var pushUnmountEvent = function () {
+        pushEvent(UNMOUNT_EVENT)(undefined);
+    };
+    return {
+        data: returnedData,
+        unsubscribe: function () {
+            pushUnmountEvent();
+            sinkSubscription.unsubscribe();
+        },
+        pushMountEvent: pushMountEvent,
+        pushData: function (data) {
+            lastData = data;
+            listeners.forEach(function (listener) {
+                listener.next(createPropsData(data));
+            });
+        },
+        registerSetData: function (setData) {
+            setComponentData = function (data) { return setData(function (hook) { return (__assign({}, hook, { data: data })); }); };
+        }
+    };
+    var _a;
+};
+
+// @ts-ignore
+var useRefract = function (aperture, data, config) {
+    if (config === void 0) { config = {}; }
+    var _a = React.useState(configureHook(aperture, data, config.handler, config.errorHandler)), hook = _a[0], setData = _a[1];
+    React.useLayoutEffect(function () {
+        hook.registerSetData(setData);
+        hook.pushMountEvent();
+        return function () { return hook.unsubscribe(); };
+    }, []);
+    React.useEffect(function () {
+        hook.pushData(data);
+    });
+    return hook.data;
+};
+
 exports.withEffects = withEffects;
@@ -373,1 +474,4 @@ exports.compose = compose;
 exports.PROPS_EFFECT = PROPS_EFFECT;
+exports.useRefract = useRefract;
+exports.toRender = toRender;
+exports.COMPONENT_EFFECT = COMPONENT_EFFECT;

package.json

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

README.md

@@ -82,3 +82,3 @@ <p align="center">
 ```js
-const aperture = initialProps => component => {
+const aperture = component => {
     return component.observe('username').pipe(
@@ -102,3 +102,3 @@ debounce(2000),
 
-const WrappedComponent = withEffects(handler)(aperture)(BaseComponent)
+const WrappedComponent = withEffects(aperture, { handler })(BaseComponent)
 ```
@@ -110,3 +110,3 @@
 
-Signature: `(initialProps) => (component) => { return effectStream }`.
+Signature: `(component, initialProps) => { return effectStream }`.
 
@@ -131,8 +131,10 @@ *   The `initialProps` are all props passed into the `WrappedComponent`.
 
-Signature: `(handler) => (aperture) => (Component) => { return WrappedComponent }`
+Signature: `(aperture, { handler }) => (Component) => { return WrappedComponent }`
 
-*   The hoc takes in three curried arguments:
-    *   A `handler` function
+*   The hoc takes in two arguments, followed by a component:
     *   An `aperture` function
-    *   A React `Component`
+    *   An optional `config` object accepting
+        *   a `handler` function
+        *   a `errorHandler` function
+        *   a `Context` object (React only)
 *   The hoc returns a `WrappedComponent` - an enhanced version of your original `Component` which includes your side-effect logic.
@@ -139,0 +141,0 @@

types/baseTypes.d.ts

 export declare type Handler<P, E, C = any> = (
     intialProps: P,
-    initialContext: C
+    initialContext?: C
 ) => (val: E) => void
 export declare type ErrorHandler<P, C = any> = (
     intialProps: P,
-    initialContext: C
+    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, Ctx>(
-    handler: Handler<P, E, Ctx>,
-    errorHandler?: ErrorHandler<P, any>
-) => (
     aperture: Aperture<P, E, Ctx>,
     instance: any,
     isValidElement?: (val: any) => boolean,
-    isComponentClass?: (val: any) => boolean
+    isComponentClass?: (val: any) => boolean,
+    handler?: Handler<P, E, Ctx>,
+    errorHandler?: ErrorHandler<P, any>
 ) => void
 export default configureComponent

types/effects.d.ts

 export declare const PROPS_EFFECT: string
+export declare const COMPONENT_EFFECT: string
 export interface PropEffect<P = object> {
@@ -9,3 +10,8 @@ type: string
 }
+export interface ComponentEffect<D = object> {
+    type: string
+    payload: D
+}
 export declare const toProps: <P>(props: P) => PropEffect<P>
 export declare const asProps: <P>(props: P) => PropEffect<P>
+export declare const toRender: <D>(data: D) => ComponentEffect<D>

types/index.d.ts

 import { withEffects } from './withEffects'
-import { ObservableComponent, Aperture } from './observable'
+import {
+    ObservableComponent,
+    Aperture,
+    ObservableComponentBase
+} from './observable'
 import { ErrorHandler, Handler, PushEvent } from './baseTypes'
 import { compose, Compose } from './compose'
-import { asProps, toProps, PROPS_EFFECT, PropEffect } from './effects'
+import {
+    asProps,
+    toProps,
+    PROPS_EFFECT,
+    PropEffect,
+    toRender,
+    COMPONENT_EFFECT,
+    ComponentEffect
+} from './effects'
+import { useRefract } from './refractHook'
 export {
@@ -18,3 +31,8 @@ withEffects,
     PropEffect,
-    PROPS_EFFECT
+    PROPS_EFFECT,
+    useRefract,
+    ObservableComponentBase,
+    toRender,
+    COMPONENT_EFFECT,
+    ComponentEffect
 }

types/observable.d.ts

@@ -11,7 +11,5 @@ import { Callbag, Source, Sink } from 'callbag'
 }
-export interface ObservableComponent {
-    observe: <T = any>(
-        propName?: string,
-        valueTransformer?: (value: any) => T
-    ) => Source<T>
+export interface ObservableComponentBase {
+    mount: Source<any>
+    unmount: Source<any>
     fromEvent: <T>(
@@ -21,4 +19,2 @@ eventName: string,
     ) => Source<T>
-    mount: Source<any>
-    unmount: Source<any>
     pushEvent: PushEvent
@@ -30,6 +26,14 @@ useEvent: <T>(
 }
+export interface Observe {
+    observe: <T>(
+        propName?: string,
+        valueTransformer?: (val: any) => T
+    ) => Source<T>
+}
+export declare type ObservableComponent = Observe & ObservableComponentBase
 export declare type Aperture<P, E, C = any> = (
+    component: ObservableComponent,
     initialProps: P,
-    initialContext: C
-) => (component: ObservableComponent) => Sink<E>
+    initialContext?: C
+) => Sink<E>
 export declare const subscribeToSink: <T>(
@@ -40,6 +44,10 @@ sink: Callbag<T, void>,
 ) => Subscription
+export declare const getObserve: <P>(
+    getProp: any,
+    data: any
+) => <T>(propName?: any, valueTransformer?: any) => any
 export declare const createComponent: <P>(
-    instance: any,
+    getProp: any,
     dataObservable: any,
     pushEvent: PushEvent
 ) => ObservableComponent

types/withEffects.d.ts

@@ -11,9 +11,11 @@ /// <reference types="react" />
 }
+export interface Config<P, E, C = any> {
+    handler?: Handler<P, E, C>
+    errorHandler?: ErrorHandler<P, C>
+    Context?: React.Context<C>
+}
 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, C>,
+    config?: Config<P, E, C>
 ) => (
-    aperture: Aperture<P, E, C>
-) => (
     BaseComponent?: React.ComponentType<
@@ -24,2 +26,2 @@ CP & {
     >
-) => React.ComponentClass<P>
+) => React.ComponentClass<P, any>

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

52276

increased by21.82%

Number of package files

14

increased by16.67%

Lines of code

1147

increased by29.17%

Number of lines in readme file

169

increased by1.2%

No dependency changes