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

Comparing version 0.0.0-experimental-50263d327-20210914 to 0.0.0-experimental-5b57bc6e3-20210921

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

@@ -37,3 +37,3 @@ /** @license React vundefined
 
-function useSyncExternalStoreExtra(subscribe, getSnapshot, selector, isEqual) {
+function useSyncExternalStoreExtra(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
   // Use this to track the rendered snapshot.
@@ -53,3 +53,3 @@ var instRef = useRef(null);
 
-  var getSnapshotWithMemoizedSelector = useMemo(function () {
+  var _useMemo = useMemo(function () {
     // Track the memoized state using closure variables that are local to this
@@ -62,5 +62,4 @@ // memoized instance of a getSnapshot function. Intentionally not using a
     var memoizedSelection;
-    return function () {
-      var nextSnapshot = getSnapshot();
 
+    var memoizedSelector = function (nextSnapshot) {
       if (!hasMemo) {
@@ -92,2 +91,3 @@ // The first time the hook is called, there is no memoized result.
 
+      // We may be able to reuse the previous invocation's result.
       var prevSnapshot = memoizedSnapshot;
@@ -102,2 +102,3 @@ var prevSelection = memoizedSelection;
 
+      // The snapshot has changed, so we need to compute a new selection.
       memoizedSnapshot = nextSnapshot;
@@ -109,2 +110,6 @@ var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
 
+      // 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)) {
@@ -116,5 +121,21 @@ return prevSelection;
       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 () {
@@ -121,0 +142,0 @@ inst.hasValue = true;

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

@@ -9,3 +9,4 @@ /** @license React vundefined
  */
-'use strict';var k=require("react"),m=require("use-sync-external-store");function n(b,e){return b===e&&(0!==b||1/b===1/e)||b!==b&&e!==e}var p="function"===typeof Object.is?Object.is:n,q=k.useRef,r=k.useEffect,t=k.useMemo,u=k.useDebugValue;
-exports.useSyncExternalStoreExtra=function(b,e,l,h){var c=q(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f}else f=c.current;c=t(function(){var b=!1,c,d;return function(){var a=e();if(!b){b=!0;c=a;var g=l(a);return void 0!==h&&f.hasValue&&(a=f.value,h(a,g))?d=a:d=g}g=d;if(p(c,a))return g;c=a;a=l(a);return void 0!==h&&h(g,a)?g:d=a}},[e,l,h]);var d=m.useSyncExternalStore(b,c);r(function(){f.hasValue=!0;f.value=d},[d]);u(d);return d};
+'use strict';var h=require("react"),p=require("use-sync-external-store");function q(a,e){return a===e&&(0!==a||1/a===1/e)||a!==a&&e!==e}var r="function"===typeof Object.is?Object.is:q,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
+exports.useSyncExternalStoreExtra=function(a,e,l,m,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f}else f=c.current;c=v(function(){function a(b){if(!c){c=!0;d=b;var a=m(b);return void 0!==g&&f.hasValue&&(b=f.value,g(b,a))?k=b:k=a}a=k;if(r(d,b))return a;d=b;b=m(b);return void 0!==g&&g(a,b)?a:k=b}var c=!1,d,k,n=void 0===l?null:l;return[function(){return a(e())},null===n?void 0:function(){return a(n())}]},[e,l,m,g]);var d=p.useSyncExternalStore(a,c[0],c[1]);u(function(){f.hasValue=
+!0;f.value=d},[d]);w(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;
@@ -78,3 +80,3 @@
 
-var useSyncExternalStore = builtInAPI !== undefined ? builtInAPI : useSyncExternalStore_shim;
+var useSyncExternalStore = builtInAPI !== undefined ? builtInAPI : useSyncExternalStore_client;
 var didWarnOld18Alpha = false;
@@ -92,3 +94,7 @@ var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
 
-function useSyncExternalStore_shim(subscribe, getSnapshot) {
+function useSyncExternalStore_client(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) {
   {
@@ -144,3 +150,2 @@ if (!didWarnOld18Alpha) {
   // happens on subscribe.
-  // TODO: Circumvent SSR warning
 
@@ -206,4 +211,18 @@
 
-exports.useSyncExternalStore = useSyncExternalStore;
+function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
+  if (getServerSnapshot === undefined) {
+    {
+      {
+        throw Error( "Missing getServerSnapshot, which is required for server-rendered content." );
+      }
+    }
+  }
+
+  return getServerSnapshot();
+}
+
+var useSyncExternalStore$2 = canUseDOM ? useSyncExternalStore : useSyncExternalStore$1;
+
+exports.useSyncExternalStore = useSyncExternalStore$2;
   })();
 }

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

@@ -9,3 +9,5 @@ /** @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.unstable_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");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.unstable_useSyncExternalStore,t=void 0!==q?q:r;
+function r(a,b){var c=b(),f=l({inst:{value:c,getSnapshot:b}}),d=f[0].inst,g=f[1];n(function(){d.value=c;d.getSnapshot=b;u(d)&&g({inst:d})},[a,c,b]);m(function(){u(d)&&g({inst:d});return a(function(){u(d)&&g({inst:d})})},[a]);p(c);return c}function u(a){var b=a.getSnapshot;a=a.value;try{var c=b();return!k(a,c)}catch(f){return!0}}
+function v(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return"Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function w(a,b,c){if(void 0===c)throw Error(v(408));return c()}
+exports.useSyncExternalStore="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?t:w;

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-50263d327-20210914",
+  "version": "0.0.0-experimental-5b57bc6e3-20210921",
   "repository": {
@@ -16,2 +16,3 @@ "type": "git",
     "extra.js",
+    "index.native.js",
     "cjs/"
@@ -21,4 +22,4 @@ ],
   "peerDependencies": {
-    "react": "0.0.0-experimental-50263d327-20210914"
+    "react": "0.0.0-experimental-5b57bc6e3-20210921"
   }
 }

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

Fixed 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

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

26312

increased by71.28%

Number of package files

12

increased by33.33%

Lines of code

531

increased by74.1%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

5

increased by25%

Number of low supply chain risk alerts

6

increased by50%

No dependency changes