mobx-react-lite - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0-beta.0

batchingForReactDom.js

@@ -1,2 +0,3 @@
-const ReactDOM = require("react-dom")
-require("./dist").observerBatching(ReactDOM.unstable_batchedUpdates)
+if ("production" !== process.env.NODE_ENV) {
+    console.warn("[mobx-react-lite] calling batchingForReactDom is no longer needed")
+}

batchingForReactNative.js

@@ -1,2 +0,3 @@
-const ReactNative = require("react-native")
-require("./dist").observerBatching(ReactNative.unstable_batchedUpdates)
+if ("production" !== process.env.NODE_ENV) {
+    console.warn("[mobx-react-lite] calling batchingForReactNative is no longer needed")
+}

batchingOptOut.js

@@ -1,1 +0,3 @@
-require("./dist").observerBatchingOptOut()
+if ("production" !== process.env.NODE_ENV) {
+    console.warn("[mobx-react-lite] calling batchingOptOut is no longer needed")
+}

dist/index.d.ts

@@ -9,3 +9,2 @@ import "./assertEnvironment";
 export { useLocalStore } from "./useLocalStore";
-export { observerBatching, observerBatchingOptOut, isObserverBatched } from "./observerBatching";
 export { useQueuedForceUpdate, useQueuedForceUpdateBlock } from "./useQueuedForceUpdate";

