@wordpress/data 6.1.4 → 6.1.6-next.33ec3857e2.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.1.5-next.0 (2021-12-20)
+
+### Bug Fix
+
+-   Corrected expect type of action creators and selectors in Redux store configuration type
+-   Move `redux` to regular dependencies and update it to version `^4.1.2`.
+
+### Internal
+
+-   Changed names of store-related types to better reflect their use and role.
+-   Changed "storeDefinition" to "storeDescriptor" to better reflect its use and role.
+
 ## 6.1.0 (2021-09-09)
 
 ### New Features

package/README.md

@@ -16,7 +16,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ## Registering a Store
 
-Use the `register` function to add your own store to the centralized data registry. This function accepts one argument – a store definition object that can be created with `createReduxStore` factory function. `createReduxStore` accepts two arguments: a name to identify the module, and an object with values describing how your state is represented, modified, and accessed. At a minimum, you must provide a reducer function describing the shape of your state and how it changes in response to actions dispatched to the store.
+Use the `register` function to add your own store to the centralized data registry. This function accepts one argument – a store descriptor that can be created with `createReduxStore` factory function. `createReduxStore` accepts two arguments: a name to identify the module, and a configuration object with values describing how your state is represented, modified, and accessed. At a minimum, you must provide a reducer function describing the shape of your state and how it changes in response to actions dispatched to the store.
 
 ```js
 import apiFetch from '@wordpress/api-fetch';
@@ -102,7 +102,7 @@ const store = createReduxStore( 'my-shop', {
 register( store );
 ```
 
-The return value of `createReduxStore` is the `WPDataStore` object that contains two properties:
+The return value of `createReduxStore` is the `StoreDescriptor` object that contains two properties:
 
 -   `name` (`string`) – the name of the store
 -   `instantiate` (`Function`) - it returns a [Redux-like store object](https://redux.js.org/basics/store) with the following methods:
@@ -164,43 +164,33 @@ Integrating an existing redux store with its own reducers, store enhancers and m
 _Example:_
 
 ```js
+import { mapValues } from 'lodash';
+import { register } from '@wordpress/data';
 import existingSelectors from './existing-app/selectors';
 import existingActions from './existing-app/actions';
 import createStore from './existing-app/store';
 
-import { registerGenericStore } from 'wordpress/data';
-
 const reduxStore = createStore();
 
-const mappedSelectors = Object.keys( existingSelectors ).reduce(
-	( acc, selectorKey ) => {
-		acc[ selectorKey ] = ( ...args ) =>
-			existingSelectors[ selectorKey ]( reduxStore.getState(), ...args );
-		return acc;
-	},
-	{}
+const boundSelectors = mapValues(
+	existingSelectors,
+	( selector ) => ( ...args ) => selector( reduxStore.getState(), ...args )
 );
 
-const mappedActions = Object.keys( existingActions ).reduce(
-	( acc, actionKey ) => {
-		acc[ actionKey ] = ( ...args ) =>
-			reduxStore.dispatch( existingActions[ actionKey ]( ...args ) );
-		return acc;
-	},
-	{}
+const boundActions = mapValues( existingActions, ( action ) => ( ...args ) =>
+	reduxStore.dispatch( action( ...args ) )
 );
 
 const genericStore = {
-	getSelectors() {
-		return mappedSelectors;
-	},
-	getActions() {
-		return mappedActions;
-	},
-	subscribe: reduxStore.subscribe,
+	name: 'existing-app',
+	instantiate: () => ( {
+		getSelectors: () => boundSelectors,
+		getActions: () => boundActions,
+		subscribe: reduxStore.subscribe,
+	} ),
 };
 
-registerGenericStore( 'existing-app', genericStore );
+register( genericStore );
 ```
 
 It is also possible to implement a completely custom store from scratch:
@@ -208,39 +198,49 @@ It is also possible to implement a completely custom store from scratch:
 _Example:_
 
 ```js
-import { registerGenericStore } from '@wordpress/data';
-
-function createCustomStore() {
-	let storeChanged = () => {};
-	const prices = { hammer: 7.5 };
-
-	const selectors = {
-		getPrice( itemName ) {
-			return prices[ itemName ];
-		},
-	};
-
-	const actions = {
-		setPrice( itemName, price ) {
-			prices[ itemName ] = price;
-			storeChanged();
-		},
-	};
+import { register } from '@wordpress/data';
 
+function customStore() {
 	return {
-		getSelectors() {
-			return selectors;
-		},
-		getActions() {
-			return actions;
-		},
-		subscribe( listener ) {
-			storeChanged = listener;
+		name: 'custom-data',
+		instantiate: () => {
+			const listeners = new Set();
+			const prices = { hammer: 7.5 };
+
+			function storeChanged() {
+				for ( const listener of listeners ) {
+					listener();
+				}
+			}
+
+			function subscribe( listener ) {
+				listeners.add( listener );
+				return () => listeners.delete( listener );
+			}
+
+			const selectors = {
+				getPrice( itemName ) {
+					return prices[ itemName ];
+				},
+			};
+
+			const actions = {
+				setPrice( itemName, price ) {
+					prices[ itemName ] = price;
+					storeChanged();
+				},
+			};
+
+			return {
+				getSelectors: () => selectors,
+				getActions: () => actions,
+				subscribe,
+			};
 		},
 	};
 }
 
-registerGenericStore( 'custom-data', createCustomStore() );
+register( customStore );
 ```
 
 ## Comparison with Redux
@@ -350,7 +350,7 @@ Undocumented declaration.
 
 ### createReduxStore
 
-Creates a data store definition for the provided Redux store options containing
+Creates a data store descriptor for the provided Redux store configuration containing
 properties describing reducer, actions, selectors, controls and resolvers.
 
 _Usage_
@@ -369,11 +369,11 @@ const store = createReduxStore( 'demo', {
 _Parameters_
 
 -   _key_ `string`: Unique namespace identifier.
--   _options_ `WPDataReduxStoreConfig`: Registered store options, with properties describing reducer, actions, selectors, and resolvers.
+-   _options_ `ReduxStoreConfig`: Registered store options, with properties describing reducer, actions, selectors, and resolvers.
 
 _Returns_
 
--   `WPDataStore`: Store Object.
+-   `StoreDescriptor`: Store Object.
 
 ### createRegistry
 
@@ -486,7 +486,7 @@ dispatch( 'my-shop' ).setPrice( 'hammer', 9.75 );
 
 _Parameters_
 
--   _storeNameOrDefinition_ `string|WPDataStore`: Unique namespace identifier for the store or the store definition.
+-   _storeNameOrDescriptor_ `string|StoreDescriptor`: Unique namespace identifier for the store or the store descriptor.
 
 _Returns_
 
@@ -506,7 +506,7 @@ _Type_
 
 ### register
 
-Registers a standard `@wordpress/data` store definition.
+Registers a standard `@wordpress/data` store descriptor.
 
 _Usage_
 
@@ -524,18 +524,18 @@ register( store );
 
 _Parameters_
 
--   _store_ `WPDataStore`: Store definition.
+-   _store_ `StoreDescriptor`: Store descriptor.
 
 ### registerGenericStore
 
-> **Deprecated** Use `register` instead.
+> **Deprecated** Use `register( storeDescriptor )` instead.
 
-Registers a generic store.
+Registers a generic store instance.
 
 _Parameters_
 
--   _key_ `string`: Store registry key.
--   _config_ `Object`: Configuration (getSelectors, getActions, subscribe).
+-   _name_ `string`: Store registry name.
+-   _store_ `Object`: Store instance (`{ getSelectors, getActions, subscribe }`).
 
 ### registerStore
 
@@ -610,7 +610,7 @@ resolveSelect( 'my-shop' ).getPrice( 'hammer' ).then( console.log );
 
 _Parameters_
 
--   _storeNameOrDefinition_ `string|WPDataStore`: Unique namespace identifier for the store or the store definition.
+-   _storeNameOrDescriptor_ `string|StoreDescriptor`: Unique namespace identifier for the store or the store descriptor.
 
 _Returns_
 
@@ -618,7 +618,7 @@ _Returns_
 
 ### select
 
-Given the name or definition of a registered store, returns an object of the store's selectors.
+Given the name or descriptor of a registered store, returns an object of the store's selectors.
 The selector functions are been pre-bound to pass the current state automatically.
 As a consumer, you need only pass arguments of the selector, if applicable.
 
@@ -632,7 +632,7 @@ select( 'my-shop' ).getPrice( 'hammer' );
 
 _Parameters_
 
--   _storeNameOrDefinition_ `string|WPDataStore`: Unique namespace identifier for the store or the store definition.
+-   _storeNameOrDescriptor_ `string|StoreDescriptor`: Unique namespace identifier for the store or the store descriptor.
 
 _Returns_
 
@@ -717,7 +717,7 @@ const SaleButton = ( { children } ) => {
 
 _Parameters_
 
--   _storeNameOrDefinition_ `[string|WPDataStore]`: Optionally provide the name of the store or its definition from which to retrieve action creators. If not provided, the registry.dispatch function is returned instead.
+-   _storeNameOrDescriptor_ `[string|StoreDescriptor]`: Optionally provide the name of the store or its descriptor from which to retrieve action creators. If not provided, the registry.dispatch function is returned instead.
 
 _Returns_
 
@@ -820,7 +820,7 @@ function Paste( { children } ) {
 
 _Parameters_
 
--   _\_mapSelect_ `Function|WPDataStore|string`: Function called on every state change. The returned value is exposed to the component implementing this hook. The function receives the `registry.select` method on the first argument and the `registry` on the second argument. When a store key is passed, all selectors for the store will be returned. This is only meant for usage of these selectors in event callbacks, not for data needed to create the element tree.
+-   _mapSelect_ `Function|StoreDescriptor|string`: Function called on every state change. The returned value is exposed to the component implementing this hook. The function receives the `registry.select` method on the first argument and the `registry` on the second argument. When a store key is passed, all selectors for the store will be returned. This is only meant for usage of these selectors in event callbacks, not for data needed to create the element tree.
 -   _deps_ `Array`: If provided, this memoizes the mapSelect so the same `mapSelect` is invoked on every state change unless the dependencies change.
 
 _Returns_

package/build/components/use-dispatch/use-dispatch.js

@@ -13,7 +13,7 @@ var _useRegistry = _interopRequireDefault(require("../registry-provider/use-regi
  * Internal dependencies
  */
 
-/** @typedef {import('./types').WPDataStore} WPDataStore */
+/** @typedef {import('../../types').StoreDescriptor} StoreDescriptor */
 
 /**
  * A custom react hook returning the current registry dispatch actions creators.
@@ -21,11 +21,11 @@ var _useRegistry = _interopRequireDefault(require("../registry-provider/use-regi
  * Note: The component using this hook must be within the context of a
  * RegistryProvider.
  *
- * @param {string|WPDataStore} [storeNameOrDefinition] Optionally provide the name of the
- *                                                     store or its definition from which to
- *                                                     retrieve action creators. If not
- *                                                     provided, the registry.dispatch
- *                                                     function is returned instead.
+ * @param {string|StoreDescriptor} [storeNameOrDescriptor] Optionally provide the name of the
+ *                                                         store or its descriptor from which to
+ *                                                         retrieve action creators. If not
+ *                                                         provided, the registry.dispatch
+ *                                                         function is returned instead.
  *
  * @example
  * This illustrates a pattern where you may need to retrieve dynamic data from
@@ -59,11 +59,11 @@ var _useRegistry = _interopRequireDefault(require("../registry-provider/use-regi
  * ```
  * @return {Function}  A custom react hook.
  */
-const useDispatch = storeNameOrDefinition => {
+const useDispatch = storeNameOrDescriptor => {
   const {
     dispatch
   } = (0, _useRegistry.default)();
-  return storeNameOrDefinition === void 0 ? dispatch : dispatch(storeNameOrDefinition);
+  return storeNameOrDescriptor === void 0 ? dispatch : dispatch(storeNameOrDescriptor);
 };
 
 var _default = useDispatch;

package/build/components/use-dispatch/use-dispatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/data/src/components/use-dispatch/use-dispatch.js"],"names":["useDispatch","storeNameOrDefinition","dispatch"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW,GAAKC,qBAAF,IAA6B;AAChD,QAAM;AAAEC,IAAAA;AAAF,MAAe,2BAArB;AACA,SAAOD,qBAAqB,KAAK,KAAK,CAA/B,GACJC,QADI,GAEJA,QAAQ,CAAED,qBAAF,CAFX;AAGA,CALD;;eAOeD,W","sourcesContent":["/**\n * Internal dependencies\n */\nimport useRegistry from '../registry-provider/use-registry';\n\n/** @typedef {import('./types').WPDataStore} WPDataStore */\n\n/**\n * A custom react hook returning the current registry dispatch actions creators.\n *\n * Note: The component using this hook must be within the context of a\n * RegistryProvider.\n *\n * @param {string|WPDataStore} [storeNameOrDefinition] Optionally provide the name of the\n *                                                     store or its definition from which to\n *                                                     retrieve action creators. If not\n *                                                     provided, the registry.dispatch\n *                                                     function is returned instead.\n *\n * @example\n * This illustrates a pattern where you may need to retrieve dynamic data from\n * the server via the `useSelect` hook to use in combination with the dispatch\n * action.\n *\n * ```jsx\n * import { useDispatch, useSelect } from '@wordpress/data';\n * import { useCallback } from '@wordpress/element';\n *\n * function Button( { onClick, children } ) {\n *   return <button type=\"button\" onClick={ onClick }>{ children }</button>\n * }\n *\n * const SaleButton = ( { children } ) => {\n *   const { stockNumber } = useSelect(\n *     ( select ) => select( 'my-shop' ).getStockNumber(),\n *     []\n *   );\n *   const { startSale } = useDispatch( 'my-shop' );\n *   const onClick = useCallback( () => {\n *     const discountPercent = stockNumber > 50 ? 10: 20;\n *     startSale( discountPercent );\n *   }, [ stockNumber ] );\n *   return <Button onClick={ onClick }>{ children }</Button>\n * }\n *\n * // Rendered somewhere in the application:\n * //\n * // <SaleButton>Start Sale!</SaleButton>\n * ```\n * @return {Function}  A custom react hook.\n */\nconst useDispatch = ( storeNameOrDefinition ) => {\n\tconst { dispatch } = useRegistry();\n\treturn storeNameOrDefinition === void 0\n\t\t? dispatch\n\t\t: dispatch( storeNameOrDefinition );\n};\n\nexport default useDispatch;\n"]}
+{"version":3,"sources":["@wordpress/data/src/components/use-dispatch/use-dispatch.js"],"names":["useDispatch","storeNameOrDescriptor","dispatch"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW,GAAKC,qBAAF,IAA6B;AAChD,QAAM;AAAEC,IAAAA;AAAF,MAAe,2BAArB;AACA,SAAOD,qBAAqB,KAAK,KAAK,CAA/B,GACJC,QADI,GAEJA,QAAQ,CAAED,qBAAF,CAFX;AAGA,CALD;;eAOeD,W","sourcesContent":["/**\n * Internal dependencies\n */\nimport useRegistry from '../registry-provider/use-registry';\n\n/** @typedef {import('../../types').StoreDescriptor} StoreDescriptor */\n\n/**\n * A custom react hook returning the current registry dispatch actions creators.\n *\n * Note: The component using this hook must be within the context of a\n * RegistryProvider.\n *\n * @param {string|StoreDescriptor} [storeNameOrDescriptor] Optionally provide the name of the\n *                                                         store or its descriptor from which to\n *                                                         retrieve action creators. If not\n *                                                         provided, the registry.dispatch\n *                                                         function is returned instead.\n *\n * @example\n * This illustrates a pattern where you may need to retrieve dynamic data from\n * the server via the `useSelect` hook to use in combination with the dispatch\n * action.\n *\n * ```jsx\n * import { useDispatch, useSelect } from '@wordpress/data';\n * import { useCallback } from '@wordpress/element';\n *\n * function Button( { onClick, children } ) {\n *   return <button type=\"button\" onClick={ onClick }>{ children }</button>\n * }\n *\n * const SaleButton = ( { children } ) => {\n *   const { stockNumber } = useSelect(\n *     ( select ) => select( 'my-shop' ).getStockNumber(),\n *     []\n *   );\n *   const { startSale } = useDispatch( 'my-shop' );\n *   const onClick = useCallback( () => {\n *     const discountPercent = stockNumber > 50 ? 10: 20;\n *     startSale( discountPercent );\n *   }, [ stockNumber ] );\n *   return <Button onClick={ onClick }>{ children }</Button>\n * }\n *\n * // Rendered somewhere in the application:\n * //\n * // <SaleButton>Start Sale!</SaleButton>\n * ```\n * @return {Function}  A custom react hook.\n */\nconst useDispatch = ( storeNameOrDescriptor ) => {\n\tconst { dispatch } = useRegistry();\n\treturn storeNameOrDescriptor === void 0\n\t\t? dispatch\n\t\t: dispatch( storeNameOrDescriptor );\n};\n\nexport default useDispatch;\n"]}

package/build/components/use-select/index.js

@@ -32,8 +32,10 @@ var _useAsyncMode = _interopRequireDefault(require("../async-mode-provider/use-a
 /**
  * Internal dependencies
  */
+const noop = () => {};
+
 const renderQueue = (0, _priorityQueue.createQueue)();
-/** @typedef {import('./types').WPDataStore} WPDataStore */
+/** @typedef {import('../../types').StoreDescriptor} StoreDescriptor */
 
 /**
  * Custom react hook for retrieving props from registered selectors.
@@ -41,20 +43,20 @@ const renderQueue = (0, _priorityQueue.createQueue)();
  * In general, this custom React hook follows the
  * [rules of hooks](https://reactjs.org/docs/hooks-rules.html).
  *
- * @param {Function|WPDataStore|string} _mapSelect Function called on every state change. The
- *                                                 returned value is exposed to the component
- *                                                 implementing this hook. The function receives
- *                                                 the `registry.select` method on the first
- *                                                 argument and the `registry` on the second
- *                                                 argument.
- *                                                 When a store key is passed, all selectors for
- *                                                 the store will be returned. This is only meant
- *                                                 for usage of these selectors in event
- *                                                 callbacks, not for data needed to create the
- *                                                 element tree.
- * @param {Array}                       deps       If provided, this memoizes the mapSelect so the
- *                                                 same `mapSelect` is invoked on every state
- *                                                 change unless the dependencies change.
+ * @param {Function|StoreDescriptor|string} mapSelect Function called on every state change. The
+ *                                                    returned value is exposed to the component
+ *                                                    implementing this hook. The function receives
+ *                                                    the `registry.select` method on the first
+ *                                                    argument and the `registry` on the second
+ *                                                    argument.
+ *                                                    When a store key is passed, all selectors for
+ *                                                    the store will be returned. This is only meant
+ *                                                    for usage of these selectors in event
+ *                                                    callbacks, not for data needed to create the
+ *                                                    element tree.
+ * @param {Array}                           deps      If provided, this memoizes the mapSelect so the
+ *                                                    same `mapSelect` is invoked on every state
+ *                                                    change unless the dependencies change.
  *
  * @example
  * ```js
@@ -103,14 +105,24 @@ const renderQueue = (0, _priorityQueue.createQueue)();
  * @return {Function}  A custom react hook.
  */
 
-function useSelect(_mapSelect, deps) {
-  const isWithoutMapping = typeof _mapSelect !== 'function';
+function useSelect(mapSelect, deps) {
+  const hasMappingFunction = 'function' === typeof mapSelect; // If we're recalling a store by its name or by
+  // its descriptor then we won't be caching the
+  // calls to `mapSelect` because we won't be calling it.
 
-  if (isWithoutMapping) {
+  if (!hasMappingFunction) {
     deps = [];
-  }
+  } // Because of the "rule of hooks" we have to call `useCallback`
+  // on every invocation whether or not we have a real function
+  // for `mapSelect`. we'll create this intermediate variable to
+  // fulfill that need and then reference it with our "real"
+  // `_mapSelect` if we can.
+
+
+  const callbackMapper = (0, _element.useCallback)(hasMappingFunction ? mapSelect : noop, deps);
+
+  const _mapSelect = hasMappingFunction ? callbackMapper : null;
 
-  const mapSelect = (0, _element.useCallback)(_mapSelect, deps);
   const registry = (0, _useRegistry.default)();
   const isAsync = (0, _useAsyncMode.default)(); // React can sometimes clear the `useMemo` cache.
   // We use the cache-stable `useMemoOne` to avoid
@@ -124,7 +136,7 @@ function useSelect(_mapSelect, deps) {
   const latestIsAsync = (0, _element.useRef)(isAsync);
   const latestMapOutput = (0, _element.useRef)();
   const latestMapOutputError = (0, _element.useRef)();
-  const isMountedAndNotUnsubscribing = (0, _element.useRef)(); // Keep track of the stores being selected in the mapSelect function,
+  const isMountedAndNotUnsubscribing = (0, _element.useRef)(); // Keep track of the stores being selected in the _mapSelect function,
   // and only subscribe to those stores later.
 
   const listeningStores = (0, _element.useRef)([]);
@@ -135,34 +147,35 @@ function useSelect(_mapSelect, deps) {
   const depsChangedFlag = (0, _element.useMemo)(() => ({}), deps || []);
   let mapOutput;
 
-  if (!isWithoutMapping) {
-    try {
-      if (latestMapSelect.current !== mapSelect || latestMapOutputError.current) {
-        mapOutput = trapSelect(() => mapSelect(registry.select, registry));
-      } else {
-        mapOutput = latestMapOutput.current;
-      }
-    } catch (error) {
-      let errorMessage = `An error occurred while running 'mapSelect': ${error.message}`;
+  if (_mapSelect) {
+    mapOutput = latestMapOutput.current;
+    const hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;
+    const lastMapSelectFailed = !!latestMapOutputError.current;
+
+    if (hasReplacedMapSelect || lastMapSelectFailed) {
+      try {
+        mapOutput = trapSelect(() => _mapSelect(registry.select, registry));
+      } catch (error) {
+        let errorMessage = `An error occurred while running 'mapSelect': ${error.message}`;
 
-      if (latestMapOutputError.current) {
-        errorMessage += `\nThe error may be correlated with this previous error:\n`;
-        errorMessage += `${latestMapOutputError.current.stack}\n\n`;
-        errorMessage += 'Original stack trace:';
-      } // eslint-disable-next-line no-console
+        if (latestMapOutputError.current) {
+          errorMessage += `\nThe error may be correlated with this previous error:\n`;
+          errorMessage += `${latestMapOutputError.current.stack}\n\n`;
+          errorMessage += 'Original stack trace:';
+        } // eslint-disable-next-line no-console
 
 
-      console.error(errorMessage);
-      mapOutput = latestMapOutput.current;
+        console.error(errorMessage);
+      }
     }
   }
 
   (0, _compose.useIsomorphicLayoutEffect)(() => {
-    if (isWithoutMapping) {
+    if (!hasMappingFunction) {
       return;
     }
 
-    latestMapSelect.current = mapSelect;
+    latestMapSelect.current = _mapSelect;
     latestMapOutput.current = mapOutput;
     latestMapOutputError.current = undefined;
     isMountedAndNotUnsubscribing.current = true; // This has to run after the other ref updates
@@ -176,7 +189,7 @@ function useSelect(_mapSelect, deps) {
     }
   });
   (0, _compose.useIsomorphicLayoutEffect)(() => {
-    if (isWithoutMapping) {
+    if (!hasMappingFunction) {
       return;
     }
 
@@ -220,8 +233,10 @@ function useSelect(_mapSelect, deps) {
 
       unsubscribers.forEach(unsubscribe => unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe());
       renderQueue.flush(queueContext);
-    };
-  }, [registry, trapSelect, depsChangedFlag, isWithoutMapping]);
-  return isWithoutMapping ? registry.select(_mapSelect) : mapOutput;
+    }; // If you're tempted to eliminate the spread dependencies below don't do it!
+    // We're passing these in from the calling function and want to make sure we're
+    // examining every individual value inside the `deps` array.
+  }, [registry, trapSelect, hasMappingFunction, depsChangedFlag]);
+  return hasMappingFunction ? mapOutput : registry.select(mapSelect);
 }
 //# sourceMappingURL=index.js.map

package/build/components/use-select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/data/src/components/use-select/index.js"],"names":["renderQueue","useSelect","_mapSelect","deps","isWithoutMapping","mapSelect","registry","isAsync","queueContext","queue","forceRender","s","latestMapSelect","latestIsAsync","latestMapOutput","latestMapOutputError","isMountedAndNotUnsubscribing","listeningStores","trapSelect","callback","__experimentalMarkListeningStores","depsChangedFlag","mapOutput","current","select","error","errorMessage","message","stack","console","undefined","flush","onStoreChange","newMapOutput","add","onChange","unsubscribers","map","storeName","__experimentalSubscribeStore","forEach","unsubscribe"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { createQueue } from '@wordpress/priority-queue';\nimport { useRef, useCallback, useReducer, useMemo } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\nimport { useIsomorphicLayoutEffect } from '@wordpress/compose';\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\n/** @typedef {import('./types').WPDataStore} WPDataStore */\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://reactjs.org/docs/hooks-rules.html).\n *\n * @param {Function|WPDataStore|string} _mapSelect Function called on every state change. The\n *                                                 returned value is exposed to the component\n *                                                 implementing this hook. The function receives\n *                                                 the `registry.select` method on the first\n *                                                 argument and the `registry` on the second\n *                                                 argument.\n *                                                 When a store key is passed, all selectors for\n *                                                 the store will be returned. This is only meant\n *                                                 for usage of these selectors in event\n *                                                 callbacks, not for data needed to create the\n *                                                 element tree.\n * @param {Array}                       deps       If provided, this memoizes the mapSelect so the\n *                                                 same `mapSelect` is invoked on every state\n *                                                 change unless the dependencies change.\n *\n * @example\n * ```js\n * import { useSelect } from '@wordpress/data';\n *\n * function HammerPriceDisplay( { currency } ) {\n *   const price = useSelect( ( select ) => {\n *     return select( 'my-shop' ).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 *\n * function Paste( { children } ) {\n *   const { getSettings } = useSelect( 'my-shop' );\n *   function onPaste() {\n *     // Do something with the settings.\n *     const settings = getSettings();\n *   }\n *   return <div onPaste={ onPaste }>{ children }</div>;\n * }\n * ```\n *\n * @return {Function}  A custom react hook.\n */\nexport default function useSelect( _mapSelect, deps ) {\n\tconst isWithoutMapping = typeof _mapSelect !== 'function';\n\n\tif ( isWithoutMapping ) {\n\t\tdeps = [];\n\t}\n\n\tconst mapSelect = useCallback( _mapSelect, deps );\n\tconst registry = useRegistry();\n\tconst isAsync = useAsyncMode();\n\t// React can sometimes clear the `useMemo` cache.\n\t// We use the cache-stable `useMemoOne` to avoid\n\t// losing queues.\n\tconst queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );\n\tconst [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );\n\n\tconst latestMapSelect = useRef();\n\tconst latestIsAsync = useRef( isAsync );\n\tconst latestMapOutput = useRef();\n\tconst latestMapOutputError = useRef();\n\tconst isMountedAndNotUnsubscribing = useRef();\n\n\t// Keep track of the stores being selected in the mapSelect function,\n\t// and only subscribe to those stores later.\n\tconst listeningStores = useRef( [] );\n\tconst trapSelect = useCallback(\n\t\t( callback ) =>\n\t\t\tregistry.__experimentalMarkListeningStores(\n\t\t\t\tcallback,\n\t\t\t\tlisteningStores\n\t\t\t),\n\t\t[ registry ]\n\t);\n\n\t// Generate a \"flag\" for used in the effect dependency array.\n\t// It's different than just using `mapSelect` since deps could be undefined,\n\t// in that case, we would still want to memoize it.\n\tconst depsChangedFlag = useMemo( () => ( {} ), deps || [] );\n\n\tlet mapOutput;\n\n\tif ( ! isWithoutMapping ) {\n\t\ttry {\n\t\t\tif (\n\t\t\t\tlatestMapSelect.current !== mapSelect ||\n\t\t\t\tlatestMapOutputError.current\n\t\t\t) {\n\t\t\t\tmapOutput = trapSelect( () =>\n\t\t\t\t\tmapSelect( registry.select, registry )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tmapOutput = latestMapOutput.current;\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\tlet errorMessage = `An error occurred while running 'mapSelect': ${ error.message }`;\n\n\t\t\tif ( latestMapOutputError.current ) {\n\t\t\t\terrorMessage += `\\nThe error may be correlated with this previous error:\\n`;\n\t\t\t\terrorMessage += `${ latestMapOutputError.current.stack }\\n\\n`;\n\t\t\t\terrorMessage += 'Original stack trace:';\n\t\t\t}\n\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error( errorMessage );\n\t\t\tmapOutput = latestMapOutput.current;\n\t\t}\n\t}\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tif ( isWithoutMapping ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlatestMapSelect.current = mapSelect;\n\t\tlatestMapOutput.current = mapOutput;\n\t\tlatestMapOutputError.current = undefined;\n\t\tisMountedAndNotUnsubscribing.current = true;\n\n\t\t// This has to run after the other ref updates\n\t\t// to avoid using stale values in the flushed\n\t\t// callbacks or potentially overwriting a\n\t\t// changed `latestMapOutput.current`.\n\t\tif ( latestIsAsync.current !== isAsync ) {\n\t\t\tlatestIsAsync.current = isAsync;\n\t\t\trenderQueue.flush( queueContext );\n\t\t}\n\t} );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tif ( isWithoutMapping ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst onStoreChange = () => {\n\t\t\tif ( isMountedAndNotUnsubscribing.current ) {\n\t\t\t\ttry {\n\t\t\t\t\tconst newMapOutput = trapSelect( () =>\n\t\t\t\t\t\tlatestMapSelect.current( registry.select, registry )\n\t\t\t\t\t);\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tisShallowEqual( latestMapOutput.current, newMapOutput )\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tlatestMapOutput.current = newMapOutput;\n\t\t\t\t} catch ( error ) {\n\t\t\t\t\tlatestMapOutputError.current = error;\n\t\t\t\t}\n\t\t\t\tforceRender();\n\t\t\t}\n\t\t};\n\n\t\t// catch any possible state changes during mount before the subscription\n\t\t// could be set.\n\t\tif ( latestIsAsync.current ) {\n\t\t\trenderQueue.add( queueContext, onStoreChange );\n\t\t} else {\n\t\t\tonStoreChange();\n\t\t}\n\n\t\tconst onChange = () => {\n\t\t\tif ( latestIsAsync.current ) {\n\t\t\t\trenderQueue.add( queueContext, onStoreChange );\n\t\t\t} else {\n\t\t\t\tonStoreChange();\n\t\t\t}\n\t\t};\n\n\t\tconst unsubscribers = listeningStores.current.map( ( storeName ) =>\n\t\t\tregistry.__experimentalSubscribeStore( storeName, onChange )\n\t\t);\n\n\t\treturn () => {\n\t\t\tisMountedAndNotUnsubscribing.current = false;\n\t\t\t// The return value of the subscribe function could be undefined if the store is a custom generic store.\n\t\t\tunsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );\n\t\t\trenderQueue.flush( queueContext );\n\t\t};\n\t}, [ registry, trapSelect, depsChangedFlag, isWithoutMapping ] );\n\n\treturn isWithoutMapping ? registry.select( _mapSelect ) : mapOutput;\n}\n"]}
+{"version":3,"sources":["@wordpress/data/src/components/use-select/index.js"],"names":["noop","renderQueue","useSelect","mapSelect","deps","hasMappingFunction","callbackMapper","_mapSelect","registry","isAsync","queueContext","queue","forceRender","s","latestMapSelect","latestIsAsync","latestMapOutput","latestMapOutputError","isMountedAndNotUnsubscribing","listeningStores","trapSelect","callback","__experimentalMarkListeningStores","depsChangedFlag","mapOutput","current","hasReplacedMapSelect","lastMapSelectFailed","select","error","errorMessage","message","stack","console","undefined","flush","onStoreChange","newMapOutput","add","onChange","unsubscribers","map","storeName","__experimentalSubscribeStore","forEach","unsubscribe"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { createQueue } from '@wordpress/priority-queue';\nimport { useRef, useCallback, useMemo, useReducer } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\nimport { useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useRegistry from '../registry-provider/use-registry';\nimport useAsyncMode from '../async-mode-provider/use-async-mode';\n\nconst noop = () => {};\nconst renderQueue = createQueue();\n\n/** @typedef {import('../../types').StoreDescriptor} StoreDescriptor */\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://reactjs.org/docs/hooks-rules.html).\n *\n * @param {Function|StoreDescriptor|string} mapSelect Function called on every state change. The\n *                                                    returned value is exposed to the component\n *                                                    implementing this hook. The function receives\n *                                                    the `registry.select` method on the first\n *                                                    argument and the `registry` on the second\n *                                                    argument.\n *                                                    When a store key is passed, all selectors for\n *                                                    the store will be returned. This is only meant\n *                                                    for usage of these selectors in event\n *                                                    callbacks, not for data needed to create the\n *                                                    element tree.\n * @param {Array}                           deps      If provided, this memoizes the mapSelect so the\n *                                                    same `mapSelect` is invoked on every state\n *                                                    change unless the dependencies change.\n *\n * @example\n * ```js\n * import { useSelect } from '@wordpress/data';\n *\n * function HammerPriceDisplay( { currency } ) {\n *   const price = useSelect( ( select ) => {\n *     return select( 'my-shop' ).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 *\n * function Paste( { children } ) {\n *   const { getSettings } = useSelect( 'my-shop' );\n *   function onPaste() {\n *     // Do something with the settings.\n *     const settings = getSettings();\n *   }\n *   return <div onPaste={ onPaste }>{ children }</div>;\n * }\n * ```\n *\n * @return {Function}  A custom react hook.\n */\nexport default function useSelect( mapSelect, deps ) {\n\tconst hasMappingFunction = 'function' === typeof mapSelect;\n\n\t// If we're recalling a store by its name or by\n\t// its descriptor then we won't be caching the\n\t// calls to `mapSelect` because we won't be calling it.\n\tif ( ! hasMappingFunction ) {\n\t\tdeps = [];\n\t}\n\n\t// Because of the \"rule of hooks\" we have to call `useCallback`\n\t// on every invocation whether or not we have a real function\n\t// for `mapSelect`. we'll create this intermediate variable to\n\t// fulfill that need and then reference it with our \"real\"\n\t// `_mapSelect` if we can.\n\tconst callbackMapper = useCallback(\n\t\thasMappingFunction ? mapSelect : noop,\n\t\tdeps\n\t);\n\tconst _mapSelect = hasMappingFunction ? callbackMapper : null;\n\n\tconst registry = useRegistry();\n\tconst isAsync = useAsyncMode();\n\t// React can sometimes clear the `useMemo` cache.\n\t// We use the cache-stable `useMemoOne` to avoid\n\t// losing queues.\n\tconst queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );\n\tconst [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );\n\n\tconst latestMapSelect = useRef();\n\tconst latestIsAsync = useRef( isAsync );\n\tconst latestMapOutput = useRef();\n\tconst latestMapOutputError = useRef();\n\tconst isMountedAndNotUnsubscribing = useRef();\n\n\t// Keep track of the stores being selected in the _mapSelect function,\n\t// and only subscribe to those stores later.\n\tconst listeningStores = useRef( [] );\n\tconst trapSelect = useCallback(\n\t\t( callback ) =>\n\t\t\tregistry.__experimentalMarkListeningStores(\n\t\t\t\tcallback,\n\t\t\t\tlisteningStores\n\t\t\t),\n\t\t[ registry ]\n\t);\n\n\t// Generate a \"flag\" for used in the effect dependency array.\n\t// It's different than just using `mapSelect` since deps could be undefined,\n\t// in that case, we would still want to memoize it.\n\tconst depsChangedFlag = useMemo( () => ( {} ), deps || [] );\n\n\tlet mapOutput;\n\n\tif ( _mapSelect ) {\n\t\tmapOutput = latestMapOutput.current;\n\t\tconst hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;\n\t\tconst lastMapSelectFailed = !! latestMapOutputError.current;\n\n\t\tif ( hasReplacedMapSelect || lastMapSelectFailed ) {\n\t\t\ttry {\n\t\t\t\tmapOutput = trapSelect( () =>\n\t\t\t\t\t_mapSelect( registry.select, registry )\n\t\t\t\t);\n\t\t\t} catch ( error ) {\n\t\t\t\tlet errorMessage = `An error occurred while running 'mapSelect': ${ error.message }`;\n\n\t\t\t\tif ( latestMapOutputError.current ) {\n\t\t\t\t\terrorMessage += `\\nThe error may be correlated with this previous error:\\n`;\n\t\t\t\t\terrorMessage += `${ latestMapOutputError.current.stack }\\n\\n`;\n\t\t\t\t\terrorMessage += 'Original stack trace:';\n\t\t\t\t}\n\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error( errorMessage );\n\t\t\t}\n\t\t}\n\t}\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tif ( ! hasMappingFunction ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlatestMapSelect.current = _mapSelect;\n\t\tlatestMapOutput.current = mapOutput;\n\t\tlatestMapOutputError.current = undefined;\n\t\tisMountedAndNotUnsubscribing.current = true;\n\n\t\t// This has to run after the other ref updates\n\t\t// to avoid using stale values in the flushed\n\t\t// callbacks or potentially overwriting a\n\t\t// changed `latestMapOutput.current`.\n\t\tif ( latestIsAsync.current !== isAsync ) {\n\t\t\tlatestIsAsync.current = isAsync;\n\t\t\trenderQueue.flush( queueContext );\n\t\t}\n\t} );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tif ( ! hasMappingFunction ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst onStoreChange = () => {\n\t\t\tif ( isMountedAndNotUnsubscribing.current ) {\n\t\t\t\ttry {\n\t\t\t\t\tconst newMapOutput = trapSelect( () =>\n\t\t\t\t\t\tlatestMapSelect.current( registry.select, registry )\n\t\t\t\t\t);\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tisShallowEqual( latestMapOutput.current, newMapOutput )\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tlatestMapOutput.current = newMapOutput;\n\t\t\t\t} catch ( error ) {\n\t\t\t\t\tlatestMapOutputError.current = error;\n\t\t\t\t}\n\t\t\t\tforceRender();\n\t\t\t}\n\t\t};\n\n\t\t// catch any possible state changes during mount before the subscription\n\t\t// could be set.\n\t\tif ( latestIsAsync.current ) {\n\t\t\trenderQueue.add( queueContext, onStoreChange );\n\t\t} else {\n\t\t\tonStoreChange();\n\t\t}\n\n\t\tconst onChange = () => {\n\t\t\tif ( latestIsAsync.current ) {\n\t\t\t\trenderQueue.add( queueContext, onStoreChange );\n\t\t\t} else {\n\t\t\t\tonStoreChange();\n\t\t\t}\n\t\t};\n\n\t\tconst unsubscribers = listeningStores.current.map( ( storeName ) =>\n\t\t\tregistry.__experimentalSubscribeStore( storeName, onChange )\n\t\t);\n\n\t\treturn () => {\n\t\t\tisMountedAndNotUnsubscribing.current = false;\n\t\t\t// The return value of the subscribe function could be undefined if the store is a custom generic store.\n\t\t\tunsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );\n\t\t\trenderQueue.flush( queueContext );\n\t\t};\n\t\t// If you're tempted to eliminate the spread dependencies below don't do it!\n\t\t// We're passing these in from the calling function and want to make sure we're\n\t\t// examining every individual value inside the `deps` array.\n\t}, [ registry, trapSelect, hasMappingFunction, depsChangedFlag ] );\n\n\treturn hasMappingFunction ? mapOutput : registry.select( mapSelect );\n}\n"]}