# Aurelia Lexer/Parser for View

**URL:** <https://discourse.aurelia.io/t/aurelia-lexer-parser-for-view/1541>\
**Category:** Help Requests\
**Created:** [August 19, 2018, 6:27am UTC](https://discourse.aurelia.io/t/aurelia-lexer-parser-for-view/1541 "2018-08-19T06:27:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [August 19, 2018, 6:27am UTC](https://discourse.aurelia.io/t/aurelia-lexer-parser-for-view/1541/1 "2018-08-19T06:27:54Z")

</div>

Hello,  
I am working on **a code generator** based on [Roslyn](https://github.com/dotnet/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](https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API) or [Cherow](https://github.com/cherow/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.

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [August 19, 2018, 1:00pm UTC](https://discourse.aurelia.io/t/aurelia-lexer-parser-for-view/1541/2 "2018-08-19T13:00:52Z")

</div>

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](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](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](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](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](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](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? 🙂

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [August 19, 2018, 2:20pm UTC](https://discourse.aurelia.io/t/aurelia-lexer-parser-for-view/1541/3 "2018-08-19T14:20:09Z")

</div>

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](https://github.com/aurelia-toolbelt/aurelia-toolbelt) for the UI and some libraries/extensions for generatimg codes like [CoreExtenders.DotLiquid](https://github.com/HamedFathi/CoreExtenders/tree/master/CoreExtenders.DotLiquid) It is a great template engine and much more.

You can find the sources on my [github](https://github.com/HamedFathi) and [nuget](https://www.nuget.org/profiles/hamedfathi) 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 🙂

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [August 22, 2018, 5:15pm UTC](https://discourse.aurelia.io/t/aurelia-lexer-parser-for-view/1541/4 "2018-08-22T17:15:16Z")

</div>

> 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.

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [March 21, 2019, 6:10pm UTC](https://discourse.aurelia.io/t/aurelia-lexer-parser-for-view/1541/5 "2019-03-21T18:10:08Z")

</div>

@fkleuver

Is it possible to have something like [AST Explorer](https://astexplorer.net/) for Aurelia vNext? I think it is very useful to learn about lexer/parser implementation in Aurelia vNext.

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [March 22, 2019, 1:05am UTC](https://discourse.aurelia.io/t/aurelia-lexer-parser-for-view/1541/6 "2019-03-22T01:05:54Z")

</div>

@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!