feat: add support for host bindings (angular#2155)

crisbeto · web-flow · commit 3986db58b6f7 · 2025-03-17T09:02:40.000+01:00
Makes the necessary changes on the vscode extension side to enable angular/angular#60267, including: * Looking for completions, quick info etc inside the `host` property. * Syntax highlighting for the `host` object literal.
diff --git a/.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU= b/.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=
@@ -2,7 +2,7 @@
 # Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=974837034
-pnpm-lock.yaml=-1736799033
+pnpm-lock.yaml=-60247795
 yarn.lock=1176905511
-package.json=-1064085518
+package.json=-552185186
 pnpm-workspace.yaml=1711114604
diff --git a/client/src/client.ts b/client/src/client.ts
@@ -15,7 +15,7 @@ import {OpenOutputChannel, ProjectLoadingFinish, ProjectLoadingStart, SuggestStr
 import {GetComponentsWithTemplateFile, GetTcbRequest, GetTemplateLocationForComponent, IsInAngularProject} from '../../common/requests';
 import {NodeModule, resolve} from '../../common/resolver';
 
-import {isInsideStringLiteral, isNotTypescriptOrInsideComponentDecorator} from './embedded_support';
+import {isInsideStringLiteral, isNotTypescriptOrSupportedDecoratorField} from './embedded_support';
 
 interface GetTcbResponse {
   uri: vscode.Uri;
@@ -91,23 +91,23 @@ export class AngularLanguageClient implements vscode.Disposable {
             document: vscode.TextDocument, position: vscode.Position,
             token: vscode.CancellationToken, next: lsp.ProvideDefinitionSignature) => {
           if (await this.isInAngularProject(document) &&
-              isNotTypescriptOrInsideComponentDecorator(document, position)) {
+              isNotTypescriptOrSupportedDecoratorField(document, position)) {
             return next(document, position, token);
           }
         },
         provideTypeDefinition: async (
             document: vscode.TextDocument, position: vscode.Position,
             token: vscode.CancellationToken, next) => {
           if (await this.isInAngularProject(document) &&
-              isNotTypescriptOrInsideComponentDecorator(document, position)) {
+              isNotTypescriptOrSupportedDecoratorField(document, position)) {
             return next(document, position, token);
           }
         },
         provideHover: async (
             document: vscode.TextDocument, position: vscode.Position,
             token: vscode.CancellationToken, next: lsp.ProvideHoverSignature) => {
           if (!(await this.isInAngularProject(document)) ||
-              !isNotTypescriptOrInsideComponentDecorator(document, position)) {
+              !isNotTypescriptOrSupportedDecoratorField(document, position)) {
             return;
           }
 
@@ -131,7 +131,7 @@ export class AngularLanguageClient implements vscode.Disposable {
             context: vscode.SignatureHelpContext, token: vscode.CancellationToken,
             next: lsp.ProvideSignatureHelpSignature) => {
           if (await this.isInAngularProject(document) &&
-              isNotTypescriptOrInsideComponentDecorator(document, position)) {
+              isNotTypescriptOrSupportedDecoratorField(document, position)) {
             return next(document, position, context, token);
           }
         },
@@ -141,7 +141,7 @@ export class AngularLanguageClient implements vscode.Disposable {
             next: lsp.ProvideCompletionItemsSignature) => {
           // If not in inline template, do not perform request forwarding
           if (!(await this.isInAngularProject(document)) ||
-              !isNotTypescriptOrInsideComponentDecorator(document, position)) {
+              !isNotTypescriptOrSupportedDecoratorField(document, position)) {
             return;
           }
           const angularCompletionsPromise = next(document, position, context, token) as
diff --git a/client/src/embedded_support.ts b/client/src/embedded_support.ts
@@ -8,15 +8,25 @@
 import * as ts from 'typescript';
 import * as vscode from 'vscode';
 
-/** Determines if the position is inside an inline template, templateUrl, or string in styleUrls. */
-export function isNotTypescriptOrInsideComponentDecorator(
+const ANGULAR_PROPERTY_ASSIGNMENTS = new Set([
+  'template',
+  'templateUrl',
+  'styleUrls',
+  'styleUrl',
+  'host',
+]);
+
+/**
+ * Determines if the position is inside a decorator
+ * property that supports language service features.
+ */
+export function isNotTypescriptOrSupportedDecoratorField(
     document: vscode.TextDocument, position: vscode.Position): boolean {
   if (document.languageId !== 'typescript') {
     return true;
   }
   return isPropertyAssignmentToStringOrStringInArray(
-      document.getText(), document.offsetAt(position),
-      ['template', 'templateUrl', 'styleUrls', 'styleUrl']);
+      document.getText(), document.offsetAt(position), ANGULAR_PROPERTY_ASSIGNMENTS);
 }
 
 /**
@@ -62,7 +72,7 @@ export function isInsideStringLiteral(
  * https://github.com/Microsoft/TypeScript/issues/20055
  */
 function isPropertyAssignmentToStringOrStringInArray(
-    documentText: string, offset: number, propertyAssignmentNames: string[]): boolean {
+    documentText: string, offset: number, propertyAssignmentNames: Set<string>): boolean {
   const scanner = ts.createScanner(ts.ScriptTarget.ESNext, true /* skipTrivia */);
   scanner.setText(documentText);
 
@@ -74,7 +84,7 @@ function isPropertyAssignmentToStringOrStringInArray(
   let propertyAssignmentContext = false;
   while (token !== ts.SyntaxKind.EndOfFileToken && scanner.getStartPos() < offset) {
     if (lastToken === ts.SyntaxKind.Identifier && lastTokenText !== undefined &&
-        propertyAssignmentNames.includes(lastTokenText) && token === ts.SyntaxKind.ColonToken) {
+        token === ts.SyntaxKind.ColonToken && propertyAssignmentNames.has(lastTokenText)) {
       propertyAssignmentContext = true;
       token = scanner.scan();
       continue;
diff --git a/integration/project/tsconfig.json b/integration/project/tsconfig.json
@@ -16,6 +16,7 @@
   },
   "angularCompilerOptions": {
     "strictTemplates": true,
+    "typeCheckHostBindings": true,
     "strictInjectionParameters": true
   }
-}
+}
diff --git a/integration/workspace/tsconfig.json b/integration/workspace/tsconfig.json
@@ -24,6 +24,7 @@
   "angularCompilerOptions": {
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": true,
+    "typeCheckHostBindings": true
   }
 }
diff --git a/package.json b/package.json
@@ -212,6 +212,18 @@
           "source.ts"
         ]
       },
+      {
+        "path": "./syntaxes/host-object-literal.json",
+        "scopeName": "host-object-literal.ng",
+        "injectTo": [
+          "source.ts"
+        ],
+        "embeddedLanguages": {
+          "text.html.derivative": "html",
+          "expression.ng": "javascript",
+          "source.ts": "typescript"
+        }
+      },
       {
         "path": "./syntaxes/template-tag.json",
         "scopeName": "template.tag.ng",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/syntaxes/BUILD.bazel b/syntaxes/BUILD.bazel
@@ -16,6 +16,7 @@ js_run_binary(
         "_template-blocks.json",
         "_template-tag.json",
         "_let-declaration.json",
+        "_host-object-literal.json",
     ]
 )
 
@@ -29,6 +30,7 @@ write_source_files(
         "template-blocks.json": "_template-blocks.json",
         "template-tag.json": "_template-tag.json",
         "let-declaration.json": "_let-declaration.json",
+        "host-object-literal.json": "_host-object-literal.json",
     }
 )
 
diff --git a/syntaxes/host-object-literal.json b/syntaxes/host-object-literal.json
@@ -0,0 +1,102 @@
+{
+  "scopeName": "host-object-literal.ng",
+  "injectionSelector": "L:meta.decorator.ts -comment -text.html -expression.ng",
+  "patterns": [
+    {
+      "include": "#hostObjectLiteral"
+    }
+  ],
+  "repository": {
+    "hostObjectLiteral": {
+      "begin": "(host)\\s*(:)\\s*{",
+      "beginCaptures": {
+        "1": {
+          "name": "meta.object-literal.key.ts"
+        },
+        "2": {
+          "name": "meta.object-literal.key.ts punctuation.separator.key-value.ts"
+        }
+      },
+      "contentName": "hostbindings.ng",
+      "end": "}",
+      "patterns": [
+        {
+          "include": "#ngHostBindingDynamic"
+        },
+        {
+          "include": "#ngHostBindingStatic"
+        },
+        {
+          "include": "source.ts"
+        }
+      ]
+    },
+    "ngHostBindingDynamic": {
+      "begin": "\\s*('|\")([\\[(].*?[\\])])(\\1)(:)",
+      "beginCaptures": {
+        "1": {
+          "name": "string"
+        },
+        "2": {
+          "name": "entity.other.attribute-name.html"
+        },
+        "3": {
+          "name": "string"
+        },
+        "4": {
+          "name": "meta.object-literal.key.ts punctuation.separator.key-value.ts"
+        }
+      },
+      "contentName": "hostbinding.dynamic.ng",
+      "patterns": [
+        {
+          "include": "#ngHostBindingDynamicValue"
+        }
+      ],
+      "end": "(?=,|})"
+    },
+    "ngHostBindingDynamicValue": {
+      "begin": "\\s*(`|'|\")",
+      "beginCaptures": {
+        "1": {
+          "name": "string"
+        }
+      },
+      "patterns": [
+        {
+          "include": "expression.ng"
+        }
+      ],
+      "end": "\\1",
+      "endCaptures": {
+        "0": {
+          "name": "string"
+        }
+      }
+    },
+    "ngHostBindingStatic": {
+      "begin": "\\s*('|\")?(.*?)(\\1)?\\s*:",
+      "end": "(?=,|})",
+      "beginCaptures": {
+        "1": {
+          "name": "string"
+        },
+        "2": {
+          "name": "entity.other.attribute-name.html"
+        },
+        "3": {
+          "name": "string"
+        },
+        "4": {
+          "name": "meta.object-literal.key.ts punctuation.separator.key-value.ts"
+        }
+      },
+      "contentName": "hostbinding.static.ng",
+      "patterns": [
+        {
+          "include": "source.ts"
+        }
+      ]
+    }
+  }
+}
diff --git a/syntaxes/src/build.ts b/syntaxes/src/build.ts
@@ -9,6 +9,7 @@
 import * as fs from 'fs';
 
 import {Expression} from './expression';
+import {HostObjectLiteral} from './host-object-literal';
 import {InlineStyles} from './inline-styles';
 import {InlineTemplate} from './inline-template';
 import {Template} from './template';
@@ -59,3 +60,4 @@ build(InlineStyles, 'inline-styles');
 build(TemplateBlocks, 'template-blocks');
 build(TemplateTag, 'template-tag');
 build(LetDeclaration, 'let-declaration');
+build(HostObjectLiteral, 'host-object-literal');
diff --git a/syntaxes/src/host-object-literal.ts b/syntaxes/src/host-object-literal.ts
@@ -0,0 +1,101 @@
+/**
+ * @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';
+
+/** Highlighting definition for the `host` object of a directive or component. */
+export const HostObjectLiteral: GrammarDefinition = {
+  scopeName: 'host-object-literal.ng',
+  injectionSelector: 'L:meta.decorator.ts -comment -text.html -expression.ng',
+  patterns: [{include: '#hostObjectLiteral'}],
+  repository: {
+    hostObjectLiteral: {
+      begin: /(host)\s*(:)\s*{/,
+      beginCaptures: {
+        // Key is shown as JS syntax.
+        1: {name: 'meta.object-literal.key.ts'},
+        // Colon is shown as JS syntax.
+        2: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'}
+      },
+      contentName: 'hostbindings.ng',
+      end: /}/,
+      patterns: [
+        // Try to match host bindings inside the `host`.
+        {include: '#ngHostBindingDynamic'},
+        // Try to match a static binding inside the `host`.
+        {include: '#ngHostBindingStatic'},
+        // Include the default TS syntax so that anything that doesn't
+        // match the above will get the default highlighting.
+        {include: 'source.ts'},
+      ]
+    },
+
+    // A bound property inside `host`, e.g. `[attr.foo]="expr"` or `(click)="handleClick()"`.
+    ngHostBindingDynamic: {
+      begin: /\s*('|")([\[(].*?[\])])(\1)(:)/,
+      beginCaptures: {
+        // Opening quote is shown as a string. Only allows single and double quotes, no backticks.
+        1: {name: 'string'},
+        // Name is shown as an HTML attribute.
+        2: {name: 'entity.other.attribute-name.html'},
+        // Closing quote is shown as a string.
+        3: {name: 'string'},
+        // Colon is shown as JS syntax.
+        4: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'}
+      },
+      contentName: 'hostbinding.dynamic.ng',
+      patterns: [
+        {include: '#ngHostBindingDynamicValue'},
+      ],
+      end: /(?=,|})/
+    },
+
+    // Value of a bound property inside `host`.
+    ngHostBindingDynamicValue: {
+      begin: /\s*(`|'|")/,
+      beginCaptures: {
+        // Opening quote is shown as a string. Allows backticks as well.
+        1: {name: 'string'},
+      },
+      patterns: [
+        // Content is shown as an Angular expression.
+        {include: 'expression.ng'},
+      ],
+      // Ends on the same kind of quote as the opening.
+      // @ts-ignore
+      end: /\1/,
+      endCaptures: {
+        // Closing quote is shown as a string.
+        0: {name: 'string'},
+      }
+    },
+
+    // Static value inside `host`.
+    ngHostBindingStatic: {
+      // Note that we need to allow both quoted and non-quoted keys.
+      begin: /\s*('|")?(.*?)(\1)?\s*:/,
+      end: /(?=,|})/,
+      beginCaptures: {
+        // Opening quote is shown as a string. Only allows single and double quotes, no backticks.
+        1: {name: 'string'},
+        // Name is shown as an HTML attribute.
+        2: {name: 'entity.other.attribute-name.html'},
+        // Closing quote is shown as a string.
+        3: {name: 'string'},
+        // Colon is shown as JS syntax.
+        4: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'},
+      },
+      contentName: 'hostbinding.static.ng',
+      patterns: [
+        // Use TypeScript highlighting for the value. This allows us to deal
+        // with things like escaped strings and variables correctly.
+        {include: 'source.ts'},
+      ]
+    },
+  }
+};
diff --git a/syntaxes/test/cases.ts b/syntaxes/test/cases.ts
diff --git a/syntaxes/test/data/host-object-literal.ts b/syntaxes/test/data/host-object-literal.ts
diff --git a/syntaxes/test/data/host-object-literal.ts.snap b/syntaxes/test/data/host-object-literal.ts.snap

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@`
`16`	`16`	`},`
`17`	`17`	`"angularCompilerOptions": {`
`18`	`18`	`"strictTemplates": true,`
	`19`	`+ "typeCheckHostBindings": true,`
`19`	`20`	`"strictInjectionParameters": true`
`20`	`21`	`}`
`21`		`-}`
	`22`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@`
`24`	`24`	`"angularCompilerOptions": {`
`25`	`25`	`"strictInjectionParameters": true,`
`26`	`26`	`"strictInputAccessModifiers": true,`
`27`		`- "strictTemplates": true`
	`27`	`+ "strictTemplates": true,`
	`28`	`+ "typeCheckHostBindings": true`
`28`	`29`	`}`
`29`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ js_run_binary(`
`16`	`16`	`"_template-blocks.json",`
`17`	`17`	`"_template-tag.json",`
`18`	`18`	`"_let-declaration.json",`
	`19`	`+ "_host-object-literal.json",`
`19`	`20`	`]`
`20`	`21`	`)`
`21`	`22`
`@@ -29,6 +30,7 @@ write_source_files(`
`29`	`30`	`"template-blocks.json": "_template-blocks.json",`
`30`	`31`	`"template-tag.json": "_template-tag.json",`
`31`	`32`	`"let-declaration.json": "_let-declaration.json",`
	`33`	`+ "host-object-literal.json": "_host-object-literal.json",`
`32`	`34`	`}`
`33`	`35`	`)`
`34`	`36`