fix(syntaxes): Only match known block names

This updates the syntaxes to only match known block names instead of requiring a `{` at the end of the line when the block syntax is used. fixes angular/angular#53483
angular · May 15, 2024 · 8beba88 · 8beba88
1 parent 13d9776
commit 8beba88
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 29 deletions.
diff --git a/syntaxes/src/template-blocks.ts b/syntaxes/src/template-blocks.ts
@@ -22,12 +22,7 @@ export const TemplateBlocks: GrammarDefinition = {
     },
 
     block: {
-      // @ 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*)+)(?=\(|\{)/,
+      begin: /(@)(if|else if|else|defer|placeholder|loading|error|switch|case|default|for|empty)(?:\s*)/,
       beginCaptures: {
         1: {
           patterns: [

diff --git a/syntaxes/template-blocks.json b/syntaxes/template-blocks.json
@@ -12,7 +12,7 @@
       "name": "keyword.control.block.transition.ng"
     },
     "block": {
-      "begin": "(@)((?:\\w+\\s*)+)(?=\\(|\\{)",
+      "begin": "(@)(if|else if|else|defer|placeholder|loading|error|switch|case|default|for|empty)(?:\\s*)",
       "beginCaptures": {
         "1": {
           "patterns": [

diff --git a/syntaxes/test/data/template-blocks.html b/syntaxes/test/data/template-blocks.html
@@ -38,11 +38,21 @@
     {{o}}
 }
 
-<!-- Should not highlight -->
 @if 
 (items) {}
 
-some.email@google.com ({}) {}
-
 @for 
 (let item of items; track $index) { }
+
+@for (let item of items; track $index) { 
+
+} 
+@empty 
+{
+
+}
+
+<!-- Should not highlight -->
+
+some.email@google.com ({}) {}
+
diff --git a/syntaxes/test/data/template-blocks.html.snap b/syntaxes/test/data/template-blocks.html.snap
@@ -1,6 +1,7 @@
 >@defer (doSomething({111})) {
 #^ template.blocks.ng keyword.control.block.transition.ng
-# ^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+# ^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#      ^ template.blocks.ng
 #       ^ template.blocks.ng control.block.ng meta.brace.round.ts
 #        ^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.expression.ng entity.name.function.ts
 #                   ^ template.blocks.ng control.block.ng control.block.expression.ng meta.brace.round.ts
@@ -18,7 +19,8 @@
 >
 >@defer {
 #^ template.blocks.ng keyword.control.block.transition.ng
-# ^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+# ^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#      ^ template.blocks.ng
 #       ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 >    <a></a>
 #^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
@@ -27,7 +29,8 @@
 >
 >@switch (a) {
 #^ template.blocks.ng keyword.control.block.transition.ng
-# ^^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+# ^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#       ^ template.blocks.ng
 #        ^ template.blocks.ng control.block.ng meta.brace.round.ts
 #         ^ template.blocks.ng control.block.ng control.block.expression.ng variable.other.readwrite.ts
 #          ^ template.blocks.ng control.block.ng meta.brace.round.ts
@@ -48,7 +51,8 @@
 >    @case (2) {
 #^^^^ template.blocks.ng
 #    ^ template.blocks.ng keyword.control.block.transition.ng
-#     ^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#     ^^^^ template.blocks.ng keyword.control.block.kind.ng
+#         ^ template.blocks.ng
 #          ^ template.blocks.ng control.block.ng meta.brace.round.ts
 #           ^ template.blocks.ng control.block.ng control.block.expression.ng constant.numeric.decimal.ts
 #            ^ template.blocks.ng control.block.ng meta.brace.round.ts
@@ -69,7 +73,8 @@
 >    @default {
 #^^^^ template.blocks.ng
 #    ^ template.blocks.ng keyword.control.block.transition.ng
-#     ^^^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#     ^^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#            ^ template.blocks.ng
 #             ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 >        default case
 #^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
@@ -81,7 +86,8 @@
 >
 >@if (a==b) { hello } @else  { goodbye }
 #^ template.blocks.ng keyword.control.block.transition.ng
-# ^^^ template.blocks.ng keyword.control.block.kind.ng
+# ^^ template.blocks.ng keyword.control.block.kind.ng
+#   ^ template.blocks.ng
 #    ^ template.blocks.ng control.block.ng meta.brace.round.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 keyword.operator.comparison.ts
@@ -93,14 +99,16 @@
 #                   ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 #                    ^ template.blocks.ng
 #                     ^ template.blocks.ng keyword.control.block.transition.ng
-#                      ^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#                      ^^^^ template.blocks.ng keyword.control.block.kind.ng
+#                          ^^ template.blocks.ng
 #                            ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 #                             ^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
 #                                      ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 >
 >@if (a==b) { 
 #^ template.blocks.ng keyword.control.block.transition.ng
-# ^^^ template.blocks.ng keyword.control.block.kind.ng
+# ^^ template.blocks.ng keyword.control.block.kind.ng
+#   ^ template.blocks.ng
 #    ^ template.blocks.ng control.block.ng meta.brace.round.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 keyword.operator.comparison.ts
@@ -115,7 +123,8 @@
 #^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 # ^ template.blocks.ng
 #  ^ template.blocks.ng keyword.control.block.transition.ng
-#   ^^^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#   ^^^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#          ^ template.blocks.ng
 #           ^ template.blocks.ng control.block.ng meta.brace.round.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 keyword.operator.comparison.ts
@@ -131,7 +140,8 @@
 >
 >@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 keyword.control.block.kind.ng
+#    ^ template.blocks.ng
 #     ^ template.blocks.ng control.block.ng meta.brace.round.ts
 #      ^^^ template.blocks.ng control.block.ng control.block.expression.ng storage.type.ts
 #         ^ template.blocks.ng control.block.ng control.block.expression.ng
@@ -154,7 +164,8 @@
 >
 >@if (
 #^ template.blocks.ng keyword.control.block.transition.ng
-# ^^^ template.blocks.ng keyword.control.block.kind.ng
+# ^^ template.blocks.ng keyword.control.block.kind.ng
+#   ^ template.blocks.ng
 #    ^ template.blocks.ng control.block.ng meta.brace.round.ts
 >    items;
 #^^^^ template.blocks.ng control.block.ng control.block.expression.ng
@@ -187,18 +198,79 @@
 >}
 #^ template.blocks.ng control.block.ng punctuation.definition.block.ts
 >
-><!-- Should not highlight -->
-#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng
 >@if 
-#^^^^^ template.blocks.ng
+#^ template.blocks.ng keyword.control.block.transition.ng
+# ^^ template.blocks.ng keyword.control.block.kind.ng
+#   ^^ template.blocks.ng
 >(items) {}
-#^^^^^^^^^^^ template.blocks.ng
+#^ template.blocks.ng control.block.ng meta.brace.round.ts
+# ^^^^^ 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 punctuation.definition.block.ts
+>
+>@for 
+#^ template.blocks.ng keyword.control.block.transition.ng
+# ^^^ template.blocks.ng keyword.control.block.kind.ng
+#    ^^ template.blocks.ng
+>(let item of items; track $index) { }
+#^ template.blocks.ng control.block.ng meta.brace.round.ts
+# ^^^ template.blocks.ng control.block.ng control.block.expression.ng storage.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 keyword.operator.expression.of.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 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.body.ng
+#                                    ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
+>
+>@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
+#     ^ template.blocks.ng control.block.ng meta.brace.round.ts
+#      ^^^ template.blocks.ng control.block.ng control.block.expression.ng storage.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 keyword.operator.expression.of.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 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.body.ng
+>
+>} 
+#^ template.blocks.ng control.block.ng punctuation.definition.block.ts
+# ^^ template.blocks.ng
+>@empty 
+#^ template.blocks.ng keyword.control.block.transition.ng
+# ^^^^^ template.blocks.ng keyword.control.block.kind.ng
+#      ^^ template.blocks.ng
+>{
+#^ template.blocks.ng control.block.ng punctuation.definition.block.ts
+>
+>}
+#^ template.blocks.ng control.block.ng punctuation.definition.block.ts
+>
+><!-- Should not highlight -->
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng
 >
 >some.email@google.com ({}) {}
 #^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng
 >
->@for 
-#^^^^^^ template.blocks.ng
->(let item of items; track $index) { }
-#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng
 >