aurelia / template-lint

Sanity check of Aurelia-flavor template HTML
Apache License 2.0
56 stars 17 forks source link

Ideas for Rules #12

Open MeirionHughes opened 8 years ago

MeirionHughes commented 8 years ago

Any ideas for more rules would be welcome.

atsu85 commented 8 years ago

Fantastic initiative, I've created an issue to Aurelia tools repo about the ideas long time ago. It would be nice, it this project eventually evolves/moves to official Aurelia subproject to gain more attraction and help from the Aurelia community.

zakjan commented 8 years ago

Static type checking of templates would move Aurelia projects to a completely different level of correctness. Most likely connected with TS interfaces/classes.

MeirionHughes commented 8 years ago

Thanks for the feedback! I'm afraid all these rules have been my best guess and so I'm more than happy to make fixes, if the linter conflicts with what people know to work.

jdanyow commented 8 years ago

awesome project! :100:

how about a rule that uses aurelia-binding's parser to validate binding expressions are well formed? Taking that a step further, the resulting AST could be analyzed and assigned a complexity score, potentially emitting warnings if the score exceeds some configured threshold.

I suppose at some point we'll be able to use the ViewCompiler in aurelia-templating server-side which would probably make this kind of thing even easier.

MeirionHughes commented 8 years ago

Yes, that could be done. :)

I've chosen to avoid ViewCompiler for the time being, firstly because the linter is build on a stream parser and secondly because I was only interested in matching binding paths with known types.

atsu85 commented 8 years ago

Another idea: Check that neither constructor nor activate method tries to use element referenced from the template.

Sample

Html:

<div ref="myDiv" >...</div>

ES/TypeScript:

...
    myDiv: Element;
    constructor() {
        this.myDiv.innerHTML; // <--- illegal, myDiv not set
    }

    activate(params, routeConfig: RouterConfiguration, navigationInstruction: NavigationInstruction) {
        this.myDiv.innerHTML; // <--- illegal, myDiv not set
    }

    attached() {
        this.myDiv.innerHTML; // <--- OK
    }
...
atsu85 commented 8 years ago

Another idea: Check that ViewModel and CustomElement classes are not used directly from other application TypeScript files. I'd consider it a bad design and would use some other communication pattern instead.

zakjan commented 8 years ago

@atsu85 Good idea. Unfortunately there is an official exception for this: view model used for aurelia-dialog. https://github.com/aurelia/dialog#using-the-plugin

atsu85 commented 8 years ago

Yeah, i guess this would need to be whitelisted somehow (as string in configuration or perhaps using a decorator)