Angular2 Decorator Template Highlighting

Jonathan Barket · Jonathan Barket · commit a65d0fd29e5a · 2015-12-29T23:13:22.000-06:00
Added simple support for Angular2 inline template highlighting. In short, if we find something that looks like this: @component({ template: ` <some><html><here></here></html></some> ` }) We activate text.html.basic highlighting on the contents of the multiline string. It's possible that we could look specifically for @component, but right now, we're piggybacking off of #decorator to prevent weirdness/code duplication. To make this work, I had to remove the $base include from #decorator. If people begin passing anonymous functions and so on to decorators, this will need revisiting. But right now, we're talking about booleans and objects, so I don't know that it really needs $base. If it does, probably better to just catch @Component->template on its own.
diff --git a/grammars/typescript.cson b/grammars/typescript.cson
@@ -8,12 +8,10 @@
 'name': 'TypeScript'
 
 'patterns': [
-
   ####
   # Rules that no one should change
   # These are used by code to provide fancy completions
   ####
-
   {
       'comment': 'Match debugger statement'
       'match': '\\s*(debugger)[\\s;]+'
@@ -917,7 +915,7 @@
       }
     ]
 
-   'functionargumentreturntype':
+  'functionargumentreturntype':
     'begin': '(?=\\()'
     'end': '(?<!\\))(?!\\G)'
     'patterns': [
@@ -1047,7 +1045,7 @@
         'name': 'punctuation.definition.parameters.end.js'
     'patterns': [
       {
-        'include': '$base'
+        'include': '#angulartemplate'
       }
     ]
 
@@ -1380,5 +1378,18 @@
     ]
 
   'comma':
-      'match': ','
-      'name': 'meta.delimiter.object.comma.js'
+    'match': ','
+    'name': 'meta.delimiter.object.comma.js'
+
+  'angulartemplate':
+    'begin': '\\b(template:\\s*`)'
+    'beginCaptures':
+      '0':
+        'name': 'storage.type.annotation.js'
+    'end': '(`)'
+    'endCaptures':
+      '0':
+        'name': 'storage.type.annotation.js'
+    'patterns': [
+      { 'include': 'text.html.basic' }
+    ]
