Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

use-sync-external-store

Package Overview
Dependencies
Maintainers
1
Versions
1436
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.0.0-experimental-996da67b2-20211018 to 0.0.0-experimental-99eef9e2d-20220503

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

176

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

@@ -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-996da67b2-20211018",
"version": "0.0.0-experimental-99eef9e2d-20220503",
"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-996da67b2-20211018"
"react": "0.0.0-experimental-99eef9e2d-20220503"
}
}
# 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.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc