use-sync-external-store - npm Package Compare versions

Comparing version 0.0.0-experimental-1314299c7-20210901 to 0.0.0-experimental-1e247ff89-20211012

cjs/use-sync-external-store-extra.development.js

@@ -32,7 +32,23 @@ /** @license React vundefined
 
-var useMemo = React.useMemo,
+var useRef = React.useRef,
+    useEffect = React.useEffect,
+    useMemo = React.useMemo,
     useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
 
-function useSyncExternalStoreExtra(subscribe, getSnapshot, selector, isEqual) {
-  var getSnapshotWithMemoizedSelector = useMemo(function () {
+function useSyncExternalStoreExtra(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+  // Use this to track the rendered snapshot.
+  var instRef = useRef(null);
+  var inst;
+
+  if (instRef.current === null) {
+    inst = {
+      hasValue: false,
+      value: null
+    };
+    instRef.current = inst;
+  } else {
+    inst = instRef.current;
+  }
+
+  var _useMemo = useMemo(function () {
     // Track the memoized state using closure variables that are local to this
@@ -45,5 +61,4 @@ // memoized instance of a getSnapshot function. Intentionally not using a
     var memoizedSelection;
-    return function () {
-      var nextSnapshot = getSnapshot();
 
+    var memoizedSelector = function (nextSnapshot) {
       if (!hasMemo) {
@@ -56,2 +71,16 @@ // The first time the hook is called, there is no memoized result.
 
+        if (isEqual !== undefined) {
+          // Even if the selector has changed, the currently rendered selection
+          // may be equal to the new selection. We should attempt to reuse the
+          // current value if possible, to preserve downstream memoizations.
+          if (inst.hasValue) {
+            var currentSelection = inst.value;
+
+            if (isEqual(currentSelection, _nextSelection)) {
+              memoizedSelection = currentSelection;
+              return currentSelection;
+            }
+          }
+        }
+
         memoizedSelection = _nextSelection;
@@ -62,2 +91,3 @@ return _nextSelection;
 
+      // We may be able to reuse the previous invocation's result.
       var prevSnapshot = memoizedSnapshot;
@@ -72,3 +102,3 @@ var prevSelection = memoizedSelection;
 
-      memoizedSnapshot = nextSnapshot;
+      // The snapshot has changed, so we need to compute a new selection.
       var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
@@ -79,2 +109,6 @@ // has changed. If it hasn't, return the previous selection. That signals
 
+      // If a custom isEqual function is provided, use that to check if the data
+      // has changed. If it hasn't, return the previous selection. That signals
+      // to React that the selections are conceptually equal, and we can bail
+      // out of rendering.
       if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
@@ -84,7 +118,28 @@ return prevSelection;
 
+      memoizedSnapshot = nextSnapshot;
       memoizedSelection = nextSelection;
       return nextSelection;
+    }; // Assigning this to a constant so that Flow knows it can't change.
+
+
+    // Assigning this to a constant so that Flow knows it can't change.
+    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+
+    var getSnapshotWithSelector = function () {
+      return memoizedSelector(getSnapshot());
     };
-  }, [getSnapshot, selector, isEqual]);
-  var value = useSyncExternalStore.useSyncExternalStore(subscribe, getSnapshotWithMemoizedSelector);
+
+    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
+      return memoizedSelector(maybeGetServerSnapshot());
+    };
+    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
+      getSelection = _useMemo[0],
+      getServerSelection = _useMemo[1];
+
+  var value = useSyncExternalStore.useSyncExternalStore(subscribe, getSelection, getServerSelection);
+  useEffect(function () {
+    inst.hasValue = true;
+    inst.value = value;
+  }, [value]);
   useDebugValue(value);
@@ -91,0 +146,0 @@ return value;

cjs/use-sync-external-store-extra.production.min.js

@@ -9,2 +9,4 @@ /** @license React vundefined
  */
