@wordpress/data 6.0.1 → 6.1.3

package/src/plugins/persistence/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { merge, isPlainObject, get, has } from 'lodash';
+import { merge, isPlainObject } from 'lodash';
 
 /**
  * Internal dependencies
@@ -223,75 +223,69 @@ function persistencePlugin( registry, pluginOptions ) {
 }
 
 /**
- * Deprecated: Remove this function and the code in WordPress Core that calls
- * it once WordPress 5.4 is released.
+ * Move the 'features' object in local storage from the sourceStoreName to the
+ * interface store.
+ *
+ * @param {Object} persistence     The persistence interface.
+ * @param {string} sourceStoreName The name of the store that has persisted
+ *                                 preferences to migrate to the interface
+ *                                 package.
  */
-
-persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
-	const persistence = createPersistenceInterface( pluginOptions );
-
+export function migrateFeaturePreferencesToInterfaceStore(
+	persistence,
+	sourceStoreName
+) {
+	const interfaceStoreName = 'core/interface';
 	const state = persistence.get();
+	const sourcePreferences = state[ sourceStoreName ]?.preferences;
+	const sourceFeatures = sourcePreferences?.features;
+
+	if ( sourceFeatures ) {
+		const targetFeatures =
+			state[ interfaceStoreName ]?.preferences?.features;
+
+		// Avoid migrating features again if they've previously been migrated.
+		if ( ! targetFeatures?.[ 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( interfaceStoreName, {
+				preferences: {
+					features: {
+						...targetFeatures,
+						[ sourceStoreName ]: sourceFeatures,
+					},
+				},
+			} );
 
-	// Migrate 'insertUsage' from 'core/editor' to 'core/block-editor'
-	const editorInsertUsage = state[ 'core/editor' ]?.preferences?.insertUsage;
-	if ( editorInsertUsage ) {
-		const blockEditorInsertUsage =
-			state[ 'core/block-editor' ]?.preferences?.insertUsage;
-		persistence.set( 'core/block-editor', {
-			preferences: {
-				insertUsage: {
-					...editorInsertUsage,
-					...blockEditorInsertUsage,
+			// Remove feature preferences from the source.
+			persistence.set( sourceStoreName, {
+				preferences: {
+					...sourcePreferences,
+					features: undefined,
 				},
-			},
-		} );
+			} );
+		}
 	}
+}
 
-	let editPostState = state[ 'core/edit-post' ];
-
-	// Default `fullscreenMode` to `false` if any persisted state had existed
-	// and the user hadn't made an explicit choice about fullscreen mode. This
-	// is needed since `fullscreenMode` previously did not have a default value
-	// and was implicitly false by its absence. It is now `true` by default, but
-	// this change is not intended to affect upgrades from earlier versions.
-	const hadPersistedState = Object.keys( state ).length > 0;
-	const hadFullscreenModePreference = has( state, [
-		'core/edit-post',
-		'preferences',
-		'features',
-		'fullscreenMode',
-	] );
-	if ( hadPersistedState && ! hadFullscreenModePreference ) {
-		editPostState = merge( {}, editPostState, {
-			preferences: { features: { fullscreenMode: false } },
-		} );
-	}
+/**
+ * Deprecated: Remove this function and the code in WordPress Core that calls
+ * it once WordPress 6.0 is released.
+ */
 
-	// Migrate 'areTipsEnabled' from 'core/nux' to 'showWelcomeGuide' in 'core/edit-post'
-	const areTipsEnabled = get( state, [
-		'core/nux',
-		'preferences',
-		'areTipsEnabled',
-	] );
-	const hasWelcomeGuide = has( state, [
-		'core/edit-post',
-		'preferences',
-		'features',
-		'welcomeGuide',
-	] );
-	if ( areTipsEnabled !== undefined && ! hasWelcomeGuide ) {
-		editPostState = merge( {}, editPostState, {
-			preferences: {
-				features: {
-					welcomeGuide: areTipsEnabled,
-				},
-			},
-		} );
-	}
+persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
+	const persistence = createPersistenceInterface( pluginOptions );
 
-	if ( editPostState !== state[ 'core/edit-post' ] ) {
-		persistence.set( 'core/edit-post', editPostState );
-	}
+	migrateFeaturePreferencesToInterfaceStore(
+		persistence,
+		'core/edit-widgets'
+	);
+	migrateFeaturePreferencesToInterfaceStore(
+		persistence,
+		'core/customize-widgets'
+	);
+	migrateFeaturePreferencesToInterfaceStore( persistence, 'core/edit-post' );
 };
 
 export default persistencePlugin;

package/src/plugins/persistence/test/index.js

@@ -6,7 +6,11 @@ import deepFreeze from 'deep-freeze';
 /**
  * Internal dependencies
  */
-import plugin, { createPersistenceInterface, withLazySameState } from '../';
+import plugin, {
+	createPersistenceInterface,
+	withLazySameState,
+	migrateFeaturePreferencesToInterfaceStore,
+} from '../';
 import objectStorage from '../storage/object';
 import { createRegistry } from '../../../';
 
@@ -377,3 +381,115 @@ describe( 'persistence', () => {
 		} );
 	} );
 } );
+
+describe( 'migrateFeaturePreferencesToInterfaceStore', () => {
+	it( 'migrates preferences from the source to the interface store', () => {
+		const persistenceInterface = createPersistenceInterface( {
+			storageKey: 'test-username',
+		} );
+
+		const initialState = {
+			preferences: {
+				features: {
+					featureA: true,
+					featureB: false,
+					featureC: true,
+				},
+			},
+		};
+
+		persistenceInterface.set( 'core/test', initialState );
+
+		migrateFeaturePreferencesToInterfaceStore(
+			persistenceInterface,
+			'core/test'
+		);
+
+		expect( persistenceInterface.get() ).toEqual( {
+			'core/interface': {
+				preferences: {
+					features: {
+						'core/test': {
+							featureA: true,
+							featureB: false,
+							featureC: true,
+						},
+					},
+				},
+			},
+			'core/test': {
+				preferences: {
+					features: undefined,
+				},
+			},
+		} );
+	} );
+
+	it( 'handles multiple preferences from different stores to be migrated', () => {
+		const persistenceInterface = createPersistenceInterface( {
+			storageKey: 'test-username',
+		} );
+
+		const initialStateA = {
+			preferences: {
+				features: {
+					featureA: true,
+					featureB: false,
+					featureC: true,
+				},
+			},
+		};
+
+		const initialStateB = {
+			preferences: {
+				features: {
+					featureD: true,
+					featureE: false,
+					featureF: true,
+				},
+			},
+		};
+
+		persistenceInterface.set( 'core/test-a', initialStateA );
+		persistenceInterface.set( 'core/test-b', initialStateB );
+
+		migrateFeaturePreferencesToInterfaceStore(
+			persistenceInterface,
+			'core/test-a'
+		);
+
+		migrateFeaturePreferencesToInterfaceStore(
+			persistenceInterface,
+			'core/test-b'
+		);
+
+		expect( persistenceInterface.get() ).toEqual( {
+			'core/interface': {
+				preferences: {
+					features: {
+						'core/test-a': {
+							featureA: true,
+							featureB: false,
+							featureC: true,
+						},
+						'core/test-b': {
+							featureD: true,
+							featureE: false,
+							featureF: true,
+						},
+					},
+				},
+			},
+			'core/test-a': {
+				preferences: {
+					features: undefined,
+				},
+			},
+			'core/test-b': {
+				preferences: {
+					features: undefined,
+				},
+			},
+		} );
+	} );
+} );

package/src/redux-store/index.js

@@ -26,6 +26,16 @@ import * as metadataActions from './metadata/actions';
 /** @typedef {import('../types').WPDataStore} WPDataStore */
 /** @typedef {import('../types').WPDataReduxStoreConfig} WPDataReduxStoreConfig */
 
