refract-callbag - npm Package Compare versions

Comparing version 4.2.1 to 4.2.2

index.es.js

@@ -173,5 +173,6 @@ import $$observable from 'symbol-observable';
 
-var configureComponent = function (aperture, instance, isValidElement$$1, isComponentClass, handler, errorHandler, mergeProps, decorateProps) {
+var configureComponent = function (aperture, instance, isValidElement$$1, isComponentClass, handler, errorHandler, mergeProps, decorateProps, componentName) {
     if (isValidElement$$1 === void 0) { isValidElement$$1 = function () { return false; }; }
     if (isComponentClass === void 0) { isComponentClass = function () { return false; }; }
+    if (componentName === void 0) { componentName = 'unknown component'; }
     instance.state = {
@@ -259,2 +260,5 @@ renderEffect: false,
     var sinkObservable = aperture(component, instance.props, instance.context);
+    if (!sinkObservable) {
+        throw new Error("Your Refract aperture didn't return an observable entity in " + componentName + " (component).");
+    }
     var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props, instance.context), errorHandler
@@ -330,3 +334,3 @@ ? errorHandler(instance.props, instance.context)
                     _this.unmounted = false;
-                    configureComponent(aperture, _this, isValidElement, isComponentClass, config.handler, config.errorHandler, config.mergeProps, config.decorateProps !== false);
+                    configureComponent(aperture, _this, isValidElement, isComponentClass, config.handler, config.errorHandler, config.mergeProps, config.decorateProps !== false, BaseComponent.displayName || BaseComponent.name);
                     return _this;
@@ -338,3 +342,3 @@ }
                 };
-                WithEffects.prototype.componentWillReceiveProps = function (nextProps) {
+                WithEffects.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
                     this.reDecorateProps(nextProps);
@@ -381,4 +385,5 @@ this.pushProps(nextProps);
 
-var configureHook = function (aperture, data, handler, errorHandler) {
+var configureHook = function (aperture, data, handler, errorHandler, hookName) {
     if (handler === void 0) { handler = function () { return function () { return void 0; }; }; }
+    if (hookName === void 0) { hookName = 'unknown hook'; }
     var returnedData;
@@ -422,2 +427,5 @@ var lastData = data;
     var sinkObservable = aperture(component, data);
+    if (!sinkObservable) {
+        throw new Error("Your Refract aperture didn't return an observable entity in " + hookName + " (hook).");
+    }
     var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(data), errorHandler ? errorHandler(data) : undefined);
@@ -453,3 +461,3 @@ var pushMountEvent = function () {
     var initialHook = useMemo(function () {
-        return configureHook(aperture, data, config.handler, config.errorHandler);
+        return configureHook(aperture, data, config.handler, config.errorHandler, config.hookName);
     }, []);
@@ -456,0 +464,0 @@ var _a = useState(initialHook), hook = _a[0], setData = _a[1];

index.js

@@ -179,5 +179,6 @@ 'use strict';
 
-var configureComponent = function (aperture, instance, isValidElement, isComponentClass, handler, errorHandler, mergeProps, decorateProps) {
+var configureComponent = function (aperture, instance, isValidElement, isComponentClass, handler, errorHandler, mergeProps, decorateProps, componentName) {
     if (isValidElement === void 0) { isValidElement = function () { return false; }; }
     if (isComponentClass === void 0) { isComponentClass = function () { return false; }; }
+    if (componentName === void 0) { componentName = 'unknown component'; }
     instance.state = {
@@ -265,2 +266,5 @@ renderEffect: false,
     var sinkObservable = aperture(component, instance.props, instance.context);
+    if (!sinkObservable) {
+        throw new Error("Your Refract aperture didn't return an observable entity in " + componentName + " (component).");
+    }
     var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(instance.props, instance.context), errorHandler
@@ -336,3 +340,3 @@ ? errorHandler(instance.props, instance.context)
                     _this.unmounted = false;
-                    configureComponent(aperture, _this, React.isValidElement, isComponentClass, config.handler, config.errorHandler, config.mergeProps, config.decorateProps !== false);
+                    configureComponent(aperture, _this, React.isValidElement, isComponentClass, config.handler, config.errorHandler, config.mergeProps, config.decorateProps !== false, BaseComponent.displayName || BaseComponent.name);
                     return _this;
@@ -344,3 +348,3 @@ }
                 };
-                WithEffects.prototype.componentWillReceiveProps = function (nextProps) {
+                WithEffects.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
                     this.reDecorateProps(nextProps);
@@ -387,4 +391,5 @@ this.pushProps(nextProps);
 
-var configureHook = function (aperture, data, handler, errorHandler) {
+var configureHook = function (aperture, data, handler, errorHandler, hookName) {
     if (handler === void 0) { handler = function () { return function () { return void 0; }; }; }
+    if (hookName === void 0) { hookName = 'unknown hook'; }
     var returnedData;
@@ -428,2 +433,5 @@ var lastData = data;
     var sinkObservable = aperture(component, data);
+    if (!sinkObservable) {
+        throw new Error("Your Refract aperture didn't return an observable entity in " + hookName + " (hook).");
+    }
     var sinkSubscription = subscribeToSink(sinkObservable, finalHandler(data), errorHandler ? errorHandler(data) : undefined);
@@ -459,3 +467,3 @@ var pushMountEvent = function () {
     var initialHook = React.useMemo(function () {
-        return configureHook(aperture, data, config.handler, config.errorHandler);
+        return configureHook(aperture, data, config.handler, config.errorHandler, config.hookName);
     }, []);
@@ -462,0 +470,0 @@ var _a = React.useState(initialHook), hook = _a[0], setData = _a[1];

package.json

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

README.md

@@ -6,4 +6,3 @@ <p align="center">
 <p align="center">
-    Harness the power of reactive programming<br/>
-    to supercharge your components
+    Handle your component effects and side-effects in a clear and declarative fashion <br/> by using asynchronous data streams (reactive programming).
 </p>
@@ -38,4 +37,2 @@ <br/>
 
-Refract lets you handle your component effects and side-effects, so that you can write your code in a clear, pure, and declarative fashion by using reactive programming.
-
 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:
@@ -152,1 +149,7 @@
 *   [ReactiveConf 2018 - **AMA w/ Thomas Roch**](https://www.youtube.com/watch?v=liqHgQz8Ar0)
+
+### Articles
+
+*   [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) by [@andrestaltz](https://twitter.com/andrestaltz)
+*   [SurviveJS Interview with Thomas Roch - Refract: Manage Component Side Effects the Reactive Way](https://survivejs.com/blog/refract-interview/)
+*   [How we harnessed the power of reactive programming with Refract](https://medium.freecodecamp.org/how-we-harnessed-the-power-of-reactive-programming-with-refract-87f269ac779e)

types/configureComponent.d.ts

@@ -11,4 +11,5 @@ import { Handler, ErrorHandler } from './baseTypes'
     mergeProps?: boolean,
-    decorateProps?: boolean
+    decorateProps?: boolean,
+    componentName?: string
 ) => void
 export default configureComponent

types/configureHook.d.ts

@@ -7,3 +7,4 @@ import { Aperture } from './observable'
     handler?: Handler<Data, Effect, any>,
-    errorHandler?: ErrorHandler<Data, any>
+    errorHandler?: ErrorHandler<Data, any>,
+    hookName?: string
 ) => {
@@ -10,0 +11,0 @@ data: any

types/refractHook.d.ts

@@ -6,2 +6,3 @@ import { Aperture } from './observable'
     errorHandler?: ErrorHandler<Data>
+    hookName?: string
 }
@@ -8,0 +9,0 @@ export declare const useRefract: <Data, CurrentData = any, Effect = any>(

No alert changes

Improved metrics

Total package byte prevSize

55067

increased by2.93%

Lines of code

1215

increased by1.59%

Number of lines in readme file

153

increased by2%

No dependency changes