Packages: Move element to packages maintained by Lerna (#6756)

* Packages: Move element to packages maintained by Lerna * Packages: Add React keyword to the description
WordPress · May 15, 2018 · cd848e9 · cd848e9
1 parent f920f2d
commit cd848e9
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 26 deletions.
diff --git a/components/autocomplete/test/index.js b/components/autocomplete/test/index.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { mount } from 'enzyme';
-import { Component } from '../../../element';
 import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { keycodes } from '@wordpress/utils';
 
 /**

diff --git a/components/higher-order/with-focus-return/test/index.js b/components/higher-order/with-focus-return/test/index.js
@@ -2,7 +2,11 @@
  * External dependencies
  */
 import { shallow, mount } from 'enzyme';
-import { Component } from '../../../../element';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies

diff --git a/data/README.md b/data/README.md
@@ -174,7 +174,7 @@ registerStore( 'my-shop', {
 
 ### Higher-Order Components
 
-A higher-order component is a function which accepts a [component](https://github.com/WordPress/gutenberg/tree/master/element) and returns a new, enhanced component. A stateful user interface should respond to changes in the underlying state and updates its displayed element accordingly. WordPress uses higher-order components both as a means to separate the purely visual aspects of an interface from its data backing, and to ensure that the data is kept in-sync with the stores.
+A higher-order component is a function which accepts a [component](https://github.com/WordPress/gutenberg/tree/master/packages/element) and returns a new, enhanced component. A stateful user interface should respond to changes in the underlying state and updates its displayed element accordingly. WordPress uses higher-order components both as a means to separate the purely visual aspects of an interface from its data backing, and to ensure that the data is kept in-sync with the stores.
 
 #### `withSelect( mapSelectToProps: Function ): Function`
 
@@ -239,7 +239,7 @@ const SaleButton = withDispatch( ( dispatch, ownProps ) => {
 
 The data module shares many of the same [core principles](https://redux.js.org/introduction/three-principles) and [API method naming](https://redux.js.org/api-reference) of [Redux](https://redux.js.org/). In fact, it is implemented atop Redux. Where it differs is in establishing a modularization pattern for creating separate but interdependent stores, and in codifying conventions such as selector functions as the primary entry point for data access.
 
-The [higher-order components](#higher-order-components) were created to complement this distinction. The intention with splitting `withSelect` and `withDispatch` — where in React Redux they are combined under `connect` as `mapStateToProps` and `mapDispatchToProps` arguments — is to more accurately reflect that dispatch is not dependent upon a subscription to state changes, and to allow for state-derived values to be used in `withDispatch` (via [higher-order component composition](https://github.com/WordPress/gutenberg/tree/master/element#compose)).
+The [higher-order components](#higher-order-components) were created to complement this distinction. The intention with splitting `withSelect` and `withDispatch` — where in React Redux they are combined under `connect` as `mapStateToProps` and `mapDispatchToProps` arguments — is to more accurately reflect that dispatch is not dependent upon a subscription to state changes, and to allow for state-derived values to be used in `withDispatch` (via [higher-order component composition](https://github.com/WordPress/gutenberg/tree/master/packages/element#compose)).
 
 Specific implementation differences from Redux and React Redux:
 

diff --git a/docs/block-api/block-edit-save.md b/docs/block-api/block-edit-save.md
@@ -101,7 +101,7 @@ save() {
 ```
 {% end %}
 
-For most blocks, the return value of `save` should be an [instance of WordPress Element](https://github.com/WordPress/gutenberg/blob/master/element/README.md) representing how the block is to appear on the front of the site.
+For most blocks, the return value of `save` should be an [instance of WordPress Element](https://github.com/WordPress/gutenberg/blob/master/packages/element/README.md) representing how the block is to appear on the front of the site.
 
 _Note:_ While it is possible to return a string value from `save`, it _will be escaped_. If the string includes HTML markup, the markup will be shown on the front of the site verbatim, not as the equivalent HTML node content. If you must return raw HTML from `save`, use `wp.element.RawHTML`. As the name implies, this is prone to [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) and therefore is discouraged in favor of a WordPress Element hierarchy whenever possible.
 

diff --git a/docs/blocks/generate-blocks-with-wp-cli.md b/docs/blocks/generate-blocks-with-wp-cli.md
@@ -118,7 +118,7 @@ add_action( 'init', 'movie_block_init' );
  var registerBlockType = wp.blocks.registerBlockType;
  /**
  * Returns a new element of given type. Element is an abstraction layer atop React.
- * @see https://github.com/WordPress/gutenberg/tree/master/element#element
+ * @see https://github.com/WordPress/gutenberg/tree/master/packages/element#element
  */
  var el = wp.element.createElement;
  /**

diff --git a/docs/blocks/writing-your-first-block-type.md b/docs/blocks/writing-your-first-block-type.md
@@ -28,7 +28,7 @@ add_action( 'init', 'gutenberg_boilerplate_block' );
 Note the two script dependencies:
 
 - __`wp-blocks`__ includes block type registration and related functions
-- __`wp-element`__ includes the [WordPress Element abstraction](https://github.com/WordPress/gutenberg/tree/master/element) for describing the structure of your blocks
+- __`wp-element`__ includes the [WordPress Element abstraction](https://github.com/WordPress/gutenberg/tree/master/packages/element) for describing the structure of your blocks
 
 ## Registering the Block
 
@@ -80,7 +80,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-01', {
 ```
 {% end %}
 
-Once a block is registered, you should immediately see that it becomes available as an option in the editor inserter dialog, using values from `title`, `icon`, and `category` to organize its display. You can choose an icon from any included in the built-in [Dashicons icon set](https://developer.wordpress.org/resource/dashicons/), or provide your own by assigning the value of `icon` as a [WordPress Element](https://github.com/WordPress/gutenberg/tree/master/element) element or component.
+Once a block is registered, you should immediately see that it becomes available as an option in the editor inserter dialog, using values from `title`, `icon`, and `category` to organize its display. You can choose an icon from any included in the built-in [Dashicons icon set](https://developer.wordpress.org/resource/dashicons/), or provide your own by assigning the value of `icon` as a [WordPress Element](https://github.com/WordPress/gutenberg/tree/master/packages/element) element or component.
 
 A block name must be prefixed with a namespace specific to your plugin. This helps prevent conflicts when more than one plugin registers a block with the same name.
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
  "@wordpress/dom-ready": "1.0.4",
  "@wordpress/hooks": "1.1.6",
  "@wordpress/i18n": "1.1.0",
- "@wordpress/is-shallow-equal": "1.0.1",
+ "@wordpress/is-shallow-equal": "1.0.2",
  "@wordpress/url": "1.1.0",
  "@wordpress/wordcount": "1.0.2",
  "classnames": "2.2.5",

diff --git a/element/README.md → packages/element/README.md b/element/README.md → packages/element/README.md
@@ -1,5 +1,4 @@
-Element
-=======
+# @wordpress/element
 
 Element is, quite simply, an abstraction layer atop [React](https://reactjs.org/).
 
@@ -14,7 +13,15 @@ On the `wp.element` global object, you will find the following, ordered roughly
 - [`createElement`](https://reactjs.org/docs/react-api.html#createelement)
 - [`render`](https://reactjs.org/docs/react-dom.html#render)
 
-## Example
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/element@next --save
+```
+
+## Usage
 
 Let's render a customized greeting into an empty element:
 
@@ -62,3 +69,5 @@ If you've configured [Babel](https://babeljs.io/) for your project, you can opt i
  ]
 }
 ```
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/packages/element/package.json b/packages/element/package.json
@@ -0,0 +1,30 @@
+{
+ "name": "@wordpress/element",
+ "version": "0.0.1",
+ "description": "Element React module for WordPress",
+ "author": "WordPress",
+ "license": "GPL-2.0-or-later",
+ "keywords": [
+ "wordpress",
+ "element",
+ "react"
+ ],
+ "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/element/README.md",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/WordPress/gutenberg.git"
+ },
+ "bugs": {
+ "url": "https://github.com/WordPress/gutenberg/issues"
+ },
+ "main": "src/index.js",
+ "dependencies": {
+ "@wordpress/is-shallow-equal": "1.0.2",
+ "lodash": "4.17.5",
+ "react": "16.3.2",
+ "react-dom": "16.3.2"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/element/index.js → packages/element/src/index.js b/element/index.js → packages/element/src/index.js
diff --git a/element/index.native.js → packages/element/src/index.native.js b/element/index.native.js → packages/element/src/index.native.js
diff --git a/element/serialize.js → packages/element/src/serialize.js b/element/serialize.js → packages/element/src/serialize.js
diff --git a/element/test/index.js → packages/element/src/test/index.js b/element/test/index.js → packages/element/src/test/index.js
diff --git a/element/test/serialize.js → packages/element/src/test/serialize.js b/element/test/serialize.js → packages/element/src/test/serialize.js
diff --git a/test/unit/jest.config.json b/test/unit/jest.config.json
@@ -1,12 +1,12 @@
 {
  "rootDir": "../../",
  "collectCoverageFrom": [
- "(blocks|components|editor|element|data|utils|edit-post|viewport|plugins|core-data|core-blocks)/**/*.js",
+ "(blocks|components|editor|data|utils|edit-post|viewport|plugins|core-data|core-blocks)/**/*.js",
  "packages/**/*.js"
  ],
  "moduleNameMapper": {
- "@wordpress\\/(blocks|components|editor|element|data|utils|edit-post|viewport|plugins|core-data|core-blocks)": "$1",
- "@wordpress\\/(date)": "packages/$1/src"
+ "@wordpress\\/(blocks|components|editor|data|utils|edit-post|viewport|plugins|core-data|core-blocks)": "$1",
+ "@wordpress\\/(date|element)": "packages/$1/src"
  },
  "preset": "@wordpress/jest-preset-default",
  "setupFiles": [

diff --git a/test/unit/setup-wp-aliases.js b/test/unit/setup-wp-aliases.js
@@ -6,11 +6,9 @@ global.wp = {
  },
 };
 
-[
- 'element',
- 'blocks',
-].forEach( ( entryPointName ) => {
- Object.defineProperty( global.wp, entryPointName, {
- get: () => require( entryPointName ),
- } );
+Object.defineProperty( global.wp, 'element', {
+ get: () => require( 'packages/element' ),
+} );
+Object.defineProperty( global.wp, 'blocks', {
+ get: () => require( 'blocks' ),
 } );
diff --git a/webpack.config.js b/webpack.config.js
@@ -116,7 +116,6 @@ const entryPointNames = [
  'blocks',
  'components',
  'editor',
- 'element',
  'utils',
  'data',
  'viewport',
@@ -128,6 +127,7 @@ const entryPointNames = [
 
 const gutenbergPackages = [
  'date',
+ 'element',
 ];
 
 const wordPressPackages = [