From 0b9559e2db1f786fc6affd9583f2c4f7d3034b1d Mon Sep 17 00:00:00 2001 From: Darren Ethier Date: Wed, 21 Aug 2019 09:05:17 -0400 Subject: [PATCH] Install @babel/plugin-proposal-class-properties. (https://github.com/woocommerce/woocommerce-blocks/pull/856) * add @babel/plugin-proposal-class-properties plugin * refactor ProductByCategoryBlock to use class properties --- .../js/blocks/product-category/block.js | 57 ++++++++----------- plugins/woocommerce-blocks/package-lock.json | 52 +++++++++++++++++ plugins/woocommerce-blocks/package.json | 3 +- .../tests/js/jestPreprocess.js | 1 + plugins/woocommerce-blocks/webpack.config.js | 2 + 5 files changed, 82 insertions(+), 33 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js index fd48efc7bec..d8da1c06d01 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js @@ -30,16 +30,27 @@ import ProductOrderbyControl from '../../components/product-orderby-control'; * Component to handle edit mode of "Products by Category". */ class ProductByCategoryBlock extends Component { - constructor() { - super( ...arguments ); - this.state = { - changedAttributes: {}, - isEditing: false, - }; - this.startEditing = this.startEditing.bind( this ); - this.stopEditing = this.stopEditing.bind( this ); - this.setChangedAttributes = this.setChangedAttributes.bind( this ); - this.save = this.save.bind( this ); + static propTypes = { + /** + * The attributes for this block + */ + attributes: PropTypes.object.isRequired, + /** + * The register block name. + */ + name: PropTypes.string.isRequired, + /** + * A callback to update attributes + */ + setAttributes: PropTypes.func.isRequired, + + // from withSpokenMessages + debouncedSpeak: PropTypes.func.isRequired, + } + + state = { + changedAttributes: {}, + isEditing: false, } componentDidMount() { @@ -51,27 +62,27 @@ class ProductByCategoryBlock extends Component { } } - startEditing() { + startEditing = () => { this.setState( { isEditing: true, changedAttributes: {}, } ); } - stopEditing() { + stopEditing = () => { this.setState( { isEditing: false, changedAttributes: {}, } ); } - setChangedAttributes( attributes ) { + setChangedAttributes = ( attributes ) => { this.setState( ( prevState ) => { return { changedAttributes: { ...prevState.changedAttributes, ...attributes } }; } ); } - save() { + save = () => { const { changedAttributes } = this.state; const { setAttributes } = this.props; @@ -254,22 +265,4 @@ class ProductByCategoryBlock extends Component { } } -ProductByCategoryBlock.propTypes = { - /** - * The attributes for this block - */ - attributes: PropTypes.object.isRequired, - /** - * The register block name. - */ - name: PropTypes.string.isRequired, - /** - * A callback to update attributes - */ - setAttributes: PropTypes.func.isRequired, - - // from withSpokenMessages - debouncedSpeak: PropTypes.func.isRequired, -}; - export default withSpokenMessages( ProductByCategoryBlock ); diff --git a/plugins/woocommerce-blocks/package-lock.json b/plugins/woocommerce-blocks/package-lock.json index 1b2267b6fe5..d7a474c3ef9 100644 --- a/plugins/woocommerce-blocks/package-lock.json +++ b/plugins/woocommerce-blocks/package-lock.json @@ -317,6 +317,48 @@ } } }, + "@babel/helper-create-class-features-plugin": { + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.5.5.tgz", + "integrity": "sha512-ZsxkyYiRA7Bg+ZTRpPvB6AbOFKTFFK4LrvTet8lInm0V468MWCaSYJE+I7v2z2r8KNLtYiV+K5kTCnR7dvyZjg==", + "dev": true, + "requires": { + "@babel/helper-function-name": "^7.1.0", + "@babel/helper-member-expression-to-functions": "^7.5.5", + "@babel/helper-optimise-call-expression": "^7.0.0", + "@babel/helper-plugin-utils": "^7.0.0", + "@babel/helper-replace-supers": "^7.5.5", + "@babel/helper-split-export-declaration": "^7.4.4" + }, + "dependencies": { + "@babel/helper-split-export-declaration": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", + "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", + "dev": true, + "requires": { + "@babel/types": "^7.4.4" + } + }, + "@babel/types": { + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz", + "integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + }, + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", + "dev": true + } + } + }, "@babel/helper-define-map": { "version": "7.5.5", "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.5.5.tgz", @@ -844,6 +886,16 @@ "@babel/plugin-syntax-async-generators": "^7.2.0" } }, + "@babel/plugin-proposal-class-properties": { + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz", + "integrity": "sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==", + "dev": true, + "requires": { + "@babel/helper-create-class-features-plugin": "^7.5.5", + "@babel/helper-plugin-utils": "^7.0.0" + } + }, "@babel/plugin-proposal-dynamic-import": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.5.0.tgz", diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json index b28c26aebe5..f878d0fed23 100644 --- a/plugins/woocommerce-blocks/package.json +++ b/plugins/woocommerce-blocks/package.json @@ -38,8 +38,9 @@ }, "devDependencies": { "@babel/core": "7.5.5", - "@woocommerce/navigation": "2.1.1", + "@babel/plugin-proposal-class-properties": "^7.5.5", "@octokit/rest": "16.28.7", + "@woocommerce/navigation": "2.1.1", "@wordpress/babel-preset-default": "4.4.0", "@wordpress/blocks": "6.5.0", "@wordpress/browserslist-config": "2.6.0", diff --git a/plugins/woocommerce-blocks/tests/js/jestPreprocess.js b/plugins/woocommerce-blocks/tests/js/jestPreprocess.js index f733f199360..8dae8789334 100644 --- a/plugins/woocommerce-blocks/tests/js/jestPreprocess.js +++ b/plugins/woocommerce-blocks/tests/js/jestPreprocess.js @@ -1,5 +1,6 @@ const babelOptions = { presets: [ '@wordpress/babel-preset-default' ], + plugins: [ '@babel/plugin-proposal-class-properties' ], }; module.exports = require( 'babel-jest' ).createTransformer( babelOptions ); diff --git a/plugins/woocommerce-blocks/webpack.config.js b/plugins/woocommerce-blocks/webpack.config.js index a322cbfb46d..87c7f018542 100644 --- a/plugins/woocommerce-blocks/webpack.config.js +++ b/plugins/woocommerce-blocks/webpack.config.js @@ -113,6 +113,7 @@ const GutenbergBlocksConfig = { presets: [ '@wordpress/babel-preset-default' ], plugins: [ NODE_ENV === 'production' ? require.resolve( 'babel-plugin-transform-react-remove-prop-types' ) : false, + require.resolve( '@babel/plugin-proposal-class-properties' ), ].filter( Boolean ), }, }, @@ -190,6 +191,7 @@ const BlocksFrontendConfig = { require.resolve( '@babel/plugin-transform-react-jsx' ), require.resolve( '@babel/plugin-proposal-async-generator-functions' ), require.resolve( '@babel/plugin-transform-runtime' ), + require.resolve( '@babel/plugin-proposal-class-properties' ), NODE_ENV === 'production' ? require.resolve( 'babel-plugin-transform-react-remove-prop-types' ) : false, ].filter( Boolean ), },