Aurelia Lexer/Parser for View

[HamedFathi]

Hello,
I am working on a code generator based on Roslyn (If you are .NET developer maybe hear about that.)

With Roslyn, you can manipulate a source code based on syntax tree so I want to have something like this in Aurelia (Client-side) too.
If I separate Aurelia to two parts

1. View
2. ViewModel

I can parse view models with TypeScript the compiler API or Cherow but my question is about Views.

Angular provides language service and compiler as libraries but I know Aurelia does not need this because It is pure js/ts so

How to parse Aurelia views and inject my code into it? (manipulate it, find syntax nodes)
Does exist any syntax tree for Aurelia views too?

I have no idea about lexer/parser in client-side to find correct nodes and generate something new, It would be great if someone guides me.
Thanks.

[fkleuver]

Hello,
Interesting stuff you’re working on! Roslyn would certainly be a good candidate to use for this purpose.
I rewrote aurelia’s expression parser a while ago and am currently working on the parser and template compiler for vNext. I’ve also worked on cherow before. Let me give you a few pointers:

• We currently don’t have a full-blown AST for views and view-models but we plan to have one in vNext for AOT compilation. @bigopon did some preliminary work on this which you can find here: https://github.com/bigopon/aurelia-experiment/tree/master/compiler

• The vCurrent binding AST can be found here: https://github.com/aurelia/binding/blob/master/src/ast.js
  And the expression parser which I worked on: https://github.com/aurelia/binding/blob/master/src/parser.js

• The vCurrent view compiler is here : https://github.com/aurelia/templating/blob/master/src/view-compiler.js
  This is the part that walks the DOM tree, analyzes element and attribute names and turns them into custom elements and attributes. I did not work on this, but I am working on it for vNext

• The conventions (default binding modes) for attributes, as well as the binding commands are defined here: https://github.com/aurelia/templating-binding/blob/master/src/syntax-interpreter.js

• In vNext, we’re trying to simplify this from an architectural point of view (such that everything is in one place). You can find all the parsing and compilation related logic in the JIT: https://github.com/aurelia/aurelia/tree/master/packages/jit/src
  The compiler is not in a ready state yet however. We’re actively working on this.
  At a later point in time we’ll add in another package called aot and that’s where we’ll have the full-blown AST you might be looking for.

If you need any help in getting this to work, feel free to ping me. I would also be very interested in seeing the thing you’re working on. Do you have any repo you can share or is it proprietary code?

[HamedFathi]

Hello @fkleuver

Such a great answer, I should say I am a newbie in Lexer/Parser and I am on gathering information phase.

For server-side Roslyn in everything (lexer/parser/refactor/analyzer/…). we have no problem with this.
For Client-side I have two choices

1. Aurelia (specially vNext - no plan for vCurrent)
2. Angular (provides language service and compiler as a library)

I learned Angular but I don`t like it. I think Aurelia is so cleaner and so .NET developer friendly and so generatable!.

So, based on your explanation I can count on Aurelia vNext. this is a great news.

About Cherow, It is great on ESNext but based on my researches I should use the Typescript compiler API for TS files. Do you have any idea about this?

We built Aurelia-Toolbelt for the UI and some libraries/extensions for generatimg codes like CoreExtenders.DotLiquid It is a great template engine and much more.

You can find the sources on my github and nuget too.

I will certainly consult with you on this matter, and if we share it publicly, I will certainly inform you, but at the moment I’m just collecting information. (some ideas/notes/tools/libraries)

Thanks

[fkleuver]

I learned Angular but I don`t like it. I think Aurelia is so cleaner and so .NET developer friendly and so generatable !.

Indeed we tend to keep .NET in mind with various design decisions

About Cherow , It is great on ESNext but based on my researches I should use the Typescript compiler API for TS files. Do you have any idea about this?

Correct. Cherow’s strength is ES spec compliance and performance. It’s the best tool out there for ES parsing, especially runtime parsing (where performance and lib size matters more).
For build-time code analysis and generation with TypeScript, the tsc compiler will probably always be the best tool for the job.

On a fairly large scale project I worked on 2 years ago I used the TypeWriter extension for Visual Studio to generate views, models and view models based on C# ApiControllers and Entities. I can highly recommend the extension.

We do intend to look into ways to provide various interesting integrations between Aurelia and .NET but most of these are still on the drawing table.
I’m personally a huge fan of code generation and Roslyn, so I’ll probably be looking into that when the vNext core is finished.

[HamedFathi]

@fkleuver

Is it possible to have something like AST Explorer for Aurelia vNext? I think it is very useful to learn about lexer/parser implementation in Aurelia vNext.

[fkleuver]

@HamedFathi Thanks for the reminder I’ve been meaning to create a demo app that visualizes the whole app structure (AST but also bindings, controllers, etc) as I think that will make it much easier to explain some otherwise tricky concepts about the internals of Aurelia.
Definitely planned!