@wordpress/data 6.9.0 → 6.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "6.9.0",
+	"version": "6.12.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,12 +28,12 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/compose": "^5.7.0",
-		"@wordpress/deprecated": "^3.9.0",
-		"@wordpress/element": "^4.7.0",
-		"@wordpress/is-shallow-equal": "^4.9.0",
-		"@wordpress/priority-queue": "^2.9.0",
-		"@wordpress/redux-routine": "^4.9.0",
+		"@wordpress/compose": "^5.10.0",
+		"@wordpress/deprecated": "^3.12.0",
+		"@wordpress/element": "^4.10.0",
+		"@wordpress/is-shallow-equal": "^4.12.0",
+		"@wordpress/priority-queue": "^2.12.0",
+		"@wordpress/redux-routine": "^4.12.0",
 		"equivalent-key-map": "^0.2.2",
 		"is-promise": "^4.0.0",
 		"lodash": "^4.17.21",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

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

@@ -20,7 +20,19 @@ import useAsyncMode from '../async-mode-provider/use-async-mode';
 const noop = () => {};
 const renderQueue = 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.
@@ -28,20 +40,16 @@ const renderQueue = 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
@@ -86,8 +94,7 @@ const renderQueue = createQueue();
  *   return <div onPaste={ onPaste }>{ children }</div>;
  * }
  * ```
- *
- * @return {Function}  A custom react hook.
+ * @return {UseSelectReturn<T>} A custom react hook.
  */
 export default function useSelect( mapSelect, deps ) {
 	const hasMappingFunction = 'function' === typeof mapSelect;

package/src/components/use-select/test/suspense.js

@@ -50,17 +50,21 @@ function createRegistryWithStore() {
 	const sleep = ( ms ) => new Promise( ( r ) => setTimeout( () => r(), ms ) );
 
 	const resolvers = {
-		getToken: () => async ( { dispatch } ) => {
-			await sleep( 10 );
-			dispatch( { type: 'RECEIVE_TOKEN', token: 'token' } );
-		},
-		getData: ( token ) => async ( { dispatch } ) => {
-			await sleep( 10 );
-			if ( ! token ) {
-				throw 'missing token in resolver';
-			}
-			dispatch( { type: 'RECEIVE_DATA', data: 'therealdata' } );
-		},
+		getToken:
+			() =>
+			async ( { dispatch } ) => {
+				await sleep( 10 );
+				dispatch( { type: 'RECEIVE_TOKEN', token: 'token' } );
+			},
+		getData:
+			( token ) =>
+			async ( { dispatch } ) => {
+				await sleep( 10 );
+				if ( ! token ) {
+					throw 'missing token in resolver';
+				}
+				dispatch( { type: 'RECEIVE_DATA', data: 'therealdata' } );
+			},
 		getThatFails: () => async () => {
 			await sleep( 10 );
 			throw 'resolution failed';

package/src/components/with-dispatch/test/index.js

@@ -57,8 +57,8 @@ describe( 'withDispatch', () => {
 		} );
 		const testInstance = testRenderer.root;
 
-		const incrementBeforeSetProps = testInstance.findByType( 'button' )
-			.props.onClick;
+		const incrementBeforeSetProps =
+			testInstance.findByType( 'button' ).props.onClick;
 
 		// Verify that dispatch respects props at the time of being invoked by
 		// changing props after the initial mount.
@@ -194,9 +194,8 @@ describe( 'withDispatch', () => {
 				);
 			} );
 
-			const counterUpdateHandler = testRenderer.root.findByType(
-				'button'
-			).props.onClick;
+			const counterUpdateHandler =
+				testRenderer.root.findByType( 'button' ).props.onClick;
 
 			act( () => {
 				counterUpdateHandler();

package/src/components/with-registry/index.js

@@ -17,13 +17,14 @@ import { RegistryConsumer } from '../registry-provider';
  * @return {WPComponent} Enhanced component.
  */
 const withRegistry = createHigherOrderComponent(
-	( OriginalComponent ) => ( props ) => (
-		<RegistryConsumer>
-			{ ( registry ) => (
-				<OriginalComponent { ...props } registry={ registry } />
-			) }
-		</RegistryConsumer>
-	),
+	( OriginalComponent ) => ( props ) =>
+		(
+			<RegistryConsumer>
+				{ ( registry ) => (
+					<OriginalComponent { ...props } registry={ registry } />
+				) }
+			</RegistryConsumer>
+		),
 	'withRegistry'
 );
 

package/src/components/with-select/test/index.js

@@ -50,9 +50,8 @@ describe( 'withSelect', () => {
 			.fn()
 			.mockImplementation( ( props ) => <div>{ props.data }</div> );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 		let testRenderer;
 		act( () => {
 			testRenderer = TestRenderer.create(
@@ -268,9 +267,8 @@ describe( 'withSelect', () => {
 			.fn()
 			.mockImplementation( ( props ) => <div>{ props.count }</div> );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		let testRenderer;
 		act( () => {
@@ -367,9 +365,8 @@ describe( 'withSelect', () => {
 
 		const OriginalComponent = jest.fn().mockImplementation( () => <div /> );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		act( () => {
 			TestRenderer.create(
@@ -492,9 +489,8 @@ describe( 'withSelect', () => {
 				<div>{ JSON.stringify( props ) }</div>
 			) );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		let testRenderer;
 		act( () => {
@@ -561,9 +557,8 @@ describe( 'withSelect', () => {
 				<div>{ props.count || 'Unknown' }</div>
 			) );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		let testRenderer;
 		act( () => {
@@ -691,9 +686,8 @@ describe( 'withSelect', () => {
 			.fn()
 			.mockImplementation( ( props ) => <div>{ props.value }</div> );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		let testRenderer;
 		act( () => {

package/src/controls.js

@@ -118,20 +118,25 @@ export const controls = { select, resolveSelect, dispatch };
 
 export const builtinControls = {
 	[ SELECT ]: createRegistryControl(
-		( registry ) => ( { storeKey, selectorName, args } ) =>
-			registry.select( storeKey )[ selectorName ]( ...args )
+		( registry ) =>
+			( { storeKey, selectorName, args } ) =>
+				registry.select( storeKey )[ selectorName ]( ...args )
 	),
 	[ RESOLVE_SELECT ]: createRegistryControl(
-		( registry ) => ( { storeKey, selectorName, args } ) => {
-			const method = registry.select( storeKey )[ selectorName ]
-				.hasResolver
-				? 'resolveSelect'
-				: 'select';
-			return registry[ method ]( storeKey )[ selectorName ]( ...args );
-		}
+		( registry ) =>
+			( { storeKey, selectorName, args } ) => {
+				const method = registry.select( storeKey )[ selectorName ]
+					.hasResolver
+					? 'resolveSelect'
+					: 'select';
+				return registry[ method ]( storeKey )[ selectorName ](
+					...args
+				);
+			}
 	),
 	[ DISPATCH ]: createRegistryControl(
-		( registry ) => ( { storeKey, actionName, args } ) =>
-			registry.dispatch( storeKey )[ actionName ]( ...args )
+		( registry ) =>
+			( { storeKey, actionName, args } ) =>
+				registry.dispatch( storeKey )[ actionName ]( ...args )
 	),
 };

package/src/plugins/persistence/index.js

@@ -63,10 +63,8 @@ export const withLazySameState = ( reducer ) => ( state, action ) => {
  * @return {Object} Persistence interface.
  */
 export function createPersistenceInterface( options ) {
-	const {
-		storage = DEFAULT_STORAGE,
-		storageKey = DEFAULT_STORAGE_KEY,
-	} = options;
+	const { storage = DEFAULT_STORAGE, storageKey = DEFAULT_STORAGE_KEY } =
+		options;
 
 	let data;
 

package/src/redux-store/index.js

@@ -23,8 +23,14 @@ import * as metadataSelectors from './metadata/selectors';
 import * as metadataActions from './metadata/actions';
 
 /** @typedef {import('../types').DataRegistry} DataRegistry */
-/** @typedef {import('../types').StoreDescriptor} StoreDescriptor */
-/** @typedef {import('../types').ReduxStoreConfig} ReduxStoreConfig */
+/**
+ * @typedef {import('../types').StoreDescriptor<C>} StoreDescriptor
+ * @template C
+ */
+/**
+ * @typedef {import('../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
+ * @template State,Actions,Selectors
+ */
 
 const trimUndefinedValues = ( array ) => {
 	const result = [ ...array ];
@@ -83,12 +89,13 @@ function createResolversCache() {
  * } );
  * ```
  *
