add HTML validation

Author: lazabogdan

README.md

@@ -95,6 +95,7 @@ cssDest: dist/assets/css
 jsSrc: src/js/**/**.{js,vue}
 jsDest: dist/assets/js
 htmlDest: dist/[path][name].html
+htmllint: true,
 laravelMixOptions:
   processCssUrls: false
 browserSync:
@@ -108,4 +109,24 @@ browserSync:
   ghostMode: false
   logLevel: silent
   proxy: null
-```
+```
+
+## HTML Validation
+
+> Java Development Kit > v8 required.
+
+```bash
+java -version
+```
+
+> Start the vnu-jar server on localhost port 8888.
+
+```bash
+java -cp node_modules/vnu-jar/build/dist/vnu.jar nu.validator.servlet.Main 8888
+```
+
+> Now you can build/watch HTML with W3C validation.
+
+```bash
+npm run development -- --env.run html
+```

htmllint/chunkify.js

@@ -0,0 +1,16 @@
+'use strict';
+
+module.exports = function( files, maxChars ) {
+  var filesChunk = [];
+  var chunk = '';
+
+  for ( var f = 0, len = files.length; f < len; f++ ) {
+    if ( chunk.length + ( files[ f ].length + 1 ) > maxChars ) {
+      filesChunk.push( chunk );
+      chunk = '';
+    }
+    chunk += '"' + files[ f ] + '" ';
+  }
+  filesChunk.push( chunk );
+  return filesChunk;
+};

htmllint/htmllint.js

