Merge pull request #79 from dingo-d/feature/rewrite-plugin-webpack

Feature/rewrite plugin webpack

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions", "not ie < 11", "android >= 4.2"]
+      }
+    }]
+  ]
+}

.esclintignore

@@ -0,0 +1,2 @@
+/vendors/*
+/node_modules/*

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "parser": "babel-eslint",
+  "globals": {
+    "__VERSION__": true
+  },
+  "env": {
+
+    # You can change environment depending on the project you are working on
+    "browser": true,
+    "node": true,
+    "commonjs": true,
+    "es6": true,
+    "jquery": true
+  },
+  extends: ["eslint:recommended", "wordpress"],
+  rules: {
+    indent: ["error", "tab"],
+    "linebreak-style": ["error", "unix"],
+    quotes: ["error", "single"],
+    semi: ["error", "always"],
+    yoda: ["error", "never"]
+  }
+}

.gitignore

@@ -7,4 +7,7 @@ vendor/
 ._*
 
 # Windows thumbnail cache files
-Thumbs.db
+Thumbs.db
+
+# Build assets
+assets/build/

.stylelintrc

@@ -0,0 +1,116 @@
+{
+  "ignoreFiles": "public/**/*.css",
+  "rules": {
+    "color-hex-case": "upper",
+    "color-hex-length": "long",
+    "color-named": "never",
+    "color-no-invalid-hex": true,
+
+    "font-family-name-quotes": "always-unless-keyword",
+
+    "font-weight-notation": "named-where-possible",
+
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-space-after": "always",
+    "function-comma-space-before": "never",
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "function-parentheses-newline-inside": "never-multi-line",
+    "function-parentheses-space-inside": "never",
+    "function-url-quotes": "always",
+    "function-whitespace-after": "always",
+
+    "number-leading-zero": "always",
+    "number-max-precision": 2,
+    "number-no-trailing-zeros": true,
+    "length-zero-no-unit": true,
+
+    "string-no-newline": true,
+    "string-quotes": "single",
+
+    "value-no-vendor-prefix": true,
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+
+    "property-no-vendor-prefix": true,
+
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "declaration-no-important": true,
+
+    "declaration-block-no-duplicate-properties": true,
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-semicolon-newline-after": "always",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always",
+    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always",
+    "block-opening-brace-newline-before": "always-single-line",
+
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-max-specificity": "0,4,0",
+    "selector-max-id": 0,
+    "selector-max-type": 4,
+    "selector-max-universal": 0,
+    "selector-no-vendor-prefix": true,
+    "selector-pseudo-element-colon-notation": "double",
+
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+
+    "rule-empty-line-before": [
+      "always", {
+        "except": [
+          "first-nested"
+        ],
+        "ignore": [
+          "after-comment"
+        ]
+      }
+    ],
+
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+
+    "at-rule-empty-line-before": [
+      "always", {
+        "except": [
+          "first-nested",
+          "blockless-after-blockless"
+        ],
+        "ignore": [
+          "after-comment"
+        ]
+      }
+    ],
+    "at-rule-no-vendor-prefix": true,
+
+    "comment-empty-line-before": [
+      "always", {
+        "ignore": [
+          "after-comment"
+        ]
+      }
+    ],
+    "comment-whitespace-inside": "always",
+
+    "indentation": 2,
+    "max-line-length": 250,
+    "max-nesting-depth": 5,
+    "no-duplicate-selectors": true,
+    "no-eol-whitespace": true,
+    "no-unknown-animations": true
+  }
+}

README.md

