@wordpress/data 10.32.0 → 10.32.1-next.47f435fc9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/async-mode-provider/context.js +35 -54
- package/build/components/async-mode-provider/context.js.map +7 -1
- package/build/components/async-mode-provider/index.js +40 -25
- package/build/components/async-mode-provider/index.js.map +7 -1
- package/build/components/async-mode-provider/use-async-mode.js +25 -16
- package/build/components/async-mode-provider/use-async-mode.js.map +7 -1
- package/build/components/registry-provider/context.js +46 -64
- package/build/components/registry-provider/context.js.map +7 -1
- package/build/components/registry-provider/index.js +40 -25
- package/build/components/registry-provider/index.js.map +7 -1
- package/build/components/registry-provider/use-registry.js +25 -55
- package/build/components/registry-provider/use-registry.js.map +7 -1
- package/build/components/use-dispatch/index.js +38 -17
- package/build/components/use-dispatch/index.js.map +7 -1
- package/build/components/use-dispatch/use-dispatch-with-map.js +59 -44
- package/build/components/use-dispatch/use-dispatch-with-map.js.map +7 -1
- package/build/components/use-dispatch/use-dispatch.js +36 -71
- package/build/components/use-dispatch/use-dispatch.js.map +7 -1
- package/build/components/use-select/index.js +79 -208
- package/build/components/use-select/index.js.map +7 -1
- package/build/components/with-dispatch/index.js +34 -107
- package/build/components/with-dispatch/index.js.map +7 -1
- package/build/components/with-registry/index.js +30 -30
- package/build/components/with-registry/index.js.map +7 -1
- package/build/components/with-select/index.js +44 -67
- package/build/components/with-select/index.js.map +7 -1
- package/build/controls.js +49 -110
- package/build/controls.js.map +7 -1
- package/build/create-selector.js +36 -11
- package/build/create-selector.js.map +7 -1
- package/build/default-registry.js +24 -10
- package/build/default-registry.js.map +7 -1
- package/build/dispatch.js +38 -31
- package/build/dispatch.js.map +7 -1
- package/build/factory.js +29 -85
- package/build/factory.js.map +7 -1
- package/build/index.js +114 -301
- package/build/index.js.map +7 -1
- package/build/lock-unlock.js +31 -14
- package/build/lock-unlock.js.map +7 -1
- package/build/plugins/index.js +36 -11
- package/build/plugins/index.js.map +7 -1
- package/build/plugins/persistence/index.js +74 -139
- package/build/plugins/persistence/index.js.map +7 -1
- package/build/plugins/persistence/storage/default.js +37 -18
- package/build/plugins/persistence/storage/default.js.map +7 -1
- package/build/plugins/persistence/storage/object.js +24 -7
- package/build/plugins/persistence/storage/object.js.map +7 -1
- package/build/promise-middleware.js +37 -20
- package/build/promise-middleware.js.map +7 -1
- package/build/redux-store/combine-reducers.js +26 -5
- package/build/redux-store/combine-reducers.js.map +7 -1
- package/build/redux-store/index.js +221 -331
- package/build/redux-store/index.js.map +7 -1
- package/build/redux-store/metadata/actions.js +51 -112
- package/build/redux-store/metadata/actions.js.map +7 -1
- package/build/redux-store/metadata/equivalent-key-map.d.js +1 -1
- package/build/redux-store/metadata/equivalent-key-map.d.js.map +7 -1
- package/build/redux-store/metadata/reducer.js +111 -115
- package/build/redux-store/metadata/reducer.js.map +7 -1
- package/build/redux-store/metadata/selectors.js +109 -181
- package/build/redux-store/metadata/selectors.js.map +7 -1
- package/build/redux-store/metadata/utils.js +32 -35
- package/build/redux-store/metadata/utils.js.map +7 -1
- package/build/redux-store/thunk-middleware.js +24 -7
- package/build/redux-store/thunk-middleware.js.map +7 -1
- package/build/registry.js +94 -198
- package/build/registry.js.map +7 -1
- package/build/resolvers-cache-middleware.js +26 -27
- package/build/resolvers-cache-middleware.js.map +7 -1
- package/build/select.js +38 -31
- package/build/select.js.map +7 -1
- package/build/store/index.js +52 -16
- package/build/store/index.js.map +7 -1
- package/build/types.js +16 -5
- package/build/types.js.map +7 -1
- package/build/utils/emitter.js +33 -16
- package/build/utils/emitter.js.map +7 -1
- package/build-module/components/async-mode-provider/context.js +12 -49
- package/build-module/components/async-mode-provider/context.js.map +7 -1
- package/build-module/components/async-mode-provider/index.js +8 -3
- package/build-module/components/async-mode-provider/index.js.map +7 -1
- package/build-module/components/async-mode-provider/use-async-mode.js +7 -11
- package/build-module/components/async-mode-provider/use-async-mode.js.map +7 -1
- package/build-module/components/registry-provider/context.js +13 -58
- package/build-module/components/registry-provider/context.js.map +7 -1
- package/build-module/components/registry-provider/index.js +8 -3
- package/build-module/components/registry-provider/index.js.map +7 -1
- package/build-module/components/registry-provider/use-registry.js +7 -51
- package/build-module/components/registry-provider/use-registry.js.map +7 -1
- package/build-module/components/use-dispatch/index.js +7 -3
- package/build-module/components/use-dispatch/index.js.map +7 -1
- package/build-module/components/use-dispatch/use-dispatch-with-map.js +27 -35
- package/build-module/components/use-dispatch/use-dispatch-with-map.js.map +7 -1
- package/build-module/components/use-dispatch/use-dispatch.js +8 -66
- package/build-module/components/use-dispatch/use-dispatch.js.map +7 -1
- package/build-module/components/use-select/index.js +45 -193
- package/build-module/components/use-select/index.js.map +7 -1
- package/build-module/components/with-dispatch/index.js +16 -104
- package/build-module/components/with-dispatch/index.js.map +7 -1
- package/build-module/components/with-registry/index.js +12 -27
- package/build-module/components/with-registry/index.js.map +7 -1
- package/build-module/components/with-select/index.js +16 -63
- package/build-module/components/with-select/index.js.map +7 -1
- package/build-module/controls.js +25 -105
- package/build-module/controls.js.map +7 -1
- package/build-module/create-selector.js +5 -8
- package/build-module/create-selector.js.map +7 -1
- package/build-module/default-registry.js +6 -6
- package/build-module/default-registry.js.map +7 -1
- package/build-module/dispatch.js +6 -27
- package/build-module/dispatch.js.map +7 -1
- package/build-module/factory.js +8 -82
- package/build-module/factory.js.map +7 -1
- package/build-module/index.js +62 -185
- package/build-module/index.js.map +7 -1
- package/build-module/lock-unlock.js +8 -7
- package/build-module/lock-unlock.js.map +7 -1
- package/build-module/plugins/index.js +5 -2
- package/build-module/plugins/index.js.map +7 -1
- package/build-module/plugins/persistence/index.js +38 -129
- package/build-module/plugins/persistence/index.js.map +7 -1
- package/build-module/plugins/persistence/storage/default.js +8 -11
- package/build-module/plugins/persistence/storage/default.js.map +7 -1
- package/build-module/plugins/persistence/storage/object.js +6 -3
- package/build-module/plugins/persistence/storage/object.js.map +7 -1
- package/build-module/promise-middleware.js +8 -14
- package/build-module/promise-middleware.js.map +7 -1
- package/build-module/redux-store/combine-reducers.js +5 -2
- package/build-module/redux-store/combine-reducers.js.map +7 -1
- package/build-module/redux-store/index.js +180 -310
- package/build-module/redux-store/index.js.map +7 -1
- package/build-module/redux-store/metadata/actions.js +30 -109
- package/build-module/redux-store/metadata/actions.js.map +7 -1
- package/build-module/redux-store/metadata/equivalent-key-map.d.js +1 -2
- package/build-module/redux-store/metadata/equivalent-key-map.d.js.map +7 -1
- package/build-module/redux-store/metadata/reducer.js +83 -108
- package/build-module/redux-store/metadata/reducer.js.map +7 -1
- package/build-module/redux-store/metadata/selectors.js +76 -175
- package/build-module/redux-store/metadata/selectors.js.map +7 -1
- package/build-module/redux-store/metadata/utils.js +10 -30
- package/build-module/redux-store/metadata/utils.js.map +7 -1
- package/build-module/redux-store/thunk-middleware.js +7 -4
- package/build-module/redux-store/thunk-middleware.js.map +7 -1
- package/build-module/registry.js +56 -187
- package/build-module/registry.js.map +7 -1
- package/build-module/resolvers-cache-middleware.js +8 -23
- package/build-module/resolvers-cache-middleware.js.map +7 -1
- package/build-module/select.js +6 -27
- package/build-module/select.js.map +7 -1
- package/build-module/store/index.js +34 -12
- package/build-module/store/index.js.map +7 -1
- package/build-module/types.js +1 -2
- package/build-module/types.js.map +7 -1
- package/build-module/utils/emitter.js +12 -13
- package/build-module/utils/emitter.js.map +7 -1
- package/package.json +17 -10
|
@@ -1,42 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
import
|
|
12
|
-
import useAsyncMode from '../async-mode-provider/use-async-mode';
|
|
1
|
+
import { createQueue } from "@wordpress/priority-queue";
|
|
2
|
+
import {
|
|
3
|
+
useRef,
|
|
4
|
+
useCallback,
|
|
5
|
+
useMemo,
|
|
6
|
+
useSyncExternalStore,
|
|
7
|
+
useDebugValue
|
|
8
|
+
} from "@wordpress/element";
|
|
9
|
+
import isShallowEqual from "@wordpress/is-shallow-equal";
|
|
10
|
+
import useRegistry from "../registry-provider/use-registry";
|
|
11
|
+
import useAsyncMode from "../async-mode-provider/use-async-mode";
|
|
13
12
|
const renderQueue = createQueue();
|
|
14
13
|
function warnOnUnstableReference(a, b) {
|
|
15
14
|
if (!a || !b) {
|
|
16
15
|
return;
|
|
17
16
|
}
|
|
18
|
-
const keys = typeof a ===
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
const keys = typeof a === "object" && typeof b === "object" ? Object.keys(a).filter((k) => a[k] !== b[k]) : [];
|
|
18
|
+
console.warn(
|
|
19
|
+
"The `useSelect` hook returns different values when called with the same state and parameters.\nThis can lead to unnecessary re-renders and performance issues if not fixed.\n\nNon-equal value keys: %s\n\n",
|
|
20
|
+
keys.join(", ")
|
|
21
|
+
);
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor
|
|
26
|
-
* @template {import('../../types').AnyConfig} C
|
|
27
|
-
*/
|
|
28
|
-
/**
|
|
29
|
-
* @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
|
|
30
|
-
* @template State
|
|
31
|
-
* @template {Record<string,import('../../types').ActionCreator>} Actions
|
|
32
|
-
* @template Selectors
|
|
33
|
-
*/
|
|
34
|
-
/** @typedef {import('../../types').MapSelect} MapSelect */
|
|
35
|
-
/**
|
|
36
|
-
* @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn
|
|
37
|
-
* @template {MapSelect|StoreDescriptor<any>} T
|
|
38
|
-
*/
|
|
39
|
-
|
|
40
23
|
function Store(registry, suspense) {
|
|
41
24
|
const select = suspense ? registry.suspendSelect : registry.select;
|
|
42
25
|
const queueContext = {};
|
|
@@ -46,31 +29,14 @@ function Store(registry, suspense) {
|
|
|
46
29
|
let lastIsAsync;
|
|
47
30
|
let subscriber;
|
|
48
31
|
let didWarnUnstableReference;
|
|
49
|
-
const storeStatesOnMount = new Map();
|
|
32
|
+
const storeStatesOnMount = /* @__PURE__ */ new Map();
|
|
50
33
|
function getStoreState(name) {
|
|
51
|
-
|
|
52
|
-
// If there's no store property (custom generic store), return an empty
|
|
53
|
-
// object. When comparing the state, the empty objects will cause the
|
|
54
|
-
// equality check to fail, setting `lastMapResultValid` to false.
|
|
55
|
-
return (_registry$stores$name = registry.stores[name]?.store?.getState?.()) !== null && _registry$stores$name !== void 0 ? _registry$stores$name : {};
|
|
34
|
+
return registry.stores[name]?.store?.getState?.() ?? {};
|
|
56
35
|
}
|
|
57
|
-
const createSubscriber = stores => {
|
|
58
|
-
// The set of stores the `subscribe` function is supposed to subscribe to. Here it is
|
|
59
|
-
// initialized, and then the `updateStores` function can add new stores to it.
|
|
36
|
+
const createSubscriber = (stores) => {
|
|
60
37
|
const activeStores = [...stores];
|
|
61
|
-
|
|
62
|
-
// The `subscribe` function, which is passed to the `useSyncExternalStore` hook, could
|
|
63
|
-
// be called multiple times to establish multiple subscriptions. That's why we need to
|
|
64
|
-
// keep a set of active subscriptions;
|
|
65
|
-
const activeSubscriptions = new Set();
|
|
38
|
+
const activeSubscriptions = /* @__PURE__ */ new Set();
|
|
66
39
|
function subscribe(listener) {
|
|
67
|
-
// Maybe invalidate the value right after subscription was created.
|
|
68
|
-
// React will call `getValue` after subscribing, to detect store
|
|
69
|
-
// updates that happened in the interval between the `getValue` call
|
|
70
|
-
// during render and creating the subscription, which is slightly
|
|
71
|
-
// delayed. We need to ensure that this second `getValue` call will
|
|
72
|
-
// compute a fresh value only if any of the store states have
|
|
73
|
-
// changed in the meantime.
|
|
74
40
|
if (lastMapResultValid) {
|
|
75
41
|
for (const name of activeStores) {
|
|
76
42
|
if (storeStatesOnMount.get(name) !== getStoreState(name)) {
|
|
@@ -80,7 +46,6 @@ function Store(registry, suspense) {
|
|
|
80
46
|
}
|
|
81
47
|
storeStatesOnMount.clear();
|
|
82
48
|
const onStoreChange = () => {
|
|
83
|
-
// Invalidate the value on store update, so that a fresh value is computed.
|
|
84
49
|
lastMapResultValid = false;
|
|
85
50
|
listener();
|
|
86
51
|
};
|
|
@@ -102,47 +67,34 @@ function Store(registry, suspense) {
|
|
|
102
67
|
return () => {
|
|
103
68
|
activeSubscriptions.delete(subscribeStore);
|
|
104
69
|
for (const unsub of unsubs.values()) {
|
|
105
|
-
// The return value of the subscribe function could be undefined if the store is a custom generic store.
|
|
106
70
|
unsub?.();
|
|
107
71
|
}
|
|
108
|
-
// Cancel existing store updates that were already scheduled.
|
|
109
72
|
renderQueue.cancel(queueContext);
|
|
110
73
|
};
|
|
111
74
|
}
|
|
112
|
-
|
|
113
|
-
// Check if `newStores` contains some stores we're not subscribed to yet, and add them.
|
|
114
75
|
function updateStores(newStores) {
|
|
115
76
|
for (const newStore of newStores) {
|
|
116
77
|
if (activeStores.includes(newStore)) {
|
|
117
78
|
continue;
|
|
118
79
|
}
|
|
119
|
-
|
|
120
|
-
// New `subscribe` calls will subscribe to `newStore`, too.
|
|
121
80
|
activeStores.push(newStore);
|
|
122
|
-
|
|
123
|
-
// Add `newStore` to existing subscriptions.
|
|
124
81
|
for (const subscription of activeSubscriptions) {
|
|
125
82
|
subscription(newStore);
|
|
126
83
|
}
|
|
127
84
|
}
|
|
128
85
|
}
|
|
129
|
-
return {
|
|
130
|
-
subscribe,
|
|
131
|
-
updateStores
|
|
132
|
-
};
|
|
86
|
+
return { subscribe, updateStores };
|
|
133
87
|
};
|
|
134
88
|
return (mapSelect, isAsync) => {
|
|
135
89
|
function updateValue() {
|
|
136
|
-
// If the last value is valid, and the `mapSelect` callback hasn't changed,
|
|
137
|
-
// then we can safely return the cached value. The value can change only on
|
|
138
|
-
// store update, and in that case value will be invalidated by the listener.
|
|
139
90
|
if (lastMapResultValid && mapSelect === lastMapSelect) {
|
|
140
91
|
return lastMapResult;
|
|
141
92
|
}
|
|
142
|
-
const listeningStores = {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
93
|
+
const listeningStores = { current: null };
|
|
94
|
+
const mapResult = registry.__unstableMarkListeningStores(
|
|
95
|
+
() => mapSelect(select, registry),
|
|
96
|
+
listeningStores
|
|
97
|
+
);
|
|
146
98
|
if (globalThis.SCRIPT_DEBUG) {
|
|
147
99
|
if (!didWarnUnstableReference) {
|
|
148
100
|
const secondMapResult = mapSelect(select, registry);
|
|
@@ -160,9 +112,6 @@ function Store(registry, suspense) {
|
|
|
160
112
|
} else {
|
|
161
113
|
subscriber.updateStores(listeningStores.current);
|
|
162
114
|
}
|
|
163
|
-
|
|
164
|
-
// If the new value is shallow-equal to the old one, keep the old one so
|
|
165
|
-
// that we don't trigger unwanted updates that do a `===` check.
|
|
166
115
|
if (!isShallowEqual(lastMapResult, mapResult)) {
|
|
167
116
|
lastMapResult = mapResult;
|
|
168
117
|
}
|
|
@@ -170,26 +119,16 @@ function Store(registry, suspense) {
|
|
|
170
119
|
lastMapResultValid = true;
|
|
171
120
|
}
|
|
172
121
|
function getValue() {
|
|
173
|
-
// Update the value in case it's been invalidated or `mapSelect` has changed.
|
|
174
122
|
updateValue();
|
|
175
123
|
return lastMapResult;
|
|
176
124
|
}
|
|
177
|
-
|
|
178
|
-
// When transitioning from async to sync mode, cancel existing store updates
|
|
179
|
-
// that have been scheduled, and invalidate the value so that it's freshly
|
|
180
|
-
// computed. It might have been changed by the update we just cancelled.
|
|
181
125
|
if (lastIsAsync && !isAsync) {
|
|
182
126
|
lastMapResultValid = false;
|
|
183
127
|
renderQueue.cancel(queueContext);
|
|
184
128
|
}
|
|
185
129
|
updateValue();
|
|
186
130
|
lastIsAsync = isAsync;
|
|
187
|
-
|
|
188
|
-
// Return a pair of functions that can be passed to `useSyncExternalStore`.
|
|
189
|
-
return {
|
|
190
|
-
subscribe: subscriber.subscribe,
|
|
191
|
-
getValue
|
|
192
|
-
};
|
|
131
|
+
return { subscribe: subscriber.subscribe, getValue };
|
|
193
132
|
};
|
|
194
133
|
}
|
|
195
134
|
function _useStaticSelect(storeName) {
|
|
@@ -198,120 +137,33 @@ function _useStaticSelect(storeName) {
|
|
|
198
137
|
function _useMappingSelect(suspense, mapSelect, deps) {
|
|
199
138
|
const registry = useRegistry();
|
|
200
139
|
const isAsync = useAsyncMode();
|
|
201
|
-
const store = useMemo(
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
140
|
+
const store = useMemo(
|
|
141
|
+
() => Store(registry, suspense),
|
|
142
|
+
[registry, suspense]
|
|
143
|
+
);
|
|
205
144
|
const selector = useCallback(mapSelect, deps);
|
|
206
|
-
const {
|
|
207
|
-
subscribe,
|
|
208
|
-
getValue
|
|
209
|
-
} = store(selector, isAsync);
|
|
145
|
+
const { subscribe, getValue } = store(selector, isAsync);
|
|
210
146
|
const result = useSyncExternalStore(subscribe, getValue, getValue);
|
|
211
147
|
useDebugValue(result);
|
|
212
148
|
return result;
|
|
213
149
|
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
* Custom react hook for retrieving props from registered selectors.
|
|
217
|
-
*
|
|
218
|
-
* In general, this custom React hook follows the
|
|
219
|
-
* [rules of hooks](https://react.dev/reference/rules/rules-of-hooks).
|
|
220
|
-
*
|
|
221
|
-
* @template {MapSelect | StoreDescriptor<any>} T
|
|
222
|
-
* @param {T} mapSelect Function called on every state change. The returned value is
|
|
223
|
-
* exposed to the component implementing this hook. The function
|
|
224
|
-
* receives the `registry.select` method on the first argument
|
|
225
|
-
* and the `registry` on the second argument.
|
|
226
|
-
* When a store key is passed, all selectors for the store will be
|
|
227
|
-
* returned. This is only meant for usage of these selectors in event
|
|
228
|
-
* callbacks, not for data needed to create the element tree.
|
|
229
|
-
* @param {unknown[]} deps If provided, this memoizes the mapSelect so the same `mapSelect` is
|
|
230
|
-
* invoked on every state change unless the dependencies change.
|
|
231
|
-
*
|
|
232
|
-
* @example
|
|
233
|
-
* ```js
|
|
234
|
-
* import { useSelect } from '@wordpress/data';
|
|
235
|
-
* import { store as myCustomStore } from 'my-custom-store';
|
|
236
|
-
*
|
|
237
|
-
* function HammerPriceDisplay( { currency } ) {
|
|
238
|
-
* const price = useSelect( ( select ) => {
|
|
239
|
-
* return select( myCustomStore ).getPrice( 'hammer', currency );
|
|
240
|
-
* }, [ currency ] );
|
|
241
|
-
* return new Intl.NumberFormat( 'en-US', {
|
|
242
|
-
* style: 'currency',
|
|
243
|
-
* currency,
|
|
244
|
-
* } ).format( price );
|
|
245
|
-
* }
|
|
246
|
-
*
|
|
247
|
-
* // Rendered in the application:
|
|
248
|
-
* // <HammerPriceDisplay currency="USD" />
|
|
249
|
-
* ```
|
|
250
|
-
*
|
|
251
|
-
* In the above example, when `HammerPriceDisplay` is rendered into an
|
|
252
|
-
* application, the price will be retrieved from the store state using the
|
|
253
|
-
* `mapSelect` callback on `useSelect`. If the currency prop changes then
|
|
254
|
-
* any price in the state for that currency is retrieved. If the currency prop
|
|
255
|
-
* doesn't change and other props are passed in that do change, the price will
|
|
256
|
-
* not change because the dependency is just the currency.
|
|
257
|
-
*
|
|
258
|
-
* When data is only used in an event callback, the data should not be retrieved
|
|
259
|
-
* on render, so it may be useful to get the selectors function instead.
|
|
260
|
-
*
|
|
261
|
-
* **Don't use `useSelect` this way when calling the selectors in the render
|
|
262
|
-
* function because your component won't re-render on a data change.**
|
|
263
|
-
*
|
|
264
|
-
* ```js
|
|
265
|
-
* import { useSelect } from '@wordpress/data';
|
|
266
|
-
* import { store as myCustomStore } from 'my-custom-store';
|
|
267
|
-
*
|
|
268
|
-
* function Paste( { children } ) {
|
|
269
|
-
* const { getSettings } = useSelect( myCustomStore );
|
|
270
|
-
* function onPaste() {
|
|
271
|
-
* // Do something with the settings.
|
|
272
|
-
* const settings = getSettings();
|
|
273
|
-
* }
|
|
274
|
-
* return <div onPaste={ onPaste }>{ children }</div>;
|
|
275
|
-
* }
|
|
276
|
-
* ```
|
|
277
|
-
* @return {UseSelectReturn<T>} A custom react hook.
|
|
278
|
-
*/
|
|
279
|
-
export default function useSelect(mapSelect, deps) {
|
|
280
|
-
// On initial call, on mount, determine the mode of this `useSelect` call
|
|
281
|
-
// and then never allow it to change on subsequent updates.
|
|
282
|
-
const staticSelectMode = typeof mapSelect !== 'function';
|
|
150
|
+
function useSelect(mapSelect, deps) {
|
|
151
|
+
const staticSelectMode = typeof mapSelect !== "function";
|
|
283
152
|
const staticSelectModeRef = useRef(staticSelectMode);
|
|
284
153
|
if (staticSelectMode !== staticSelectModeRef.current) {
|
|
285
|
-
const prevMode = staticSelectModeRef.current ?
|
|
286
|
-
const nextMode = staticSelectMode ?
|
|
287
|
-
throw new Error(
|
|
154
|
+
const prevMode = staticSelectModeRef.current ? "static" : "mapping";
|
|
155
|
+
const nextMode = staticSelectMode ? "static" : "mapping";
|
|
156
|
+
throw new Error(
|
|
157
|
+
`Switching useSelect from ${prevMode} to ${nextMode} is not allowed`
|
|
158
|
+
);
|
|
288
159
|
}
|
|
289
|
-
|
|
290
|
-
// `staticSelectMode` is not allowed to change during the hook instance's,
|
|
291
|
-
// lifetime, so the rules of hooks are not really violated.
|
|
292
160
|
return staticSelectMode ? _useStaticSelect(mapSelect) : _useMappingSelect(false, mapSelect, deps);
|
|
293
161
|
}
|
|
294
|
-
|
|
295
|
-
/**
|
|
296
|
-
* A variant of the `useSelect` hook that has the same API, but is a compatible
|
|
297
|
-
* Suspense-enabled data source.
|
|
298
|
-
*
|
|
299
|
-
* @template {MapSelect} T
|
|
300
|
-
* @param {T} mapSelect Function called on every state change. The
|
|
301
|
-
* returned value is exposed to the component
|
|
302
|
-
* using this hook. The function receives the
|
|
303
|
-
* `registry.suspendSelect` method as the first
|
|
304
|
-
* argument and the `registry` as the second one.
|
|
305
|
-
* @param {Array} deps A dependency array used to memoize the `mapSelect`
|
|
306
|
-
* so that the same `mapSelect` is invoked on every
|
|
307
|
-
* state change unless the dependencies change.
|
|
308
|
-
*
|
|
309
|
-
* @throws {Promise} A suspense Promise that is thrown if any of the called
|
|
310
|
-
* selectors is in an unresolved state.
|
|
311
|
-
*
|
|
312
|
-
* @return {ReturnType<T>} Data object returned by the `mapSelect` function.
|
|
313
|
-
*/
|
|
314
|
-
export function useSuspenseSelect(mapSelect, deps) {
|
|
162
|
+
function useSuspenseSelect(mapSelect, deps) {
|
|
315
163
|
return _useMappingSelect(true, mapSelect, deps);
|
|
316
164
|
}
|
|
317
|
-
|
|
165
|
+
export {
|
|
166
|
+
useSelect as default,
|
|
167
|
+
useSuspenseSelect
|
|
168
|
+
};
|
|
169
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"names":["createQueue","useRef","useCallback","useMemo","useSyncExternalStore","useDebugValue","isShallowEqual","useRegistry","useAsyncMode","renderQueue","warnOnUnstableReference","a","b","keys","Object","filter","k","console","warn","join","Store","registry","suspense","select","suspendSelect","queueContext","lastMapSelect","lastMapResult","lastMapResultValid","lastIsAsync","subscriber","didWarnUnstableReference","storeStatesOnMount","Map","getStoreState","name","_registry$stores$name","stores","store","getState","createSubscriber","activeStores","activeSubscriptions","Set","subscribe","listener","get","clear","onStoreChange","onChange","add","unsubs","subscribeStore","storeName","push","delete","unsub","values","cancel","updateStores","newStores","newStore","includes","subscription","mapSelect","isAsync","updateValue","listeningStores","current","mapResult","__unstableMarkListeningStores","globalThis","SCRIPT_DEBUG","secondMapResult","set","getValue","_useStaticSelect","_useMappingSelect","deps","selector","result","useSelect","staticSelectMode","staticSelectModeRef","prevMode","nextMode","Error","useSuspenseSelect"],"sources":["@wordpress/data/src/components/use-select/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createQueue } from '@wordpress/priority-queue';\nimport {\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n\tuseSyncExternalStore,\n\tuseDebugValue,\n} from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport useRegistry from '../registry-provider/use-registry';\nimport useAsyncMode from '../async-mode-provider/use-async-mode';\n\nconst renderQueue = createQueue();\n\nfunction warnOnUnstableReference( a, b ) {\n\tif ( ! a || ! b ) {\n\t\treturn;\n\t}\n\n\tconst keys =\n\t\ttypeof a === 'object' && typeof b === 'object'\n\t\t\t? Object.keys( a ).filter( ( k ) => a[ k ] !== b[ k ] )\n\t\t\t: [];\n\n\t// eslint-disable-next-line no-console\n\tconsole.warn(\n\t\t'The `useSelect` hook returns different values when called with the same state and parameters.\\n' +\n\t\t\t'This can lead to unnecessary re-renders and performance issues if not fixed.\\n\\n' +\n\t\t\t'Non-equal value keys: %s\\n\\n',\n\t\tkeys.join( ', ' )\n\t);\n}\n\n/**\n * @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor\n * @template {import('../../types').AnyConfig} C\n */\n/**\n * @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig\n * @template State\n * @template {Record<string,import('../../types').ActionCreator>} Actions\n * @template Selectors\n */\n/** @typedef {import('../../types').MapSelect} MapSelect */\n/**\n * @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn\n * @template {MapSelect|StoreDescriptor<any>} T\n */\n\nfunction Store( registry, suspense ) {\n\tconst select = suspense ? registry.suspendSelect : registry.select;\n\tconst queueContext = {};\n\tlet lastMapSelect;\n\tlet lastMapResult;\n\tlet lastMapResultValid = false;\n\tlet lastIsAsync;\n\tlet subscriber;\n\tlet didWarnUnstableReference;\n\tconst storeStatesOnMount = new Map();\n\n\tfunction getStoreState( name ) {\n\t\t// If there's no store property (custom generic store), return an empty\n\t\t// object. When comparing the state, the empty objects will cause the\n\t\t// equality check to fail, setting `lastMapResultValid` to false.\n\t\treturn registry.stores[ name ]?.store?.getState?.() ?? {};\n\t}\n\n\tconst createSubscriber = ( stores ) => {\n\t\t// The set of stores the `subscribe` function is supposed to subscribe to. Here it is\n\t\t// initialized, and then the `updateStores` function can add new stores to it.\n\t\tconst activeStores = [ ...stores ];\n\n\t\t// The `subscribe` function, which is passed to the `useSyncExternalStore` hook, could\n\t\t// be called multiple times to establish multiple subscriptions. That's why we need to\n\t\t// keep a set of active subscriptions;\n\t\tconst activeSubscriptions = new Set();\n\n\t\tfunction subscribe( listener ) {\n\t\t\t// Maybe invalidate the value right after subscription was created.\n\t\t\t// React will call `getValue` after subscribing, to detect store\n\t\t\t// updates that happened in the interval between the `getValue` call\n\t\t\t// during render and creating the subscription, which is slightly\n\t\t\t// delayed. We need to ensure that this second `getValue` call will\n\t\t\t// compute a fresh value only if any of the store states have\n\t\t\t// changed in the meantime.\n\t\t\tif ( lastMapResultValid ) {\n\t\t\t\tfor ( const name of activeStores ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tstoreStatesOnMount.get( name ) !== getStoreState( name )\n\t\t\t\t\t) {\n\t\t\t\t\t\tlastMapResultValid = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tstoreStatesOnMount.clear();\n\n\t\t\tconst onStoreChange = () => {\n\t\t\t\t// Invalidate the value on store update, so that a fresh value is computed.\n\t\t\t\tlastMapResultValid = false;\n\t\t\t\tlistener();\n\t\t\t};\n\n\t\t\tconst onChange = () => {\n\t\t\t\tif ( lastIsAsync ) {\n\t\t\t\t\trenderQueue.add( queueContext, onStoreChange );\n\t\t\t\t} else {\n\t\t\t\t\tonStoreChange();\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tconst unsubs = [];\n\t\t\tfunction subscribeStore( storeName ) {\n\t\t\t\tunsubs.push( registry.subscribe( onChange, storeName ) );\n\t\t\t}\n\n\t\t\tfor ( const storeName of activeStores ) {\n\t\t\t\tsubscribeStore( storeName );\n\t\t\t}\n\n\t\t\tactiveSubscriptions.add( subscribeStore );\n\n\t\t\treturn () => {\n\t\t\t\tactiveSubscriptions.delete( subscribeStore );\n\n\t\t\t\tfor ( const unsub of unsubs.values() ) {\n\t\t\t\t\t// The return value of the subscribe function could be undefined if the store is a custom generic store.\n\t\t\t\t\tunsub?.();\n\t\t\t\t}\n\t\t\t\t// Cancel existing store updates that were already scheduled.\n\t\t\t\trenderQueue.cancel( queueContext );\n\t\t\t};\n\t\t}\n\n\t\t// Check if `newStores` contains some stores we're not subscribed to yet, and add them.\n\t\tfunction updateStores( newStores ) {\n\t\t\tfor ( const newStore of newStores ) {\n\t\t\t\tif ( activeStores.includes( newStore ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// New `subscribe` calls will subscribe to `newStore`, too.\n\t\t\t\tactiveStores.push( newStore );\n\n\t\t\t\t// Add `newStore` to existing subscriptions.\n\t\t\t\tfor ( const subscription of activeSubscriptions ) {\n\t\t\t\t\tsubscription( newStore );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn { subscribe, updateStores };\n\t};\n\n\treturn ( mapSelect, isAsync ) => {\n\t\tfunction updateValue() {\n\t\t\t// If the last value is valid, and the `mapSelect` callback hasn't changed,\n\t\t\t// then we can safely return the cached value. The value can change only on\n\t\t\t// store update, and in that case value will be invalidated by the listener.\n\t\t\tif ( lastMapResultValid && mapSelect === lastMapSelect ) {\n\t\t\t\treturn lastMapResult;\n\t\t\t}\n\n\t\t\tconst listeningStores = { current: null };\n\t\t\tconst mapResult = registry.__unstableMarkListeningStores(\n\t\t\t\t() => mapSelect( select, registry ),\n\t\t\t\tlisteningStores\n\t\t\t);\n\n\t\t\tif ( globalThis.SCRIPT_DEBUG ) {\n\t\t\t\tif ( ! didWarnUnstableReference ) {\n\t\t\t\t\tconst secondMapResult = mapSelect( select, registry );\n\t\t\t\t\tif ( ! isShallowEqual( mapResult, secondMapResult ) ) {\n\t\t\t\t\t\twarnOnUnstableReference( mapResult, secondMapResult );\n\t\t\t\t\t\tdidWarnUnstableReference = true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( ! subscriber ) {\n\t\t\t\tfor ( const name of listeningStores.current ) {\n\t\t\t\t\tstoreStatesOnMount.set( name, getStoreState( name ) );\n\t\t\t\t}\n\t\t\t\tsubscriber = createSubscriber( listeningStores.current );\n\t\t\t} else {\n\t\t\t\tsubscriber.updateStores( listeningStores.current );\n\t\t\t}\n\n\t\t\t// If the new value is shallow-equal to the old one, keep the old one so\n\t\t\t// that we don't trigger unwanted updates that do a `===` check.\n\t\t\tif ( ! isShallowEqual( lastMapResult, mapResult ) ) {\n\t\t\t\tlastMapResult = mapResult;\n\t\t\t}\n\t\t\tlastMapSelect = mapSelect;\n\t\t\tlastMapResultValid = true;\n\t\t}\n\n\t\tfunction getValue() {\n\t\t\t// Update the value in case it's been invalidated or `mapSelect` has changed.\n\t\t\tupdateValue();\n\t\t\treturn lastMapResult;\n\t\t}\n\n\t\t// When transitioning from async to sync mode, cancel existing store updates\n\t\t// that have been scheduled, and invalidate the value so that it's freshly\n\t\t// computed. It might have been changed by the update we just cancelled.\n\t\tif ( lastIsAsync && ! isAsync ) {\n\t\t\tlastMapResultValid = false;\n\t\t\trenderQueue.cancel( queueContext );\n\t\t}\n\n\t\tupdateValue();\n\n\t\tlastIsAsync = isAsync;\n\n\t\t// Return a pair of functions that can be passed to `useSyncExternalStore`.\n\t\treturn { subscribe: subscriber.subscribe, getValue };\n\t};\n}\n\nfunction _useStaticSelect( storeName ) {\n\treturn useRegistry().select( storeName );\n}\n\nfunction _useMappingSelect( suspense, mapSelect, deps ) {\n\tconst registry = useRegistry();\n\tconst isAsync = useAsyncMode();\n\tconst store = useMemo(\n\t\t() => Store( registry, suspense ),\n\t\t[ registry, suspense ]\n\t);\n\n\t// These are \"pass-through\" dependencies from the parent hook,\n\t// and the parent should catch any hook rule violations.\n\tconst selector = useCallback( mapSelect, deps );\n\tconst { subscribe, getValue } = store( selector, isAsync );\n\tconst result = useSyncExternalStore( subscribe, getValue, getValue );\n\tuseDebugValue( result );\n\treturn result;\n}\n\n/**\n * Custom react hook for retrieving props from registered selectors.\n *\n * In general, this custom React hook follows the\n * [rules of hooks](https://react.dev/reference/rules/rules-of-hooks).\n *\n * @template {MapSelect | StoreDescriptor<any>} T\n * @param {T} mapSelect Function called on every state change. The returned value is\n * exposed to the component implementing this hook. The function\n * receives the `registry.select` method on the first argument\n * and the `registry` on the second argument.\n * When a store key is passed, all selectors for the store will be\n * returned. This is only meant for usage of these selectors in event\n * callbacks, not for data needed to create the element tree.\n * @param {unknown[]} deps If provided, this memoizes the mapSelect so the same `mapSelect` is\n * invoked on every state change unless the dependencies change.\n *\n * @example\n * ```js\n * import { useSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function HammerPriceDisplay( { currency } ) {\n * const price = useSelect( ( select ) => {\n * return select( myCustomStore ).getPrice( 'hammer', currency );\n * }, [ currency ] );\n * return new Intl.NumberFormat( 'en-US', {\n * style: 'currency',\n * currency,\n * } ).format( price );\n * }\n *\n * // Rendered in the application:\n * // <HammerPriceDisplay currency=\"USD\" />\n * ```\n *\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, the price will be retrieved from the store state using the\n * `mapSelect` callback on `useSelect`. If the currency prop changes then\n * any price in the state for that currency is retrieved. If the currency prop\n * doesn't change and other props are passed in that do change, the price will\n * not change because the dependency is just the currency.\n *\n * When data is only used in an event callback, the data should not be retrieved\n * on render, so it may be useful to get the selectors function instead.\n *\n * **Don't use `useSelect` this way when calling the selectors in the render\n * function because your component won't re-render on a data change.**\n *\n * ```js\n * import { useSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function Paste( { children } ) {\n * const { getSettings } = useSelect( myCustomStore );\n * function onPaste() {\n * // Do something with the settings.\n * const settings = getSettings();\n * }\n * return <div onPaste={ onPaste }>{ children }</div>;\n * }\n * ```\n * @return {UseSelectReturn<T>} A custom react hook.\n */\nexport default function useSelect( mapSelect, deps ) {\n\t// On initial call, on mount, determine the mode of this `useSelect` call\n\t// and then never allow it to change on subsequent updates.\n\tconst staticSelectMode = typeof mapSelect !== 'function';\n\tconst staticSelectModeRef = useRef( staticSelectMode );\n\n\tif ( staticSelectMode !== staticSelectModeRef.current ) {\n\t\tconst prevMode = staticSelectModeRef.current ? 'static' : 'mapping';\n\t\tconst nextMode = staticSelectMode ? 'static' : 'mapping';\n\t\tthrow new Error(\n\t\t\t`Switching useSelect from ${ prevMode } to ${ nextMode } is not allowed`\n\t\t);\n\t}\n\n\t// `staticSelectMode` is not allowed to change during the hook instance's,\n\t// lifetime, so the rules of hooks are not really violated.\n\treturn staticSelectMode\n\t\t? _useStaticSelect( mapSelect )\n\t\t: _useMappingSelect( false, mapSelect, deps );\n}\n\n/**\n * A variant of the `useSelect` hook that has the same API, but is a compatible\n * Suspense-enabled data source.\n *\n * @template {MapSelect} T\n * @param {T} mapSelect Function called on every state change. The\n * returned value is exposed to the component\n * using this hook. The function receives the\n * `registry.suspendSelect` method as the first\n * argument and the `registry` as the second one.\n * @param {Array} deps A dependency array used to memoize the `mapSelect`\n * so that the same `mapSelect` is invoked on every\n * state change unless the dependencies change.\n *\n * @throws {Promise} A suspense Promise that is thrown if any of the called\n * selectors is in an unresolved state.\n *\n * @return {ReturnType<T>} Data object returned by the `mapSelect` function.\n */\nexport function useSuspenseSelect( mapSelect, deps ) {\n\treturn _useMappingSelect( true, mapSelect, deps );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/use-select/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createQueue } from '@wordpress/priority-queue';\nimport {\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n\tuseSyncExternalStore,\n\tuseDebugValue,\n} from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport useRegistry from '../registry-provider/use-registry';\nimport useAsyncMode from '../async-mode-provider/use-async-mode';\n\nconst renderQueue = createQueue();\n\nfunction warnOnUnstableReference( a, b ) {\n\tif ( ! a || ! b ) {\n\t\treturn;\n\t}\n\n\tconst keys =\n\t\ttypeof a === 'object' && typeof b === 'object'\n\t\t\t? Object.keys( a ).filter( ( k ) => a[ k ] !== b[ k ] )\n\t\t\t: [];\n\n\t// eslint-disable-next-line no-console\n\tconsole.warn(\n\t\t'The `useSelect` hook returns different values when called with the same state and parameters.\\n' +\n\t\t\t'This can lead to unnecessary re-renders and performance issues if not fixed.\\n\\n' +\n\t\t\t'Non-equal value keys: %s\\n\\n',\n\t\tkeys.join( ', ' )\n\t);\n}\n\n/**\n * @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor\n * @template {import('../../types').AnyConfig} C\n */\n/**\n * @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig\n * @template State\n * @template {Record<string,import('../../types').ActionCreator>} Actions\n * @template Selectors\n */\n/** @typedef {import('../../types').MapSelect} MapSelect */\n/**\n * @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn\n * @template {MapSelect|StoreDescriptor<any>} T\n */\n\nfunction Store( registry, suspense ) {\n\tconst select = suspense ? registry.suspendSelect : registry.select;\n\tconst queueContext = {};\n\tlet lastMapSelect;\n\tlet lastMapResult;\n\tlet lastMapResultValid = false;\n\tlet lastIsAsync;\n\tlet subscriber;\n\tlet didWarnUnstableReference;\n\tconst storeStatesOnMount = new Map();\n\n\tfunction getStoreState( name ) {\n\t\t// If there's no store property (custom generic store), return an empty\n\t\t// object. When comparing the state, the empty objects will cause the\n\t\t// equality check to fail, setting `lastMapResultValid` to false.\n\t\treturn registry.stores[ name ]?.store?.getState?.() ?? {};\n\t}\n\n\tconst createSubscriber = ( stores ) => {\n\t\t// The set of stores the `subscribe` function is supposed to subscribe to. Here it is\n\t\t// initialized, and then the `updateStores` function can add new stores to it.\n\t\tconst activeStores = [ ...stores ];\n\n\t\t// The `subscribe` function, which is passed to the `useSyncExternalStore` hook, could\n\t\t// be called multiple times to establish multiple subscriptions. That's why we need to\n\t\t// keep a set of active subscriptions;\n\t\tconst activeSubscriptions = new Set();\n\n\t\tfunction subscribe( listener ) {\n\t\t\t// Maybe invalidate the value right after subscription was created.\n\t\t\t// React will call `getValue` after subscribing, to detect store\n\t\t\t// updates that happened in the interval between the `getValue` call\n\t\t\t// during render and creating the subscription, which is slightly\n\t\t\t// delayed. We need to ensure that this second `getValue` call will\n\t\t\t// compute a fresh value only if any of the store states have\n\t\t\t// changed in the meantime.\n\t\t\tif ( lastMapResultValid ) {\n\t\t\t\tfor ( const name of activeStores ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tstoreStatesOnMount.get( name ) !== getStoreState( name )\n\t\t\t\t\t) {\n\t\t\t\t\t\tlastMapResultValid = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tstoreStatesOnMount.clear();\n\n\t\t\tconst onStoreChange = () => {\n\t\t\t\t// Invalidate the value on store update, so that a fresh value is computed.\n\t\t\t\tlastMapResultValid = false;\n\t\t\t\tlistener();\n\t\t\t};\n\n\t\t\tconst onChange = () => {\n\t\t\t\tif ( lastIsAsync ) {\n\t\t\t\t\trenderQueue.add( queueContext, onStoreChange );\n\t\t\t\t} else {\n\t\t\t\t\tonStoreChange();\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tconst unsubs = [];\n\t\t\tfunction subscribeStore( storeName ) {\n\t\t\t\tunsubs.push( registry.subscribe( onChange, storeName ) );\n\t\t\t}\n\n\t\t\tfor ( const storeName of activeStores ) {\n\t\t\t\tsubscribeStore( storeName );\n\t\t\t}\n\n\t\t\tactiveSubscriptions.add( subscribeStore );\n\n\t\t\treturn () => {\n\t\t\t\tactiveSubscriptions.delete( subscribeStore );\n\n\t\t\t\tfor ( const unsub of unsubs.values() ) {\n\t\t\t\t\t// The return value of the subscribe function could be undefined if the store is a custom generic store.\n\t\t\t\t\tunsub?.();\n\t\t\t\t}\n\t\t\t\t// Cancel existing store updates that were already scheduled.\n\t\t\t\trenderQueue.cancel( queueContext );\n\t\t\t};\n\t\t}\n\n\t\t// Check if `newStores` contains some stores we're not subscribed to yet, and add them.\n\t\tfunction updateStores( newStores ) {\n\t\t\tfor ( const newStore of newStores ) {\n\t\t\t\tif ( activeStores.includes( newStore ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// New `subscribe` calls will subscribe to `newStore`, too.\n\t\t\t\tactiveStores.push( newStore );\n\n\t\t\t\t// Add `newStore` to existing subscriptions.\n\t\t\t\tfor ( const subscription of activeSubscriptions ) {\n\t\t\t\t\tsubscription( newStore );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn { subscribe, updateStores };\n\t};\n\n\treturn ( mapSelect, isAsync ) => {\n\t\tfunction updateValue() {\n\t\t\t// If the last value is valid, and the `mapSelect` callback hasn't changed,\n\t\t\t// then we can safely return the cached value. The value can change only on\n\t\t\t// store update, and in that case value will be invalidated by the listener.\n\t\t\tif ( lastMapResultValid && mapSelect === lastMapSelect ) {\n\t\t\t\treturn lastMapResult;\n\t\t\t}\n\n\t\t\tconst listeningStores = { current: null };\n\t\t\tconst mapResult = registry.__unstableMarkListeningStores(\n\t\t\t\t() => mapSelect( select, registry ),\n\t\t\t\tlisteningStores\n\t\t\t);\n\n\t\t\tif ( globalThis.SCRIPT_DEBUG ) {\n\t\t\t\tif ( ! didWarnUnstableReference ) {\n\t\t\t\t\tconst secondMapResult = mapSelect( select, registry );\n\t\t\t\t\tif ( ! isShallowEqual( mapResult, secondMapResult ) ) {\n\t\t\t\t\t\twarnOnUnstableReference( mapResult, secondMapResult );\n\t\t\t\t\t\tdidWarnUnstableReference = true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( ! subscriber ) {\n\t\t\t\tfor ( const name of listeningStores.current ) {\n\t\t\t\t\tstoreStatesOnMount.set( name, getStoreState( name ) );\n\t\t\t\t}\n\t\t\t\tsubscriber = createSubscriber( listeningStores.current );\n\t\t\t} else {\n\t\t\t\tsubscriber.updateStores( listeningStores.current );\n\t\t\t}\n\n\t\t\t// If the new value is shallow-equal to the old one, keep the old one so\n\t\t\t// that we don't trigger unwanted updates that do a `===` check.\n\t\t\tif ( ! isShallowEqual( lastMapResult, mapResult ) ) {\n\t\t\t\tlastMapResult = mapResult;\n\t\t\t}\n\t\t\tlastMapSelect = mapSelect;\n\t\t\tlastMapResultValid = true;\n\t\t}\n\n\t\tfunction getValue() {\n\t\t\t// Update the value in case it's been invalidated or `mapSelect` has changed.\n\t\t\tupdateValue();\n\t\t\treturn lastMapResult;\n\t\t}\n\n\t\t// When transitioning from async to sync mode, cancel existing store updates\n\t\t// that have been scheduled, and invalidate the value so that it's freshly\n\t\t// computed. It might have been changed by the update we just cancelled.\n\t\tif ( lastIsAsync && ! isAsync ) {\n\t\t\tlastMapResultValid = false;\n\t\t\trenderQueue.cancel( queueContext );\n\t\t}\n\n\t\tupdateValue();\n\n\t\tlastIsAsync = isAsync;\n\n\t\t// Return a pair of functions that can be passed to `useSyncExternalStore`.\n\t\treturn { subscribe: subscriber.subscribe, getValue };\n\t};\n}\n\nfunction _useStaticSelect( storeName ) {\n\treturn useRegistry().select( storeName );\n}\n\nfunction _useMappingSelect( suspense, mapSelect, deps ) {\n\tconst registry = useRegistry();\n\tconst isAsync = useAsyncMode();\n\tconst store = useMemo(\n\t\t() => Store( registry, suspense ),\n\t\t[ registry, suspense ]\n\t);\n\n\t// These are \"pass-through\" dependencies from the parent hook,\n\t// and the parent should catch any hook rule violations.\n\tconst selector = useCallback( mapSelect, deps );\n\tconst { subscribe, getValue } = store( selector, isAsync );\n\tconst result = useSyncExternalStore( subscribe, getValue, getValue );\n\tuseDebugValue( result );\n\treturn result;\n}\n\n/**\n * Custom react hook for retrieving props from registered selectors.\n *\n * In general, this custom React hook follows the\n * [rules of hooks](https://react.dev/reference/rules/rules-of-hooks).\n *\n * @template {MapSelect | StoreDescriptor<any>} T\n * @param {T} mapSelect Function called on every state change. The returned value is\n * exposed to the component implementing this hook. The function\n * receives the `registry.select` method on the first argument\n * and the `registry` on the second argument.\n * When a store key is passed, all selectors for the store will be\n * returned. This is only meant for usage of these selectors in event\n * callbacks, not for data needed to create the element tree.\n * @param {unknown[]} deps If provided, this memoizes the mapSelect so the same `mapSelect` is\n * invoked on every state change unless the dependencies change.\n *\n * @example\n * ```js\n * import { useSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function HammerPriceDisplay( { currency } ) {\n * const price = useSelect( ( select ) => {\n * return select( myCustomStore ).getPrice( 'hammer', currency );\n * }, [ currency ] );\n * return new Intl.NumberFormat( 'en-US', {\n * style: 'currency',\n * currency,\n * } ).format( price );\n * }\n *\n * // Rendered in the application:\n * // <HammerPriceDisplay currency=\"USD\" />\n * ```\n *\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, the price will be retrieved from the store state using the\n * `mapSelect` callback on `useSelect`. If the currency prop changes then\n * any price in the state for that currency is retrieved. If the currency prop\n * doesn't change and other props are passed in that do change, the price will\n * not change because the dependency is just the currency.\n *\n * When data is only used in an event callback, the data should not be retrieved\n * on render, so it may be useful to get the selectors function instead.\n *\n * **Don't use `useSelect` this way when calling the selectors in the render\n * function because your component won't re-render on a data change.**\n *\n * ```js\n * import { useSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function Paste( { children } ) {\n * const { getSettings } = useSelect( myCustomStore );\n * function onPaste() {\n * // Do something with the settings.\n * const settings = getSettings();\n * }\n * return <div onPaste={ onPaste }>{ children }</div>;\n * }\n * ```\n * @return {UseSelectReturn<T>} A custom react hook.\n */\nexport default function useSelect( mapSelect, deps ) {\n\t// On initial call, on mount, determine the mode of this `useSelect` call\n\t// and then never allow it to change on subsequent updates.\n\tconst staticSelectMode = typeof mapSelect !== 'function';\n\tconst staticSelectModeRef = useRef( staticSelectMode );\n\n\tif ( staticSelectMode !== staticSelectModeRef.current ) {\n\t\tconst prevMode = staticSelectModeRef.current ? 'static' : 'mapping';\n\t\tconst nextMode = staticSelectMode ? 'static' : 'mapping';\n\t\tthrow new Error(\n\t\t\t`Switching useSelect from ${ prevMode } to ${ nextMode } is not allowed`\n\t\t);\n\t}\n\n\t// `staticSelectMode` is not allowed to change during the hook instance's,\n\t// lifetime, so the rules of hooks are not really violated.\n\treturn staticSelectMode\n\t\t? _useStaticSelect( mapSelect )\n\t\t: _useMappingSelect( false, mapSelect, deps );\n}\n\n/**\n * A variant of the `useSelect` hook that has the same API, but is a compatible\n * Suspense-enabled data source.\n *\n * @template {MapSelect} T\n * @param {T} mapSelect Function called on every state change. The\n * returned value is exposed to the component\n * using this hook. The function receives the\n * `registry.suspendSelect` method as the first\n * argument and the `registry` as the second one.\n * @param {Array} deps A dependency array used to memoize the `mapSelect`\n * so that the same `mapSelect` is invoked on every\n * state change unless the dependencies change.\n *\n * @throws {Promise} A suspense Promise that is thrown if any of the called\n * selectors is in an unresolved state.\n *\n * @return {ReturnType<T>} Data object returned by the `mapSelect` function.\n */\nexport function useSuspenseSelect( mapSelect, deps ) {\n\treturn _useMappingSelect( true, mapSelect, deps );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,104 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
* @param {Function} mapDispatchToProps A function of returning an object of
|
|
18
|
-
* prop names where value is a
|
|
19
|
-
* dispatch-bound action creator, or a
|
|
20
|
-
* function to be called with the
|
|
21
|
-
* component's props and returning an
|
|
22
|
-
* action creator.
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* ```jsx
|
|
26
|
-
* function Button( { onClick, children } ) {
|
|
27
|
-
* return <button type="button" onClick={ onClick }>{ children }</button>;
|
|
28
|
-
* }
|
|
29
|
-
*
|
|
30
|
-
* import { withDispatch } from '@wordpress/data';
|
|
31
|
-
* import { store as myCustomStore } from 'my-custom-store';
|
|
32
|
-
*
|
|
33
|
-
* const SaleButton = withDispatch( ( dispatch, ownProps ) => {
|
|
34
|
-
* const { startSale } = dispatch( myCustomStore );
|
|
35
|
-
* const { discountPercent } = ownProps;
|
|
36
|
-
*
|
|
37
|
-
* return {
|
|
38
|
-
* onClick() {
|
|
39
|
-
* startSale( discountPercent );
|
|
40
|
-
* },
|
|
41
|
-
* };
|
|
42
|
-
* } )( Button );
|
|
43
|
-
*
|
|
44
|
-
* // Rendered in the application:
|
|
45
|
-
* //
|
|
46
|
-
* // <SaleButton discountPercent="20">Start Sale!</SaleButton>
|
|
47
|
-
* ```
|
|
48
|
-
*
|
|
49
|
-
* @example
|
|
50
|
-
* In the majority of cases, it will be sufficient to use only two first params
|
|
51
|
-
* passed to `mapDispatchToProps` as illustrated in the previous example.
|
|
52
|
-
* However, there might be some very advanced use cases where using the
|
|
53
|
-
* `registry` object might be used as a tool to optimize the performance of
|
|
54
|
-
* your component. Using `select` function from the registry might be useful
|
|
55
|
-
* when you need to fetch some dynamic data from the store at the time when the
|
|
56
|
-
* event is fired, but at the same time, you never use it to render your
|
|
57
|
-
* component. In such scenario, you can avoid using the `withSelect` higher
|
|
58
|
-
* order component to compute such prop, which might lead to unnecessary
|
|
59
|
-
* re-renders of your component caused by its frequent value change.
|
|
60
|
-
* Keep in mind, that `mapDispatchToProps` must return an object with functions
|
|
61
|
-
* only.
|
|
62
|
-
*
|
|
63
|
-
* ```jsx
|
|
64
|
-
* function Button( { onClick, children } ) {
|
|
65
|
-
* return <button type="button" onClick={ onClick }>{ children }</button>;
|
|
66
|
-
* }
|
|
67
|
-
*
|
|
68
|
-
* import { withDispatch } from '@wordpress/data';
|
|
69
|
-
* import { store as myCustomStore } from 'my-custom-store';
|
|
70
|
-
*
|
|
71
|
-
* const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
|
|
72
|
-
* // Stock number changes frequently.
|
|
73
|
-
* const { getStockNumber } = select( myCustomStore );
|
|
74
|
-
* const { startSale } = dispatch( myCustomStore );
|
|
75
|
-
* return {
|
|
76
|
-
* onClick() {
|
|
77
|
-
* const discountPercent = getStockNumber() > 50 ? 10 : 20;
|
|
78
|
-
* startSale( discountPercent );
|
|
79
|
-
* },
|
|
80
|
-
* };
|
|
81
|
-
* } )( Button );
|
|
82
|
-
*
|
|
83
|
-
* // Rendered in the application:
|
|
84
|
-
* //
|
|
85
|
-
* // <SaleButton>Start Sale!</SaleButton>
|
|
86
|
-
* ```
|
|
87
|
-
*
|
|
88
|
-
* _Note:_ It is important that the `mapDispatchToProps` function always
|
|
89
|
-
* returns an object with the same keys. For example, it should not contain
|
|
90
|
-
* conditions under which a different value would be returned.
|
|
91
|
-
*
|
|
92
|
-
* @return {ComponentType} Enhanced component with merged dispatcher props.
|
|
93
|
-
*/
|
|
94
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
95
|
-
const withDispatch = mapDispatchToProps => createHigherOrderComponent(WrappedComponent => ownProps => {
|
|
96
|
-
const mapDispatch = (dispatch, registry) => mapDispatchToProps(dispatch, ownProps, registry);
|
|
97
|
-
const dispatchProps = useDispatchWithMap(mapDispatch, []);
|
|
98
|
-
return /*#__PURE__*/_jsx(WrappedComponent, {
|
|
99
|
-
...ownProps,
|
|
100
|
-
...dispatchProps
|
|
101
|
-
});
|
|
102
|
-
}, 'withDispatch');
|
|
103
|
-
export default withDispatch;
|
|
104
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createHigherOrderComponent } from "@wordpress/compose";
|
|
3
|
+
import { useDispatchWithMap } from "../use-dispatch";
|
|
4
|
+
const withDispatch = (mapDispatchToProps) => createHigherOrderComponent(
|
|
5
|
+
(WrappedComponent) => (ownProps) => {
|
|
6
|
+
const mapDispatch = (dispatch, registry) => mapDispatchToProps(dispatch, ownProps, registry);
|
|
7
|
+
const dispatchProps = useDispatchWithMap(mapDispatch, []);
|
|
8
|
+
return /* @__PURE__ */ jsx(WrappedComponent, { ...ownProps, ...dispatchProps });
|
|
9
|
+
},
|
|
10
|
+
"withDispatch"
|
|
11
|
+
);
|
|
12
|
+
var with_dispatch_default = withDispatch;
|
|
13
|
+
export {
|
|
14
|
+
with_dispatch_default as default
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/with-dispatch/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useDispatchWithMap } from '../use-dispatch';\n\n/** @typedef {import('react').ComponentType} ComponentType */\n\n/**\n * Higher-order component used to add dispatch props using registered action\n * creators.\n *\n * @param {Function} mapDispatchToProps A function of returning an object of\n * prop names where value is a\n * dispatch-bound action creator, or a\n * function to be called with the\n * component's props and returning an\n * action creator.\n *\n * @example\n * ```jsx\n * function Button( { onClick, children } ) {\n * return <button type=\"button\" onClick={ onClick }>{ children }</button>;\n * }\n *\n * import { withDispatch } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * const SaleButton = withDispatch( ( dispatch, ownProps ) => {\n * const { startSale } = dispatch( myCustomStore );\n * const { discountPercent } = ownProps;\n *\n * return {\n * onClick() {\n * startSale( discountPercent );\n * },\n * };\n * } )( Button );\n *\n * // Rendered in the application:\n * //\n * // <SaleButton discountPercent=\"20\">Start Sale!</SaleButton>\n * ```\n *\n * @example\n * In the majority of cases, it will be sufficient to use only two first params\n * passed to `mapDispatchToProps` as illustrated in the previous example.\n * However, there might be some very advanced use cases where using the\n * `registry` object might be used as a tool to optimize the performance of\n * your component. Using `select` function from the registry might be useful\n * when you need to fetch some dynamic data from the store at the time when the\n * event is fired, but at the same time, you never use it to render your\n * component. In such scenario, you can avoid using the `withSelect` higher\n * order component to compute such prop, which might lead to unnecessary\n * re-renders of your component caused by its frequent value change.\n * Keep in mind, that `mapDispatchToProps` must return an object with functions\n * only.\n *\n * ```jsx\n * function Button( { onClick, children } ) {\n * return <button type=\"button\" onClick={ onClick }>{ children }</button>;\n * }\n *\n * import { withDispatch } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {\n * // Stock number changes frequently.\n * const { getStockNumber } = select( myCustomStore );\n * const { startSale } = dispatch( myCustomStore );\n * return {\n * onClick() {\n * const discountPercent = getStockNumber() > 50 ? 10 : 20;\n * startSale( discountPercent );\n * },\n * };\n * } )( Button );\n *\n * // Rendered in the application:\n * //\n * // <SaleButton>Start Sale!</SaleButton>\n * ```\n *\n * _Note:_ It is important that the `mapDispatchToProps` function always\n * returns an object with the same keys. For example, it should not contain\n * conditions under which a different value would be returned.\n *\n * @return {ComponentType} Enhanced component with merged dispatcher props.\n */\nconst withDispatch = ( mapDispatchToProps ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( ownProps ) => {\n\t\t\tconst mapDispatch = ( dispatch, registry ) =>\n\t\t\t\tmapDispatchToProps( dispatch, ownProps, registry );\n\t\t\tconst dispatchProps = useDispatchWithMap( mapDispatch, [] );\n\t\t\treturn <WrappedComponent { ...ownProps } { ...dispatchProps } />;\n\t\t},\n\t\t'withDispatch'\n\t);\n\nexport default withDispatch;\n"],
|
|
5
|
+
"mappings": "AAmGU;AAhGV,SAAS,kCAAkC;AAK3C,SAAS,0BAA0B;AAqFnC,MAAM,eAAe,CAAE,uBACtB;AAAA,EACC,CAAE,qBAAsB,CAAE,aAAc;AACvC,UAAM,cAAc,CAAE,UAAU,aAC/B,mBAAoB,UAAU,UAAU,QAAS;AAClD,UAAM,gBAAgB,mBAAoB,aAAa,CAAC,CAAE;AAC1D,WAAO,oBAAC,oBAAmB,GAAG,UAAa,GAAG,eAAgB;AAAA,EAC/D;AAAA,EACA;AACD;AAED,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,27 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
* registry context passed as its `registry` prop.
|
|
14
|
-
*
|
|
15
|
-
* @param {Component} OriginalComponent Original component.
|
|
16
|
-
*
|
|
17
|
-
* @return {Component} Enhanced component.
|
|
18
|
-
*/
|
|
19
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
|
-
const withRegistry = createHigherOrderComponent(OriginalComponent => props => /*#__PURE__*/_jsx(RegistryConsumer, {
|
|
21
|
-
children: registry => /*#__PURE__*/_jsx(OriginalComponent, {
|
|
22
|
-
...props,
|
|
23
|
-
registry: registry
|
|
24
|
-
})
|
|
25
|
-
}), 'withRegistry');
|
|
26
|
-
export default withRegistry;
|
|
27
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createHigherOrderComponent } from "@wordpress/compose";
|
|
3
|
+
import { RegistryConsumer } from "../registry-provider";
|
|
4
|
+
const withRegistry = createHigherOrderComponent(
|
|
5
|
+
(OriginalComponent) => (props) => /* @__PURE__ */ jsx(RegistryConsumer, { children: (registry) => /* @__PURE__ */ jsx(OriginalComponent, { ...props, registry }) }),
|
|
6
|
+
"withRegistry"
|
|
7
|
+
);
|
|
8
|
+
var with_registry_default = withRegistry;
|
|
9
|
+
export {
|
|
10
|
+
with_registry_default as default
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/with-registry/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { RegistryConsumer } from '../registry-provider';\n\n/**\n * Higher-order component which renders the original component with the current\n * registry context passed as its `registry` prop.\n *\n * @param {Component} OriginalComponent Original component.\n *\n * @return {Component} Enhanced component.\n */\nconst withRegistry = createHigherOrderComponent(\n\t( OriginalComponent ) => ( props ) => (\n\t\t<RegistryConsumer>\n\t\t\t{ ( registry ) => (\n\t\t\t\t<OriginalComponent { ...props } registry={ registry } />\n\t\t\t) }\n\t\t</RegistryConsumer>\n\t),\n\t'withRegistry'\n);\n\nexport default withRegistry;\n"],
|
|
5
|
+
"mappings": "AAsBI;AAnBJ,SAAS,kCAAkC;AAK3C,SAAS,wBAAwB;AAUjC,MAAM,eAAe;AAAA,EACpB,CAAE,sBAAuB,CAAE,UAC1B,oBAAC,oBACE,WAAE,aACH,oBAAC,qBAAoB,GAAG,OAAQ,UAAsB,GAExD;AAAA,EAED;AACD;AAEA,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|