-'use strict';var k=require("react"),l=require("use-sync-external-store");function m(a,c){return a===c&&(0!==a||1/a===1/c)||a!==a&&c!==c}var n="function"===typeof Object.is?Object.is:m,p=k.useMemo,q=k.useDebugValue;exports.useSyncExternalStoreExtra=function(a,c,e,f){var r=p(function(){var a=!1,g,h;return function(){var b=c();if(!a){a=!0;g=b;var d=e(b);return h=d}d=h;if(n(g,b))return d;g=b;b=e(b);return void 0!==f&&f(d,b)?d:h=b}},[c,e,f]);a=l.useSyncExternalStore(a,r);q(a);return a};
+'use strict';var h=require("react"),n=require("use-sync-external-store");function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=h.useRef,t=h.useEffect,u=h.useMemo,v=h.useDebugValue;
+exports.useSyncExternalStoreExtra=function(a,b,e,l,g){var c=r(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f}else f=c.current;c=u(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return[function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=n.useSyncExternalStore(a,
+c[0],c[1]);t(function(){f.hasValue=!0;f.value=d},[d]);v(d);return d};

cjs/use-sync-external-store.development.js

@@ -18,2 +18,4 @@ /** @license React vundefined
 
+var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
+
 var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -43,6 +45,7 @@
       args = args.concat([stack]);
-    }
+    } // eslint-disable-next-line react-internal/safe-string-coercion
 
+
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return String(item);
     }); // Careful: RN currently depends on this prefix
@@ -74,9 +77,5 @@
     useLayoutEffect = React.useLayoutEffect,
-    useDebugValue = React.useDebugValue,
-    builtInAPI = React.useSyncExternalStore; // Prefer the built-in API, if it exists. If it doesn't exist, then we assume
-// we're in version 16 or 17, so rendering is always synchronous. The shim
-// does not support concurrent rendering, only the built-in API.
-
-var useSyncExternalStore = builtInAPI !== undefined ? builtInAPI : useSyncExternalStore_shim;
-var didWarnOld18Alpha = false; // Disclaimer: This shim breaks many of the rules of React, and only works
+    useDebugValue = React.useDebugValue;
+var didWarnOld18Alpha = false;
+var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
 // because of a very particular set of implementation details and assumptions
@@ -92,3 +91,7 @@ // -- change any one of them and it will break. The most important assumption
 
-function useSyncExternalStore_shim(subscribe, getSnapshot) {
+function useSyncExternalStore(subscribe, getSnapshot, // Note: The client shim does not use getServerSnapshot, because pre-18
+// versions of React do not expose a way to check if we're hydrating. So
+// users of the shim will need to track that themselves and return the
+// correct value from `getSnapshot`.
+getServerSnapshot) {
   {
@@ -108,3 +111,13 @@ if (!didWarnOld18Alpha) {
 
-  var value = getSnapshot(); // Because updates are synchronous, we don't queue them. Instead we force a
+  var value = getSnapshot();
+
+  {
+    if (!didWarnUncachedGetSnapshot) {
+      if (value !== getSnapshot()) {
+        error('The result of getSnapshot should be cached to avoid an infinite loop');
+
+        didWarnUncachedGetSnapshot = true;
+      }
+    }
+  } // Because updates are synchronous, we don't queue them. Instead we force a
   // re-render whenever the subscribed state changes by updating an some
@@ -124,2 +137,3 @@ // arbitrary useState hook. Then, during render, we call getSnapshot to read
 
+
   var _useState = useState({
@@ -135,3 +149,2 @@ inst: {
   // happens on subscribe.
-  // TODO: Circumvent SSR warning
 
@@ -197,4 +210,11 @@
 
-exports.useSyncExternalStore = useSyncExternalStore;
+function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
+  return getSnapshot();
+}
+
+var builtInAPI = React.unstable_useSyncExternalStore;
+var useSyncExternalStore$2 = builtInAPI !== undefined ? builtInAPI : canUseDOM ? useSyncExternalStore : useSyncExternalStore$1;
+
+exports.useSyncExternalStore = useSyncExternalStore$2;
   })();
 }

cjs/use-sync-external-store.production.min.js

@@ -9,3 +9,3 @@ /** @license React vundefined
  */
-'use strict';var e=require("react");function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue,q=e.useSyncExternalStore;function r(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;t(c)&&g({inst:c})},[a,d,b]);m(function(){t(c)&&g({inst:c});return a(function(){t(c)&&g({inst:c})})},[a]);p(d);return d}
-function t(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}exports.useSyncExternalStore=void 0!==q?q:r;
+'use strict';var e=require("react"),h=!("undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement);function k(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var l="function"===typeof Object.is?Object.is:k,m=e.useState,n=e.useEffect,p=e.useLayoutEffect,q=e.useDebugValue;
+function r(a,b){var d=b(),f=m({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];p(function(){c.value=d;c.getSnapshot=b;t(c)&&g({inst:c})},[a,d,b]);n(function(){t(c)&&g({inst:c});return a(function(){t(c)&&g({inst:c})})},[a]);q(d);return d}function t(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!l(a,d)}catch(f){return!0}}function u(a,b){return b()}var v=e.unstable_useSyncExternalStore;exports.useSyncExternalStore=void 0!==v?v:h?r:u;

package.json

 {
   "name": "use-sync-external-store",
   "description": "Backwards compatible shim for React's useSyncExternalStore. Works with any React that supports hooks.",
-  "version": "0.0.0-experimental-1314299c7-20210901",
+  "version": "0.0.0-experimental-1e247ff89-20211012",
   "repository": {
@@ -16,2 +16,3 @@ "type": "git",
     "extra.js",
+    "index.native.js",
     "cjs/"
@@ -21,4 +22,4 @@ ],
   "peerDependencies": {
-    "react": "0.0.0-experimental-1314299c7-20210901"
+    "react": "0.0.0-experimental-1e247ff89-20211012"
   }
 }

New alerts

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 2 instances in 1 package

Fixed alerts

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 2 instances in 1 package

Improved metrics

Total package byte prevSize

25238

increased by81.39%

Number of package files

12

increased by33.33%

Lines of code

516

increased by94.72%

Worsened metrics

Number of low supply chain risk alerts

6

increased by50%

No dependency changes