@wordpress/data 6.6.1 → 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/plugins/persistence/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { merge, isPlainObject, identity } from 'lodash';
+import { merge, isPlainObject } from 'lodash';
 
 /**
  * Internal dependencies
@@ -222,424 +222,6 @@ function persistencePlugin( registry, pluginOptions ) {
 	};
 }
 
-/**
- * Move the 'features' object in local storage from the sourceStoreName to the
- * preferences store.
- *
- * @param {Object} persistence     The persistence interface.
- * @param {string} sourceStoreName The name of the store that has persisted
- *                                 preferences to migrate to the preferences
- *                                 package.
- */
-export function migrateFeaturePreferencesToPreferencesStore(
-	persistence,
-	sourceStoreName
-) {
-	const preferencesStoreName = 'core/preferences';
-	const interfaceStoreName = 'core/interface';
-
-	const state = persistence.get();
-
-	// Features most recently (and briefly) lived in the interface package.
-	// If data exists there, prioritize using that for the migration. If not
-	// also check the original package as the user may have updated from an
-	// older block editor version.
-	const interfaceFeatures =
-		state[ interfaceStoreName ]?.preferences?.features?.[ sourceStoreName ];
-	const sourceFeatures = state[ sourceStoreName ]?.preferences?.features;
-	const featuresToMigrate = interfaceFeatures
-		? interfaceFeatures
-		: sourceFeatures;
-
-	if ( featuresToMigrate ) {
-		const existingPreferences = state[ preferencesStoreName ]?.preferences;
-
-		// Avoid migrating features again if they've previously been migrated.
-		if ( ! existingPreferences?.[ sourceStoreName ] ) {
-			// Set the feature values in the interface store, the features
-			// object is keyed by 'scope', which matches the store name for
-			// the source.
-			persistence.set( preferencesStoreName, {
-				preferences: {
-					...existingPreferences,
-					[ sourceStoreName ]: featuresToMigrate,
-				},
-			} );
-
-			// Remove migrated feature preferences from `interface`.
-			if ( interfaceFeatures ) {
-				const otherInterfaceState = state[ interfaceStoreName ];
-				const otherInterfaceScopes =
-					state[ interfaceStoreName ]?.preferences?.features;
-
-				persistence.set( interfaceStoreName, {
-					...otherInterfaceState,
-					preferences: {
-						features: {
-							...otherInterfaceScopes,
-							[ sourceStoreName ]: undefined,
-						},
-					},
-				} );
-			}
-
-			// Remove migrated feature preferences from the source.
-			if ( sourceFeatures ) {
-				const otherSourceState = state[ sourceStoreName ];
-				const sourcePreferences = state[ sourceStoreName ]?.preferences;
-
-				persistence.set( sourceStoreName, {
-					...otherSourceState,
-					preferences: {
-						...sourcePreferences,
-						features: undefined,
-					},
-				} );
-			}
-		}
-	}
-}
-
-/**
- * Migrates an individual item inside the `preferences` object for a store.
- *
- * @param {Object}    persistence   The persistence interface.
- * @param {Object}    migrate       An options object that contains details of the migration.
- * @param {string}    migrate.from  The name of the store to migrate from.
- * @param {string}    migrate.scope The scope in the preferences store to migrate to.
- * @param {string}    key           The key in the preferences object to migrate.
- * @param {?Function} convert       A function that converts preferences from one format to another.
- */
-export function migrateIndividualPreferenceToPreferencesStore(
-	persistence,
-	{ from: sourceStoreName, scope },
-	key,
-	convert = identity
-) {
-	const preferencesStoreName = 'core/preferences';
-	const state = persistence.get();
-	const sourcePreference = state[ sourceStoreName ]?.preferences?.[ key ];
-
-	// There's nothing to migrate, exit early.
-	if ( sourcePreference === undefined ) {
-		return;
-	}
-
-	const targetPreference =
-		state[ preferencesStoreName ]?.preferences?.[ scope ]?.[ key ];
-
-	// There's existing data at the target, so don't overwrite it, exit early.
-	if ( targetPreference ) {
-		return;
-	}
-
-	const otherScopes = state[ preferencesStoreName ]?.preferences;
-	const otherPreferences =
-		state[ preferencesStoreName ]?.preferences?.[ scope ];
-
-	// Pass an object with the key and value as this allows the convert
-	// function to convert to a data structure that has different keys.
-	const convertedPreferences = convert( { [ key ]: sourcePreference } );
-
-	persistence.set( preferencesStoreName, {
-		preferences: {
-			...otherScopes,
-			[ scope ]: {
-				...otherPreferences,
-				...convertedPreferences,
-			},
-		},
-	} );
-
-	// Remove migrated feature preferences from the source.
-	const otherSourceState = state[ sourceStoreName ];
-	const allSourcePreferences = state[ sourceStoreName ]?.preferences;
-	persistence.set( sourceStoreName, {
-		...otherSourceState,
-		preferences: {
-			...allSourcePreferences,
-			[ key ]: undefined,
-		},
-	} );
-}
-
-/**
- * Convert from:
- * ```
- * {
- *     panels: {
- *         tags: {
- *             enabled: true,
- *             opened: true,
- *         },
- *         permalinks: {
- *             enabled: false,
- *             opened: false,
- *         },
- *     },
- * }
- * ```
- *
- * to:
- * {
- *     inactivePanels: [
- *         'permalinks',
- *     ],
- *     openPanels: [
- *         'tags',
- *     ],
- * }
- *
- * @param {Object} preferences A preferences object.
- *
- * @return {Object} The converted data.
- */
-export function convertEditPostPanels( preferences ) {
-	const panels = preferences?.panels ?? {};
-	return Object.keys( panels ).reduce(
-		( convertedData, panelName ) => {
-			const panel = panels[ panelName ];
-
-			if ( panel?.enabled === false ) {
-				convertedData.inactivePanels.push( panelName );
-			}
-
-			if ( panel?.opened === true ) {
-				convertedData.openPanels.push( panelName );
-			}
-
-			return convertedData;
-		},
-		{ inactivePanels: [], openPanels: [] }
-	);
-}
-
-export function migrateThirdPartyFeaturePreferencesToPreferencesStore(
-	persistence
-) {
-	const interfaceStoreName = 'core/interface';
-	const preferencesStoreName = 'core/preferences';
-
-	let state = persistence.get();
-
-	const interfaceScopes = state[ interfaceStoreName ]?.preferences?.features;
-
-	for ( const scope in interfaceScopes ) {
-		// Don't migrate any core 'scopes'.
-		if ( scope.startsWith( 'core' ) ) {
-			continue;
-		}
-
-		// Skip this scope if there are no features to migrate.
-		const featuresToMigrate = interfaceScopes[ scope ];
-		if ( ! featuresToMigrate ) {
-			continue;
-		}
-
-		const existingPreferences = state[ preferencesStoreName ]?.preferences;
-
-		// Add the data to the preferences store structure.
-		persistence.set( preferencesStoreName, {
-			preferences: {
-				...existingPreferences,
-				[ scope ]: featuresToMigrate,
-			},
-		} );
-
-		// Remove the data from the interface store structure.
-		// Call `persistence.get` again to make sure `state` is up-to-date with
-		// any changes from the previous iteration of this loop.
-		state = persistence.get();
-		const otherInterfaceState = state[ interfaceStoreName ];
-		const otherInterfaceScopes =
-			state[ interfaceStoreName ]?.preferences?.features;
-
-		persistence.set( interfaceStoreName, {
-			...otherInterfaceState,
-			preferences: {
-				features: {
-					...otherInterfaceScopes,
-					[ scope ]: undefined,
-				},
-			},
-		} );
-	}
-}
-
-/**
- * Migrates interface 'enableItems' data to the preferences store.
- *
- * The interface package stores this data in this format:
- * ```js
- * {
- *     enableItems: {
- *         singleEnableItems: {
- * 	           complementaryArea: {
- *                 'core/edit-post': 'edit-post/document',
- *                 'core/edit-site': 'edit-site/global-styles',
- *             }
- *         },
- *         multipleEnableItems: {
- *             pinnedItems: {
- *                 'core/edit-post': {
- *                     'plugin-1': true,
- *                 },
- *                 'core/edit-site': {
- *                     'plugin-2': true,
- *                 },
- *             },
- *         }
- *     }
- * }
- * ```
- * and it should be migrated it to:
- * ```js
- * {
- *     'core/edit-post': {
- *         complementaryArea: 'edit-post/document',
- *         pinnedItems: {
- *             'plugin-1': true,
- *         },
- *     },
- *     'core/edit-site': {
- *         complementaryArea: 'edit-site/global-styles',
- *         pinnedItems: {
- *             'plugin-2': true,
- *         },
- *     },
- * }
- * ```
- *
- * @param {Object} persistence The persistence interface.
- */
-export function migrateInterfaceEnableItemsToPreferencesStore( persistence ) {
-	const interfaceStoreName = 'core/interface';
-	const preferencesStoreName = 'core/preferences';
-	const state = persistence.get();
-	const sourceEnableItems = state[ interfaceStoreName ]?.enableItems;
-
-	// There's nothing to migrate, exit early.
-	if ( ! sourceEnableItems ) {
-		return;
-	}
-
-	const allPreferences = state[ preferencesStoreName ]?.preferences ?? {};
-
-	// First convert complementaryAreas into the right format.
-	// Use the existing preferences as the accumulator so that the data is
-	// merged.
-	const sourceComplementaryAreas =
-		sourceEnableItems?.singleEnableItems?.complementaryArea ?? {};
-
-	const convertedComplementaryAreas = Object.keys(
-		sourceComplementaryAreas
-	).reduce( ( accumulator, scope ) => {
-		const data = sourceComplementaryAreas[ scope ];
-
-		// Don't overwrite any existing data in the preferences store.
-		if ( accumulator[ scope ]?.complementaryArea ) {
-			return accumulator;
-		}
-
-		return {
-			...accumulator,
-			[ scope ]: {
-				...accumulator[ scope ],
-				complementaryArea: data,
-			},
-		};
-	}, allPreferences );
-
-	// Next feed the converted complementary areas back into a reducer that
-	// converts the pinned items, resulting in the fully migrated data.
-	const sourcePinnedItems =
-		sourceEnableItems?.multipleEnableItems?.pinnedItems ?? {};
-	const allConvertedData = Object.keys( sourcePinnedItems ).reduce(
-		( accumulator, scope ) => {
-			const data = sourcePinnedItems[ scope ];
-			// Don't overwrite any existing data in the preferences store.
-			if ( accumulator[ scope ]?.pinnedItems ) {
-				return accumulator;
-			}
-
-			return {
-				...accumulator,
-				[ scope ]: {
-					...accumulator[ scope ],
-					pinnedItems: data,
-				},
-			};
-		},
-		convertedComplementaryAreas
-	);
-
-	persistence.set( preferencesStoreName, {
-		preferences: allConvertedData,
-	} );
-
-	// Remove migrated preferences.
-	const otherInterfaceItems = state[ interfaceStoreName ];
-	persistence.set( interfaceStoreName, {
-		...otherInterfaceItems,
-		enableItems: undefined,
-	} );
-}
-
-persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
-	const persistence = createPersistenceInterface( pluginOptions );
-
-	// Boolean feature preferences.
-	migrateFeaturePreferencesToPreferencesStore(
-		persistence,
-		'core/edit-widgets'
-	);
-	migrateFeaturePreferencesToPreferencesStore(
-		persistence,
-		'core/customize-widgets'
-	);
-	migrateFeaturePreferencesToPreferencesStore(
-		persistence,
-		'core/edit-post'
-	);
-	migrateFeaturePreferencesToPreferencesStore(
-		persistence,
-		'core/edit-site'
-	);
-	migrateThirdPartyFeaturePreferencesToPreferencesStore( persistence );
-
-	// Other ad-hoc preferences.
-	migrateIndividualPreferenceToPreferencesStore(
-		persistence,
-		{ from: 'core/edit-post', scope: 'core/edit-post' },
-		'hiddenBlockTypes'
-	);
-	migrateIndividualPreferenceToPreferencesStore(
-		persistence,
-		{ from: 'core/edit-post', scope: 'core/edit-post' },
-		'editorMode'
-	);
-	migrateIndividualPreferenceToPreferencesStore(
-		persistence,
-		{ from: 'core/edit-post', scope: 'core/edit-post' },
-		'preferredStyleVariations'
-	);
-	migrateIndividualPreferenceToPreferencesStore(
-		persistence,
-		{ from: 'core/edit-post', scope: 'core/edit-post' },
-		'panels',
-		convertEditPostPanels
-	);
-	migrateIndividualPreferenceToPreferencesStore(
-		persistence,
-		{ from: 'core/editor', scope: 'core/edit-post' },
-		'isPublishSidebarEnabled'
-	);
-	migrateIndividualPreferenceToPreferencesStore(
-		persistence,
-		{ from: 'core/edit-site', scope: 'core/edit-site' },
-		'editorMode'
-	);
-	migrateInterfaceEnableItemsToPreferencesStore( persistence );
-};
+persistencePlugin.__unstableMigrate = () => {};
 
 export default persistencePlugin;