mobx-react-lite - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1-0

dist/custom.js

@@ -136,2 +136,6 @@ (function (global, factory) {
 
+    var EMPTY_ARRAY = [];
+    function useUnmount(fn) {
+        react.useEffect(function () { return fn; }, EMPTY_ARRAY);
+    }
     function useForceUpdate() {
@@ -162,18 +166,11 @@ var _a = __read(react.useState(0), 2), setTick = _a[1];
         var reaction = react.useRef(null);
-        var committed = react.useRef(false);
         if (!reaction.current) {
-            // First render for this component. Not yet committed.
             reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
-                // Observable has changed. Only force an update if we've definitely
-                // been committed.
-                if (committed.current) {
-                    forceUpdate();
-                }
+                forceUpdate();
             });
         }
         react.useDebugValue(reaction, printDebugValue);
-        react.useEffect(function () {
-            committed.current = true;
-            return function () { return reaction.current.dispose(); };
-        }, []);
+        useUnmount(function () {
+            reaction.current.dispose();
+        });
         // render the original component, but have the
@@ -283,2 +280,10 @@ // reaction track the observables, so that rendering
 
+    // tslint:disable-next-line: ban-types
+    function wrapInTransaction(fn) {
+        // tslint:disable-next-line: only-arrow-functions
+        return function () {
+            var args = arguments;
+            return mobx.transaction(function () { return fn.apply(null, args); });
+        };
+    }
     function useLocalStore(initializer) {
@@ -291,3 +296,3 @@ return react.useState(function () {
                     if (typeof value === "function") {
-                        store[key] = mobx.action(value.bind(store));
+                        store[key] = wrapInTransaction(value.bind(store));
                     }
@@ -294,0 +299,0 @@ });

dist/custom.module.js

@@ -1,2 +0,2 @@
-import { spy, observable, computed, getDependencyTree, Reaction, action } from 'mobx';
+import { spy, observable, computed, getDependencyTree, Reaction, transaction } from 'mobx';
 import { useState, useRef, useMemo, useEffect, useCallback, useDebugValue, memo, forwardRef } from 'react';
@@ -133,2 +133,6 @@
 
+var EMPTY_ARRAY = [];
+function useUnmount(fn) {
+    useEffect(function () { return fn; }, EMPTY_ARRAY);
+}
 function useForceUpdate() {
@@ -159,18 +163,11 @@ var _a = __read(useState(0), 2), setTick = _a[1];
     var reaction = useRef(null);
-    var committed = useRef(false);
     if (!reaction.current) {
-        // First render for this component. Not yet committed.
         reaction.current = new Reaction("observer(" + baseComponentName + ")", function () {
-            // Observable has changed. Only force an update if we've definitely
-            // been committed.
-            if (committed.current) {
-                forceUpdate();
-            }
+            forceUpdate();
         });
     }
     useDebugValue(reaction, printDebugValue);
-    useEffect(function () {
-        committed.current = true;
-        return function () { return reaction.current.dispose(); };
-    }, []);
+    useUnmount(function () {
+        reaction.current.dispose();
+    });
     // render the original component, but have the
@@ -280,2 +277,10 @@ // reaction track the observables, so that rendering
 
+// tslint:disable-next-line: ban-types
+function wrapInTransaction(fn) {
+    // tslint:disable-next-line: only-arrow-functions
+    return function () {
+        var args = arguments;
+        return transaction(function () { return fn.apply(null, args); });
+    };
+}
 function useLocalStore(initializer) {
@@ -288,3 +293,3 @@ return useState(function () {
                 if (typeof value === "function") {
-                    store[key] = action(value.bind(store));
+                    store[key] = wrapInTransaction(value.bind(store));
                 }
@@ -291,0 +296,0 @@ });

dist/index.js

@@ -136,2 +136,6 @@ (function (global, factory) {
 
+    var EMPTY_ARRAY = [];
+    function useUnmount(fn) {
+        react.useEffect(function () { return fn; }, EMPTY_ARRAY);
+    }
     function useForceUpdate() {
@@ -162,18 +166,11 @@ var _a = __read(react.useState(0), 2), setTick = _a[1];
         var reaction = react.useRef(null);
-        var committed = react.useRef(false);
         if (!reaction.current) {
-            // First render for this component. Not yet committed.
             reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
-                // Observable has changed. Only force an update if we've definitely
-                // been committed.
-                if (committed.current) {
-                    forceUpdate();
-                }
+                forceUpdate();
             });
         }
         react.useDebugValue(reaction, printDebugValue);
-        react.useEffect(function () {
-            committed.current = true;
-            return function () { return reaction.current.dispose(); };
-        }, []);
+        useUnmount(function () {
+            reaction.current.dispose();
+        });
         // render the original component, but have the
@@ -283,2 +280,10 @@ // reaction track the observables, so that rendering
 
+    // tslint:disable-next-line: ban-types
+    function wrapInTransaction(fn) {
+        // tslint:disable-next-line: only-arrow-functions
+        return function () {
+            var args = arguments;
+            return mobx.transaction(function () { return fn.apply(null, args); });
+        };
+    }
     function useLocalStore(initializer) {
@@ -291,3 +296,3 @@ return react.useState(function () {
                     if (typeof value === "function") {
-                        store[key] = mobx.action(value.bind(store));
+                        store[key] = wrapInTransaction(value.bind(store));
                     }
@@ -294,0 +299,0 @@ });

dist/index.min.js

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react")):"function"==typeof define&&define.amd?define(["exports","mobx","react"],r):r((e=e||self).mobxReact={},e.mobx,e.React)}(this,function(e,r,n){"use strict";if(!n.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!r.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var t=function(){};var o=!1;function u(){return o}var c=function(){return(c=Object.assign||function(e){for(var r,n=1,t=arguments.length;n<t;n++)for(var o in r=arguments[n])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)};function i(e,r){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var t,o,u=n.call(e),c=[];try{for(;(void 0===r||r-- >0)&&!(t=u.next()).done;)c.push(t.value)}catch(e){o={error:e}}finally{try{t&&!t.done&&(n=u.return)&&n.call(u)}finally{if(o)throw o.error}}return c}function f(e){return e.current?r.getDependencyTree(e.current):"<unknown>"}function a(){var e=i(n.useState(0),2)[1];return n.useCallback(function(){e(function(e){return e+1})},[])}var s={};function l(e,t,o){if(void 0===t&&(t="observed"),void 0===o&&(o=s),u())return e();var c,i,l=(o.useForceUpdate||a)(),p=n.useRef(null),d=n.useRef(!1);if(p.current||(p.current=new r.Reaction("observer("+t+")",function(){d.current&&l()})),n.useDebugValue(p,f),n.useEffect(function(){return d.current=!0,function(){return p.current.dispose()}},[]),p.current.track(function(){try{c=e()}catch(e){i=e}}),i)throw p.current.dispose(),i;return c}var p={$$typeof:!0,render:!0,compare:!0,type:!0};function d(e){var r=e.children,n=e.render,t=r||n;return"function"!=typeof t?null:l(t)}function b(e,r,n,t,o){var u="children"===r?"render":"children",c="function"==typeof e[r],i="function"==typeof e[u];return c&&i?new Error("MobX Observer: Do not use children and render in the same time in`"+n):c||i?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+n+"`, expected `function`.")}d.propTypes={children:b,render:b},d.displayName="Observer",e.Observer=d,e.isUsingStaticRendering=u,e.observer=function(e,r){if(u())return e;var t,o,i,f=c({forwardRef:!1},r),a=e.displayName||e.name,s=function(r,n){return l(function(){return e(r,n)},a)};return s.displayName=a,t=f.forwardRef?n.memo(n.forwardRef(s)):n.memo(s),o=e,i=t,Object.keys(o).forEach(function(e){o.hasOwnProperty(e)&&!p[e]&&Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))}),t.displayName=a,t},e.useAsObservableSource=function(e){var t=i(n.useState(function(){return r.observable(e,{},{deep:!1})}),1)[0];return Object.assign(t,e),t},e.useComputed=function(e,t){return void 0===t&&(t=[]),n.useMemo(function(){return r.computed(e)},t).get()},e.useDisposable=function(e,r){void 0===r&&(r=[]);var o=n.useRef(null),u=n.useRef(!1);function c(r){if(u.current)return t;if(!o.current){var n=e();if("function"!=typeof n){var c=new Error("generated disposer must be a function");return console.error(c),t}o.current=n}return function(){o.current&&(o.current(),o.current=null),r&&(u.current=!0)}}return n.useEffect(function(){return c(!1)},r),c(!0)},e.useForceUpdate=a,e.useLocalStore=function(e){return n.useState(function(){var n=r.observable(e());return function(e){if(!e||"object"!=typeof e)return!1;var r=Object.getPrototypeOf(e);return!r||r===Object.prototype}(n)&&Object.keys(n).forEach(function(e){var t=n[e];"function"==typeof t&&(n[e]=r.action(t.bind(n)))}),n})[0]},e.useObservable=function(e){var t=n.useRef(null);return t.current||(t.current=r.observable(e)),t.current},e.useObserver=l,e.useStaticRendering=function(e){o=e},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react")):"function"==typeof define&&define.amd?define(["exports","mobx","react"],r):r((e=e||self).mobxReact={},e.mobx,e.React)}(this,function(e,r,n){"use strict";if(!n.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!r.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var t=function(){};var o=!1;function u(){return o}var c=function(){return(c=Object.assign||function(e){for(var r,n=1,t=arguments.length;n<t;n++)for(var o in r=arguments[n])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)};function i(e,r){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var t,o,u=n.call(e),c=[];try{for(;(void 0===r||r-- >0)&&!(t=u.next()).done;)c.push(t.value)}catch(e){o={error:e}}finally{try{t&&!t.done&&(n=u.return)&&n.call(u)}finally{if(o)throw o.error}}return c}function f(e){return e.current?r.getDependencyTree(e.current):"<unknown>"}var a=[];function s(){var e=i(n.useState(0),2)[1];return n.useCallback(function(){e(function(e){return e+1})},[])}var l={};function p(e,t,o){if(void 0===t&&(t="observed"),void 0===o&&(o=l),u())return e();var c,i,p=(o.useForceUpdate||s)(),d=n.useRef(null);if(d.current||(d.current=new r.Reaction("observer("+t+")",function(){p()})),n.useDebugValue(d,f),function(e){n.useEffect(function(){return e},a)}(function(){d.current.dispose()}),d.current.track(function(){try{c=e()}catch(e){i=e}}),i)throw d.current.dispose(),i;return c}var d={$$typeof:!0,render:!0,compare:!0,type:!0};function b(e){var r=e.children,n=e.render,t=r||n;return"function"!=typeof t?null:p(t)}function v(e,r,n,t,o){var u="children"===r?"render":"children",c="function"==typeof e[r],i="function"==typeof e[u];return c&&i?new Error("MobX Observer: Do not use children and render in the same time in`"+n):c||i?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+n+"`, expected `function`.")}b.propTypes={children:v,render:v},b.displayName="Observer",e.Observer=b,e.isUsingStaticRendering=u,e.observer=function(e,r){if(u())return e;var t,o,i,f=c({forwardRef:!1},r),a=e.displayName||e.name,s=function(r,n){return p(function(){return e(r,n)},a)};return s.displayName=a,t=f.forwardRef?n.memo(n.forwardRef(s)):n.memo(s),o=e,i=t,Object.keys(o).forEach(function(e){o.hasOwnProperty(e)&&!d[e]&&Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))}),t.displayName=a,t},e.useAsObservableSource=function(e){var t=i(n.useState(function(){return r.observable(e,{},{deep:!1})}),1)[0];return Object.assign(t,e),t},e.useComputed=function(e,t){return void 0===t&&(t=[]),n.useMemo(function(){return r.computed(e)},t).get()},e.useDisposable=function(e,r){void 0===r&&(r=[]);var o=n.useRef(null),u=n.useRef(!1);function c(r){if(u.current)return t;if(!o.current){var n=e();if("function"!=typeof n){var c=new Error("generated disposer must be a function");return console.error(c),t}o.current=n}return function(){o.current&&(o.current(),o.current=null),r&&(u.current=!0)}}return n.useEffect(function(){return c(!1)},r),c(!0)},e.useForceUpdate=s,e.useLocalStore=function(e){return n.useState(function(){var n=r.observable(e());return function(e){if(!e||"object"!=typeof e)return!1;var r=Object.getPrototypeOf(e);return!r||r===Object.prototype}(n)&&Object.keys(n).forEach(function(e){var t,o=n[e];"function"==typeof o&&(n[e]=(t=o.bind(n),function(){var e=arguments;return r.transaction(function(){return t.apply(null,e)})}))}),n})[0]},e.useObservable=function(e){var t=n.useRef(null);return t.current||(t.current=r.observable(e)),t.current},e.useObserver=p,e.useStaticRendering=function(e){o=e},Object.defineProperty(e,"__esModule",{value:!0})});

dist/index.module.js

@@ -1,2 +0,2 @@
-import { spy, observable, computed, getDependencyTree, Reaction, action } from 'mobx';
+import { spy, observable, computed, getDependencyTree, Reaction, transaction } from 'mobx';
 import { useState, useRef, useMemo, useEffect, useCallback, useDebugValue, memo, forwardRef } from 'react';
@@ -133,2 +133,6 @@
 
+var EMPTY_ARRAY = [];
+function useUnmount(fn) {
+    useEffect(function () { return fn; }, EMPTY_ARRAY);
+}
 function useForceUpdate() {
@@ -159,18 +163,11 @@ var _a = __read(useState(0), 2), setTick = _a[1];
     var reaction = useRef(null);
-    var committed = useRef(false);
     if (!reaction.current) {
-        // First render for this component. Not yet committed.
         reaction.current = new Reaction("observer(" + baseComponentName + ")", function () {
-            // Observable has changed. Only force an update if we've definitely
-            // been committed.
-            if (committed.current) {
-                forceUpdate();
-            }
+            forceUpdate();
         });
     }
     useDebugValue(reaction, printDebugValue);
-    useEffect(function () {
-        committed.current = true;
-        return function () { return reaction.current.dispose(); };
-    }, []);
+    useUnmount(function () {
+        reaction.current.dispose();
+    });
     // render the original component, but have the
@@ -280,2 +277,10 @@ // reaction track the observables, so that rendering
 
+// tslint:disable-next-line: ban-types
+function wrapInTransaction(fn) {
+    // tslint:disable-next-line: only-arrow-functions
+    return function () {
+        var args = arguments;
+        return transaction(function () { return fn.apply(null, args); });
+    };
+}
 function useLocalStore(initializer) {
@@ -288,3 +293,3 @@ return useState(function () {
                 if (typeof value === "function") {
-                    store[key] = action(value.bind(store));
+                    store[key] = wrapInTransaction(value.bind(store));
                 }
@@ -291,0 +296,0 @@ });

dist/native.js

@@ -137,2 +137,6 @@ 'use strict';
 
+var EMPTY_ARRAY = [];
+function useUnmount(fn) {
+    react.useEffect(function () { return fn; }, EMPTY_ARRAY);
+}
 function useForceUpdate() {
@@ -163,18 +167,11 @@ var _a = __read(react.useState(0), 2), setTick = _a[1];
     var reaction = react.useRef(null);
-    var committed = react.useRef(false);
     if (!reaction.current) {
-        // First render for this component. Not yet committed.
         reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
-            // Observable has changed. Only force an update if we've definitely
-            // been committed.
-            if (committed.current) {
-                forceUpdate();
-            }
+            forceUpdate();
         });
     }
     react.useDebugValue(reaction, printDebugValue);
-    react.useEffect(function () {
-        committed.current = true;
-        return function () { return reaction.current.dispose(); };
-    }, []);
+    useUnmount(function () {
+        reaction.current.dispose();
+    });
     // render the original component, but have the
@@ -284,2 +281,10 @@ // reaction track the observables, so that rendering
 
+// tslint:disable-next-line: ban-types
+function wrapInTransaction(fn) {
+    // tslint:disable-next-line: only-arrow-functions
+    return function () {
+        var args = arguments;
+        return mobx.transaction(function () { return fn.apply(null, args); });
+    };
+}
 function useLocalStore(initializer) {
@@ -292,3 +297,3 @@ return react.useState(function () {
                 if (typeof value === "function") {
-                    store[key] = mobx.action(value.bind(store));
+                    store[key] = wrapInTransaction(value.bind(store));
                 }
@@ -295,0 +300,0 @@ });

dist/utils.d.ts

@@ -0,2 +1,3 @@
+export declare function useUnmount(fn: () => void): void;
 export declare function useForceUpdate(): () => void;
 export declare function isPlainObject(value: any): boolean;

package.json

 {
   "name": "mobx-react-lite",
-  "version": "1.3.0",
+  "version": "1.3.1-0",
   "description": "Lightweight React bindings for MobX based on React 16.8 and Hooks",
@@ -36,3 +36,3 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@types/jest": "24.0.11",
+    "@types/jest": "24.0.12",
     "@types/node": "11.13.8",
@@ -44,3 +44,3 @@ "@types/react": "16.8.8",
     "jest": "24.7.1",
-    "jest-dom": "3.1.3",
+    "jest-dom": "3.1.4",
     "jest-environment-jsdom": "24.7.1",
@@ -47,0 +47,0 @@ "jest-mock-console": "0.4.2",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

296485

increased by0.14%

Lines of code

1537

increased by1.72%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes