refract-callbag - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

index.es.js

@@ -0,4 +1,4 @@
+import $$observable from 'symbol-observable';
 import startWith from 'callbag-start-with';
-import $$observable from 'symbol-observable';
-import { useState, useLayoutEffect, useEffect, isValidElement, createElement, Component } from 'react';
+import { useState, useLayoutEffect, useEffect, useMemo, isValidElement, createElement, Component } from 'react';
 
@@ -166,2 +166,12 @@ /*! *****************************************************************************
 };
+var createObservable = function (subscribe) {
+    return (_a = {
+            subscribe: subscribe
+        },
+        _a[$$observable] = function () {
+            return this;
+        },
+        _a);
+    var _a;
+};
 
@@ -246,13 +256,7 @@ var configureComponent = function (aperture, instance, isValidElement$$1, isComponentClass, handler, errorHandler, mergeProps, decorateProps) {
     }
-    var dataObservable = (_a = {
-            subscribe: function (listener) {
-                addListener(listener);
-                listener.next(createPropsData(instance.props));
-                return { unsubscribe: function () { return removeListener(listener); } };
-            }
-        },
-        _a[$$observable] = function () {
-            return this;
-        },
-        _a);
+    var dataObservable = createObservable(function (listener) {
+        addListener(listener);
+        listener.next(createPropsData(instance.props));
+        return { unsubscribe: function () { return removeListener(listener); } };
+    });
     var component = createComponent(function (propName) { return instance.props[propName]; }, dataObservable, pushEvent, decorateProps);
@@ -312,3 +316,2 @@ var sinkObservable = aperture(component, instance.props, instance.context);
     };
-    var _a;
 };
@@ -414,13 +417,7 @@
     }; };
-    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 dataObservable = createObservable(function (listener) {
+        addListener(listener);
+        listener.next(createPropsData(lastData));
+        return { unsubscribe: function () { return removeListener(listener); } };
+    });
     var component = createComponent(function (propName) { return data[propName]; }, dataObservable, pushEvent, false);
@@ -452,3 +449,2 @@ var sinkObservable = aperture(component, data);
     };
-    var _a;
 };
@@ -459,3 +455,6 @@
     if (config === void 0) { config = {}; }
-    var _a = useState(configureHook(aperture, data, config.handler, config.errorHandler)), hook = _a[0], setData = _a[1];
+    var initialHook = useMemo(function () {
+        return configureHook(aperture, data, config.handler, config.errorHandler);
+    }, []);
+    var _a = useState(initialHook), hook = _a[0], setData = _a[1];
     useLayoutEffect(function () {
@@ -468,3 +467,3 @@ hook.registerSetData(setData);
         hook.pushData(data);
-    });
+    }, [data]);
     return hook.data;
@@ -471,0 +470,0 @@ };

index.js

@@ -7,4 +7,4 @@ 'use strict';
 
+var $$observable = _interopDefault(require('symbol-observable'));
 var startWith = _interopDefault(require('callbag-start-with'));
-var $$observable = _interopDefault(require('symbol-observable'));
 var React = require('react');
@@ -173,2 +173,12 @@
 };
+var createObservable = function (subscribe) {
+    return (_a = {
+            subscribe: subscribe
+        },
+        _a[$$observable] = function () {
+            return this;
+        },
+        _a);
+    var _a;
+};
 
@@ -253,13 +263,7 @@ var configureComponent = function (aperture, instance, isValidElement, isComponentClass, handler, errorHandler, mergeProps, decorateProps) {
     }
-    var dataObservable = (_a = {
-            subscribe: function (listener) {
-                addListener(listener);
-                listener.next(createPropsData(instance.props));
-                return { unsubscribe: function () { return removeListener(listener); } };
-            }
-        },
-        _a[$$observable] = function () {
-            return this;
-        },
-        _a);
+    var dataObservable = createObservable(function (listener) {
+        addListener(listener);
+        listener.next(createPropsData(instance.props));
+        return { unsubscribe: function () { return removeListener(listener); } };
+    });
     var component = createComponent(function (propName) { return instance.props[propName]; }, dataObservable, pushEvent, decorateProps);
@@ -319,3 +323,2 @@ var sinkObservable = aperture(component, instance.props, instance.context);
     };
-    var _a;
 };
@@ -421,13 +424,7 @@
     }; };
-    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 dataObservable = createObservable(function (listener) {
+        addListener(listener);
+        listener.next(createPropsData(lastData));
+        return { unsubscribe: function () { return removeListener(listener); } };
+    });
     var component = createComponent(function (propName) { return data[propName]; }, dataObservable, pushEvent, false);
@@ -459,3 +456,2 @@ var sinkObservable = aperture(component, data);
     };
-    var _a;
 };
@@ -466,3 +462,6 @@
     if (config === void 0) { config = {}; }
-    var _a = React.useState(configureHook(aperture, data, config.handler, config.errorHandler)), hook = _a[0], setData = _a[1];
+    var initialHook = React.useMemo(function () {
+        return configureHook(aperture, data, config.handler, config.errorHandler);
+    }, []);
+    var _a = React.useState(initialHook), hook = _a[0], setData = _a[1];
     React.useLayoutEffect(function () {
@@ -475,3 +474,3 @@ hook.registerSetData(setData);
         hook.pushData(data);
-    });
+    }, [data]);
     return hook.data;
@@ -478,0 +477,0 @@ };

package.json

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

types/observable.d.ts

@@ -54,1 +54,7 @@ import { Callbag, Source, Sink } from 'callbag'
 ) => ObservableComponent
+export declare const createObservable: (
+    subscribe: any
+) => {
+    [x: string]: any
+    subscribe: 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

53070

increased by0.21%

Lines of code

1192

increased by0.34%

No dependency changes