Skip to content

feat(compiler-cli): enable type checking of host bindings by default #63654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
crisbeto wants to merge 1 commit into from
Closed

feat(compiler-cli): enable type checking of host bindings by default #63654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions adev/src/app/features/update/update.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,10 @@ export default class UpdateComponent {
}
}

@HostListener('click', ['$event.target'])
copyCode({tagName, textContent}: Element) {
@HostListener('click', ['$event'])
copyCode(event: Event) {
const {tagName, textContent} = event.target as Element;

if (tagName === 'CODE') {
this.clipboard.copy(textContent!);
this.snackBar.open('Copied to clipboard', '', {duration: 2000});
Expand Down
3 changes: 1 addition & 2 deletions modules/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
],
"angularCompilerOptions": {
"strictTemplates": true,
"skipTemplateCodegen": true,
"typeCheckHostBindings": true
"skipTemplateCodegen": true
}
}
2 changes: 1 addition & 1 deletion packages/compiler-cli/src/ngtsc/core/src/compiler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1461,7 +1461,7 @@ export class NgCompiler {
const supportJitMode = this.options['supportJitMode'] ?? true;
const supportTestBed = this.options['supportTestBed'] ?? true;
const externalRuntimeStyles = this.options['externalRuntimeStyles'] ?? false;
const typeCheckHostBindings = this.options.typeCheckHostBindings ?? false;
const typeCheckHostBindings = this.options.typeCheckHostBindings ?? true;

// Libraries compiled in partial mode could potentially be used with TestBed within an
// application. Since this is not known at library compilation time, support is required to
Expand Down
6 changes: 3 additions & 3 deletions packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/GOLDEN_PARTIAL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
export class MyCmp {
}
MyCmp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyCmp, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyCmp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyCmp, isStandalone: true, selector: "my-cmp", host: { attributes: { "literal1": "foo" }, listeners: { "event1": "foo()" }, properties: { "attr.attr1": "foo", "prop1": "foo", "class.class1": "false", "style.style1": "true", "class": "foo", "style": "foo" } }, ngImport: i0, template: `
MyCmp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyCmp, isStandalone: true, selector: "my-cmp", host: { attributes: { "literal1": "foo" }, listeners: { "event1": "foo()" }, properties: { "attr.attr1": "foo", "id": "foo", "class.class1": "false", "style.style1": "true", "class": "foo", "style": "foo" } }, ngImport: i0, template: `
<some-elem
literal1="foo"
(event1)="foo()"
Expand All @@ -41,7 +41,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
'literal1': 'foo',
'(event1)': 'foo()',
'[attr.attr1]': 'foo',
'[prop1]': 'foo',
'[id]': 'foo',
'[class.class1]': 'false',
'[style.style1]': 'true',
'[class]': 'foo',
Expand All @@ -60,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
attr.attrInterp1="interp {{foo}}"
propInterp1="interp {{foo}}"
/>
`
`,
}]
}] });

Expand Down
33 changes: 14 additions & 19 deletions packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/TEST_CASES.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
{
"$schema": "../test_case_schema.json",
"cases": [
{
"description": "should emit bindings in the correct order",
"inputFiles": [
"order_bindings.ts"
],
"expectations": [
{
"failureMessage": "Invalid binding code",
"files": [
"order_bindings.js"
]
}
]
}
]
}

