Aurelia: vérification de la santé modèle html?

j'ai récemment demandé pourquoi les éléments d'auto-fermeture ne fonctionnent pas dans le système de templating D'Aurelia; et c'était parce que les éléments d'auto-fermeture sont invalides html.

pourtant, aujourd'hui j'ai encore fait la même erreur (avec des widgets cette fois-ci) et on m'a laissé me gratter la tête pourquoi le contenu manquait.

Question: Est-il loin d'aseptiser Aurelia modèle html dans une gorgée de la tâche?

j'ai essayé d'utiliser:

  • gulp-htmlhint : ne pouvais pas le faire d'erreur sur l'auto-fermé éléments
  • gulp-htmllint : impossible de le configurer; avec les paramètres par défaut il explose avec des erreurs.
  • gulp-html5-lint : n'a pas l'air configurable et il déteste les attributs d'aurelia.
27
demandé sur Community 2016-05-19 15:17:59
la source

2 ответов

Nous pouvons résoudre le problème de trouver et de rapports d'auto-éléments de fermeture avec parse5 . Il a une classe de SAXParser qui devrait être assez robuste (parse5 conforme aux normes html5). L'analyseur soulève un événement, en trouvant un start-tags, qui contient un booléen quant à savoir si le moi de balise trouvé se ferme.

var parser = new SAXParser();

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

parser.push(html);

pour faire usage de cette fonctionnalité, j'ai mis en place un projet qui peut être utilisé afin d'aider à assainir html en utilisant le approche ci-dessus. L'outil développé lint est capable d'exécuter une sélection de règles, de collecter toutes les erreurs et de les retourner comme une promesse. Cela peut ensuite être transmises à l'utilisateur.

Vanilla Html /Templates

modèle-peluches forme la base de l'outil. Il comprend le Linter, et quelques règles de base:

  • SelfClose - s'assurer que les éléments non vides ne se ferment pas automatiquement
  • Parser - renvoie les erreurs pour les éléments non codés ou mal appariés, telles que saisies lors de l'analyse

gulp-modèle-lint est le gulp wrapper pour le modèle-peluches et peut être utilisé comme:

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

exemple

étant donné le code html suivant:

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

produit:

enter image description here

Note: le <rect/> Auto-fermé ne produit pas d'erreur. svg elements contient xml et les règles peuvent être différenciées en fonction de la portée.

Aurelia Templates

j'ai d'abord fait aurelia-template-lint , mais j'ai décidé de séparer les composants réutilisables (à l'extérieur d'aurelia) en template-lint . Alors que les deux sont actuellement séparé, je vais avoir l' aurelia-modèle-lint étendre modèle-peluches en temps voulu. Dispose actuellement de quelques règles de validation de principe:

  • SelfClose - s'assurer que les éléments non vides ne se ferment pas automatiquement
  • Parser - renvoie les erreurs pour les éléments non codés ou mal appariés, telles que saisies lors de l'analyse
  • Modèle - s'assurer que root est un élément de modèle, et pas plus d'un élément de modèle présente
  • RouterView - ne permettent pas de routeur-elément de vue de contenir des éléments de contenu
  • Require - ensure requirements have a 'from" attribut

il y a une enveloppe gulp qui peut être installée via:

npm install gulp-aurelia-template-lint

et utilisé dans une construction gulfp:

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

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

cela utilisera l'ensemble de règles par défaut.

exemple

un simple test avec la suite de mauvais formé aurelia modèle:

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

<br/>
<div></div>

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

</template>
<template>
</template>

sorties:

enter image description here

améliorations

il y a beaucoup d'améliorations nécessaires; par exemple il y a quelques façons de définir les gabarits vanille sans la balise <template> . Il y a aussi un certain nombre d'attributs spécifiques introduits par Aurelia qui pourraient être assainis.

7
répondu Meirion Hughes 2016-05-29 14:29:52
la source

Donné, personne n'a encore répondu; je vous présente le "Mieux que rien (peut-être)"™ 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'));
});

testé avec:

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

sortie gulp:

enter image description here

[mise à Jour]

laisser ceci ici car c'est un moyen rapide, sale et sans dépendance pour vérifier étiquettes auto-fermées; répond à la question et peut être utile.

3
répondu Meirion Hughes 2016-05-27 03:51:59
la source