dist/mobxreactlite.umd.development.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('mobx'), require('react')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'mobx', 'react'], factory) :
-    (global = global || self, factory(global.mobxReactLite = {}, global.mobx, global.React));
-}(this, (function (exports, mobx, React) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('mobx'), require('react'), require('react-dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'mobx', 'react', 'react-dom'], factory) :
+    (global = global || self, factory(global.mobxReactLite = {}, global.mobx, global.React, global.ReactDOM));
+}(this, (function (exports, mobx, React, reactDom) { 'use strict';
 
@@ -17,2 +17,19 @@ var React__default = 'default' in React ? React['default'] : React;
 
+    function defaulNoopBatch(callback) {
+      callback();
+    }
+    function setBatch(reactionScheduler) {
+      if (!reactionScheduler) {
+        reactionScheduler = defaulNoopBatch;
+
+        {
+          console.warn("[MobX] Failed to get unstable_batched updates from react-dom / react-native");
+        }
+      }
+
+      mobx.configure({
+        reactionScheduler: reactionScheduler
+      });
+    }
+
     var globalIsUsingStaticRendering = false;
@@ -44,67 +61,2 @@ function useStaticRendering(enable) {
 
-    function useForceUpdate() {
-      var _useState = React.useState(0),
-          setTick = _useState[1];
-
-      var update = React.useCallback(function () {
-        setTick(function (tick) {
-          return tick + 1;
-        });
-      }, []);
-      return update;
-    }
-    function isPlainObject(value) {
-      if (!value || typeof value !== "object") {
-        return false;
-      }
-
-      var proto = Object.getPrototypeOf(value);
-      return !proto || proto === Object.prototype;
-    }
-    function getSymbol(name) {
-      if (typeof Symbol === "function") {
-        return Symbol.for(name);
-      }
-
-      return "__$mobx-react " + name + "__";
-    }
-    var mockGlobal = {};
-    function getGlobal() {
-      if (typeof window !== "undefined") {
-        return window;
-      }
-
-      if (typeof global !== "undefined") {
-        return global;
-      }
-
-      if (typeof self !== "undefined") {
-        return self;
-      }
-
-      return mockGlobal;
-    }
-
-    var observerBatchingConfiguredSymbol =
-    /*#__PURE__*/
-    getSymbol("observerBatching");
-    var observerBatching = function observerBatching(reactionScheduler) {
-      if (typeof reactionScheduler === "function") {
-        mobx.configure({
-          reactionScheduler: reactionScheduler
-        });
-      }
-
-      getGlobal()[observerBatchingConfiguredSymbol] = true;
-    };
-    var observerBatchingOptOut = function observerBatchingOptOut() {
-      mobx.configure({
-        reactionScheduler: undefined
-      });
-      getGlobal()[observerBatchingConfiguredSymbol] = true;
-    };
-    var isObserverBatched = function isObserverBatched() {
-      return getGlobal()[observerBatchingConfiguredSymbol];
-    };
-
     function printDebugValue(v) {
@@ -189,2 +141,22 @@ return mobx.getDependencyTree(v);
 
+    function useForceUpdate() {
+      var _useState = React.useState(0),
+          setTick = _useState[1];
+
+      var update = React.useCallback(function () {
+        setTick(function (tick) {
+          return tick + 1;
+        });
+      }, []);
+      return update;
+    }
+    function isPlainObject(value) {
+      if (!value || typeof value !== "object") {
+        return false;
+      }
+
+      var proto = Object.getPrototypeOf(value);
+      return !proto || proto === Object.prototype;
+    }
+
     var insideRender = false;
@@ -232,3 +204,2 @@ var forceUpdateQueue = [];
 
-    var warnedAboutBatching = false;
     function useObserver(fn, baseComponentName, options) {
@@ -247,7 +218,2 @@ if (baseComponentName === void 0) {
 
-      if ( !warnedAboutBatching && !isObserverBatched()) {
-        console.warn("[MobX] You haven't configured observer batching which might result in unexpected behavior in some cases. See more at https://github.com/mobxjs/mobx-react-lite/#observer-batching");
-        warnedAboutBatching = true;
-      }
-
       var wantedForceUpdateHook = options.useForceUpdate || useForceUpdate;
@@ -504,8 +470,7 @@ var forceUpdate = wantedForceUpdateHook();
 
+    setBatch(reactDom.unstable_batchedUpdates);
+
     exports.Observer = ObserverComponent;
-    exports.isObserverBatched = isObserverBatched;
     exports.isUsingStaticRendering = isUsingStaticRendering;
     exports.observer = observer;
-    exports.observerBatching = observerBatching;
-    exports.observerBatchingOptOut = observerBatchingOptOut;
     exports.useAsObservableSource = useAsObservableSource;
@@ -512,0 +477,0 @@ exports.useForceUpdate = useForceUpdate;

dist/mobxreactlite.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("mobx"),require("react")):"function"==typeof define&&define.amd?define(["exports","mobx","react"],n):n((e=e||self).mobxReactLite={},e.mobx,e.React)}(this,(function(e,n,r){"use strict";var t="default"in r?r.default:r;if(!r.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!n.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var o=!1;function u(){return o}function i(){return(i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function c(){var e=r.useState(0)[1];return r.useCallback((function(){e((function(e){return e+1}))}),[])}function f(e){return"function"==typeof Symbol?Symbol.for(e):"__$mobx-react "+e+"__"}var a={};function s(){return"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:a}var d=f("observerBatching");function l(e){return n.getDependencyTree(e)}var p,v=new Set;function b(){void 0===p&&(p=setTimeout(y,1e4))}function y(){p=void 0;var e=Date.now();v.forEach((function(n){var r=n.current;r&&e>=r.cleanAt&&(r.reaction.dispose(),n.current=null,v.delete(n))})),v.size>0&&b()}var h=!1,m=[];function w(e){return function(){h?m.push(e):e()}}function O(e){h=!0,m=[];try{var n=e();h=!1;var r=m.length>0?m:void 0;return t.useLayoutEffect((function(){r&&r.forEach((function(e){return e()}))}),[r]),n}finally{h=!1}}var g={};function S(e){return"observer"+e}function j(e,r,o){if(void 0===r&&(r="observed"),void 0===o&&(o=g),u())return e();var i=w((o.useForceUpdate||c)()),f=t.useRef(null);if(!f.current){var a=new n.Reaction(S(r),(function(){s.mounted?i():(a.dispose(),f.current=null)})),s=function(e){return{cleanAt:Date.now()+1e4,reaction:e}}(a);f.current=s,v.add(f),b()}var d=f.current.reaction;return t.useDebugValue(d,l),t.useEffect((function(){return v.delete(f),f.current?f.current.mounted=!0:(f.current={reaction:new n.Reaction(S(r),(function(){i()})),cleanAt:Infinity},i()),function(){f.current.reaction.dispose(),f.current=null}}),[]),O((function(){var n,r;if(d.track((function(){try{n=e()}catch(e){r=e}})),r)throw r;return n}))}var x={$$typeof:!0,render:!0,compare:!0,type:!0};function R(e){var n=e.children||e.render;return"function"!=typeof n?null:j(n)}function E(e,n,r,t,o){var u="function"==typeof e[n],i="function"==typeof e["children"===n?"render":"children"];return u&&i?new Error("MobX Observer: Do not use children and render in the same time in`"+r):u||i?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[n]+"` supplied to `"+r+"`, expected `function`.")}function A(e,r){if(!r||void 0!==e){var o=t.useState((function(){return n.observable(e,{},{deep:!1})}))[0];return n.runInAction((function(){Object.assign(o,e)})),o}}R.propTypes={children:E,render:E},R.displayName="Observer",e.Observer=R,e.isObserverBatched=function(){return s()[d]},e.isUsingStaticRendering=u,e.observer=function(e,n){if(u())return e;var t,o,c,f=i({forwardRef:!1},n),a=e.displayName||e.name,s=function(n,r){return j((function(){return e(n,r)}),a)};return s.displayName=a,t=r.memo(f.forwardRef?r.forwardRef(s):s),o=e,c=t,Object.keys(o).forEach((function(e){x[e]||Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(o,e))})),t.displayName=a,t},e.observerBatching=function(e){"function"==typeof e&&n.configure({reactionScheduler:e}),s()[d]=!0},e.observerBatchingOptOut=function(){n.configure({reactionScheduler:void 0}),s()[d]=!0},e.useAsObservableSource=function(e){return A(e,!1)},e.useForceUpdate=c,e.useLocalStore=function(e,r){var o=A(r,!0);return t.useState((function(){var r=n.observable(e(o));return function(e){if(!e||"object"!=typeof e)return!1;var n=Object.getPrototypeOf(e);return!n||n===Object.prototype}(r)&&n.runInAction((function(){Object.keys(r).forEach((function(e){var t,o,u=r[e];"function"==typeof u&&(r[e]=(t=u,o=r,function(){for(var e=arguments.length,r=new Array(e),u=0;u<e;u++)r[u]=arguments[u];return n.transaction((function(){return t.apply(o,r)}))}))}))})),r}))[0]},e.useObserver=j,e.useQueuedForceUpdate=w,e.useQueuedForceUpdateBlock=O,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"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","mobx","react","react-dom"],r):r((e=e||self).mobxReactLite={},e.mobx,e.React,e.ReactDOM)}(this,(function(e,r,n,t){"use strict";var o="default"in n?n.default:n;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 u=!1;function c(){return u}function i(){return(i=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function a(e){return r.getDependencyTree(e)}var f,s=new Set;function d(){void 0===f&&(f=setTimeout(l,1e4))}function l(){f=void 0;var e=Date.now();s.forEach((function(r){var n=r.current;n&&e>=n.cleanAt&&(n.reaction.dispose(),r.current=null,s.delete(r))})),s.size>0&&d()}function p(){var e=n.useState(0)[1];return n.useCallback((function(){e((function(e){return e+1}))}),[])}var v=!1,b=[];function y(e){return function(){v?b.push(e):e()}}function h(e){v=!0,b=[];try{var r=e();v=!1;var n=b.length>0?b:void 0;return o.useLayoutEffect((function(){n&&n.forEach((function(e){return e()}))}),[n]),r}finally{v=!1}}var m={};function w(e){return"observer"+e}function O(e,n,t){if(void 0===n&&(n="observed"),void 0===t&&(t=m),c())return e();var u=y((t.useForceUpdate||p)()),i=o.useRef(null);if(!i.current){var f=new r.Reaction(w(n),(function(){l.mounted?u():(f.dispose(),i.current=null)})),l=function(e){return{cleanAt:Date.now()+1e4,reaction:e}}(f);i.current=l,s.add(i),d()}var v=i.current.reaction;return o.useDebugValue(v,a),o.useEffect((function(){return s.delete(i),i.current?i.current.mounted=!0:(i.current={reaction:new r.Reaction(w(n),(function(){u()})),cleanAt:Infinity},u()),function(){i.current.reaction.dispose(),i.current=null}}),[]),h((function(){var r,n;if(v.track((function(){try{r=e()}catch(e){n=e}})),n)throw n;return r}))}var g,j={$$typeof:!0,render:!0,compare:!0,type:!0};function R(e){var r=e.children||e.render;return"function"!=typeof r?null:O(r)}function x(e,r,n,t,o){var u="function"==typeof e[r],c="function"==typeof e["children"===r?"render":"children"];return u&&c?new Error("MobX Observer: Do not use children and render in the same time in`"+n):u||c?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+n+"`, expected `function`.")}function E(e,n){if(!n||void 0!==e){var t=o.useState((function(){return r.observable(e,{},{deep:!1})}))[0];return r.runInAction((function(){Object.assign(t,e)})),t}}R.propTypes={children:x,render:x},R.displayName="Observer",(g=t.unstable_batchedUpdates)||(g=function(e){e()}),r.configure({reactionScheduler:g}),e.Observer=R,e.isUsingStaticRendering=c,e.observer=function(e,r){if(c())return e;var t,o,u,a=i({forwardRef:!1},r),f=e.displayName||e.name,s=function(r,n){return O((function(){return e(r,n)}),f)};return s.displayName=f,t=n.memo(a.forwardRef?n.forwardRef(s):s),o=e,u=t,Object.keys(o).forEach((function(e){j[e]||Object.defineProperty(u,e,Object.getOwnPropertyDescriptor(o,e))})),t.displayName=f,t},e.useAsObservableSource=function(e){return E(e,!1)},e.useForceUpdate=p,e.useLocalStore=function(e,n){var t=E(n,!0);return o.useState((function(){var n=r.observable(e(t));return function(e){if(!e||"object"!=typeof e)return!1;var r=Object.getPrototypeOf(e);return!r||r===Object.prototype}(n)&&r.runInAction((function(){Object.keys(n).forEach((function(e){var t,o,u=n[e];"function"==typeof u&&(n[e]=(t=u,o=n,function(){for(var e=arguments.length,n=new Array(e),u=0;u<e;u++)n[u]=arguments[u];return r.transaction((function(){return t.apply(o,n)}))}))}))})),n}))[0]},e.useObserver=O,e.useQueuedForceUpdate=y,e.useQueuedForceUpdateBlock=h,e.useStaticRendering=function(e){u=e},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mobxreactlite.umd.production.min.js.map

dist/observerBatching.d.ts

@@ -1,9 +0,2 @@
-interface IBatchedUpdates {
-    batchedUpdates<A, B>(callback: (a: A, b: B) => any, a: A, b: B): void;
-    batchedUpdates<A>(callback: (a: A) => any, a: A): void;
-    batchedUpdates(callback: () => any): void;
-}
-export declare const observerBatching: (reactionScheduler?: IBatchedUpdates | undefined) => void;
-export declare const observerBatchingOptOut: () => void;
-export declare const isObserverBatched: () => any;
-export {};
+export declare function defaulNoopBatch(callback: () => void): void;
+export declare function setBatch(reactionScheduler: any): void;

package.json

 {
   "name": "mobx-react-lite",
-  "version": "2.1.0",
+  "version": "2.2.0-beta.0",
   "description": "Lightweight React bindings for MobX based on React 16.8+ and Hooks",
-  "main": "dist/index.js",
-  "jsnext:main": "dist/mobxreactlite.esm.js",
-  "module": "dist/mobxreactlite.esm.js",
+  "main": "lib/index.js",
   "unpkg": "dist/mobxreactlite.umd.production.min.js",
-  "jsdelivr": "dist/mobxreactlite.umd.production.min.js",
-  "react-native": "dist/mobxreactlite.esm.js",
-  "typings": "dist/index.d.ts",
+  "module": "es/index.js",
   "types": "dist/index.d.ts",
@@ -21,3 +17,5 @@ "sideEffects": [
   "files": [
-    "dist/*",
+    "dist/",
+    "lib/",
+    "es/",
     "batching*"
@@ -33,6 +31,7 @@ ],
     "coverage": "jest --coverage",
-    "prebuild": "rimraf dist",
-    "build": "yarn bundle",
-    "bundle": "tsdx build --name mobxReactLite --format=cjs,esm,umd --tsconfig tsconfig.build.json",
-    "dedup": "npx yarn-deduplicate -s fewer yarn.lock",
+    "prebuild": "rimraf dist lib es",
+    "build": "yarn build:commonjs && yarn build:es && yarn build:umd",
+    "build:commonjs": "tsc --project tsconfig.build.cjs.json",
+    "build:es": "tsc --project tsconfig.build.es.json",
+    "build:umd": "tsdx build --name mobxReactLite --format=umd --tsconfig tsconfig.build.es.json",
     "release": "node publish.js"
@@ -50,2 +49,10 @@ },
   },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
   "devDependencies": {
@@ -106,2 +113,2 @@ "@babel/core": "7.8.4",
   "dependencies": {}
-}
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

55

increased by83.33%

Lines of code

1591

increased by10.95%

Worsened metrics

Total package byte prevSize

135171

decreased by-39.58%

Number of low supply chain risk alerts

8

increased by60%

No dependency changes