Node's Pretty Magical

    TypeScript icon, indicating that this package has built-in type declarations

    0.10.0 • Public • Published


    Sanity check of Aurelia Templates


    NPM version NPM downloads Travis Status Breaks-on Stability Gitter


    Aurelia is a front-end platform built upon existing (or upcoming) industry standards. One such standard is to ensure that all view-markup is parsable by regular browsers; while this allows Aurelia to forgo the need for a custom parser, it does mean poorly formatted html will be ignored without warning.

    The goal of aurelia-template-lint is to detect problems with your template html and source before they become a problem in the browser, or are ignored by the browser entirely.


    Note: node.js 6 is required.

    Note: it is recommended you use this via the gulp plugin. There is also a webpack loader available

    Note: If you use this library directly, in a production environment (ci), then ensure you lock to a minor version as this library is under development and subject to breaking changes on minor versions

    npm install aurelia-template-lint --save-dev


    const AureliaLinter = require('aurelia-template-lint').AureliaLinter
    var linter = new AureliaLinter();
    var html = "<template></template>"
      .then((errors) => {           
          errors.forEach(error => {         
             console.log(`${error.message} [ln: ${error.line} col: ${error.column}]`);
                 if(error.detail) console.log(`  * ${error.detail}`);

    can be configured by passing a config object

    const Config = require('aurelia-template-lint').Config
    var config = new Config();
    config.obsoleteTagOpts.push({tag:'my-old-tag', msg:'is really old'});
    var linter = new AureliaLinter(config);


    Config is an object type of the form and default:

    export class Config {
        useRuleAttributeValue = true;         // error on bad attribute value
        useRuleObsoleteAttribute = true;      // error on use of obsolete attributes
        useRuleObsoleteTag = true;            // error on use of obsolete tags
        useRuleConflictingAttribute = true    // error on use of conflicting attributes
        useRuleSelfClose = true;              // error on self-closed tags
        useRuleStructure = true;              // error on mismatched tags (unclosed)
        useRuleValidChildren = true;          // error on use of invalid child elements 
        useRuleRequiredAttributes = true;      // error on missing attrs on tags
        useRuleAureliaRequire = true;         // error on bad require tag usage (aurelia-flavor)
        useRuleAureliaSlot = true;            // error on bad slot usage (aurelia-flavor)
        useRuleAureliaTemplate = true;        // error on bad template usage (aurelia-flavor)
        useRuleAureliaBindingAccess = false;  // error on bad view-model binding, when type is known (static type checking)
        useRuleAureliaBindingSyntax = true;   // error on bad binding syntax (as reported by aurelia) 
         * Attribute Value Rules
         * attr: attributes that matches this reg-ex are checked
         * tag: applies the rule only on a specific element-tag, other-wise applies to all
         * msg: the error to report if the rule fails
         * is: the attribute value must match (entirely) the reg-ex.
         * not: the attribute value must not match (partially) the reg-ex. 
        attributeValueOpts: Array<{ attr: RegExp, is?: RegExp, not?: RegExp, msg?: string, tag?: string }> = [
                attr: /^style$/,
                not: /\${(.?)+}/,
                msg: "interpolation not allowed in style attribute"
                attr: /^bindable$/,
                not: /[a-z][A-Z]/,
                msg: "camelCase bindable is converted to camel-case",
                tag: "template"
                tag: "button",
                attr: /^type$/,
                is: /^button$|^submit$|^reset$|^menu$/,
                msg: "button type invalid"
        * Required Attributes Rules
        * tag: applies the rule to matching element tags
        * attr: must have an attribute that matches the reg-ex.
        * msg: the error to report if the rule fails
        requiredAttribute: Array<{ tag: RegExp, attr: RegExp, msg: string }> = [{
          tag: /^button$/,
          attr: /^type$/,
          msg: "buttons without a type have irregular behavour"
         * Obsolete Tag Rules     
         * tag: the obsolete element
         * msg: the error to report if the element is found
        obsoleteTagOpts: Array<{ tag: string, msg?: string }> = [
                tag: 'content',
                msg: 'use slot instead'
        * Obsolete Attribute Rules
        * attr: the attribute name that is obsolete   
        * tag: [optional] obsolete only when applied to a specfic element tag
        * msg: the error to report if the attribute is found
        obsoleteAttributeOpts: Array<{ attr: string, tag?: string, msg?: string }> = [
        * Conflicting Attribute Rules
        * attrs: the attributes that cannot be used on the same element
        * msg: the error to report if the rule fails
        conflictingAttributeOpts: Array<{ attrs: string[], msg?: string }> = [
                attrs: ["repeat.for", "if.bind", "with.bind"],
                msg: "template controllers shouldn't be placed on the same element"
        * ID Attribute Rule
        idAttributeOpts = {
          allowEmptyId: false,
          allowDuplicateId: false,
          allowIllegalChars: false,
          ignoreAny: /\$\{[\s\S]+\}/,
        * Valid Child Rule
        validChildOpts = [ 
          // { element: "name", allow: [], /*OR*/ exclude: []},
          { element: "tr", allow: ["td", "th"] },
          { element: "ul", allow: ["li"] },
          { element: "ol", allow: ["li"] },
          { element: "dl", allow: ["dt", "dd"] },
          { element: "select", allow: ["option", "optgroup"] },
        * Parser Options
        * voids: list of elements that do not have a close tag.   
        * scopes: list of element that change the language scope.  
        parserOpts = {
            voids: ['area', 'base', 'br', 'col', 'embed', 'hr',
                'img', 'input', 'keygen', 'link', 'meta',
                'param', 'source', 'track', 'wbr'],
            scopes: ['html', 'body', 'template', 'svg', 'math']
        * Aurelia Binding Access Options
        * localProvidors: list of attributes that generate local variables
        * debugReportExceptions: when true, any caught exceptions are reported as rule issues. 
        * restrictedAccess: access to type members with these modifiers will report an issue;
        aureliaBindingAccessOpts = {
            localProvidors: [
                "repeat.for", "if.bind", "with.bind"
            localOverride: new Map([
                ["my-tag", [{ name: "stubornLocal", typeValue: {} }]]
            restrictedAccess: ["private", "protected"],
            reportUnresolvedViewModel: false
        * Aurelia Slot Options
        * controllers: attributes that create template controllers
        aureliaSlotOpts = {
            controllers: [
                "repeat.for", "if.bind", "with.bind"
        * Aurelia Template Options
        * containers: html container elements (used to ensure no repeat-for usage)
        aureliaTemplateOpt = {
            containers: ['table', 'select']
        * Reflection Options
        * sourceFileGlob: glob pattern used to load source files (ts)
        * typingsFileGlob: glob pattern used to load typescript definition files. 
        reflectionOpts: {
          sourceFileGlob: string | string[],
          typingsFileGlob: string | string[]
        } = {
          sourceFileGlob: "source/**/*.ts",
          typingsFileGlob: "typings/**/*.d.ts",
         * report exceptions as issues, where applicable 
        debug = false;
         * Append the linter rule-set with these rules
        customRules: Rule[] = [];


    using the default config (plus type checking - see below), the example:


    02:  <require/>
    03:  <div repeat.for="item of"></div>
    04:  <content></content>
    05:  <slot></slot><slot></slot>
    06:  <table>
    07:    <template></template>
    08:  </table>
    09:  <div style="width: ${width}px; height: ${height}px;"></div>
    10:  <div repeat.for="item of items" with.bind="items"></div>
    11:  <template repeat.for="item of items">
    12:    ${item.ino} 
    13:    ${item.role.isAdmn} 
    14:    ${item.update().sizeee}
    15:  </template>
    16:  <template with.bind="person">
    17:    ${address.postcdo}
    18:  </template>
    19:  <table>
    20:    <tr repeat.for="item of items">
    21:      <td>${item.nme}</td>
    22:    </tr>
    23:  </table>
    24:  <div value.bind="car.modl"></div>


    import {Person} from './my-types/person';
    import {Item} from './my-types/item';
    import {Car} from 'my-lib';
    export class FooViewModel {
      person: Person;
      items: Item[];
      car: Car;

    will result in the following errors:

    suspected unclosed element detected [ln: 1 col: 1]
    self-closing element [ln: 2 col: 3]
    require tag is missing a 'from' attribute [ln: 2 col: 3]
    Incorrect syntax for "for" [ln: 3 col: 8]
      * The form is: "$local of $items" or "[$key, $value] of $items",
    <content> is obsolete [ln: 4 col: 3]
      * use slot instead
    more than one default slot detected [ln: 5 col: 16]
    template as child of <table> not allowed [ln: 7 col: 5]
    interpolation not allowed in style attribute [ln: 9 col: 3]
    conflicting attributes: [repeat.for, with.bind] [ln: 10 col: 3]
      * template controllers shouldn't be placed on the same element
    cannot find 'ino' in type 'Item' [ln: 13 col: 5]
    cannot find 'isAdmn' in type 'Role' [ln: 15 col: 5]
    cannot find 'sizeee' in type 'Data' [ln: 17 col: 5]
    cannot find 'postcdo' in type 'Address' [ln: 18 col: 5]
    cannot find 'nme' in type 'Item' [ln: 21 col: 11]
    cannot find 'modl' in type 'Car' [ln: 24 col: 8]
    mismatched close tag [ln: 25 col: 1]

    The full example is available in the repository; including the custom typings.


    Rules used by default:

    • SelfClose
      • ensure non-void elements do not self-close
    • Parser
      • returns detected unclosed/ill-matched elements errors captured during parsing
    • ObsoleteTag
      • identify obsolete tag usage
    • ObsoleteAttributes
      • identify obsolete attribute usage
    • AttributeValue
      • ensure attributes exactly match an expected pattern
      • ensure attributes don't contain any matches of an pattern
      • ensure attribute is used for a tag
    • Slot
      • don't allow two, or more, slots to have the same name;
      • don't allow more than one default slot;
    • Require
      • ensure require elments have a 'from' attribute
    • ConflictingAttributes
      • ensure element doesn't have attribute combination marked as conflicting.
      • i.e. template controller attributes (if.bind and repeat.for on the same element)
    • Template
      • ensure root is a template element, unless its
      • no more than one template element present
    • Binding Syntax
      • ensure binding syntax is correct
    • Binding Access
      • ensure binding correlates with fields of known types (static type checking)

    I'm more than happy to add or improve rules; so please feel free to create an issue, or even a pull request.

    Static Type Checking

    In order to use static type checking you must opt-in by setting useRuleAureliaBindingAccess = true.

    your template html and source must have a path that defined as being in the same directory, i.e: "source/foo.html" and "source/foo.ts". You pass the path of the html file to the lint function. See Below.

    It is posible to change the glob configuration to include javascript files instead of typescript; but this can only check first-depth access.

    var config = new Config();
    config.useRuleAureliaBindingAccess = true;
    config.reflectionOpts.sourceFileGlob = "example/**/*.ts"; //or "example/**/*.js"
    var linter = new AureliaLinter(config);
    var htmlpath = "./example/foo.html";
    var html = fs.readFileSync(htmlpath, 'utf8');
    linter.lint(html, htmlpath)
      .then((results) => {
        results.forEach(error => {
          console.log(`${error.message} [ln: ${error.line} col: ${error.column}]`);
          if (error.detail) console.log(`  * ${error.detail}`);

    please report any false-negatives, code exceptions or issues with an example of what (HTML/TS) causes the problem.

    also note it will probably be far easier to use this via gulp plugin, where you'll only need to pass the config object


    This project was the result of wondering why aurelia applications had missing content when you used self-closing tags. In the end it turns out that if your template html is ill-formed, the browser's parser will not complain and you will simply have missing content and/or an ill formed DOM element tree.



    Clone the repository. In the project root run

    npm install
    npm test

    test with:

    gulp compile:typescript && node example.js

    Visual Studio Code

    Once installed, you can use make use of Visual Studio Code launcher (ctrl + f5). Also allows you to place breakpoints on ts spec files (currently only for those files in outDir path in launch.json see:


    Special thanks to:

    If you would like to contribute code or failing tests (for rules you'd like) you are most welcome to do so. Please feel free to PR or raise an issue. :)


    Icon courtesy of The Noun Project


    npm i aurelia-template-lint

    DownloadsWeekly Downloads






    Unpacked Size

    103 kB

    Total Files


    Last publish


    • aureliaeffect
    • meirionhughes