@wordpress/data 6.8.0 → 6.9.0

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

@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import { render, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createRegistry,
+	createReduxStore,
+	useSuspenseSelect,
+	RegistryProvider,
+} from '@wordpress/data';
+import { Component, Suspense } from '@wordpress/element';
+
+jest.useRealTimers();
+
+function createRegistryWithStore() {
+	const initialState = {
+		prefix: 'pre-',
+		token: null,
+		data: null,
+		fails: true,
+	};
+
+	const reducer = ( state = initialState, action ) => {
+		switch ( action.type ) {
+			case 'RECEIVE_TOKEN':
+				return { ...state, token: action.token };
+			case 'RECEIVE_DATA':
+				return { ...state, data: action.data };
+			default:
+				return state;
+		}
+	};
+
+	const selectors = {
+		getPrefix: ( state ) => state.prefix,
+		getToken: ( state ) => state.token,
+		getData: ( state, token ) => {
+			if ( ! token ) {
+				throw 'missing token in selector';
+			}
+			return state.data;
+		},
+		getThatFails: ( state ) => state.fails,
+	};
+
+	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' } );
+		},
+		getThatFails: () => async () => {
+			await sleep( 10 );
+			throw 'resolution failed';
+		},
+	};
+
+	const store = createReduxStore( 'test', {
+		reducer,
+		selectors,
+		resolvers,
+	} );
+
+	const registry = createRegistry();
+	registry.register( store );
+
+	return { registry, store };
+}
+
+describe( 'useSuspenseSelect', () => {
+	it( 'renders after suspending a few times', async () => {
+		const { registry, store } = createRegistryWithStore();
+		let attempts = 0;
+		let renders = 0;
+
+		const UI = () => {
+			attempts++;
+			const { result } = useSuspenseSelect( ( select ) => {
+				const prefix = select( store ).getPrefix();
+				const token = select( store ).getToken();
+				const data = select( store ).getData( token );
+				return { result: prefix + data };
+			}, [] );
+			renders++;
+			return <div aria-label="loaded">{ result }</div>;
+		};
+
+		const App = () => (
+			<RegistryProvider value={ registry }>
+				<Suspense fallback="loading">
+					<UI />
+				</Suspense>
+			</RegistryProvider>
+		);
+
+		const rendered = render( <App /> );
+		await waitFor( () => rendered.getByLabelText( 'loaded' ) );
+
+		// Verify there were 3 attempts to render. Suspended twice because of
+		// `getToken` and `getData` selectors not being resolved, and then finally
+		// rendered after all data got loaded.
+		expect( attempts ).toBe( 3 );
+		expect( renders ).toBe( 1 );
+	} );
+
+	it( 'shows error when resolution fails', async () => {
+		const { registry, store } = createRegistryWithStore();
+
+		const UI = () => {
+			const { token } = useSuspenseSelect( ( select ) => {
+				// Call a selector whose resolution fails. The `useSuspenseSelect`
+				// is then supposed to throw the resolution error.
+				return { token: select( store ).getThatFails() };
+			}, [] );
+			return <div aria-label="loaded">{ token }</div>;
+		};
+
+		class Error extends Component {
+			state = { error: null };
+
+			static getDerivedStateFromError( error ) {
+				return { error };
+			}
+
+			render() {
+				if ( this.state.error ) {
+					return <div aria-label="error">{ this.state.error }</div>;
+				}
+				return this.props.children;
+			}
+		}
+
+		const App = () => (
+			<RegistryProvider value={ registry }>
+				<Error>
+					<Suspense fallback="loading">
+						<UI />
+					</Suspense>
+				</Error>
+			</RegistryProvider>
+		);
+
+		const rendered = render( <App /> );
+		const label = await waitFor( () => rendered.getByLabelText( 'error' ) );
+		expect( label.textContent ).toBe( 'resolution failed' );
+		expect( console ).toHaveErrored();
+	} );
+} );

package/src/index.js

@@ -19,7 +19,10 @@ export {
 	RegistryConsumer,
 	useRegistry,
 } from './components/registry-provider';
-export { default as useSelect } from './components/use-select';
+export {
+	default as useSelect,
+	useSuspenseSelect,
+} from './components/use-select';
 export { useDispatch } from './components/use-dispatch';
 export { AsyncModeProvider } from './components/async-mode-provider';
 export { createRegistry } from './registry';
@@ -115,6 +118,18 @@ export const select = defaultRegistry.select;
  */
 export const resolveSelect = defaultRegistry.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 throw promises in case the selector is not resolved yet.
