Merge pull request #1251 from wordpress-mobile/issue/816_enforce_pret…

…tier_on_ci

Enforce Prettier (add CI and pre-commit hook)

babel.config.js

@@ -1,25 +1,22 @@
+/** @format */
+
 module.exports = function( api ) {
 	api.cache( true );
 	return {
-		presets: [
-			'module:metro-react-native-babel-preset',
-		],
+		presets: [ 'module:metro-react-native-babel-preset' ],
 		plugins: [
 			'@babel/plugin-proposal-async-generator-functions',
 			'@babel/plugin-transform-runtime',
 			[
 				'react-native-platform-specific-extensions',
 				{
-					extensions: [
-						'css',
-						'scss',
-						'sass',
-					],
+					extensions: [ 'css', 'scss', 'sass' ],
 				},
 			],
 		],
 		overrides: [
-			{ // Transforms JSX into JS function calls and use `createElement` instead of the default `React.createElement`
+			{
+				// Transforms JSX into JS function calls and use `createElement` instead of the default `React.createElement`
 				plugins: [
 					[
 						'@babel/plugin-transform-react-jsx',
@@ -31,7 +28,8 @@ module.exports = function( api ) {
 				],
 				exclude: /node_modules\/react-native/,
 			},
-			{ // Auto-add `import { createElement } from '@wordpress/element';` when JSX is found
+			{
+				// Auto-add `import { createElement } from '@wordpress/element';` when JSX is found
 				plugins: [
 					[
 						'./gutenberg/packages/babel-plugin-import-jsx-pragma',
@@ -48,9 +46,7 @@ module.exports = function( api ) {
 		],
 		env: {
 			development: {
-				plugins: [
-					'@babel/transform-react-jsx-source',
-				],
+				plugins: [ '@babel/transform-react-jsx-source' ],
 			},
 		},
 	};

bin/ci-checks-js.sh

@@ -16,6 +16,7 @@ fi
 if [ "$CHECK_CORRECTNESS" = true ] ; then
   yarn flow || pFail
   yarn lint || pFail
+  yarn prettier:check || pFail
 fi
 
 if [ "$GUTENBERG_AS_PARENT" = true ] ; then

jest.config.js

@@ -33,24 +33,20 @@ module.exports = {
 		'/__device-tests__/',
 	],
 	testURL: 'http://localhost/',
-	modulePathIgnorePatterns: [ '<rootDir>/gutenberg/gutenberg-mobile', 'react-native-aztec-old-submodule' ],
+	modulePathIgnorePatterns: [
+		'<rootDir>/gutenberg/gutenberg-mobile',
+		'react-native-aztec-old-submodule',
+	],
 	moduleDirectories: [ 'node_modules', 'symlinked-packages' ],
 	moduleNameMapper: {
 		// Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
 		'\\.(scss)$': '<rootDir>/gutenberg/test/native/__mocks__/styleMock.js',
 	},
 	haste: {
 		defaultPlatform: rnPlatform,
-		platforms: [
-			'android',
-			'ios',
-			'native',
-		],
+		platforms: [ 'android', 'ios', 'native' ],
 		hasteImplModulePath: '<rootDir>/node_modules/react-native/jest/hasteImpl.js',
-		providesModuleNodeModules: [
-			'react-native',
-			'react-native-svg',
-		],
+		providesModuleNodeModules: [ 'react-native', 'react-native-svg' ],
 	},
 	transformIgnorePatterns: [
 		// This is required for now to have jest transform some of our modules
@@ -59,8 +55,6 @@ module.exports = {
 		// https://github.com/facebook/react-native/blob/master/jest-preset.json#L20
 		'node_modules/(?!(simple-html-tokenizer|(jest-)?react-native|react-clone-referenced-element))',
 	],
-	snapshotSerializers: [
-		'enzyme-to-json/serializer',
-	],
+	snapshotSerializers: [ 'enzyme-to-json/serializer' ],
 	reporters: [ 'default', 'jest-junit' ],
 };

libdefs.js

@@ -8,5 +8,5 @@ declare module 'react-native' {
 }
 
 declare module 'react-native/lib/TextInputState' {
-    declare module.exports: any;
+	declare module.exports: any;
 }

package.json

@@ -33,6 +33,7 @@
     "eslint-plugin-react-native": "^3.6.0",
     "eslint-plugin-wordpress": "git://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress.git#552af1454d175e15f6d25aadc2ccde30a1922d4f",
     "flow-bin": "0.92.0",
+    "husky": "^3.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.1.0",
     "jest-junit": "^6.3.0",
@@ -50,6 +51,11 @@
     "sprintf-js": "^1.1.1",
     "wd": "^1.11.1"
   },
+  "husky": {
+      "hooks": {
+          "pre-commit": "yarn prettier:check"
+      }
+  },
   "scripts": {
     "start": "react-native start",
     "start:inside-gb": "react-native start --config `pwd`/rn-cli-inside-gb.config.js",
@@ -101,6 +107,7 @@
     "test:e2e:install-app:ios": "yarn test:e2e:build-app:ios",
     "flow": "flow",
     "prettier": "prettier-eslint --write $npm_package_config_jsfiles $npm_package_config_scssfiles",
+    "prettier:check": "prettier-eslint --list-different $npm_package_config_jsfiles $npm_package_config_scssfiles || { echo '\nERROR: `yarn prettier:check` found a formatting problem.\nNo files have been changed. Try running `yarn prettier` to fix any formatting issues.\n'; exit 1; }",
     "clean": "yarn clean:aztec; yarn cache clean; yarn clean:haste; yarn clean:jest; yarn clean:metro; yarn clean:react; yarn clean:watchman; yarn clean:node;",
     "clean:runtime": "yarn clean:haste; yarn clean:react; yarn clean:metro; yarn clean:jest; yarn clean:watchman; yarn clean:babel-cache",
     "clean:aztec": "cd react-native-aztec && yarn clean && cd example && yarn clean",

rn-cli-inside-gb.config.js

@@ -3,7 +3,9 @@ const path = require( 'path' );
 const blacklist = require( 'metro-config/src/defaults/blacklist' );
 // Blacklist the nested GB filetree so modules are not resolved in duplicates,
 //  both in the nested directory and the parent directory.
-const blacklistElements = blacklist( [ new RegExp( path.basename( __dirname ) + '/gutenberg/.*' ) ] );
+const blacklistElements = blacklist( [
+	new RegExp( path.basename( __dirname ) + '/gutenberg/.*' ),
+] );
 
 const enm = require( './extra-node-modules.config.js' );
 
@@ -19,7 +21,9 @@ const mapper = function( accu, v ) {
 };
 
 const wppackages = wppackagenames.reduce( mapper, {} );
-const alternateRoots = [ path.resolve( __dirname, '../node_modules' ) ].concat( Object.values( wppackages ) );
+const alternateRoots = [ path.resolve( __dirname, '../node_modules' ) ].concat(
+	Object.values( wppackages )
+);
 
 module.exports = {
 	extraNodeModules: Object.assign( enm, wppackages ),

sass-transformer-inside-gb.js

@@ -62,9 +62,7 @@ if ( reactNativeMinorVersion >= 56 ) {
 }
 
 // TODO: need to find a way to pass the include paths and the default asset files via some config
-const autoImportIncludePaths = [
-	path.join( path.dirname( __filename ), '../assets/stylesheets' ),
-];
+const autoImportIncludePaths = [ path.join( path.dirname( __filename ), '../assets/stylesheets' ) ];
 const autoImportAssets = [
 	'_colors.scss',
 	'_breakpoints.scss',

src/_colors.scss

@@ -94,22 +94,22 @@ $blue-500: #016087;
 
 // Grays
 $gray: #87a6bc;
-$gray-light: lighten( $gray, 33% ); //#f3f6f8
-$gray-dark: darken( $gray, 38% ); //#2e4453
-$gray-900: #1A1A1A;
+$gray-light: lighten($gray, 33%); //#f3f6f8
+$gray-dark: darken($gray, 38%); //#2e4453
+$gray-900: #1a1a1a;
 
 // $gray-text: ideal for standard, non placeholder text
 // $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
 $gray-text: $gray-dark;
-$gray-text-min: darken( $gray, 18% ); //#537994
+$gray-text-min: darken($gray, 18%); //#537994
 
 // Shades of gray
-$gray-lighten-10: lighten( $gray, 10% ); // #a8bece
-$gray-lighten-20: lighten( $gray, 20% ); // #c8d7e1
-$gray-lighten-30: lighten( $gray, 30% ); // #e9eff3
-$gray-darken-10: darken( $gray, 10% ); // #668eaa
-$gray-darken-20: darken( $gray, 20% ); // #4f748e
-$gray-darken-30: darken( $gray, 30% ); // #3d596d
+$gray-lighten-10: lighten($gray, 10%); // #a8bece
+$gray-lighten-20: lighten($gray, 20%); // #c8d7e1
+$gray-lighten-30: lighten($gray, 30%); // #e9eff3
+$gray-darken-10: darken($gray, 10%); // #668eaa
+$gray-darken-20: darken($gray, 20%); // #4f748e
+$gray-darken-30: darken($gray, 30%); // #3d596d
 
 //
 // See wordpress.com/design-handbook/colors/ for more info.
@@ -126,4 +126,4 @@ $alert-purple: #855da6;
 
 // Custom
 $toolbar-button: #7b9ab1;
-$toolbar-button-disabled: $gray-lighten-30;
+$toolbar-button-disabled: $gray-lighten-30;

src/index.js

@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ *
+ * @format
+ */
+
 /**
  * External dependencies
  */

src/index.test.js

@@ -1,4 +1,3 @@
-
 /** @format */
 
 /**
@@ -45,32 +44,32 @@ describe( 'RootComponent', () => {
 	it( 'Code block is a TextInput', () => {
 		const app = renderer.create( <RootComponent /> );
 
-		app.root.findAllByType( BlockListBlock )
-			.forEach( ( blockHolder ) => {
-				if ( 'core/code' === blockHolder.props.name ) {
-					// TODO: hardcoded indices are ugly and error prone. Can we do better here?
-					const blockHolderContainer = blockHolder.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ];
-					const contentComponent = blockHolderContainer.children[ 0 ];
-					const inputComponent =
-						contentComponent.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ]
-							.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ];
+		app.root.findAllByType( BlockListBlock ).forEach( ( blockHolder ) => {
+			if ( 'core/code' === blockHolder.props.name ) {
+				// TODO: hardcoded indices are ugly and error prone. Can we do better here?
+				const blockHolderContainer =
+					blockHolder.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ];
+				const contentComponent = blockHolderContainer.children[ 0 ];
+				const inputComponent =
+					contentComponent.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ]
+						.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ]
+						.children[ 0 ];
 
-					expect( inputComponent.type ).toBe( 'TextInput' );
-				}
-			} );
+				expect( inputComponent.type ).toBe( 'TextInput' );
+			}
+		} );
 
 		app.unmount();
 	} );
 
 	it( 'Heading block test', () => {
 		const app = renderer.create( <RootComponent /> );
-		app.root.findAllByType( BlockListBlock )
-			.forEach( ( blockHolder ) => {
-				if ( 'core/heading' === blockHolder.props.name ) {
-					const aztec = blockHolder.findByType( 'RCTAztecView' );
-					expect( aztec.props.text.text ).toBe( '<h2>What is Gutenberg?</h2>' );
-				}
-			} );
+		app.root.findAllByType( BlockListBlock ).forEach( ( blockHolder ) => {
+			if ( 'core/heading' === blockHolder.props.name ) {
+				const aztec = blockHolder.findByType( 'RCTAztecView' );
+				expect( aztec.props.text.text ).toBe( '<h2>What is Gutenberg?</h2>' );
+			}
+		} );
 		app.unmount();
 	} );
 } );

src/jsdom-patches.js

@@ -2,18 +2,18 @@
  * @format */
 
 /**
-* This file is used in src/globals.js to patch jsdom-jscore.
-*
-* Node.prototype.contains is implemented as a simple recursive function.
-*
-* Node.prototype.insertBefore is re-implemented (code copied) with the
-* WrongDocumentError exception disabled.
-*
-* Element.prototype.matches is aliased to Element.prototype.matchesSelector.
-*
-* Getters are defined on the Node.prototype for the following properties:
-* parentElement, previousElementSibling, nextElementSibling.
-*/
+ * This file is used in src/globals.js to patch jsdom-jscore.
+ *
+ * Node.prototype.contains is implemented as a simple recursive function.
+ *
+ * Node.prototype.insertBefore is re-implemented (code copied) with the
+ * WrongDocumentError exception disabled.
+ *
+ * Element.prototype.matches is aliased to Element.prototype.matchesSelector.
+ *
+ * Getters are defined on the Node.prototype for the following properties:
+ * parentElement, previousElementSibling, nextElementSibling.
+ */
 
 /**
  * External dependencies
@@ -28,17 +28,10 @@ const { core } = jsdomLevel1Core.dom.level1;
 const { Node, Element, CharacterData } = core;
 
 // Exception codes
-const {
-	NO_MODIFICATION_ALLOWED_ERR,
-	HIERARCHY_REQUEST_ERR,
-	NOT_FOUND_ERR,
-} = core;
+const { NO_MODIFICATION_ALLOWED_ERR, HIERARCHY_REQUEST_ERR, NOT_FOUND_ERR } = core;
 
 // Node types
-const {
-	ATTRIBUTE_NODE,
-	DOCUMENT_FRAGMENT_NODE,
-} = Node;
+const { ATTRIBUTE_NODE, DOCUMENT_FRAGMENT_NODE } = Node;
 
 /**
  * Simple recursive implementation of Node.contains method
@@ -51,10 +44,12 @@ const {
  * expectation that this is implemented (as it is in the browser environment).
  */
 Node.prototype.contains = function( otherNode ) {
-	return this === otherNode ||
+	return (
+		this === otherNode ||
 		Array.prototype.some.call( this._childNodes, ( childNode ) => {
 			return childNode.contains( otherNode );
-		} );
+		} )
+	);
 };
 
 /**
@@ -71,7 +66,10 @@ Node.prototype.contains = function( otherNode ) {
  */
 Node.prototype.insertBefore = function( /* Node */ newChild, /* Node*/ refChild ) {
 	if ( this._readonly === true ) {
-		throw new core.DOMException( NO_MODIFICATION_ALLOWED_ERR, 'Attempting to modify a read-only node' );
+		throw new core.DOMException(
+			NO_MODIFICATION_ALLOWED_ERR,
+			'Attempting to modify a read-only node'
+		);
 	}
 
 	// Adopt unowned children, for weird nodes like DocumentType