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

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() {
+	static propTypes = {
-		super( ...arguments );
+		/**
-		this.state = {
+		 * The attributes for this block
-			changedAttributes: {},
+		 */
-			isEditing: false,
+		attributes: PropTypes.object.isRequired,
-		};
+		/**
-		this.startEditing = this.startEditing.bind( this );
+		 * The register block name.
-		this.stopEditing = this.stopEditing.bind( this );
+		 */
-		this.setChangedAttributes = this.setChangedAttributes.bind( this );
+		name: PropTypes.string.isRequired,
-		this.save = this.save.bind( this );
+		/**
+		 * 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 );

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",

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",

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 );

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 ),
 					},