attribute - Aurelia: plantilla de verificación de cordura html?

title html

Question

Hace poco pregunté por qué los elementos de cierre automático no funcionan en el sistema de plantillas de Aurelia; y fue porque los elementos de cierre automático no son válidos html.

Sin embargo, hoy volví a cometer el mismo error (con los widgets en esta ocasión) y me quedé rascándome por qué faltaba el contenido.

Pregunta: ¿Hay una manera de desinfectar el código html de Aurelia en una tarea truculenta?

He intentado usar:

• gulp-htmlhint : no se pudo obtener un error en los elementos auto-cerrados
• gulp-htmllint : no se pudo configurar; con la configuración por defecto se infla con errores.
• gulp-html5-lint : no parece configurable y odia los atributos de aurelia.

Answer 1

Dado que nadie ha respondido todavía; Presento la solución "Mejor que nada (quizás)" ™ .

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''));
});

probado con:

<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>

trago de salida:

[Actualizar]

Dejando esto aquí, ya que es una manera rápida, sucia y sin dependencia de verificar las etiquetas que se cierran automáticamente; Responde la pregunta y puede ser útil.

Answer 2

Podemos resolver el problema de encontrar y reportar elementos de cierre parse5 con parse5 . Tiene una clase SAXParser que debería ser bastante robusta (parse5 cumple con los estándares html5). El analizador genera un evento, al encontrar una etiqueta de inicio, que contiene un valor booleano en cuanto a si la etiqueta encontrada se cierra automáticamente.

var parser = new SAXParser();

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

parser.push(html);

Para hacer uso de esta funcionalidad, he configurado un proyecto que puede usarse para ayudar a sanear html utilizando el enfoque anterior. La herramienta de pelusa desarrollada es capaz de ejecutar una selección de Reglas, recopilar los errores y devolverlos como una Promesa. Esto puede ser reportado al usuario.

Vainilla html / plantillas

template-lint forma la base del conjunto de herramientas. Se compone de la Linter, y un par de reglas básicas:

• Cierre automático: asegúrese de que los elementos no vacíos no se cierran automáticamente
• Analizador: devuelve errores para elementos no cerrados o mal emparejados, como se capturó durante el análisis

gulp-template-lint es el envoltorio de gulp para template-lint y se puede usar así:

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''));
});

Ejemplo

Dado el siguiente html:

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

produce:

Nota: el <rect/> autocerrado no produce un error. Los elementos svg contienen xml y las reglas se pueden diferenciar según el alcance.

Plantillas Aurelia

Inicialmente hice aurelia-template-lint , pero decidí dividir los componentes reutilizables (fuera de aurelia) en template-lint . Mientras que ambos están actualmente separados, tendré la aurelia-template-lint en la template-lint a su debido tiempo. Actualmente tiene algunas reglas de prueba de concepto:

• Cierre automático: asegúrese de que los elementos no vacíos no se cierran automáticamente
• Analizador: devuelve errores para elementos no cerrados o mal emparejados, como se capturó durante el análisis
• Plantilla: asegúrese de que la raíz sea un elemento de plantilla y que no haya más de un elemento de plantilla presente
• RouterView: no permite que el elemento de vista de enrutador contenga elementos de contenido
• Requerir - asegurar que los elementos tienen un atributo ''desde''

Hay un envoltorio que puede ser instalado a través de:

npm install gulp-aurelia-template-lint

y utilizado en una construcción trilla:

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

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

Esto usará el conjunto predeterminado de reglas.

Ejemplo

Una prueba simple con la siguiente plantilla de aurelia mal formada:

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

<br/>
<div></div>

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

</template>
<template>
</template>

salidas:

Mejoras

Hay muchas mejoras necesarias; por ejemplo, hay algunas formas de definir plantillas de vainilla sin la etiqueta <template> . También hay bastantes atributos específicos introducidos por Aurelia que podrían ser saneados.