aurelia / template-lint Goto Github PK

Any ideas for more rules would be welcome.

...for example if.bind and repeat.for

Obsolete

same function is now achieved with https://github.com/MeirionHughes/aurelia-template-lint/issues/37

Upon finding a converter:

${some.value | booBoo}

should do the following:

• reverse naming convention: booBoo > BooBooValueConverter
• look for {caller-base-path}\boo-boo.ts
  • fallback: look for any module that exports BooBooValueConverter
• if source found
  • find toView method
  • if toView Model has a static type output:
    • use that type as contect and continue access chain.

when running npm test i saw errors like

• Cannot find module 'aurelia-binding'.
• Cannot find module 'aurelia-dependency-injection'.

npm test

> aurelia-template-lint@0.7.5 test c:\tmp\proj\cloned\aurelia\aurelia-template-lint
> gulp test

[14:11:35] Using gulpfile c:\tmp\proj\cloned\aurelia\aurelia-template-lint\gulpfile.js
[14:11:35] Starting 'test'...
[14:11:35] Starting 'clean:typescript'...
[14:11:35] Starting 'clean:tests'...
[14:11:35] Finished 'clean:typescript' after 21 ms
[14:11:35] Starting 'compile:typescript'...
[14:11:35] Finished 'clean:tests' after 50 ms
c:/tmp/proj/cloned/aurelia/aurelia-template-lint/node_modules/aurelia-templating-binding/node_modules/aurelia-binding/dist/aurelia-binding.d.ts(1,25): error TS2307: Cannot find module 'aurelia-dependency-injection'.
source\rules\binding-syntax.ts(8,86): error TS2307: Cannot find module 'aurelia-binding'.
source\rules\binding-syntax.ts(9,25): error TS2307: Cannot find module 'aurelia-dependency-injection'.
source\rules\static-type.ts(5,102): error TS2307: Cannot find module 'aurelia-binding'.
source\rules\static-type.ts(6,25): error TS2307: Cannot find module 'aurelia-dependency-injection'.
[14:11:37] TypeScript: 5 semantic errors
[14:11:37] TypeScript: emit failed
[14:11:37] Finished 'compile:typescript' after 2.01 s
[14:11:37] Starting 'compile:tests'...
c:/tmp/proj/cloned/aurelia/aurelia-template-lint/node_modules/aurelia-templating-binding/node_modules/aurelia-binding/dist/aurelia-binding.d.ts(1,25): error TS2307: Cannot find module 'aurelia-dependency-injection'.
c:/tmp/proj/cloned/aurelia/aurelia-template-lint/source/rules/binding-syntax.ts(8,86): error TS2307: Cannot find module 'aurelia-binding'.
c:/tmp/proj/cloned/aurelia/aurelia-template-lint/source/rules/binding-syntax.ts(9,25): error TS2307: Cannot find module 'aurelia-dependency-injection'.
c:/tmp/proj/cloned/aurelia/aurelia-template-lint/source/rules/static-type.ts(5,102): error TS2307: Cannot find module 'aurelia-binding'.
c:/tmp/proj/cloned/aurelia/aurelia-template-lint/source/rules/static-type.ts(6,25): error TS2307: Cannot find module 'aurelia-dependency-injection'.
spec\static-type.spec.ts(6,68): error TS2307: Cannot find module 'aurelia-binding'.
[14:11:39] TypeScript: 6 semantic errors
[14:11:39] TypeScript: emit failed
[14:11:39] Finished 'compile:tests' after 1.29 s
[14:11:39] Starting 'test:jasmine'...
Running 0 specs.

0 specs, 0 failures
Finished in 0 seconds
[14:11:39] Finished 'test:jasmine' after 36 ms
[14:11:39] Starting 'clean:tests'...
[14:11:39] Finished 'test' after 3.37 s
[14:11:39] Finished 'clean:tests' after 5.15 ms

It should be possible in theory to run this in the browser; its only dependency is parse5 and es6 Promises. jspm should be able to transpile it for an aurelia app to use it.

when I have

var config = new (require('aurelia-template-lint').Config);
config.useStaticTyping = true;
config.sourceFileGlob = "aurelia/src/**/*.ts";

the linter works as expected. But after adding
config.throwStaticTypingErrors = true;
then i get an error:

C:\path\to\proj\node_modules\aurelia-template-lint\dist\rules\static-type.js:44
                        throw error;
                        ^

