@wordpress/data 6.8.0 → 6.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "6.8.0",
+	"version": "6.11.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.6.0",
-		"@wordpress/deprecated": "^3.8.0",
-		"@wordpress/element": "^4.6.0",
-		"@wordpress/is-shallow-equal": "^4.8.0",
-		"@wordpress/priority-queue": "^2.8.0",
-		"@wordpress/redux-routine": "^4.8.0",
+		"@wordpress/compose": "^5.9.0",
+		"@wordpress/deprecated": "^3.11.0",
+		"@wordpress/element": "^4.9.0",
+		"@wordpress/is-shallow-equal": "^4.11.0",
+		"@wordpress/priority-queue": "^2.11.0",
+		"@wordpress/redux-routine": "^4.11.0",
 		"equivalent-key-map": "^0.2.2",
 		"is-promise": "^4.0.0",
 		"lodash": "^4.17.21",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
+	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
 }

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

@@ -241,3 +241,130 @@ export default function useSelect( mapSelect, deps ) {
 
 	return hasMappingFunction ? mapOutput : registry.select( mapSelect );
 }
+
+/**
+ * A variant of the `useSelect` hook that has the same API, but will throw a
+ * suspense Promise if any of the called selectors is in an unresolved state.
+ *
+ * @param {Function} mapSelect Function called on every state change. The
+ *                             returned value is exposed to the component
+ *                             using this hook. The function receives the
+ *                             `registry.suspendSelect` method as the first
+ *                             argument and the `registry` as the second one.
+ * @param {Array}    deps      A dependency array used to memoize the `mapSelect`
+ *                             so that the same `mapSelect` is invoked on every
+ *                             state change unless the dependencies change.
+ *
+ * @return {Object} Data object returned by the `mapSelect` function.
+ */
+export function useSuspenseSelect( mapSelect, deps ) {
+	const _mapSelect = useCallback( mapSelect, deps );
+
+	const registry = useRegistry();
+	const isAsync = useAsyncMode();
+
+	const latestRegistry = useRef( registry );
+	const latestMapSelect = useRef();
+	const latestIsAsync = useRef( isAsync );
+	const latestMapOutput = useRef();
+	const latestMapOutputError = useRef();
+
+	// Keep track of the stores being selected in the `mapSelect` function,
+	// and only subscribe to those stores later.
+	const listeningStores = useRef( [] );
+	const wrapSelect = useCallback(
+		( callback ) =>
+			registry.__unstableMarkListeningStores(
+				() => callback( registry.suspendSelect, registry ),
+				listeningStores
+			),
+		[ registry ]
+	);
+
+	// Generate a "flag" for used in the effect dependency array.
+	// It's different than just using `mapSelect` since deps could be undefined,
+	// in that case, we would still want to memoize it.
+	const depsChangedFlag = useMemo( () => ( {} ), deps || [] );
+
+	let mapOutput = latestMapOutput.current;
+	let mapOutputError = latestMapOutputError.current;
+
+	const hasReplacedRegistry = latestRegistry.current !== registry;
+	const hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;
+	const hasLeftAsyncMode = latestIsAsync.current && ! isAsync;
+
+	if ( hasReplacedRegistry || hasReplacedMapSelect || hasLeftAsyncMode ) {
+		try {
+			mapOutput = wrapSelect( _mapSelect );
+		} catch ( error ) {
+			mapOutputError = error;
+		}
+	}
+
+	useIsomorphicLayoutEffect( () => {
+		latestRegistry.current = registry;
+		latestMapSelect.current = _mapSelect;
+		latestIsAsync.current = isAsync;
+		latestMapOutput.current = mapOutput;
+		latestMapOutputError.current = mapOutputError;
+	} );
+
+	// React can sometimes clear the `useMemo` cache.
+	// We use the cache-stable `useMemoOne` to avoid
+	// losing queues.
+	const queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );
+	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );
+	const isMounted = useRef( false );
+
+	useIsomorphicLayoutEffect( () => {
+		const onStoreChange = () => {
+			try {
+				const newMapOutput = wrapSelect( latestMapSelect.current );
+
+				if ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {
+					return;
+				}
+				latestMapOutput.current = newMapOutput;
+			} catch ( error ) {
+				latestMapOutputError.current = error;
+			}
+
+			forceRender();
+		};
+
+		const onChange = () => {
+			if ( ! isMounted.current ) {
+				return;
+			}
+
+			if ( latestIsAsync.current ) {
+				renderQueue.add( queueContext, onStoreChange );
+			} else {
+				onStoreChange();
+			}
+		};
+
+		// catch any possible state changes during mount before the subscription
+		// could be set.
+		onStoreChange();
+
+		const unsubscribers = listeningStores.current.map( ( storeName ) =>
+			registry.__unstableSubscribeStore( storeName, onChange )
+		);
+
+		isMounted.current = true;
+
+		return () => {
+			// The return value of the subscribe function could be undefined if the store is a custom generic store.
+			unsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );
+			renderQueue.cancel( queueContext );
+			isMounted.current = false;
+		};
+	}, [ registry, wrapSelect, depsChangedFlag ] );
+
+	if ( mapOutputError ) {
+		throw mapOutputError;
+	}
+
+	return mapOutput;
+}

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

@@ -1025,4 +1025,75 @@ describe( 'useSelect', () => {
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 		} );
 	} );
+
+	describe( 'usage without dependencies array', () => {
+		function registerStore( name, initial ) {
+			registry.registerStore( name, {
+				reducer: ( s = initial, a ) => ( a.type === 'inc' ? s + 1 : s ),
+				actions: { inc: () => ( { type: 'inc' } ) },
+				selectors: { get: ( s ) => s },
+			} );
+		}
+
+		it( 'does not memoize the callback when there are no deps', () => {
+			registerStore( 'store', 1 );
+
+			const Status = ( { multiple } ) => {
+				const count = useSelect(
+					( select ) => select( 'store' ).get() * multiple
+				);
+				return <div role="status">{ count }</div>;
+			};
+
+			const App = ( { multiple } ) => (
+				<RegistryProvider value={ registry }>
+					<Status multiple={ multiple } />
+				</RegistryProvider>
+			);
+
+			const rendered = render( <App multiple={ 1 } /> );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+
+			// Check that the most recent value of `multiple` is used to render:
+			// the old callback wasn't memoized and there is no stale closure problem.
+			rendered.rerender( <App multiple={ 2 } /> );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 2 );
+		} );
+
+		it( 'subscribes only stores used by the initial callback', () => {
+			registerStore( 'counter-1', 1 );
+			registerStore( 'counter-2', 10 );
+
+			const Status = ( { store } ) => {
+				const count = useSelect( ( select ) => select( store ).get() );
+				return <div role="status">{ count }</div>;
+			};
+
+			const App = ( { store } ) => (
+				<RegistryProvider value={ registry }>
+					<Status store={ store } />
+				</RegistryProvider>
+			);
+
+			// initial render with counter-1
+			const rendered = render( <App store="counter-1" /> );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+
+			// update from counter-1
+			act( () => {
+				registry.dispatch( 'counter-1' ).inc();
+			} );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 2 );
+
+			// rerender with counter-2
+			rendered.rerender( <App store="counter-2" /> );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 10 );
+
+			// update from counter-2 is ignored because component is subcribed only to counter-1
+			act( () => {
+				registry.dispatch( 'counter-2' ).inc();
+			} );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 10 );
+		} );
+	} );
 } );

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

@@ -0,0 +1,164 @@
+/**
+ * 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/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/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/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;