@@ -8,7 +8,7 @@ Theme Sniffer plugin using sniffs. `WordPress-Theme` standard is used from [WPTR
 
 ### Option 1: Easy
 
-* Download [zip file](https://github.com/WPTRT/theme-sniffer/releases/download/0.1.4/ns-theme-check.0.1.4.zip). [Note: Please use this distribution plugin zip. GitHub provided zip will not work.]
+* Download [zip file](https://github.com/WPTRT/theme-sniffer/releases/download/0.1.5/theme-sniffer.0.1.5.zip). [Note: Please use this distribution plugin zip. GitHub provided zip will not work.]
 * Install this as you normally install a WordPress plugin
 * Activate plugin
 
@@ -17,15 +17,38 @@ Theme Sniffer plugin using sniffs. `WordPress-Theme` standard is used from [WPTR
 * Clone this repo under `wp-content/plugins/`
 * Run `composer install`
 * Run `npm install`
+* Run `npm run build`
 * Activate plugin
 
+__Note__: If you build the plugin this way you'll have extra `node_modules/` and `vendor/` folders which are not required for the plugin to run, and just take up space. They are to be used for the development purposes mainly.
+
 ## Using
 
 * Go to `Appearance` -> `Theme Sniffer`
 * Select theme from the dropdown
 * Click `GO`
 
-## Options
+### Options
 
+* `Select Standard` - Select the standard with which you would like to sniff the theme.
 * `Hide Warning` - Enable this to hide warnings.
 * `Raw Output` - Enable this to display sniff report in plaintext format. Suitable to copy/paste report to trac ticket.
+* `PHP version` - Select the minimum PHP Version to check if your theme will work with that version.
+
+## Development
+
+All of the development asset files are located in the `assets/dev/` folder. We have refactored the plugin to use the latest JavaScript development methods. This is why we are using [webpack](https://webpack.js.org/) to bundle our assets.
+
+To start developing, first clone this repo under `wp-content/plugins/`. Then run in the terminal
+
+`npm start`
+
+This will run webpack in the watch mode, so your changes will be saved in the build folder on the fly. After you're done making changes, run
+
+`npm run build`
+
+This will create the `assets/build/` folder with js and css files that the plugin will use.
+
+When developing JavaScript code keep in mind the separation of concerns principle - data access and business logic should be separate from the presentation. If you 'sniff' (no pun intended) through the js code, you'll see that `index.js` holds all event triggers and calls the method for sniff start that is located in the separate `ThemeSniffer` class. Business logic modules should contain plain JavaScript (no framework), which makes it reusable. Of course, there is still room for imporvement, so if you notice something that could be improved we incurage you to make a PR :)
+
+

assets/dev/application.js

@@ -0,0 +1,5 @@
+// Load Styles
+import './styles/admin.css';
+
+// Load Scripts
+import './scripts/index';

assets/dev/scripts/index.js

@@ -0,0 +1,60 @@
+/* global localizationObject */
+
+import $ from 'jquery';
+import ThemeSniffer from './theme-sniffer';
+
+$( function( ) {
+	const options = {
+		sniffReport: $( '.js-sniff-report' ),
+		progressBar: $( '.js-progress-bar' ),
+		snifferInfo: $( '.js-sniffer-info' ),
+		checkNotice: $( '.js-check-done' ),
+		percentageBar: $( '.js-percentage-bar' ),
+		percentageText: $( '.js-percentage-text' ),
+		percentageCount: $( '.js-percentage-count' ),
+		errorNotice: $( '.js-error-notice' ),
+		startNotice: $( '.js-start-notice' ),
+		meterBar: $( '.js-meter-bar' ),
+		reportItem: $( '.js-report-item' ),
+		reportItemHeading: '.js-report-item-heading',
+		reportReportTable: '.js-report-table',
+		reportNoticeType: '.js-report-notice-type',
+		reportItemLine: '.js-report-item-line',
+		reportItemType: '.js-report-item-type',
+		reportItemMessage: '.js-report-item-message',
+		nonce: localizationObject.restNonce
+	};
+
+	const themeSniffer = new ThemeSniffer( options );
+
+	$( '.js-start-check' ).on( 'click', function( ) {
+		const theme = $( 'select[name=themename]' ).val( );
+		const warningHide = $( 'input[name=hide_warning]' ).is( ':checked' );
+		const outputRaw = $( 'input[name=raw_output]' ).is( ':checked' );
+		const minPHPVersion = $( 'select[name=minimum_php_version]' ).val( );
+		const selectedRulesets = [];
+
+		$( 'input[name="selected_ruleset[]"]:checked' ).each( function( ) {
+			selectedRulesets.push( this.value );
+		});
+
+		themeSniffer.enableAjax( );
+		themeSniffer.themeCheckRunPHPCS( this, theme, warningHide, outputRaw, minPHPVersion, selectedRulesets );
+	});
+
+	$( '.js-stop-check' ).on( 'click', function( ) {
+		themeSniffer.preventAjax( '.js-start-check' );
+	});
+
+	$( 'select[name="themename"]' ).on( 'change', function( ) {
+		themeSniffer.preventAjax( '.js-start-check' );
+
+		if ( options.progressBar.hasClass( 'is-shown' ) ) {
+			options.progressBar.removeClass( 'is-shown' );
+		}
+
+		if ( options.sniffReport.length ) {
+			options.sniffReport.empty( );
+		}
+	});
+});