Various HTML parser errors

I’m submitting a bug report

• Extension Version: 1.0.4

Please tell us about your environment:

• Operating System: OSX 10.13.6

• Visual studio code version: 1.36.1

Current behavior:

Three parser bugs I encountered (I added extra logging here for the detailed trace)

1. Parser Error: Unconsumed token } at column 10 in expression

Possible fixed found

https://github.com/aurelia/vscode-extension/blob/095e4942d56a2ba7640fbc6b21fb8853fca90242/src/server/FileParser/Parsers/AureliaHtmlParser.ts#L93

// Add greedy matcher
- const interpolationRegex = /\$\{(.*)\}/g;
+ const interpolationRegex = /\$\{(.*?)\}/g;

2. Parser Error: Unconsumed token of at column 7 in expression [button of buttons]"

Possible fixed found

When I dug into it, I found the cause to be in aurelia-bindings. (So may have to report an issue over there) More specifically

This line was called when parsing 'of` https://github.com/aurelia/binding/blob/7ef619343781189fd2913de866901fd5767fd6f9/src/parser.js#L388

My ‘fix’ was then to add https://github.com/aurelia/binding/blob/7ef619343781189fd2913de866901fd5767fd6f9/src/parser.js#L683

KeywordLookup.in = T$InKeyword;
+ KeywordLookup.of = T$InKeyword;

Obviously T$InKeyword; should be changed to sth else, but I don’t know how that part worked

Plus https://github.com/aurelia/binding/blob/7ef619343781189fd2913de866901fd5767fd6f9/src/parser.js#L701

- '<=', '>=', 'in', 'instanceof', '+', '-', 'typeof', 'void', '*', '%', '/', '=', '!'
+ '<=', '>=', 'in', 'of', 'instanceof', '+', '-', 'typeof', 'void', '*', '%', '/', '=', '!'

3. Parser Error: Unterminated template at column 41 in expression

No fixed found yet

Steps to reproduce:

Have an .html file with following minimal content

<template>
  <!-- 1. -->
  <a href="/some/route#?projectIds=${project_id}">${projectsMap[project_id].title}</a>


  <!-- 2. -->
  <span repeat.for="button of buttons"></span>

  <!-- 3. -->
  <p innerhtml="${`workflow.list.details.status.${workflow.status}` | localize}"></p>

</template>

Expected/desired behavior:

• What is the expected behavior? No parsing errors

I can/will submit PRs if I find the time, for now this issue is to track the bugs

[eriklieben]

This is not for syntax highlighting, but for the minimal version of auto complete that is in the current version behind the feature toggle. It’s probably best to drop this as a whole and replace it by the future AST logic.

The syntax highlighting stuff is here: https://github.com/aurelia/vscode-extension/blob/master/syntaxes/html.json

Downside of it is that it needs to be updated each time the vscode team modifies theirs; this one is based upon it, but contains extensions for aurelia items. So it will break from time to time. And it will only work with themes that have the scopes for aurelia tags defined, which are they ones we currently maintain as well.

If we need to perform the scan for the AST for completions/hover/ etc, then we might as well drop the html.json and use the https://code.visualstudio.com/api/references/vscode-api#TextEditor.setDecorations API to color the Aurelia related items based upon that information. Then it will work in each and every template, or we can allow users to turn coloring off or do customize it from the config, instead of need to build a custom theme.

I will try to put more sequential hours in my weekly schedule, these scattered hours here and there in the week aren’t working to produce something, I am mainly trying to figure out where I left off last time. Then I can create a vNext branch and revamp the extension with the latest things possible and we are able hopefully have a more smooth way of adding the AST engine when it’s ready.

[AlbertoMonteiro]

Thanks for pointing out the scripts @hiaux0 , I’ve changed in my extension node_modules and auto completion on html is working now!