refract-xstream - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

index.es.js

@@ -0,5 +1,5 @@
+import $$observable from 'symbol-observable';
 import xs from 'xstream';
 import dropRepeats from 'xstream/extra/dropRepeats';
-import $$observable from 'symbol-observable';
-import { useState, useLayoutEffect, useEffect, isValidElement, createElement, Component } from 'react';
+import { useState, useLayoutEffect, useEffect, useMemo, isValidElement, createElement, Component } from 'react';
 
@@ -170,2 +170,12 @@ /*! *****************************************************************************
 };
+var createObservable = function (subscribe) {
+    return (_a = {
+            subscribe: subscribe
+        },
+        _a[$$observable] = function () {
+            return this;
+        },
+        _a);
+    var _a;
+};
 
@@ -250,13 +260,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);
@@ -316,3 +320,2 @@ var sinkObservable = aperture(component, instance.props, instance.context);
     };
-    var _a;
 };
@@ -418,13 +421,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);
@@ -456,3 +453,2 @@ var sinkObservable = aperture(component, data);
     };
-    var _a;
 };
@@ -463,3 +459,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 () {
@@ -472,3 +471,3 @@ hook.registerSetData(setData);
         hook.pushData(data);
-    });
+    }, [data]);
     return hook.data;
@@ -475,0 +474,0 @@ };

index.js

@@ -7,5 +7,5 @@ 'use strict';
 
+var $$observable = _interopDefault(require('symbol-observable'));
 var xs = _interopDefault(require('xstream'));
 var dropRepeats = _interopDefault(require('xstream/extra/dropRepeats'));
-var $$observable = _interopDefault(require('symbol-observable'));
 var React = require('react');
@@ -177,2 +177,12 @@
 };
+var createObservable = function (subscribe) {
+    return (_a = {
+            subscribe: subscribe
+        },
+        _a[$$observable] = function () {
+            return this;
+        },
+        _a);
+    var _a;
+};
 
@@ -257,13 +267,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);
@@ -323,3 +327,2 @@ var sinkObservable = aperture(component, instance.props, instance.context);
     };
-    var _a;
 };
@@ -425,13 +428,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);
@@ -463,3 +460,2 @@ var sinkObservable = aperture(component, data);
     };
-    var _a;
 };
@@ -470,3 +466,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 () {
@@ -479,3 +478,3 @@ hook.registerSetData(setData);
         hook.pushData(data);
-    });
+    }, [data]);
     return hook.data;
@@ -482,0 +481,0 @@ };

package.json

 {
     "name": "refract-xstream",
     "description": "Refract bindings for React with xstream: 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

@@ -47,1 +47,7 @@ import { Stream, Listener, Subscription } from 'xstream'
 ) => ObservableComponent
+export declare const createObservable: (
+    subscribe: any
+) => {
+    [x: string]: any
+    subscribe: any
+}

No alert changes

Improved metrics

Total package byte prevSize

52450

increased by0.21%

Lines of code

1193

increased by0.34%

No dependency changes