Experiments injecting bindings into meta.tag separately (#1993)

* fix(syntaxes): Do not highlight bindings outside element tags Currently we inject all the syntaxes into text.html, causing #1725 Rather than doing this, we should separate this into two injects, one injecting interpolation into the base html, and another which injects bindings, but only into meta.tag. fixes #1725 * fixup! fix(syntaxes): Do not highlight bindings outside element tags --------- Co-authored-by: Andrew Scott <[email protected]>
angular · Feb 2, 2024 · 28739e4 · 28739e4
1 parent 49ebaca
commit 28739e4
Show file tree

Hide file tree

Showing 17 changed files with 1,166 additions and 1,170 deletions.
diff --git a/.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU= b/.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=
@@ -4,5 +4,5 @@
 .npmrc=974837034
 pnpm-lock.yaml=1983086970
 yarn.lock=-1186674637
-package.json=836271005
+package.json=-1401673343
 pnpm-workspace.yaml=1711114604
diff --git a/package.json b/package.json
@@ -185,6 +185,14 @@
           "expression.ng": "javascript"
         }
       },
+      {
+        "path": "./syntaxes/template-tag.json",
+        "scopeName": "template.tag.ng",
+        "injectTo": [
+          "text.html.derivative",
+          "source.ts"
+        ]
+      },
       {
         "path": "./syntaxes/expression.json",
         "scopeName": "expression.ng"

diff --git a/syntaxes/BUILD.bazel b/syntaxes/BUILD.bazel
@@ -14,6 +14,7 @@ js_run_binary(
         "_inline-template.json",
         "_template.json",
         "_template-blocks.json",
+        "_template-tag.json",
     ]
 )
 
@@ -25,6 +26,7 @@ write_source_files(
         "inline-template.json": "_inline-template.json",
         "template.json": "_template.json",
         "template-blocks.json": "_template-blocks.json",
+        "template-tag.json": "_template-tag.json",
     }
 )
 

diff --git a/syntaxes/src/build.ts b/syntaxes/src/build.ts
@@ -13,6 +13,7 @@ import {InlineStyles} from './inline-styles';
 import {InlineTemplate} from './inline-template';
 import {Template} from './template';
 import {TemplateBlocks} from './template-blocks';
+import {TemplateTag} from './template-tag';
 import {GrammarDefinition, JsonObject} from './types';
 
 // Recursively transforms a TypeScript grammar definition into an object which can be processed by
@@ -55,3 +56,4 @@ build(Template, 'template');
 build(InlineTemplate, 'inline-template');
 build(InlineStyles, 'inline-styles');
 build(TemplateBlocks, 'template-blocks');