TypeError: Cannot read property 'kind' of undefined
    at StaticTypeRule.resolveAccessChainToType (C:\path\to\proj\node_modules\aurelia-template-lint\dist\rules\static-type.js:197:39)
    at StaticTypeRule.examineTag (C:\path\to\proj\node_modules\aurelia-template-lint\dist\rules\static-type.js:153:30)
    at Parser.<anonymous> (C:\path\to\proj\node_modules\aurelia-template-lint\dist\rules\static-type.js:40:26)
    at emitMany (events.js:113:20)
    at Parser.emit (events.js:182:7)
    at Parser.SAXParser._handleToken (C:\path\to\proj\node_modules\template-lint\node_modules\parse5\lib\sax\index.js:173:14)
    at Parser.SAXParser._runParsingLoop (C:\path\to\proj\node_modules\template-lint\node_modules\parse5\lib\sax\index.js:151:18)
    at Parser.SAXParser._transform (C:\path\to\proj\node_modules\template-lint\node_modules\parse5\lib\sax\index.js:76:14)

that comes from static-type.ts:
else if (localVar.type.kind !== undefined) {

export class PageViewModel {
    item: {name: string};
}

<template>
    <!-- fail -->
    ${item}
    <div title="Item: ${item}"></div>
    <!-- ok -->
    ${item.name}
    <div title="Item: ${item.name}"></div>
</template>

It could prevent unintentional implicit casting, for example to "[object Object]".

Use of generics (with static type arguments) in source code should be supported by static type check.

Better support for detecting void-elements see: https://www.w3.org/TR/html5/syntax.html#void-elements

The linter, parser state and basic rules are now in https://github.com/MeirionHughes/template-lint
Should be able to remove those from this project and have template-lint as dependency.

Stumbled across this: aurelia/binding#307

So <template bindable="testStep"> is converted to test-step. Might be worth detecting camelcase and warning about it. Should have an option to disable rule in config.

given

<template bindable="testStep">
  ${testStep}
</template>

valid usage :

<my-component test-step="test"> ${testStep} </my-component>

The warning should appear if you use camelCase names when binding values, i.e.:

<my-component testStep="test"></my-component>

Syntax Rule and checking of static type usage is still opt-in; Any bugsor false-negatives within 0.8 version please report here. Please create a separate Issue for feature requests (including expanding the syntax rule's support range).

• unhandled kind errors

The readme example says that nested templates are bad under Aurelia. Why so? I'm using nested templates for containerless conditions and cycles. For example:

            <template if.bind="!isLoading">
                <template if.bind="isLoadingSucceeded">
                    <template if.bind="models.length > 0">
                        <template repeat.for="model of models">
                            <entity-row model.bind="model"></entity-row>
                        </template>
                    </template>
                    <template if.bind="models.length === 0">
                        <p>No records</p>
                    </template>
                </template>
                <template if.bind="isLoadingFailed">
                    <p>Loading failed</p>
                </template>
            </template>
            <template if.bind="isLoading">
                <p><spinner></spinner></p>
            </template>

Can you suggest a better solution? I'd rather not to use nested divs, it could break my design. Also note that it is not possible to use if.bind and repeat.for on the same element. aurelia/binding#250

Being able to know the current scope when elements are added/removed would be useful; for example; svg elements contain xml, which are allowed to be self-closed; as a result the current self-close rule will wrongfully complain about them.

Proposal:

• introduce static type syntax to bindables in template html.
• Type syntax should be stripped out of output html.

It would be nice to be able to check that bindings are correct, at build-time. For example. Given the following two files.

foo.html

<template bindable="person:Person">
   ${person.nme}  <!-- oops -->
</template>

person.ts

export class Person{
   name:string
}

Then, it should be detectable that person.nme is invalid.

Building a system that can achieve this, without actually fully running aurelia should be achievable. Possible solution was discussed here: https://github.com/MeirionHughes/aurelia-template-lint/issues/4#issuecomment-225514323 .

Untyped TypeScript is effectively JavaScript; so we should be able to check first-depth access of view-models, etc.

• AttributeValueRule
• ConflictingAttributeRule

• ensure string interpolation isn't used on certain attributes:
• configurable

example:
<div style="width: ${width}px; height: ${height}px;"></div> is not allowed
<div css="width: ${width}px; height: ${height}px;"></div> is allowed

I have some proposals regarding the project directory structure:

• delete the compiled js files from specs folder
• move rules to separate subfolder
• and maybe move specs to specs folder where they usually are. What is the reason why they are in the source folder? Did You ran into problems of configuring typescript? If so, I could offer some help. Or is it because You wanted to keep rule and test close to each other, so when a rule without test is added, it would stand out in the folder view?

I've updated template-lint up to 0.6, but there are quite a few downloads of that over npm.

In principle if people are using this library and its gulp, then it should still be locked to 0.5. So installing this project should still be working. If not I'll have to find out why that version lock isn't working.

Based on this quote from @EisenbergEffect:

slot inside of an if.bind cannot work because slots themselves have to be statically known

Needs to be compiled to system module and with outFile option in tsconfig.

• content is obsolete

A long term goal is to have a VS Code plug-in that provides contextual information about HTML templates, and highlight issues arising from bad bindings, bad type usage, etc... etc...

In principle aurelia-template-lint is ideal for such a Service because it is built directly on-top of a standard html parser. By not maintaining a "virtual" DOM and not running Aurelia fully in the background, we can easily cache the linting states and results and reparse the html document sub-trees that have changed. It also means we can pick up issues that would affect the generation of the DOM tree. In principle, keeping things lean and mean should result in quick feedback to the IDE to be reported to the user (underlining, etc...).

Some tasks/research that need to be done:

• find out how to create a language service plug-in for vs-code
  • basic plug-in
  • how to provide a language service vs code can use.
  • how to report errors and show them in the editor (underlining, pop-up message)
• rework template-lint to allow caching of node states/reflection
  • this would allow second-pass rules that require lifting-variables in parents
• support partial invalidation of HTML tree
  • update only invalidated sub-trees
• rework Issues to have a Start and Stop
  • to allow underlining a range.

Any resources that might help (examples/tutorials), feel free to post the link. Feedback that the approach will be generalised enough so it can be used for other IDEs would be welcome.

Please report any issues you find and I will try to collate and fix them as I can.

• Column offsets are always 0
• Order of Attributes in same element can break bindings to a locals
• Ancestor access doesn't check types i.e. $parent
• Capitalised filename should resolve (limited to Foo_ViewModel_ currently)
• Doesn't follow camel-case convention file <-> class
• Doesn't support Mapping ex: repeat.for="[id, customer] of customers"
• Complains it cannot find converter as field member
• Should add $index, $odd $even inside repeat.for as known variables
• context variables aren't overridden in nested controllers (same local name)
• Doesn't recognise interfaces.
• repeat.for doesn't work with interfaces imported from other files
• Template is not checked if the view model class name is different
• Traverses into private fields (should be warning).
• Doesn't support interpolation with attribute value
• Doesn't support Keyed Access
• Doesn't support negation operator on if.bind
• Bindable attributes passed to custom elements should be checked.
• Custom elements should be checked.
• Doesn't support Generics and use of Generic member types moved to feature
• Doesn't support Value Converters (different Type output) moved to feature

Check for unclosed elements. HTML parser will generally make all following markup the child of the unclosed element... which could be valid, but probably not the original intention of the author.

example:

<template>
<div id="foo>
     <div id="foo-child></div>
<div id="boo"></div>
</template> 

while the intension here is to have foo and boo along side each other; html parses will (?) see this as:

<template>
<div id="foo>
     <div id="foo-child></div>
     <div id="boo"></div>
</div>
</template> 

Sanity check Aurelia Bindings

break up template-lint.ts and template-lint.spec.ts and move all classes into their own file.

The BindingSyntax Rule was amalgamated into the ASTBuilder that forms the basis for the StaticType Rule. This was done to ensure the binding syntax check wasn't performed more than once. Unfortunately. Currently no way to use one without the other.

Rules for Aurelia templates are slightly different to generic html templates. Should be able to change rule behavor based on profile; or have different rules for different targets.

Generalised check of attribute and text content bindings via Aurelia's BindingLanguage inspection. Report thrown errors as issues.

• Add .md files for rules, under ./doc/rules

should have:

• title
• issues reported
  • details about the issue and consequences
  • short example

Would be nice if you could include custom typing declarations in the Reflection and have them get resolved during parsing.

Class is far too big and performing too many functions; break up into single responsibility classes.

Add support for finer control over which rules are used by the linter.

Type checking of Element access is currently not implemented.

when aurelia-pal-nodejs is implemented (tracked issue), we can use jsdom to create a HTMLElement in memory, based off the tag. Then we can compare the access chain against the actual object.

If this is never going in the browser, then it doesn't seem useful to have the dists in git.

So long as it can be included in the npm package, I think it can be dropped?

@MeirionHughes, project is not compiling any more, because of the change in Config.obsoleteTags array element type - see MeirionHughes@164690f#diff-e0a6a82d2b4f370ff0e9f57b7667bdd5R6

@MeirionHughes, i guess this error is related to Your effort with pal-nodejs. Could You provide instructions how to take an advantage of all the cool stuff You've implemented recently?

Currently when I do:
npm install [email protected] --save-dev
then I get following error:

[21:02:12] 'lint-templates' errored after 19 ms
[21:02:12] Error: Error invoking SVGAnalyzer. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: _aureliaPal.DOM.createElement is not a function
Inner Error Stack:
TypeError: _aureliaPal.DOM.createElement is not a function
    at createElement (C:\path\to\proj\node_modules\aurelia-template-lint\node_modules\aurelia-templating-binding\node_modules\aurelia-binding\dist\commonjs\aurelia-binding.js:4418:29)
    at new SVGAnalyzer (C:\path\to\proj\node_modules\aurelia-template-lint\node_modules\aurelia-templating-binding\node_modules\aurelia-binding\dist\commonjs\aurelia-binding.js:4427:9)
    at Object.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:347:12)
    at InvocationHandler.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:324:166)
    at Container.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:588:23)
    at StrategyResolver.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:126:35)
    at Container.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:519:39)
    at Object.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:377:103)
    at InvocationHandler.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:324:166)
    at Container.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:588:23)
    at StrategyResolver.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:126:35)
    at Container.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:519:39)
    at Object.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:371:55)
    at InvocationHandler.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:324:166)
    at Container.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:588:23)
    at StrategyResolver.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:126:35)
    at Container.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:519:39)
    at new StaticTypeRule (C:\path\to\proj\node_modules\aurelia-template-lint\dist\rules\static-type.js:20:47)
    at new AureliaLinter (C:\path\to\proj\node_modules\aurelia-template-lint\dist\aurelia-linter.js:37:13)
    at module.exports.stream._transform (C:\path\to\proj\node_modules\gulp-aurelia-template-lint\index.js:16:18)
    at Gulp.<anonymous> (C:\path\to\proj\gulp\tasks\lint-templates.js:17:15)
    at module.exports (C:\path\to\proj\node_modules\orchestrator\lib\runTask.js:34:7)
