Merge pull request #21315 from Yoast/igor/improve-tooling

Improve linting and watching JS

.eslintignore

@@ -0,0 +1,6 @@
+artifact/
+apps/
+packages/
+js/dist/
+vendor/
+vendor_prefixed/

.eslintrc

@@ -60,6 +60,7 @@ overrides:
       react/no-unused-prop-types: 1
       react/no-access-state-in-setstate: 1
       react/no-unused-state: 1
+      react/no-deprecated: 0
       react/jsx-no-bind: 1
       react/jsx-no-target-blank: 1
       react/require-default-props: 1

Gruntfile.js

@@ -1,7 +1,8 @@
-/* global require, process */
-var timeGrunt = require( "time-grunt" );
-var path = require( "path" );
-var loadGruntConfig = require( "load-grunt-config" );
+// eslint-disable-next-line import/no-extraneous-dependencies
+const timeGrunt = require( "time-grunt" );
+const path = require( "path" );
+// eslint-disable-next-line import/no-extraneous-dependencies
+const loadGruntConfig = require( "load-grunt-config" );
 const { flattenVersionForFile } = require( "./config/webpack/paths" );
 require( "dotenv" ).config();
 
@@ -12,7 +13,7 @@ module.exports = function( grunt ) {
 	const pluginVersion = pkg.yoast.pluginVersion;
 
 	/* Used to switch between development and release builds.
-	Switches based on the grunt command (which is the third 'argv', after node and grunt,  so index 2).*/
+	 Switches based on the grunt command (which is the third 'argv', after node and grunt,  so index 2).*/
 	const developmentBuild = ! [ "create-rc", "release", "release:js", "artifact", "deploy:trunk", "deploy:master" ].includes( process.argv[ 2 ] );
 
 	// Define project configuration.

config/grunt/custom-tasks/bump-beta-version.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const { flattenVersionForFile } = require( "../../webpack/paths" );
 
 /**
@@ -11,6 +12,7 @@ module.exports = function( grunt ) {
 	grunt.registerTask(
 		"bump-beta-version",
 		"Bumps the versions to the next beta and commits the changes to the current branch.",
+		// eslint-disable-next-line max-statements
 		function() {
 			// Parse the command line options.
 			const pluginVersionArgument = grunt.option( "plugin-version" );
@@ -32,7 +34,7 @@ module.exports = function( grunt ) {
 			 * be used: --no-version-bump.
 			 */
 			const gruntFlags = grunt.option.flags();
-			const noBump = -1 !== gruntFlags.indexOf( '--no-version-bump' );
+			const noBump = -1 !== gruntFlags.indexOf( "--no-version-bump" );
 
 			// Retrieve the current plugin version from package.json.
 			const packageJson = grunt.file.readJSON( "package.json" );
@@ -51,7 +53,7 @@ module.exports = function( grunt ) {
 			let bumpedBetaVersion = parseInt( parsedVersion[ 1 ] || "0", 10 );
 
 			// Set the previousPluginVersion, we need this variable for the GitHub release entry.
-			grunt.config.data.previousPluginVersion = grunt.config.get( 'pluginVersion' );
+			grunt.config.data.previousPluginVersion = grunt.config.get( "pluginVersion" );
 
 			/*
 			If the package.json had a version that contained "-beta", the number following that will be incremented by 1.
@@ -62,7 +64,7 @@ module.exports = function( grunt ) {
 					console.log( "Skipping version bumping, flag --no-version-bump detected." );
 
 					// Adapt the previousPluginVersion because there was no version bump.
-					let previousBetaVersion = bumpedBetaVersion - 1;
+					const previousBetaVersion = bumpedBetaVersion - 1;
 					grunt.config.data.previousPluginVersion = strippedVersion + "-beta" + previousBetaVersion;
 				} else {
 					bumpedBetaVersion += 1;
@@ -92,7 +94,7 @@ module.exports = function( grunt ) {
 				grunt.task.run( "update-version-trunk" );
 
 				// Stage the version files.
-				grunt.config( "gitadd.versionBump.files", { src: grunt.config.get( 'files.versionFiles' ) } );
+				grunt.config( "gitadd.versionBump.files", { src: grunt.config.get( "files.versionFiles" ) } );
 				grunt.task.run( "gitadd:versionBump" );
 
 				grunt.config( "gitcommit.versionBump.options.message", "Update the plugin version to " + grunt.config.data.pluginVersion );

config/grunt/custom-tasks/bump-rc-version.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const { flattenVersionForFile } = require( "../../webpack/paths" );
 
 /**
@@ -11,6 +12,7 @@ module.exports = function( grunt ) {
 	grunt.registerTask(
 		"bump-rc-version",
 		"Bumps the versions to the next RC and commits the changes to the current branch.",
+		// eslint-disable-next-line max-statements
 		function() {
 			// Parse the command line options.
 			const pluginVersionArgument = grunt.option( "plugin-version" );
@@ -32,7 +34,7 @@ module.exports = function( grunt ) {
 			 * be used: --no-version-bump.
 			 */
 			const gruntFlags = grunt.option.flags();
-			const noBump = -1 !== gruntFlags.indexOf( '--no-version-bump' );
+			const noBump = -1 !== gruntFlags.indexOf( "--no-version-bump" );
 
 			// Retrieve the current plugin version from package.json.
 			const packageJson = grunt.file.readJSON( "package.json" );
@@ -51,7 +53,7 @@ module.exports = function( grunt ) {
 			let bumpedRCVersion = parseInt( parsedVersion[ 1 ] || "0", 10 );
 
 			// Set the previousPluginVersion, we need this variable for the GitHub release entry.
-			grunt.config.data.previousPluginVersion = grunt.config.get( 'pluginVersion' );
+			grunt.config.data.previousPluginVersion = grunt.config.get( "pluginVersion" );
 
 			/*
 			If the package.json had a version that contained "-RC", the number following that will be incremented by 1.
@@ -62,7 +64,7 @@ module.exports = function( grunt ) {
 					console.log( "Skipping version bumping, flag --no-version-bump detected." );
 
 					// Adapt the previousPluginVersion because there was no version bump.
-					let previousRCVersion = bumpedRCVersion - 1;
+					const previousRCVersion = bumpedRCVersion - 1;
 					grunt.config.data.previousPluginVersion = strippedVersion + "-RC" + previousRCVersion;
 				} else {
 					bumpedRCVersion += 1;
@@ -92,7 +94,7 @@ module.exports = function( grunt ) {
 				grunt.task.run( "update-version-trunk" );
 
 				// Stage the version files.
-				grunt.config( "gitadd.versionBump.files", { src: grunt.config.get( 'files.versionFiles' ) } );
+				grunt.config( "gitadd.versionBump.files", { src: grunt.config.get( "files.versionFiles" ) } );
 				grunt.task.run( "gitadd:versionBump" );
 
 				grunt.config( "gitcommit.versionBump.options.message", "Update the plugin version to " + grunt.config.data.pluginVersion );

config/grunt/custom-tasks/ensure-pre-release-branch.js

@@ -10,6 +10,7 @@ module.exports = function( grunt ) {
 	grunt.registerTask(
 		"ensure-pre-release-branch",
 		"Ensures that the release or hotfix branch is checked out",
+		// eslint-disable-next-line max-statements
 		function() {
 			const version = grunt.option( "plugin-version" );
 			const type = grunt.option( "type" );

config/grunt/custom-tasks/notify-slack.js

@@ -22,6 +22,6 @@ module.exports = function( grunt ) {
 				}
 				done();
 			} )();
-		},
+		}
 	);
 };

config/grunt/custom-tasks/update-readme.js

@@ -1,6 +1,6 @@
 const getUserInput = require( "../lib/get-user-input" );
 const parseVersion = require( "../lib/parse-version" );
-const _isEmpty = require( "lodash/isEmpty" );
+const { isEmpty } = require( "lodash" );
 
 /**
  * A task to remove old changelog entries and add new ones in readme.txt.
@@ -12,6 +12,7 @@ module.exports = function( grunt ) {
 	grunt.registerTask(
 		"update-readme",
 		"Prompts the user for the changelog entries and updates the readme.txt",
+		// eslint-disable-next-line max-statements
 		function() {
 			const done = this.async();
 
@@ -27,7 +28,7 @@ module.exports = function( grunt ) {
 			);
 
 			// Check if the current version already exists in the changelog.
-			const containsCurrentVersion = ! _isEmpty(
+			const containsCurrentVersion = ! isEmpty(
 				changelogVersions.filter( version => {
 					return (
 						versionNumber.major === version.major &&

config/grunt/lib/wordpress-api.js

@@ -7,7 +7,6 @@ const fetch = require( "node-fetch" );
  *
  * @returns {Promise<object|null>} A promise resolving to the version.
  */
-
 async function getPluginStableVersionFromWordPressApi( pluginSlug ) {
 	pluginSlug = pluginSlug.toLowerCase();
 	const wordpressResponse = await fetch( `https://api.wordpress.org/plugins/info/1.0/${ pluginSlug }.json` );
@@ -25,9 +24,8 @@ module.exports.getPluginStableVersionFromWordPressApi = getPluginStableVersionFr
  *
  * @returns {Promise<object|null>} A promise resolving to the version.
  */
-
 async function getLatestWordpressFromWordPressApi() {
-	const wordpressResponse = await fetch( `http://api.wordpress.org/core/version-check/1.7/` );
+	const wordpressResponse = await fetch( "http://api.wordpress.org/core/version-check/1.7/" );
 	if ( ! wordpressResponse.ok ) {
 		return null;
 	}

config/grunt/task-config/aliases.yaml

@@ -19,24 +19,27 @@
 
 # Compile the JavaScript packages that need it.
 'build:packages':
-  - 'shell:build-packages'
+  - 'shell:yarn:build --ignore @yoast/wordpress-seo'
 
 # Build JavaScript from assets to development
 'build:js':
   - 'clean:build-assets-js'
-  - 'shell:webpack'
+  - 'shell:yarn:build --scope @yoast/wordpress-seo'
 
 # Build CSS for development
 'build:css':
   - 'clean:build-assets-css'
   - 'copy:css-files'
-  - 'shell:postcss-dev'
+  - 'shell:yarn:build:css'
   - 'rtlcss:build'
 
 clean:build-assets:
   - 'clean:build-assets-js'
   - 'clean:build-assets-css'
 
+'eslint':
+  - 'shell:yarn:lint'
+
 # Update all versions except the stable tag
 'update-version-trunk':
   - 'update-version:pluginFile'
@@ -104,15 +107,15 @@ release:
   - 'release:css'
 # Compile the JavaScript packages that need it.
 'release:packages':
-  - 'shell:build-packages-prod'
+  - 'shell:yarn-prod:build --ignore @yoast/wordpress-seo'
 'release:js':
-  - 'shell:webpack-prod'
+  - 'shell:yarn-prod:build --scope @yoast/wordpress-seo'
 
 # Build CSS for production
 'release:css':
   - 'clean:build-assets-css'
   - 'copy:css-files'
-  - 'shell:postcss-release'
+  - 'shell:yarn-prod:build:css'
   - 'rtlcss:build'
 
 'deploy:master':

config/grunt/task-config/shell.js

@@ -20,18 +20,6 @@ module.exports = function( grunt ) {
 	}
 
 	return {
-		webpack: {
-			command: "cross-env NODE_ENV=development yarn run wp-scripts build --config config/webpack/webpack.config.js",
-		},
-
-		"webpack-prod": {
-			command: "yarn run wp-scripts build --config config/webpack/webpack.config.js",
-		},
-
-		"webpack-watch": {
-			command: "yarn run wp-scripts start --config config/webpack/webpack.config.js",
-		},
-
 		"composer-install-production": {
 			command: "composer install --prefer-dist --optimize-autoloader --no-dev --no-scripts",
 		},
@@ -60,26 +48,6 @@ module.exports = function( grunt ) {
 			command: "composer check-branch-cs",
 		},
 
-		"unlink-monorepo": {
-			command: "yarn unlink-monorepo",
-		},
-
-		"get-monorepo-versions": {
-			command: "yarn list --pattern 'yoastseo|yoast-components' --depth=0",
-		},
-
-		// Build all monorepo packages except the plugin JS, following the dependency tree upwards.
-		"build-packages": {
-			command: "cross-env NODE_ENV=development yarn run lerna run build --ignore '@yoast/wordpress-seo'",
-		},
-		"build-packages-prod": {
-			command: "cross-env NODE_ENV=production yarn run lerna run build --ignore '@yoast/wordpress-seo'",
-		},
-		// Deprecated. Use the "build-packages" command instead.
-		"build-ui-library": {
-			command: "yarn workspace @yoast/ui-library run build",
-		},
-
 		"check-for-uncommitted-changes": {
 			// --porcelain gives the output in an easy-to-parse format for scripts.
 			command: "git status --porcelain",
@@ -95,12 +63,11 @@ module.exports = function( grunt ) {
 			},
 		},
 
-		"postcss-dev": {
-			command: "yarn build:css:dev",
+		yarn: {
+			command: ( ...args ) =>  `cross-env NODE_ENV=development yarn ${ args.join( ":" ) }`,
 		},
-		"postcss-release": {
-			command: "yarn build:css",
+		"yarn-prod": {
+			command: ( ...args ) =>  `cross-env NODE_ENV=production yarn ${ args.join( ":" ) }`,
 		},
 	};
-	/* eslint-enable require-jsdoc */
 };

config/grunt/task-config/watch.js

@@ -14,7 +14,7 @@ module.exports = {
 			"<%= files.config %>",
 		],
 		tasks: [
-			"eslint:grunt",
+			"shell:yarn:lint:tooling",
 		],
 	},
 	php: {
@@ -27,22 +27,19 @@ module.exports = {
 	},
 	js: {
 		files: [
-			"<%= files.js %>",
-			"<%= paths.js %>/**/*.js",
-			"packages/ui-library/src/**/*.js",
+			"packages/**/src/**/*.js",
 		],
 		tasks: [
-			"build:packages",
-			"build:js",
-			"eslint:plugin",
+			"shell:yarn:build",
+			"shell:yarn:lint:packages",
 		],
 	},
 	jsTests: {
 		files: [
 			"<%= files.jsTests %>",
 		],
 		tasks: [
-			"eslint:tests",
+			"shell:yarn:lint:packages --scope @yoast/wordpress-seo",
 		],
 	},
 	css: {