+const trimUndefinedValues = ( array ) => {
+	const result = [ ...array ];
+	for ( let i = result.length - 1; i >= 0; i-- ) {
+		if ( result[ i ] === undefined ) {
+			result.splice( i, 1 );
+		}
+	}
+	return result;
+};
+
 /**
  * Create a cache to track whether resolvers started running or not.
  *
@@ -35,12 +45,15 @@ function createResolversCache() {
 	const cache = {};
 	return {
 		isRunning( selectorName, args ) {
-			return cache[ selectorName ] && cache[ selectorName ].get( args );
+			return (
+				cache[ selectorName ] &&
+				cache[ selectorName ].get( trimUndefinedValues( args ) )
+			);
 		},
 
 		clear( selectorName, args ) {
 			if ( cache[ selectorName ] ) {
-				cache[ selectorName ].delete( args );
+				cache[ selectorName ].delete( trimUndefinedValues( args ) );
 			}
 		},
 
@@ -49,7 +62,7 @@ function createResolversCache() {
 				cache[ selectorName ] = new EquivalentKeyMap();
 			}
 
-			cache[ selectorName ].set( args, true );
+			cache[ selectorName ].set( trimUndefinedValues( args ), true );
 		},
 	};
 }
@@ -324,7 +337,6 @@ function mapResolveSelectors( selectors, store ) {
 				const hasFinished = () =>
 					selectors.hasFinishedResolution( selectorName, args );
 				const getResult = () => selector.apply( null, args );
-
 				// trigger the selector (to trigger the resolver)
 				const result = getResult();
 				if ( hasFinished() ) {
@@ -376,6 +388,7 @@ function mapResolvers( resolvers, selectors, store, resolversCache ) {
 		const selectorResolver = ( ...args ) => {
 			async function fulfillSelector() {
 				const state = store.getState();
+
 				if (
 					resolversCache.isRunning( selectorName, args ) ||
 					( typeof resolver.isFulfilled === 'function' &&

package/src/registry.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { without, mapValues, isObject } from 'lodash';
+import { mapValues, isObject, forEach } from 'lodash';
 
 /**
  * Internal dependencies
@@ -9,6 +9,7 @@ import { without, mapValues, isObject } from 'lodash';
 import createReduxStore from './redux-store';
 import createCoreDataStore from './store';
 import { STORE_NAME } from './store/name';
+import { createEmitter } from './utils/emitter';
 
 /** @typedef {import('./types').WPDataStore} WPDataStore */
 
