use-sync-external-store
Advanced tools
Comparing version 0.0.0-experimental-7d38e4fd8-20210930 to 0.0.0-experimental-7d9e17a98-20220511
@@ -1,2 +0,3 @@ | ||
/** @license React vundefined | ||
/** | ||
* @license React | ||
* use-sync-external-store.development.js | ||
@@ -14,7 +15,14 @@ * | ||
(function() { | ||
'use strict'; | ||
var React = require('react'); | ||
'use strict'; | ||
var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined'); | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
if ( | ||
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === | ||
'function' | ||
) { | ||
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); | ||
} | ||
var React = require('react'); | ||
@@ -60,155 +68,19 @@ var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; | ||
/** | ||
* inlined Object.is polyfill to avoid requiring consumers ship their own | ||
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is | ||
*/ | ||
function is(x, y) { | ||
return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare | ||
; | ||
} | ||
var useSyncExternalStore = React.useSyncExternalStore; | ||
var objectIs = typeof Object.is === 'function' ? Object.is : is; | ||
// dispatch for CommonJS interop named imports. | ||
var useState = React.useState, | ||
useEffect = React.useEffect, | ||
useLayoutEffect = React.useLayoutEffect, | ||
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 | ||
// -- change any one of them and it will break. The most important assumption | ||
// is that updates are always synchronous, because concurrent rendering is | ||
// only available in versions of React that also have a built-in | ||
// useSyncExternalStore API. And we only use this shim when the built-in API | ||
// does not exist. | ||
// | ||
// Do not assume that the clever hacks used by this hook also work in general. | ||
// The point of this shim is to replace the need for hacks by other libraries. | ||
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) { | ||
{ | ||
if (!didWarnOld18Alpha) { | ||
if (React.startTransition !== undefined) { | ||
didWarnOld18Alpha = true; | ||
error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.'); | ||
} | ||
} | ||
} // Read the current snapshot from the store on every render. Again, this | ||
// breaks the rules of React, and only works here because of specific | ||
// implementation details, most importantly that updates are | ||
// always synchronous. | ||
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 | ||
// arbitrary useState hook. Then, during render, we call getSnapshot to read | ||
// the current value. | ||
// | ||
// Because we don't actually use the state returned by the useState hook, we | ||
// can save a bit of memory by storing other stuff in that slot. | ||
// | ||
// To implement the early bailout, we need to track some things on a mutable | ||
// object. Usually, we would put that in a useRef hook, but we can stash it in | ||
// our useState hook instead. | ||
// | ||
// To force a re-render, we call forceUpdate({inst}). That works because the | ||
// new object always fails an equality check. | ||
var _useState = useState({ | ||
inst: { | ||
value: value, | ||
getSnapshot: getSnapshot | ||
} | ||
}), | ||
inst = _useState[0].inst, | ||
forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated | ||
// in the layout phase so we can access it during the tearing check that | ||
// happens on subscribe. | ||
useLayoutEffect(function () { | ||
inst.value = value; | ||
inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the | ||
// commit phase if there was an interleaved mutation. In concurrent mode | ||
// this can happen all the time, but even in synchronous mode, an earlier | ||
// effect may have mutated the store. | ||
if (checkIfSnapshotChanged(inst)) { | ||
// Force a re-render. | ||
forceUpdate({ | ||
inst: inst | ||
}); | ||
} | ||
}, [subscribe, value, getSnapshot]); | ||
useEffect(function () { | ||
// Check for changes right before subscribing. Subsequent changes will be | ||
// detected in the subscription handler. | ||
if (checkIfSnapshotChanged(inst)) { | ||
// Force a re-render. | ||
forceUpdate({ | ||
inst: inst | ||
}); | ||
} | ||
var handleStoreChange = function () { | ||
// TODO: Because there is no cross-renderer API for batching updates, it's | ||
// up to the consumer of this library to wrap their subscription event | ||
// with unstable_batchedUpdates. Should we try to detect when this isn't | ||
// the case and print a warning in development? | ||
// The store changed. Check if the snapshot changed since the last time we | ||
// read from the store. | ||
if (checkIfSnapshotChanged(inst)) { | ||
// Force a re-render. | ||
forceUpdate({ | ||
inst: inst | ||
}); | ||
} | ||
}; // Subscribe to the store and return a clean-up function. | ||
return subscribe(handleStoreChange); | ||
}, [subscribe]); | ||
useDebugValue(value); | ||
return value; | ||
{ | ||
error("The main 'use-sync-external-store' entry point is not supported; all it " + "does is re-export useSyncExternalStore from the 'react' package, so " + 'it only works with React 18+.' + '\n\n' + 'If you wish to support React 16 and 17, import from ' + "'use-sync-external-store/shim' instead. It will fall back to a shimmed" + 'implementation when the native one is not available.' + '\n\n' + "If you only support React 18+, you can import directly from 'react'."); | ||
} | ||
function checkIfSnapshotChanged(inst) { | ||
var latestGetSnapshot = inst.getSnapshot; | ||
var prevValue = inst.value; | ||
try { | ||
var nextValue = latestGetSnapshot(); | ||
return !objectIs(prevValue, nextValue); | ||
} catch (error) { | ||
return true; | ||
} | ||
exports.useSyncExternalStore = useSyncExternalStore; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
if ( | ||
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === | ||
'function' | ||
) { | ||
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error()); | ||
} | ||
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; | ||
})(); | ||
} |
@@ -1,2 +0,3 @@ | ||
/** @license React vundefined | ||
/** | ||
* @license React | ||
* use-sync-external-store.production.min.js | ||
@@ -9,3 +10,2 @@ * | ||
*/ | ||
'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; | ||
'use strict';var a=require("react").useSyncExternalStore;exports.useSyncExternalStore=a; |
{ | ||
"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-7d38e4fd8-20210930", | ||
"version": "0.0.0-experimental-7d9e17a98-20220511", | ||
"repository": { | ||
@@ -13,6 +13,7 @@ "type": "git", | ||
"README.md", | ||
"build-info.json", | ||
"index.js", | ||
"extra.js", | ||
"index.native.js", | ||
"with-selector.js", | ||
"with-selector.native.js", | ||
"shim/", | ||
"cjs/" | ||
@@ -22,4 +23,4 @@ ], | ||
"peerDependencies": { | ||
"react": "0.0.0-experimental-7d38e4fd8-20210930" | ||
"react": "0.0.0-experimental-7d9e17a98-20220511" | ||
} | ||
} |
# use-sync-external-store | ||
Backwards compatible shim for React's `useSyncExternalStore`. Works with any React that supports hooks. | ||
Backwards-compatible shim for [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Works with any React that supports Hooks. | ||
Until `useSyncExternalStore` is documented, refer to https://github.com/reactwg/react-18/discussions/86 | ||
See also https://github.com/reactwg/react-18/discussions/86. |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
QualityThis 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis 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
38085
18
816
6
10
1