-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Packages: Add a new compose package #7948
Conversation
c66e582
to
c25c23b
Compare
packages/compose/src/index.js
Outdated
*/ | ||
import { flowRight } from 'lodash'; | ||
|
||
export { default as ifCondition } from './if-condition'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about createHigherOrderComponent
? In my opinion, it fits here as well. All HOCs are created using it. It isn't very useful on its own inside element
package.
packages/compose/package.json
Outdated
"dependencies": { | ||
"@wordpress/element": "file:../element", | ||
"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", | ||
"lodash": "4.17.10" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use range for all dependencies, e.x.:
"lodash": "^4.17.10"
We use that in all other packages.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the same applies do devDependencies
:)
packages/element/src/index.js
Outdated
* WordPress dependencies | ||
*/ | ||
import isShallowEqual from '@wordpress/is-shallow-equal'; | ||
import { isString } from 'lodash'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whitesepace issue.
I think you need to add |
This is looking great, thanks for spinning up this PR. I was advocating for it for quite some time and I'm super excited it is happening 💯 |
packages/element/src/deprecated.js
Outdated
return flowRight( ...args ); | ||
}; | ||
|
||
export const pure = createHigherOrderComponent( ( Wrapped ) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, probably makes the most sense to keep those two items duplicated until they get removed 👍
packages/compose/package.json
Outdated
"module": "build-module/index.js", | ||
"dependencies": { | ||
"@wordpress/element": "file:../element", | ||
"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
npm ERR! Could not install from "packages/compose/packages/is-shallow-equal" as it does not contain a package.json file.
It should be:
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
Path needs to be relative, at least this is how Lerna does it. I mirrored their configuration.
packages/compose/package.json
Outdated
"lodash": "^4.17.10" | ||
}, | ||
"devDependencies": { | ||
"@wordpress/jest-console": "file:packages/jest-console", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think it should be included here. We never import it explicitly in the test file.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work on this PR. I tested it locally and it works perfectly fine. I could use deprecated methods and warnings were printed on the JS console.
I added a tiny change to package.json
which allows ranges for dev dependencies to align with other packages and general approach we took.
@@ -0,0 +1,27 @@ | |||
# @wordpress/compose | |||
|
|||
The `compose` package is a collection of handy [Higher Order Components](https://facebook.github.io/react/docs/higher-order-components.html) you can use to wrap your WordPress components and provide some basic features like: State, instanceId, pure... |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should use the documentation to make it extremely clear the distinction we have been modules like compose
, components
, and elements
(and data
, viewport
, etc), as even internally we've not been entirely consistent with what the approach is. With this being an effort to standardize the approach, we could do well to explain it thoroughly to avoid ambiguity.
|
||
export default mapValues( deprecatedFunctions, ( deprecatedFunction, key ) => { | ||
return ( ...args ) => { | ||
deprecated( 'wp.components.' + key, { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Historically our deprecated
ESLint rule has stumbled spectacularly on any sort of cleverness. Did we check to see how this works (re: the concatenation)?
Also, with "complications" like the need to remove exports from index.js
which is not entirely obvious by this deprecation call alone, it would be good to have included a comment noting said needs to the future maintainer.
This PR extracts some basic Higher-Order Components from the "element" and "components" modules into a "compose" package.
The idea is:
components
package for UI related components and HoCs making it the pattern library of WordPress.viewport
Where viewport depends oncomponents
andcomponents
depend onviewport
.Testing intructions