fix: Exclude binding like text in templates

With a negative lookbehind we can exclude binding like text (ie `<div>[myInput]=myvar</div>`) from the synthax coloring of bindings Fixes angular#1725 and angular/angular#49842
JeanMeche · Apr 14, 2023 · 9819579 · 9819579
1 parent 8da65ce
commit 9819579
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 deletions.
diff --git a/syntaxes/src/template.ts b/syntaxes/src/template.ts
@@ -36,7 +36,7 @@ export const Template: GrammarDefinition = {
     },
 
     propertyBinding: {
-      begin: /(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/,
+      begin: /(?<!\>)(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/,
       beginCaptures: {
         1: {
           name: 'entity.other.attribute-name.html entity.other.ng-binding-name.property.html',

diff --git a/syntaxes/template.json b/syntaxes/template.json
@@ -40,7 +40,7 @@
       ]
     },
     "propertyBinding": {
-      "begin": "(\\[\\s*@?[-_a-zA-Z0-9.$]*%?\\s*])(=)([\"'])",
+      "begin": "(?<!\\>)(\\[\\s*@?[-_a-zA-Z0-9.$]*%?\\s*])(=)([\"'])",
       "beginCaptures": {
         "1": {
           "name": "entity.other.attribute-name.html entity.other.ng-binding-name.property.html",

diff --git a/syntaxes/test/data/template.html b/syntaxes/test/data/template.html
@@ -16,6 +16,7 @@
 <div [myProperty$]="val"></div>
 <div [%invalidProperty]="val"></div>
 <div [invalidProperty)="val"></div>
+<div>[my-property]="val"</div>
 
 <!-- Event binding test -->
 <button (click)="onClick($event)"></button>

diff --git a/syntaxes/test/data/template.html.snap b/syntaxes/test/data/template.html.snap
@@ -149,6 +149,8 @@
 #^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
 ><div [invalidProperty)="val"></div>
 #^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
+><div>[my-property]="val"</div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
 >
 ><!-- Event binding test -->
 #^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng

diff --git a/syntaxes/test/driver.ts b/syntaxes/test/driver.ts
@@ -10,7 +10,7 @@ import 'jasmine';
 import * as cp from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
-import {cases} from './cases';
+import { cases } from './cases';
 
 interface TestCase {
   name: string;
@@ -20,33 +20,36 @@ interface TestCase {
 }
 
 const dummyGrammarDir = 'syntaxes/test/dummy';
-const DUMMY_GRAMMARS =
-    fs.readdirSync(dummyGrammarDir).map((file: string) => path.join(dummyGrammarDir, file));
+const DUMMY_GRAMMARS = fs.readdirSync(dummyGrammarDir).map((file: string) => path.join(dummyGrammarDir, file));
 
 /** Wraps node's spawn in a Promise. */
 function spawn(...args: Parameters<typeof cp.spawn>): Promise<number> {
   const child = cp.spawn(...args);
 
   return new Promise((resolve, reject) => {
     child.on('exit', (code: number) => {
-      if (code === 0)
-        resolve(0);
-      else
-        reject(code);
+      if (code === 0) resolve(0);
+      else reject(code);
     });
   });
 }
 
-async function snapshotTest({scopeName, grammarFiles, testFile}: TestCase): Promise<number> {
+async function snapshotTest({ scopeName, grammarFiles, testFile }: TestCase): Promise<number> {
   grammarFiles.push(...DUMMY_GRAMMARS);
   const grammarOptions = grammarFiles.reduce((acc, file) => [...acc, '-g', file], [] as string[]);
   const extraArgs = process.argv.slice(3);
   const options = [
-    'node_modules/vscode-tmgrammar-test/dist/src/snapshot.js', '-s', scopeName, ...grammarOptions,
-    '-t', testFile, ...extraArgs
+    'node_modules/vscode-tmgrammar-test/dist/src/snapshot.js',
+    '-s',
+    scopeName,
+    ...grammarOptions,
+    '-t',
+    testFile,
+    ...extraArgs,
+    '--expandDiff',
   ];
 
-  return spawn('node', options, {stdio: 'inherit' /* use parent process IO */}).catch(code => code);
+  return spawn('node', options, { stdio: 'inherit' /* use parent process IO */ }).catch((code) => code);
 }
 
 describe('snapshot tests', () => {