Aurelia: sanity check template html?

Question

I recently asked why self-closing elements do not work in Aurelia's templating system; and it was because self-closing elements are invalid html.

Yet, today I again made the same mistake (with widgets this time) and was left scratching my head why content was missing.

Question: Is there a away to sanitise Aurelia template html in a gulp task?

I've tried using:

• gulp-htmlhint: couldn't get it to error on self-closed elements
• gulp-htmllint: couldn't configure it; with default settings it blows up with errors.
• gulp-html5-lint: doesn't look configurable and it hates aurelia's attributes.

Answer 1

Given no one has answered yet; I present the "Better than nothing (maybe)"™ solution.

var gulp = require('gulp');
var gutil = require('gulp-util');

var voidTags = [
    'area', 'base', 'br', 'col', 'embed', 'hr', 
    'img', 'input', 'keygen', 'link', 'meta', 
    'param', 'source', 'track', 'wbr'];

var checkSelfClose = function () {
  function sanitize(file, cb) { 

    var dirty = String(file.contents);

    var matches = dirty.match(/(?:\<[\/\\\-\"\'!() a-z=.]+\/\>)/g);

    var customTags = [];

    if(matches && matches.length > 0)
    {       
        matches.forEach((match)=>{
            var tag = match.match(/[a-z\-]+/)[0];

            if(voidTags.indexOf(tag) < 0)
                customTags.push(tag);   
        });                   
    };

    if(customTags.length > 0)
        gutil.log('WARNING', 'found ' + customTags.length + " non-void self-closed tags in", 
        file.path.substring(file.cwd.length, file.path.Length),
        "tags:", customTags
        );

    cb(null, file);
  }
  return require('event-stream').map(sanitize);
}

gulp.task('build-html', function () {
    return gulp.src('source/**/*.html')
    .pipe(checkSelfClose())
    .pipe(gulp.dest('output'));
});

tested with:

<template bindable="items">
  <require from="./menu-bar.css" />

  <custom-element/>  
  <custom-element click.delegate="subitem.execute()" repeat.for="item of items" /> 
  <custom-element-moo></custom-element-moo>

  <br>
  <br/>

  <div id="blahblah"/>  

  <button class="dropbtn"/>
</template>

gulp output:

[Update]

Leaving this here as it is a quick, dirty and dependency free way to check for self-closed tags; does answer the question and may be useful.