Issue 818/angular component html highlighing (#948)

* Adds custom grammar enabling html syntax highlighting
Applies for @component decorator provided by Angular 2
#818

* Applies grammar for html syntax highlighting to ts.cson and tsx.cson
This is done by running `npm run build`
#818

* Allows backticks inside html-templates without breaking syntax-highlighting

* Updates TypeScript grammar based on grammar.js
Done by running npm run build

Author: GregOnNet

grammars/ts.cson

@@ -1,5 +1,5 @@
 # This file is generated by `scripts/grammar.js`
-# Last generated: Mon, 18 Apr 2016 17:58:05 GMT
+# Last generated: Sat, 14 May 2016 07:40:19 GMT
 name: "TypeScript"
 scopeName: "source.ts"
 fileTypes: [
@@ -609,6 +609,22 @@ repository:
   expression:
     name: "meta.expression.ts"
     patterns: [
+      {
+        comment: "Match Angular 2 Component html templates"
+        begin: "(?:(?<=^|\\stemplate:)|(?<=/\\*\\* @html \\*/))\\s*(`)"
+        beginCaptures:
+          "1":
+            name: "name: string.template.ts"
+        end: "(?<!\\\\)`"
+        endCaptures:
+          "0":
+            name: "name: string.template.ts"
+        patterns: [
+          {
+            include: "text.html.basic"
+          }
+        ]
+      }
       {
         comment: "Match ES6 \"import from\" syntax"
         match: "\\b(import)\\b.*\\b(from)\\b\\s+((['\"]).*\\4)"
@@ -868,13 +884,13 @@ repository:
     match: "\\*|/|\\-\\-|\\-|\\+\\+|\\+|%"
   "relational-operator":
     name: "keyword.operator.comparison.ts"
-    match: "===|==|=|!=|!==|<=|>=|<>|<|>"
+    match: "===|!==|==|!=|<=|>=|<>|=|<|>"
   "assignment-operator":
     name: "keyword.operator.assignment.ts"
-    match: "<<=|>>=|>>>=|\\*=|(?<!\\()/=|%=|\\+=|\\-=|&=|\\^="
+    match: "<<=|>>>=|>>=|\\*=|(?<!\\()/=|%=|\\+=|\\-=|&=|\\^="
   "logic-operator":
     name: "keyword.operator.arithmetic.ts"
-    match: "\\!|&|~|\\^|\\||&&|\\|\\|"
+    match: "\\!|&&|&|~|\\^|\\|\\||\\|"
   "storage-keyword":
     name: "storage.type.ts"
     match: "\\b(var|let|function|const|module|namespace|void|export)\\b"

grammars/tsx.cson

@@ -1,5 +1,5 @@
 # This file is generated by `scripts/grammar.js`
-# Last generated: Mon, 18 Apr 2016 17:58:05 GMT
+# Last generated: Sat, 14 May 2016 07:40:19 GMT
 name: "TypeScriptReact"
 scopeName: "source.tsx"
 fileTypes: [
@@ -609,6 +609,22 @@ repository:
   expression:
     name: "meta.expression.tsx"
     patterns: [
+      {
+        comment: "Match Angular 2 Component html templates"
+        begin: "(?:(?<=^|\\stemplate:)|(?<=/\\*\\* @html \\*/))\\s*(`)"
+        beginCaptures:
+          "1":
+            name: "name: string.template.ts"
+        end: "(?<!\\\\)`"
+        endCaptures:
+          "0":
+            name: "name: string.template.ts"
+        patterns: [
+          {
+            include: "text.html.basic"
+          }
+        ]
+      }
       {
         comment: "Match ES6 \"import from\" syntax"
         match: "\\b(import)\\b.*\\b(from)\\b\\s+((['\"]).*\\4)"
@@ -853,13 +869,13 @@ repository:
     match: "\\*|/|\\-\\-|\\-|\\+\\+|\\+|%"
   "relational-operator":
     name: "keyword.operator.comparison.tsx"
-    match: "===|==|=|!=|!==|<=|>=|<>|<|>"
+    match: "===|!==|==|!=|<=|>=|<>|=|<|>"
   "assignment-operator":
     name: "keyword.operator.assignment.tsx"
-    match: "<<=|>>=|>>>=|\\*=|(?<!\\()/=|%=|\\+=|\\-=|&=|\\^="
+    match: "<<=|>>>=|>>=|\\*=|(?<!\\()/=|%=|\\+=|\\-=|&=|\\^="
   "logic-operator":
     name: "keyword.operator.arithmetic.tsx"
-    match: "\\!|&|~|\\^|\\||&&|\\|\\|"
+    match: "\\!|&&|&|~|\\^|\\|\\||\\|"
   "storage-keyword":
     name: "storage.type.tsx"
     match: "\\b(var|let|function|const|module|namespace|void|export)\\b"

scripts/grammar.js

@@ -94,6 +94,18 @@ var atomPatterns = [
         name: 'es6import.path.string.quoted'
       }
     }
+  },
+  {
+    comment: 'Match Angular 2 Component html templates',
+    begin: '(?:(?<=^|\\stemplate:)|(?<=/\\*\\* @html \\*/))\\s*(`)',
+    beginCaptures: {
+      '1': { name: 'name: string.template.ts' }
+    },
+    end: '(?<!\\\\)`',
+    endCaptures: {
+      '0': { name: 'name: string.template.ts' }
+    },
+    patterns: [ { include: 'text.html.basic' } ]
   }
 ]