@wordpress/data 6.11.0 → 6.14.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 6.14.0 (2022-07-27)
+
+## 6.13.0 (2022-07-13)
+
+### Enhancements
+
+-   Use `useDebugValue` in `useSelect` to better display data in React DevTools ([#42225](https://github.com/WordPress/gutenberg/pull/42225)).
+
+## 6.12.0 (2022-06-29)
+
 ## 6.11.0 (2022-06-15)
 
 ## 6.10.0 (2022-06-01)

package/README.md

@@ -278,10 +278,11 @@ _Usage_
 
 ```js
 import { useSelect, AsyncModeProvider } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 function BlockCount() {
 	const count = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getBlockCount();
+		return select( blockEditorStore ).getBlockCount();
 	}, [] );
 
 	return count;
@@ -374,11 +375,11 @@ const store = createReduxStore( 'demo', {
 _Parameters_
 
 -   _key_ `string`: Unique namespace identifier.
--   _options_ `ReduxStoreConfig`: Registered store options, with properties describing reducer, actions, selectors, and resolvers.
+-   _options_ `ReduxStoreConfig<State,Actions,Selectors>`: Registered store options, with properties describing reducer, actions, selectors, and resolvers.
 
 _Returns_
 
--   `StoreDescriptor`: Store Object.
+-   `StoreDescriptor<ReduxStoreConfig<State,Actions,Selectors>>`: Store Object.
 
 ### createRegistry
 
@@ -446,15 +447,18 @@ that supports also selecting from other registered stores.
 _Usage_
 
 ```js
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+
 const getCurrentPostId = createRegistrySelector( ( select ) => ( state ) => {
-	return select( 'core/editor' ).getCurrentPostId();
+	return select( editorStore ).getCurrentPostId();
 } );
 
 const getPostEdits = createRegistrySelector( ( select ) => ( state ) => {
 	// calling another registry selector just like any other function
 	const postType = getCurrentPostType( state );
 	const postId = getCurrentPostId( state );
-	return select( 'core' ).getEntityRecordEdits(
+	return select( coreStore ).getEntityRecordEdits(
 		'postType',
 		postType,
 		postId
@@ -477,7 +481,7 @@ _Returns_
 
 ### dispatch
 
-Given the name of a registered store, returns an object of the store's action creators.
+Given a store descriptor, returns an object of the store's action creators.
 Calling an action creator will cause it to be dispatched, updating the state value accordingly.
 
 Note: Action creators returned by the dispatch will return a promise when
@@ -487,13 +491,14 @@ _Usage_
 
 ```js
 import { dispatch } from '@wordpress/data';
+import { store as myCustomStore } from 'my-custom-store';
 
-dispatch( 'my-shop' ).setPrice( 'hammer', 9.75 );
+dispatch( myCustomStore ).setPrice( 'hammer', 9.75 );
 ```
 
 _Parameters_
 
--   _storeNameOrDescriptor_ `string|StoreDescriptor`: Unique namespace identifier for the store or the store descriptor.
+-   _storeNameOrDescriptor_ `StoreDescriptor|string`: The store descriptor. The legacy calling convention of passing the store name is also supported.
 
 _Returns_
 
@@ -602,22 +607,22 @@ example.
 
 ### resolveSelect
 
-Given the name of a registered store, returns an object containing the store's
-selectors pre-bound to state so that you only need to supply additional arguments,
-and modified so that they return promises that resolve to their eventual values,
-after any resolvers have ran.
+Given a store descriptor, returns an object containing the store's selectors pre-bound to state
+so that you only need to supply additional arguments, and modified so that they return promises
+that resolve to their eventual values, after any resolvers have ran.
 
 _Usage_
 
 ```js
 import { resolveSelect } from '@wordpress/data';
+import { store as myCustomStore } from 'my-custom-store';
 
-resolveSelect( 'my-shop' ).getPrice( 'hammer' ).then( console.log );
+resolveSelect( myCustomStore ).getPrice( 'hammer' ).then( console.log );
 ```
 
 _Parameters_
 
--   _storeNameOrDescriptor_ `string|StoreDescriptor`: Unique namespace identifier for the store or the store descriptor.
+-   _storeNameOrDescriptor_ `StoreDescriptor|string`: The store descriptor. The legacy calling convention of passing the store name is also supported.
 
 _Returns_
 
@@ -625,7 +630,7 @@ _Returns_
 
 ### select
 
-Given the name or descriptor of a registered store, returns an object of the store's selectors.
+Given a store descriptor, 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.
 
@@ -633,13 +638,14 @@ _Usage_
 
 ```js
 import { select } from '@wordpress/data';
+import { store as myCustomStore } from 'my-custom-store';
 
-select( 'my-shop' ).getPrice( 'hammer' );
+select( myCustomStore ).getPrice( 'hammer' );
 ```
 
 _Parameters_
 
--   _storeNameOrDescriptor_ `string|StoreDescriptor`: Unique namespace identifier for the store or the store descriptor.
+-   _storeNameOrDescriptor_ `StoreDescriptor|string`: The store descriptor. The legacy calling convention of passing the store name is also supported.
 
 _Returns_
 
@@ -671,13 +677,13 @@ _Parameters_
 
 ### suspendSelect
 
-Given the name of a registered store, returns an object containing the store's
-selectors pre-bound to state so that you only need to supply additional arguments,
-and modified so that they throw promises in case the selector is not resolved yet.
+Given a store descriptor, returns an object containing the store's selectors pre-bound to state
+so that you only need to supply additional arguments, and modified so that they throw promises
+in case the selector is not resolved yet.
 
 _Parameters_
 
--   _storeNameOrDescriptor_ `string|StoreDescriptor`: Unique namespace identifier for the store or the store descriptor.
+-   _storeNameOrDescriptor_ `StoreDescriptor|string`: The store descriptor. The legacy calling convention of passing the store name is also supported.
 
 _Returns_
 
@@ -709,6 +715,7 @@ action.
 ```jsx
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
+import { store as myCustomStore } from 'my-custom-store';
 
 function Button( { onClick, children } ) {
 	return (
@@ -720,10 +727,10 @@ function Button( { onClick, children } ) {
 
 const SaleButton = ( { children } ) => {
 	const { stockNumber } = useSelect(
-		( select ) => select( 'my-shop' ).getStockNumber(),
+		( select ) => select( myCustomStore ).getStockNumber(),
 		[]
 	);
-	const { startSale } = useDispatch( 'my-shop' );
+	const { startSale } = useDispatch( myCustomStore );
 	const onClick = useCallback( () => {
 		const discountPercent = stockNumber > 50 ? 10 : 20;
 		startSale( discountPercent );
@@ -795,11 +802,12 @@ _Usage_
 
 ```js
 import { useSelect } from '@wordpress/data';
+import { store as myCustomStore } from 'my-custom-store';
 
 function HammerPriceDisplay( { currency } ) {
 	const price = useSelect(
 		( select ) => {
-			return select( 'my-shop' ).getPrice( 'hammer', currency );
+			return select( myCustomStore ).getPrice( 'hammer', currency );
 		},
 		[ currency ]
 	);
@@ -828,9 +836,10 @@ function because your component won't re-render on a data change.**
 
 ```js
 import { useSelect } from '@wordpress/data';
+import { store as myCustomStore } from 'my-custom-store';
 
 function Paste( { children } ) {
-	const { getSettings } = useSelect( 'my-shop' );
+	const { getSettings } = useSelect( myCustomStore );
 	function onPaste() {
 		// Do something with the settings.
 		const settings = getSettings();
@@ -841,12 +850,12 @@ function Paste( { children } ) {
 
 _Parameters_
 
--   _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.
+-   _mapSelect_ `T`: 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_ `unknown[]`: If provided, this memoizes the mapSelect so the same `mapSelect` is invoked on every state change unless the dependencies change.
 
 _Returns_
 
--   `Function`: A custom react hook.
+-   `UseSelectReturn<T>`: A custom react hook.
 
 ### useSuspenseSelect
 
@@ -879,9 +888,10 @@ function Button( { onClick, children } ) {
 }
 
 import { withDispatch } from '@wordpress/data';
+import { store as myCustomStore } from 'my-custom-store';
 
 const SaleButton = withDispatch( ( dispatch, ownProps ) => {
-	const { startSale } = dispatch( 'my-shop' );
+	const { startSale } = dispatch( myCustomStore );
 	const { discountPercent } = ownProps;
 
 	return {
@@ -919,11 +929,12 @@ function Button( { onClick, children } ) {
 }
 
 import { withDispatch } from '@wordpress/data';
+import { store as myCustomStore } from 'my-custom-store';
 
 const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
 	// Stock number changes frequently.
-	const { getStockNumber } = select( 'my-shop' );
-	const { startSale } = dispatch( 'my-shop' );
+	const { getStockNumber } = select( myCustomStore );
+	const { startSale } = dispatch( myCustomStore );
 	return {
 		onClick() {
 			const discountPercent = getStockNumber() > 50 ? 10 : 20;
@@ -971,6 +982,7 @@ _Usage_
 
 ```js
 import { withSelect } from '@wordpress/data';
+import { store as myCustomStore } from 'my-custom-store';
 
 function PriceDisplay( { price, currency } ) {
 	return new Intl.NumberFormat( 'en-US', {
@@ -980,7 +992,7 @@ function PriceDisplay( { price, currency } ) {
 }
 
 const HammerPriceDisplay = withSelect( ( select, ownProps ) => {
-	const { getPrice } = select( 'my-shop' );
+	const { getPrice } = select( myCustomStore );
 	const { currency } = ownProps;
 
 	return {

package/build/components/async-mode-provider/context.js

@@ -25,10 +25,11 @@ const AsyncModeConsumer = Consumer;
  *
  * ```js
  * import { useSelect, AsyncModeProvider } from '@wordpress/data';
+ * import { store as blockEditorStore } from '@wordpress/block-editor';
  *
  * function BlockCount() {
  *   const count = useSelect( ( select ) => {
- *     return select( 'core/block-editor' ).getBlockCount()
+ *     return select( blockEditorStore ).getBlockCount()
  *   }, [] );
  *
  *   return count;

package/build/components/async-mode-provider/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/data/src/components/async-mode-provider/context.js"],"names":["Context","Consumer","Provider","AsyncModeConsumer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,OAAO,GAAG,4BAAe,KAAf,CAAhB;;AAEP,MAAM;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,IAAyBF,OAA/B;AAEO,MAAMG,iBAAiB,GAAGF,QAA1B;AAEP;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;;;eACeC,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const Context = createContext( false );\n\nconst { Consumer, Provider } = Context;\n\nexport const AsyncModeConsumer = Consumer;\n\n/**\n * Context Provider Component used to switch the data module component rerendering\n * between Sync and Async modes.\n *\n * @example\n *\n * ```js\n * import { useSelect, AsyncModeProvider } from '@wordpress/data';\n *\n * function BlockCount() {\n *   const count = useSelect( ( select ) => {\n *     return select( 'core/block-editor' ).getBlockCount()\n *   }, [] );\n *\n *   return count;\n * }\n *\n * function App() {\n *   return (\n *     <AsyncModeProvider value={ true }>\n *       <BlockCount />\n *     </AsyncModeProvider>\n *   );\n * }\n * ```\n *\n * In this example, the BlockCount component is rerendered asynchronously.\n * It means if a more critical task is being performed (like typing in an input),\n * the rerendering is delayed until the browser becomes IDLE.\n * It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.\n *\n * @param {boolean} props.value Enable Async Mode.\n * @return {WPComponent} The component to be rendered.\n */\nexport default Provider;\n"]}
+{"version":3,"sources":["@wordpress/data/src/components/async-mode-provider/context.js"],"names":["Context","Consumer","Provider","AsyncModeConsumer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,OAAO,GAAG,4BAAe,KAAf,CAAhB;;AAEP,MAAM;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,IAAyBF,OAA/B;AAEO,MAAMG,iBAAiB,GAAGF,QAA1B;AAEP;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;;;eACeC,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const Context = createContext( false );\n\nconst { Consumer, Provider } = Context;\n\nexport const AsyncModeConsumer = Consumer;\n\n/**\n * Context Provider Component used to switch the data module component rerendering\n * between Sync and Async modes.\n *\n * @example\n *\n * ```js\n * import { useSelect, AsyncModeProvider } from '@wordpress/data';\n * import { store as blockEditorStore } from '@wordpress/block-editor';\n *\n * function BlockCount() {\n *   const count = useSelect( ( select ) => {\n *     return select( blockEditorStore ).getBlockCount()\n *   }, [] );\n *\n *   return count;\n * }\n *\n * function App() {\n *   return (\n *     <AsyncModeProvider value={ true }>\n *       <BlockCount />\n *     </AsyncModeProvider>\n *   );\n * }\n * ```\n *\n * In this example, the BlockCount component is rerendered asynchronously.\n * It means if a more critical task is being performed (like typing in an input),\n * the rerendering is delayed until the browser becomes IDLE.\n * It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.\n *\n * @param {boolean} props.value Enable Async Mode.\n * @return {WPComponent} The component to be rendered.\n */\nexport default Provider;\n"]}

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

@@ -35,6 +35,7 @@ var _useRegistry = _interopRequireDefault(require("../registry-provider/use-regi
  * ```jsx
  * import { useDispatch, useSelect } from '@wordpress/data';
  * import { useCallback } from '@wordpress/element';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * function Button( { onClick, children } ) {
  *   return <button type="button" onClick={ onClick }>{ children }</button>
@@ -42,10 +43,10 @@ var _useRegistry = _interopRequireDefault(require("../registry-provider/use-regi
  *
  * const SaleButton = ( { children } ) => {
  *   const { stockNumber } = useSelect(
- *     ( select ) => select( 'my-shop' ).getStockNumber(),
+ *     ( select ) => select( myCustomStore ).getStockNumber(),
  *     []
  *   );
- *   const { startSale } = useDispatch( 'my-shop' );
+ *   const { startSale } = useDispatch( myCustomStore );
  *   const onClick = useCallback( () => {
  *     const discountPercent = stockNumber > 50 ? 10: 20;
  *     startSale( discountPercent );

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","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"]}
+{"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;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 * import { store as myCustomStore } from 'my-custom-store';\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( myCustomStore ).getStockNumber(),\n *     []\n *   );\n *   const { startSale } = useDispatch( myCustomStore );\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

@@ -36,7 +36,22 @@ var _useAsyncMode = _interopRequireDefault(require("../async-mode-provider/use-a
 const noop = () => {};
 
 const renderQueue = (0, _priorityQueue.createQueue)();
-/** @typedef {import('../../types').StoreDescriptor} StoreDescriptor */
+/**
+ * @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor
+ * @template C
+ */
+
+/**
+ * @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
+ * @template State,Actions,Selectors
+ */
+
+/**
+ * @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn
+ * @template T
+ */
+
+/** @typedef {import('../../types').MapSelect} MapSelect */
 
 /**
  * Custom react hook for retrieving props from registered selectors.
@@ -44,28 +59,25 @@ 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|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.
+ * @template {MapSelect | StoreDescriptor<any>} T
+ * @param {T}         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 {unknown[]} deps      If provided, this memoizes the mapSelect so the same `mapSelect` is
+ *                              invoked on every state change unless the dependencies change.
  *
  * @example
  * ```js
  * import { useSelect } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * function HammerPriceDisplay( { currency } ) {
  *   const price = useSelect( ( select ) => {
- *     return select( 'my-shop' ).getPrice( 'hammer', currency )
+ *     return select( myCustomStore ).getPrice( 'hammer', currency );
  *   }, [ currency ] );
  *   return new Intl.NumberFormat( 'en-US', {
  *     style: 'currency',
@@ -92,9 +104,10 @@ const renderQueue = (0, _priorityQueue.createQueue)();
  *
  * ```js
  * import { useSelect } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * function Paste( { children } ) {
- *   const { getSettings } = useSelect( 'my-shop' );
+ *   const { getSettings } = useSelect( myCustomStore );
  *   function onPaste() {
  *     // Do something with the settings.
  *     const settings = getSettings();
@@ -102,8 +115,7 @@ const renderQueue = (0, _priorityQueue.createQueue)();
  *   return <div onPaste={ onPaste }>{ children }</div>;
  * }
  * ```
- *
- * @return {Function}  A custom react hook.
+ * @return {UseSelectReturn<T>} A custom react hook.
  */
 
 function useSelect(mapSelect, deps) {
@@ -232,6 +244,7 @@ function useSelect(mapSelect, deps) {
     // 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, wrapSelect, hasMappingFunction, depsChangedFlag]);
+  (0, _element.useDebugValue)(mapOutput);
   return hasMappingFunction ? mapOutput : registry.select(mapSelect);
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/data/src/components/use-select/index.js"],"names":["noop","renderQueue","useSelect","mapSelect","deps","hasMappingFunction","callbackMapper","_mapSelect","registry","isAsync","latestRegistry","latestMapSelect","latestIsAsync","latestMapOutput","latestMapOutputError","listeningStores","wrapSelect","callback","__unstableMarkListeningStores","select","depsChangedFlag","mapOutput","current","hasReplacedRegistry","hasReplacedMapSelect","hasLeftAsyncMode","lastMapSelectFailed","error","errorMessage","message","stack","console","undefined","queueContext","queue","forceRender","s","isMounted","onStoreChange","newMapOutput","onChange","add","unsubscribers","map","storeName","__unstableSubscribeStore","forEach","unsubscribe","cancel","useSuspenseSelect","suspendSelect","mapOutputError"],"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\n\tconst latestRegistry = useRef( registry );\n\tconst latestMapSelect = useRef();\n\tconst latestIsAsync = useRef( isAsync );\n\tconst latestMapOutput = useRef();\n\tconst latestMapOutputError = 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 wrapSelect = useCallback(\n\t\t( callback ) =>\n\t\t\tregistry.__unstableMarkListeningStores(\n\t\t\t\t() => callback( registry.select, registry ),\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 hasReplacedRegistry = latestRegistry.current !== registry;\n\t\tconst hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;\n\t\tconst hasLeftAsyncMode = latestIsAsync.current && ! isAsync;\n\t\tconst lastMapSelectFailed = !! latestMapOutputError.current;\n\n\t\tif (\n\t\t\thasReplacedRegistry ||\n\t\t\thasReplacedMapSelect ||\n\t\t\thasLeftAsyncMode ||\n\t\t\tlastMapSelectFailed\n\t\t) {\n\t\t\ttry {\n\t\t\t\tmapOutput = wrapSelect( _mapSelect );\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\tlatestRegistry.current = registry;\n\t\tlatestMapSelect.current = _mapSelect;\n\t\tlatestIsAsync.current = isAsync;\n\t\tlatestMapOutput.current = mapOutput;\n\t\tlatestMapOutputError.current = undefined;\n\t} );\n\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\tconst isMounted = useRef( false );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tif ( ! hasMappingFunction ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst onStoreChange = () => {\n\t\t\ttry {\n\t\t\t\tconst newMapOutput = wrapSelect( latestMapSelect.current );\n\n\t\t\t\tif ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlatestMapOutput.current = newMapOutput;\n\t\t\t} catch ( error ) {\n\t\t\t\tlatestMapOutputError.current = error;\n\t\t\t}\n\t\t\tforceRender();\n\t\t};\n\n\t\tconst onChange = () => {\n\t\t\tif ( ! isMounted.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\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\t// Catch any possible state changes during mount before the subscription\n\t\t// could be set.\n\t\tonStoreChange();\n\n\t\tconst unsubscribers = listeningStores.current.map( ( storeName ) =>\n\t\t\tregistry.__unstableSubscribeStore( storeName, onChange )\n\t\t);\n\n\t\tisMounted.current = true;\n\n\t\treturn () => {\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.cancel( queueContext );\n\t\t\tisMounted.current = false;\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, wrapSelect, hasMappingFunction, depsChangedFlag ] );\n\n\treturn hasMappingFunction ? mapOutput : registry.select( mapSelect );\n}\n\n/**\n * A variant of the `useSelect` hook that has the same API, but will throw a\n * suspense Promise if any of the called selectors is in an unresolved state.\n *\n * @param {Function} 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 * @return {Object} Data object returned by the `mapSelect` function.\n */\nexport function useSuspenseSelect( mapSelect, deps ) {\n\tconst _mapSelect = useCallback( mapSelect, deps );\n\n\tconst registry = useRegistry();\n\tconst isAsync = useAsyncMode();\n\n\tconst latestRegistry = useRef( registry );\n\tconst latestMapSelect = useRef();\n\tconst latestIsAsync = useRef( isAsync );\n\tconst latestMapOutput = useRef();\n\tconst latestMapOutputError = 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 wrapSelect = useCallback(\n\t\t( callback ) =>\n\t\t\tregistry.__unstableMarkListeningStores(\n\t\t\t\t() => callback( registry.suspendSelect, registry ),\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 = latestMapOutput.current;\n\tlet mapOutputError = latestMapOutputError.current;\n\n\tconst hasReplacedRegistry = latestRegistry.current !== registry;\n\tconst hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;\n\tconst hasLeftAsyncMode = latestIsAsync.current && ! isAsync;\n\n\tif ( hasReplacedRegistry || hasReplacedMapSelect || hasLeftAsyncMode ) {\n\t\ttry {\n\t\t\tmapOutput = wrapSelect( _mapSelect );\n\t\t} catch ( error ) {\n\t\t\tmapOutputError = error;\n\t\t}\n\t}\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tlatestRegistry.current = registry;\n\t\tlatestMapSelect.current = _mapSelect;\n\t\tlatestIsAsync.current = isAsync;\n\t\tlatestMapOutput.current = mapOutput;\n\t\tlatestMapOutputError.current = mapOutputError;\n\t} );\n\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\tconst isMounted = useRef( false );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tconst onStoreChange = () => {\n\t\t\ttry {\n\t\t\t\tconst newMapOutput = wrapSelect( latestMapSelect.current );\n\n\t\t\t\tif ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlatestMapOutput.current = newMapOutput;\n\t\t\t} catch ( error ) {\n\t\t\t\tlatestMapOutputError.current = error;\n\t\t\t}\n\n\t\t\tforceRender();\n\t\t};\n\n\t\tconst onChange = () => {\n\t\t\tif ( ! isMounted.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\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\t// catch any possible state changes during mount before the subscription\n\t\t// could be set.\n\t\tonStoreChange();\n\n\t\tconst unsubscribers = listeningStores.current.map( ( storeName ) =>\n\t\t\tregistry.__unstableSubscribeStore( storeName, onChange )\n\t\t);\n\n\t\tisMounted.current = true;\n\n\t\treturn () => {\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.cancel( queueContext );\n\t\t\tisMounted.current = false;\n\t\t};\n\t}, [ registry, wrapSelect, depsChangedFlag ] );\n\n\tif ( mapOutputError ) {\n\t\tthrow mapOutputError;\n\t}\n\n\treturn 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","latestRegistry","latestMapSelect","latestIsAsync","latestMapOutput","latestMapOutputError","listeningStores","wrapSelect","callback","__unstableMarkListeningStores","select","depsChangedFlag","mapOutput","current","hasReplacedRegistry","hasReplacedMapSelect","hasLeftAsyncMode","lastMapSelectFailed","error","errorMessage","message","stack","console","undefined","queueContext","queue","forceRender","s","isMounted","onStoreChange","newMapOutput","onChange","add","unsubscribers","map","storeName","__unstableSubscribeStore","forEach","unsubscribe","cancel","useSuspenseSelect","suspendSelect","mapOutputError"],"mappings":";;;;;;;;;;AAGA;;AAKA;;AACA;;AAOA;;AACA;;AAKA;;AACA;;AAvBA;AACA;AACA;;AAGA;AACA;AACA;;AAYA;AACA;AACA;AAIA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AACA,MAAMC,WAAW,GAAG,iCAApB;AAEA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;;AACA;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,SAAT,CAAoBC,SAApB,EAA+BC,IAA/B,EAAsC;AACpD,QAAMC,kBAAkB,GAAG,eAAe,OAAOF,SAAjD,CADoD,CAGpD;AACA;AACA;;AACA,MAAK,CAAEE,kBAAP,EAA4B;AAC3BD,IAAAA,IAAI,GAAG,EAAP;AACA,GARmD,CAUpD;AACA;AACA;AACA;AACA;;;AACA,QAAME,cAAc,GAAG,0BACtBD,kBAAkB,GAAGF,SAAH,GAAeH,IADX,EAEtBI,IAFsB,CAAvB;;AAIA,QAAMG,UAAU,GAAGF,kBAAkB,GAAGC,cAAH,GAAoB,IAAzD;;AAEA,QAAME,QAAQ,GAAG,2BAAjB;AACA,QAAMC,OAAO,GAAG,4BAAhB;AAEA,QAAMC,cAAc,GAAG,qBAAQF,QAAR,CAAvB;AACA,QAAMG,eAAe,GAAG,sBAAxB;AACA,QAAMC,aAAa,GAAG,qBAAQH,OAAR,CAAtB;AACA,QAAMI,eAAe,GAAG,sBAAxB;AACA,QAAMC,oBAAoB,GAAG,sBAA7B,CA5BoD,CA8BpD;AACA;;AACA,QAAMC,eAAe,GAAG,qBAAQ,EAAR,CAAxB;AACA,QAAMC,UAAU,GAAG,0BAChBC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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 {\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n\tuseReducer,\n\tuseDebugValue,\n} 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/**\n * @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor\n * @template C\n */\n/**\n * @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig\n * @template State,Actions,Selectors\n */\n/**\n * @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn\n * @template T\n */\n/** @typedef {import('../../types').MapSelect} MapSelect */\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 * @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\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\n\tconst latestRegistry = useRef( registry );\n\tconst latestMapSelect = useRef();\n\tconst latestIsAsync = useRef( isAsync );\n\tconst latestMapOutput = useRef();\n\tconst latestMapOutputError = 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 wrapSelect = useCallback(\n\t\t( callback ) =>\n\t\t\tregistry.__unstableMarkListeningStores(\n\t\t\t\t() => callback( registry.select, registry ),\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 hasReplacedRegistry = latestRegistry.current !== registry;\n\t\tconst hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;\n\t\tconst hasLeftAsyncMode = latestIsAsync.current && ! isAsync;\n\t\tconst lastMapSelectFailed = !! latestMapOutputError.current;\n\n\t\tif (\n\t\t\thasReplacedRegistry ||\n\t\t\thasReplacedMapSelect ||\n\t\t\thasLeftAsyncMode ||\n\t\t\tlastMapSelectFailed\n\t\t) {\n\t\t\ttry {\n\t\t\t\tmapOutput = wrapSelect( _mapSelect );\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\tlatestRegistry.current = registry;\n\t\tlatestMapSelect.current = _mapSelect;\n\t\tlatestIsAsync.current = isAsync;\n\t\tlatestMapOutput.current = mapOutput;\n\t\tlatestMapOutputError.current = undefined;\n\t} );\n\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\tconst isMounted = useRef( false );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tif ( ! hasMappingFunction ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst onStoreChange = () => {\n\t\t\ttry {\n\t\t\t\tconst newMapOutput = wrapSelect( latestMapSelect.current );\n\n\t\t\t\tif ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlatestMapOutput.current = newMapOutput;\n\t\t\t} catch ( error ) {\n\t\t\t\tlatestMapOutputError.current = error;\n\t\t\t}\n\t\t\tforceRender();\n\t\t};\n\n\t\tconst onChange = () => {\n\t\t\tif ( ! isMounted.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\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\t// Catch any possible state changes during mount before the subscription\n\t\t// could be set.\n\t\tonStoreChange();\n\n\t\tconst unsubscribers = listeningStores.current.map( ( storeName ) =>\n\t\t\tregistry.__unstableSubscribeStore( storeName, onChange )\n\t\t);\n\n\t\tisMounted.current = true;\n\n\t\treturn () => {\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.cancel( queueContext );\n\t\t\tisMounted.current = false;\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, wrapSelect, hasMappingFunction, depsChangedFlag ] );\n\n\tuseDebugValue( mapOutput );\n\n\treturn hasMappingFunction ? mapOutput : registry.select( mapSelect );\n}\n\n/**\n * A variant of the `useSelect` hook that has the same API, but will throw a\n * suspense Promise if any of the called selectors is in an unresolved state.\n *\n * @param {Function} 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 * @return {Object} Data object returned by the `mapSelect` function.\n */\nexport function useSuspenseSelect( mapSelect, deps ) {\n\tconst _mapSelect = useCallback( mapSelect, deps );\n\n\tconst registry = useRegistry();\n\tconst isAsync = useAsyncMode();\n\n\tconst latestRegistry = useRef( registry );\n\tconst latestMapSelect = useRef();\n\tconst latestIsAsync = useRef( isAsync );\n\tconst latestMapOutput = useRef();\n\tconst latestMapOutputError = 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 wrapSelect = useCallback(\n\t\t( callback ) =>\n\t\t\tregistry.__unstableMarkListeningStores(\n\t\t\t\t() => callback( registry.suspendSelect, registry ),\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 = latestMapOutput.current;\n\tlet mapOutputError = latestMapOutputError.current;\n\n\tconst hasReplacedRegistry = latestRegistry.current !== registry;\n\tconst hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;\n\tconst hasLeftAsyncMode = latestIsAsync.current && ! isAsync;\n\n\tif ( hasReplacedRegistry || hasReplacedMapSelect || hasLeftAsyncMode ) {\n\t\ttry {\n\t\t\tmapOutput = wrapSelect( _mapSelect );\n\t\t} catch ( error ) {\n\t\t\tmapOutputError = error;\n\t\t}\n\t}\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tlatestRegistry.current = registry;\n\t\tlatestMapSelect.current = _mapSelect;\n\t\tlatestIsAsync.current = isAsync;\n\t\tlatestMapOutput.current = mapOutput;\n\t\tlatestMapOutputError.current = mapOutputError;\n\t} );\n\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\tconst isMounted = useRef( false );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tconst onStoreChange = () => {\n\t\t\ttry {\n\t\t\t\tconst newMapOutput = wrapSelect( latestMapSelect.current );\n\n\t\t\t\tif ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlatestMapOutput.current = newMapOutput;\n\t\t\t} catch ( error ) {\n\t\t\t\tlatestMapOutputError.current = error;\n\t\t\t}\n\n\t\t\tforceRender();\n\t\t};\n\n\t\tconst onChange = () => {\n\t\t\tif ( ! isMounted.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\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\t// catch any possible state changes during mount before the subscription\n\t\t// could be set.\n\t\tonStoreChange();\n\n\t\tconst unsubscribers = listeningStores.current.map( ( storeName ) =>\n\t\t\tregistry.__unstableSubscribeStore( storeName, onChange )\n\t\t);\n\n\t\tisMounted.current = true;\n\n\t\treturn () => {\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.cancel( queueContext );\n\t\t\tisMounted.current = false;\n\t\t};\n\t}, [ registry, wrapSelect, depsChangedFlag ] );\n\n\tif ( mapOutputError ) {\n\t\tthrow mapOutputError;\n\t}\n\n\treturn mapOutput;\n}\n"]}

package/build/components/with-dispatch/index.js

@@ -41,9 +41,10 @@ var _useDispatch = require("../use-dispatch");
  * }
  *
  * import { withDispatch } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * const SaleButton = withDispatch( ( dispatch, ownProps ) => {
- *     const { startSale } = dispatch( 'my-shop' );
+ *     const { startSale } = dispatch( myCustomStore );
  *     const { discountPercent } = ownProps;
  *
  *     return {
@@ -78,11 +79,12 @@ var _useDispatch = require("../use-dispatch");
  * }
  *
  * import { withDispatch } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
  *    // Stock number changes frequently.
- *    const { getStockNumber } = select( 'my-shop' );
- *    const { startSale } = dispatch( 'my-shop' );
+ *    const { getStockNumber } = select( myCustomStore );
+ *    const { startSale } = dispatch( myCustomStore );
  *    return {
  *        onClick() {
  *            const discountPercent = getStockNumber() > 50 ? 10 : 20;

package/build/components/with-dispatch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/data/src/components/with-dispatch/index.js"],"names":["withDispatch","mapDispatchToProps","WrappedComponent","ownProps","mapDispatch","dispatch","registry","dispatchProps"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;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;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,YAAY,GAAKC,kBAAF,IACpB,yCACGC,gBAAF,IAA0BC,QAAF,IAAgB;AACvC,QAAMC,WAAW,GAAG,CAAEC,QAAF,EAAYC,QAAZ,KACnBL,kBAAkB,CAAEI,QAAF,EAAYF,QAAZ,EAAsBG,QAAtB,CADnB;;AAEA,QAAMC,aAAa,GAAG,qCAAoBH,WAApB,EAAiC,EAAjC,CAAtB;AACA,SAAO,4BAAC,gBAAD,6BAAuBD,QAAvB,EAAuCI,aAAvC,EAAP;AACA,CANF,EAOC,cAPD,CADD;;eAWeP,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useDispatchWithMap } from '../use-dispatch';\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 *\n * const SaleButton = withDispatch( ( dispatch, ownProps ) => {\n *     const { startSale } = dispatch( 'my-shop' );\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 *\n * const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {\n *    // Stock number changes frequently.\n *    const { getStockNumber } = select( 'my-shop' );\n *    const { startSale } = dispatch( 'my-shop' );\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 {WPComponent} 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"]}
+{"version":3,"sources":["@wordpress/data/src/components/with-dispatch/index.js"],"names":["withDispatch","mapDispatchToProps","WrappedComponent","ownProps","mapDispatch","dispatch","registry","dispatchProps"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;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;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,YAAY,GAAKC,kBAAF,IACpB,yCACGC,gBAAF,IAA0BC,QAAF,IAAgB;AACvC,QAAMC,WAAW,GAAG,CAAEC,QAAF,EAAYC,QAAZ,KACnBL,kBAAkB,CAAEI,QAAF,EAAYF,QAAZ,EAAsBG,QAAtB,CADnB;;AAEA,QAAMC,aAAa,GAAG,qCAAoBH,WAApB,EAAiC,EAAjC,CAAtB;AACA,SAAO,4BAAC,gBAAD,6BAAuBD,QAAvB,EAAuCI,aAAvC,EAAP;AACA,CANF,EAOC,cAPD,CADD;;eAWeP,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useDispatchWithMap } from '../use-dispatch';\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 {WPComponent} 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"]}

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

@@ -34,6 +34,7 @@ var _useSelect = _interopRequireDefault(require("../use-select"));
  * @example
  * ```js
  * import { withSelect } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * function PriceDisplay( { price, currency } ) {
  * 	return new Intl.NumberFormat( 'en-US', {
@@ -43,7 +44,7 @@ var _useSelect = _interopRequireDefault(require("../use-select"));
  * }
  *
  * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {
- * 	const { getPrice } = select( 'my-shop' );
+ * 	const { getPrice } = select( myCustomStore );
  * 	const { currency } = ownProps;
  *
  * 	return {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/data/src/components/with-select/index.js"],"names":["withSelect","mapSelectToProps","WrappedComponent","ownProps","mapSelect","select","registry","mergeProps"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;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,UAAU,GAAKC,gBAAF,IAClB,yCACGC,gBAAF,IACC,mBAAQC,QAAF,IAAgB;AACrB,QAAMC,SAAS,GAAG,CAAEC,MAAF,EAAUC,QAAV,KACjBL,gBAAgB,CAAEI,MAAF,EAAUF,QAAV,EAAoBG,QAApB,CADjB;;AAEA,QAAMC,UAAU,GAAG,wBAAWH,SAAX,CAAnB;AACA,SAAO,4BAAC,gBAAD,6BAAuBD,QAAvB,EAAuCI,UAAvC,EAAP;AACA,CALD,CAFF,EAQC,YARD,CADD;;eAYeP,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, pure } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useSelect from '../use-select';\n\n/**\n * Higher-order component used to inject state-derived props using registered\n * selectors.\n *\n * @param {Function} mapSelectToProps Function called on every state change,\n *                                    expected to return object of props to\n *                                    merge with the component's own props.\n *\n * @example\n * ```js\n * import { withSelect } from '@wordpress/data';\n *\n * function PriceDisplay( { price, currency } ) {\n * \treturn new Intl.NumberFormat( 'en-US', {\n * \t\tstyle: 'currency',\n * \t\tcurrency,\n * \t} ).format( price );\n * }\n *\n * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {\n * \tconst { getPrice } = select( 'my-shop' );\n * \tconst { currency } = ownProps;\n *\n * \treturn {\n * \t\tprice: getPrice( 'hammer', currency ),\n * \t};\n * } )( PriceDisplay );\n *\n * // Rendered in the application:\n * //\n * //  <HammerPriceDisplay currency=\"USD\" />\n * ```\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, it will pass the price into the underlying `PriceDisplay`\n * component and update automatically if the price of a hammer ever changes in\n * the store.\n *\n * @return {WPComponent} Enhanced component with merged state data props.\n */\nconst withSelect = ( mapSelectToProps ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tpure( ( ownProps ) => {\n\t\t\t\tconst mapSelect = ( select, registry ) =>\n\t\t\t\t\tmapSelectToProps( select, ownProps, registry );\n\t\t\t\tconst mergeProps = useSelect( mapSelect );\n\t\t\t\treturn <WrappedComponent { ...ownProps } { ...mergeProps } />;\n\t\t\t} ),\n\t\t'withSelect'\n\t);\n\nexport default withSelect;\n"]}
+{"version":3,"sources":["@wordpress/data/src/components/with-select/index.js"],"names":["withSelect","mapSelectToProps","WrappedComponent","ownProps","mapSelect","select","registry","mergeProps"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;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,UAAU,GAAKC,gBAAF,IAClB,yCACGC,gBAAF,IACC,mBAAQC,QAAF,IAAgB;AACrB,QAAMC,SAAS,GAAG,CAAEC,MAAF,EAAUC,QAAV,KACjBL,gBAAgB,CAAEI,MAAF,EAAUF,QAAV,EAAoBG,QAApB,CADjB;;AAEA,QAAMC,UAAU,GAAG,wBAAWH,SAAX,CAAnB;AACA,SAAO,4BAAC,gBAAD,6BAAuBD,QAAvB,EAAuCI,UAAvC,EAAP;AACA,CALD,CAFF,EAQC,YARD,CADD;;eAYeP,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, pure } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useSelect from '../use-select';\n\n/**\n * Higher-order component used to inject state-derived props using registered\n * selectors.\n *\n * @param {Function} mapSelectToProps Function called on every state change,\n *                                    expected to return object of props to\n *                                    merge with the component's own props.\n *\n * @example\n * ```js\n * import { withSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function PriceDisplay( { price, currency } ) {\n * \treturn new Intl.NumberFormat( 'en-US', {\n * \t\tstyle: 'currency',\n * \t\tcurrency,\n * \t} ).format( price );\n * }\n *\n * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {\n * \tconst { getPrice } = select( myCustomStore );\n * \tconst { currency } = ownProps;\n *\n * \treturn {\n * \t\tprice: getPrice( 'hammer', currency ),\n * \t};\n * } )( PriceDisplay );\n *\n * // Rendered in the application:\n * //\n * //  <HammerPriceDisplay currency=\"USD\" />\n * ```\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, it will pass the price into the underlying `PriceDisplay`\n * component and update automatically if the price of a hammer ever changes in\n * the store.\n *\n * @return {WPComponent} Enhanced component with merged state data props.\n */\nconst withSelect = ( mapSelectToProps ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tpure( ( ownProps ) => {\n\t\t\t\tconst mapSelect = ( select, registry ) =>\n\t\t\t\t\tmapSelectToProps( select, ownProps, registry );\n\t\t\t\tconst mergeProps = useSelect( mapSelect );\n\t\t\t\treturn <WrappedComponent { ...ownProps } { ...mergeProps } />;\n\t\t\t} ),\n\t\t'withSelect'\n\t);\n\nexport default withSelect;\n"]}