End Inner Error Stack
------------------------------------------------

    at new AggregateError (C:\path\to\proj\node_modules\aurelia-dependency-injection\node_modules\aurelia-pal\dist\commonjs\aurelia-pal.js:36:11)
    at Container.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:590:13)
    at StrategyResolver.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:126:35)
    at Container.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:519:39)
    at Object.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:377:103)
    at InvocationHandler.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:324:166)
    at Container.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:588:23)
    at StrategyResolver.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:126:35)
    at Container.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:519:39)
    at Object.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:371:55)
    at InvocationHandler.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:324:166)
    at Container.invoke (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:588:23)
    at StrategyResolver.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:126:35)
    at Container.get (C:\path\to\proj\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:519:39)
    at new StaticTypeRule (C:\path\to\proj\node_modules\aurelia-template-lint\dist\rules\static-type.js:20:47)
    at new AureliaLinter (C:\path\to\proj\node_modules\aurelia-template-lint\dist\aurelia-linter.js:37:13)
    at module.exports.stream._transform (C:\path\to\proj\node_modules\gulp-aurelia-template-lint\index.js:16:18)
    at Gulp.<anonymous> (C:\path\to\proj\gulp\tasks\lint-templates.js:17:15)
    at module.exports (C:\path\to\proj\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\path\to\proj\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\path\to\proj\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\path\to\proj\node_modules\orchestrator\index.js:134:8)

but when I install [email protected] ([email protected]), then everything works as it used to :)

Add typing information to template bindables and allow type checking of subsequent usage.

* requires: aurelia/templating#399 Rejected.

1. don't emit JS when there are TypeScript errors
2. specify LF as new line delimiter, to avoid pseudo-diffs between different OS'es (default delimiter depends on OS)
3. exclude node_modules, so that IDE's that solely rely on tsconfig.json (such as Atom and typescript.java Eclipse plugin) would work properly (and quickly)

After upgrading to gulp-aurelia-template-lint to 0.7.2, "id contains illegal characters" warning started appearing. I use string interpolation in this id attribute, e.g. id="${model.type}-${model.id}-selected".