Static Type Checking about template-lint HOT 19 CLOSED

@JeroenVinke finally managed to at least boot up aurelia's template binding and extract the attribute binding information.

from template-lint.

... to be fair, I'm pretty sure there are quite a few issues to iron out. :P

(and sorry for all the commit spam. :P)

from template-lint.

• investigate using the typescript compiler to traverse the syntax tree

from template-lint.

You probably want much higher level interface to deal with TypeScript classes (to fetch the fields and methods and their types). I guess TypeScript already provides that information for IDE's to create an outline of the class, that includes its method and fields - maybe it is implemented somewhere here?

from template-lint.

Had a quick look. Seems higher level with regard to the project overall, but not seeing reflection style information there, unless its imported from CompilerServices or LanguageServices?

I quite like the look of the AST node. Pretty much hands you the entire reflection data for files. should be super easy to pull out class/interface names and their variables.

As you say, I need classes/interfaces and a list of their fields, getters and constructor created properties. So far that AST stuff is all I know of that does that. Perhaps what we need can be found via the debugger, that surely must have a list of classes and fields.

from template-lint.

So far that AST stuff is all I know of that does that.

Yeah, I was just hoping, that You might find a tool (built on top of low-level "AST stuff") that already provides You the same high-level information.You'd need. It just seems unbelievable, that all the IDE plugins would implement the same thing for "Class outline view" without relying on higher level tools provided by TypeScript.

but not seeing reflection style information there, unless its imported from CompilerServices or LanguageServices?

Maybe, i guess it has to be somewhere ;)

from template-lint.

right, the reflection is there: via client getProgram which contains a list of SourceFile, which gives you: https://github.com/Microsoft/TypeScript/blob/master/src/compiler/types.ts#L1601

and SourceFile extends from Node somewhere, so you there you have the AST reflection too.

from template-lint.

this is actually super easy;

export class Person{
    forename:string;    
}

npm install typescript

ts = require('typescript')
fs = require('fs').readFileSync
file = ts.createSourceFile("test.ts", fs("test.ts").toString(), ts.ScriptTarget.ES7, true)
file.externalModuleIndicator.members[0].name.text

gets you forename;

The reflection is all readily available.

I think a proof-of-concept is viable for 0.7

• Will need a way to "find" the types via the html. I think the simple solution for now to grab the type and look for that. i.e. <template bindable="person:Person"... looks up Person.ts, case in-sensitive.
• could also use <require from="some/file.ts"><\require> (and remove from final output).
• limit to string interpolation checks for initial P.o.C. i.e. ${person.name}

cc: @zakjan

from template-lint.

HTML reflection: https://github.com/aurelia/templating/blob/master/src/view-compiler.js#L88

ref:aurelia/templating#384

from template-lint.

I see for this milestone you are aiming to support view-only templates. This is a great start, looks really promising! I already integrated the linter to my quite data-intensive project, I'll test every new release :)

The next goal should be to support view-models as well:

export class PageViewModel {
    @bindable person: Person;
    title: string;
}

<template>
    ${titl}
    ${person.nme}
    ${person.name.toUpperCase()}
</template>

And in the end all Aurelia valid bindings.

from template-lint.

Yeah, that would be the next logical step; I don't see it being a big issue if you have a 1-1 file relationship: person.html and person.ts and say it exports PersonViewModel That would be fairly straight forward. In fact that is actually easier than pulling it out of the html (i.e. bindable="person:Person") will need extra work to clean up the html and save it to output.

from template-lint.

@zakjan make sure you lock down the versions with anything production. aurelia-template-lint locks down on minor version (updates patches) of template-lint, so in principle when I break template-lint on next release it should be fine.

I currently break on minor releases, while no breaking changes on patch.

If you use the gulp plugin though, that is locked to minor versions and I only publish those when it all works. :D

from template-lint.

• blocked by: aurelia/pal-nodejs#1

update: I could just strip out interpolation strings for now; would allow to get a basic version working.

from template-lint.

@MeirionHughes made a proof of concept here. I'd love to get Aurelia to give us more information about a view (a total list of bindings) so we don't have to traverse the DOM and fetch the binding expressions ourselves. Perhaps that will require browser capabilities though

from template-lint.

Looks like you're miles ahead of me 😄

from template-lint.

Actually, I think your approach is better; We're already traversing the html tree in this linter anyway. My issue was trying to find a way grab the reflection of bindings, via the binding system. Looks like you've actually done that in your proof-of-concept. I find that extremely useful, Thank you!

I may "borrow" your approach in this regard and get a working Rule up and running.

from template-lint.

If possible, i'd rather let aurelia parse an entire view and give us back the controller (I think a controller contains all the bindings etc). That would give us a lot more information than we could get by traversing the DOM. I think we need this info (if not now, then later) because aurelia views can be complex (if.bind's, , custom elements, attributes etc).

from template-lint.

Yeah, it would ultimately be better to use the ViewCompiler in the long run. In that regard there I just need to implement the Mutation Observer emulation for the nodejs platform, test it and it will be good to go.

from template-lint.

Awesome!! Good work!

from template-lint.