fix(syntaxes): inject template tags to top-level source.ts

note: template.tag.ng isn't used here and needs to be directly injected into source.ts scopes
at the top level because it relies entirely on the injectionSelector to filter its matching
out of non-html tag contexts. Since we don't have any scopes that match HTML tags, we rely
entirely on the text.html.derivative pattern matching and apply the tag scope via injectionSelector
only rather than being able to include it in a pattern list of another match.

fixes #2053

Author: atscott

package.json

@@ -146,7 +146,7 @@
           "source.ts"
         ],
         "embeddedLanguages": {
-          "text.html": "html",
+          "text.html.derivative": "html",
           "source.css": "css",
           "source.js": "javascript"
         }
@@ -174,12 +174,15 @@
       {
         "path": "./syntaxes/let-declaration.json",
         "scopeName": "template.let.ng",
-        "injectTo": [ "text.html.derivative" ]
+        "injectTo": ["text.html.derivative"]
       },
       {
         "path": "./syntaxes/template-tag.json",
         "scopeName": "template.tag.ng",
-        "injectTo": ["text.html.derivative"]
+        "injectTo": [
+          "text.html.derivative",
+          "source.ts"
+        ]
       },
       {
         "path": "./syntaxes/expression.json",

syntaxes/inline-template.json

@@ -62,7 +62,7 @@
           "name": "string"
         }
       },
-      "contentName": "text.html",
+      "contentName": "text.html.derivative",
       "patterns": [
         {
           "include": "text.html.derivative"
@@ -73,9 +73,6 @@
         {
           "include": "template.blocks.ng"
         },
-        {
-          "include": "template.tag.ng"
-        },
         {
           "include": "template.let.ng"
         }

syntaxes/src/inline-template.ts

@@ -37,13 +37,16 @@ export const InlineTemplate: GrammarDefinition = {
       // @ts-ignore
       end: /\1/,
       endCaptures: {0: {name: 'string'}},
-      contentName: 'text.html',
+      contentName: 'text.html.derivative',
       patterns: [
-        {include: 'text.html.derivative'},
-        {include: 'template.ng'},
-        {include: 'template.blocks.ng'},
-        {include: 'template.tag.ng'},
-        {include: 'template.let.ng'},
+        {include: 'text.html.derivative'}, {include: 'template.ng'},
+        {include: 'template.blocks.ng'}, {include: 'template.let.ng'},
+        // note: template.tag.ng isn't used here and needs to be directly injected into source.ts
+        // scopes at the top level because it relies entirely on the injectionSelector to filter its
+        // matching out of non-html tag contexts. Since we don't have any scopes that match HTML
+        // tags, we rely entirely on the text.html.derivative pattern matching and apply the tag
+        // scope via injectionSelector only rather than being able to include it in a pattern list
+        // of another match.
       ]
     }
   }

syntaxes/test/data/inline-template.ts.snap

@@ -13,7 +13,7 @@
 #          ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
 #           ^ inline-template.ng
 #            ^ inline-template.ng string
-#             ^^^^^^^^^^^ inline-template.ng text.html
+#             ^^^^^^^^^^^ inline-template.ng text.html.derivative
 #                        ^ inline-template.ng string
 #                         ^^ inline-template.ng
 >
@@ -25,7 +25,7 @@
 #          ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
 #           ^ inline-template.ng
 #            ^ inline-template.ng string
-#             ^^^^^^^^^^^ inline-template.ng text.html
+#             ^^^^^^^^^^^ inline-template.ng text.html.derivative
 #                        ^ inline-template.ng string
 #                         ^^ inline-template.ng
 >  template: "<div></div>",
@@ -34,7 +34,7 @@
 #          ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
 #           ^ inline-template.ng
 #            ^ inline-template.ng string
-#             ^^^^^^^^^^^ inline-template.ng text.html
+#             ^^^^^^^^^^^ inline-template.ng text.html.derivative
 #                        ^ inline-template.ng string
 #                         ^^ inline-template.ng
 >  template: '<div></div>',
@@ -43,7 +43,7 @@
 #          ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
 #           ^ inline-template.ng
 #            ^ inline-template.ng string
-#             ^^^^^^^^^^^ inline-template.ng text.html
+#             ^^^^^^^^^^^ inline-template.ng text.html.derivative
 #                        ^ inline-template.ng string
 #                         ^^ inline-template.ng
 >
@@ -60,7 +60,7 @@
 #               ^ inline-template.ng meta.brace.round.ts
 #                ^ inline-template.ng
 #                 ^ inline-template.ng string
-#                  ^^^^^^^^^^^ inline-template.ng text.html
+#                  ^^^^^^^^^^^ inline-template.ng text.html.derivative
 #                             ^ inline-template.ng string
 #                              ^ inline-template.ng
 #                               ^ inline-template.ng meta.brace.round.ts
@@ -77,7 +77,7 @@
 #             ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
 #              ^ inline-template.ng
 #               ^ inline-template.ng string
-#                ^^^^^^^^^^^ inline-template.ng text.html
+#                ^^^^^^^^^^^ inline-template.ng text.html.derivative
 #                           ^ inline-template.ng string
 >  /*
 #^^^^^ inline-template.ng
@@ -108,9 +108,9 @@
 #          ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
 #           ^ inline-template.ng
 #            ^ inline-template.ng string
-#             ^^ inline-template.ng text.html punctuation.definition.block.ts
-#               ^^^^^^^^ inline-template.ng text.html expression.ng variable.other.readwrite.ts
-#                       ^^ inline-template.ng text.html punctuation.definition.block.ts
+#             ^^ inline-template.ng text.html.derivative punctuation.definition.block.ts
+#               ^^^^^^^^ inline-template.ng text.html.derivative expression.ng variable.other.readwrite.ts
+#                       ^^ inline-template.ng text.html.derivative punctuation.definition.block.ts
 #                         ^ inline-template.ng string
 #                          ^^ inline-template.ng
 >})