+ *
+ * @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
+ *                                                       or the store descriptor.
+ *
+ * @return {Object} Object containing the store's suspense-wrapped selectors.
+ */
+export const suspendSelect = defaultRegistry.suspendSelect;
+
 /**
  * Given the name of a registered store, returns an object of the store's action creators.
  * Calling an action creator will cause it to be dispatched, updating the state value accordingly.

package/src/redux-store/index.js

@@ -162,10 +162,12 @@ export default function createReduxStore( key, options ) {
 			}
 
 			const resolveSelectors = mapResolveSelectors( selectors, store );
+			const suspendSelectors = mapSuspendSelectors( selectors, store );
 
 			const getSelectors = () => selectors;
 			const getActions = () => actions;
 			const getResolveSelectors = () => resolveSelectors;
+			const getSuspendSelectors = () => suspendSelectors;
 
 			// We have some modules monkey-patching the store object
 			// It's wrong to do so but until we refactor all of our effects to controls
@@ -200,6 +202,7 @@ export default function createReduxStore( key, options ) {
 				resolvers,
 				getSelectors,
 				getResolveSelectors,
+				getSuspendSelectors,
 				getActions,
 				subscribe,
 			};
@@ -376,6 +379,46 @@ function mapResolveSelectors( selectors, store ) {
 	} );
 }
 
+/**
+ * Maps selectors to functions that throw a suspense promise if not yet resolved.
+ *
+ * @param {Object} selectors Selectors to map.
+ * @param {Object} store     The redux store the selectors select from.
+ *
+ * @return {Object} Selectors mapped to their suspense functions.
+ */
+function mapSuspendSelectors( selectors, store ) {
+	return mapValues( selectors, ( selector, selectorName ) => {
+		// Selector without a resolver doesn't have any extra suspense behavior.
+		if ( ! selector.hasResolver ) {
+			return selector;
+		}
+
+		return ( ...args ) => {
+			const result = selector.apply( null, args );
+
+			if ( selectors.hasFinishedResolution( selectorName, args ) ) {
+				if ( selectors.hasResolutionFailed( selectorName, args ) ) {
+					throw selectors.getResolutionError( selectorName, args );
+				}
+
+				return result;
+			}
+
+			throw new Promise( ( resolve ) => {
+				const unsubscribe = store.subscribe( () => {
+					if (
+						selectors.hasFinishedResolution( selectorName, args )
+					) {
+						resolve();
+						unsubscribe();
+					}
+				} );
+			} );
+		};
+	} );
+}
+
 /**
  * Returns resolvers with matched selectors for a given namespace.
  * Resolvers are side effects invoked once per argument set of a given selector call,

package/src/registry.js

@@ -93,14 +93,16 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 			return store.getSelectors();
 		}
 
-		return parent && parent.select( storeName );
+		return parent?.select( storeName );
 	}
 
 	function __unstableMarkListeningStores( callback, ref ) {
 		listeningStores.clear();
-		const result = callback.call( this );
-		ref.current = Array.from( listeningStores );
-		return result;
+		try {
+			return callback.call( this );
+		} finally {
+			ref.current = Array.from( listeningStores );
+		}
 	}
 
 	/**
@@ -127,6 +129,29 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 		return parent && parent.resolveSelect( storeName );
 	}
 
+	/**
+	 * 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.
+	 *
+	 * @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
+	 *                                                       or the store descriptor.
+	 *
+	 * @return {Object} Object containing the store's suspense-wrapped selectors.
+	 */
+	function suspendSelect( storeNameOrDescriptor ) {
+		const storeName = isObject( storeNameOrDescriptor )
+			? storeNameOrDescriptor.name
+			: storeNameOrDescriptor;
+		listeningStores.add( storeName );
+		const store = stores[ storeName ];
+		if ( store ) {
+			return store.getSuspendSelectors();
+		}
+
+		return parent && parent.suspendSelect( storeName );
+	}
+
 	/**
 	 * Returns the available actions for a part of the state.
 	 *
@@ -276,6 +301,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 		subscribe,
 		select,
 		resolveSelect,
+		suspendSelect,
 		dispatch,
 		use,
 		register,

package/tsconfig.json

@@ -3,7 +3,7 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"noUnusedParameters": false,
+		"noUnusedParameters": false
 	},
 	"references": [
 		{ "path": "../compose" },
@@ -17,6 +17,6 @@
 		"src/redux-store/metadata/**/*",
 		"src/promise-middleware.js",
 		"src/utils",
-	  	"src/*.ts"
+		"src/*.ts"
 	]
 }