Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

refract-preact-xstream

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

refract-preact-xstream - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

types/refractHook.d.ts

163

index.es.js

@@ -41,2 +41,3 @@ import xs from 'xstream';

var PROPS_EFFECT = '@@refract/effect/props';
var COMPONENT_EFFECT = '@@refract/effect/component';
var toProps = function (props) { return ({

@@ -56,2 +57,6 @@ type: PROPS_EFFECT,

}); };
var toRender = function (data) { return ({
type: COMPONENT_EFFECT,
payload: data
}); };

@@ -106,8 +111,5 @@ var MOUNT_EVENT = '@@refract/event/mount';

};
var createComponent = function (instance, dataObservable, pushEvent) {
var data = function () { return xs.from(dataObservable); };
var getComponentBase = function (data, pushEvent) {
var fromEvent = function (eventName, valueTransformer) {
return data()
.filter(isEvent(eventName))
.map(function (data) {
return data.filter(isEvent(eventName)).map(function (data) {
var value = data.payload.value;

@@ -118,33 +120,4 @@ return valueTransformer ? valueTransformer(value) : value;

return {
mount: data()
.filter(isEvent(MOUNT_EVENT))
.mapTo(undefined),
unmount: data()
.filter(isEvent(UNMOUNT_EVENT))
.mapTo(undefined),
observe: function (propName, valueTransformer) {
if (propName && typeof instance.props[propName] === 'function') {
return data()
.filter(isCallback(propName))
.map(function (data) {
var args = data.payload.args;
return valueTransformer
? valueTransformer(args)
: args[0];
});
}
if (propName) {
return data()
.filter(isProps)
.map(function (data) {
var prop = data.payload[propName];
return valueTransformer ? valueTransformer(prop) : prop;
})
.compose(dropRepeats());
}
return data()
.filter(isProps)
.map(function (data) { return data.payload; })
.compose(dropRepeats(shallowEquals));
},
mount: data.filter(isEvent(MOUNT_EVENT)).mapTo(undefined),
unmount: data.filter(isEvent(UNMOUNT_EVENT)).mapTo(undefined),
fromEvent: fromEvent,

@@ -164,4 +137,33 @@ pushEvent: pushEvent,

};
var getObserve = function (getProp, data) {
return function observe(propName, valueTransformer) {
if (propName && typeof getProp(propName) === 'function') {
return data()
.filter(isCallback(propName))
.map(function (data) {
var args = data.payload.args;
return valueTransformer ? valueTransformer(args) : args[0];
});
}
if (propName) {
return data()
.filter(isProps)
.map(function (data) {
var prop = data.payload[propName];
return valueTransformer ? valueTransformer(prop) : prop;
})
.compose(dropRepeats());
}
return data()
.filter(isProps)
.map(function (data) { return data.payload; })
.compose(dropRepeats(shallowEquals));
};
};
var createComponent = function (getProp, dataObservable, pushEvent) {
var data = function () { return xs.from(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; }; }

@@ -186,3 +188,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) {

@@ -251,4 +255,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

@@ -305,3 +309,3 @@ ? errorHandler(instance.props, instance.context)

var _a;
}; };
};

@@ -322,37 +326,40 @@ var Empty = function () { return null; };

};
var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
if (BaseComponent === void 0) { BaseComponent = Empty; }
return /** @class */ (function (_super) {
__extends(WithEffects, _super);
function WithEffects(props) {
var _this = _super.call(this, props) || 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 /** @class */ (function (_super) {
__extends(WithEffects, _super);
function WithEffects(props) {
var _this = _super.call(this, props) || this;
_this.mounted = false;
_this.unmounted = false;
configureComponent(aperture, _this, isValidElement, isComponentClass, config.handler, config.errorHandler);
return _this;
}
return h(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 h(BaseComponent, this.getChildProps());
};
return WithEffects;
}(Component));
};
};

@@ -376,2 +383,6 @@ var identity = function (arg) { return arg; };

export { withEffects, compose, asProps, toProps, PROPS_EFFECT };
var useRefract = function () {
throw new Error('Hooks are only available in React');
};
export { withEffects, compose, asProps, toProps, PROPS_EFFECT, useRefract, toRender, COMPONENT_EFFECT };

164

index.js

@@ -47,2 +47,3 @@ 'use strict';

var PROPS_EFFECT = '@@refract/effect/props';
var COMPONENT_EFFECT = '@@refract/effect/component';
var toProps = function (props) { return ({

@@ -62,2 +63,6 @@ type: PROPS_EFFECT,

}); };
var toRender = function (data) { return ({
type: COMPONENT_EFFECT,
payload: data
}); };

@@ -112,8 +117,5 @@ var MOUNT_EVENT = '@@refract/event/mount';

};
var createComponent = function (instance, dataObservable, pushEvent) {
var data = function () { return xs.from(dataObservable); };
var getComponentBase = function (data, pushEvent) {
var fromEvent = function (eventName, valueTransformer) {
return data()
.filter(isEvent(eventName))
.map(function (data) {
return data.filter(isEvent(eventName)).map(function (data) {
var value = data.payload.value;

@@ -124,33 +126,4 @@ return valueTransformer ? valueTransformer(value) : value;

return {
mount: data()
.filter(isEvent(MOUNT_EVENT))
.mapTo(undefined),
unmount: data()
.filter(isEvent(UNMOUNT_EVENT))
.mapTo(undefined),
observe: function (propName, valueTransformer) {
if (propName && typeof instance.props[propName] === 'function') {
return data()
.filter(isCallback(propName))
.map(function (data) {
var args = data.payload.args;
return valueTransformer
? valueTransformer(args)
: args[0];
});
}
if (propName) {
return data()
.filter(isProps)
.map(function (data) {
var prop = data.payload[propName];
return valueTransformer ? valueTransformer(prop) : prop;
})
.compose(dropRepeats());
}
return data()
.filter(isProps)
.map(function (data) { return data.payload; })
.compose(dropRepeats(shallowEquals));
},
mount: data.filter(isEvent(MOUNT_EVENT)).mapTo(undefined),
unmount: data.filter(isEvent(UNMOUNT_EVENT)).mapTo(undefined),
fromEvent: fromEvent,

@@ -170,4 +143,33 @@ pushEvent: pushEvent,

};
var getObserve = function (getProp, data) {
return function observe(propName, valueTransformer) {
if (propName && typeof getProp(propName) === 'function') {
return data()
.filter(isCallback(propName))
.map(function (data) {
var args = data.payload.args;
return valueTransformer ? valueTransformer(args) : args[0];
});
}
if (propName) {
return data()
.filter(isProps)
.map(function (data) {
var prop = data.payload[propName];
return valueTransformer ? valueTransformer(prop) : prop;
})
.compose(dropRepeats());
}
return data()
.filter(isProps)
.map(function (data) { return data.payload; })
.compose(dropRepeats(shallowEquals));
};
};
var createComponent = function (getProp, dataObservable, pushEvent) {
var data = function () { return xs.from(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; }; }

@@ -192,3 +194,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) {

@@ -257,4 +261,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

@@ -311,3 +315,3 @@ ? errorHandler(instance.props, instance.context)

var _a;
}; };
};

@@ -328,37 +332,40 @@ var Empty = function () { return null; };

};
var withEffects = function (handler, errorHandler) { return function (aperture) { return function (BaseComponent) {
if (BaseComponent === void 0) { BaseComponent = Empty; }
return /** @class */ (function (_super) {
__extends(WithEffects, _super);
function WithEffects(props) {
var _this = _super.call(this, props) || 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 /** @class */ (function (_super) {
__extends(WithEffects, _super);
function WithEffects(props) {
var _this = _super.call(this, props) || this;
_this.mounted = false;
_this.unmounted = false;
configureComponent(aperture, _this, isValidElement, isComponentClass, config.handler, config.errorHandler);
return _this;
}
return preact.h(BaseComponent, this.getChildProps());
};
return WithEffects;
}(preact.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 preact.h(BaseComponent, this.getChildProps());
};
return WithEffects;
}(preact.Component));
};
};

@@ -382,2 +389,6 @@ var identity = function (arg) { return arg; };

var useRefract = function () {
throw new Error('Hooks are only available in React');
};
exports.withEffects = withEffects;

@@ -388,1 +399,4 @@ exports.compose = compose;

exports.PROPS_EFFECT = PROPS_EFFECT;
exports.useRefract = useRefract;
exports.toRender = toRender;
exports.COMPONENT_EFFECT = COMPONENT_EFFECT;

2

package.json
{
"name": "refract-preact-xstream",
"description": "Refract bindings for Preact with xstream: harness the power of reactive programming to supercharge your components!",
"version": "2.2.0",
"version": "3.0.0",
"main": "index.js",

@@ -6,0 +6,0 @@ "jsnext:main": "index.es.js",

16

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 @@

4

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

7

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

6

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>

24

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
}

28

types/observable.d.ts
import { Stream, Listener, Subscription } from 'xstream'
import { PushEvent } from './baseTypes'
export { Listener, Subscription }
export interface ObservableComponent {
observe: <T>(
propName?: string,
valueTransformer?: (val: any) => T
) => Stream<T>
export interface ObservableComponentBase {
mount: Stream<any>
unmount: Stream<any>
fromEvent: <T>(

@@ -13,4 +11,2 @@ eventName: string,

) => Stream<T>
mount: Stream<any>
unmount: Stream<any>
pushEvent: PushEvent

@@ -22,6 +18,14 @@ useEvent: <T>(

}
export interface Observe {
observe: <T>(
propName?: string,
valueTransformer?: (val: any) => T
) => Stream<T>
}
export declare type ObservableComponent = Observe & ObservableComponentBase
export declare type Aperture<P, E, C = any> = (
component: ObservableComponent,
initialProps: P,
initialContext: C
) => (component: ObservableComponent) => Stream<E>
initialContext?: C
) => Stream<E>
export declare const subscribeToSink: <T>(

@@ -32,6 +36,10 @@ sink: Stream<T>,

) => 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

10

types/withEffects.d.ts

@@ -10,8 +10,10 @@ import { ComponentFactory, VNode } from 'preact'

}
export interface Config<P, E> {
handler?: Handler<P, E, any>
errorHandler?: ErrorHandler<P, any>
}
export declare const withEffects: <P, E, CP = P>(
handler: Handler<P, E, any>,
errorHandler?: ErrorHandler<P, any>
aperture: Aperture<P, E, any>,
config?: Config<P, E>
) => (
aperture: Aperture<P, E, any>
) => (
BaseComponent?: ComponentFactory<

@@ -18,0 +20,0 @@ CP & {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc