From f9f9519b5f4ce34d820aefa5dbe202f875c4b8a5 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 25 Jan 2019 06:27:14 -0800 Subject: [PATCH 1/2] Update compose documentation A few minor rewording and updates from @chrisvanpatten in #13496 --- packages/compose/README.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/compose/README.md b/packages/compose/README.md index 93d5cc6b1d742e..262fde78e09c4e 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -2,14 +2,16 @@ The `compose` package is a collection of handy [Higher Order Components](https://facebook.github.io/react/docs/higher-order-components.html) (HOCs) you can use to wrap your WordPress components and provide some basic features like: state, instance id, pure... -The **compose** function is an alias to [flowRight](https://lodash.com/docs/#flowRight) from Lodash. It comes from functional programming world and allows to compose any number of functions. An example that illustrates it for two functions: +The `compose` function is an alias to [flowRight](https://lodash.com/docs/#flowRight) from Lodash. It comes from functional programming, and allows you to compose any number of functions. You might also think of this as layering functions; `compose` will execute each function in sequence, passing the output of the function to the next function. + +An example that illustrates it for two functions: ```js const compose = ( f, g ) => x => f( g( x ) ); ``` -Here's a simplified example of **compose** in use from our code, see [plugin-sidebar](https://github.com/WordPress/gutenberg/blob/master/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js) for full code: +Here's a simplified example of **compose** in use from Gutenberg's [`PluginSidebar` component](https://github.com/WordPress/gutenberg/blob/master/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js): Using compose: @@ -28,7 +30,7 @@ export default compose( )( PluginSidebarMoreMenuItem ); ``` -Equivalent to the following without compose: +Without `compose`, the code would look like this: ```js const applyWithSelect = withSelect( ( select, ownProps ) => { @@ -45,7 +47,7 @@ export default withPluginContext( ) ) ); -``` + ## Installation @@ -71,6 +73,6 @@ function WrappedComponent( props ) { const ComponentWithInstanceIdProp = withInstanceId( WrappedComponent ); ``` -Refer to each Higher Order Component's README file for more details, see [list of components](https://github.com/WordPress/gutenberg/tree/master/packages/compose/src). +For more details, you can refer to each Higher Order Component's README file. [Available components are located here.](https://github.com/WordPress/gutenberg/tree/master/packages/compose/src)

Code is Poetry.

From 2be398af8b96399dad4bc0b05dff650b7fa9afed Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Fri, 25 Jan 2019 06:39:47 -0800 Subject: [PATCH 2/2] Update packages/compose/README.md Co-Authored-By: mkaz --- packages/compose/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compose/README.md b/packages/compose/README.md index 262fde78e09c4e..f0f8e25c14f38f 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -2,7 +2,7 @@ The `compose` package is a collection of handy [Higher Order Components](https://facebook.github.io/react/docs/higher-order-components.html) (HOCs) you can use to wrap your WordPress components and provide some basic features like: state, instance id, pure... -The `compose` function is an alias to [flowRight](https://lodash.com/docs/#flowRight) from Lodash. It comes from functional programming, and allows you to compose any number of functions. You might also think of this as layering functions; `compose` will execute each function in sequence, passing the output of the function to the next function. +The `compose` function is an alias to [flowRight](https://lodash.com/docs/#flowRight) from Lodash. It comes from functional programming, and allows you to compose any number of functions. You might also think of this as layering functions; `compose` will execute the last function first, then sequentially move back through the previous functions passing the result of each function upward. An example that illustrates it for two functions: