micro-observables - npm Package Compare versions

Comparing version 1.5.0-rc6 to 1.5.0-rc7

dist/hooks.d.ts

 import { Observable } from "./observable";
 export declare function useObservable<T>(observable: Observable<T>): T;
-export declare function useComputedObservable<T>(compute: () => Observable<T>, deps?: any[]): T;
+export declare function useMemoizedObservable<T>(compute: () => Observable<T>, deps?: any[]): T;
+export declare function useComputedObservable<T>(compute: () => T, deps?: any[]): T;

dist/micro-observables.cjs.development.js

@@ -254,21 +254,2 @@ 'use strict';
 
-function useObservable(observable) {
-  var _useState = react.useState({}),
-      forceRender = _useState[1];
-
-  react.useEffect(function () {
-    return observable.onChange(function () {
-      return forceRender({});
-    });
-  }, [observable]);
-  return observable.get();
-}
-function useComputedObservable(compute, deps) {
-  if (deps === void 0) {
-    deps = [];
-  }
-
-  return useObservable(react.useMemo(compute, deps));
-}
-
 function memoize(func) {
@@ -535,2 +516,30 @@ var lastArgs;
 
+function useObservable(observable) {
+  var _useState = react.useState({}),
+      forceRender = _useState[1];
+
+  react.useEffect(function () {
+    return observable.onChange(function () {
+      return forceRender({});
+    });
+  }, [observable]);
+  return observable.get();
+}
+function useMemoizedObservable(compute, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  return useObservable(react.useMemo(compute, deps));
+}
+function useComputedObservable(compute, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  return useMemoizedObservable(function () {
+    return Observable.compute(compute);
+  }, deps);
+}
+
 exports.BaseObservable = BaseObservable;
@@ -542,3 +551,4 @@ exports.Observable = Observable;
 exports.useComputedObservable = useComputedObservable;
+exports.useMemoizedObservable = useMemoizedObservable;
 exports.useObservable = useObservable;
 //# sourceMappingURL=micro-observables.cjs.development.js.map

dist/micro-observables.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function n(t,n){t.prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n}function e(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=new Array(n);e<n;e++)r[e]=t[e];return r}function r(t,n){var r;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(r=function(t,n){if(t){if("string"==typeof t)return e(t,void 0);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,void 0):void 0}}(t))||n&&t&&"number"==typeof t.length){r&&(t=r);var u=0;return function(){return u>=t.length?{done:!0}:{done:!1,value:t[u++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}var u=[],o=!1,i=[],a=0,s=function(){function t(t){this._inputs=[],this._outputs=[],this._listeners=[],this._attachedToInputs=!1,this._dirty=!1,this._val=t}var n=t.prototype;return n.get=function(){var t=u[u.length-1];if(!t||!o)return this._get();try{return o=!1,t.push(this),this._get()}finally{o=!0}},n._get=function(){return!this._attachedToInputs||this._dirty?this._evaluate():this._val},n._evaluate=function(){return this._val},t._batch=function(t){try{1==++a&&exports.batchedUpdater?exports.batchedUpdater(t):t()}finally{if(0==--a){var n=i;i=[];for(var e=n.length-1;e>=0;e--){var r=n[e];r._dirty=!1,r._set(r._evaluate())}}}},n._set=function(t){if(this._val!==t){var n=this._val;this._val=t,a>0&&this._addOutputsToBatch();for(var e,u=r(this._listeners.slice());!(e=u()).done;)(0,e.value)(t,n)}},n._addOutputsToBatch=function(){for(var t,n=r(this._outputs);!(t=n()).done;){var e=t.value;e._dirty||(e._dirty=!0,e._addOutputsToBatch(),i.push(e))}},n.onChange=function(t){var n=this;this._listeners.push(t),this._attachToInputs();var e=!1;return function(){e||(e=!0,n._listeners.splice(n._listeners.indexOf(t),1),n._detachFromInputs())}},t._captureInputs=function(t){try{var n=[];return u.push(n),o=!0,t(),n}finally{u.pop(),o=!1}},n._addInput=function(t){this._inputs.push(t),this._attachedToInputs&&this._attachToInput(t)},n._removeInput=function(t){this._inputs.splice(this._inputs.indexOf(t),1),this._attachedToInputs&&this._detachFromInput(t)},n._shouldAttachToInputs=function(){return this._listeners.length>0||this._outputs.length>0},n._attachToInputs=function(){if(!this._attachedToInputs&&this._shouldAttachToInputs()){this._attachedToInputs=!0,this._val=this._evaluate();for(var t,n=r(this._inputs);!(t=n()).done;){var e=t.value;this._attachToInput(e),e._attachToInputs()}}},n._detachFromInputs=function(){if(this._attachedToInputs&&!this._shouldAttachToInputs()){this._attachedToInputs=!1;for(var t,n=r(this._inputs);!(t=n()).done;){var e=t.value;this._detachFromInput(e),e._detachFromInputs()}}},n._attachToInput=function(t){t._outputs.push(this)},n._detachFromInput=function(t){t._outputs.splice(t._outputs.indexOf(this),1)},t}();function c(n){var e=t.useState({})[1];return t.useEffect((function(){return n.onChange((function(){return e({})}))}),[n]),n.get()}function h(t){return new f(t)}var p=function(t){function e(n){var r;return(r=t.call(this,n instanceof e?n.get():n)||this)._updateValInput(n),r}n(e,t);var r=e.prototype;return r._evaluate=function(){return this._valInput?this._valInput.get():t.prototype._evaluate.call(this)},r.transform=function(t){return new _([this],(function(n){return t(n[0])}))},r.onlyIf=function(t){var n=void 0;return this.transform((function(e){return t(e)&&(n=e),n}))},r.default=function(t){return this.transform((function(n){return null!=n?n:t}))},r.as=function(){return this},e.from=function(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return new _(n,(function(t){return t}))},e.merge=function(t){return new _(t,(function(t){return t}))},e.latest=function(){for(var t,n=arguments.length,e=new Array(n),r=0;r<n;r++)e[r]=arguments[r];return new _(e,(function(n){var e=t?n.find((function(n,e){return n!==t[e]})):n[0];return t=n,e}))},e.compute=function(t){return new l(t)},e.fromPromise=function(t,n){var e=h(void 0);return t.then((function(t){return e.set(t)}),(function(t){return n&&e.set(n(t))})),e},r.toPromise=function(){var t=this;return new Promise((function(n){var e=t.onChange((function(t){n(t),e()}))}))},e.batch=function(t){s._batch(t)},r._updateValInput=function(t){this._valInput!==t&&(this._valInput&&(this._removeInput(this._valInput),this._valInput=void 0),t instanceof e&&(this._addInput(t),this._valInput=t))},e}(s),f=function(t){function e(){return t.apply(this,arguments)||this}n(e,t);var r=e.prototype;return r.set=function(t){var n=this;this._updateValInput(t),p.batch((function(){return n._set(t instanceof p?t.get():t)}))},r.update=function(t){this.set(t(this.get()))},r.readOnly=function(){return this},e}(p),_=function(t){function e(n,e){var u,o,i,a;(u=t.call(this,void 0)||this)._compute=(o=e,function(t){var n=!1;if(i&&t.length===i.length){for(var e=0;e<t.length;e++)if(t[e]!==i[e]){n=!0;break}}else n=!0;return n&&(i=t,a=o(t)),a}),u._computeInputs=n;for(var s,c=r(n);!(s=c()).done;)u._addInput(s.value);return u}return n(e,t),e.prototype._evaluate=function(){var t=this._compute(this._computeInputs.map((function(t){return t.get()})));return this._updateValInput(t),t instanceof p?t.get():t},e}(p),l=function(t){function e(n){var e;return(e=t.call(this,void 0)||this)._currentInputs=new Set,e._compute=n,e}return n(e,t),e.prototype._evaluate=function(){var t,n=this,e=new Set(s._captureInputs((function(){return t=n._compute()})));return e.forEach((function(t){n._currentInputs.has(t)?n._currentInputs.delete(t):n._addInput(t)})),this._currentInputs.forEach((function(t){return n._removeInput(t)})),this._currentInputs=e,t},e}(p);exports.BaseObservable=s,exports.Observable=p,exports.WritableObservable=f,exports.observable=h,exports.setBatchedUpdater=function(t){exports.batchedUpdater=t},exports.useComputedObservable=function(n,e){return void 0===e&&(e=[]),c(t.useMemo(n,e))},exports.useObservable=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function n(t,n){t.prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n}function e(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=new Array(n);e<n;e++)r[e]=t[e];return r}function r(t,n){var r;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(r=function(t,n){if(t){if("string"==typeof t)return e(t,void 0);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,void 0):void 0}}(t))||n&&t&&"number"==typeof t.length){r&&(t=r);var u=0;return function(){return u>=t.length?{done:!0}:{done:!1,value:t[u++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}var u=[],o=!1,i=[],a=0,s=function(){function t(t){this._inputs=[],this._outputs=[],this._listeners=[],this._attachedToInputs=!1,this._dirty=!1,this._val=t}var n=t.prototype;return n.get=function(){var t=u[u.length-1];if(!t||!o)return this._get();try{return o=!1,t.push(this),this._get()}finally{o=!0}},n._get=function(){return!this._attachedToInputs||this._dirty?this._evaluate():this._val},n._evaluate=function(){return this._val},t._batch=function(t){try{1==++a&&exports.batchedUpdater?exports.batchedUpdater(t):t()}finally{if(0==--a){var n=i;i=[];for(var e=n.length-1;e>=0;e--){var r=n[e];r._dirty=!1,r._set(r._evaluate())}}}},n._set=function(t){if(this._val!==t){var n=this._val;this._val=t,a>0&&this._addOutputsToBatch();for(var e,u=r(this._listeners.slice());!(e=u()).done;)(0,e.value)(t,n)}},n._addOutputsToBatch=function(){for(var t,n=r(this._outputs);!(t=n()).done;){var e=t.value;e._dirty||(e._dirty=!0,e._addOutputsToBatch(),i.push(e))}},n.onChange=function(t){var n=this;this._listeners.push(t),this._attachToInputs();var e=!1;return function(){e||(e=!0,n._listeners.splice(n._listeners.indexOf(t),1),n._detachFromInputs())}},t._captureInputs=function(t){try{var n=[];return u.push(n),o=!0,t(),n}finally{u.pop(),o=!1}},n._addInput=function(t){this._inputs.push(t),this._attachedToInputs&&this._attachToInput(t)},n._removeInput=function(t){this._inputs.splice(this._inputs.indexOf(t),1),this._attachedToInputs&&this._detachFromInput(t)},n._shouldAttachToInputs=function(){return this._listeners.length>0||this._outputs.length>0},n._attachToInputs=function(){if(!this._attachedToInputs&&this._shouldAttachToInputs()){this._attachedToInputs=!0,this._val=this._evaluate();for(var t,n=r(this._inputs);!(t=n()).done;){var e=t.value;this._attachToInput(e),e._attachToInputs()}}},n._detachFromInputs=function(){if(this._attachedToInputs&&!this._shouldAttachToInputs()){this._attachedToInputs=!1;for(var t,n=r(this._inputs);!(t=n()).done;){var e=t.value;this._detachFromInput(e),e._detachFromInputs()}}},n._attachToInput=function(t){t._outputs.push(this)},n._detachFromInput=function(t){t._outputs.splice(t._outputs.indexOf(this),1)},t}();function c(t){return new p(t)}var h=function(t){function e(n){var r;return(r=t.call(this,n instanceof e?n.get():n)||this)._updateValInput(n),r}n(e,t);var r=e.prototype;return r._evaluate=function(){return this._valInput?this._valInput.get():t.prototype._evaluate.call(this)},r.transform=function(t){return new f([this],(function(n){return t(n[0])}))},r.onlyIf=function(t){var n=void 0;return this.transform((function(e){return t(e)&&(n=e),n}))},r.default=function(t){return this.transform((function(n){return null!=n?n:t}))},r.as=function(){return this},e.from=function(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return new f(n,(function(t){return t}))},e.merge=function(t){return new f(t,(function(t){return t}))},e.latest=function(){for(var t,n=arguments.length,e=new Array(n),r=0;r<n;r++)e[r]=arguments[r];return new f(e,(function(n){var e=t?n.find((function(n,e){return n!==t[e]})):n[0];return t=n,e}))},e.compute=function(t){return new _(t)},e.fromPromise=function(t,n){var e=c(void 0);return t.then((function(t){return e.set(t)}),(function(t){return n&&e.set(n(t))})),e},r.toPromise=function(){var t=this;return new Promise((function(n){var e=t.onChange((function(t){n(t),e()}))}))},e.batch=function(t){s._batch(t)},r._updateValInput=function(t){this._valInput!==t&&(this._valInput&&(this._removeInput(this._valInput),this._valInput=void 0),t instanceof e&&(this._addInput(t),this._valInput=t))},e}(s),p=function(t){function e(){return t.apply(this,arguments)||this}n(e,t);var r=e.prototype;return r.set=function(t){var n=this;this._updateValInput(t),h.batch((function(){return n._set(t instanceof h?t.get():t)}))},r.update=function(t){this.set(t(this.get()))},r.readOnly=function(){return this},e}(h),f=function(t){function e(n,e){var u,o,i,a;(u=t.call(this,void 0)||this)._compute=(o=e,function(t){var n=!1;if(i&&t.length===i.length){for(var e=0;e<t.length;e++)if(t[e]!==i[e]){n=!0;break}}else n=!0;return n&&(i=t,a=o(t)),a}),u._computeInputs=n;for(var s,c=r(n);!(s=c()).done;)u._addInput(s.value);return u}return n(e,t),e.prototype._evaluate=function(){var t=this._compute(this._computeInputs.map((function(t){return t.get()})));return this._updateValInput(t),t instanceof h?t.get():t},e}(h),_=function(t){function e(n){var e;return(e=t.call(this,void 0)||this)._currentInputs=new Set,e._compute=n,e}return n(e,t),e.prototype._evaluate=function(){var t,n=this,e=new Set(s._captureInputs((function(){return t=n._compute()})));return e.forEach((function(t){n._currentInputs.has(t)?n._currentInputs.delete(t):n._addInput(t)})),this._currentInputs.forEach((function(t){return n._removeInput(t)})),this._currentInputs=e,t},e}(h);function l(n){var e=t.useState({})[1];return t.useEffect((function(){return n.onChange((function(){return e({})}))}),[n]),n.get()}function v(n,e){return void 0===e&&(e=[]),l(t.useMemo(n,e))}exports.BaseObservable=s,exports.Observable=h,exports.WritableObservable=p,exports.observable=c,exports.setBatchedUpdater=function(t){exports.batchedUpdater=t},exports.useComputedObservable=function(t,n){return void 0===n&&(n=[]),v((function(){return h.compute(t)}),n)},exports.useMemoizedObservable=v,exports.useObservable=l;
 //# sourceMappingURL=micro-observables.cjs.production.min.js.map

dist/micro-observables.esm.js

@@ -251,21 +251,2 @@ import { useState, useEffect, useMemo } from 'react';
 
-function useObservable(observable) {
-  var _useState = useState({}),
-      forceRender = _useState[1];
-
-  useEffect(function () {
-    return observable.onChange(function () {
-      return forceRender({});
-    });
-  }, [observable]);
-  return observable.get();
-}
-function useComputedObservable(compute, deps) {
-  if (deps === void 0) {
-    deps = [];
-  }
-
-  return useObservable(useMemo(compute, deps));
-}
-
 function memoize(func) {
@@ -532,3 +513,31 @@ var lastArgs;
 
-export { BaseObservable, Observable, WritableObservable, batchedUpdater, observable, setBatchedUpdater, useComputedObservable, useObservable };
+function useObservable(observable) {
+  var _useState = useState({}),
+      forceRender = _useState[1];
+
+  useEffect(function () {
+    return observable.onChange(function () {
+      return forceRender({});
+    });
+  }, [observable]);
+  return observable.get();
+}
+function useMemoizedObservable(compute, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  return useObservable(useMemo(compute, deps));
+}
+function useComputedObservable(compute, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  return useMemoizedObservable(function () {
+    return Observable.compute(compute);
+  }, deps);
+}
+
+export { BaseObservable, Observable, WritableObservable, batchedUpdater, observable, setBatchedUpdater, useComputedObservable, useMemoizedObservable, useObservable };
 //# sourceMappingURL=micro-observables.esm.js.map

package.json

 {
   "name": "micro-observables",
-  "version": "1.5.0-rc6",
+  "version": "1.5.0-rc7",
   "description": "A simple Observable library that can be used for easy state management in React applications.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -433,8 +433,10 @@ # Micro-observables
 
-#### useComputedObservable(compute: () => Observable, deps?: any[])
+#### useMemoizedObservable(compute: () => Observable, deps?: any[])
 
-Shortcut for `useObservable(useMemo(compute, deps))`. Return the value of the observable computed by the `compute` parameter and trigger a re-render when this value changes.
+Shortcut for `useObservable(useMemo(compute, deps))`. Return the value of the observable computed by the `compute` parameter and automatically trigger a re-render when its value changes.
 
 The `compute` function is evaluated each time one of the values in `deps` changes. If unspecified, `deps` defaults to `[]`, resulting in the `compute` function being called only once.
 
+**Note:** `useMemoizedObservable()` is an optimized version of `useObservable()` that avoids recreating a new observable and reevaluating it at each render. Most of the time, you actually don't even need it, creating an observable is a fast operation and if your observable evaluation does not require heavy computation, you can use `useObservable()` directly instead.
+
 ```tsx
@@ -444,8 +446,2 @@ type User = { id: string; displayName: string };
 
-class UserStore {
-  private _user = observable<User>();
-
-  readonly user = this._user.readOnly();
-}
-
 class TodoStore {
@@ -462,9 +458,8 @@ private _todos = observable<readonly Todo[]>([]);
 const TodoList: React.FC = () => {
-  const userTodos = useComputedObservable(() =>
-    userStore.user.transform(user => todoStore.getTodosAssignedTo(user.id))
-  );
+  const [assignee, setAssignee] = useState<User>({ id: "1234", displayName: "John" });
+  const todos = useMemoizedObservable(() => todoStore.getTodosAssignedTo(assignee.id), [assignee]);
   return (
     <div>
       <ul>
-        {userTodos.map((todo, index) => (
+        {todos.map((todo, index) => (
           <TodoItem key={index} todo={todo} index={index} />
@@ -478,2 +473,6 @@ ))}
 
-**Note:** `useComputedObservable()` is an optimized version of `useObservable()` that avoids recreating a new observable and reevaluating its value at each render. It will **not decrease the amount of renders**. Most of the time, you actually don't even need it, creating an observable is a fast operation and if your observable evaluation does not require heavy computation, you can use `useObservable()` instead.
+#### useComputedObservable(compute: () => value, deps?: any[])
+
+Shortcut for `useMemoizedObservable(() => Observable.compute(compute), deps))`. Create a new observable with `Observable.compute()` and automatically trigger a re-render when the result of the `compute` function changes.
+
+The observable is recreated each time one of the values in `deps` changes. If unspecified, `deps` defaults to `[]`, resulting in the observable being created only once.

src/hooks.ts

@@ -14,4 +14,8 @@ import { useEffect, useMemo, useState } from "react";
 
-export function useComputedObservable<T>(compute: () => Observable<T>, deps: any[] = []): T {
+export function useMemoizedObservable<T>(compute: () => Observable<T>, deps: any[] = []): T {
 	return useObservable(useMemo(compute, deps));
 }
+
+export function useComputedObservable<T>(compute: () => T, deps: any[] = []): T {
+	return useMemoizedObservable(() => Observable.compute(compute), deps);
+}

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

135073

increased by1.62%

Lines of code

1295

increased by1.73%

Worsened metrics

Number of lines in readme file

475

decreased by-0.21%

No dependency changes