New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
refract-callbag
Advanced tools
refract-callbag - npm Package Compare versions
Comparing version 3.0.0 to 3.1.0
@@ -159,3 +159,3 @@ import startWith from 'callbag-start-with'; | ||
| var configureComponent = function (aperture, instance, isValidElement$$1, isComponentClass, handler, errorHandler) { | ||
| var configureComponent = function (aperture, instance, isValidElement$$1, isComponentClass, handler, errorHandler, mergeProps) { | ||
| if (isValidElement$$1 === void 0) { isValidElement$$1 = function () { return false; }; } | ||
@@ -194,3 +194,4 @@ if (isComponentClass === void 0) { isComponentClass = function () { return false; }; } | ||
| replace: payload.replace, | ||
| props: payload.props | ||
| props: mergeProps | ||
| ? __assign({}, instance.state.props, payload.props) : payload.props | ||
| }); | ||
@@ -318,3 +319,3 @@ } | ||
| _this.unmounted = false; | ||
| configureComponent(aperture, _this, isValidElement, isComponentClass, config.handler, config.errorHandler); | ||
| configureComponent(aperture, _this, isValidElement, isComponentClass, config.handler, config.errorHandler, config.mergeProps); | ||
| return _this; | ||
@@ -321,0 +322,0 @@ } |
@@ -165,3 +165,3 @@ 'use strict'; | ||
| var configureComponent = function (aperture, instance, isValidElement, isComponentClass, handler, errorHandler) { | ||
| var configureComponent = function (aperture, instance, isValidElement, isComponentClass, handler, errorHandler, mergeProps) { | ||
| if (isValidElement === void 0) { isValidElement = function () { return false; }; } | ||
@@ -200,3 +200,4 @@ if (isComponentClass === void 0) { isComponentClass = function () { return false; }; } | ||
| replace: payload.replace, | ||
| props: payload.props | ||
| props: mergeProps | ||
| ? __assign({}, instance.state.props, payload.props) : payload.props | ||
| }); | ||
@@ -324,3 +325,3 @@ } | ||
| _this.unmounted = false; | ||
| configureComponent(aperture, _this, React.isValidElement, isComponentClass, config.handler, config.errorHandler); | ||
| configureComponent(aperture, _this, React.isValidElement, isComponentClass, config.handler, config.errorHandler, config.mergeProps); | ||
| return _this; | ||
@@ -327,0 +328,0 @@ } |
| { | ||
| "name": "refract-callbag", | ||
| "description": "Refract bindings for React with Callbag: harness the power of reactive programming to supercharge your components!", | ||
| "version": "3.0.0", | ||
| "version": "3.1.0", | ||
| "main": "index.js", | ||
@@ -6,0 +6,0 @@ "jsnext:main": "index.es.js", |
@@ -39,3 +39,3 @@ <p align="center"> | ||
| Refract makes reactive programming possible in React, React Native, Preact and Inferno, with only a single higher-order component! You can choose to start using a tiny bit of reactive programming, or go full reactive. Refract allows you to: | ||
| Refract makes reactive programming possible in React, React Native, Preact and Inferno, with only a single higher-order component or a single hook! You can choose to start using a tiny bit of reactive programming, or go full reactive. Refract allows you to: | ||
@@ -105,36 +105,12 @@ * [Manage side effects](https://refract.js.org/) like API calls, analytics, logging, etc. | ||
| The example demonstrates uses the two building blocks used with Refract - an `aperture` and a `handler` - and shows how they can be integrated into a React component via the `withEffects` higher-order component. | ||
| ### Aperture | ||
| An `aperture` controls the streams of data entering Refract. It is a function which observes data sources within your app, passes this data through any necessary logic flows, and outputs a stream of `effect`s. | ||
| An `aperture` controls the streams of data entering Refract. It is a function which observes data sources within your app, passes this data through any necessary logic flows, and outputs a stream of `effect` values in response. | ||
| Signature: `(component, initialProps) => { return effectStream }`. | ||
| * The `initialProps` are all props passed into the `WrappedComponent`. | ||
| * The `component` is an object which lets you observe your React component. | ||
| * Within the body of the function, you observe the event source you choose, pipe the events through your stream library of choice, and return a single stream of effects. | ||
| ### Handler | ||
| A `handler` is a function which causes side-effects in response to any `effect` object output by the `aperture`. | ||
| A `handler` is a function which causes side-effects in response to `effect` values. | ||
| Signature: `(initialProps) => (effect) => { /* handle effects here */ }`. | ||
| * The `initialProps` are all props passed into the `WrappedComponent`. | ||
| * The `effect` is each event emitted by your `aperture`. | ||
| * Within the body of the function, you call any side-effects imperatively. | ||
| ### withEffects | ||
| The `withEffects` higher-order component implements your side-effect logic as a React component. | ||
| Signature: `(aperture, { handler }) => (Component) => { return WrappedComponent }` | ||
| * The hoc takes in two arguments, followed by a component: | ||
| * An `aperture` function | ||
| * 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. | ||
| # Learn Refract | ||
@@ -171,1 +147,6 @@ | ||
| [Everyone is welcome to join our discussion channel - `#refract` on the Reactiflux Discord server.](https://discord.gg/fqk86GH) | ||
| ### Talks | ||
| * [ReactiveConf 2018 - Thomas Roch: **Be More Functional and Reactive in React**](https://www.youtube.com/watch?v=c8p9o4rxcYk) | ||
| * [ReactiveConf 2018 - **AMA w/ Thomas Roch**](https://www.youtube.com/watch?v=liqHgQz8Ar0) |
@@ -9,4 +9,5 @@ import { Handler, ErrorHandler } from './baseTypes' | ||
| handler?: Handler<P, E, Ctx>, | ||
| errorHandler?: ErrorHandler<P, any> | ||
| errorHandler?: ErrorHandler<P, any>, | ||
| mergeProps?: boolean | ||
| ) => void | ||
| export default configureComponent |
@@ -15,2 +15,3 @@ /// <reference types="react" /> | ||
| Context?: React.Context<C> | ||
| mergeProps?: boolean | ||
| } | ||
@@ -17,0 +18,0 @@ export declare const withEffects: <P, E, CP = P, C = any>( |
No alert changes
Improved metrics
- Lines of code
- increased by0.35%
1151
Worsened metrics
- Total package byte prevSize
- decreased by-0.98%
51764
- Number of lines in readme file
- decreased by-11.24%
150
No dependency changes