Aurelia Bindings

[MeirionHughes]

Sanity check Aurelia Bindings

[MeirionHughes]

I can't really think of anything useful to implement for this; the binding itself should be sanitized by Aurelia's templating engine.

[MeirionHughes]

could possibly run this through aurelia's binding and expression engine to see if it is well formed at least.

see: https://github.com/aurelia/binding/blob/b3e48bf42aa2f545652876b69778fc254ef55c55/src/binding-engine.js#L21

requires: aurelia/dependency-injection#95

[zakjan]

the binding itself should be sanitized by Aurelia's templating engine.

This is done in run-time, it is too late to catch bugs. The linter should check it in build-time.

[MeirionHughes]

I think there are a few issues here;

• make sure the binding syntax is okay
• making sure bindings actually work
  • they evaluate to valid expression
  • binding to variables/functions that exist
• making sure value converters exist.

checking the syntax is possible; I did try to make up a regex check, but the binds can be extremely complex. Someone would need to come up with a comprehensive list of what is good syntax (all the complex cases) and what is bad syntax.

As for checking that bindings to the view-model are okay - that's a difficult proposition for a stream-based linter. The crude solution would be to look for a js file with the same name, load it up and check variables, but there are so many different ways that people can use aurelia that this solution seems pointless... also if you include all the require elements, it could get very complex.

The better solution would be to have an entirely separate testing tool that effectively load up the app in a testing area then runs automated tests based off the input files... for example: Load up the app with web-driver / selenium / protractor, analyze the view and view-model and look check to make sure its all bound up correctly and everything has been found. You can also check with the webdriver to ensure no 404's etc...

So basically... I think if you want build-time checking for your complex bindings, it'll need to be some kind of automatically generated E2E test and run it through protractor. @EisenbergEffect thoughts?

[atsu85]

@MeirionHughes, note that in additon to build-time validation issue in aurelia/tools, I've created another issue(Common platform for all IDE plugins). One thing that both of the "features" rely on, would be a service from Aurelia.

If I'd have to build a common platform for IDE plugins, I'd probably create a background process with REST API, that can be started by IDE plugin

as well as build tools, such as gulp.

As i understand, the library should build and provide some kind of application model, that IDE could use to query for example view and custom element models that contain information about template that is used by it and methods/fields, bind. When this information is available, plugins could easily implement

lots of great things i listed in that issue.

I think it is possible to build such service from Aurelia and to implement extensive static code analysis on top of it. That said, i really hope that following would not be needed:

I think if you want build-time checking for your complex bindings, it'll need to be some kind of automatically generated E2E test and run it through protractor.

As for checking that bindings to the view-model are okay - that's a difficult proposition for a stream-based linter.

When Aurelia implements the service that provides the model and tools to verify expressions, this task wouldn't probably be difficult any more for the linter (as I understand).

The crude solution would be to look for a js file with the same name, load it up and check variables, but there are so many different ways that people can use aurelia that this solution seems pointless... also if you include all the require elements, it could get very complex.

@EisenbergEffect, i guess it is doable, what do You think?

[MeirionHughes]

Another option (to automated e2e) would be to feed the linter with all html and js file streams (by name). Get them parsed through aurelia-binding to at least get a comprehensive list of variables and binding expressions. When the initial parsing and expression analysis is done you could do a second pass to see if usage is okay. i.e. when you do:

<foo person.bind="{person}"></foo>

then you find the component named foo.html:

<template bindable="person">
   ${person.name}
</template>

at which point you can detect that the template has been used correctly. i.e. person has a field called name

However, if you want to make sure your template is well formed, then I think you'd need to introduce typescript types:

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

Now, technically you could do this entirely outside of aurelia... i.e. we simply introduce the syntax <template bindable="variable:TypeName"> then in the linter this is stripped out of the final html file, but the linter knows what type to expect. then in the second pass you could then look for that class by name and check the binding is okay. So with this you could check the template itself, rather than checking it how and when its used.

[MeirionHughes]

I've planned a few improvements to template-lint that should help achieve the "second-pass" feature (i.e. rules that require checking other files);

MeirionHughes/template-lint#17
MeirionHughes/template-lint#18
MeirionHughes/template-lint#19

[MeirionHughes]

effectively solved by checking the types (need to load up bindings). continue discussion in https://github.com/MeirionHughes/aurelia-template-lint/issues/24