Data Module: Adding support for sync generators to allow async action creators

package.json

@@ -55,6 +55,7 @@
 		"redux-optimist": "1.0.0",
 		"refx": "3.0.0",
 		"rememo": "3.0.0",
+		"rungen": "0.3.2",
 		"showdown": "1.8.6",
 		"simple-html-tokenizer": "0.4.1",
 		"tinycolor2": "1.4.1",

packages/core-data/src/entities.js

@@ -66,7 +66,7 @@ export const getMethodName = ( kind, name, prefix = 'get', usePlural = false ) =
  *
  * @return {Array} Entities
  */
-export async function* getKindEntities( state, kind ) {
+export function* getKindEntities( state, kind ) {
 	let entities = getEntitiesByKind( state, kind );
 
 	if ( entities && entities.length !== 0 ) {
@@ -78,7 +78,7 @@ export async function* getKindEntities( state, kind ) {
 		return [];
 	}
 
-	entities = await kindConfig.loadEntities();
+	entities = yield kindConfig.loadEntities();
 	yield addEntities( entities );
 
 	return entities;

packages/core-data/src/resolvers.js

@@ -23,16 +23,16 @@ import { getKindEntities } from './entities';
  * Requests categories from the REST API, yielding action objects on request
  * progress.
  */
-export async function* getCategories() {
-	const categories = await apiRequest( { path: '/wp/v2/categories?per_page=-1' } );
+export function* getCategories() {
+	const categories = yield apiRequest( { path: '/wp/v2/categories?per_page=-1' } );
 	yield receiveTerms( 'categories', categories );
 }
 
 /**
  * Requests authors from the REST API.
  */
-export async function* getAuthors() {
-	const users = await apiRequest( { path: '/wp/v2/users/?who=authors&per_page=-1' } );
+export function* getAuthors() {
+	const users = yield apiRequest( { path: '/wp/v2/users/?who=authors&per_page=-1' } );
 	yield receiveUserQuery( 'authors', users );
 }
 
@@ -44,13 +44,13 @@ export async function* getAuthors() {
  * @param {string} name   Entity name.
  * @param {number} key    Record's key
  */
-export async function* getEntityRecord( state, kind, name, key ) {
-	const entities = yield* await getKindEntities( state, kind );
+export function* getEntityRecord( state, kind, name, key ) {
+	const entities = yield getKindEntities( state, kind );
 	const entity = find( entities, { kind, name } );
 	if ( ! entity ) {
 		return;
 	}
-	const record = await apiRequest( { path: `${ entity.baseUrl }/${ key }?context=edit` } );
+	const record = yield apiRequest( { path: `${ entity.baseUrl }/${ key }?context=edit` } );
 	yield receiveEntityRecords( kind, name, record );
 }
 
@@ -61,20 +61,20 @@ export async function* getEntityRecord( state, kind, name, key ) {
  * @param {string} kind   Entity kind.
  * @param {string} name   Entity name.
  */
-export async function* getEntityRecords( state, kind, name ) {
-	const entities = yield* await getKindEntities( state, kind );
+export function* getEntityRecords( state, kind, name ) {
+	const entities = yield getKindEntities( state, kind );
 	const entity = find( entities, { kind, name } );
 	if ( ! entity ) {
 		return;
 	}
-	const records = await apiRequest( { path: `${ entity.baseUrl }?context=edit` } );
+	const records = yield apiRequest( { path: `${ entity.baseUrl }?context=edit` } );
 	yield receiveEntityRecords( kind, name, Object.values( records ) );
 }
 
 /**
  * Requests theme supports data from the index.
  */
-export async function* getThemeSupports() {
-	const index = await apiRequest( { path: '/' } );
+export function* getThemeSupports() {
+	const index = yield apiRequest( { path: '/' } );
 	yield receiveThemeSupportsFromIndex( index );
 }

packages/core-data/src/test/entities.js

@@ -59,26 +59,27 @@ describe( 'getKindEntities', () => {
 		} );
 	} );
 
-	it( 'shouldn\'t do anything if the entities have already been resolved', async () => {
+	it( 'shouldn\'t do anything if the entities have already been resolved', () => {
 		const state = {
 			entities: { config: [ { kind: 'postType' } ] },
 		};
 		const fulfillment = getKindEntities( state, 'postType' );
-		const done = ( await fulfillment.next() ).done;
+		const done = fulfillment.next().done;
 		expect( done ).toBe( true );
 	} );
 
-	it( 'shouldn\'t do anything if there no defined kind config', async () => {
+	it( 'shouldn\'t do anything if there no defined kind config', () => {
 		const state = { entities: { config: [] } };
 		const fulfillment = getKindEntities( state, 'unknownKind' );
-		const done = ( await fulfillment.next() ).done;
+		const done = fulfillment.next().done;
 		expect( done ).toBe( true );
 	} );
 
 	it( 'should fetch and add the entities', async () => {
 		const state = { entities: { config: [] } };
 		const fulfillment = getKindEntities( state, 'postType' );
-		const received = ( await fulfillment.next() ).value;
+		const receivedEntities = await fulfillment.next().value;
+		const received = ( fulfillment.next( receivedEntities ) ).value;
 		expect( received ).toEqual( addEntities( [ {
 			baseUrl: '/wp/v2/posts',
 			kind: 'postType',

packages/core-data/src/test/resolvers.js

@@ -24,7 +24,8 @@ describe( 'getCategories', () => {
 
 	it( 'yields with requested terms', async () => {
 		const fulfillment = getCategories();
-		const received = ( await fulfillment.next() ).value;
+		const categories = await fulfillment.next().value;
+		const received = fulfillment.next( categories ).value;
 		expect( received ).toEqual( receiveTerms( 'categories', CATEGORIES ) );
 	} );
 } );
@@ -43,39 +44,16 @@ describe( 'getEntityRecord', () => {
 			if ( options.path === '/wp/v2/types/post?context=edit' ) {
 				return Promise.resolve( POST_TYPE );
 			}
-			if ( options.path === '/wp/v2/posts/10?context=edit' ) {
-				return Promise.resolve( POST );
-			}
-			if ( options.path === '/wp/v2/types?context=edit' ) {
-				return Promise.resolve( POST_TYPES );
-			}
 		} );
 	} );
 
 	it( 'yields with requested post type', async () => {
-		const state = {
-			entities: {
-				config: [
-					{ name: 'postType', kind: 'root', baseUrl: '/wp/v2/types' },
-				],
-			},
-		};
-		const fulfillment = getEntityRecord( state, 'root', 'postType', 'post' );
-		const received = ( await fulfillment.next() ).value;
+		const fulfillment = getEntityRecord( {}, 'root', 'postType', 'post' );
+		fulfillment.next(); // Trigger the getKindEntities generator
+		const records = await fulfillment.next( [ { name: 'postType', kind: 'root', baseUrl: '/wp/v2/types' } ] ).value;
+		const received = await fulfillment.next( records ).value;
 		expect( received ).toEqual( receiveEntityRecords( 'root', 'postType', POST_TYPE ) );
 	} );
-
-	it( 'loads the kind entities and yields with requested post type', async () => {
-		const fulfillment = getEntityRecord( { entities: {} }, 'postType', 'post', 10 );
-		const receivedEntities = ( await fulfillment.next() ).value;
-		expect( receivedEntities ).toEqual( addEntities( [ {
-			baseUrl: '/wp/v2/posts',
-			kind: 'postType',
-			name: 'post',
-		} ] ) );
-		const received = ( await fulfillment.next() ).value;
-		expect( received ).toEqual( receiveEntityRecords( 'postType', 'post', POST ) );
-	} );
 } );
 
 describe( 'getEntityRecords', () => {
@@ -93,15 +71,10 @@ describe( 'getEntityRecords', () => {
 	} );
 
 	it( 'yields with requested post type', async () => {
-		const state = {
-			entities: {
-				config: [
-					{ name: 'postType', kind: 'root', baseUrl: '/wp/v2/types' },
-				],
-			},
-		};
-		const fulfillment = getEntityRecords( state, 'root', 'postType' );
-		const received = ( await fulfillment.next() ).value;
+		const fulfillment = getEntityRecords( {}, 'root', 'postType' );
+		fulfillment.next(); // Trigger the getKindEntities generator
+		const records = await fulfillment.next( [ { name: 'postType', kind: 'root', baseUrl: '/wp/v2/types' } ] ).value;
+		const received = ( await fulfillment.next( records ) ).value;
 		expect( received ).toEqual( receiveEntityRecords( 'root', 'postType', Object.values( POST_TYPES ) ) );
 	} );
 } );

packages/data/src/components/registry-provider/index.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const { Consumer, Provider } = createContext( null );
+
+export const RegistryConsumer = Consumer;
+
+export default Provider;

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

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Component,
+	compose,
+	createElement,
+	createHigherOrderComponent,
+	pure,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import defaultRegistry from '../../default-registry';
+import { RegistryConsumer } from '../registry-provider';
+
+/**
+ * Higher-order component used to add dispatch props using registered action
+ * creators.
+ *
+ * @param {Object} mapDispatchToProps Object of prop names where value is a
+ *                                    dispatch-bound action creator, or a
+ *                                    function to be called with with the
+ *                                    component's props and returning an
+ *                                    action creator.
+ *
+ * @return {Component} Enhanced component with merged dispatcher props.
+ */
+const withDispatch = ( mapDispatchToProps ) => createHigherOrderComponent(
+	compose( [
+		pure,
+		( WrappedComponent ) => {
+			class ComponentWithDispatch extends Component {
+				constructor( props ) {
+					super( ...arguments );
+
+					this.proxyProps = {};
+					this.setProxyProps( props );
+				}
+
+				componentDidUpdate() {
+					this.setProxyProps( this.props );
+				}
+
+				proxyDispatch( propName, ...args ) {
+					// Original dispatcher is a pre-bound (dispatching) action creator.
+					const dispatch = this.props.registry ? this.props.registry.dispatch : defaultRegistry.dispatch;
+					mapDispatchToProps( dispatch, this.props.ownProps )[ propName ]( ...args );
+				}
+
+				setProxyProps( props ) {
+					// Assign as instance property so that in reconciling subsequent
+					// renders, the assigned prop values are referentially equal.
+					const dispatch = props.registry ? props.registry.dispatch : defaultRegistry.dispatch;
+					const propsToDispatchers = mapDispatchToProps( dispatch, props.ownProps );
+					this.proxyProps = mapValues( propsToDispatchers, ( dispatcher, propName ) => {
+						// Prebind with prop name so we have reference to the original
+						// dispatcher to invoke. Track between re-renders to avoid
+						// creating new function references every render.
+						if ( this.proxyProps.hasOwnProperty( propName ) ) {
+							return this.proxyProps[ propName ];
+						}
+
+						return this.proxyDispatch.bind( this, propName );
+					} );
+				}
+
+				render() {
+					return <WrappedComponent { ...this.props.ownProps } { ...this.proxyProps } />;
+				}
+			}
+
+			return ( ownProps ) => (
+				<RegistryConsumer>
+					{ ( registry ) => (
+						<ComponentWithDispatch
+							ownProps={ ownProps }
+							registry={ registry }
+						/>
+					) }
+				</RegistryConsumer>
+			);
+		},
+	] ),
+	'withDispatch'
+);
+
+export default withDispatch;

packages/data/src/components/with-dispatch/test/index.js

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * WordPress dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import withDispatch from '../';
+import { createRegistry } from '../../../registry';
+import RegistryProvider from '../../registry-provider';
+
+describe( 'withDispatch', () => {
+	let registry;
+	beforeEach( () => {
+		registry = createRegistry();
+	} );
+
+	it( 'passes the relevant data to the component', () => {
+		const store = registry.registerStore( 'counter', {
+			reducer: ( state = 0, action ) => {
+				if ( action.type === 'increment' ) {
+					return state + action.count;
+				}
+				return state;
+			},
+			actions: {
+				increment: ( count = 1 ) => ( { type: 'increment', count } ),
+			},
+		} );
+
+		const Component = withDispatch( ( _dispatch, ownProps ) => {
+			const { count } = ownProps;
+
+			return {
+				increment: () => _dispatch( 'counter' ).increment( count ),
+			};
+		} )( ( props ) => <button onClick={ props.increment } /> );
+
+		const testRenderer = TestRenderer.create(
+			<RegistryProvider value={ registry }>
+				<Component count={ 0 } />
+			</RegistryProvider>
+		);
+		const testInstance = testRenderer.root;
+
+		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.
+		testRenderer.update(
+			<RegistryProvider value={ registry }>
+				<Component count={ 2 } />
+			</RegistryProvider>
+		);
+
+		// Function value reference should not have changed in props update.
+		expect( testInstance.findByType( 'button' ).props.onClick ).toBe( incrementBeforeSetProps );
+
+		incrementBeforeSetProps();
+
+		expect( store.getState() ).toBe( 2 );
+	} );
+} );