Merge pull request #107 from Kit/add-js-coding-standards

Add JS Coding Standards

Author: n7studios

.distignore

@@ -15,6 +15,7 @@
 .env.example
 .env.testing
 .env
+.eslintrc.js
 .gitignore
 .stylelintrc.json
 ACTIONS-FILTERS.md

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+	extends: 'plugin:@wordpress/eslint-plugin/recommended',
+	globals: {
+		WPFormsBuilder: 'readonly',
+	},
+};

.github/workflows/coding-standards.yml

@@ -132,6 +132,11 @@ jobs:
         working-directory: ${{ env.PLUGIN_DIR }}
         run: npm run lint:css
 
+      # Run JS Coding Standards on Plugin.
+      - name: Run WordPress JS Coding Standards
+        working-directory: ${{ env.PLUGIN_DIR }}
+        run: npm run lint:js
+
       # Run PHPStan for static analysis.
       - name: Run PHPStan Static Analysis
         working-directory: ${{ env.PLUGIN_DIR }}

composer.json

@@ -28,13 +28,17 @@
         "phpcbf-tests": "vendor/bin/phpcbf ./tests --standard=phpcs.tests.xml -s -v",
         "lint-css": "npm run lint:css",
         "fix-css": "npm run fix:css",
+        "lint-js": "npm run lint:js",
+        "fix-js": "npm run fix:js",
         "phpstan": "vendor/bin/phpstan analyse --memory-limit=1250M",
         "php-coding-standards": "vendor/bin/phpcs ./ -s -v",
         "fix-php-coding-standards": "vendor/bin/phpcbf ./ -s -v",
         "php-coding-standards-on-tests": "vendor/bin/phpcs ./tests --standard=phpcs.tests.xml -s -v",
         "fix-php-coding-standards-on-tests": "vendor/bin/phpcbf ./tests --standard=phpcs.tests.xml -s -v",
         "css-coding-standards": "npm run lint:css",
         "fix-css-coding-standards": "npm run fix:css",
+        "js-coding-standards": "npm run lint:js",
+        "fix-js-coding-standards": "npm run fix:js",
         "php-static-analysis": "vendor/bin/phpstan analyse --memory-limit=1250M",
         "test": [
             "vendor/bin/codecept build @no_additional_args",

package.json

@@ -3,7 +3,9 @@
   "private": true,
   "scripts": {
     "lint:css": "wp-scripts lint-style --max-warnings=0",
-    "fix:css": "wp-scripts lint-style --fix"
+    "fix:css": "wp-scripts lint-style --fix",
+    "lint:js": "wp-scripts lint-js --max-warnings=0",
+    "fix:js": "wp-scripts lint-js --fix"
   },
   "prettier": "@wordpress/prettier-config",
   "devDependencies": {

resources/backend/js/form-builder.js

@@ -3,7 +3,6 @@
  *
  * @since 1.8.4
  *
- * @package Integrate_ConvertKit_WPForms
  * @author ConvertKit
  */
 
@@ -13,7 +12,6 @@
  * @since 1.8.4
  */
 const IntegrateConvertKitWPFormsOauth = (function () {
-
 	/**
 	 * Public functions and properties.
 	 *
@@ -22,32 +20,26 @@ const IntegrateConvertKitWPFormsOauth = (function () {
 	 * @type {Object}
 	 */
 	const app = {
-
 		/**
 		 * If the OAuth popup is open.
 		 *
 		 * @since 1.8.4
 		 */
-		isOpened : false,
+		isOpened: false,
 
 		/**
 		 * Initialize.
 		 *
 		 * @since 1.8.4
 		 */
-		init: function () {
-
+		init() {
 			// Show the OAuth popup window when the user clicks the "Connect to Kit" button
 			// when editing a WPForms Form at Marketing > Kit.
-			document.addEventListener(
-				'click',
-				function ( e ) {
-					if ( e.target.matches( 'a[data-provider="convertkit"]' ) ) {
-						app.showWindow( e );
-					}
+			document.addEventListener('click', function (e) {
+				if (e.target.matches('a[data-provider="convertkit"]')) {
+					app.showWindow(e);
 				}
-			);
-
+			});
 		},
 
 		/**
@@ -57,29 +49,35 @@ const IntegrateConvertKitWPFormsOauth = (function () {
 		 *
 		 * @param {Event} e Click event.
 		 */
-		showWindow: function ( e ) {
-
+		showWindow(e) {
 			e.preventDefault();
 
-			if ( app.isOpened ) {
+			if (app.isOpened) {
 				return;
 			}
 
 			// Define popup width, height and positioning.
-			const 	width  = 640,
-					height = 750,
-					top    = ( window.screen.height - height ) / 2,
-					left   = ( window.screen.width - width ) / 2;
+			const width = 640,
+				height = 750,
+				top = (window.screen.height - height) / 2,
+				left = (window.screen.width - width) / 2;
 
 			// Open popup.
 			const kitPopup = window.open(
 				e.target.href,
 				'convertkit_popup_window',
-				'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=' + width + ',height=' + height + ',top=' + top + ',left=' + left
+				'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=' +
+					width +
+					',height=' +
+					height +
+					',top=' +
+					top +
+					',left=' +
+					left
 			);
 
 			// Center popup and focus.
-			kitPopup.moveTo( left, top );
+			kitPopup.moveTo(left, top);
 			kitPopup.focus();
 
 			// Mark popup as opened.
@@ -92,27 +90,21 @@ const IntegrateConvertKitWPFormsOauth = (function () {
 			// document changes (e.g. as the user steps through OAuth flow), and doesn't fire when
 			// the window is closed.
 			// See https://stackoverflow.com/questions/9388380/capture-the-close-event-of-popup-window-in-javascript/48240128#48240128.
-			const checkWindowClosed = setInterval(
-				function () {
-					if ( kitPopup.closed ) {
-						clearInterval( checkWindowClosed );
-
-						// Save the form builder and reload, to reflect the changes.
-						WPFormsBuilder.formSave( false ).done(
-							function () {
-								WPFormsBuilder.setCloseConfirmation( false );
-								WPFormsBuilder.showLoadingOverlay();
-								window.location.reload();
-							}
-						);
-
-						app.isOpened = false;
-					}
-				},
-				1000
-			);
-
-		}
+			const checkWindowClosed = setInterval(function () {
+				if (kitPopup.closed) {
+					clearInterval(checkWindowClosed);
+
+					// Save the form builder and reload, to reflect the changes.
+					WPFormsBuilder.formSave(false).done(function () {
+						WPFormsBuilder.setCloseConfirmation(false);
+						WPFormsBuilder.showLoadingOverlay();
+						window.location.reload();
+					});
+
+					app.isOpened = false;
+				}
+			}, 1000);
+		},
 	};
 
 	// Provide access to public functions/properties.