- * @param {string}           key     Unique namespace identifier.
- * @param {ReduxStoreConfig} options Registered store options, with properties
- *                                   describing reducer, actions, selectors,
- *                                   and resolvers.
+ * @template State,Actions,Selectors
+ * @param {string}                                    key     Unique namespace identifier.
+ * @param {ReduxStoreConfig<State,Actions,Selectors>} options Registered store options, with properties
+ *                                                            describing reducer, actions, selectors,
+ *                                                            and resolvers.
  *
- * @return {StoreDescriptor} Store Object.
+ * @return   {StoreDescriptor<ReduxStoreConfig<State,Actions,Selectors>>} Store Object.
  */
 export default function createReduxStore( key, options ) {
 	return {
@@ -136,8 +143,9 @@ export default function createReduxStore( key, options ) {
 				{
 					...mapValues(
 						metadataSelectors,
-						( selector ) => ( state, ...args ) =>
-							selector( state.metadata, ...args )
+						( selector ) =>
+							( state, ...args ) =>
+								selector( state.metadata, ...args )
 					),
 					...mapValues( options.selectors, ( selector ) => {
 						if ( selector.isRegistrySelector ) {
@@ -308,9 +316,11 @@ function mapSelectors( selectors, store ) {
  * @return {Object} Actions mapped to the redux store provided.
  */
 function mapActions( actions, store ) {
-	const createBoundAction = ( action ) => ( ...args ) => {
-		return Promise.resolve( store.dispatch( action( ...args ) ) );
-	};
+	const createBoundAction =
+		( action ) =>
+		( ...args ) => {
+			return Promise.resolve( store.dispatch( action( ...args ) ) );
+		};
 
 	return mapValues( actions, createBoundAction );
 }

package/src/redux-store/metadata/test/utils.js

@@ -47,8 +47,7 @@ describe( 'selectorArgsToStateKey', () => {
 
 	it( 'should remove trailing undefined values', () => {
 		expect( selectorArgsToStateKey( [ 1, 2, undefined ] ) ).toEqual( [
-			1,
-			2,
+			1, 2,
 		] );
 		expect(
 			selectorArgsToStateKey( [ 1, 2, undefined, undefined ] )

package/src/redux-store/metadata/utils.ts

@@ -10,33 +10,33 @@ import type { AnyAction, Reducer } from 'redux';
  * @param  actionProperty Action property by which to key object.
  * @return Higher-order reducer.
  */
-export const onSubKey = < TState extends unknown, TAction extends AnyAction >(
-	actionProperty: string
-) => (
-	reducer: Reducer< TState, TAction >
-): Reducer< Record< string, TState >, TAction > => (
-	state: Record< string, TState > = {},
-	action
-) => {
-	// Retrieve subkey from action. Do not track if undefined; useful for cases
-	// where reducer is scoped by action shape.
-	const key = action[ actionProperty ];
-	if ( key === undefined ) {
-		return state;
-	}
+export const onSubKey =
+	< TState extends unknown, TAction extends AnyAction >(
+		actionProperty: string
+	) =>
+	(
+		reducer: Reducer< TState, TAction >
+	): Reducer< Record< string, TState >, TAction > =>
+	( state: Record< string, TState > = {}, action ) => {
+		// Retrieve subkey from action. Do not track if undefined; useful for cases
+		// where reducer is scoped by action shape.
+		const key = action[ actionProperty ];
+		if ( key === undefined ) {
+			return state;
+		}
 
-	// Avoid updating state if unchanged. Note that this also accounts for a
-	// reducer which returns undefined on a key which is not yet tracked.
-	const nextKeyState = reducer( state[ key ], action );
-	if ( nextKeyState === state[ key ] ) {
-		return state;
-	}
+		// Avoid updating state if unchanged. Note that this also accounts for a
+		// reducer which returns undefined on a key which is not yet tracked.
+		const nextKeyState = reducer( state[ key ], action );
+		if ( nextKeyState === state[ key ] ) {
+			return state;
+		}
 
-	return {
-		...state,
-		[ key ]: nextKeyState,
+		return {
+			...state,
+			[ key ]: nextKeyState,
+		};
 	};
-};
 
 /**
  * Normalize selector argument array by defaulting `undefined` value to an empty array

package/src/redux-store/test/index.js

@@ -32,9 +32,10 @@ describe( 'controls', () => {
 				},
 				controls: {
 					DISPATCH: createRegistryControl(
-						( reg ) => ( { store, action } ) => {
-							return reg.dispatch( store )[ action ]();
-						}
+						( reg ) =>
+							( { store, action } ) => {
+								return reg.dispatch( store )[ action ]();
+							}
 					),
 				},
 			} );

package/src/resolvers-cache-middleware.js

@@ -20,42 +20,41 @@ import coreDataStore from './store';
  *
  * @return {Function} Middleware function.
  */
-const createResolversCacheMiddleware = ( registry, reducerKey ) => () => (
-	next
-) => ( action ) => {
-	const resolvers = registry
-		.select( coreDataStore )
-		.getCachedResolvers( reducerKey );
-	Object.entries( resolvers ).forEach(
-		( [ selectorName, resolversByArgs ] ) => {
-			const resolver = get( registry.stores, [
-				reducerKey,
-				'resolvers',
-				selectorName,
-			] );
-			if ( ! resolver || ! resolver.shouldInvalidate ) {
-				return;
-			}
-			resolversByArgs.forEach( ( value, args ) => {
-				// resolversByArgs is the map Map([ args ] => boolean) storing the cache resolution status for a given selector.
-				// If the value is "finished" or "error" it means this resolver has finished its resolution which means we need
-				// to invalidate it, if it's true it means it's inflight and the invalidation is not necessary.
-				if (
-					( value?.status !== 'finished' &&
-						value?.status !== 'error' ) ||
-					! resolver.shouldInvalidate( action, ...args )
-				) {
+const createResolversCacheMiddleware =
+	( registry, reducerKey ) => () => ( next ) => ( action ) => {
+		const resolvers = registry
+			.select( coreDataStore )
+			.getCachedResolvers( reducerKey );
+		Object.entries( resolvers ).forEach(
+			( [ selectorName, resolversByArgs ] ) => {
+				const resolver = get( registry.stores, [
+					reducerKey,
+					'resolvers',
+					selectorName,
+				] );
+				if ( ! resolver || ! resolver.shouldInvalidate ) {
 					return;
 				}
+				resolversByArgs.forEach( ( value, args ) => {
+					// resolversByArgs is the map Map([ args ] => boolean) storing the cache resolution status for a given selector.
+					// If the value is "finished" or "error" it means this resolver has finished its resolution which means we need
+					// to invalidate it, if it's true it means it's inflight and the invalidation is not necessary.
+					if (
+						( value?.status !== 'finished' &&
+							value?.status !== 'error' ) ||
+						! resolver.shouldInvalidate( action, ...args )
+					) {
+						return;
+					}
 
-				// Trigger cache invalidation
-				registry
-					.dispatch( coreDataStore )
-					.invalidateResolution( reducerKey, selectorName, args );
-			} );
-		}
-	);
-	return next( action );
-};
+					// Trigger cache invalidation
+					registry
+						.dispatch( coreDataStore )
+						.invalidateResolution( reducerKey, selectorName, args );
+				} );
+			}
+		);
+		return next( action );
+	};
 
 export default createResolversCacheMiddleware;

package/src/store/index.js

@@ -1,13 +1,17 @@
 const coreDataStore = {
 	name: 'core/data',
 	instantiate( registry ) {
-		const getCoreDataSelector = ( selectorName ) => ( key, ...args ) => {
-			return registry.select( key )[ selectorName ]( ...args );
-		};
+		const getCoreDataSelector =
+			( selectorName ) =>
+			( key, ...args ) => {
+				return registry.select( key )[ selectorName ]( ...args );
+			};
 
-		const getCoreDataAction = ( actionName ) => ( key, ...args ) => {
-			return registry.dispatch( key )[ actionName ]( ...args );
-		};
+		const getCoreDataAction =
+			( actionName ) =>
+			( key, ...args ) => {
+				return registry.dispatch( key )[ actionName ]( ...args );
+			};
 
 		return {
 			getSelectors() {

package/src/test/registry.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray, mapValues } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -30,7 +25,7 @@ describe( 'createRegistry', () => {
 		return unsubscribe;
 	}
 	function subscribeUntil( predicates ) {
-		predicates = castArray( predicates );
+		predicates = Array.from( predicates );
 
 		return new Promise( ( resolve ) => {
 			subscribeWithUnsubscribe( () => {
@@ -553,8 +548,8 @@ describe( 'createRegistry', () => {
 
 		it( 'should run the registry selectors properly', () => {
 			const selector1 = () => 'result1';
-			const selector2 = createRegistrySelector( ( select ) => () =>
-				select( 'reducer1' ).selector1()
+			const selector2 = createRegistrySelector(
+				( select ) => () => select( 'reducer1' ).selector1()
 			);
 			registry.registerStore( 'reducer1', {
 				reducer: () => 'state1',
@@ -576,8 +571,8 @@ describe( 'createRegistry', () => {
 
 		it( 'should run the registry selector from a non-registry selector', () => {
 			const selector1 = () => 'result1';
-			const selector2 = createRegistrySelector( ( select ) => () =>
-				select( 'reducer1' ).selector1()
+			const selector2 = createRegistrySelector(
+				( select ) => () => select( 'reducer1' ).selector1()
 			);
 			const selector3 = () => selector2();
 			registry.registerStore( 'reducer1', {
@@ -656,9 +651,8 @@ describe( 'createRegistry', () => {
 			const secondListener = jest.fn();
 
 			subscribeWithUnsubscribe( firstListener );
-			const secondUnsubscribe = subscribeWithUnsubscribe(
-				secondListener
-			);
+			const secondUnsubscribe =
+				subscribeWithUnsubscribe( secondListener );
 
 			store.dispatch( { type: 'dummy' } );
 
@@ -750,16 +744,18 @@ describe( 'createRegistry', () => {
 				// representation of the object, the latter applying its
 				// function proxying.
 				expect( _registry ).toMatchObject(
-					mapValues( registry, ( value, key ) => {
-						if ( key === 'stores' ) {
-							return expect.any( Object );
-						}
-						// TODO: Remove this after namsespaces is removed.
-						if ( key === 'namespaces' ) {
-							return registry.stores;
-						}
-						return expect.any( Function );
-					} )
+					Object.fromEntries(
+						Object.entries( registry ).map( ( [ key ] ) => {
+							if ( key === 'stores' ) {
+								return [ key, expect.any( Object ) ];
+							}
+							// TODO: Remove this after namsespaces is removed.
+							if ( key === 'namespaces' ) {
+								return [ key, registry.stores ];
+							}
+							return [ key, expect.any( Function ) ];
+						} )
+					)
 				);
 
 				actualOptions = options;