"$schema": "../test_case_schema.json",
"cases": [
{
"description": "should emit bindings in the correct order",
"inputFiles": ["order_bindings.ts"],
"expectations": [
{
"failureMessage": "Invalid binding code",
"files": ["order_bindings.js"]
}
]
}
]
}
89 changes: 59 additions & 30 deletions ...-cli/test/compliance/test_cases/r3_view_compiler_bindings/host_bindings/GOLDEN_PARTIAL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,18 @@ export declare class MyModule {
import { Directive, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class HostBindingDir {
constructor() {
this.getData = () => undefined;
}
}
HostBindingDir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingDir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
HostBindingDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: HostBindingDir, isStandalone: false, selector: "[hostBindingDir]", host: { properties: { "id": "getData()?.id" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingDir, decorators: [{
type: Directive,
args: [{
selector: '[hostBindingDir]', host: { '[id]': 'getData()?.id' },
standalone: false
selector: '[hostBindingDir]',
host: { '[id]': 'getData()?.id' },
standalone: false,
}]
}] });
export class MyModule {
Expand All @@ -76,9 +80,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class HostBindingDir {
getData?: () => {
getData: () => {
id: number;
};
} | undefined;
static ɵfac: i0.ɵɵFactoryDeclaration<HostBindingDir, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<HostBindingDir, "[hostBindingDir]", never, {}, {}, never, never, false, never>;
}
Expand Down Expand Up @@ -620,8 +624,8 @@ export declare class MyDirective {
import { Component, HostListener } from '@angular/core';
import * as i0 from "@angular/core";
export class MyComponent {
start() {
}
start() { }
done() { }
}
MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: false, selector: "my-comp", host: { listeners: { "@animation.done": "done()", "@animation.start": "start()" } }, ngImport: i0, template: '', isInline: true });
Expand All @@ -633,7 +637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
host: {
'(@animation.done)': 'done()',
},
standalone: false
standalone: false,
}]
}], propDecorators: { start: [{
type: HostListener,
Expand All @@ -646,6 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
import * as i0 from "@angular/core";
export declare class MyComponent {
start(): void;
done(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-comp", never, {}, {}, never, never, false, never>;
}
Expand All @@ -656,10 +661,11 @@ export declare class MyComponent {
import { Component, HostListener } from '@angular/core';
import * as i0 from "@angular/core";
export class MyComponent {
start() {
}
click() {
}
start() { }
click() { }
mousedown() { }
done() { }
mouseup() { }
}
MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: false, selector: "my-comp", host: { listeners: { "mousedown": "mousedown()", "@animation.done": "done()", "mouseup": "mouseup()", "@animation.start": "start()", "click": "click()" } }, ngImport: i0, template: '', isInline: true });
Expand All @@ -673,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
'(@animation.done)': 'done()',
'(mouseup)': 'mouseup()',
},
standalone: false
standalone: false,
}]
}], propDecorators: { start: [{
type: HostListener,
Expand All @@ -690,6 +696,9 @@ import * as i0 from "@angular/core";
export declare class MyComponent {
start(): void;
click(): void;
mousedown(): void;
done(): void;
mouseup(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-comp", never, {}, {}, never, never, false, never>;
}
Expand Down Expand Up @@ -837,40 +846,55 @@ export declare class MyModule {
****************************************************************************************************/
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
export class HostBindingDir {
export class HostBindingLinkDir {
constructor() {
this.evil = 'evil';
}
}
HostBindingDir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingDir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
HostBindingDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: HostBindingDir, isStandalone: true, selector: "[hostBindingDir]", host: { properties: { "innerHtml": "evil", "href": "evil", "attr.style": "evil", "src": "evil", "sandbox": "evil" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingDir, decorators: [{
HostBindingLinkDir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingLinkDir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
HostBindingLinkDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: HostBindingLinkDir, isStandalone: true, selector: "a[hostBindingLinkDir]", host: { properties: { "innerHtml": "evil", "href": "evil", "attr.style": "evil" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingLinkDir, decorators: [{
type: Directive,
args: [{
selector: '[hostBindingDir]',
selector: 'a[hostBindingLinkDir]',
host: {
'[innerHtml]': 'evil',
'[href]': 'evil',
'[attr.style]': 'evil',
},
}]
}] });
export class HostBindingImageDir {
constructor() {
this.evil = 'evil';
}
}
HostBindingImageDir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingImageDir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
HostBindingImageDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: HostBindingImageDir, isStandalone: true, selector: "img[hostBindingImgDir]", host: { properties: { "innerHtml": "evil", "attr.style": "evil", "src": "evil" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingImageDir, decorators: [{
type: Directive,
args: [{
selector: 'img[hostBindingImgDir]',
host: {
'[innerHtml]': 'evil',
'[attr.style]': 'evil',
'[src]': 'evil',
'[sandbox]': 'evil',
},
}]
}] });
export class HostBindingDir2 {
export class HostBindingIframeDir {
constructor() {
this.evil = 'evil';
}
}
HostBindingDir2.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingDir2, deps: [], target: i0.ɵɵFactoryTarget.Directive });
HostBindingDir2.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: HostBindingDir2, isStandalone: true, selector: "a", host: { properties: { "innerHtml": "evil", "href": "evil", "attr.style": "evil", "src": "evil", "sandbox": "evil" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingDir2, decorators: [{
HostBindingIframeDir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingIframeDir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
HostBindingIframeDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: HostBindingIframeDir, isStandalone: true, selector: "iframe[hostBindingIframeDir]", host: { properties: { "innerHtml": "evil", "attr.style": "evil", "src": "evil", "sandbox": "evil" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: HostBindingIframeDir, decorators: [{
type: Directive,
args: [{
selector: 'a',
selector: 'iframe[hostBindingIframeDir]',
host: {
'[innerHtml]': 'evil',
'[href]': 'evil',
'[attr.style]': 'evil',
'[src]': 'evil',
'[sandbox]': 'evil',
Expand All @@ -882,15 +906,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
* PARTIAL FILE: sanitization.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class HostBindingDir {
export declare class HostBindingLinkDir {
evil: string;
static ɵfac: i0.ɵɵFactoryDeclaration<HostBindingDir, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<HostBindingDir, "[hostBindingDir]", never, {}, {}, never, never, true, never>;
static ɵfac: i0.ɵɵFactoryDeclaration<HostBindingLinkDir, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<HostBindingLinkDir, "a[hostBindingLinkDir]", never, {}, {}, never, never, true, never>;
}
export declare class HostBindingDir2 {
export declare class HostBindingImageDir {
evil: string;
static ɵfac: i0.ɵɵFactoryDeclaration<HostBindingDir2, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<HostBindingDir2, "a", never, {}, {}, never, never, true, never>;
static ɵfac: i0.ɵɵFactoryDeclaration<HostBindingImageDir, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<HostBindingImageDir, "img[hostBindingImgDir]", never, {}, {}, never, never, true, never>;
}
export declare class HostBindingIframeDir {
evil: string;
static ɵfac: i0.ɵɵFactoryDeclaration<HostBindingIframeDir, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<HostBindingIframeDir, "iframe[hostBindingIframeDir]", never, {}, {}, never, never, true, never>;
}

/****************************************************************************************************
Expand Down
17 changes: 9 additions & 8 deletions ...ompliance/test_cases/r3_view_compiler_bindings/host_bindings/chain_synthetic_listeners.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import {Component, HostListener} from '@angular/core';

@Component({
selector: 'my-comp',
template: '',
host: {
'(@animation.done)': 'done()',
},
standalone: false
selector: 'my-comp',
template: '',
host: {
'(@animation.done)': 'done()',
},
standalone: false,
})
export class MyComponent {
@HostListener('@animation.start')
start() {
}
start() {}

done() {}
}
26 changes: 14 additions & 12 deletions ...nce/test_cases/r3_view_compiler_bindings/host_bindings/chain_synthetic_listeners_mixed.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import {Component, HostListener} from '@angular/core';

@Component({
selector: 'my-comp',
template: '',
host: {
'(mousedown)': 'mousedown()',
'(@animation.done)': 'done()',
'(mouseup)': 'mouseup()',
},
standalone: false
selector: 'my-comp',
template: '',
host: {
'(mousedown)': 'mousedown()',
'(@animation.done)': 'done()',
'(mouseup)': 'mouseup()',
},
standalone: false,
})
export class MyComponent {
@HostListener('@animation.start')
start() {
}
start() {}

@HostListener('click')
click() {
}
click() {}

mousedown() {}
done() {}
mouseup() {}
}
16 changes: 9 additions & 7 deletions ...ance/test_cases/r3_view_compiler_bindings/host_bindings/host_bindings_with_temporaries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import {Directive, NgModule} from '@angular/core';

@Directive({
selector: '[hostBindingDir]', host: { '[id]': 'getData()?.id' },
standalone: false
selector: '[hostBindingDir]',
host: {'[id]': 'getData()?.id'},
standalone: false,
})
export class HostBindingDir {
getData?: () => {
id: number
};
getData: () =>
| {
id: number;
}
| undefined = () => undefined;
}

@NgModule({declarations: [HostBindingDir]})
export class MyModule {
}
export class MyModule {}
19 changes: 13 additions & 6 deletions ...er-cli/test/compliance/test_cases/r3_view_compiler_bindings/host_bindings/sanitization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
hostBindings: function HostBindingDir_HostBindings(rf, ctx) {
hostBindings: function HostBindingLinkDir_HostBindings(rf, ctx) {
if (rf & 2) {
$r3$.ɵɵdomProperty("innerHTML", ctx.evil, $r3$.ɵɵsanitizeHtml)("href", ctx.evil, $r3$.ɵɵsanitizeUrlOrResourceUrl)("src", ctx.evil, $r3$.ɵɵsanitizeUrlOrResourceUrl)("sandbox", ctx.evil, $r3$.ɵɵvalidateIframeAttribute);
$r3$.ɵɵdomProperty("innerHTML", ctx.evil, $r3$.ɵɵsanitizeHtml)("href", ctx.evil, $r3$.ɵɵsanitizeUrl);
$r3$.ɵɵattribute("style", ctx.evil, $r3$.ɵɵsanitizeStyle);
}
}
}
…
hostBindings: function HostBindingDir2_HostBindings(rf, ctx) {
hostBindings: function HostBindingImageDir_HostBindings(rf, ctx) {
if (rf & 2) {
$r3$.ɵɵdomProperty("innerHTML", ctx.evil, $r3$.ɵɵsanitizeHtml)("href", ctx.evil, $r3$.ɵɵsanitizeUrl)("src", ctx.evil)("sandbox", ctx.evil, $r3$.ɵɵvalidateIframeAttribute);
$r3$.ɵɵdomProperty("innerHTML", ctx.evil, $r3$.ɵɵsanitizeHtml)("src", ctx.evil, $r3$.ɵɵsanitizeUrl);
$r3$.ɵɵattribute("style", ctx.evil, $r3$.ɵɵsanitizeStyle);
}
}
}
…
hostBindings: function HostBindingIframeDir_HostBindings(rf, ctx) {
if (rf & 2) {
$r3$.ɵɵdomProperty("innerHTML", ctx.evil, $r3$.ɵɵsanitizeHtml)("src", ctx.evil, $r3$.ɵɵsanitizeResourceUrl)("sandbox", ctx.evil, $r3$.ɵɵvalidateIframeAttribute);
$r3$.ɵɵattribute("style", ctx.evil, $r3$.ɵɵsanitizeStyle);
}
}
Loading