@wordpress/data 9.4.0 → 9.5.1

package/src/redux-store/index.js

@@ -15,7 +15,7 @@ import { compose } from '@wordpress/compose';
  * Internal dependencies
  */
 import { builtinControls } from '../controls';
-import { lock } from '../private-apis';
+import { lock } from '../lock-unlock';
 import promise from '../promise-middleware';
 import createResolversCacheMiddleware from '../resolvers-cache-middleware';
 import createThunkMiddleware from './thunk-middleware';
@@ -54,12 +54,11 @@ const trimUndefinedValues = ( array ) => {
  * @return {Array} Transformed object.
  */
 const mapValues = ( obj, callback ) =>
-	Object.entries( obj ?? {} ).reduce(
-		( acc, [ key, value ] ) => ( {
-			...acc,
-			[ key ]: callback( value, key ),
-		} ),
-		{}
+	Object.fromEntries(
+		Object.entries( obj ?? {} ).map( ( [ key, value ] ) => [
+			key,
+			callback( value, key ),
+		] )
 	);
 
 // Convert Map objects to plain objects
@@ -102,6 +101,21 @@ function createResolversCache() {
 	};
 }
 
+function createBindingCache( bind ) {
+	const cache = new WeakMap();
+
+	return {
+		get( item ) {
+			let boundItem = cache.get( item );
+			if ( ! boundItem ) {
+				boundItem = bind( item );
+				cache.set( item, boundItem );
+			}
+			return boundItem;
+		},
+	};
+}
+
 /**
  * Creates a data store descriptor for the provided Redux store configuration containing
  * properties describing reducer, actions, selectors, controls and resolvers.
@@ -148,17 +162,10 @@ export default function createReduxStore( key, options ) {
 			const thunkArgs = {
 				registry,
 				get dispatch() {
-					return Object.assign(
-						( action ) => store.dispatch( action ),
-						getActions()
-					);
+					return thunkActions;
 				},
 				get select() {
-					return Object.assign(
-						( selector ) =>
-							selector( store.__unstableOriginalGetState() ),
-						getSelectors()
-					);
+					return thunkSelectors;
 				},
 				get resolveSelect() {
 					return getResolveSelectors();
@@ -176,77 +183,94 @@ export default function createReduxStore( key, options ) {
 			lock( store, privateRegistrationFunctions );
 			const resolversCache = createResolversCache();
 
-			let resolvers;
-			const actions = mapActions(
-				{
-					...metadataActions,
-					...options.actions,
-				},
-				store
-			);
-			lock(
-				actions,
-				new Proxy( privateActions, {
-					get: ( target, prop ) => {
-						return (
-							mapActions( privateActions, store )[ prop ] ||
-							actions[ prop ]
-						);
-					},
-				} )
-			);
+			function bindAction( action ) {
+				return ( ...args ) =>
+					Promise.resolve( store.dispatch( action( ...args ) ) );
+			}
 
-			let selectors = mapSelectors(
-				{
-					...mapValues(
-						metadataSelectors,
-						( selector ) =>
-							( state, ...args ) =>
-								selector( state.metadata, ...args )
-					),
-					...mapValues( options.selectors, ( selector ) => {
-						if ( selector.isRegistrySelector ) {
-							selector.registry = registry;
-						}
+			const actions = {
+				...mapValues( metadataActions, bindAction ),
+				...mapValues( options.actions, bindAction ),
+			};
 
-						return ( state, ...args ) =>
-							selector( state.root, ...args );
-					} ),
+			const boundPrivateActions = createBindingCache( bindAction );
+			const allActions = new Proxy( () => {}, {
+				get: ( target, prop ) => {
+					const privateAction = privateActions[ prop ];
+					return privateAction
+						? boundPrivateActions.get( privateAction )
+						: actions[ prop ];
 				},
-				store
-			);
-			lock(
-				selectors,
-				new Proxy( privateSelectors, {
-					get: ( target, prop ) => {
-						return (
-							mapSelectors(
-								mapValues( privateSelectors, ( selector ) => {
-									if ( selector.isRegistrySelector ) {
-										selector.registry = registry;
-									}
-
-									return ( state, ...args ) =>
-										selector( state.root, ...args );
-								} ),
-								store
-							)[ prop ] || selectors[ prop ]
-						);
-					},
-				} )
-			);
+			} );
+
+			const thunkActions = new Proxy( allActions, {
+				apply: ( target, thisArg, [ action ] ) =>
+					store.dispatch( action ),
+			} );
+
+			lock( actions, allActions );
+
+			function bindSelector( selector ) {
+				if ( selector.isRegistrySelector ) {
+					selector.registry = registry;
+				}
+				const boundSelector = ( ...args ) => {
+					const state = store.__unstableOriginalGetState();
+					return selector( state.root, ...args );
+				};
+				boundSelector.hasResolver = false;
+				return boundSelector;
+			}
+
+			function bindMetadataSelector( selector ) {
+				const boundSelector = ( ...args ) => {
+					const state = store.__unstableOriginalGetState();
+					return selector( state.metadata, ...args );
+				};
+				boundSelector.hasResolver = false;
+				return boundSelector;
+			}
+
+			let selectors = {
+				...mapValues( metadataSelectors, bindMetadataSelector ),
+				...mapValues( options.selectors, bindSelector ),
+			};
 
+			let resolvers;
 			if ( options.resolvers ) {
-				const result = mapResolvers(
-					options.resolvers,
+				resolvers = mapResolvers( options.resolvers );
+				selectors = mapSelectorsWithResolvers(
 					selectors,
+					resolvers,
 					store,
 					resolversCache
 				);
-				resolvers = result.resolvers;
-				selectors = result.selectors;
 			}
 
+			const boundPrivateSelectors = createBindingCache( bindSelector );
+
+			// Pre-bind the private selectors that have been registered by the time of
+			// instantiation, so that registry selectors are bound to the registry.
+			for ( const privateSelector of Object.values( privateSelectors ) ) {
+				boundPrivateSelectors.get( privateSelector );
+			}
+
+			const allSelectors = new Proxy( () => {}, {
+				get: ( target, prop ) => {
+					const privateSelector = privateSelectors[ prop ];
+					return privateSelector
+						? boundPrivateSelectors.get( privateSelector )
+						: selectors[ prop ];
+				},
+			} );
+
+			const thunkSelectors = new Proxy( allSelectors, {
+				apply: ( target, thisArg, [ selector ] ) =>
+					selector( store.__unstableOriginalGetState() ),
+			} );
+
+			lock( selectors, allSelectors );
+
 			const resolveSelectors = mapResolveSelectors( selectors, store );
 			const suspendSelectors = mapSuspendSelectors( selectors, store );
 
@@ -360,59 +384,6 @@ function instantiateReduxStore( key, options, registry, thunkArgs ) {
 	);
 }
 
-/**
- * Maps selectors to a store.
- *
- * @param {Object} selectors Selectors to register. Keys will be used as the
- *                           public facing API. Selectors will get passed the
- *                           state as first argument.
- * @param {Object} store     The store to which the selectors should be mapped.
- * @return {Object} Selectors mapped to the provided store.
- */
-function mapSelectors( selectors, store ) {
-	const createStateSelector = ( registrySelector ) => {
-		const selector = function runSelector() {
-			// This function is an optimized implementation of:
-			//
-			//   selector( store.getState(), ...arguments )
-			//
-			// Where the above would incur an `Array#concat` in its application,
-			// the logic here instead efficiently constructs an arguments array via
-			// direct assignment.
-			const argsLength = arguments.length;
-			const args = new Array( argsLength + 1 );
-			args[ 0 ] = store.__unstableOriginalGetState();
-			for ( let i = 0; i < argsLength; i++ ) {
-				args[ i + 1 ] = arguments[ i ];
-			}
-
-			return registrySelector( ...args );
-		};
-		selector.hasResolver = false;
-		return selector;
-	};
-
-	return mapValues( selectors, createStateSelector );
-}
-
-/**
- * Maps actions to dispatch from a given store.
- *
- * @param {Object} actions Actions to register.
- * @param {Object} store   The redux store to which the actions should be mapped.
- *
- * @return {Object} Actions mapped to the redux store provided.
- */
-function mapActions( actions, store ) {
-	const createBoundAction =
-		( action ) =>
-		( ...args ) => {
-			return Promise.resolve( store.dispatch( action( ...args ) ) );
-		};
-
-	return mapValues( actions, createBoundAction );
-}
-
 /**
  * Maps selectors to functions that return a resolution promise for them
  *
@@ -519,20 +490,13 @@ function mapSuspendSelectors( selectors, store ) {
 }
 
 /**
- * Returns resolvers with matched selectors for a given namespace.
- * Resolvers are side effects invoked once per argument set of a given selector call,
- * used in ensuring that the data needs for the selector are satisfied.
+ * Convert resolvers to a normalized form, an object with `fulfill` method and
+ * optional methods like `isFulfilled`.
  *
- * @param {Object} resolvers      Resolvers to register.
- * @param {Object} selectors      The current selectors to be modified.
- * @param {Object} store          The redux store to which the resolvers should be mapped.
- * @param {Object} resolversCache Resolvers Cache.
+ * @param {Object} resolvers Resolver to convert
  */
-function mapResolvers( resolvers, selectors, store, resolversCache ) {
-	// The `resolver` can be either a function that does the resolution, or, in more advanced
-	// cases, an object with a `fullfill` method and other optional methods like `isFulfilled`.
-	// Here we normalize the `resolver` function to an object with `fulfill` method.
-	const mappedResolvers = mapValues( resolvers, ( resolver ) => {
+function mapResolvers( resolvers ) {
+	return mapValues( resolvers, ( resolver ) => {
 		if ( resolver.fulfill ) {
 			return resolver;
 		}
@@ -542,99 +506,81 @@ function mapResolvers( resolvers, selectors, store, resolversCache ) {
 			fulfill: resolver, // Add the fulfill method.
 		};
 	} );
+}
 
-	const mapSelector = ( selector, selectorName ) => {
-		const resolver = resolvers[ selectorName ];
-		if ( ! resolver ) {
-			selector.hasResolver = false;
-			return selector;
+/**
+ * Returns resolvers with matched selectors for a given namespace.
+ * Resolvers are side effects invoked once per argument set of a given selector call,
+ * used in ensuring that the data needs for the selector are satisfied.
+ *
+ * @param {Object} selectors      The current selectors to be modified.
+ * @param {Object} resolvers      Resolvers to register.
+ * @param {Object} store          The redux store to which the resolvers should be mapped.
+ * @param {Object} resolversCache Resolvers Cache.
+ */
+function mapSelectorsWithResolvers(
+	selectors,
+	resolvers,
+	store,
+	resolversCache
+) {
+	function fulfillSelector( resolver, selectorName, args ) {
+		const state = store.getState();
+
+		if (
+			resolversCache.isRunning( selectorName, args ) ||
+			( typeof resolver.isFulfilled === 'function' &&
+				resolver.isFulfilled( state, ...args ) )
+		) {
+			return;
 		}
 
-		const selectorResolver = ( ...args ) => {
-			async function fulfillSelector() {
-				const state = store.getState();
-
-				if (
-					resolversCache.isRunning( selectorName, args ) ||
-					( typeof resolver.isFulfilled === 'function' &&
-						resolver.isFulfilled( state, ...args ) )
-				) {
-					return;
-				}
+		const { metadata } = store.__unstableOriginalGetState();
 
-				const { metadata } = store.__unstableOriginalGetState();
-
-				if (
-					metadataSelectors.hasStartedResolution(
-						metadata,
-						selectorName,
-						args
-					)
-				) {
-					return;
-				}
+		if (
+			metadataSelectors.hasStartedResolution(
+				metadata,
+				selectorName,
+				args
+			)
+		) {
+			return;
+		}
 
-				resolversCache.markAsRunning( selectorName, args );
+		resolversCache.markAsRunning( selectorName, args );
 
-				setTimeout( async () => {
-					resolversCache.clear( selectorName, args );
-					store.dispatch(
-						metadataActions.startResolution( selectorName, args )
-					);
-					try {
-						await fulfillResolver(
-							store,
-							mappedResolvers,
-							selectorName,
-							...args
-						);
-						store.dispatch(
-							metadataActions.finishResolution(
-								selectorName,
-								args
-							)
-						);
-					} catch ( error ) {
-						store.dispatch(
-							metadataActions.failResolution(
-								selectorName,
-								args,
-								error
-							)
-						);
-					}
-				} );
+		setTimeout( async () => {
+			resolversCache.clear( selectorName, args );
+			store.dispatch(
+				metadataActions.startResolution( selectorName, args )
+			);
+			try {
+				const action = resolver.fulfill( ...args );
+				if ( action ) {
+					await store.dispatch( action );
+				}
+				store.dispatch(
+					metadataActions.finishResolution( selectorName, args )
+				);
+			} catch ( error ) {
+				store.dispatch(
+					metadataActions.failResolution( selectorName, args, error )
+				);
 			}
+		}, 0 );
+	}
+
+	return mapValues( selectors, ( selector, selectorName ) => {
+		const resolver = resolvers[ selectorName ];
+		if ( ! resolver ) {
+			return selector;
+		}
 
-			fulfillSelector( ...args );
+		const selectorResolver = ( ...args ) => {
+			fulfillSelector( resolver, selectorName, args );
 			return selector( ...args );
 		};
 		selectorResolver.hasResolver = true;
 		return selectorResolver;
-	};
-
-	return {
-		resolvers: mappedResolvers,
-		selectors: mapValues( selectors, mapSelector ),
-	};
-}
-
-/**
- * Calls a resolver given arguments
- *
- * @param {Object} store        Store reference, for fulfilling via resolvers
- * @param {Object} resolvers    Store Resolvers
- * @param {string} selectorName Selector name to fulfill.
- * @param {Array}  args         Selector Arguments.
- */
-async function fulfillResolver( store, resolvers, selectorName, ...args ) {
-	const resolver = resolvers[ selectorName ];
-	if ( ! resolver ) {
-		return;
-	}
-
-	const action = resolver.fulfill( ...args );
-	if ( action ) {
-		await store.dispatch( action );
-	}
+	} );
 }

package/src/registry.js

@@ -9,7 +9,7 @@ import deprecated from '@wordpress/deprecated';
 import createReduxStore from './redux-store';
 import coreDataStore from './store';
 import { createEmitter } from './utils/emitter';
-import { lock, unlock } from './private-apis';
+import { lock, unlock } from './lock-unlock';
 
 /** @typedef {import('./types').StoreDescriptor} StoreDescriptor */
 

package/src/test/privateAPIs.js

@@ -3,7 +3,8 @@
  */
 import { createRegistry } from '../registry';
 import createReduxStore from '../redux-store';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
+import { createRegistrySelector } from '../factory';
 
 describe( 'Private data APIs', () => {
 	let registry;
@@ -32,23 +33,19 @@ describe( 'Private data APIs', () => {
 			getState: ( state ) => state,
 		},
 		actions: { setPublicPrice },
-		reducer: ( state, action ) => {
-			if ( action?.type === 'SET_PRIVATE_PRICE' ) {
+		reducer: ( state = { price: 1000, secretDiscount: 800 }, action ) => {
+			if ( action.type === 'SET_PRIVATE_PRICE' ) {
 				return {
 					...state,
-					secretDiscount: action?.price,
+					secretDiscount: action.price,
 				};
-			} else if ( action?.type === 'SET_PUBLIC_PRICE' ) {
+			} else if ( action.type === 'SET_PUBLIC_PRICE' ) {
 				return {
 					...state,
-					price: action?.price,
+					price: action.price,
 				};
 			}
-			return {
-				price: 1000,
-				secretDiscount: 800,
-				...( state || {} ),
-			};
+			return state;
 		},
 	};
 	function createStore() {
@@ -96,6 +93,37 @@ describe( 'Private data APIs', () => {
 			);
 		} );
 
+		it( 'should support combination of private selectors and resolvers', async () => {
+			const testStore = createReduxStore( 'test', {
+				reducer: ( state = {}, action ) => {
+					if ( action.type === 'RECEIVE' ) {
+						return { ...state, [ action.key ]: action.value };
+					}
+					return state;
+				},
+				selectors: {
+					get: ( state, key ) => state[ key ],
+				},
+				resolvers: {
+					get:
+						( key ) =>
+						async ( { dispatch } ) => {
+							const value = await ( 'resolved-' + key );
+							dispatch( { type: 'RECEIVE', key, value } );
+						},
+				},
+			} );
+			unlock( testStore ).registerPrivateSelectors( {
+				peek: ( state, key ) => state[ key ],
+			} );
+			registry.register( testStore );
+
+			await registry.resolveSelect( testStore ).get( 'x' );
+			expect( unlock( registry.select( testStore ) ).peek( 'x' ) ).toBe(
+				'resolved-x'
+			);
+		} );
+
 		it( 'should give private selectors access to the state', () => {
 			const groceryStore = createStore();
 			unlock( groceryStore ).registerPrivateSelectors( {
@@ -116,6 +144,16 @@ describe( 'Private data APIs', () => {
 			expect( unlockedSelectors.getPublicPrice() ).toEqual( 1000 );
 		} );
 
+		it( 'should return stable references to selectors', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+			const select = unlock( registry.select( groceryStore ) );
+			expect( select.getPublicPrice ).toBe( select.getPublicPrice );
+			expect( select.getSecretDiscount ).toBe( select.getSecretDiscount );
+		} );
+
 		it( 'should support registerStore', () => {
 			const groceryStore = registry.registerStore(
 				storeName,
@@ -164,6 +202,42 @@ describe( 'Private data APIs', () => {
 			);
 			expect( subPrivateSelectors.getSecretDiscount() ).toEqual( 800 );
 		} );
+
+		it( 'should support private registry selectors', () => {
+			const groceryStore = createStore();
+			const otherStore = createReduxStore( 'other', {
+				reducer: ( state = {} ) => state,
+			} );
+			unlock( otherStore ).registerPrivateSelectors( {
+				getPrice: createRegistrySelector(
+					( select ) => () => select( groceryStore ).getPublicPrice()
+				),
+			} );
+			registry.register( otherStore );
+			const privateSelectors = unlock( registry.select( otherStore ) );
+			expect( privateSelectors.getPrice() ).toEqual( 1000 );
+		} );
+
+		it( 'should support calling a private registry selector from a public selector', () => {
+			const groceryStore = createStore();
+			const getPriceWithShipping = createRegistrySelector(
+				( select ) => () => select( groceryStore ).getPublicPrice() + 5
+			);
+			const store = createReduxStore( 'a', {
+				reducer: ( state = {} ) => state,
+				selectors: {
+					getPriceWithShippingAndTax: ( state ) =>
+						getPriceWithShipping( state ) * 1.1,
+				},
+			} );
+			unlock( store ).registerPrivateSelectors( {
+				getPriceWithShipping,
+			} );
+			registry.register( store );
+			expect(
+				registry.select( store ).getPriceWithShippingAndTax()
+			).toEqual( 1105.5 );
+		} );
 	} );
 
 	describe( 'private actions', () => {
@@ -232,6 +306,16 @@ describe( 'Private data APIs', () => {
 			).toEqual( 400 );
 		} );
 
+		it( 'should return stable references to actions', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			const disp = unlock( registry.dispatch( groceryStore ) );
+			expect( disp.setPublicPrice ).toBe( disp.setPublicPrice );
+			expect( disp.setSecretDiscount ).toBe( disp.setSecretDiscount );
+		} );
+
 		it( 'should dispatch public actions on the unlocked store', () => {
 			const groceryStore = createStore();
 			unlock( groceryStore ).registerPrivateActions( {
@@ -263,6 +347,29 @@ describe( 'Private data APIs', () => {
 			).toEqual( 100 );
 		} );
 
+		it( 'should expose unlocked private selectors and actions to thunks', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+				doubleSecretDiscount() {
+					return ( { dispatch, select } ) => {
+						dispatch.setSecretDiscount(
+							select.getSecretDiscount() * 2
+						);
+					};
+				},
+			} );
+			const privateActions = unlock( registry.dispatch( groceryStore ) );
+			privateActions.setSecretDiscount( 100 );
+			privateActions.doubleSecretDiscount();
+			expect(
+				unlock( registry.select( groceryStore ) ).getSecretDiscount()
+			).toEqual( 200 );
+		} );
+
 		it( 'should support registerStore', () => {
 			const groceryStore = registry.registerStore(
 				storeName,