From 18c668952ee057f3aaa1d9f4cd754b36f82bab4e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 7 Aug 2017 23:24:13 +0200 Subject: [PATCH] build: disallow usage of HostBinding and HostListener (#6307) Adds the `HostBinding` and `HostListener` decorators to the banned symbols list for consistency's sake. Refactors the handful of places that were using them. Relates to #6304. --- src/lib/button-toggle/button-toggle.ts | 20 +++++++------------- src/lib/progress-bar/progress-bar.ts | 14 ++++---------- src/lib/progress-spinner/progress-spinner.ts | 11 ++++------- src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 3 +-- tslint.json | 10 +++++++++- 5 files changed, 25 insertions(+), 33 deletions(-) diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index a03e063e8df6..43fb897df922 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -13,7 +13,6 @@ import { ElementRef, Renderer2, EventEmitter, - HostBinding, Input, OnInit, OnDestroy, @@ -264,7 +263,10 @@ export class MdButtonToggleGroupMultiple extends _MdButtonToggleGroupMixinBase changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.mat-button-toggle-standalone]': '!buttonToggleGroup && !buttonToggleGroupMultiple', - 'class': 'mat-button-toggle' + '[class.mat-button-toggle-checked]': 'checked', + '[class.mat-button-toggle-disabled]': 'disabled', + 'class': 'mat-button-toggle', + '[attr.id]': 'id', } }) export class MdButtonToggle implements OnInit, OnDestroy { @@ -311,21 +313,14 @@ export class MdButtonToggle implements OnInit, OnDestroy { } /** The unique ID for this button toggle. */ - @HostBinding() - @Input() - id: string; + @Input() id: string; /** HTML's 'name' attribute used to group radios for unique selection. */ - @Input() - name: string; + @Input() name: string; /** Whether the button is checked. */ - @HostBinding('class.mat-button-toggle-checked') @Input() - get checked(): boolean { - return this._checked; - } - + get checked(): boolean { return this._checked; } set checked(newCheckedState: boolean) { if (this._isSingleSelector && newCheckedState) { // Notify all button toggles with the same name (in the same group) to un-check. @@ -356,7 +351,6 @@ export class MdButtonToggle implements OnInit, OnDestroy { } /** Whether the button is disabled. */ - @HostBinding('class.mat-button-toggle-disabled') @Input() get disabled(): boolean { return this._disabled || (this.buttonToggleGroup != null && this.buttonToggleGroup.disabled) || diff --git a/src/lib/progress-bar/progress-bar.ts b/src/lib/progress-bar/progress-bar.ts index 603a61e350a3..490af933e810 100644 --- a/src/lib/progress-bar/progress-bar.ts +++ b/src/lib/progress-bar/progress-bar.ts @@ -6,12 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import { - Component, - ChangeDetectionStrategy, - HostBinding, - Input, -} from '@angular/core'; +import {Component, ChangeDetectionStrategy, Input} from '@angular/core'; // TODO(josephperrott): Benchpress tests. // TODO(josephperrott): Add ARIA attributes for progressbar "for". @@ -27,6 +22,8 @@ import { 'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', + '[attr.aria-valuenow]': 'value', + '[attr.mode]': 'mode', '[class.mat-primary]': 'color == "primary"', '[class.mat-accent]': 'color == "accent"', '[class.mat-warn]': 'color == "warn"', @@ -44,7 +41,6 @@ export class MdProgressBar { /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */ @Input() - @HostBinding('attr.aria-valuenow') get value() { return this._value; } set value(v: number) { this._value = clamp(v || 0); } @@ -62,9 +58,7 @@ export class MdProgressBar { * 'determinate'. * Mirrored to mode attribute. */ - @Input() - @HostBinding('attr.mode') - mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate'; + @Input() mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate'; /** Gets the current transform value for the progress bar's primary indicator. */ _primaryTransform() { diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index 7320c54ab7cf..5623900437b7 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/src/lib/progress-spinner/progress-spinner.ts @@ -8,7 +8,6 @@ import { Component, - HostBinding, ChangeDetectionStrategy, OnDestroy, Input, @@ -72,7 +71,9 @@ export const _MdProgressSpinnerMixinBase = mixinColor(MdProgressSpinnerBase, 'pr host: { 'role': 'progressbar', '[attr.aria-valuemin]': '_ariaValueMin', - '[attr.aria-valuemax]': '_ariaValueMax' + '[attr.aria-valuemax]': '_ariaValueMax', + '[attr.aria-valuenow]': 'value', + '[attr.mode]': 'mode', }, inputs: ['color'], templateUrl: 'progress-spinner.html', @@ -132,7 +133,6 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase /** Value of the progress circle. It is bound to the host as the attribute aria-valuenow. */ @Input() - @HostBinding('attr.aria-valuenow') get value() { if (this.mode == 'determinate') { return this._value; @@ -154,11 +154,8 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase * Input must be one of the values from ProgressMode, defaults to 'determinate'. * mode is bound to the host as the attribute host. */ - @HostBinding('attr.mode') @Input() - get mode() { - return this._mode; - } + get mode() { return this._mode; } set mode(mode: ProgressSpinnerMode) { if (mode !== this._mode) { if (mode === 'indeterminate') { diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts index 3644ed567c01..5531b5e8ea5e 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts @@ -11,7 +11,6 @@ import { Component, Directive, ElementRef, - HostBinding, Inject, Input, NgZone, @@ -153,6 +152,7 @@ export const _MdTabLinkMixinBase = mixinDisabled(MdTabLinkBase); host: { 'class': 'mat-tab-link', '[attr.aria-disabled]': 'disabled.toString()', + '[attr.tabindex]': 'tabIndex', '[class.mat-tab-disabled]': 'disabled' } }) @@ -174,7 +174,6 @@ export class MdTabLink extends _MdTabLinkMixinBase implements OnDestroy, CanDisa } /** @docs-private */ - @HostBinding('tabIndex') get tabIndex(): number { return this.disabled ? -1 : 0; } diff --git a/tslint.json b/tslint.json index ad12e73fbc09..8088da464e78 100644 --- a/tslint.json +++ b/tslint.json @@ -80,7 +80,15 @@ "check-preblock" ], // Bans jasmine helper functions that will prevent the CI from properly running tests. - "ban": [true, ["fit"], ["fdescribe"], ["xit"], ["xdescribe"]], + "ban": [ + true, + ["fit"], + ["fdescribe"], + ["xit"], + ["xdescribe"], + { "name": "HostBinding", "message": "Use `host` in the component definition instead." }, + { "name": "HostListener", "message": "Use `host` in the component definition instead." } + ], // Disallows importing the whole RxJS library. Submodules can be still imported. "import-blacklist": [true, "rxjs"], // Avoids inconsistent linebreak styles in source files. Forces developers to use LF linebreaks.