1 | /**
|
---|
2 | * @license React
|
---|
3 | * use-sync-external-store-shim/with-selector.development.js
|
---|
4 | *
|
---|
5 | * Copyright (c) Facebook, Inc. and its affiliates.
|
---|
6 | *
|
---|
7 | * This source code is licensed under the MIT license found in the
|
---|
8 | * LICENSE file in the root directory of this source tree.
|
---|
9 | */
|
---|
10 |
|
---|
11 | 'use strict';
|
---|
12 |
|
---|
13 | if (process.env.NODE_ENV !== "production") {
|
---|
14 | (function() {
|
---|
15 |
|
---|
16 | 'use strict';
|
---|
17 |
|
---|
18 | /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
|
---|
19 | if (
|
---|
20 | typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
|
---|
21 | typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
|
---|
22 | 'function'
|
---|
23 | ) {
|
---|
24 | __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
|
---|
25 | }
|
---|
26 | var React = require('react');
|
---|
27 | var shim = require('use-sync-external-store/shim');
|
---|
28 |
|
---|
29 | /**
|
---|
30 | * inlined Object.is polyfill to avoid requiring consumers ship their own
|
---|
31 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
|
---|
32 | */
|
---|
33 | function is(x, y) {
|
---|
34 | return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
|
---|
35 | ;
|
---|
36 | }
|
---|
37 |
|
---|
38 | var objectIs = typeof Object.is === 'function' ? Object.is : is;
|
---|
39 |
|
---|
40 | var useSyncExternalStore = shim.useSyncExternalStore;
|
---|
41 |
|
---|
42 | // for CommonJS interop.
|
---|
43 |
|
---|
44 | var useRef = React.useRef,
|
---|
45 | useEffect = React.useEffect,
|
---|
46 | useMemo = React.useMemo,
|
---|
47 | useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
|
---|
48 |
|
---|
49 | function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
|
---|
50 | // Use this to track the rendered snapshot.
|
---|
51 | var instRef = useRef(null);
|
---|
52 | var inst;
|
---|
53 |
|
---|
54 | if (instRef.current === null) {
|
---|
55 | inst = {
|
---|
56 | hasValue: false,
|
---|
57 | value: null
|
---|
58 | };
|
---|
59 | instRef.current = inst;
|
---|
60 | } else {
|
---|
61 | inst = instRef.current;
|
---|
62 | }
|
---|
63 |
|
---|
64 | var _useMemo = useMemo(function () {
|
---|
65 | // Track the memoized state using closure variables that are local to this
|
---|
66 | // memoized instance of a getSnapshot function. Intentionally not using a
|
---|
67 | // useRef hook, because that state would be shared across all concurrent
|
---|
68 | // copies of the hook/component.
|
---|
69 | var hasMemo = false;
|
---|
70 | var memoizedSnapshot;
|
---|
71 | var memoizedSelection;
|
---|
72 |
|
---|
73 | var memoizedSelector = function (nextSnapshot) {
|
---|
74 | if (!hasMemo) {
|
---|
75 | // The first time the hook is called, there is no memoized result.
|
---|
76 | hasMemo = true;
|
---|
77 | memoizedSnapshot = nextSnapshot;
|
---|
78 |
|
---|
79 | var _nextSelection = selector(nextSnapshot);
|
---|
80 |
|
---|
81 | if (isEqual !== undefined) {
|
---|
82 | // Even if the selector has changed, the currently rendered selection
|
---|
83 | // may be equal to the new selection. We should attempt to reuse the
|
---|
84 | // current value if possible, to preserve downstream memoizations.
|
---|
85 | if (inst.hasValue) {
|
---|
86 | var currentSelection = inst.value;
|
---|
87 |
|
---|
88 | if (isEqual(currentSelection, _nextSelection)) {
|
---|
89 | memoizedSelection = currentSelection;
|
---|
90 | return currentSelection;
|
---|
91 | }
|
---|
92 | }
|
---|
93 | }
|
---|
94 |
|
---|
95 | memoizedSelection = _nextSelection;
|
---|
96 | return _nextSelection;
|
---|
97 | } // We may be able to reuse the previous invocation's result.
|
---|
98 |
|
---|
99 |
|
---|
100 | // We may be able to reuse the previous invocation's result.
|
---|
101 | var prevSnapshot = memoizedSnapshot;
|
---|
102 | var prevSelection = memoizedSelection;
|
---|
103 |
|
---|
104 | if (objectIs(prevSnapshot, nextSnapshot)) {
|
---|
105 | // The snapshot is the same as last time. Reuse the previous selection.
|
---|
106 | return prevSelection;
|
---|
107 | } // The snapshot has changed, so we need to compute a new selection.
|
---|
108 |
|
---|
109 |
|
---|
110 | // The snapshot has changed, so we need to compute a new selection.
|
---|
111 | var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
|
---|
112 | // has changed. If it hasn't, return the previous selection. That signals
|
---|
113 | // to React that the selections are conceptually equal, and we can bail
|
---|
114 | // out of rendering.
|
---|
115 |
|
---|
116 | // If a custom isEqual function is provided, use that to check if the data
|
---|
117 | // has changed. If it hasn't, return the previous selection. That signals
|
---|
118 | // to React that the selections are conceptually equal, and we can bail
|
---|
119 | // out of rendering.
|
---|
120 | if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
|
---|
121 | return prevSelection;
|
---|
122 | }
|
---|
123 |
|
---|
124 | memoizedSnapshot = nextSnapshot;
|
---|
125 | memoizedSelection = nextSelection;
|
---|
126 | return nextSelection;
|
---|
127 | }; // Assigning this to a constant so that Flow knows it can't change.
|
---|
128 |
|
---|
129 |
|
---|
130 | // Assigning this to a constant so that Flow knows it can't change.
|
---|
131 | var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
|
---|
132 |
|
---|
133 | var getSnapshotWithSelector = function () {
|
---|
134 | return memoizedSelector(getSnapshot());
|
---|
135 | };
|
---|
136 |
|
---|
137 | var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
|
---|
138 | return memoizedSelector(maybeGetServerSnapshot());
|
---|
139 | };
|
---|
140 | return [getSnapshotWithSelector, getServerSnapshotWithSelector];
|
---|
141 | }, [getSnapshot, getServerSnapshot, selector, isEqual]),
|
---|
142 | getSelection = _useMemo[0],
|
---|
143 | getServerSelection = _useMemo[1];
|
---|
144 |
|
---|
145 | var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
|
---|
146 | useEffect(function () {
|
---|
147 | inst.hasValue = true;
|
---|
148 | inst.value = value;
|
---|
149 | }, [value]);
|
---|
150 | useDebugValue(value);
|
---|
151 | return value;
|
---|
152 | }
|
---|
153 |
|
---|
154 | exports.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
|
---|
155 | /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
|
---|
156 | if (
|
---|
157 | typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
|
---|
158 | typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
|
---|
159 | 'function'
|
---|
160 | ) {
|
---|
161 | __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
|
---|
162 | }
|
---|
163 |
|
---|
164 | })();
|
---|
165 | }
|
---|