@@ -0,0 +1,140 @@
+'use strict';
+
+// replace left/right quotation marks with normal quotation marks
+function normalizeQuotationMarks( str ) {
+  if ( str ) {
+    str = str.replace( /[\u201c\u201d]/g, '"' );
+  }
+  return str;
+}
+
+function lint( config, files, done ) {
+  const path = require( 'path' )
+  const exec = require( 'child_process' ).exec
+  var chunkify = require( './chunkify' )
+  const async = require( 'async' )
+  const javadetect = require( './javadetect' )
+  const jar = require( 'vnu-jar' )
+
+  const maxChars = 5000
+
+  // increase child process buffer to accommodate large amounts of
+  // validation output. ( default is a paltry 200k. )
+  // http://nodejs.org/api/child_process.html#child_process_child_process_exec_command_options_callback
+  const maxBuffer = 20000 * 1024
+
+  // parse and, if needed, normalize error messages from HttpClient to java -jar format
+  // java -jar: one object containing messages for all files
+  //   { messages: [{ message, type, url, ... }, ...] }
+  // HttpClient: one object per file, separated by a newline, each object containing messages for only that file
+  //   { messages: [{ message, type, ...}, ...], url }\n{ ... }
+  function parseErrorMessages( errors ) {
+    var parsed = JSON.parse( config.server ? '[' + errors.trim().replace( /\n/g, ',' ) + ']' : errors );
+    var messages = parsed.messages;
+    if ( config.server ) {
+      // extract "messages" property from each object and set the url of each message
+      // this results in an array of arrays instead of array of objects, which is then flattened by concatenation
+      messages = Array.prototype.concat.apply( [], parsed.map( function( file ) {
+        return file.messages.map( function( message ) {
+          message.url = file.url;
+          return message;
+        } );
+      } ) );
+    }
+    return messages;
+  }
+
+  // determine proper jarfile command and arguments
+  function cmd( java, chunk ) {
+    var args = '';
+    if ( config.server ) {
+      if ( config.server.host ) {
+        args += ' -Dnu.validator.client.host=' + config.server.host;
+      }
+      if ( config.server.port ) {
+        args += ' -Dnu.validator.client.port=' + config.server.port;
+      }
+      args += ' -Dnu.validator.client.out=json nu.validator.client.HttpClient';
+    } else {
+      args += ' --format json';
+    }
+    if ( config.noLangDetect ) {
+      args += ' --no-langdetect';
+    }
+    var invoke = ( config.server ? '-cp' : '-jar' ) + ' "' + jar + '"' + args;
+    // command to call java, increasing the default stack size for ia32 versions of the JRE and using the default setting for x64 versions
+    return 'java ' + ( java.arch === 'ia32' ? '-Xss512k ' : '' ) + invoke + ' ' + chunk;
+  }
+
+  javadetect( function( err, java ) {
+    if ( err ) {
+      throw err;
+    }
+
+    var javaVersion = java.version.split( '.' ).map( Number );
+    if ( ( javaVersion[ 0 ] !== 1 && javaVersion[ 0 ] < 8 ) || ( javaVersion[ 0 ] === 1 && javaVersion[ 1 ] < 8 ) ) {
+      throw new Error( '\nUnsupported Java version used: ' + java.version + '. Java 8 environment or up is required!' );
+    }
+
+    files = files.map((file) => path.relative('.', file))
+    async.mapSeries( chunkify( files, maxChars ), function( chunk, cb ) {
+
+      exec( cmd( java, chunk, config.noLangDetect ), {
+        'maxBuffer': maxBuffer
+      }, function( error, stdout, stderr ) {
+        if ( error && ( error.code !== 1 || error.killed || error.signal ) ) {
+          cb( error );
+          return;
+        }
+
+        stderr = config.server ? stdout : stderr;
+        var result = [];
+        if ( stderr ) {
+          try {
+            result = parseErrorMessages( stderr );
+          } catch ( err ) {
+            throw new Error( err + '\nInvalid input follows below:\n\n' + stderr );
+          }
+          result.forEach( function( message ) {
+            if ( message.url ) {
+              message.file = path.relative( '.', message.url.replace( path.sep !== '\\' ? 'file:' : 'file:/', '' ) );
+            }
+            if ( config.absoluteFilePathsForReporter ) {
+              message.file = path.resolve( message.file );
+            }
+          } );
+          if ( config.ignore ) {
+            var ignore = config.ignore instanceof Array ? config.ignore : [ config.ignore ];
+            result = result.filter( function( message ) {
+              // iterate over the ignore rules and test the message agains each rule.
+              // A match should return false, which causes every(  ) to return false and the message to be filtered out.
+              return ignore.every( function( currentValue ) {
+                if ( currentValue instanceof RegExp ) {
+                  return !currentValue.test( message.message );
+                }
+                return normalizeQuotationMarks( currentValue ) !== normalizeQuotationMarks( message.message );
+              } );
+            } );
+          }
+        }
+        cb( null, result );
+      } );
+    }, function( error, results ) {
+      if ( error ) {
+        done( error );
+        return;
+      }
+
+      var result = [];
+      for ( var r = 0, len = results.length; r < len; r++ ) {
+        result = result.concat( results[ r ] );
+      }
+
+      done( null, result.filter( function( item ) {
+        return config.errorLevels.indexOf( item.type ) !== -1;
+      } ) );
+    } );
+  } );
+}
+
+module.exports = lint

htmllint/javadetect.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var exec = require( 'child_process' ).exec;
+
+module.exports = function( callback ) {
+  exec( 'java -version', function( error, stdout, stderr ) {
+    if ( error ) {
+      return callback( error );
+    }
+
+    callback( null, {
+      version: stderr.match( /(?:java|openjdk) version "(.*)"/ )[ 1 ],
+      arch: stderr.match( /64-Bit/ ) ? 'x64' : 'ia32'
+    } );
+  } );
+};

htmllint/reporter.js

@@ -0,0 +1,40 @@
+module.exports = function( results ) {
+  var path = require( 'path' ),
+    files = {},
+    out = [];
+
+  results.forEach( function( result ) {
+    // Register the file
+    result.file = path.normalize( result.file );
+    if ( !files[ result.file ] ) {
+      files[ result.file ] = []
+    }
+
+    // Add the error
+    files[ result.file ].push( {
+      severity: result.type,
+      line: result.lastLine,
+      column: result.lastColumn,
+      message: result.message,
+      source: 'htmllint.Validation' + ( result.type === 'error' ? 'Error' : 'Warning' )
+    })
+
+  })
+
+  for ( var fileName in files ) {
+    if ( files.hasOwnProperty( fileName ) ) {
+      out.push( fileName + ' has ' + files[ fileName ].length + ' Errors\n' );
+      for ( var i = 0, len = files[ fileName ].length; i < len; i++ ) {
+        var issue = files[ fileName ][ i ];
+        out.push(
+          ( i + 1 ) + ' ' +
+          'line ' + issue.line + ', ' +
+          'char ' + issue.column + ': ' +
+          issue.message
+       );
+      }
+    }
+  }
+
+  return out.join( '\n' )
+}

htmllint/webpack-html-validate-loader.js

@@ -0,0 +1,53 @@
+const htmllint = require( './htmllint' )
+const reporter = require('./reporter')
+const fs = require('fs')
+const path = require('path')
+const assign = require('object-assign')
+const Cache = require('fs-simple-cache')
+const cache = new Cache({
+  cacheDirectory: path.resolve('.htmllint')
+})
+
+module.exports = function WebpackHTMLValidate(source, map, meta) {
+  const options = assign({
+    noLangDetect: false,
+    server: {
+      host: '127.0.0.1',
+      port: 8888,
+    },
+    errorLevels: ['error'],
+    absoluteFilePathsForReporter: false,
+  }, this.options)
+
+  const callback = this.async()
+
+  if (content = cache.get(source, false)) {
+    if (content === source) {
+      if (output = cache.get(source).output) {
+        const error = new Error(output)
+        this.emitError(error)
+        // return callback(error, source, map, meta)
+        // not returning a callback error to make use of caching
+        return callback(null, source, map, meta)
+      }
+    }
+  }
+
+  cache.put(source, source, false)
+
+  htmllint(options, [cache.getPath(source, false)], (error, result) => {
+    if (error) {
+      error = new Error(error)
+      this.emitError(error)
+    }
+    else if (result.length) {
+      const output = reporter(result)
+      cache.put(source, { output })
+      error = new Error(output)
+      this.emitError(error)
+    }
+    // callback(error, source, map, meta)
+    // not returning a callback error to make use of caching
+    callback(null, source, map, meta)
+  })
+}

htmllint/webpack-html-validate-plugin.js

@@ -0,0 +1,49 @@
+const htmllint = require( './htmllint' )
+const reporter = require('./reporter')
+
+class WebpackHTMLValidate {
+  constructor (options = {}) {
+    this.options = {
+      test: /\.html$/,
+      noLangDetect: false,
+      server: {
+        host: '127.0.0.1',
+        port: 8888,
+      },
+      errorLevels: ['error'],
+      absoluteFilePathsForReporter: false,
+    }
+
+    this.startTime = Date.now();
+    this.prevTimestamps = {};
+  }
+  apply (compiler) {
+    compiler.plugin('emit', (compilation, callback) => {
+
+      var changedFiles = Object.keys(compilation.fileTimestamps).filter(function(watchfile) {
+        return (this.prevTimestamps[watchfile] || this.startTime) < (compilation.fileTimestamps[watchfile] || Infinity);
+      }.bind(this));
+
+      this.prevTimestamps = compilation.fileTimestamps;
+
+      if (changedFiles.length) {
+        for (const filename in compilation.assets) {
+          if (this.options.test.test(filename)) {
+            htmllint(this.options, [filename], (error, result) => {
+              if (error) {
+                throw new Error(error)
+              }
+              if (result.length) {
+                compilation.errors.push(new Error(reporter(result)))
+              }
+            })
+          }
+        }
+      }
+
+      callback()
+    })
+  }
+}
+
+module.exports = WebpackHTMLValidate