Skip to content

Commit 3986db5

Browse files
crisbetocrisbeto
authored
feat: add support for host bindings (#2155)
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.
1 parent a9f769c commit 3986db5

14 files changed

+763
-16
lines changed

‎.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
33
# This file should be checked into version control along with the pnpm-lock.yaml file.
44
.npmrc=974837034
5-
pnpm-lock.yaml=-1736799033
5+
pnpm-lock.yaml=-60247795
66
yarn.lock=1176905511
7-
package.json=-1064085518
7+
package.json=-552185186
88
pnpm-workspace.yaml=1711114604

‎client/src/client.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {OpenOutputChannel, ProjectLoadingFinish, ProjectLoadingStart, SuggestStr
1515
import {GetComponentsWithTemplateFile, GetTcbRequest, GetTemplateLocationForComponent, IsInAngularProject} from '../../common/requests';
1616
import {NodeModule, resolve} from '../../common/resolver';
1717

18-
import {isInsideStringLiteral, isNotTypescriptOrInsideComponentDecorator} from './embedded_support';
18+
import {isInsideStringLiteral, isNotTypescriptOrSupportedDecoratorField} from './embedded_support';
1919

2020
interface GetTcbResponse {
2121
uri: vscode.Uri;
@@ -91,23 +91,23 @@ export class AngularLanguageClient implements vscode.Disposable {
9191
document: vscode.TextDocument, position: vscode.Position,
9292
token: vscode.CancellationToken, next: lsp.ProvideDefinitionSignature) => {
9393
if (await this.isInAngularProject(document) &&
94-
isNotTypescriptOrInsideComponentDecorator(document, position)) {
94+
isNotTypescriptOrSupportedDecoratorField(document, position)) {
9595
return next(document, position, token);
9696
}
9797
},
9898
provideTypeDefinition: async (
9999
document: vscode.TextDocument, position: vscode.Position,
100100
token: vscode.CancellationToken, next) => {
101101
if (await this.isInAngularProject(document) &&
102-
isNotTypescriptOrInsideComponentDecorator(document, position)) {
102+
isNotTypescriptOrSupportedDecoratorField(document, position)) {
103103
return next(document, position, token);
104104
}
105105
},
106106
provideHover: async (
107107
document: vscode.TextDocument, position: vscode.Position,
108108
token: vscode.CancellationToken, next: lsp.ProvideHoverSignature) => {
109109
if (!(await this.isInAngularProject(document)) ||
110-
!isNotTypescriptOrInsideComponentDecorator(document, position)) {
110+
!isNotTypescriptOrSupportedDecoratorField(document, position)) {
111111
return;
112112
}
113113

@@ -131,7 +131,7 @@ export class AngularLanguageClient implements vscode.Disposable {
131131
context: vscode.SignatureHelpContext, token: vscode.CancellationToken,
132132
next: lsp.ProvideSignatureHelpSignature) => {
133133
if (await this.isInAngularProject(document) &&
134-
isNotTypescriptOrInsideComponentDecorator(document, position)) {
134+
isNotTypescriptOrSupportedDecoratorField(document, position)) {
135135
return next(document, position, context, token);
136136
}
137137
},
@@ -141,7 +141,7 @@ export class AngularLanguageClient implements vscode.Disposable {
141141
next: lsp.ProvideCompletionItemsSignature) => {
142142
// If not in inline template, do not perform request forwarding
143143
if (!(await this.isInAngularProject(document)) ||
144-
!isNotTypescriptOrInsideComponentDecorator(document, position)) {
144+
!isNotTypescriptOrSupportedDecoratorField(document, position)) {
145145
return;
146146
}
147147
const angularCompletionsPromise = next(document, position, context, token) as

‎client/src/embedded_support.ts

+16-6
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,25 @@
88
import * as ts from 'typescript';
99
import * as vscode from 'vscode';
1010

11-
/** Determines if the position is inside an inline template, templateUrl, or string in styleUrls. */
12-
export function isNotTypescriptOrInsideComponentDecorator(
11+
const ANGULAR_PROPERTY_ASSIGNMENTS = new Set([
12+
'template',
13+
'templateUrl',
14+
'styleUrls',
15+
'styleUrl',
16+
'host',
17+
]);
18+
19+
/**
20+
* Determines if the position is inside a decorator
21+
* property that supports language service features.
22+
*/
23+
export function isNotTypescriptOrSupportedDecoratorField(
1324
document: vscode.TextDocument, position: vscode.Position): boolean {
1425
if (document.languageId !== 'typescript') {
1526
return true;
1627
}
1728
return isPropertyAssignmentToStringOrStringInArray(
18-
document.getText(), document.offsetAt(position),
19-
['template', 'templateUrl', 'styleUrls', 'styleUrl']);
29+
document.getText(), document.offsetAt(position), ANGULAR_PROPERTY_ASSIGNMENTS);
2030
}
2131

2232
/**
@@ -62,7 +72,7 @@ export function isInsideStringLiteral(
6272
* https://github.com/Microsoft/TypeScript/issues/20055
6373
*/
6474
function isPropertyAssignmentToStringOrStringInArray(
65-
documentText: string, offset: number, propertyAssignmentNames: string[]): boolean {
75+
documentText: string, offset: number, propertyAssignmentNames: Set<string>): boolean {
6676
const scanner = ts.createScanner(ts.ScriptTarget.ESNext, true /* skipTrivia */);
6777
scanner.setText(documentText);
6878

@@ -74,7 +84,7 @@ function isPropertyAssignmentToStringOrStringInArray(
7484
let propertyAssignmentContext = false;
7585
while (token !== ts.SyntaxKind.EndOfFileToken && scanner.getStartPos() < offset) {
7686
if (lastToken === ts.SyntaxKind.Identifier && lastTokenText !== undefined &&
77-
propertyAssignmentNames.includes(lastTokenText) && token === ts.SyntaxKind.ColonToken) {
87+
token === ts.SyntaxKind.ColonToken && propertyAssignmentNames.has(lastTokenText)) {
7888
propertyAssignmentContext = true;
7989
token = scanner.scan();
8090
continue;

‎integration/project/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
},
1717
"angularCompilerOptions": {
1818
"strictTemplates": true,
19+
"typeCheckHostBindings": true,
1920
"strictInjectionParameters": true
2021
}
21-
}
22+
}

‎integration/workspace/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"angularCompilerOptions": {
2525
"strictInjectionParameters": true,
2626
"strictInputAccessModifiers": true,
27-
"strictTemplates": true
27+
"strictTemplates": true,
28+
"typeCheckHostBindings": true
2829
}
2930
}

‎package.json

+12
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,18 @@
212212
"source.ts"
213213
]
214214
},
215+
{
216+
"path": "./syntaxes/host-object-literal.json",
217+
"scopeName": "host-object-literal.ng",
218+
"injectTo": [
219+
"source.ts"
220+
],
221+
"embeddedLanguages": {
222+
"text.html.derivative": "html",
223+
"expression.ng": "javascript",
224+
"source.ts": "typescript"
225+
}
226+
},
215227
{
216228
"path": "./syntaxes/template-tag.json",
217229
"scopeName": "template.tag.ng",

‎pnpm-lock.yaml

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎syntaxes/BUILD.bazel

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ js_run_binary(
1616
"_template-blocks.json",
1717
"_template-tag.json",
1818
"_let-declaration.json",
19+
"_host-object-literal.json",
1920
]
2021
)
2122

@@ -29,6 +30,7 @@ write_source_files(
2930
"template-blocks.json": "_template-blocks.json",
3031
"template-tag.json": "_template-tag.json",
3132
"let-declaration.json": "_let-declaration.json",
33+
"host-object-literal.json": "_host-object-literal.json",
3234
}
3335
)
3436

‎syntaxes/host-object-literal.json

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
{
2+
"scopeName": "host-object-literal.ng",
3+
"injectionSelector": "L:meta.decorator.ts -comment -text.html -expression.ng",
4+
"patterns": [
5+
{
6+
"include": "#hostObjectLiteral"
7+
}
8+
],
9+
"repository": {
10+
"hostObjectLiteral": {
11+
"begin": "(host)\\s*(:)\\s*{",
12+
"beginCaptures": {
13+
"1": {
14+
"name": "meta.object-literal.key.ts"
15+
},
16+
"2": {
17+
"name": "meta.object-literal.key.ts punctuation.separator.key-value.ts"
18+
}
19+
},
20+
"contentName": "hostbindings.ng",
21+
"end": "}",
22+
"patterns": [
23+
{
24+
"include": "#ngHostBindingDynamic"
25+
},
26+
{
27+
"include": "#ngHostBindingStatic"
28+
},
29+
{
30+
"include": "source.ts"
31+
}
32+
]
33+
},
34+
"ngHostBindingDynamic": {
35+
"begin": "\\s*('|\")([\\[(].*?[\\])])(\\1)(:)",
36+
"beginCaptures": {
37+
"1": {
38+
"name": "string"
39+
},
40+
"2": {
41+
"name": "entity.other.attribute-name.html"
42+
},
43+
"3": {
44+
"name": "string"
45+
},
46+
"4": {
47+
"name": "meta.object-literal.key.ts punctuation.separator.key-value.ts"
48+
}
49+
},
50+
"contentName": "hostbinding.dynamic.ng",
51+
"patterns": [
52+
{
53+
"include": "#ngHostBindingDynamicValue"
54+
}
55+
],
56+
"end": "(?=,|})"
57+
},
58+
"ngHostBindingDynamicValue": {
59+
"begin": "\\s*(`|'|\")",
60+
"beginCaptures": {
61+
"1": {
62+
"name": "string"
63+
}
64+
},
65+
"patterns": [
66+
{
67+
"include": "expression.ng"
68+
}
69+
],
70+
"end": "\\1",
71+
"endCaptures": {
72+
"0": {
73+
"name": "string"
74+
}
75+
}
76+
},
77+
"ngHostBindingStatic": {
78+
"begin": "\\s*('|\")?(.*?)(\\1)?\\s*:",
79+
"end": "(?=,|})",
80+
"beginCaptures": {
81+
"1": {
82+
"name": "string"
83+
},
84+
"2": {
85+
"name": "entity.other.attribute-name.html"
86+
},
87+
"3": {
88+
"name": "string"
89+
},
90+
"4": {
91+
"name": "meta.object-literal.key.ts punctuation.separator.key-value.ts"
92+
}
93+
},
94+
"contentName": "hostbinding.static.ng",
95+
"patterns": [
96+
{
97+
"include": "source.ts"
98+
}
99+
]
100+
}
101+
}
102+
}

‎syntaxes/src/build.ts

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import * as fs from 'fs';
1010

1111
import {Expression} from './expression';
12+
import {HostObjectLiteral} from './host-object-literal';
1213
import {InlineStyles} from './inline-styles';
1314
import {InlineTemplate} from './inline-template';
1415
import {Template} from './template';
@@ -59,3 +60,4 @@ build(InlineStyles, 'inline-styles');
5960
build(TemplateBlocks, 'template-blocks');
6061
build(TemplateTag, 'template-tag');
6162
build(LetDeclaration, 'let-declaration');
63+
build(HostObjectLiteral, 'host-object-literal');

‎syntaxes/src/host-object-literal.ts

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {GrammarDefinition} from './types';
10+
11+
/** Highlighting definition for the `host` object of a directive or component. */
12+
export const HostObjectLiteral: GrammarDefinition = {
13+
scopeName: 'host-object-literal.ng',
14+
injectionSelector: 'L:meta.decorator.ts -comment -text.html -expression.ng',
15+
patterns: [{include: '#hostObjectLiteral'}],
16+
repository: {
17+
hostObjectLiteral: {
18+
begin: /(host)\s*(:)\s*{/,
19+
beginCaptures: {
20+
// Key is shown as JS syntax.
21+
1: {name: 'meta.object-literal.key.ts'},
22+
// Colon is shown as JS syntax.
23+
2: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'}
24+
},
25+
contentName: 'hostbindings.ng',
26+
end: /}/,
27+
patterns: [
28+
// Try to match host bindings inside the `host`.
29+
{include: '#ngHostBindingDynamic'},
30+
// Try to match a static binding inside the `host`.
31+
{include: '#ngHostBindingStatic'},
32+
// Include the default TS syntax so that anything that doesn't
33+
// match the above will get the default highlighting.
34+
{include: 'source.ts'},
35+
]
36+
},
37+
38+
// A bound property inside `host`, e.g. `[attr.foo]="expr"` or `(click)="handleClick()"`.
39+
ngHostBindingDynamic: {
40+
begin: /\s*('|")([\[(].*?[\])])(\1)(:)/,
41+
beginCaptures: {
42+
// Opening quote is shown as a string. Only allows single and double quotes, no backticks.
43+
1: {name: 'string'},
44+
// Name is shown as an HTML attribute.
45+
2: {name: 'entity.other.attribute-name.html'},
46+
// Closing quote is shown as a string.
47+
3: {name: 'string'},
48+
// Colon is shown as JS syntax.
49+
4: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'}
50+
},
51+
contentName: 'hostbinding.dynamic.ng',
52+
patterns: [
53+
{include: '#ngHostBindingDynamicValue'},
54+
],
55+
end: /(?=,|})/
56+
},
57+
58+
// Value of a bound property inside `host`.
59+
ngHostBindingDynamicValue: {
60+
begin: /\s*(`|'|")/,
61+
beginCaptures: {
62+
// Opening quote is shown as a string. Allows backticks as well.
63+
1: {name: 'string'},
64+
},
65+
patterns: [
66+
// Content is shown as an Angular expression.
67+
{include: 'expression.ng'},
68+
],
69+
// Ends on the same kind of quote as the opening.
70+
// @ts-ignore
71+
end: /\1/,
72+
endCaptures: {
73+
// Closing quote is shown as a string.
74+
0: {name: 'string'},
75+
}
76+
},
77+
78+
// Static value inside `host`.
79+
ngHostBindingStatic: {
80+
// Note that we need to allow both quoted and non-quoted keys.
81+
begin: /\s*('|")?(.*?)(\1)?\s*:/,
82+
end: /(?=,|})/,
83+
beginCaptures: {
84+
// Opening quote is shown as a string. Only allows single and double quotes, no backticks.
85+
1: {name: 'string'},
86+
// Name is shown as an HTML attribute.
87+
2: {name: 'entity.other.attribute-name.html'},
88+
// Closing quote is shown as a string.
89+
3: {name: 'string'},
90+
// Colon is shown as JS syntax.
91+
4: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'},
92+
},
93+
contentName: 'hostbinding.static.ng',
94+
patterns: [
95+
// Use TypeScript highlighting for the value. This allows us to deal
96+
// with things like escaped strings and variables correctly.
97+
{include: 'source.ts'},
98+
]
99+
},
100+
}
101+
};

0 commit comments

Comments
 (0)