chore: add vscode highlight extension

[timdeschryver]

What do you think @lacolaco ?
I would love that you tried it out before I merge this in.
As far as I can see everything works except the emmet plugin, which I can take a look at later.
But it should be good enough for a MVP 🙂

It's already published in the marketplace as vscode-atl-render.

Closes #227

[lacolaco]

It's happening so fast! I'll try it soon and give feedback.

[lacolaco]

[lacolaco]

[lacolaco]

• Syntax Highlight as HTML: works!

Nice to Have (too much for MVP)

• Formatting
• Tag information on hover
• Completion

[lacolaco]

Maybe it disallows line breaks between render( and the arguments.

Note that the regular expressions are matched against only a single line of the document at a time. That means it is not possible to use a pattern that matches multiple lines. The reason for this is technical: being able to restart the parser at an arbitrary line and having to re-parse only the minimal number of lines affected by an edit. In most situations it is possible to use the begin/end model to overcome this limitation.

https://macromates.com/manual/en/language_grammars

How about just

([`|'|\"])

?

BTW, inline-template.ng also disallows line breaks.

[lacolaco]

\\G is "matching start position", so maybe it means \\G is the same line of render(.

[lacolaco]

I've tried to fix the grammar.

• simplify injectionSelector
• add source.ts to patterns within renderMethod (fallback to the default TS grammar)
• simplify delimiters for HTML string

{
  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
  "scopeName": "atl.render",
  "injectionSelector": "L:source.ts -comment",
  "name": "atl.render",
  "patterns": [
    {
      "include": "#renderMethod"
    }
  ],
  "repository": {
    "renderMethod": {
      "name": "renderMethod",
      "begin": "(?x)(\\b(?:\\w+\\.)*(?:render)\\s*)(\\()",
      "beginCaptures": {
        "1": {
          "name": "entity.name.function.ts"
        },
        "2": {
          "name": "meta.brace.round.ts"
        }
      },
      "end": "(\\))",
      "endCaptures": {
        "0": {
          "name": "meta.brace.round.ts"
        }
      },
      "patterns": [
        {
          "include": "#renderTemplate"
        },
        {
          "include": "source.ts"
        }
      ]
    },
    "renderTemplate": {
      "contentName": "text.html",
      "begin": "[`|'|\"]",
      "beginCaptures": {
        "0": {
          "name": "string"
        }
      },
      "end": "\\0",
      "endCaptures": {
        "0": {
          "name": "string"
        }
      },
      "patterns": [
        {
          "include": "text.html.derivative"
        },
        {
          "include": "template.ng"
        }
      ]
    }
  }
}

[timdeschryver]

Thanks so much for the feedback! ♥
I'll try it out now and if publish the new version soonish!

[timdeschryver]

@lacolaco there's a new version available with your fixes, thanks again!
About formatting and completion, I was hoping that this was somehow automatically handled...
But it seems like we'll have to write our own language service? I'm not sure if that would be worth it 😅

[lacolaco]

Syntax highlights seems perfect!

I think formatting and completion can be handled by our own TS plugin which communicates with language service. I found the lit-html extension, which includes its own TS plugin. The extension has formatting configuration and passing it to the plugin.

https://github.com/mjbvz/vscode-lit-html
https://github.com/microsoft/typescript-lit-html-plugin

[timdeschryver]

Yea, I also using lit-html as an example 😅
I'm going to merge this one in already.

I will do some reading about it first and maybe in a couple of days/weeks play with it to see how easy or hard it's to support this feature.
If you want you can go ahead and try/start the plugin, if you don't want to that's also perfectly fine but please keep me updated so we don't do double work.

[github-actions]

🎉 This PR is included in version 10.8.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