diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js index da69e58d9c490..78753c2ba097f 100644 --- a/components/autocomplete/index.js +++ b/components/autocomplete/index.js @@ -8,9 +8,10 @@ import 'element-closest'; /** * WordPress dependencies */ -import { Component, compose, renderToString } from '@wordpress/element'; +import { Component, renderToString } from '@wordpress/element'; import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT, SPACE } from '@wordpress/keycodes'; import { __, _n, sprintf } from '@wordpress/i18n'; +import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies @@ -19,7 +20,6 @@ import './style.scss'; import withFocusOutside from '../higher-order/with-focus-outside'; import Button from '../button'; import Popover from '../popover'; -import withInstanceId from '../higher-order/with-instance-id'; import withSpokenMessages from '../higher-order/with-spoken-messages'; /** diff --git a/components/checkbox-control/index.js b/components/checkbox-control/index.js index 4344db2cacf84..286f5ab2feb80 100644 --- a/components/checkbox-control/index.js +++ b/components/checkbox-control/index.js @@ -1,8 +1,12 @@ +/** + * External dependencies + */ +import { withInstanceId } from '@wordpress/compose'; + /** * Internal dependencies */ import BaseControl from '../base-control'; -import withInstanceId from '../higher-order/with-instance-id'; import './style.scss'; function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) { diff --git a/components/deprecated.js b/components/deprecated.js new file mode 100644 index 0000000000000..1f7714435ea6a --- /dev/null +++ b/components/deprecated.js @@ -0,0 +1,35 @@ +/** + * External dependencies + */ +import { mapValues } from 'lodash'; + +/** + * WordPress dependencies + */ +import { + ifCondition, + withGlobalEvents, + withInstanceId, + withSafeTimeout, + withState, +} from '@wordpress/compose'; +import deprecated from '@wordpress/deprecated'; + +const deprecatedFunctions = { + ifCondition, + withGlobalEvents, + withInstanceId, + withSafeTimeout, + withState, +}; + +export default mapValues( deprecatedFunctions, ( deprecatedFunction, key ) => { + return ( ...args ) => { + deprecated( 'wp.components.' + key, { + version: '3.5', + alternative: 'wp.compose.' + key, + } ); + + return deprecatedFunction( ...args ); + }; +} ); diff --git a/components/draggable/index.js b/components/draggable/index.js index ec0ac57464c2d..d713a1a812be9 100644 --- a/components/draggable/index.js +++ b/components/draggable/index.js @@ -8,11 +8,11 @@ import classnames from 'classnames'; * WordPress Dependencies */ import { Component } from '@wordpress/element'; +import { withSafeTimeout } from '@wordpress/compose'; /** * Internal Dependencies */ -import withSafeTimeout from '../higher-order/with-safe-timeout'; import './style.scss'; const dragImageClass = 'components-draggable__invisible-drag-image'; diff --git a/components/focusable-iframe/index.js b/components/focusable-iframe/index.js index 2d6a1a2b17765..24581406d9d65 100644 --- a/components/focusable-iframe/index.js +++ b/components/focusable-iframe/index.js @@ -7,11 +7,7 @@ import { omit } from 'lodash'; * WordPress dependencies */ import { Component, createRef } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import withGlobalEvents from '../higher-order/with-global-events'; +import { withGlobalEvents } from '@wordpress/compose'; /** * Browser dependencies diff --git a/components/form-token-field/index.js b/components/form-token-field/index.js index 2a0f27256bed9..61d960374138c 100644 --- a/components/form-token-field/index.js +++ b/components/form-token-field/index.js @@ -9,6 +9,7 @@ import classnames from 'classnames'; */ import { __, _n, sprintf } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -17,7 +18,6 @@ import './style.scss'; import Token from './token'; import TokenInput from './token-input'; import SuggestionsList from './suggestions-list'; -import withInstanceId from '../higher-order/with-instance-id'; import withSpokenMessages from '../higher-order/with-spoken-messages'; const initialState = { diff --git a/components/form-token-field/token.js b/components/form-token-field/token.js index 90c6c95f9c335..93af65a064fd8 100644 --- a/components/form-token-field/token.js +++ b/components/form-token-field/token.js @@ -7,7 +7,7 @@ import { noop } from 'lodash'; /** * WordPress dependencies */ -import withInstanceId from '../higher-order/with-instance-id'; +import { withInstanceId } from '@wordpress/compose'; import { __, sprintf } from '@wordpress/i18n'; /** diff --git a/components/index.js b/components/index.js index fe1888fbd9f37..e016168939a1f 100644 --- a/components/index.js +++ b/components/index.js @@ -1,3 +1,8 @@ +/** + * Internal dependencies + */ +import deprecated from './deprecated'; + // Components export { default as APIProvider } from './higher-order/with-api-data/provider'; export { default as Autocomplete } from './autocomplete'; @@ -57,7 +62,6 @@ export { default as TreeSelect } from './tree-select'; export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill'; // Higher-Order Components -export { default as ifCondition } from './higher-order/if-condition'; export { default as navigateRegions } from './higher-order/navigate-regions'; export { default as withAPIData } from './higher-order/with-api-data'; export { default as withContext } from './higher-order/with-context'; @@ -66,9 +70,11 @@ export { default as withFallbackStyles } from './higher-order/with-fallback-styl export { default as withFilters } from './higher-order/with-filters'; export { default as withFocusOutside } from './higher-order/with-focus-outside'; export { default as withFocusReturn } from './higher-order/with-focus-return'; -export { default as withGlobalEvents } from './higher-order/with-global-events'; -export { default as withInstanceId } from './higher-order/with-instance-id'; export { default as withNotices } from './higher-order/with-notices'; -export { default as withSafeTimeout } from './higher-order/with-safe-timeout'; export { default as withSpokenMessages } from './higher-order/with-spoken-messages'; -export { default as withState } from './higher-order/with-state'; + +export const ifCondition = deprecated.ifCondition; +export const withGlobalEvents = deprecated.withGlobalEvents; +export const withInstanceId = deprecated.withInstanceId; +export const withSafeTimeout = deprecated.withSafeTimeout; +export const withState = deprecated.withState; diff --git a/components/menu-group/index.js b/components/menu-group/index.js index ef11c27434f4e..423365d1f34ea 100644 --- a/components/menu-group/index.js +++ b/components/menu-group/index.js @@ -8,13 +8,13 @@ import classnames from 'classnames'; */ import { Children } from '@wordpress/element'; import { applyFilters } from '@wordpress/hooks'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ import './style.scss'; import { NavigableMenu } from '../navigable-container'; -import withInstanceId from '../higher-order/with-instance-id'; export function MenuGroup( { children, diff --git a/components/modal/frame.js b/components/modal/frame.js index be9b44dde7c44..1d903c40eabe1 100644 --- a/components/modal/frame.js +++ b/components/modal/frame.js @@ -1,9 +1,10 @@ /** * WordPress dependencies */ -import { Component, compose, createRef } from '@wordpress/element'; +import { Component, createRef } from '@wordpress/element'; import { ESCAPE } from '@wordpress/keycodes'; import { focus } from '@wordpress/dom'; +import { withGlobalEvents, compose } from '@wordpress/compose'; /** * External dependencies @@ -16,7 +17,6 @@ import clickOutside from 'react-click-outside'; import './style.scss'; import withFocusReturn from '../higher-order/with-focus-return'; import withConstrainedTabbing from '../higher-order/with-constrained-tabbing'; -import withGlobalEvents from '../higher-order/with-global-events'; class ModalFrame extends Component { constructor() { diff --git a/components/modal/index.js b/components/modal/index.js index 63c719431efe7..a97930f1d8e56 100644 --- a/components/modal/index.js +++ b/components/modal/index.js @@ -8,6 +8,7 @@ import { noop } from 'lodash'; * WordPress dependencies */ import { Component, createPortal } from '@wordpress/element'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -16,7 +17,6 @@ import './style.scss'; import ModalFrame from './frame'; import ModalHeader from './header'; import * as ariaHelper from './aria-helper'; -import withInstanceId from '../higher-order/with-instance-id'; // Used to count the number of open modals. let parentElement, diff --git a/components/radio-control/index.js b/components/radio-control/index.js index 9a474c4e4d0f7..5fa3c5eb87150 100644 --- a/components/radio-control/index.js +++ b/components/radio-control/index.js @@ -4,11 +4,15 @@ import { isEmpty } from 'lodash'; import classnames from 'classnames'; +/** + * WordPress dependencies + */ +import { withInstanceId } from '@wordpress/compose'; + /** * Internal dependencies */ import BaseControl from '../base-control'; -import withInstanceId from '../higher-order/with-instance-id'; import './style.scss'; function RadioControl( { label, className, selected, help, instanceId, onChange, options = [] } ) { diff --git a/components/range-control/index.js b/components/range-control/index.js index 7df0752c63358..353df5d10a9dc 100644 --- a/components/range-control/index.js +++ b/components/range-control/index.js @@ -8,12 +8,12 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ import { BaseControl, Button, Dashicon } from '../'; -import withInstanceId from '../higher-order/with-instance-id'; import './style.scss'; function RangeControl( { diff --git a/components/sandbox/index.js b/components/sandbox/index.js index e099a75c22d21..60091b519cce3 100644 --- a/components/sandbox/index.js +++ b/components/sandbox/index.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { Component, renderToString, createRef } from '@wordpress/element'; +import { withGlobalEvents } from '@wordpress/compose'; /** * Internal dependencies */ import FocusableIframe from '../focusable-iframe'; -import withGlobalEvents from '../higher-order/with-global-events'; class Sandbox extends Component { constructor() { @@ -151,7 +151,7 @@ class Sandbox extends Component { aspectRatio = potentialIframe.width / potentialIframe.height; potentialIframe.width = '100%'; } - } + } sendResize(); diff --git a/components/select-control/index.js b/components/select-control/index.js index ecacc637e6b9f..3413a409b8c68 100644 --- a/components/select-control/index.js +++ b/components/select-control/index.js @@ -3,11 +3,15 @@ */ import { isEmpty } from 'lodash'; +/** + * WordPress dependencies + */ +import { withInstanceId } from '@wordpress/compose'; + /** * Internal dependencies */ import BaseControl from '../base-control'; -import withInstanceId from '../higher-order/with-instance-id'; import './style.scss'; function SelectControl( { diff --git a/components/tab-panel/index.js b/components/tab-panel/index.js index 953b82c25b9f1..e2cb1edbdc731 100644 --- a/components/tab-panel/index.js +++ b/components/tab-panel/index.js @@ -7,11 +7,11 @@ import { partial, noop, find } from 'lodash'; * WordPress dependencies */ import { Component } from '@wordpress/element'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ -import { default as withInstanceId } from '../higher-order/with-instance-id'; import { NavigableMenu } from '../navigable-container'; const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => ( diff --git a/components/text-control/index.js b/components/text-control/index.js index 66d5812f45916..0025dfa05d5ee 100644 --- a/components/text-control/index.js +++ b/components/text-control/index.js @@ -1,8 +1,12 @@ +/** + * WordPress dependencies + */ +import { withInstanceId } from '@wordpress/compose'; + /** * Internal dependencies */ import BaseControl from '../base-control'; -import withInstanceId from '../higher-order/with-instance-id'; import './style.scss'; function TextControl( { label, value, help, className, instanceId, onChange, type = 'text', ...props } ) { diff --git a/components/textarea-control/index.js b/components/textarea-control/index.js index 9de4675e7cdd2..5315a83e94f47 100644 --- a/components/textarea-control/index.js +++ b/components/textarea-control/index.js @@ -1,8 +1,12 @@ +/** + * WordPress dependencies + */ +import { withInstanceId } from '@wordpress/compose'; + /** * Internal dependencies */ import BaseControl from '../base-control'; -import withInstanceId from '../higher-order/with-instance-id'; import './style.scss'; function TextareaControl( { label, value, help, instanceId, onChange, rows = 4, className, ...props } ) { diff --git a/components/toggle-control/index.js b/components/toggle-control/index.js index da692b8bd6b11..4bae84ba3e4ef 100644 --- a/components/toggle-control/index.js +++ b/components/toggle-control/index.js @@ -7,12 +7,12 @@ import { isFunction } from 'lodash'; * WordPress dependencies */ import { Component } from '@wordpress/element'; -import FormToggle from '../form-toggle'; -import withInstanceId from '../higher-order/with-instance-id'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ +import FormToggle from '../form-toggle'; import BaseControl from './../base-control'; import './style.scss'; diff --git a/core-blocks/block/edit-panel/index.js b/core-blocks/block/edit-panel/index.js index 57f19636b1e79..2827f2c546f9b 100644 --- a/core-blocks/block/edit-panel/index.js +++ b/core-blocks/block/edit-panel/index.js @@ -1,10 +1,11 @@ /** * WordPress dependencies */ -import { Button, withInstanceId } from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { Component, Fragment, createRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { ESCAPE } from '@wordpress/keycodes'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies diff --git a/core-blocks/block/edit.js b/core-blocks/block/edit.js index 82f5c8672a094..a03befd1c6d23 100644 --- a/core-blocks/block/edit.js +++ b/core-blocks/block/edit.js @@ -6,11 +6,12 @@ import { noop, partial } from 'lodash'; /** * WordPress dependencies */ -import { Component, Fragment, compose } from '@wordpress/element'; +import { Component, Fragment } from '@wordpress/element'; import { Placeholder, Spinner, Disabled } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { BlockEdit } from '@wordpress/editor'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/core-blocks/file/edit.js b/core-blocks/file/edit.js index 14e10d65bfa3d..0f9bf176675b9 100644 --- a/core-blocks/file/edit.js +++ b/core-blocks/file/edit.js @@ -15,7 +15,7 @@ import { withNotices, } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; -import { Component, compose, Fragment } from '@wordpress/element'; +import { Component, Fragment } from '@wordpress/element'; import { MediaUpload, MediaPlaceholder, @@ -23,6 +23,7 @@ import { RichText, editorMediaUpload, } from '@wordpress/editor'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/core-blocks/html/index.js b/core-blocks/html/index.js index 0c829ab99a9d2..c50283445a277 100644 --- a/core-blocks/html/index.js +++ b/core-blocks/html/index.js @@ -3,9 +3,10 @@ */ import { RawHTML } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { withState, Disabled, SandBox, CodeEditor } from '@wordpress/components'; +import { Disabled, SandBox, CodeEditor } from '@wordpress/components'; import { getPhrasingContentSchema } from '@wordpress/blocks'; import { BlockControls } from '@wordpress/editor'; +import { withState } from '@wordpress/compose'; /** * Internal dependencies diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js index ea219b726af44..0c148d52d737b 100644 --- a/core-blocks/image/edit.js +++ b/core-blocks/image/edit.js @@ -15,7 +15,7 @@ import { * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component, compose, Fragment } from '@wordpress/element'; +import { Component, Fragment } from '@wordpress/element'; import { getBlobByURL, revokeBlobURL } from '@wordpress/blob'; import { Button, @@ -39,6 +39,7 @@ import { editorMediaUpload, } from '@wordpress/editor'; import { withViewportMatch } from '@wordpress/viewport'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/core-blocks/image/image-size.js b/core-blocks/image/image-size.js index 9b37c44726384..0a1b88aed12d7 100644 --- a/core-blocks/image/image-size.js +++ b/core-blocks/image/image-size.js @@ -6,7 +6,7 @@ import { noop } from 'lodash'; /** * WordPress dependencies */ -import { withGlobalEvents } from '@wordpress/components'; +import { withGlobalEvents } from '@wordpress/compose'; import { Component } from '@wordpress/element'; class ImageSize extends Component { diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js index fbcba6a550949..acdc498c55faf 100644 --- a/core-blocks/paragraph/index.js +++ b/core-blocks/paragraph/index.js @@ -11,7 +11,6 @@ import { __ } from '@wordpress/i18n'; import { concatChildren, Component, - compose, Fragment, RawHTML, } from '@wordpress/element'; @@ -32,6 +31,7 @@ import { RichText, } from '@wordpress/editor'; import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/core-blocks/shortcode/index.js b/core-blocks/shortcode/index.js index 264e1a7566a0c..3f8d0b049fc7d 100644 --- a/core-blocks/shortcode/index.js +++ b/core-blocks/shortcode/index.js @@ -3,8 +3,9 @@ */ import { RawHTML } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { withInstanceId, Dashicon } from '@wordpress/components'; +import { Dashicon } from '@wordpress/components'; import { PlainText } from '@wordpress/editor'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies diff --git a/core-blocks/spacer/index.js b/core-blocks/spacer/index.js index 7822f0f2df20d..ca7b7483db8c3 100644 --- a/core-blocks/spacer/index.js +++ b/core-blocks/spacer/index.js @@ -9,7 +9,8 @@ import ResizableBox from 're-resizable'; import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/editor'; -import { BaseControl, PanelBody, withInstanceId } from '@wordpress/components'; +import { BaseControl, PanelBody } from '@wordpress/components'; +import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md index ea5c2c54fda1f..a490eb55fcdd2 100644 --- a/docs/reference/deprecated.md +++ b/docs/reference/deprecated.md @@ -1,5 +1,15 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility for two minor releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version. +## 3.5.0 + + - `wp.components.ifCondition` has been removed. Please use `wp.compose.ifCondition` instead. + - `wp.components.withGlobalEvents` has been removed. Please use `wp.compose.withGlobalEvents` instead. + - `wp.components.withInstanceId` has been removed. Please use `wp.compose.withInstanceId` instead. + - `wp.components.withSafeTimeout` has been removed. Please use `wp.compose.withSafeTimeout` instead. + - `wp.components.withState` has been removed. Please use `wp.compose.withState` instead. + - `wp.element.pure` has been removed. Please use `wp.compose.pure` instead. + - `wp.element.compose` has been removed. Please use `wp.compose.compose` instead. + ## 3.4.0 - `focusOnMount` prop in the `Popover` component has been changed from `Boolean`-only to an enum-style property that accepts `"firstElement"`, `"container"`, or `false`. Please convert any `` usage to ``. diff --git a/edit-post/components/header/fixed-toolbar-toggle/index.js b/edit-post/components/header/fixed-toolbar-toggle/index.js index e20ee631c0b65..eb7080d2c653f 100644 --- a/edit-post/components/header/fixed-toolbar-toggle/index.js +++ b/edit-post/components/header/fixed-toolbar-toggle/index.js @@ -7,7 +7,7 @@ import { withSelect, withDispatch } from '@wordpress/data'; * WordPress Dependencies */ import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { MenuItem } from '@wordpress/components'; import { ifViewportMatches } from '@wordpress/viewport'; diff --git a/edit-post/components/header/header-toolbar/index.js b/edit-post/components/header/header-toolbar/index.js index 452656debf362..8e38da3afed64 100644 --- a/edit-post/components/header/header-toolbar/index.js +++ b/edit-post/components/header/header-toolbar/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; diff --git a/edit-post/components/header/index.js b/edit-post/components/header/index.js index 72066bfdfc3fa..f37359fdd44e5 100644 --- a/edit-post/components/header/index.js +++ b/edit-post/components/header/index.js @@ -9,7 +9,7 @@ import { PostPublishPanelToggle, } from '@wordpress/editor'; import { withDispatch, withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { DotTip } from '@wordpress/nux'; /** diff --git a/edit-post/components/header/mode-switcher/index.js b/edit-post/components/header/mode-switcher/index.js index c93265c6341cc..527e77f101117 100644 --- a/edit-post/components/header/mode-switcher/index.js +++ b/edit-post/components/header/mode-switcher/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { MenuItemsChoice, MenuGroup } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js b/edit-post/components/header/plugin-sidebar-more-menu-item/index.js index e95ac5608cea2..fa36e95c38b41 100644 --- a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js +++ b/edit-post/components/header/plugin-sidebar-more-menu-item/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; import { MenuItem } from '@wordpress/components'; import { withPluginContext } from '@wordpress/plugins'; diff --git a/edit-post/components/header/tips-toggle/index.js b/edit-post/components/header/tips-toggle/index.js index 27b131cb04333..807fd3eb652ed 100644 --- a/edit-post/components/header/tips-toggle/index.js +++ b/edit-post/components/header/tips-toggle/index.js @@ -7,7 +7,7 @@ import { withSelect, withDispatch } from '@wordpress/data'; * WordPress Dependencies */ import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { MenuItem } from '@wordpress/components'; function TipsToggle( { onToggle, isActive } ) { diff --git a/edit-post/components/keyboard-shortcuts/index.js b/edit-post/components/keyboard-shortcuts/index.js index 59dcb2513b641..91667b2b54fda 100644 --- a/edit-post/components/keyboard-shortcuts/index.js +++ b/edit-post/components/keyboard-shortcuts/index.js @@ -1,9 +1,10 @@ /** * WordPress dependencies */ -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { KeyboardShortcuts } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js index 14e5fe442d4fa..6695bf1efd58b 100644 --- a/edit-post/components/layout/index.js +++ b/edit-post/components/layout/index.js @@ -18,9 +18,10 @@ import { PreserveScrollInReorder, } from '@wordpress/editor'; import { withDispatch, withSelect } from '@wordpress/data'; -import { compose, Fragment } from '@wordpress/element'; +import { Fragment } from '@wordpress/element'; import { PluginArea } from '@wordpress/plugins'; import { withViewportMatch } from '@wordpress/viewport'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/edit-post/components/sidebar/discussion-panel/index.js b/edit-post/components/sidebar/discussion-panel/index.js index 6dde6cd7597b7..27bd6e04b2cb7 100644 --- a/edit-post/components/sidebar/discussion-panel/index.js +++ b/edit-post/components/sidebar/discussion-panel/index.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { PanelBody, PanelRow } from '@wordpress/components'; import { PostComments, PostPingbacks, PostTypeSupportCheck } from '@wordpress/editor'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/edit-post/components/sidebar/featured-image/index.js b/edit-post/components/sidebar/featured-image/index.js index 9d979dbf6affd..a5e8aeb3b2e96 100644 --- a/edit-post/components/sidebar/featured-image/index.js +++ b/edit-post/components/sidebar/featured-image/index.js @@ -9,7 +9,7 @@ import { get, partial } from 'lodash'; import { __ } from '@wordpress/i18n'; import { PanelBody } from '@wordpress/components'; import { PostFeaturedImage, PostFeaturedImageCheck } from '@wordpress/editor'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/edit-post/components/sidebar/index.js b/edit-post/components/sidebar/index.js index c69f8167dfd1f..c8fbec0abc031 100644 --- a/edit-post/components/sidebar/index.js +++ b/edit-post/components/sidebar/index.js @@ -1,9 +1,9 @@ /** * WordPress Dependencies */ -import { createSlotFill, ifCondition, withFocusReturn } from '@wordpress/components'; +import { createSlotFill, withFocusReturn } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { ifCondition, compose } from '@wordpress/compose'; /** * Internal Dependencies diff --git a/edit-post/components/sidebar/page-attributes/index.js b/edit-post/components/sidebar/page-attributes/index.js index 72f1eeaf56d81..b6250faf4e2ef 100644 --- a/edit-post/components/sidebar/page-attributes/index.js +++ b/edit-post/components/sidebar/page-attributes/index.js @@ -8,7 +8,7 @@ import { get, partial } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { PanelBody, PanelRow } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { PageAttributesCheck, PageAttributesOrder, PageAttributesParent, PageTemplate } from '@wordpress/editor'; import { withSelect, withDispatch } from '@wordpress/data'; diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js index 4f21ffc41a37b..3594ad34666bc 100644 --- a/edit-post/components/sidebar/plugin-sidebar/index.js +++ b/edit-post/components/sidebar/plugin-sidebar/index.js @@ -3,9 +3,10 @@ */ import { IconButton, Panel } from '@wordpress/components'; import { withDispatch, withSelect } from '@wordpress/data'; -import { compose, Fragment } from '@wordpress/element'; +import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { withPluginContext } from '@wordpress/plugins'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/edit-post/components/sidebar/post-excerpt/index.js b/edit-post/components/sidebar/post-excerpt/index.js index 994532ba40d25..0a603f58b7a6b 100644 --- a/edit-post/components/sidebar/post-excerpt/index.js +++ b/edit-post/components/sidebar/post-excerpt/index.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { PanelBody } from '@wordpress/components'; import { PostExcerpt as PostExcerptForm, PostExcerptCheck } from '@wordpress/editor'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/edit-post/components/sidebar/post-status/index.js b/edit-post/components/sidebar/post-status/index.js index 40f6bb0bfca0d..3b11c2d78de0c 100644 --- a/edit-post/components/sidebar/post-status/index.js +++ b/edit-post/components/sidebar/post-status/index.js @@ -3,8 +3,9 @@ */ import { __ } from '@wordpress/i18n'; import { PanelBody } from '@wordpress/components'; -import { compose, Fragment } from '@wordpress/element'; +import { Fragment } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal Dependencies diff --git a/edit-post/components/sidebar/post-taxonomies/index.js b/edit-post/components/sidebar/post-taxonomies/index.js index a7a63b211f9e7..b5376f5bb84b3 100644 --- a/edit-post/components/sidebar/post-taxonomies/index.js +++ b/edit-post/components/sidebar/post-taxonomies/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { PostTaxonomies as PostTaxonomiesForm, PostTaxonomiesCheck } from '@wordpress/editor'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js b/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js index 048458882ac09..d8d9ed58c3571 100644 --- a/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js +++ b/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js @@ -6,7 +6,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { PanelBody } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; diff --git a/edit-post/components/sidebar/settings-header/index.js b/edit-post/components/sidebar/settings-header/index.js index e5457c4b6d7e3..bf1cbfcafbe12 100644 --- a/edit-post/components/sidebar/settings-header/index.js +++ b/edit-post/components/sidebar/settings-header/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { __, _n, sprintf } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; diff --git a/edit-post/components/sidebar/sidebar-header/index.js b/edit-post/components/sidebar/sidebar-header/index.js index e4fa4a0559f08..b548b4e28c4de 100644 --- a/edit-post/components/sidebar/sidebar-header/index.js +++ b/edit-post/components/sidebar/sidebar-header/index.js @@ -6,7 +6,8 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Fragment, compose } from '@wordpress/element'; +import { Fragment } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { IconButton } from '@wordpress/components'; import { withDispatch, withSelect } from '@wordpress/data'; diff --git a/edit-post/components/visual-editor/block-inspector-button.js b/edit-post/components/visual-editor/block-inspector-button.js index d5e17d40f4acb..e6014d55e025b 100644 --- a/edit-post/components/visual-editor/block-inspector-button.js +++ b/edit-post/components/visual-editor/block-inspector-button.js @@ -9,7 +9,7 @@ import { flow, noop } from 'lodash'; import { __ } from '@wordpress/i18n'; import { IconButton, withSpokenMessages } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; export function BlockInspectorButton( { areAdvancedSettingsOpened, diff --git a/edit-post/hooks/more-menu/copy-content-menu-item/index.js b/edit-post/hooks/more-menu/copy-content-menu-item/index.js index f10e9ba386ed7..345d792c0e4d3 100644 --- a/edit-post/hooks/more-menu/copy-content-menu-item/index.js +++ b/edit-post/hooks/more-menu/copy-content-menu-item/index.js @@ -1,10 +1,10 @@ /** * WordPress dependencies */ -import { ClipboardButton, withState } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { ClipboardButton } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { withState, compose } from '@wordpress/compose'; function CopyContentMenuItem( { editedPostContent, hasCopied, setState } ) { return ( diff --git a/edit-post/hooks/validate-multiple-use/index.js b/edit-post/hooks/validate-multiple-use/index.js index db5b848e3e931..b6b86ecee1b47 100644 --- a/edit-post/hooks/validate-multiple-use/index.js +++ b/edit-post/hooks/validate-multiple-use/index.js @@ -16,9 +16,10 @@ import { import { Button } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { Warning } from '@wordpress/editor'; -import { compose, createHigherOrderComponent } from '@wordpress/element'; +import { createHigherOrderComponent } from '@wordpress/element'; import { addFilter } from '@wordpress/hooks'; import { __ } from '@wordpress/i18n'; +import { compose } from '@wordpress/compose'; const enhance = compose( /* diff --git a/editor/components/autocomplete/index.js b/editor/components/autocomplete/index.js index 1a9c66f26597c..419ae8a8af812 100644 --- a/editor/components/autocomplete/index.js +++ b/editor/components/autocomplete/index.js @@ -7,7 +7,8 @@ import { clone } from 'lodash'; * WordPress dependencies */ import { applyFilters, hasFilter } from '@wordpress/hooks'; -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { Autocomplete as OriginalAutocomplete } from '@wordpress/components'; /** diff --git a/editor/components/autosave-monitor/index.js b/editor/components/autosave-monitor/index.js index 28f393c7d150c..8164d64979f8b 100644 --- a/editor/components/autosave-monitor/index.js +++ b/editor/components/autosave-monitor/index.js @@ -1,7 +1,8 @@ /** * WordPress dependencies */ -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; export class AutosaveMonitor extends Component { diff --git a/editor/components/block-drop-zone/index.js b/editor/components/block-drop-zone/index.js index d265283752522..b249125018ba9 100644 --- a/editor/components/block-drop-zone/index.js +++ b/editor/components/block-drop-zone/index.js @@ -14,8 +14,9 @@ import { getBlockTransforms, findTransform, } from '@wordpress/blocks'; -import { compose, Component } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { withDispatch, withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/block-list/block-html.js b/editor/components/block-list/block-html.js index 8a33cfa9f8f66..bd5a18a90b4a5 100644 --- a/editor/components/block-list/block-html.js +++ b/editor/components/block-list/block-html.js @@ -8,7 +8,8 @@ import { isEqual } from 'lodash'; /** * WordPress Dependencies */ -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { getBlockAttributes, getBlockContent, getBlockType, isValidBlock } from '@wordpress/blocks'; import { withSelect, withDispatch } from '@wordpress/data'; diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index 89d19270d16c7..6258c46722168 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -8,7 +8,7 @@ import tinymce from 'tinymce'; /** * WordPress dependencies */ -import { Component, findDOMNode, Fragment, compose } from '@wordpress/element'; +import { Component, findDOMNode, Fragment } from '@wordpress/element'; import { focus, isTextField, @@ -28,6 +28,7 @@ import { withFilters } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/block-list/breadcrumb.js b/editor/components/block-list/breadcrumb.js index 128c6c98617a3..c78b39d21c4c6 100644 --- a/editor/components/block-list/breadcrumb.js +++ b/editor/components/block-list/breadcrumb.js @@ -1,9 +1,10 @@ /** * WordPress dependencies */ -import { compose, Component, Fragment } from '@wordpress/element'; +import { Component, Fragment } from '@wordpress/element'; import { Toolbar } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js index d39167607687b..67a78a251d3a5 100644 --- a/editor/components/block-list/insertion-point.js +++ b/editor/components/block-list/insertion-point.js @@ -8,9 +8,10 @@ import classnames from 'classnames'; */ import { __ } from '@wordpress/i18n'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; -import { Component, compose } from '@wordpress/element'; -import { ifCondition, IconButton } from '@wordpress/components'; +import { Component } from '@wordpress/element'; +import { IconButton } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; +import { ifCondition, compose } from '@wordpress/compose'; class BlockInsertionPoint extends Component { constructor() { diff --git a/editor/components/block-list/layout.js b/editor/components/block-list/layout.js index d380de5689072..1b28a663b121b 100644 --- a/editor/components/block-list/layout.js +++ b/editor/components/block-list/layout.js @@ -16,9 +16,10 @@ import 'element-closest'; /** * WordPress dependencies */ -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { getDefaultBlockName } from '@wordpress/blocks'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/block-mover/index.js b/editor/components/block-mover/index.js index 1ac35a6a26b55..e9205feb890c7 100644 --- a/editor/components/block-mover/index.js +++ b/editor/components/block-mover/index.js @@ -8,10 +8,11 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { IconButton, withInstanceId } from '@wordpress/components'; +import { IconButton } from '@wordpress/components'; import { getBlockType } from '@wordpress/blocks'; -import { compose, Component } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; +import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/block-selection-clearer/index.js b/editor/components/block-selection-clearer/index.js index 57b29c6a1bc1c..7e092163d81b8 100644 --- a/editor/components/block-selection-clearer/index.js +++ b/editor/components/block-selection-clearer/index.js @@ -6,8 +6,9 @@ import { omit } from 'lodash'; /** * WordPress dependencies */ -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; class BlockSelectionClearer extends Component { constructor() { diff --git a/editor/components/block-settings-menu/block-duplicate-button.js b/editor/components/block-settings-menu/block-duplicate-button.js index c9b15fa4f8bbb..e44529480ab73 100644 --- a/editor/components/block-settings-menu/block-duplicate-button.js +++ b/editor/components/block-settings-menu/block-duplicate-button.js @@ -8,7 +8,7 @@ import { flow, noop, last, every, first, castArray } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { IconButton } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; import { cloneBlock, hasBlockSupport } from '@wordpress/blocks'; diff --git a/editor/components/block-settings-menu/block-html-convert-button.js b/editor/components/block-settings-menu/block-html-convert-button.js index e4b24ceabbc2c..4809eae9dac08 100644 --- a/editor/components/block-settings-menu/block-html-convert-button.js +++ b/editor/components/block-settings-menu/block-html-convert-button.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { rawHandler, getBlockContent } from '@wordpress/blocks'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/editor/components/block-settings-menu/block-mode-toggle.js b/editor/components/block-settings-menu/block-mode-toggle.js index 2245c9fd70252..61d1af42d6550 100644 --- a/editor/components/block-settings-menu/block-mode-toggle.js +++ b/editor/components/block-settings-menu/block-mode-toggle.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import { IconButton } from '@wordpress/components'; import { getBlockType, hasBlockSupport } from '@wordpress/blocks'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; export function BlockModeToggle( { blockType, mode, onToggleMode, small = false, role } ) { if ( ! hasBlockSupport( blockType, 'html', true ) ) { diff --git a/editor/components/block-settings-menu/block-remove-button.js b/editor/components/block-settings-menu/block-remove-button.js index 08bcc5befd27c..00a63b4eeb18c 100644 --- a/editor/components/block-settings-menu/block-remove-button.js +++ b/editor/components/block-settings-menu/block-remove-button.js @@ -8,7 +8,7 @@ import { castArray, flow, noop, some } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { IconButton } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, role, ...props } ) { diff --git a/editor/components/block-settings-menu/block-unknown-convert-button.js b/editor/components/block-settings-menu/block-unknown-convert-button.js index baa62dbf1a508..f31e54f65e101 100644 --- a/editor/components/block-settings-menu/block-unknown-convert-button.js +++ b/editor/components/block-settings-menu/block-unknown-convert-button.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { getUnknownTypeHandlerName, rawHandler, serialize } from '@wordpress/blocks'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/editor/components/block-settings-menu/shared-block-convert-button.js b/editor/components/block-settings-menu/shared-block-convert-button.js index df652a04e313b..8fa70535413c0 100644 --- a/editor/components/block-settings-menu/shared-block-convert-button.js +++ b/editor/components/block-settings-menu/shared-block-convert-button.js @@ -6,11 +6,12 @@ import { noop } from 'lodash'; /** * WordPress dependencies */ -import { Fragment, compose } from '@wordpress/element'; +import { Fragment } from '@wordpress/element'; import { IconButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { isSharedBlock } from '@wordpress/blocks'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; export function SharedBlockConvertButton( { isVisible, diff --git a/editor/components/block-settings-menu/shared-block-delete-button.js b/editor/components/block-settings-menu/shared-block-delete-button.js index 11caeb04f43ff..e08e23ba2c998 100644 --- a/editor/components/block-settings-menu/shared-block-delete-button.js +++ b/editor/components/block-settings-menu/shared-block-delete-button.js @@ -6,7 +6,7 @@ import { noop } from 'lodash'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { IconButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { isSharedBlock } from '@wordpress/blocks'; diff --git a/editor/components/block-styles/index.js b/editor/components/block-styles/index.js index 47cf5dd8364d6..0a308dcd70be3 100644 --- a/editor/components/block-styles/index.js +++ b/editor/components/block-styles/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; import { getBlockType } from '@wordpress/blocks'; import { __, sprintf } from '@wordpress/i18n'; diff --git a/editor/components/block-switcher/index.js b/editor/components/block-switcher/index.js index 32c72ab55eecd..6afa580683b1f 100644 --- a/editor/components/block-switcher/index.js +++ b/editor/components/block-switcher/index.js @@ -9,9 +9,10 @@ import { castArray, get, some } from 'lodash'; import { __ } from '@wordpress/i18n'; import { Dropdown, IconButton, Toolbar, PanelBody } from '@wordpress/components'; import { getBlockType, getPossibleBlockTransformations, switchToBlockType, hasChildBlocks } from '@wordpress/blocks'; -import { compose, Component, Fragment } from '@wordpress/element'; +import { Component, Fragment } from '@wordpress/element'; import { DOWN } from '@wordpress/keycodes'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/colors/with-colors-deprecated.js b/editor/components/colors/with-colors-deprecated.js index e55dbd6e5b51c..ba0ffeeecc5c9 100644 --- a/editor/components/colors/with-colors-deprecated.js +++ b/editor/components/colors/with-colors-deprecated.js @@ -7,8 +7,9 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { createHigherOrderComponent, Component, compose } from '@wordpress/element'; +import { createHigherOrderComponent, Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/colors/with-colors.js b/editor/components/colors/with-colors.js index 312b7a703c5c8..aeed7fb8e7c05 100644 --- a/editor/components/colors/with-colors.js +++ b/editor/components/colors/with-colors.js @@ -6,9 +6,10 @@ import { find, get, isFunction, isString, kebabCase, reduce, upperFirst } from ' /** * WordPress dependencies */ -import { createHigherOrderComponent, Component, compose } from '@wordpress/element'; +import { createHigherOrderComponent, Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/copy-handler/index.js b/editor/components/copy-handler/index.js index 446ad84ed4fbc..7c2d40497fc82 100644 --- a/editor/components/copy-handler/index.js +++ b/editor/components/copy-handler/index.js @@ -1,10 +1,11 @@ /** * WordPress dependencies */ -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { serialize } from '@wordpress/blocks'; import { documentHasSelection } from '@wordpress/dom'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; class CopyHandler extends Component { constructor() { diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js index f769f3a47688f..9899a92c71346 100644 --- a/editor/components/default-block-appender/index.js +++ b/editor/components/default-block-appender/index.js @@ -8,7 +8,7 @@ import { get } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { getDefaultBlockName } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/utils'; import { withSelect, withDispatch } from '@wordpress/data'; diff --git a/editor/components/document-outline/index.js b/editor/components/document-outline/index.js index dadcf5f73a171..c16cedf059416 100644 --- a/editor/components/document-outline/index.js +++ b/editor/components/document-outline/index.js @@ -7,7 +7,7 @@ import { countBy, flatMap, get } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/editor/components/editor-global-keyboard-shortcuts/index.js b/editor/components/editor-global-keyboard-shortcuts/index.js index 4780d6577fdfa..0839338294202 100644 --- a/editor/components/editor-global-keyboard-shortcuts/index.js +++ b/editor/components/editor-global-keyboard-shortcuts/index.js @@ -6,10 +6,11 @@ import { first, last, some } from 'lodash'; /** * WordPress dependencies */ -import { Component, Fragment, compose } from '@wordpress/element'; +import { Component, Fragment } from '@wordpress/element'; import { KeyboardShortcuts } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { rawShortcut } from '@wordpress/keycodes'; +import { compose } from '@wordpress/compose'; class EditorGlobalKeyboardShortcuts extends Component { constructor() { diff --git a/editor/components/editor-history/redo.js b/editor/components/editor-history/redo.js index 9bfe2ab756f3a..5ee92629de528 100644 --- a/editor/components/editor-history/redo.js +++ b/editor/components/editor-history/redo.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { IconButton } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { displayShortcut } from '@wordpress/keycodes'; function EditorHistoryRedo( { hasRedo, redo } ) { diff --git a/editor/components/editor-history/undo.js b/editor/components/editor-history/undo.js index ae50a68e2351c..9dce40badfea2 100644 --- a/editor/components/editor-history/undo.js +++ b/editor/components/editor-history/undo.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { IconButton } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { displayShortcut } from '@wordpress/keycodes'; function EditorHistoryUndo( { hasUndo, undo } ) { diff --git a/editor/components/editor-notices/index.js b/editor/components/editor-notices/index.js index b90ee5734a014..b00136b2a7d13 100644 --- a/editor/components/editor-notices/index.js +++ b/editor/components/editor-notices/index.js @@ -3,7 +3,7 @@ */ import { NoticeList } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/inner-blocks/index.js b/editor/components/inner-blocks/index.js index 6f10f095d6f3f..32a6c4b692129 100644 --- a/editor/components/inner-blocks/index.js +++ b/editor/components/inner-blocks/index.js @@ -9,10 +9,11 @@ import classnames from 'classnames'; */ import { withContext } from '@wordpress/components'; import { withViewportMatch } from '@wordpress/viewport'; -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { synchronizeBlocksWithTemplate } from '@wordpress/blocks'; import isShallowEqual from '@wordpress/is-shallow-equal'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/inserter-with-shortcuts/index.js b/editor/components/inserter-with-shortcuts/index.js index c75366d454b51..60ed1434bd3e3 100644 --- a/editor/components/inserter-with-shortcuts/index.js +++ b/editor/components/inserter-with-shortcuts/index.js @@ -7,7 +7,7 @@ import { filter, isEmpty } from 'lodash'; * WordPress dependencies */ import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { IconButton } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; diff --git a/editor/components/inserter/child-blocks.js b/editor/components/inserter/child-blocks.js index ae9c287272900..c6a9392cfafd4 100644 --- a/editor/components/inserter/child-blocks.js +++ b/editor/components/inserter/child-blocks.js @@ -1,9 +1,8 @@ /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; -import { ifCondition } from '@wordpress/components'; +import { ifCondition, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/inserter/index.js b/editor/components/inserter/index.js index e20c95c203300..549193a4a0ca0 100644 --- a/editor/components/inserter/index.js +++ b/editor/components/inserter/index.js @@ -4,8 +4,9 @@ import { __ } from '@wordpress/i18n'; import { Dropdown, IconButton } from '@wordpress/components'; import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks'; -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js index 88fc5bb1c6606..68d34a5dafa8f 100644 --- a/editor/components/inserter/menu.js +++ b/editor/components/inserter/menu.js @@ -20,15 +20,14 @@ import scrollIntoView from 'dom-scroll-into-view'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component, compose, findDOMNode, createRef } from '@wordpress/element'; +import { Component, findDOMNode, createRef } from '@wordpress/element'; import { - withInstanceId, withSpokenMessages, PanelBody, - withSafeTimeout, } from '@wordpress/components'; import { getCategories, isSharedBlock } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; +import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/observe-typing/index.js b/editor/components/observe-typing/index.js index 7f9e064731efe..2530399dc9eb3 100644 --- a/editor/components/observe-typing/index.js +++ b/editor/components/observe-typing/index.js @@ -6,11 +6,11 @@ import { includes } from 'lodash'; /** * WordPress dependencies */ -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { isTextField } from '@wordpress/dom'; import { UP, RIGHT, DOWN, LEFT, ENTER, BACKSPACE } from '@wordpress/keycodes'; -import { withSafeTimeout } from '@wordpress/components'; +import { withSafeTimeout, compose } from '@wordpress/compose'; /** * Set of key codes upon which typing is to be initiated on a keydown event. diff --git a/editor/components/page-attributes/order.js b/editor/components/page-attributes/order.js index e0e1a73948c3b..486ac7411c9bc 100644 --- a/editor/components/page-attributes/order.js +++ b/editor/components/page-attributes/order.js @@ -2,9 +2,9 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { withInstanceId } from '@wordpress/components'; -import { compose, Fragment } from '@wordpress/element'; +import { Fragment } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose, withInstanceId } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/page-attributes/parent.js b/editor/components/page-attributes/parent.js index 09b1a3e0963b3..f15d156a3bb2f 100644 --- a/editor/components/page-attributes/parent.js +++ b/editor/components/page-attributes/parent.js @@ -9,7 +9,7 @@ import { stringify } from 'querystringify'; */ import { __ } from '@wordpress/i18n'; import { TreeSelect, withAPIData } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { buildTermsTree } from '@wordpress/utils'; import { withSelect, withDispatch } from '@wordpress/data'; diff --git a/editor/components/page-attributes/template.js b/editor/components/page-attributes/template.js index 977982c87bb34..c54366a71c183 100644 --- a/editor/components/page-attributes/template.js +++ b/editor/components/page-attributes/template.js @@ -7,8 +7,7 @@ import { isEmpty, map } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { withInstanceId } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { withInstanceId, compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/editor/components/panel-color/index.js b/editor/components/panel-color/index.js index 316cd7826ef5c..5ef1a44610bb4 100644 --- a/editor/components/panel-color/index.js +++ b/editor/components/panel-color/index.js @@ -6,8 +6,8 @@ import { omit } from 'lodash'; /** * WordPress dependencies */ -import { ifCondition, PanelColor as PanelColorComponent } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { PanelColor as PanelColorComponent } from '@wordpress/components'; +import { ifCondition, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-author/check.js b/editor/components/post-author/check.js index 69ba4f6938156..4f725e792a44f 100644 --- a/editor/components/post-author/check.js +++ b/editor/components/post-author/check.js @@ -6,8 +6,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { withInstanceId } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { withInstanceId, compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; /** diff --git a/editor/components/post-author/index.js b/editor/components/post-author/index.js index 46e3b4b3fe220..5bb31bf294fd6 100644 --- a/editor/components/post-author/index.js +++ b/editor/components/post-author/index.js @@ -2,8 +2,8 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { withInstanceId } from '@wordpress/components'; -import { Component, compose } from '@wordpress/element'; +import { withInstanceId, compose } from '@wordpress/compose'; +import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/editor/components/post-comments/index.js b/editor/components/post-comments/index.js index f28db1f849b28..fcf1856570957 100644 --- a/editor/components/post-comments/index.js +++ b/editor/components/post-comments/index.js @@ -2,9 +2,9 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { FormToggle, withInstanceId } from '@wordpress/components'; +import { FormToggle } from '@wordpress/components'; +import { withInstanceId, compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; function PostComments( { commentStatus = 'open', instanceId, ...props } ) { const onToggleComments = () => props.editPost( { comment_status: commentStatus === 'open' ? 'closed' : 'open' } ); diff --git a/editor/components/post-excerpt/index.js b/editor/components/post-excerpt/index.js index 9b42d9fa2477d..2e49a650962d9 100644 --- a/editor/components/post-excerpt/index.js +++ b/editor/components/post-excerpt/index.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { ExternalLink, TextareaControl } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; /** * Internal Dependencies diff --git a/editor/components/post-featured-image/index.js b/editor/components/post-featured-image/index.js index 779c3d7df6f1a..e2abe7963d579 100644 --- a/editor/components/post-featured-image/index.js +++ b/editor/components/post-featured-image/index.js @@ -8,7 +8,7 @@ import { get } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { Button, Spinner, ResponsiveWrapper, withFilters } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/editor/components/post-format/index.js b/editor/components/post-format/index.js index e0cd2c5cc4e75..3098523be1c49 100644 --- a/editor/components/post-format/index.js +++ b/editor/components/post-format/index.js @@ -7,9 +7,9 @@ import { find, get, includes, union } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { withInstanceId, Button } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { Button } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; +import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-pending-status/check.js b/editor/components/post-pending-status/check.js index e5631c70bb1be..2c6c19b928042 100644 --- a/editor/components/post-pending-status/check.js +++ b/editor/components/post-pending-status/check.js @@ -6,7 +6,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; export function PostPendingStatusCheck( { hasPublishAction, isPublished, children } ) { diff --git a/editor/components/post-pending-status/index.js b/editor/components/post-pending-status/index.js index 0352df2849e6f..4fa5f13c8b2ec 100644 --- a/editor/components/post-pending-status/index.js +++ b/editor/components/post-pending-status/index.js @@ -2,9 +2,9 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { FormToggle, withInstanceId } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { FormToggle } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; +import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-permalink/editor.js b/editor/components/post-permalink/editor.js index 18624916969a6..70e1c751fd297 100644 --- a/editor/components/post-permalink/editor.js +++ b/editor/components/post-permalink/editor.js @@ -2,9 +2,10 @@ * WordPress dependencies */ import { withDispatch, withSelect } from '@wordpress/data'; -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; +import { compose } from '@wordpress/compose'; /** * Internal Dependencies diff --git a/editor/components/post-permalink/index.js b/editor/components/post-permalink/index.js index e81302a486cdc..ced2fc2437211 100644 --- a/editor/components/post-permalink/index.js +++ b/editor/components/post-permalink/index.js @@ -7,9 +7,10 @@ import classnames from 'classnames'; * WordPress dependencies */ import { withDispatch, withSelect } from '@wordpress/data'; -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { ClipboardButton, Button } from '@wordpress/components'; +import { compose } from '@wordpress/compose'; /** * Internal Dependencies diff --git a/editor/components/post-pingbacks/index.js b/editor/components/post-pingbacks/index.js index 848a923f7121a..8a4dc8189d309 100644 --- a/editor/components/post-pingbacks/index.js +++ b/editor/components/post-pingbacks/index.js @@ -2,9 +2,9 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { FormToggle, withInstanceId } from '@wordpress/components'; +import { FormToggle } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { withInstanceId, compose } from '@wordpress/compose'; function PostPingbacks( { pingStatus = 'open', instanceId, ...props } ) { const onTogglePingback = () => props.editPost( { ping_status: pingStatus === 'open' ? 'closed' : 'open' } ); diff --git a/editor/components/post-preview-button/index.js b/editor/components/post-preview-button/index.js index 034dcefb643fe..154f9f98d7c54 100644 --- a/editor/components/post-preview-button/index.js +++ b/editor/components/post-preview-button/index.js @@ -6,11 +6,12 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { Component, compose } from '@wordpress/element'; -import { Button, ifCondition } from '@wordpress/components'; +import { Component } from '@wordpress/element'; +import { Button } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; import { DotTip } from '@wordpress/nux'; +import { ifCondition, compose } from '@wordpress/compose'; export class PostPreviewButton extends Component { constructor() { diff --git a/editor/components/post-publish-button/index.js b/editor/components/post-publish-button/index.js index e6741c4453f14..3cd74e24e9f13 100644 --- a/editor/components/post-publish-button/index.js +++ b/editor/components/post-publish-button/index.js @@ -7,8 +7,9 @@ import { noop, get } from 'lodash'; * WordPress dependencies */ import { Button } from '@wordpress/components'; -import { compose, Component, createRef } from '@wordpress/element'; +import { Component, createRef } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-publish-button/label.js b/editor/components/post-publish-button/label.js index 600cbacf47326..d44cf1bec3e1c 100644 --- a/editor/components/post-publish-button/label.js +++ b/editor/components/post-publish-button/label.js @@ -7,7 +7,7 @@ import { get } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; export function PublishButtonLabel( { diff --git a/editor/components/post-publish-panel/index.js b/editor/components/post-publish-panel/index.js index f1863a030fd6c..19c1fb231501a 100644 --- a/editor/components/post-publish-panel/index.js +++ b/editor/components/post-publish-panel/index.js @@ -7,9 +7,10 @@ import { get } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { compose, Component } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { IconButton, Spinner } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal Dependencies diff --git a/editor/components/post-publish-panel/toggle.js b/editor/components/post-publish-panel/toggle.js index f51eebebd7fb2..6418adf81bd24 100644 --- a/editor/components/post-publish-panel/toggle.js +++ b/editor/components/post-publish-panel/toggle.js @@ -7,7 +7,7 @@ import { get } from 'lodash'; * WordPress Dependencies */ import { Button } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { withSelect } from '@wordpress/data'; import { DotTip } from '@wordpress/nux'; diff --git a/editor/components/post-saved-state/index.js b/editor/components/post-saved-state/index.js index 06f0f633a886a..4bc8b75ed3ad1 100644 --- a/editor/components/post-saved-state/index.js +++ b/editor/components/post-saved-state/index.js @@ -7,10 +7,11 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Dashicon, IconButton, withSafeTimeout } from '@wordpress/components'; -import { Component, compose } from '@wordpress/element'; +import { Dashicon, IconButton } from '@wordpress/components'; +import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { displayShortcut } from '@wordpress/keycodes'; +import { withSafeTimeout, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-schedule/check.js b/editor/components/post-schedule/check.js index c6e9de39ab6bb..7495f216b014c 100644 --- a/editor/components/post-schedule/check.js +++ b/editor/components/post-schedule/check.js @@ -6,7 +6,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; export function PostScheduleCheck( { hasPublishAction, children } ) { diff --git a/editor/components/post-schedule/index.js b/editor/components/post-schedule/index.js index 52c3ed4a26d03..9c4a02230f93b 100644 --- a/editor/components/post-schedule/index.js +++ b/editor/components/post-schedule/index.js @@ -3,11 +3,7 @@ */ import { getSettings } from '@wordpress/date'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; - -/** - * Internal dependencies - */ +import { compose } from '@wordpress/compose'; import { DateTimePicker } from '@wordpress/components'; export function PostSchedule( { date, onUpdateDate } ) { diff --git a/editor/components/post-sticky/check.js b/editor/components/post-sticky/check.js index 08fd8fbd56318..949c18cf43efd 100644 --- a/editor/components/post-sticky/check.js +++ b/editor/components/post-sticky/check.js @@ -6,7 +6,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; export function PostStickyCheck( { hasStickyAction, postType, children } ) { diff --git a/editor/components/post-sticky/index.js b/editor/components/post-sticky/index.js index c6d2ac16ed7ce..66650aaa4a581 100644 --- a/editor/components/post-sticky/index.js +++ b/editor/components/post-sticky/index.js @@ -2,9 +2,9 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { FormToggle, withInstanceId } from '@wordpress/components'; -import { compose } from '@wordpress/element'; +import { FormToggle } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; +import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-switch-to-draft-button/index.js b/editor/components/post-switch-to-draft-button/index.js index e4b41063a7e2b..8ea77f0f8a0d3 100644 --- a/editor/components/post-switch-to-draft-button/index.js +++ b/editor/components/post-switch-to-draft-button/index.js @@ -4,7 +4,7 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; function PostSwitchToDraftButton( { isSaving, isPublished, onClick } ) { if ( ! isPublished ) { diff --git a/editor/components/post-taxonomies/check.js b/editor/components/post-taxonomies/check.js index 8a5589032fdf5..e892b672d7778 100644 --- a/editor/components/post-taxonomies/check.js +++ b/editor/components/post-taxonomies/check.js @@ -6,7 +6,7 @@ import { some, includes } from 'lodash'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; export function PostTaxonomiesCheck( { postType, taxonomies, children } ) { diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js index f73ba815cbac5..8c767de2d0e15 100644 --- a/editor/components/post-taxonomies/flat-term-selector.js +++ b/editor/components/post-taxonomies/flat-term-selector.js @@ -8,10 +8,11 @@ import { stringify } from 'querystring'; * WordPress dependencies */ import { __, _x, sprintf } from '@wordpress/i18n'; -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { FormTokenField, withAPIData } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import apiRequest from '@wordpress/api-request'; +import { compose } from '@wordpress/compose'; /** * Module constants diff --git a/editor/components/post-taxonomies/hierarchical-term-selector.js b/editor/components/post-taxonomies/hierarchical-term-selector.js index 7933f83b2a564..c130334fbe29d 100644 --- a/editor/components/post-taxonomies/hierarchical-term-selector.js +++ b/editor/components/post-taxonomies/hierarchical-term-selector.js @@ -8,11 +8,12 @@ import { stringify } from 'querystring'; * WordPress dependencies */ import { __, _x, sprintf } from '@wordpress/i18n'; -import { Component, compose } from '@wordpress/element'; -import { TreeSelect, withAPIData, withInstanceId, withSpokenMessages, Button } from '@wordpress/components'; +import { Component } from '@wordpress/element'; +import { TreeSelect, withAPIData, withSpokenMessages, Button } from '@wordpress/components'; import { buildTermsTree } from '@wordpress/utils'; import { withSelect, withDispatch } from '@wordpress/data'; import apiRequest from '@wordpress/api-request'; +import { withInstanceId, compose } from '@wordpress/compose'; /** * Module Constants diff --git a/editor/components/post-taxonomies/index.js b/editor/components/post-taxonomies/index.js index 486dfb2128fad..a7841b062e67b 100644 --- a/editor/components/post-taxonomies/index.js +++ b/editor/components/post-taxonomies/index.js @@ -6,8 +6,9 @@ import { filter, identity, includes } from 'lodash'; /** * WordPress dependencies */ -import { compose, Fragment } from '@wordpress/element'; +import { Fragment } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-text-editor/index.js b/editor/components/post-text-editor/index.js index cb3bf75617309..bf700223da19c 100644 --- a/editor/components/post-text-editor/index.js +++ b/editor/components/post-text-editor/index.js @@ -8,10 +8,10 @@ import Textarea from 'react-autosize-textarea'; */ import { __ } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/utils'; -import { Component, compose, Fragment } from '@wordpress/element'; +import { Component, Fragment } from '@wordpress/element'; import { parse } from '@wordpress/blocks'; import { withSelect, withDispatch } from '@wordpress/data'; -import { withInstanceId } from '@wordpress/components'; +import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-title/index.js b/editor/components/post-title/index.js index 240bdb534aa34..6ef155b97a4c8 100644 --- a/editor/components/post-title/index.js +++ b/editor/components/post-title/index.js @@ -9,11 +9,12 @@ import { get } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { decodeEntities } from '@wordpress/utils'; import { ENTER } from '@wordpress/keycodes'; import { withSelect, withDispatch } from '@wordpress/data'; -import { KeyboardShortcuts, withInstanceId, withFocusOutside } from '@wordpress/components'; +import { KeyboardShortcuts, withFocusOutside } from '@wordpress/components'; +import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-trash/index.js b/editor/components/post-trash/index.js index af3b703adecc7..e55cba6c5ae88 100644 --- a/editor/components/post-trash/index.js +++ b/editor/components/post-trash/index.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { Button, Dashicon } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/post-visibility/check.js b/editor/components/post-visibility/check.js index 299bf5ea431db..134694b142916 100644 --- a/editor/components/post-visibility/check.js +++ b/editor/components/post-visibility/check.js @@ -6,7 +6,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; export function PostVisibilityCheck( { hasPublishAction, render } ) { diff --git a/editor/components/post-visibility/index.js b/editor/components/post-visibility/index.js index 025b5320b7a4c..69f29e280e5d4 100644 --- a/editor/components/post-visibility/index.js +++ b/editor/components/post-visibility/index.js @@ -2,8 +2,8 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component, compose } from '@wordpress/element'; -import { withInstanceId } from '@wordpress/components'; +import { Component } from '@wordpress/element'; +import { withInstanceId, compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** diff --git a/editor/components/rich-text/index.js b/editor/components/rich-text/index.js index 0d757fd3974cc..b51fb5ed8358f 100644 --- a/editor/components/rich-text/index.js +++ b/editor/components/rich-text/index.js @@ -17,7 +17,7 @@ import 'element-closest'; /** * WordPress dependencies */ -import { Component, Fragment, compose, RawHTML, createRef } from '@wordpress/element'; +import { Component, Fragment, RawHTML, createRef } from '@wordpress/element'; import { isHorizontalEdge, getRectangleFromRange, @@ -25,9 +25,10 @@ import { } from '@wordpress/dom'; import { createBlobURL } from '@wordpress/blob'; import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, rawShortcut } from '@wordpress/keycodes'; -import { withInstanceId, withSafeTimeout, Slot } from '@wordpress/components'; +import { Slot } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { rawHandler } from '@wordpress/blocks'; +import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/template-validation-notice/index.js b/editor/components/template-validation-notice/index.js index daa56189379e5..39cc0c1aacfba 100644 --- a/editor/components/template-validation-notice/index.js +++ b/editor/components/template-validation-notice/index.js @@ -4,7 +4,7 @@ import { Notice, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/editor/components/url-input/index.js b/editor/components/url-input/index.js index 5a067c4ec5418..ea1e4b56fd2ac 100644 --- a/editor/components/url-input/index.js +++ b/editor/components/url-input/index.js @@ -13,8 +13,9 @@ import { __, sprintf, _n } from '@wordpress/i18n'; import { Component, Fragment } from '@wordpress/element'; import { decodeEntities } from '@wordpress/utils'; import { UP, DOWN, ENTER } from '@wordpress/keycodes'; -import { Spinner, withInstanceId, withSpokenMessages, Popover } from '@wordpress/components'; +import { Spinner, withSpokenMessages, Popover } from '@wordpress/components'; import apiRequest from '@wordpress/api-request'; +import { withInstanceId } from '@wordpress/compose'; // Since URLInput is rendered in the context of other inputs, but should be // considered a separate modal node, prevent keyboard events from propagating diff --git a/editor/components/writing-flow/index.js b/editor/components/writing-flow/index.js index be73959b8c88d..865b9bd4d0794 100644 --- a/editor/components/writing-flow/index.js +++ b/editor/components/writing-flow/index.js @@ -6,7 +6,7 @@ import { overEvery, find, findLast, reverse, first, last } from 'lodash'; /** * WordPress dependencies */ -import { Component, compose } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { computeCaretRect, focus, @@ -19,6 +19,7 @@ import { } from '@wordpress/dom'; import { UP, DOWN, LEFT, RIGHT, isKeyboardEvent } from '@wordpress/keycodes'; import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/lib/client-assets.php b/lib/client-assets.php index 106e426cca5f4..6e3dc183c52e7 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -154,6 +154,13 @@ function gutenberg_register_scripts_and_styles() { filemtime( gutenberg_dir_path() . 'build/blob/index.js' ), true ); + wp_register_script( + 'wp-compose', + gutenberg_url( 'build/compose/index.js' ), + array( 'wp-element', 'wp-is-shallow-equal', 'lodash' ), + filemtime( gutenberg_dir_path() . 'build/compose/index.js' ), + true + ); wp_register_script( 'wp-keycodes', gutenberg_url( 'build/keycodes/index.js' ), @@ -164,7 +171,7 @@ function gutenberg_register_scripts_and_styles() { wp_register_script( 'wp-data', gutenberg_url( 'build/data/index.js' ), - array( 'wp-deprecated', 'wp-element', 'wp-is-shallow-equal', 'lodash' ), + array( 'wp-deprecated', 'wp-element', 'wp-compose', 'wp-is-shallow-equal', 'lodash' ), filemtime( gutenberg_dir_path() . 'build/data/index.js' ), true ); @@ -253,6 +260,7 @@ function gutenberg_register_scripts_and_styles() { 'moment', 'wp-a11y', 'wp-api-request', + 'wp-compose', 'wp-dom', 'wp-element', 'wp-hooks', @@ -282,7 +290,7 @@ function gutenberg_register_scripts_and_styles() { wp_register_script( 'wp-viewport', gutenberg_url( 'build/viewport/index.js' ), - array( 'wp-element', 'wp-data', 'wp-components', 'lodash' ), + array( 'wp-element', 'wp-data', 'wp-compose', 'lodash' ), filemtime( gutenberg_dir_path() . 'build/viewport/index.js' ), true ); @@ -295,6 +303,7 @@ function gutenberg_register_scripts_and_styles() { 'wp-blob', 'wp-blocks', 'wp-components', + 'wp-compose', 'wp-core-data', 'wp-element', 'wp-editor', @@ -310,7 +319,7 @@ function gutenberg_register_scripts_and_styles() { wp_register_script( 'wp-nux', gutenberg_url( 'build/nux/index.js' ), - array( 'wp-element', 'wp-components', 'wp-data', 'wp-i18n', 'lodash' ), + array( 'wp-element', 'wp-components', 'wp-compose', 'wp-data', 'wp-i18n', 'lodash' ), filemtime( gutenberg_dir_path() . 'build/nux/index.js' ), true ); @@ -397,6 +406,7 @@ function gutenberg_register_scripts_and_styles() { 'wp-blob', 'wp-blocks', 'wp-components', + 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', @@ -428,6 +438,7 @@ function gutenberg_register_scripts_and_styles() { 'wp-a11y', 'wp-api-request', 'wp-components', + 'wp-compose', 'wp-core-blocks', 'wp-date', 'wp-data', diff --git a/nux/components/dot-tip/index.js b/nux/components/dot-tip/index.js index 71006b1e8e981..a6e7038b92ad0 100644 --- a/nux/components/dot-tip/index.js +++ b/nux/components/dot-tip/index.js @@ -1,8 +1,8 @@ /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; -import { Popover, Button, IconButton, withSafeTimeout } from '@wordpress/components'; +import { compose, withSafeTimeout } from '@wordpress/compose'; +import { Popover, Button, IconButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; diff --git a/packages/compose/.npmrc b/packages/compose/.npmrc new file mode 100644 index 0000000000000..43c97e719a5a8 --- /dev/null +++ b/packages/compose/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/packages/compose/README.md b/packages/compose/README.md new file mode 100644 index 0000000000000..8c98a6f5893a2 --- /dev/null +++ b/packages/compose/README.md @@ -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... + +## Installation + +Install the module + +```bash +npm install @wordpress/compose --save +``` + +## Usage + +```js +import { withInstanceId } from '@wordpress/compose'; + +function WrappedComponent( props ) { + return props.instanceId; +} + +const ComponentWithInstanceIdProp = withInstanceId( WrappedComponent ); +``` + +Refer to each Higher Order Component's README file for more details. + +

Code is Poetry.

diff --git a/packages/compose/package.json b/packages/compose/package.json new file mode 100644 index 0000000000000..ffe9fbcfad6e3 --- /dev/null +++ b/packages/compose/package.json @@ -0,0 +1,35 @@ +{ + "name": "@wordpress/compose", + "version": "1.0.0-beta.0", + "description": "WordPress Higher Order components", + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress", + "React", + "hoc" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/compose/README.md", + "repository": { + "type": "git", + "url": "https://github.com/WordPress/gutenberg.git" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "main": "build/index.js", + "module": "build-module/index.js", + "dependencies": { + "@wordpress/element": "file:../element", + "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", + "lodash": "4.17.10" + }, + "devDependencies": { + "enzyme": "3.3.0", + "react-dom": "16.4.1", + "react-test-renderer": "16.4.1" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/components/higher-order/if-condition/README.md b/packages/compose/src/if-condition/README.md similarity index 100% rename from components/higher-order/if-condition/README.md rename to packages/compose/src/if-condition/README.md diff --git a/components/higher-order/if-condition/index.js b/packages/compose/src/if-condition/index.js similarity index 100% rename from components/higher-order/if-condition/index.js rename to packages/compose/src/if-condition/index.js diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js new file mode 100644 index 0000000000000..ee6a3a05ec584 --- /dev/null +++ b/packages/compose/src/index.js @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { flowRight } from 'lodash'; + +export { default as ifCondition } from './if-condition'; +export { default as pure } from './pure'; +export { default as remountOnPropChange } from './remount-on-prop-change'; +export { default as withGlobalEvents } from './with-global-events'; +export { default as withInstanceId } from './with-instance-id'; +export { default as withSafeTimeout } from './with-safe-timeout'; +export { default as withState } from './with-state'; + +/** + * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function + * composition, where each successive invocation is supplied the return value of the previous. + * + * @param {...Function} hocs The HOC functions to invoke. + * + * @return {Function} Returns the new composite function. + */ +export { flowRight as compose }; diff --git a/packages/compose/src/pure/index.js b/packages/compose/src/pure/index.js new file mode 100644 index 0000000000000..d7372a413249d --- /dev/null +++ b/packages/compose/src/pure/index.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import isShallowEqual from '@wordpress/is-shallow-equal'; +import { createHigherOrderComponent, Component } from '@wordpress/element'; + +/** + * Given a component returns the enhanced component augmented with a component + * only rerendering when its props/state change + * + * @param {Function} mapComponentToEnhancedComponent Function mapping component + * to enhanced component. + * @param {string} modifierName Seed name from which to + * generated display name. + * + * @return {WPComponent} Component class with generated display name assigned. + */ +const pure = createHigherOrderComponent( ( Wrapped ) => { + if ( Wrapped.prototype instanceof Component ) { + return class extends Wrapped { + shouldComponentUpdate( nextProps, nextState ) { + return ! isShallowEqual( nextProps, this.props ) || ! isShallowEqual( nextState, this.state ); + } + }; + } + + return class extends Component { + shouldComponentUpdate( nextProps ) { + return ! isShallowEqual( nextProps, this.props ); + } + + render() { + return ; + } + }; +}, 'pure' ); + +export default pure; diff --git a/packages/compose/src/pure/test/index.js b/packages/compose/src/pure/test/index.js new file mode 100644 index 0000000000000..2cb40cd7015e2 --- /dev/null +++ b/packages/compose/src/pure/test/index.js @@ -0,0 +1,58 @@ +/** + * External dependencies + */ +import { mount } from 'enzyme'; + +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import pure from '../'; + +describe( 'pure', () => { + it( 'functional component should rerender only when props change', () => { + let i = 0; + const MyComp = pure( () => { + return

{ ++i }

; + } ); + const wrapper = mount( ); + wrapper.update(); // Updating with same props doesn't rerender + expect( wrapper.html() ).toBe( '

1

' ); + wrapper.setProps( { prop: 'a' } ); // New prop should trigger a rerender + expect( wrapper.html() ).toBe( '

2

' ); + wrapper.setProps( { prop: 'a' } ); // Keeping the same prop value should not rerender + expect( wrapper.html() ).toBe( '

2

' ); + wrapper.setProps( { prop: 'b' } ); // Changing the prop value should rerender + expect( wrapper.html() ).toBe( '

3

' ); + } ); + + it( 'class component should rerender if the props or state change', () => { + let i = 0; + const MyComp = pure( class extends Component { + constructor() { + super( ...arguments ); + this.state = {}; + } + render() { + return

{ ++i }

; + } + } ); + const wrapper = mount( ); + wrapper.update(); // Updating with same props doesn't rerender + expect( wrapper.html() ).toBe( '

1

' ); + wrapper.setProps( { prop: 'a' } ); // New prop should trigger a rerender + expect( wrapper.html() ).toBe( '

2

' ); + wrapper.setProps( { prop: 'a' } ); // Keeping the same prop value should not rerender + expect( wrapper.html() ).toBe( '

2

' ); + wrapper.setProps( { prop: 'b' } ); // Changing the prop value should rerender + expect( wrapper.html() ).toBe( '

3

' ); + wrapper.setState( { state: 'a' } ); // New state value should trigger a rerender + expect( wrapper.html() ).toBe( '

4

' ); + wrapper.setState( { state: 'a' } ); // Keeping the same state value should not trigger a rerender + expect( wrapper.html() ).toBe( '

4

' ); + } ); +} ); diff --git a/packages/data/src/components/remountOnPropChange/index.js b/packages/compose/src/remount-on-prop-change/index.js similarity index 100% rename from packages/data/src/components/remountOnPropChange/index.js rename to packages/compose/src/remount-on-prop-change/index.js diff --git a/packages/data/src/components/remountOnPropChange/test/index.js b/packages/compose/src/remount-on-prop-change/test/index.js similarity index 100% rename from packages/data/src/components/remountOnPropChange/test/index.js rename to packages/compose/src/remount-on-prop-change/test/index.js diff --git a/components/higher-order/with-global-events/README.md b/packages/compose/src/with-global-events/README.md similarity index 100% rename from components/higher-order/with-global-events/README.md rename to packages/compose/src/with-global-events/README.md diff --git a/components/higher-order/with-global-events/index.js b/packages/compose/src/with-global-events/index.js similarity index 100% rename from components/higher-order/with-global-events/index.js rename to packages/compose/src/with-global-events/index.js diff --git a/components/higher-order/with-global-events/listener.js b/packages/compose/src/with-global-events/listener.js similarity index 100% rename from components/higher-order/with-global-events/listener.js rename to packages/compose/src/with-global-events/listener.js diff --git a/components/higher-order/with-global-events/test/index.js b/packages/compose/src/with-global-events/test/index.js similarity index 100% rename from components/higher-order/with-global-events/test/index.js rename to packages/compose/src/with-global-events/test/index.js diff --git a/components/higher-order/with-global-events/test/listener.js b/packages/compose/src/with-global-events/test/listener.js similarity index 100% rename from components/higher-order/with-global-events/test/listener.js rename to packages/compose/src/with-global-events/test/listener.js diff --git a/components/higher-order/with-instance-id/README.md b/packages/compose/src/with-instance-id/README.md similarity index 100% rename from components/higher-order/with-instance-id/README.md rename to packages/compose/src/with-instance-id/README.md diff --git a/components/higher-order/with-instance-id/index.js b/packages/compose/src/with-instance-id/index.js similarity index 100% rename from components/higher-order/with-instance-id/index.js rename to packages/compose/src/with-instance-id/index.js diff --git a/components/higher-order/with-instance-id/test/index.js b/packages/compose/src/with-instance-id/test/index.js similarity index 100% rename from components/higher-order/with-instance-id/test/index.js rename to packages/compose/src/with-instance-id/test/index.js diff --git a/components/higher-order/with-safe-timeout/README.md b/packages/compose/src/with-safe-timeout/README.md similarity index 100% rename from components/higher-order/with-safe-timeout/README.md rename to packages/compose/src/with-safe-timeout/README.md diff --git a/components/higher-order/with-safe-timeout/index.js b/packages/compose/src/with-safe-timeout/index.js similarity index 100% rename from components/higher-order/with-safe-timeout/index.js rename to packages/compose/src/with-safe-timeout/index.js diff --git a/components/higher-order/with-state/README.md b/packages/compose/src/with-state/README.md similarity index 100% rename from components/higher-order/with-state/README.md rename to packages/compose/src/with-state/README.md diff --git a/components/higher-order/with-state/index.js b/packages/compose/src/with-state/index.js similarity index 100% rename from components/higher-order/with-state/index.js rename to packages/compose/src/with-state/index.js diff --git a/components/higher-order/with-state/test/index.js b/packages/compose/src/with-state/test/index.js similarity index 100% rename from components/higher-order/with-state/test/index.js rename to packages/compose/src/with-state/test/index.js diff --git a/packages/data/package.json b/packages/data/package.json index 661cecb993573..ce60164d4f955 100644 --- a/packages/data/package.json +++ b/packages/data/package.json @@ -21,6 +21,7 @@ "module": "build-module/index.js", "react-native": "src/index", "dependencies": { + "@wordpress/compose": "file:../compose", "@wordpress/deprecated": "file:../deprecated", "@wordpress/element": "file:../element", "@wordpress/is-shallow-equal": "file:../is-shallow-equal", diff --git a/packages/data/src/components/with-dispatch/index.js b/packages/data/src/components/with-dispatch/index.js index 13022c8b98dab..496a6d6440f71 100644 --- a/packages/data/src/components/with-dispatch/index.js +++ b/packages/data/src/components/with-dispatch/index.js @@ -6,17 +6,12 @@ import { mapValues } from 'lodash'; /** * WordPress dependencies */ -import { - Component, - compose, - createHigherOrderComponent, - pure, -} from '@wordpress/element'; +import { Component, createHigherOrderComponent } from '@wordpress/element'; +import { pure, compose, remountOnPropChange } from '@wordpress/compose'; /** * Internal dependencies */ -import remountOnPropChange from '../remountOnPropChange'; import { RegistryConsumer } from '../registry-provider'; /** diff --git a/packages/data/src/components/with-select/index.js b/packages/data/src/components/with-select/index.js index 4533d96679b57..0a1a0015995b2 100644 --- a/packages/data/src/components/with-select/index.js +++ b/packages/data/src/components/with-select/index.js @@ -6,11 +6,11 @@ import { createHigherOrderComponent, } from '@wordpress/element'; import isShallowEqual from '@wordpress/is-shallow-equal'; +import { remountOnPropChange } from '@wordpress/compose'; /** * Internal dependencies */ -import remountOnPropChange from '../remountOnPropChange'; import { RegistryConsumer } from '../registry-provider'; /** diff --git a/packages/data/src/components/with-select/test/index.js b/packages/data/src/components/with-select/test/index.js index b2505cd46246d..a5c703f12cfa6 100644 --- a/packages/data/src/components/with-select/test/index.js +++ b/packages/data/src/components/with-select/test/index.js @@ -6,7 +6,7 @@ import TestRenderer from 'react-test-renderer'; /** * WordPress dependencies */ -import { compose } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/packages/element/src/create-higher-order-component.js b/packages/element/src/create-higher-order-component.js new file mode 100644 index 0000000000000..448193468c94e --- /dev/null +++ b/packages/element/src/create-higher-order-component.js @@ -0,0 +1,27 @@ +/** + * External dependencies + */ +import { camelCase, upperFirst } from 'lodash'; + +/** + * Given a function mapping a component to an enhanced component and modifier + * name, returns the enhanced component augmented with a generated displayName. + * + * @param {Function} mapComponentToEnhancedComponent Function mapping component + * to enhanced component. + * @param {string} modifierName Seed name from which to + * generated display name. + * + * @return {WPComponent} Component class with generated display name assigned. + */ +function createHigherOrderComponent( mapComponentToEnhancedComponent, modifierName ) { + return ( OriginalComponent ) => { + const EnhancedComponent = mapComponentToEnhancedComponent( OriginalComponent ); + const { displayName = OriginalComponent.name || 'Component' } = OriginalComponent; + EnhancedComponent.displayName = `${ upperFirst( camelCase( modifierName ) ) }(${ displayName })`; + + return EnhancedComponent; + }; +} + +export default createHigherOrderComponent; diff --git a/packages/element/src/deprecated.js b/packages/element/src/deprecated.js new file mode 100644 index 0000000000000..915042f805362 --- /dev/null +++ b/packages/element/src/deprecated.js @@ -0,0 +1,50 @@ +/** + * External dependencies + */ +import { flowRight } from 'lodash'; +import { Component } from 'react'; + +/** + * WordPress dependencies + */ +import deprecated from '@wordpress/deprecated'; +import isShallowEqual from '@wordpress/is-shallow-equal'; + +/** + * Internal dependencies + */ +import createHigherOrderComponent from './create-higher-order-component'; + +export const compose = ( ...args ) => { + deprecated( 'wp.element.compose', { + version: '3.5', + alternative: 'wp.compose.compose', + } ); + + return flowRight( ...args ); +}; + +export const pure = createHigherOrderComponent( ( Wrapped ) => { + deprecated( 'wp.element.pure', { + version: '3.5', + alternative: 'wp.compose.pure', + } ); + + if ( Wrapped.prototype instanceof Component ) { + return class extends Wrapped { + shouldComponentUpdate( nextProps, nextState ) { + return ! isShallowEqual( nextProps, this.props ) || ! isShallowEqual( nextState, this.state ); + } + }; + } + + return class extends Component { + shouldComponentUpdate( nextProps ) { + return ! isShallowEqual( nextProps, this.props ); + } + + render() { + return ; + } + }; +}, 'pure' ); diff --git a/packages/element/src/index.js b/packages/element/src/index.js index c0b6fbb5f20f3..af2f8f95d1367 100644 --- a/packages/element/src/index.js +++ b/packages/element/src/index.js @@ -14,23 +14,15 @@ import { StrictMode, } from 'react'; import { render, findDOMNode, createPortal, unmountComponentAtNode } from 'react-dom'; -import { - camelCase, - flowRight, - isString, - upperFirst, -} from 'lodash'; - -/** - * WordPress dependencies - */ -import isShallowEqual from '@wordpress/is-shallow-equal'; +import { isString } from 'lodash'; /** * Internal dependencies */ import serialize from './serialize'; import { RawHTML } from './index-common'; +export { default as createHigherOrderComponent } from './create-higher-order-component'; +export * from './deprecated'; /** * Returns a new element of given type. Type can be either a string tag name or @@ -193,37 +185,6 @@ export function switchChildrenNodeName( children, nodeName ) { } ); } -/** - * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function - * composition, where each successive invocation is supplied the return value of the previous. - * - * @param {...Function} hocs The HOC functions to invoke. - * - * @return {Function} Returns the new composite function. - */ -export { flowRight as compose }; - -/** - * Given a function mapping a component to an enhanced component and modifier - * name, returns the enhanced component augmented with a generated displayName. - * - * @param {Function} mapComponentToEnhancedComponent Function mapping component - * to enhanced component. - * @param {string} modifierName Seed name from which to - * generated display name. - * - * @return {WPComponent} Component class with generated display name assigned. - */ -export function createHigherOrderComponent( mapComponentToEnhancedComponent, modifierName ) { - return ( OriginalComponent ) => { - const EnhancedComponent = mapComponentToEnhancedComponent( OriginalComponent ); - const { displayName = OriginalComponent.name || 'Component' } = OriginalComponent; - EnhancedComponent.displayName = `${ upperFirst( camelCase( modifierName ) ) }(${ displayName })`; - - return EnhancedComponent; - }; -} - /** * Component used as equivalent of Fragment with unescaped HTML, in cases where * it is desirable to render dangerous HTML without needing a wrapper element. @@ -235,34 +196,3 @@ export function createHigherOrderComponent( mapComponentToEnhancedComponent, mod * @return {WPElement} Dangerously-rendering element. */ export { RawHTML }; - -/** - * Given a component returns the enhanced component augmented with a component - * only rerendering when its props/state change - * - * @param {Function} mapComponentToEnhancedComponent Function mapping component - * to enhanced component. - * @param {string} modifierName Seed name from which to - * generated display name. - * - * @return {WPComponent} Component class with generated display name assigned. - */ -export const pure = createHigherOrderComponent( ( Wrapped ) => { - if ( Wrapped.prototype instanceof Component ) { - return class extends Wrapped { - shouldComponentUpdate( nextProps, nextState ) { - return ! isShallowEqual( nextProps, this.props ) || ! isShallowEqual( nextState, this.state ); - } - }; - } - - return class extends Component { - shouldComponentUpdate( nextProps ) { - return ! isShallowEqual( nextProps, this.props ); - } - - render() { - return ; - } - }; -}, 'pure' ); diff --git a/packages/element/src/test/create-higher-order-component.js b/packages/element/src/test/create-higher-order-component.js new file mode 100644 index 0000000000000..7d393bac1ef62 --- /dev/null +++ b/packages/element/src/test/create-higher-order-component.js @@ -0,0 +1,66 @@ +/** + * Internal dependencies + */ +import { createHigherOrderComponent } from '../create-higher-order-component'; +import { Component } from './'; + +describe( 'createHigherOrderComponent', () => { + it( 'should use default name for anonymous function', () => { + const TestComponent = createHigherOrderComponent( + ( OriginalComponent ) => OriginalComponent, + 'withTest' + )( () =>
); + + expect( TestComponent.displayName ).toBe( 'WithTest(Component)' ); + } ); + + it( 'should use camel case starting with upper for wrapper prefix ', () => { + const TestComponent = createHigherOrderComponent( + ( OriginalComponent ) => OriginalComponent, + 'with-one-two_threeFOUR' + )( () =>
); + + expect( TestComponent.displayName ).toBe( 'WithOneTwoThreeFour(Component)' ); + } ); + + it( 'should use function name', () => { + function SomeComponent() { + return
; + } + const TestComponent = createHigherOrderComponent( + ( OriginalComponent ) => OriginalComponent, + 'withTest' + )( SomeComponent ); + + expect( TestComponent.displayName ).toBe( 'WithTest(SomeComponent)' ); + } ); + + it( 'should use component class name', () => { + class SomeAnotherComponent extends Component { + render() { + return
; + } + } + const TestComponent = createHigherOrderComponent( + ( OriginalComponent ) => OriginalComponent, + 'withTest' + )( SomeAnotherComponent ); + + expect( TestComponent.displayName ).toBe( 'WithTest(SomeAnotherComponent)' ); + } ); + + it( 'should use displayName property', () => { + class SomeYetAnotherComponent extends Component { + render() { + return
; + } + } + SomeYetAnotherComponent.displayName = 'CustomDisplayName'; + const TestComponent = createHigherOrderComponent( + ( OriginalComponent ) => OriginalComponent, + 'withTest' + )( SomeYetAnotherComponent ); + + expect( TestComponent.displayName ).toBe( 'WithTest(CustomDisplayName)' ); + } ); +} ); diff --git a/packages/element/src/test/index.js b/packages/element/src/test/index.js index 80d06d5545292..63299d424ebab 100644 --- a/packages/element/src/test/index.js +++ b/packages/element/src/test/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; /** * Internal dependencies @@ -9,12 +9,10 @@ import { shallow, mount } from 'enzyme'; import { Component, createElement, - createHigherOrderComponent, concatChildren, renderToString, switchChildrenNodeName, RawHTML, - pure, } from '../'; describe( 'element', () => { @@ -124,67 +122,6 @@ describe( 'element', () => { } ); } ); - describe( 'createHigherOrderComponent', () => { - it( 'should use default name for anonymous function', () => { - const TestComponent = createHigherOrderComponent( - ( OriginalComponent ) => OriginalComponent, - 'withTest' - )( () =>
); - - expect( TestComponent.displayName ).toBe( 'WithTest(Component)' ); - } ); - - it( 'should use camel case starting with upper for wrapper prefix ', () => { - const TestComponent = createHigherOrderComponent( - ( OriginalComponent ) => OriginalComponent, - 'with-one-two_threeFOUR' - )( () =>
); - - expect( TestComponent.displayName ).toBe( 'WithOneTwoThreeFour(Component)' ); - } ); - - it( 'should use function name', () => { - function SomeComponent() { - return
; - } - const TestComponent = createHigherOrderComponent( - ( OriginalComponent ) => OriginalComponent, - 'withTest' - )( SomeComponent ); - - expect( TestComponent.displayName ).toBe( 'WithTest(SomeComponent)' ); - } ); - - it( 'should use component class name', () => { - class SomeAnotherComponent extends Component { - render() { - return
; - } - } - const TestComponent = createHigherOrderComponent( - ( OriginalComponent ) => OriginalComponent, - 'withTest' - )( SomeAnotherComponent ); - - expect( TestComponent.displayName ).toBe( 'WithTest(SomeAnotherComponent)' ); - } ); - - it( 'should use displayName property', () => { - class SomeYetAnotherComponent extends Component { - render() { - return
; - } - } - SomeYetAnotherComponent.displayName = 'CustomDisplayName'; - const TestComponent = createHigherOrderComponent( - ( OriginalComponent ) => OriginalComponent, - 'withTest' - )( SomeYetAnotherComponent ); - - expect( TestComponent.displayName ).toBe( 'WithTest(CustomDisplayName)' ); - } ); - } ); - describe( 'RawHTML', () => { it( 'is dangerous', () => { const html = '

So scary!

'; @@ -213,48 +150,4 @@ describe( 'element', () => { expect( element.prop( 'children' ) ).toBe( undefined ); } ); } ); - - describe( 'pure', () => { - it( 'functional component should rerender only when props change', () => { - let i = 0; - const MyComp = pure( () => { - return

{ ++i }

; - } ); - const wrapper = mount( ); - wrapper.update(); // Updating with same props doesn't rerender - expect( wrapper.html() ).toBe( '

1

' ); - wrapper.setProps( { prop: 'a' } ); // New prop should trigger a rerender - expect( wrapper.html() ).toBe( '

2

' ); - wrapper.setProps( { prop: 'a' } ); // Keeping the same prop value should not rerender - expect( wrapper.html() ).toBe( '

2

' ); - wrapper.setProps( { prop: 'b' } ); // Changing the prop value should rerender - expect( wrapper.html() ).toBe( '

3

' ); - } ); - - it( 'class component should rerender if the props or state change', () => { - let i = 0; - const MyComp = pure( class extends Component { - constructor() { - super( ...arguments ); - this.state = {}; - } - render() { - return

{ ++i }

; - } - } ); - const wrapper = mount( ); - wrapper.update(); // Updating with same props doesn't rerender - expect( wrapper.html() ).toBe( '

1

' ); - wrapper.setProps( { prop: 'a' } ); // New prop should trigger a rerender - expect( wrapper.html() ).toBe( '

2

' ); - wrapper.setProps( { prop: 'a' } ); // Keeping the same prop value should not rerender - expect( wrapper.html() ).toBe( '

2

' ); - wrapper.setProps( { prop: 'b' } ); // Changing the prop value should rerender - expect( wrapper.html() ).toBe( '

3

' ); - wrapper.setState( { state: 'a' } ); // New state value should trigger a rerender - expect( wrapper.html() ).toBe( '

4

' ); - wrapper.setState( { state: 'a' } ); // Keeping the same state value should not trigger a rerender - expect( wrapper.html() ).toBe( '

4

' ); - } ); - } ); } ); diff --git a/viewport/if-viewport-matches.js b/viewport/if-viewport-matches.js index 6df11907fcbaf..ed29bc72546c8 100644 --- a/viewport/if-viewport-matches.js +++ b/viewport/if-viewport-matches.js @@ -1,8 +1,8 @@ /** * WordPress dependencies */ -import { compose, createHigherOrderComponent } from '@wordpress/element'; -import { ifCondition } from '@wordpress/components'; +import { createHigherOrderComponent } from '@wordpress/element'; +import { ifCondition, compose } from '@wordpress/compose'; /** * Internal dependencies diff --git a/webpack.config.js b/webpack.config.js index 5d1e46f8b3c8d..f653683abb88f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -151,6 +151,7 @@ const gutenbergPackages = [ 'a11y', 'api-request', 'blob', + 'compose', 'core-data', 'data', 'date',