Aurelia:健全检查模板html？

Question

我最近问过为什么自闭合元素在Aurelia的模板系统中不起作用 ; 这是因为自闭元素是无效的html.

然而,今天我再次犯了同样的错误(这次是小部件)并且为什么内容丢失而一直在摸不着头脑.

问题:在gulp任务中是否需要消除Aurelia模板html的消毒？

我尝试过使用:

• gulp-htmlhint:无法让自闭元素出错
• gulp-htmllint:无法配置; 使用默认设置时会出现错误.
• gulp-html5-lint:看起来不可配置,它讨厌aurelia的属性.

Answer 1

我们可以用parse5解决查找和报告自闭元素的问题.它有一个非常强大的SAXParser类(parse5符合html5标准).解析器在找到start-tags时引发一个事件,该事件包含一个关于找到的标签是否自我关闭的布尔值.

var parser = new SAXParser();

parser.on("startTag", (name, attrs, selfClosing)=>{
    if(selfClosing){ 
        //check if name is void, if not report error       
    }
});

parser.push(html);

为了利用这个功能,我设置了一个项目,可以使用上述方法来帮助消毒html.开发的lint工具能够运行一系列规则,收集任何错误并将它们作为Promise返回.然后可以将其报告给用户.

香草Html /模板

template-lint构成工具集的基础.它由Linter和一些基本规则组成:

• SelfClose - 确保非空元素不会自动关闭
• 解析器 - 返回解析期间捕获的未闭合或不匹配元素的错误

gulp-template-lint是template-lint的gulp包装器,可以这样使用:

var gulp = require('gulp');
var linter = require('gulp-template-lint');

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

例

鉴于以下html:

<template>
  <custom-element/> 
  <svg>
    <rect/>
  </svg>
  <div>
    <div>
    </div>
</template>

生产:

注意:自闭合<rect/>不会产生错误.svg元素包含xml,规则可以根据范围区分.

Aurelia模板

我最初制作了 aurelia-template-lint,但决定将可重用(aurelia之外)组件拆分为template-lint.虽然两者目前是分开的,但我会在适当的时候对template-lint扩展aurelia-template-lint.目前有一些概念验证规则:

• SelfClose - 确保非空元素不会自动关闭
• 解析器 - 返回解析期间捕获的未闭合或不匹配元素的错误
• 模板 - 确保root是模板元素,并且不超过一个模板元素
• RouterView - 不允许router-view元素包含内容元素
• 要求 - 确保要求元素具有'from'属性

有一个gulp包装器可以通过以下方式安装:

npm install gulp-aurelia-template-lint

并用于gulp构建:

var linter = require('gulp-aurelia-template-lint');

gulp.task('lint-template-html', function () {
    return gulp.src('**/*.html')
        .pipe(linter())
        .pipe(gulp.dest('output'));
});

这将使用默认的规则集.

例

使用以下格式错误的aurelia模板进行简单测试:

<link/>
<template bindable="items">
<require from="foo"/>
<require frm="foo"/>

<br/>
<div></div>

<router-view>
  <div/>
</router-view>

</template>
<template>
</template>

输出:

改进

需要进行大量改进; 例如,有几种方法可以定义没有<template>标签的vanilla模板.Aurelia还引入了一些可以消毒的特定属性.