Packages: Add package babel-plugin-transform-with-select

babel.config.js

@@ -4,6 +4,7 @@ module.exports = function( api ) {
 	return {
 		presets: [ '@wordpress/babel-preset-default' ],
 		plugins: [
+			'@wordpress/babel-plugin-transform-with-select',
 			[
 				'@wordpress/babel-plugin-import-jsx-pragma',
 				{

package.json

@@ -57,6 +57,7 @@
 		"@babel/traverse": "7.0.0",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
 		"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
+		"@wordpress/babel-plugin-transform-with-select": "file:packages/babel-plugin-transform-with-select",
 		"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
 		"@wordpress/browserslist-config": "file:packages/browserslist-config",
 		"@wordpress/custom-templated-path-webpack-plugin": "file:packages/custom-templated-path-webpack-plugin",

packages/babel-plugin-transform-with-select/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@wordpress/babel-plugin-transform-with-select",
+	"version": "1.0.0",
+	"description": "WordPress Babel transform to provide withSelect reducerKeys hint.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"babel",
+		"plugin"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/babel-plugin-transform-with-select/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"files": [
+		"build",
+		"build-module"
+	],
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"dependencies": {
+		"@babel/runtime": "^7.0.0"
+	},
+	"peerDependencies": {
+		"@babel/core": "^7.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/babel-plugin-transform-with-select/src/index.js

@@ -0,0 +1,56 @@
+export default function( babel ) {
+	const { types: t } = babel;
+
+	function addNamespaceToWithSelect( path, namespace ) {
+		let parentPath = path;
+		while ( ( parentPath = parentPath.parentPath ) ) {
+			const { node } = parentPath;
+			if ( node.type !== 'CallExpression' || node.callee.name !== 'withSelect' ) {
+				continue;
+			}
+
+			let reducerKeys;
+			if ( node.arguments.length > 1 ) {
+				const reducerKeysNode = node.arguments[ 1 ];
+				switch ( reducerKeysNode.type ) {
+					case 'ArrayExpression':
+						reducerKeys = reducerKeysNode.elements.reduce( ( result, element ) => {
+							if ( element.type === 'StringLiteral' ) {
+								result.push( element.value );
+							}
+
+							return result;
+						}, [] );
+						break;
+					case 'StringLiteral':
+						reducerKeys = [ reducerKeysNode.value ];
+						break;
+				}
+
+				if ( reducerKeys.includes( namespace ) ) {
+					break;
+				}
+
+				reducerKeys.push( namespace );
+				reducerKeys = reducerKeys.map( ( key ) => t.stringLiteral( key ) );
+				const argumentPaths = parentPath.get( 'arguments' );
+				argumentPaths[ 1 ].replaceWith( t.arrayExpression( reducerKeys ) );
+			} else {
+				parentPath.pushContainer( 'arguments', t.stringLiteral( namespace ) );
+			}
+
+			break;
+		}
+	}
+
+	return {
+		visitor: {
+			CallExpression( path ) {
+				const { node } = path;
+				if ( node.callee.name === 'select' && node.arguments.length > 0 && node.arguments[ 0 ].type === 'StringLiteral' ) {
+					addNamespaceToWithSelect( path, node.arguments[ 0 ].value );
+				}
+			},
+		},
+	};
+}

packages/data/src/components/with-select/index.js

@@ -14,13 +14,18 @@ import { RegistryConsumer } from '../registry-provider';
  * Higher-order component used to inject state-derived props using registered
  * selectors.
  *
- * @param {Function} mapSelectToProps Function called on every state change,
- *                                   expected to return object of props to
- *                                   merge with the component's own props.
+ * @param {Function}                mapSelectToProps Function called on every
+ *                                                   state change, expected to
+ *                                                   return object of props to
+ *                                                   merge with the component's
+ *                                                   own props.
+ * @param {?(string|Array<string>)} reducerKeys      Optional subset of reducer
+ *                                                   keys on which subscribe
+ *                                                   callback should be called.
  *
  * @return {Component} Enhanced component with merged state data props.
  */
-const withSelect = ( mapSelectToProps ) => createHigherOrderComponent( ( WrappedComponent ) => {
+const withSelect = ( mapSelectToProps, reducerKeys ) => createHigherOrderComponent( ( WrappedComponent ) => {
 	/**
 	 * Default merge props. A constant value is used as the fallback since it
 	 * can be more efficiently shallow compared in case component is repeatedly
@@ -137,7 +142,7 @@ const withSelect = ( mapSelectToProps ) => createHigherOrderComponent( ( Wrapped
 		}
 
 		subscribe( registry ) {
-			this.unsubscribe = registry.subscribe( this.onStoreChange );
+			this.unsubscribe = registry.subscribe( this.onStoreChange, reducerKeys );
 		}
 
 		render() {

packages/data/src/namespace-store.js

@@ -54,7 +54,7 @@ export default function createNamespace( key, options, registry ) {
 			lastState = state;
 
 			if ( hasChanged ) {
-				listener();
+				listener( key );
 			}
 		} );
 	};

packages/data/src/registry.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import {
+	castArray,
 	without,
 	mapValues,
 } from 'lodash';
@@ -12,6 +13,16 @@ import {
 import createNamespace from './namespace-store.js';
 import dataStore from './store';
 
+/**
+ * Given an array of functions, invokes each function in the array with an
+ * empty argument set.
+ *
+ * @param {Function[]} fns Functions to invoke.
+ */
+function invokeForEach( fns ) {
+	fns.forEach( ( fn ) => fn() );
+}
+
 /**
  * An isolated orchestrator of store registrations.
  *
@@ -40,27 +51,72 @@ import dataStore from './store';
  */
 export function createRegistry( storeConfigs = {} ) {
 	const stores = {};
-	let listeners = [];
+	let globalListeners = [];
+	const listenersByKey = {};
 
 	/**
 	 * Global listener called for each store's update.
+	 *
+	 * @param {?string} reducerKey Key of reducer which changed, if provided by
+	 *                             the registry implementation.
 	 */
-	function globalListener() {
-		listeners.forEach( ( listener ) => listener() );
+	function onStoreChange( reducerKey ) {
+		invokeForEach( globalListeners );
+
+		if ( reducerKey ) {
+			if ( listenersByKey[ reducerKey ] ) {
+				invokeForEach( listenersByKey[ reducerKey ] );
+			}
+		} else {
+			// For backwards compatibility with non-namespace-store, reducerKey
+			// is optional. If omitted, call every listenersByKey.
+			for ( const [ , listeners ] of Object.entries( listenersByKey ) ) {
+				invokeForEach( listeners );
+			}
+		}
 	}
 
 	/**
 	 * Subscribe to changes to any data.
 	 *
-	 * @param {Function}   listener Listener function.
+	 * @param {Function}                listener    Listener function.
+	 * @param {?(string|Array<string>)} reducerKeys Optional subset of reducer
+	 *                                              keys on which subscribe
+	 *                                              function should be called.
 	 *
-	 * @return {Function}           Unsubscribe function.
+	 * @return {Function} Unsubscribe function.
 	 */
-	const subscribe = ( listener ) => {
-		listeners.push( listener );
+	const subscribe = ( listener, reducerKeys ) => {
+		if ( reducerKeys ) {
+			// Overload to support string argument of `reducerKeys`.
+			reducerKeys = castArray( reducerKeys );
+
+			reducerKeys.forEach( ( reducerKey ) => {
+				if ( ! listenersByKey[ reducerKey ] ) {
+					listenersByKey[ reducerKey ] = [];
+				}
+
+				listenersByKey[ reducerKey ].push( listener );
+			} );
+
+			return () => {
+				reducerKeys.forEach( ( reducerKey ) => {
+					listenersByKey[ reducerKey ] = without(
+						listenersByKey[ reducerKey ],
+						listener
+					);
+
+					if ( ! listenersByKey[ reducerKey ].length ) {
+						delete listenersByKey[ reducerKey ];
+					}
+				} );
+			};
+		}
+
+		globalListeners.push( listener );
 
 		return () => {
-			listeners = without( listeners, listener );
+			globalListeners = without( globalListeners, listener );
 		};
 	};
 
@@ -122,7 +178,7 @@ export function createRegistry( storeConfigs = {} ) {
 			throw new TypeError( 'config.subscribe must be a function' );
 		}
 		stores[ key ] = config;
-		config.subscribe( globalListener );
+		config.subscribe( onStoreChange );
 	}
 
 	let registry = {