fix(syntaxes): Adjust block syntax highlighting to require ( or { on same line (#1961)

While our parser allows for a block name to be defined on a separate
line from the expression or brace, the syntax highlighting will not.
Because the extension may be used for older versions of Angular and we
cannot turn highlighting on and off dynamically like we can the parser,
we make the highlighting more restrictive. This should cover a majority
of use-cases where `@` is used in older versions of Angular like in
emails and _not_ begin block highlighting.

Partially addresses #1958. Will need another change to detect Angular
version and disable block parsing.

Author: atscott

syntaxes/src/template-blocks.ts

@@ -22,7 +22,12 @@ export const TemplateBlocks: GrammarDefinition = {
     },
 
     block: {
-      begin: /(@)((?:\w+\s*)+)/,
+      // @ followed by words and spaces. Also require a { or ( on the same line but don't capture
+      // it.
+      // The parser doesn't require this but we do for syntax highlighting to be more exclusive
+      // since
+      // the extension can be used for older versions of Angular.
+      begin: /(@)((?:\w+\s*)+)(?=\(|\{)/,
       beginCaptures: {
         1: {
           patterns: [

syntaxes/template-blocks.json

@@ -12,7 +12,7 @@
       "name": "keyword.control.block.transition.ng"
     },
     "block": {
-      "begin": "(@)((?:\\w+\\s*)+)",
+      "begin": "(@)((?:\\w+\\s*)+)(?=\\(|\\{)",
       "beginCaptures": {
         "1": {
           "patterns": [

syntaxes/test/data/template-blocks.html

@@ -26,7 +26,7 @@
     goodbye 
 }
 
-@for (let item of items; as thing; track: $index) {
+@for (let item of items; track $index) {
     bla
 }
 
@@ -37,3 +37,12 @@
 ) {
     {{o}}
 }
+
+<!-- Should not highlight -->
+@if 
+(items) {}
+
+[email protected] ({}) {}
+
+@for 
+(let item of items; track $index) { }

syntaxes/test/data/template-blocks.html.snap

@@ -129,7 +129,7 @@
 >}
 #^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 >
->@for (let item of items; as thing; track: $index) {
+>@for (let item of items; track $index) {
 #^ template.blocks.ng keyword.control.block.transition.ng
 # ^^^^ template.blocks.ng keyword.control.block.kind.ng
 #     ^ template.blocks.ng control.block.ng meta.brace.round.ts
@@ -141,16 +141,12 @@
 #                 ^ template.blocks.ng control.block.ng control.block.expression.ng
 #                  ^^^^^ template.blocks.ng control.block.ng control.block.expression.ng variable.other.readwrite.ts
 #                       ^^ template.blocks.ng control.block.ng control.block.expression.ng
-#                         ^^ template.blocks.ng control.block.ng control.block.expression.ng storage.type.as.ts
-#                           ^ template.blocks.ng control.block.ng control.block.expression.ng
-#                            ^^^^^ template.blocks.ng control.block.ng control.block.expression.ng entity.name.type.ts
-#                                 ^^ template.blocks.ng control.block.ng control.block.expression.ng
-#                                   ^^^^^ template.blocks.ng control.block.ng control.block.expression.ng variable.other.readwrite.ts
-#                                        ^^ template.blocks.ng control.block.ng control.block.expression.ng
-#                                          ^^^^^^ template.blocks.ng control.block.ng control.block.expression.ng variable.other.readwrite.ts
-#                                                ^ template.blocks.ng control.block.ng meta.brace.round.ts
-#                                                 ^ template.blocks.ng control.block.ng
-#                                                  ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
+#                         ^^^^^ template.blocks.ng control.block.ng control.block.expression.ng variable.other.readwrite.ts
+#                              ^ template.blocks.ng control.block.ng control.block.expression.ng
+#                               ^^^^^^ template.blocks.ng control.block.ng control.block.expression.ng variable.other.readwrite.ts
+#                                     ^ template.blocks.ng control.block.ng meta.brace.round.ts
+#                                      ^ template.blocks.ng control.block.ng
+#                                       ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 >    bla
 #^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
 >}
@@ -190,4 +186,19 @@
 #       ^^ template.blocks.ng control.block.ng control.block.body.ng punctuation.definition.block.ts
 >}
 #^ template.blocks.ng control.block.ng punctuation.definition.block.ts
+>
+><!-- Should not highlight -->
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng
+>@if 
+#^^^^^ template.blocks.ng
+>(items) {}
+#^^^^^^^^^^^ template.blocks.ng
+>
+>some.email@google.com ({}) {}
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng
+>
+>@for 
+#^^^^^^ template.blocks.ng
+>(let item of items; track $index) { }
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng
 >