feat: add syntax highlighting for embedded HTML in TypeScript (#461)

* feat: add syntax highlighting for embedded HTML in TypeScript

Injects an HTML TextMate grammar in Angular component `template`
decorator properties, in TypeScript files.

The grammar is enabled in decorators with a `template` property whose
key value is a string surrounded by any number of parantheses or
whitespace.

This project owes a great deal to
https://github.com/natewallace/angular2-inline, who first enabled
Angular inline syntax highlighting.

* fixup! feat: add syntax highlighting for embedded HTML in TypeScript

* fixup! feat: add syntax highlighting for embedded HTML in TypeScript

* fixup! feat: add syntax highlighting for embedded HTML in TypeScript

Author: ayazhafiz

package.json

@@ -47,7 +47,19 @@
           "description": "Enables logging of the Angular server to a file. This log can be used to diagnose Angular Server issues. The log may contain file paths, source code, and other potentially sensitive information from your project."
         }
       }
-    }
+    },
+    "grammars": [
+      {
+        "path": "./syntaxes/template.ng.json",
+        "scopeName": "template.ng",
+        "injectTo": [
+          "source.ts"
+        ],
+        "embeddedLanguages": {
+          "source.html": "html"
+        }
+      }
+    ]
   },
   "activationEvents": [
     "onLanguage:html",

scripts/build.sh

@@ -17,6 +17,8 @@ cp package.json yarn.lock angular.png CHANGELOG.md README.md dist
 cp client/package.json client/yarn.lock dist/client
 # Copy files to server directory
 cp server/package.json server/yarn.lock server/README.md dist/server
+# Copy files to syntaxes directory
+cp -R syntaxes dist/syntaxes
 
 pushd dist
 yarn install --production --ignore-scripts

syntaxes/template.ng.json

@@ -0,0 +1,74 @@
+{
+  "scopeName": "template.ng",
+  "injectionSelector": "L:meta.decorator.ts",
+  "patterns": [
+    {
+      "include": "#ts-decorator"
+    }
+  ],
+  "repository": {
+    "ts-decorator": {
+      "begin": "(template)\\s*(:)",
+      "beginCaptures": {
+        "1": {
+          "name": "meta.object-literal.key.ts"
+        },
+        "2": {
+          "name": "meta.object-literal.key.ts punctuation.separator.key-value.ts"
+        }
+      },
+      "end": "(?=,|})",
+      "patterns": [
+        {
+          "include": "#ts-paren-expression"
+        },
+        {
+          "include": "#ng-template"
+        }
+      ]
+    },
+
+    "ts-paren-expression": {
+      "begin": "\\G\\s*(\\()",
+      "beginCaptures": {
+        "1": {
+          "name": "meta.brace.round.ts"
+        }
+      },
+      "end": "\\)",
+      "endCaptures": {
+        "0": {
+          "name": "meta.brace.round.ts"
+        }
+      },
+      "patterns": [
+        {
+          "include": "#ts-paren-expression"
+        },
+        {
+          "include": "#ng-template"
+        }
+      ]
+    },
+
+    "ng-template": {
+      "begin": "\\G\\s*([`|'|\"])",
+      "beginCaptures": {
+        "1": {
+          "name": "string"
+        }
+      },
+      "end": "\\1",
+      "endCaptures": {
+        "0": {
+          "name": "string"
+        }
+      },
+      "patterns": [
+        {
+          "include": "text.html.basic"
+        }
+      ]
+    }
+  }
+}