use-sync-external-store
Advanced tools
Comparing version 1.4.0-canary-fd0da3eef-20240404 to 1.4.0-rc-38e3b23483-20240529
@@ -15,6 +15,3 @@ /** | ||
(function() { | ||
'use strict'; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
'use strict'; | ||
if ( | ||
@@ -27,5 +24,5 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
var React = require('react'); | ||
var React = require('react'); | ||
var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; | ||
var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; | ||
@@ -42,3 +39,3 @@ function error(format) { | ||
} | ||
} | ||
} // eslint-disable-next-line react-internal/no-production-logging | ||
@@ -49,20 +46,35 @@ function printWarning(level, format, args) { | ||
{ | ||
var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; | ||
var stack = ReactDebugCurrentFrame.getStackAddendum(); | ||
var isErrorLogger = format === '%s\n\n%s\n' || format === '%o\n\n%s\n\n%s\n'; | ||
if (stack !== '') { | ||
format += '%s'; | ||
args = args.concat([stack]); | ||
} // eslint-disable-next-line react-internal/safe-string-coercion | ||
if (ReactSharedInternals.getCurrentStack) { | ||
// We only add the current stack to the console when createTask is not supported. | ||
// Since createTask requires DevTools to be open to work, this means that stacks | ||
// can be lost while DevTools isn't open but we can't detect this. | ||
var stack = ReactSharedInternals.getCurrentStack(); | ||
if (stack !== '') { | ||
format += '%s'; | ||
args = args.concat([stack]); | ||
} | ||
} | ||
var argsWithFormat = args.map(function (item) { | ||
return String(item); | ||
}); // Careful: RN currently depends on this prefix | ||
argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it | ||
if (isErrorLogger) { | ||
// Don't prefix our default logging formatting in ReactFiberErrorLoggger. | ||
// Don't toString the arguments. | ||
args.unshift(format); | ||
} else { | ||
// TODO: Remove this prefix and stop toStringing in the wrapper and | ||
// instead do it at each callsite as needed. | ||
// Careful: RN currently depends on this prefix | ||
// eslint-disable-next-line react-internal/safe-string-coercion | ||
args = args.map(function (item) { | ||
return String(item); | ||
}); | ||
args.unshift('Warning: ' + format); | ||
} // We intentionally don't use spread (or .apply) directly because it | ||
// breaks IE9: https://github.com/facebook/react/issues/13610 | ||
// eslint-disable-next-line react-internal/no-production-logging | ||
Function.prototype.apply.call(console[level], console, argsWithFormat); | ||
Function.prototype.apply.call(console[level], console, args); | ||
} | ||
@@ -234,3 +246,2 @@ } | ||
exports.useSyncExternalStore = useSyncExternalStore; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
if ( | ||
@@ -243,4 +254,4 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
})(); | ||
} |
@@ -15,6 +15,3 @@ /** | ||
(function() { | ||
'use strict'; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
'use strict'; | ||
if ( | ||
@@ -27,5 +24,5 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
var React = require('react'); | ||
var React = require('react'); | ||
var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; | ||
var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; | ||
@@ -42,3 +39,3 @@ function error(format) { | ||
} | ||
} | ||
} // eslint-disable-next-line react-internal/no-production-logging | ||
@@ -49,20 +46,35 @@ function printWarning(level, format, args) { | ||
{ | ||
var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; | ||
var stack = ReactDebugCurrentFrame.getStackAddendum(); | ||
var isErrorLogger = format === '%s\n\n%s\n' || format === '%o\n\n%s\n\n%s\n'; | ||
if (stack !== '') { | ||
format += '%s'; | ||
args = args.concat([stack]); | ||
} // eslint-disable-next-line react-internal/safe-string-coercion | ||
if (ReactSharedInternals.getCurrentStack) { | ||
// We only add the current stack to the console when createTask is not supported. | ||
// Since createTask requires DevTools to be open to work, this means that stacks | ||
// can be lost while DevTools isn't open but we can't detect this. | ||
var stack = ReactSharedInternals.getCurrentStack(); | ||
if (stack !== '') { | ||
format += '%s'; | ||
args = args.concat([stack]); | ||
} | ||
} | ||
var argsWithFormat = args.map(function (item) { | ||
return String(item); | ||
}); // Careful: RN currently depends on this prefix | ||
argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it | ||
if (isErrorLogger) { | ||
// Don't prefix our default logging formatting in ReactFiberErrorLoggger. | ||
// Don't toString the arguments. | ||
args.unshift(format); | ||
} else { | ||
// TODO: Remove this prefix and stop toStringing in the wrapper and | ||
// instead do it at each callsite as needed. | ||
// Careful: RN currently depends on this prefix | ||
// eslint-disable-next-line react-internal/safe-string-coercion | ||
args = args.map(function (item) { | ||
return String(item); | ||
}); | ||
args.unshift('Warning: ' + format); | ||
} // We intentionally don't use spread (or .apply) directly because it | ||
// breaks IE9: https://github.com/facebook/react/issues/13610 | ||
// eslint-disable-next-line react-internal/no-production-logging | ||
Function.prototype.apply.call(console[level], console, argsWithFormat); | ||
Function.prototype.apply.call(console[level], console, args); | ||
} | ||
@@ -222,3 +234,2 @@ } | ||
exports.useSyncExternalStore = useSyncExternalStore; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
if ( | ||
@@ -231,4 +242,4 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
})(); | ||
} |
/** | ||
* @license React | ||
* use-sync-external-store-shim.native.production.min.js | ||
* use-sync-external-store-shim.native.production.js | ||
* | ||
@@ -11,133 +11,50 @@ * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
'use strict'; | ||
var React = require('react'); | ||
/** | ||
* 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 | ||
*/ | ||
"use strict"; | ||
var React = require("react"); | ||
function is(x, y) { | ||
return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare | ||
; | ||
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y); | ||
} | ||
const objectIs = // $FlowFixMe[method-unbinding] | ||
typeof Object.is === 'function' ? Object.is : is; | ||
// dispatch for CommonJS interop named imports. | ||
const useState = React.useState, | ||
useEffect = React.useEffect, | ||
useLayoutEffect = React.useLayoutEffect, | ||
useDebugValue = React.useDebugValue; | ||
// 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$1(subscribe, getSnapshot, // Note: The 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) { | ||
// breaks the rules of React, and only works here because of specific | ||
// implementation details, most importantly that updates are | ||
// always synchronous. | ||
const value = getSnapshot(); | ||
// 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. | ||
const _useState = useState({ | ||
inst: { | ||
value, | ||
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(() => { | ||
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 | ||
var objectIs = "function" === typeof Object.is ? Object.is : is, | ||
useState = React.useState, | ||
useEffect = React.useEffect, | ||
useLayoutEffect = React.useLayoutEffect, | ||
useDebugValue = React.useDebugValue; | ||
function useSyncExternalStore$1(subscribe, getSnapshot) { | ||
var value = getSnapshot(), | ||
_useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }), | ||
inst = _useState[0].inst, | ||
forceUpdate = _useState[1]; | ||
useLayoutEffect( | ||
function () { | ||
inst.value = value; | ||
inst.getSnapshot = getSnapshot; | ||
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); | ||
}, | ||
[subscribe, value, getSnapshot] | ||
); | ||
useEffect( | ||
function () { | ||
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); | ||
return subscribe(function () { | ||
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); | ||
}); | ||
} | ||
}, [subscribe, value, getSnapshot]); | ||
useEffect(() => { | ||
// Check for changes right before subscribing. Subsequent changes will be | ||
// detected in the subscription handler. | ||
if (checkIfSnapshotChanged(inst)) { | ||
// Force a re-render. | ||
forceUpdate({ | ||
inst | ||
}); | ||
} | ||
const handleStoreChange = () => { | ||
// 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 | ||
}); | ||
} | ||
}; // Subscribe to the store and return a clean-up function. | ||
return subscribe(handleStoreChange); | ||
}, [subscribe]); | ||
}, | ||
[subscribe] | ||
); | ||
useDebugValue(value); | ||
return value; | ||
} | ||
function checkIfSnapshotChanged(inst) { | ||
const latestGetSnapshot = inst.getSnapshot; | ||
const prevValue = inst.value; | ||
var latestGetSnapshot = inst.getSnapshot; | ||
inst = inst.value; | ||
try { | ||
const nextValue = latestGetSnapshot(); | ||
return !objectIs(prevValue, nextValue); | ||
var nextValue = latestGetSnapshot(); | ||
return !objectIs(inst, nextValue); | ||
} catch (error) { | ||
return true; | ||
return !0; | ||
} | ||
} | ||
const shim = useSyncExternalStore$1; | ||
const useSyncExternalStore = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim; | ||
exports.useSyncExternalStore = useSyncExternalStore; | ||
exports.useSyncExternalStore = | ||
void 0 !== React.useSyncExternalStore | ||
? React.useSyncExternalStore | ||
: useSyncExternalStore$1; |
/** | ||
* @license React | ||
* use-sync-external-store-shim.production.min.js | ||
* use-sync-external-store-shim.production.js | ||
* | ||
@@ -11,145 +11,57 @@ * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
'use strict'; | ||
var React = require('react'); | ||
/** | ||
* 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 | ||
*/ | ||
"use strict"; | ||
var React = require("react"); | ||
function is(x, y) { | ||
return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare | ||
; | ||
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y); | ||
} | ||
const objectIs = // $FlowFixMe[method-unbinding] | ||
typeof Object.is === 'function' ? Object.is : is; | ||
// dispatch for CommonJS interop named imports. | ||
const useState = React.useState, | ||
useEffect = React.useEffect, | ||
useLayoutEffect = React.useLayoutEffect, | ||
useDebugValue = React.useDebugValue; | ||
// 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$2(subscribe, getSnapshot, // Note: The 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) { | ||
// breaks the rules of React, and only works here because of specific | ||
// implementation details, most importantly that updates are | ||
// always synchronous. | ||
const value = getSnapshot(); | ||
// 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. | ||
const _useState = useState({ | ||
inst: { | ||
value, | ||
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(() => { | ||
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 | ||
var objectIs = "function" === typeof Object.is ? Object.is : is, | ||
useState = React.useState, | ||
useEffect = React.useEffect, | ||
useLayoutEffect = React.useLayoutEffect, | ||
useDebugValue = React.useDebugValue; | ||
function useSyncExternalStore$2(subscribe, getSnapshot) { | ||
var value = getSnapshot(), | ||
_useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }), | ||
inst = _useState[0].inst, | ||
forceUpdate = _useState[1]; | ||
useLayoutEffect( | ||
function () { | ||
inst.value = value; | ||
inst.getSnapshot = getSnapshot; | ||
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); | ||
}, | ||
[subscribe, value, getSnapshot] | ||
); | ||
useEffect( | ||
function () { | ||
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); | ||
return subscribe(function () { | ||
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); | ||
}); | ||
} | ||
}, [subscribe, value, getSnapshot]); | ||
useEffect(() => { | ||
// Check for changes right before subscribing. Subsequent changes will be | ||
// detected in the subscription handler. | ||
if (checkIfSnapshotChanged(inst)) { | ||
// Force a re-render. | ||
forceUpdate({ | ||
inst | ||
}); | ||
} | ||
const handleStoreChange = () => { | ||
// 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 | ||
}); | ||
} | ||
}; // Subscribe to the store and return a clean-up function. | ||
return subscribe(handleStoreChange); | ||
}, [subscribe]); | ||
}, | ||
[subscribe] | ||
); | ||
useDebugValue(value); | ||
return value; | ||
} | ||
function checkIfSnapshotChanged(inst) { | ||
const latestGetSnapshot = inst.getSnapshot; | ||
const prevValue = inst.value; | ||
var latestGetSnapshot = inst.getSnapshot; | ||
inst = inst.value; | ||
try { | ||
const nextValue = latestGetSnapshot(); | ||
return !objectIs(prevValue, nextValue); | ||
var nextValue = latestGetSnapshot(); | ||
return !objectIs(inst, nextValue); | ||
} catch (error) { | ||
return true; | ||
return !0; | ||
} | ||
} | ||
function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) { | ||
// Note: The 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`. | ||
function useSyncExternalStore$1(subscribe, getSnapshot) { | ||
return getSnapshot(); | ||
} | ||
const canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined'); | ||
const isServerEnvironment = !canUseDOM; | ||
const shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore$2; | ||
const useSyncExternalStore = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim; | ||
exports.useSyncExternalStore = useSyncExternalStore; | ||
var shim = | ||
"undefined" === typeof window || | ||
"undefined" === typeof window.document || | ||
"undefined" === typeof window.document.createElement | ||
? useSyncExternalStore$1 | ||
: useSyncExternalStore$2; | ||
exports.useSyncExternalStore = | ||
void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim; |
@@ -15,6 +15,3 @@ /** | ||
(function() { | ||
'use strict'; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
'use strict'; | ||
if ( | ||
@@ -27,3 +24,3 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
var React = require('react'); | ||
var React = require('react'); | ||
var shim = require('use-sync-external-store/shim'); | ||
@@ -160,3 +157,2 @@ | ||
exports.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
if ( | ||
@@ -169,4 +165,4 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
})(); | ||
} |
/** | ||
* @license React | ||
* use-sync-external-store-shim/with-selector.production.min.js | ||
* use-sync-external-store-shim/with-selector.production.js | ||
* | ||
@@ -11,130 +11,76 @@ * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
'use strict'; | ||
var React = require('react'); | ||
var shim = require('use-sync-external-store/shim'); | ||
/** | ||
* 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 | ||
*/ | ||
"use strict"; | ||
var React = require("react"), | ||
shim = require("use-sync-external-store/shim"); | ||
function is(x, y) { | ||
return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare | ||
; | ||
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y); | ||
} | ||
const objectIs = // $FlowFixMe[method-unbinding] | ||
typeof Object.is === 'function' ? Object.is : is; | ||
const useSyncExternalStore = shim.useSyncExternalStore; | ||
// for CommonJS interop. | ||
const useRef = React.useRef, | ||
useEffect = React.useEffect, | ||
useMemo = React.useMemo, | ||
useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments. | ||
function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) { | ||
// Use this to track the rendered snapshot. | ||
const instRef = useRef(null); | ||
let inst; | ||
if (instRef.current === null) { | ||
inst = { | ||
hasValue: false, | ||
value: null | ||
}; | ||
var objectIs = "function" === typeof Object.is ? Object.is : is, | ||
useSyncExternalStore = shim.useSyncExternalStore, | ||
useRef = React.useRef, | ||
useEffect = React.useEffect, | ||
useMemo = React.useMemo, | ||
useDebugValue = React.useDebugValue; | ||
exports.useSyncExternalStoreWithSelector = function ( | ||
subscribe, | ||
getSnapshot, | ||
getServerSnapshot, | ||
selector, | ||
isEqual | ||
) { | ||
var instRef = useRef(null); | ||
if (null === instRef.current) { | ||
var inst = { hasValue: !1, value: null }; | ||
instRef.current = inst; | ||
} else { | ||
inst = instRef.current; | ||
} | ||
const _useMemo = useMemo(() => { | ||
// Track the memoized state using closure variables that are local to this | ||
// memoized instance of a getSnapshot function. Intentionally not using a | ||
// useRef hook, because that state would be shared across all concurrent | ||
// copies of the hook/component. | ||
let hasMemo = false; | ||
let memoizedSnapshot; | ||
let memoizedSelection; | ||
const memoizedSelector = nextSnapshot => { | ||
if (!hasMemo) { | ||
// The first time the hook is called, there is no memoized result. | ||
hasMemo = true; | ||
memoizedSnapshot = nextSnapshot; | ||
const nextSelection = selector(nextSnapshot); | ||
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) { | ||
const currentSelection = inst.value; | ||
if (isEqual(currentSelection, nextSelection)) { | ||
memoizedSelection = currentSelection; | ||
return currentSelection; | ||
} | ||
} else inst = instRef.current; | ||
instRef = useMemo( | ||
function () { | ||
function memoizedSelector(nextSnapshot) { | ||
if (!hasMemo) { | ||
hasMemo = !0; | ||
memoizedSnapshot = nextSnapshot; | ||
nextSnapshot = selector(nextSnapshot); | ||
if (void 0 !== isEqual && inst.hasValue) { | ||
var currentSelection = inst.value; | ||
if (isEqual(currentSelection, nextSnapshot)) | ||
return (memoizedSelection = currentSelection); | ||
} | ||
return (memoizedSelection = nextSnapshot); | ||
} | ||
memoizedSelection = nextSelection; | ||
return nextSelection; | ||
} // We may be able to reuse the previous invocation's result. | ||
// We may be able to reuse the previous invocation's result. | ||
const prevSnapshot = memoizedSnapshot; | ||
const prevSelection = memoizedSelection; | ||
if (objectIs(prevSnapshot, nextSnapshot)) { | ||
// The snapshot is the same as last time. Reuse the previous selection. | ||
return prevSelection; | ||
} // The snapshot has changed, so we need to compute a new selection. | ||
// The snapshot has changed, so we need to compute a new selection. | ||
const nextSelection = selector(nextSnapshot); // 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 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)) { | ||
return prevSelection; | ||
currentSelection = memoizedSelection; | ||
if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection; | ||
var nextSelection = selector(nextSnapshot); | ||
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection)) | ||
return currentSelection; | ||
memoizedSnapshot = nextSnapshot; | ||
return (memoizedSelection = nextSelection); | ||
} | ||
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. | ||
const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot; | ||
const getSnapshotWithSelector = () => memoizedSelector(getSnapshot()); | ||
const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : () => memoizedSelector(maybeGetServerSnapshot()); | ||
return [getSnapshotWithSelector, getServerSnapshotWithSelector]; | ||
}, [getSnapshot, getServerSnapshot, selector, isEqual]), | ||
getSelection = _useMemo[0], | ||
getServerSelection = _useMemo[1]; | ||
const value = useSyncExternalStore(subscribe, getSelection, getServerSelection); | ||
useEffect(() => { | ||
// $FlowFixMe[incompatible-type] changing the variant using mutation isn't supported | ||
inst.hasValue = true; // $FlowFixMe[incompatible-type] | ||
inst.value = value; | ||
}, [value]); | ||
var hasMemo = !1, | ||
memoizedSnapshot, | ||
memoizedSelection, | ||
maybeGetServerSnapshot = | ||
void 0 === getServerSnapshot ? null : getServerSnapshot; | ||
return [ | ||
function () { | ||
return memoizedSelector(getSnapshot()); | ||
}, | ||
null === maybeGetServerSnapshot | ||
? void 0 | ||
: function () { | ||
return memoizedSelector(maybeGetServerSnapshot()); | ||
} | ||
]; | ||
}, | ||
[getSnapshot, getServerSnapshot, selector, isEqual] | ||
); | ||
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]); | ||
useEffect( | ||
function () { | ||
inst.hasValue = !0; | ||
inst.value = value; | ||
}, | ||
[value] | ||
); | ||
useDebugValue(value); | ||
return value; | ||
} | ||
exports.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector; | ||
}; |
@@ -15,6 +15,3 @@ /** | ||
(function() { | ||
'use strict'; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
'use strict'; | ||
if ( | ||
@@ -27,3 +24,3 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
var React = require('react'); | ||
var React = require('react'); | ||
@@ -159,3 +156,2 @@ /** | ||
exports.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
if ( | ||
@@ -168,4 +164,4 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
})(); | ||
} |
/** | ||
* @license React | ||
* use-sync-external-store-with-selector.production.min.js | ||
* use-sync-external-store-with-selector.production.js | ||
* | ||
@@ -11,129 +11,75 @@ * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
'use strict'; | ||
var React = require('react'); | ||
/** | ||
* 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 | ||
*/ | ||
"use strict"; | ||
var React = require("react"); | ||
function is(x, y) { | ||
return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare | ||
; | ||
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y); | ||
} | ||
const objectIs = // $FlowFixMe[method-unbinding] | ||
typeof Object.is === 'function' ? Object.is : is; | ||
const useSyncExternalStore = React.useSyncExternalStore; | ||
// for CommonJS interop. | ||
const useRef = React.useRef, | ||
useEffect = React.useEffect, | ||
useMemo = React.useMemo, | ||
useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments. | ||
function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) { | ||
// Use this to track the rendered snapshot. | ||
const instRef = useRef(null); | ||
let inst; | ||
if (instRef.current === null) { | ||
inst = { | ||
hasValue: false, | ||
value: null | ||
}; | ||
var objectIs = "function" === typeof Object.is ? Object.is : is, | ||
useSyncExternalStore = React.useSyncExternalStore, | ||
useRef = React.useRef, | ||
useEffect = React.useEffect, | ||
useMemo = React.useMemo, | ||
useDebugValue = React.useDebugValue; | ||
exports.useSyncExternalStoreWithSelector = function ( | ||
subscribe, | ||
getSnapshot, | ||
getServerSnapshot, | ||
selector, | ||
isEqual | ||
) { | ||
var instRef = useRef(null); | ||
if (null === instRef.current) { | ||
var inst = { hasValue: !1, value: null }; | ||
instRef.current = inst; | ||
} else { | ||
inst = instRef.current; | ||
} | ||
const _useMemo = useMemo(() => { | ||
// Track the memoized state using closure variables that are local to this | ||
// memoized instance of a getSnapshot function. Intentionally not using a | ||
// useRef hook, because that state would be shared across all concurrent | ||
// copies of the hook/component. | ||
let hasMemo = false; | ||
let memoizedSnapshot; | ||
let memoizedSelection; | ||
const memoizedSelector = nextSnapshot => { | ||
if (!hasMemo) { | ||
// The first time the hook is called, there is no memoized result. | ||
hasMemo = true; | ||
memoizedSnapshot = nextSnapshot; | ||
const nextSelection = selector(nextSnapshot); | ||
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) { | ||
const currentSelection = inst.value; | ||
if (isEqual(currentSelection, nextSelection)) { | ||
memoizedSelection = currentSelection; | ||
return currentSelection; | ||
} | ||
} else inst = instRef.current; | ||
instRef = useMemo( | ||
function () { | ||
function memoizedSelector(nextSnapshot) { | ||
if (!hasMemo) { | ||
hasMemo = !0; | ||
memoizedSnapshot = nextSnapshot; | ||
nextSnapshot = selector(nextSnapshot); | ||
if (void 0 !== isEqual && inst.hasValue) { | ||
var currentSelection = inst.value; | ||
if (isEqual(currentSelection, nextSnapshot)) | ||
return (memoizedSelection = currentSelection); | ||
} | ||
return (memoizedSelection = nextSnapshot); | ||
} | ||
memoizedSelection = nextSelection; | ||
return nextSelection; | ||
} // We may be able to reuse the previous invocation's result. | ||
// We may be able to reuse the previous invocation's result. | ||
const prevSnapshot = memoizedSnapshot; | ||
const prevSelection = memoizedSelection; | ||
if (objectIs(prevSnapshot, nextSnapshot)) { | ||
// The snapshot is the same as last time. Reuse the previous selection. | ||
return prevSelection; | ||
} // The snapshot has changed, so we need to compute a new selection. | ||
// The snapshot has changed, so we need to compute a new selection. | ||
const nextSelection = selector(nextSnapshot); // 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 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)) { | ||
return prevSelection; | ||
currentSelection = memoizedSelection; | ||
if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection; | ||
var nextSelection = selector(nextSnapshot); | ||
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection)) | ||
return currentSelection; | ||
memoizedSnapshot = nextSnapshot; | ||
return (memoizedSelection = nextSelection); | ||
} | ||
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. | ||
const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot; | ||
const getSnapshotWithSelector = () => memoizedSelector(getSnapshot()); | ||
const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : () => memoizedSelector(maybeGetServerSnapshot()); | ||
return [getSnapshotWithSelector, getServerSnapshotWithSelector]; | ||
}, [getSnapshot, getServerSnapshot, selector, isEqual]), | ||
getSelection = _useMemo[0], | ||
getServerSelection = _useMemo[1]; | ||
const value = useSyncExternalStore(subscribe, getSelection, getServerSelection); | ||
useEffect(() => { | ||
// $FlowFixMe[incompatible-type] changing the variant using mutation isn't supported | ||
inst.hasValue = true; // $FlowFixMe[incompatible-type] | ||
inst.value = value; | ||
}, [value]); | ||
var hasMemo = !1, | ||
memoizedSnapshot, | ||
memoizedSelection, | ||
maybeGetServerSnapshot = | ||
void 0 === getServerSnapshot ? null : getServerSnapshot; | ||
return [ | ||
function () { | ||
return memoizedSelector(getSnapshot()); | ||
}, | ||
null === maybeGetServerSnapshot | ||
? void 0 | ||
: function () { | ||
return memoizedSelector(maybeGetServerSnapshot()); | ||
} | ||
]; | ||
}, | ||
[getSnapshot, getServerSnapshot, selector, isEqual] | ||
); | ||
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]); | ||
useEffect( | ||
function () { | ||
inst.hasValue = !0; | ||
inst.value = value; | ||
}, | ||
[value] | ||
); | ||
useDebugValue(value); | ||
return value; | ||
} | ||
exports.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector; | ||
}; |
@@ -15,6 +15,3 @@ /** | ||
(function() { | ||
'use strict'; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
'use strict'; | ||
if ( | ||
@@ -27,5 +24,5 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
var React = require('react'); | ||
var React = require('react'); | ||
var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; | ||
var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; | ||
@@ -42,3 +39,3 @@ function error(format) { | ||
} | ||
} | ||
} // eslint-disable-next-line react-internal/no-production-logging | ||
@@ -49,20 +46,35 @@ function printWarning(level, format, args) { | ||
{ | ||
var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; | ||
var stack = ReactDebugCurrentFrame.getStackAddendum(); | ||
var isErrorLogger = format === '%s\n\n%s\n' || format === '%o\n\n%s\n\n%s\n'; | ||
if (stack !== '') { | ||
format += '%s'; | ||
args = args.concat([stack]); | ||
} // eslint-disable-next-line react-internal/safe-string-coercion | ||
if (ReactSharedInternals.getCurrentStack) { | ||
// We only add the current stack to the console when createTask is not supported. | ||
// Since createTask requires DevTools to be open to work, this means that stacks | ||
// can be lost while DevTools isn't open but we can't detect this. | ||
var stack = ReactSharedInternals.getCurrentStack(); | ||
if (stack !== '') { | ||
format += '%s'; | ||
args = args.concat([stack]); | ||
} | ||
} | ||
var argsWithFormat = args.map(function (item) { | ||
return String(item); | ||
}); // Careful: RN currently depends on this prefix | ||
argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it | ||
if (isErrorLogger) { | ||
// Don't prefix our default logging formatting in ReactFiberErrorLoggger. | ||
// Don't toString the arguments. | ||
args.unshift(format); | ||
} else { | ||
// TODO: Remove this prefix and stop toStringing in the wrapper and | ||
// instead do it at each callsite as needed. | ||
// Careful: RN currently depends on this prefix | ||
// eslint-disable-next-line react-internal/safe-string-coercion | ||
args = args.map(function (item) { | ||
return String(item); | ||
}); | ||
args.unshift('Warning: ' + format); | ||
} // We intentionally don't use spread (or .apply) directly because it | ||
// breaks IE9: https://github.com/facebook/react/issues/13610 | ||
// eslint-disable-next-line react-internal/no-production-logging | ||
Function.prototype.apply.call(console[level], console, argsWithFormat); | ||
Function.prototype.apply.call(console[level], console, args); | ||
} | ||
@@ -78,3 +90,2 @@ } | ||
exports.useSyncExternalStore = useSyncExternalStore; | ||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ | ||
if ( | ||
@@ -87,4 +98,4 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && | ||
} | ||
})(); | ||
} |
/** | ||
* @license React | ||
* use-sync-external-store.production.min.js | ||
* use-sync-external-store.production.js | ||
* | ||
@@ -11,8 +11,4 @@ * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
'use strict'; | ||
var React = require('react'); | ||
const useSyncExternalStore = React.useSyncExternalStore; | ||
exports.useSyncExternalStore = useSyncExternalStore; | ||
"use strict"; | ||
var useSyncExternalStore = require("react").useSyncExternalStore; | ||
exports.useSyncExternalStore = useSyncExternalStore; |
'use strict'; | ||
if (process.env.NODE_ENV === 'production') { | ||
module.exports = require('./cjs/use-sync-external-store.production.min.js'); | ||
module.exports = require('./cjs/use-sync-external-store.production.js'); | ||
} else { | ||
module.exports = require('./cjs/use-sync-external-store.development.js'); | ||
} |
{ | ||
"name": "use-sync-external-store", | ||
"description": "Backwards compatible shim for React's useSyncExternalStore. Works with any React that supports hooks.", | ||
"version": "1.4.0-canary-fd0da3eef-20240404", | ||
"version": "1.4.0-rc-38e3b23483-20240529", | ||
"repository": { | ||
@@ -22,3 +22,3 @@ "type": "git", | ||
"peerDependencies": { | ||
"react": "19.0.0-canary-fd0da3eef-20240404" | ||
"react": "19.0.0-rc-38e3b23483-20240529" | ||
}, | ||
@@ -25,0 +25,0 @@ "devDependencies": { |
'use strict'; | ||
if (process.env.NODE_ENV === 'production') { | ||
module.exports = require('../cjs/use-sync-external-store-shim.production.min.js'); | ||
module.exports = require('../cjs/use-sync-external-store-shim.production.js'); | ||
} else { | ||
module.exports = require('../cjs/use-sync-external-store-shim.development.js'); | ||
} |
'use strict'; | ||
if (process.env.NODE_ENV === 'production') { | ||
module.exports = require('../cjs/use-sync-external-store-shim.native.production.min.js'); | ||
module.exports = require('../cjs/use-sync-external-store-shim.native.production.js'); | ||
} else { | ||
module.exports = require('../cjs/use-sync-external-store-shim.native.development.js'); | ||
} |
'use strict'; | ||
if (process.env.NODE_ENV === 'production') { | ||
module.exports = require('../cjs/use-sync-external-store-shim/with-selector.production.min.js'); | ||
module.exports = require('../cjs/use-sync-external-store-shim/with-selector.production.js'); | ||
} else { | ||
module.exports = require('../cjs/use-sync-external-store-shim/with-selector.development.js'); | ||
} |
'use strict'; | ||
if (process.env.NODE_ENV === 'production') { | ||
module.exports = require('./cjs/use-sync-external-store-with-selector.production.min.js'); | ||
module.exports = require('./cjs/use-sync-external-store-with-selector.production.js'); | ||
} else { | ||
module.exports = require('./cjs/use-sync-external-store-with-selector.development.js'); | ||
} |
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
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 3 instances in 1 package
2
44833
18
1097