@@ -49,14 +50,14 @@ import { STORE_NAME } from './store/name';
  */
 export function createRegistry( storeConfigs = {}, parent = null ) {
 	const stores = {};
-	let listeners = [];
+	const emitter = createEmitter();
 	const __experimentalListeningStores = new Set();
 
 	/**
 	 * Global listener called for each store's update.
 	 */
 	function globalListener() {
-		listeners.forEach( ( listener ) => listener() );
+		emitter.emit();
 	}
 
 	/**
@@ -67,11 +68,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @return {Function} Unsubscribe function.
 	 */
 	const subscribe = ( listener ) => {
-		listeners.push( listener );
-
-		return () => {
-			listeners = without( listeners, listener );
-		};
+		return emitter.subscribe( listener );
 	};
 
 	/**
@@ -177,6 +174,30 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 		if ( typeof config.subscribe !== 'function' ) {
 			throw new TypeError( 'config.subscribe must be a function' );
 		}
+		// Thi emitter is used to keep track of active listeners when the registry
+		// get paused, that way, when resumed we should be able to call all these
+		// pending listeners.
+		config.emitter = createEmitter();
+		const currentSubscribe = config.subscribe;
+		config.subscribe = ( listener ) => {
+			const unsubscribeFromStoreEmitter = config.emitter.subscribe(
+				listener
+			);
+			const unsubscribeFromRootStore = currentSubscribe( () => {
+				if ( config.emitter.isPaused ) {
+					config.emitter.emit();
+					return;
+				}
+				listener();
+			} );
+
+			return () => {
+				if ( unsubscribeFromRootStore ) {
+					unsubscribeFromRootStore();
+				}
+				unsubscribeFromStoreEmitter();
+			};
+		};
 		stores[ key ] = config;
 		config.subscribe( globalListener );
 	}
@@ -213,7 +234,16 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 		return parent.__experimentalSubscribeStore( storeName, handler );
 	}
 
+	function batch( callback ) {
+		emitter.pause();
+		forEach( stores, ( store ) => store.emitter.pause() );
+		callback();
+		emitter.resume();
+		forEach( stores, ( store ) => store.emitter.resume() );
+	}
+
 	let registry = {
+		batch,
 		registerGenericStore,
 		stores,
 		namespaces: stores, // TODO: Deprecate/remove this.

package/src/test/registry.js

@@ -722,6 +722,40 @@ describe( 'createRegistry', () => {
 		} );
 	} );
 
+	describe( 'batch', () => {
+		it( 'should batch callbacks and only run the subscriber once', () => {
+			const store = registry.registerStore( 'myAwesomeReducer', {
+				reducer: ( state = 0 ) => state + 1,
+			} );
+			const listener = jest.fn();
+			subscribeWithUnsubscribe( listener );
+
+			registry.batch( () => {} );
+			expect( listener ).not.toHaveBeenCalled();
+
+			registry.batch( () => {
+				store.dispatch( { type: 'dummy' } );
+				store.dispatch( { type: 'dummy' } );
+			} );
+			expect( listener ).toHaveBeenCalledTimes( 1 );
+
+			const listener2 = jest.fn();
+			// useSelect subscribes to the stores differently,
+			// This test ensures batching works in this case as well.
+			const unsubscribe = registry.__experimentalSubscribeStore(
+				'myAwesomeReducer',
+				listener2
+			);
+			registry.batch( () => {
+				store.dispatch( { type: 'dummy' } );
+				store.dispatch( { type: 'dummy' } );
+			} );
+			unsubscribe();
+
+			expect( listener2 ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
 	describe( 'use', () => {
 		it( 'should pass through options object to plugin', () => {
 			const expectedOptions = {};

package/src/{types.d.ts → types.ts}

@@ -30,3 +30,11 @@ export interface WPDataReduxStoreConfig {
 export interface WPDataRegistry {
 	register: ( store: WPDataStore ) => void;
 }
+
+export interface WPDataEmitter {
+	emit: () => void;
+	subscribe: ( listener: () => void ) => () => void;
+	pause: () => void;
+	resume: () => void;
+	isPaused: boolean;
+}

package/src/utils/emitter.js

@@ -0,0 +1,46 @@
+/**
+ * Create an event emitter.
+ *
+ * @return {import("../types").WPDataEmitter} Emitter.
+ */
+export function createEmitter() {
+	let isPaused = false;
+	let isPending = false;
+	const listeners = new Set();
+	const notifyListeners = () =>
+		// We use Array.from to clone the listeners Set
+		// This ensures that we don't run a listener
+		// that was added as a response to another listener.
+		Array.from( listeners ).forEach( ( listener ) => listener() );
+
+	return {
+		get isPaused() {
+			return isPaused;
+		},
+
+		subscribe( listener ) {
+			listeners.add( listener );
+			return () => listeners.delete( listener );
+		},
+
+		pause() {
+			isPaused = true;
+		},
+
+		resume() {
+			isPaused = false;
+			if ( isPending ) {
+				isPending = false;
+				notifyListeners();
+			}
+		},
+
+		emit() {
+			if ( isPaused ) {
+				isPending = true;
+				return;
+			}
+			notifyListeners();
+		},
+	};
+}

package/tsconfig.json

@@ -16,5 +16,7 @@
 	"include": [
 		"src/redux-store/metadata/**/*",
 		"src/promise-middleware.js",
+		"src/utils",
+	  	"src/*.ts"
 	]
 }