+build(TemplateTag, 'template-tag');
diff --git a/syntaxes/src/template-tag.ts b/syntaxes/src/template-tag.ts
@@ -0,0 +1,135 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {GrammarDefinition} from './types';
+
+export const TemplateTag: GrammarDefinition = {
+  scopeName: 'template.tag.ng',
+  injectionSelector: 'L:text.html#meta.tag -comment',
+  patterns: [
+    {include: '#propertyBinding'},
+    {include: '#eventBinding'},
+    {include: '#twoWayBinding'},
+    {include: '#templateBinding'},
+  ],
+  repository: {
+
+    propertyBinding: {
+      begin: /(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/,
+      beginCaptures: {
+        1: {
+          name: 'entity.other.attribute-name.html entity.other.ng-binding-name.property.html',
+          patterns: [
+            {include: '#bindingKey'},
+          ],
+        },
+        2: {name: 'punctuation.separator.key-value.html'},
+        3: {name: 'string.quoted.html punctuation.definition.string.begin.html'},
+      },
+      end: /\3/,
+      endCaptures: {
+        0: {name: 'string.quoted.html punctuation.definition.string.end.html'},
+      },
+      name: 'meta.ng-binding.property.html',
+      contentName: 'expression.ng',
+      patterns: [
+        {include: 'expression.ng'},
+      ],
+    },
+
+    eventBinding: {
+      begin: /(\(\s*@?[-_a-zA-Z0-9.$]*\s*\))(=)(["'])/,
+      beginCaptures: {
+        1: {
+          name: 'entity.other.attribute-name.html entity.other.ng-binding-name.event.html',
+          patterns: [
+            {include: '#bindingKey'},
+          ],
+        },
+        2: {name: 'punctuation.separator.key-value.html'},
+        3: {name: 'string.quoted.html punctuation.definition.string.begin.html'},
+      },
+      end: /\3/,
+      endCaptures: {
+        0: {name: 'string.quoted.html punctuation.definition.string.end.html'},
+      },
+      name: 'meta.ng-binding.event.html',
+      contentName: 'expression.ng',
+      patterns: [
+        {include: 'expression.ng'},
+      ],
+    },
+
+    twoWayBinding: {
+      begin: /(\[\s*\(\s*@?[-_a-zA-Z0-9.$]*\s*\)\s*\])(=)(["'])/,
+      beginCaptures: {
+        1: {
+          name: 'entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html',
+          patterns: [
+            {include: '#bindingKey'},
+          ],
+        },
+        2: {name: 'punctuation.separator.key-value.html'},
+        3: {name: 'string.quoted.html punctuation.definition.string.begin.html'},
+      },
+      end: /\3/,
+      endCaptures: {
+        0: {name: 'string.quoted.html punctuation.definition.string.end.html'},
+      },
+      name: 'meta.ng-binding.two-way.html',
+      contentName: 'expression.ng',
+      patterns: [
+        {include: 'expression.ng'},
+      ],
+    },
+
+    templateBinding: {
+      begin: /(\*[-_a-zA-Z0-9.$]*)(=)(["'])/,
+      beginCaptures: {
+        1: {
+          name: 'entity.other.attribute-name.html entity.other.ng-binding-name.template.html',
+          patterns: [
+            {include: '#bindingKey'},
+          ],
+        },
+        2: {name: 'punctuation.separator.key-value.html'},
+        3: {name: 'string.quoted.html punctuation.definition.string.begin.html'},
+      },
+      end: /\3/,
+      endCaptures: {
+        0: {name: 'string.quoted.html punctuation.definition.string.end.html'},
+      },
+      name: 'meta.ng-binding.template.html',
+      contentName: 'expression.ng',
+      patterns: [
+        {include: 'expression.ng'},
+      ],
+    },
+
+    bindingKey: {
+      patterns: [
+        {
+          match: /([\[\(]{1,2}|\*)(?:\s*)(@?[-_a-zA-Z0-9.$]*%?)(?:\s*)([\]\)]{1,2})?/,
+          captures: {
+            1: {name: 'punctuation.definition.ng-binding-name.begin.html'},
+            2: {
+              name: 'entity.other.ng-binding-name.$2.html',
+              patterns: [
+                {
+                  match: /\./,
+                  name: 'punctuation.accessor.html',
+                },
+              ],
+            },
+            3: {name: 'punctuation.definition.ng-binding-name.end.html'},
+          },
+        },
+      ],
+    },
+  },
+};
diff --git a/syntaxes/src/template.ts b/syntaxes/src/template.ts
@@ -13,10 +13,6 @@ export const Template: GrammarDefinition = {
   injectionSelector: 'L:text.html -comment',
   patterns: [
     {include: '#interpolation'},
-    {include: '#propertyBinding'},
-    {include: '#eventBinding'},
-    {include: '#twoWayBinding'},
-    {include: '#templateBinding'},
   ],
   repository: {
 
@@ -35,117 +31,5 @@ export const Template: GrammarDefinition = {
       ],
     },
 
-    propertyBinding: {
-      begin: /(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/,
-      beginCaptures: {
-        1: {
-          name: 'entity.other.attribute-name.html entity.other.ng-binding-name.property.html',
-          patterns: [
-            {include: '#bindingKey'},
-          ],
-        },
-        2: {name: 'punctuation.separator.key-value.html'},
-        3: {name: 'string.quoted.html punctuation.definition.string.begin.html'},
-      },
-      end: /\3/,
-      endCaptures: {
-        0: {name: 'string.quoted.html punctuation.definition.string.end.html'},
-      },
-      name: 'meta.ng-binding.property.html',
-      contentName: 'expression.ng',
-      patterns: [
-        {include: 'expression.ng'},
-      ],
-    },
-
-    eventBinding: {
-      begin: /(\(\s*@?[-_a-zA-Z0-9.$]*\s*\))(=)(["'])/,
-      beginCaptures: {
-        1: {
-          name: 'entity.other.attribute-name.html entity.other.ng-binding-name.event.html',
-          patterns: [
-            {include: '#bindingKey'},
-          ],
-        },
-        2: {name: 'punctuation.separator.key-value.html'},
-        3: {name: 'string.quoted.html punctuation.definition.string.begin.html'},
-      },
-      end: /\3/,
-      endCaptures: {
-        0: {name: 'string.quoted.html punctuation.definition.string.end.html'},
-      },
-      name: 'meta.ng-binding.event.html',
-      contentName: 'expression.ng',
-      patterns: [
-        {include: 'expression.ng'},
-      ],
-    },
-
-    twoWayBinding: {
-      begin: /(\[\s*\(\s*@?[-_a-zA-Z0-9.$]*\s*\)\s*\])(=)(["'])/,
-      beginCaptures: {
-        1: {
-          name: 'entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html',
-          patterns: [
-            {include: '#bindingKey'},
-          ],
-        },
-        2: {name: 'punctuation.separator.key-value.html'},
-        3: {name: 'string.quoted.html punctuation.definition.string.begin.html'},
-      },
-      end: /\3/,
-      endCaptures: {
-        0: {name: 'string.quoted.html punctuation.definition.string.end.html'},
-      },
-      name: 'meta.ng-binding.two-way.html',
-      contentName: 'expression.ng',
-      patterns: [
-        {include: 'expression.ng'},
-      ],
-    },
-
-    templateBinding: {
-      begin: /(\*[-_a-zA-Z0-9.$]*)(=)(["'])/,
-      beginCaptures: {
-        1: {
-          name: 'entity.other.attribute-name.html entity.other.ng-binding-name.template.html',
-          patterns: [
-            {include: '#bindingKey'},
-          ],
-        },
-        2: {name: 'punctuation.separator.key-value.html'},
-        3: {name: 'string.quoted.html punctuation.definition.string.begin.html'},
-      },
-      end: /\3/,
-      endCaptures: {
-        0: {name: 'string.quoted.html punctuation.definition.string.end.html'},
-      },
-      name: 'meta.ng-binding.template.html',
-      contentName: 'expression.ng',
-      patterns: [
-        {include: 'expression.ng'},
-      ],
-    },
-
-    bindingKey: {
-      patterns: [
-        {
-          match: /([\[\(]{1,2}|\*)(?:\s*)(@?[-_a-zA-Z0-9.$]*%?)(?:\s*)([\]\)]{1,2})?/,
-          captures: {
-            1: {name: 'punctuation.definition.ng-binding-name.begin.html'},
-            2: {
-              name: 'entity.other.ng-binding-name.$2.html',
-              patterns: [
-                {
-                  match: /\./,
-                  name: 'punctuation.accessor.html',
-                },
-              ],
-            },
-            3: {name: 'punctuation.definition.ng-binding-name.end.html'},
-          },
-        },
-      ],
-    },
   },
 };