From 86d997ef9e2c83d13b4ed8d70e39d52b994e4f37 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 12 Jun 2018 10:46:11 +0100 Subject: [PATCH 1/3] React: Remove the usage of the componentWillMount lifecycle --- components/higher-order/with-focus-return/index.js | 3 --- components/slot-fill/fill.js | 3 ++- core-blocks/embed/index.js | 2 +- packages/element/src/serialize.js | 4 ---- packages/element/src/test/serialize.js | 10 +++------- 5 files changed, 6 insertions(+), 16 deletions(-) diff --git a/components/higher-order/with-focus-return/index.js b/components/higher-order/with-focus-return/index.js index 2dc950e3323e2..522d3433f8b7d 100644 --- a/components/higher-order/with-focus-return/index.js +++ b/components/higher-order/with-focus-return/index.js @@ -20,9 +20,6 @@ function withFocusReturn( WrappedComponent ) { this.setIsFocusedTrue = () => this.isFocused = true; this.setIsFocusedFalse = () => this.isFocused = false; - } - - componentWillMount() { this.activeElementOnMount = document.activeElement; } diff --git a/components/slot-fill/fill.js b/components/slot-fill/fill.js index 9675fc215882f..0b416e1889c06 100644 --- a/components/slot-fill/fill.js +++ b/components/slot-fill/fill.js @@ -11,7 +11,8 @@ import { Component, createPortal } from '@wordpress/element'; let occurrences = 0; class Fill extends Component { - componentWillMount() { + constructor() { + super( ...arguments ); this.occurrence = ++occurrences; } diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js index b2c17bac4435b..57ba9181ac22a 100644 --- a/core-blocks/embed/index.js +++ b/core-blocks/embed/index.js @@ -102,7 +102,7 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', }; } - componentWillMount() { + componentDidMount() { this.doServerSideRender(); } diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js index 6ef93817d8c93..a7197d253d779 100644 --- a/packages/element/src/serialize.js +++ b/packages/element/src/serialize.js @@ -441,10 +441,6 @@ export function renderNativeComponent( type, props, context = {} ) { export function renderComponent( Component, props, context = {} ) { const instance = new Component( props, context ); - if ( typeof instance.componentWillMount === 'function' ) { - instance.componentWillMount(); - } - if ( typeof instance.getChildContext === 'function' ) { Object.assign( context, instance.getChildContext() ); } diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js index 134371161ec57..0f58e746327d1 100644 --- a/packages/element/src/test/serialize.js +++ b/packages/element/src/test/serialize.js @@ -303,7 +303,7 @@ describe( 'renderNativeComponent()', () => { } ); describe( 'renderComponent()', () => { - it( 'calls constructor and componentWillMount', () => { + it( 'calls constructor', () => { class Example extends Component { constructor() { super( ...arguments ); @@ -311,18 +311,14 @@ describe( 'renderComponent()', () => { this.constructed = 'constructed'; } - componentWillMount() { - this.willMounted = 'willMounted'; - } - render() { - return this.constructed + this.willMounted; + return this.constructed; } } const result = renderComponent( Example, {} ); - expect( result ).toBe( 'constructedwillMounted' ); + expect( result ).toBe( 'constructed' ); } ); it( 'does not call componentDidMount', () => { From 41fee5b2a664c1ea9a808e8f33bec0cf63e073e7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 19 Jun 2018 10:03:00 +0100 Subject: [PATCH 2/3] Deprecating componentWillMount in the serializer --- docs/reference/deprecated.md | 2 ++ packages/element/package.json | 1 + packages/element/src/serialize.js | 14 ++++++++++++++ 3 files changed, 17 insertions(+) diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md index 3d142ab420c87..6d0a7505e7b9c 100644 --- a/docs/reference/deprecated.md +++ b/docs/reference/deprecated.md @@ -1,7 +1,9 @@ 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.3.0 + - `useOnce: true` has been removed from the Block API. Please use `supports.multiple: false` instead. + - Serializing components using `componentWillMount` lifecycle method. Please use the constructor instead. ## 3.2.0 diff --git a/packages/element/package.json b/packages/element/package.json index ad8a531b82a95..3664be8d2434d 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -20,6 +20,7 @@ "main": "build/index.js", "module": "build-module/index.js", "dependencies": { + "@wordpress/deprecated": "^1.0.0-alpha.1", "@wordpress/is-shallow-equal": "1.0.2", "lodash": "4.17.5", "react": "16.3.2", diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js index a7197d253d779..741c787e93886 100644 --- a/packages/element/src/serialize.js +++ b/packages/element/src/serialize.js @@ -30,6 +30,11 @@ */ import { isEmpty, castArray, omit, kebabCase } from 'lodash'; +/** + * WordPress dependencies + */ +import deprecated from '@wordpress/deprecated'; + /** * Internal dependencies */ @@ -441,6 +446,15 @@ export function renderNativeComponent( type, props, context = {} ) { export function renderComponent( Component, props, context = {} ) { const instance = new Component( props, context ); + if ( typeof instance.componentWillMount === 'function' ) { + instance.componentWillMount(); + deprecated( 'componentWillMount', { + version: '3.3', + alternative: 'the constructor', + plugin: 'Gutenberg', + } ); + } + if ( typeof instance.getChildContext === 'function' ) { Object.assign( context, instance.getChildContext() ); } From ed743ab6a4e9e3b4d4fe8abb2a7228da9e8197c6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 19 Jun 2018 12:25:04 +0100 Subject: [PATCH 3/3] Restore componentWillMount serialize test --- packages/element/src/test/serialize.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js index 0f58e746327d1..62dbe27693757 100644 --- a/packages/element/src/test/serialize.js +++ b/packages/element/src/test/serialize.js @@ -303,7 +303,7 @@ describe( 'renderNativeComponent()', () => { } ); describe( 'renderComponent()', () => { - it( 'calls constructor', () => { + it( 'calls constructor and componentWillMount', () => { class Example extends Component { constructor() { super( ...arguments ); @@ -311,14 +311,19 @@ describe( 'renderComponent()', () => { this.constructed = 'constructed'; } + componentWillMount() { + this.willMounted = 'willMounted'; + } + render() { - return this.constructed; + return this.constructed + this.willMounted; } } const result = renderComponent( Example, {} ); - expect( result ).toBe( 'constructed' ); + expect( console ).toHaveWarned(); + expect( result ).toBe( 'constructedwillMounted' ); } ); it( 'does not call componentDidMount', () => {