build(docs-infra): upgrade tslint to 5.15.0 and codelyzer to 5.0.0 (a…

…ngular#29926)

This commit also changes the `tslint.json` config file to (reasonably
closely) match what the cli would generate for a new app.

PR Close angular#29926

aio/content/examples/template-syntax/src/app/click.directive.ts

@@ -6,7 +6,7 @@ import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 export class ClickDirective {
   // #docregion output-myClick
   @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
- // #enddocregion output-myClick
+  // #enddocregion output-myClick
 
   toggle = false;
 
@@ -23,10 +23,12 @@ export class ClickDirective {
 @Directive({
   // #enddocregion output-myClick2
   selector: '[myClick2]',
+  // tslint:disable: no-outputs-metadata-property
   // #docregion output-myClick2
   outputs: ['clicks:myClick']  // propertyName:alias
 })
 // #enddocregion output-myClick2
+// tslint:enable: no-outputs-metadata-property
 export class ClickDirective2 {
   clicks = new EventEmitter<string>();
   toggle = false;

aio/content/examples/template-syntax/src/app/hero-detail.component.ts

@@ -8,10 +8,12 @@ import { Hero } from './hero';
 @Component({
 // #enddocregion input-output-2
   selector: 'app-hero-detail',
+  // tslint:disable: no-inputs-metadata-property no-outputs-metadata-property
   // #docregion input-output-2
   inputs: ['hero'],
   outputs: ['deleteRequest'],
   // #enddocregion input-output-2
+  // tslint:enable: no-inputs-metadata-property no-outputs-metadata-property
   styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
   // #docregion template-1
   template: `

aio/content/examples/tslint.json

@@ -41,7 +41,7 @@
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
+    "no-use-before-declare": false,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [
@@ -83,8 +83,8 @@
       "check-type"
     ],
 
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
     "use-life-cycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,

aio/package.json

@@ -36,7 +36,7 @@
     "test-pwa-score": "node scripts/test-pwa-score",
     "test-pwa-score-localhost": "run-p --race \"~~http-server dist -p 4200 --silent\" \"test-pwa-score http://localhost:4200 {1} {2}\" --",
     "example-e2e": "yarn example-check-local && node ./tools/examples/run-example-e2e",
-    "example-lint": "tslint -c \"content/examples/tslint.json\" \"content/examples/**/*.ts\" -e \"content/examples/styleguide/**/*.avoid.ts\"",
+    "example-lint": "tslint --config \"content/examples/tslint.json\" \"content/examples/**/*.ts\" --exclude \"content/examples/styleguide/**/*.avoid.ts\"",
     "example-use-local": "node tools/ng-packages-installer overwrite ./tools/examples/shared --debug",
     "example-use-npm": "node tools/ng-packages-installer restore ./tools/examples/shared",
     "example-check-local": "node tools/ng-packages-installer check ./tools/examples/shared",
@@ -52,7 +52,7 @@
     "docs-test": "node tools/transforms/test.js",
     "redirects-test": "jasmine-ts --project=tests/deployment/unit tests/deployment/unit/**/*.spec.ts",
     "firebase-utils-test": "jasmine-ts --project=tools/firebase-test-utils tools/firebase-test-utils/*.spec.ts",
-    "tools-lint": "tslint -c \"tools/tslint.json\" \"tools/firebase-test-utils/**/*.ts\"",
+    "tools-lint": "tslint --config \"tools/tslint.json\" --project \"tools/firebase-test-utils\"",
     "tools-test": "./scripts/deploy-to-firebase.test.sh && yarn docs-test && yarn boilerplate:test && jasmine tools/ng-packages-installer/index.spec.js && yarn firebase-utils-test",
     "preserve-and-sync": "yarn docs",
     "serve-and-sync": "run-p \"start\" \"docs-watch --watch-only\"",
@@ -108,7 +108,7 @@
     "chalk": "^2.1.0",
     "chrome-launcher": "^0.10.5",
     "cjson": "^0.5.0",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "^5.0.0",
     "cross-spawn": "^5.1.0",
     "css-selector-parser": "^1.3.0",
     "dgeni": "^0.4.11",
@@ -156,7 +156,7 @@
     "tree-kill": "^1.1.0",
     "ts-node": "^3.3.0",
     "tslib": "^1.9.0",
-    "tslint": "~5.9.1",
+    "tslint": "~5.15.0",
     "typescript": "~3.4.5",
     "uglify-js": "^3.0.15",
     "unist-util-filter": "^0.2.1",

aio/src/app/app.component.spec.ts

@@ -789,7 +789,7 @@ describe('AppComponent', () => {
             { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '', deprecated: false }
           ];
 
-          searchService.searchResults.next({ query: 'something', results: results });
+          searchService.searchResults.next({ query: 'something', results });
           component.showSearchResults = true;
           fixture.detectChanges();
 

aio/src/app/app.component.ts

@@ -284,10 +284,10 @@ export class AppComponent implements OnInit {
 
   notificationDismissed() {
     this.notificationAnimating = true;
-      // this should be kept in sync with the animation durations in:
-      // - aio/src/styles/2-modules/_notification.scss
-      // - aio/src/app/layout/notification/notification.component.ts
-      setTimeout(() => this.notificationAnimating = false, 250);
+    // this should be kept in sync with the animation durations in:
+    // - aio/src/styles/2-modules/_notification.scss
+    // - aio/src/app/layout/notification/notification.component.ts
+    setTimeout(() => this.notificationAnimating = false, 250);
     this.updateHostClasses();
   }
 

aio/src/app/custom-elements/api/api.service.ts

@@ -35,8 +35,8 @@ export class ApiService implements OnDestroy {
   private _sections = this.sectionsSubject.pipe(takeUntil(this.onDestroy));
 
   /**
-  * Return a cached observable of API sections from a JSON file.
-  * API sections is an array of Angular top modules and metadata about their API documents (items).
+   * Return a cached observable of API sections from a JSON file.
+   * API sections is an array of Angular top modules and metadata about their API documents (items).
    */
   get sections() {
 

aio/src/app/custom-elements/code/code-tabs.component.ts

@@ -48,16 +48,15 @@ export class CodeTabsComponent implements OnInit, AfterViewInit {
 
   @Input() linenums: string;
 
-  @ViewChild('content', { static: true }) content: ElementRef;
+  @ViewChild('content', { static: true }) content: ElementRef<HTMLDivElement>;
 
   @ViewChildren(CodeComponent) codeComponents: QueryList<CodeComponent>;
 
   ngOnInit() {
     this.tabs = [];
-    const codeExamples = this.content.nativeElement.querySelectorAll('code-pane');
+    const codeExamples = Array.from(this.content.nativeElement.querySelectorAll('code-pane'));
 
-    for (let i = 0; i < codeExamples.length; i++) {
-      const tabContent = codeExamples[i];
+    for (const tabContent of codeExamples) {
       this.tabs.push(this.getTabInfo(tabContent));
     }
   }
@@ -69,7 +68,7 @@ export class CodeTabsComponent implements OnInit, AfterViewInit {
   }
 
   /** Gets the extracted TabInfo data from the provided code-pane element. */
-  private getTabInfo(tabContent: HTMLElement): TabInfo {
+  private getTabInfo(tabContent: Element): TabInfo {
     return {
       class: tabContent.getAttribute('class'),
       code: tabContent.innerHTML,

aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts

@@ -177,9 +177,9 @@ describe('DocViewerComponent', () => {
       });
 
       it('should fall back to `textContent` if `innerText` is not available', () => {
-        const querySelector_ = targetEl.querySelector;
+        const querySelector = targetEl.querySelector;
         spyOn(targetEl, 'querySelector').and.callFake((selector: string) => {
-          const elem = querySelector_.call(targetEl, selector);
+          const elem = querySelector.call(targetEl, selector);
           return elem && Object.defineProperties(elem, {
             innerText: {value: undefined},
             textContent: {value: 'Text Content'},
@@ -192,9 +192,9 @@ describe('DocViewerComponent', () => {
       });
 
       it('should still use `innerText` if available but empty', () => {
-        const querySelector_ = targetEl.querySelector;
+        const querySelector = targetEl.querySelector;
         spyOn(targetEl, 'querySelector').and.callFake((selector: string) => {
-          const elem = querySelector_.call(targetEl, selector);
+          const elem = querySelector.call(targetEl, selector);
           return elem && Object.defineProperties(elem, {
             innerText: { value: '' },
             textContent: { value: 'Text Content' }

aio/src/app/search/search-box/search-box.component.ts

@@ -30,7 +30,9 @@ export class SearchBoxComponent implements OnInit {
   private searchSubject = new Subject<string>();
 
   @ViewChild('searchBox', { static: true }) searchBox: ElementRef;
+  // tslint:disable-next-line: no-output-on-prefix
   @Output() onSearch = this.searchSubject.pipe(distinctUntilChanged(), debounceTime(this.searchDebounce));
+  // tslint:disable-next-line: no-output-on-prefix
   @Output() onFocus = new EventEmitter<string>();
 
   constructor(private locationService: LocationService) { }

aio/src/app/search/search.worker.ts

@@ -21,17 +21,17 @@ addEventListener('message', handleMessage);
 
 // Create the lunr index - the docs should be an array of objects, each object containing
 // the path and search terms for a page
-function createIndex(loadIndex: IndexLoader): lunr.Index {
+function createIndex(loadIndexFn: IndexLoader): lunr.Index {
   // The lunr typings are missing QueryLexer so we have to add them here manually.
   const queryLexer = (lunr as any as { QueryLexer: { termSeparator: RegExp } }).QueryLexer;
   queryLexer.termSeparator = lunr.tokenizer.separator = /\s+/;
-  return lunr(/** @this */function () {
+  return lunr(/** @this */function() {
     this.ref('path');
     this.field('titleWords', { boost: 10 });
     this.field('headingWords', { boost: 5 });
     this.field('members', { boost: 4 });
     this.field('keywords', { boost: 2 });
-    loadIndex(this);
+    loadIndexFn(this);
   });
 }
 
@@ -42,16 +42,16 @@ function handleMessage(message: { data: WebWorkerMessage }): void {
   const payload = message.data.payload;
   switch (type) {
     case 'load-index':
-      makeRequest(SEARCH_TERMS_URL, function (searchInfo: PageInfo[]) {
+      makeRequest(SEARCH_TERMS_URL, function(searchInfo: PageInfo[]) {
         index = createIndex(loadIndex(searchInfo));
-        postMessage({ type: type, id: id, payload: true });
+        postMessage({ type, id, payload: true });
       });
       break;
     case 'query-index':
-      postMessage({ type: type, id: id, payload: { query: payload, results: queryIndex(payload) } });
+      postMessage({ type, id, payload: { query: payload, results: queryIndex(payload) } });
       break;
     default:
-      postMessage({ type: type, id: id, payload: { error: 'invalid message type' } })
+      postMessage({ type, id, payload: { error: 'invalid message type' } });
   }
 }
 
@@ -60,7 +60,7 @@ function makeRequest(url: string, callback: (response: any) => void): void {
 
   // The JSON file that is loaded should be an array of PageInfo:
   const searchDataRequest = new XMLHttpRequest();
-  searchDataRequest.onload = function () {
+  searchDataRequest.onload = function() {
     callback(JSON.parse(this.responseText));
   };
   searchDataRequest.open('GET', url);
@@ -92,7 +92,7 @@ function queryIndex(query: string): PageInfo[] {
         results = index.search(query + ' ' + titleQuery);
       }
       // Map the hits into info about each page to be returned as results
-      return results.map(function (hit) { return pages[hit.ref]; });
+      return results.map(function(hit) { return pages[hit.ref]; });
     }
   } catch (e) {
     // If the search query cannot be parsed the index throws an error

aio/src/app/shared/attribute-utils.ts

@@ -10,7 +10,7 @@ export interface AttrMap {
  * Attribute map keys are forced lowercase for case-insensitive lookup.
  * @param el The source of the attributes.
  */
-export function getAttrs(el:  HTMLElement | ElementRef): AttrMap {
+export function getAttrs(el: HTMLElement | ElementRef): AttrMap {
   const attrs: NamedNodeMap = el instanceof ElementRef ? el.nativeElement.attributes : el.attributes;
   const attrMap: AttrMap = {};
   for (const attr of attrs as any as Attr[] /* cast due to https://github.com/Microsoft/TypeScript/issues/2695 */) {
@@ -47,7 +47,7 @@ export function boolFromValue(attrValue: string | undefined, def: boolean = fals
  * @param def Default boolean value when attribute is undefined.
  */
 export function getBoolFromAttribute(
-  el:  HTMLElement | ElementRef,
+  el: HTMLElement | ElementRef,
   attr: string | string[],
   def: boolean = false): boolean {
   return boolFromValue(getAttrValue(getAttrs(el), attr), def);

aio/src/app/shared/scroll.service.spec.ts

@@ -230,7 +230,7 @@ describe('ScrollService', () => {
 
   describe('#scrollToTop', () => {
     it('should scroll to top', () => {
-      const topOfPageElement = <Element><any> new MockElement();
+      const topOfPageElement = new MockElement() as any as Element;
       document.getElementById.and.callFake(
         (id: string) => id === 'top-of-page' ? topOfPageElement : null
       );
@@ -253,7 +253,7 @@ describe('ScrollService', () => {
     });
   });
 
-  describe('#needToFixScrollPosition', async() => {
+  describe('#needToFixScrollPosition', async () => {
     it('should return true when popState event was fired after a back navigation if the browser supports ' +
       'scrollRestoration`. Otherwise, needToFixScrollPosition() returns false', () => {
 
@@ -305,7 +305,7 @@ describe('ScrollService', () => {
     });
   });
 
-  describe('#scrollAfterRender', async() => {
+  describe('#scrollAfterRender', async () => {
 
     let scrollSpy: jasmine.Spy;
     let scrollToTopSpy: jasmine.Spy;

aio/src/app/shared/select/select.component.ts

@@ -16,6 +16,7 @@ export class SelectComponent implements OnInit {
   @Input()
   options: Option[];
 
+  // tslint:disable-next-line: no-output-native
   @Output()
   change = new EventEmitter<{option: Option, index: number}>();
 

aio/src/app/shared/toc.service.spec.ts

@@ -264,7 +264,7 @@ describe('TocService', () => {
     it('should have "SafeHtml" content which is heading\'s innerHTML ', () => {
       const heading = headings[3];
       const content = lastTocList[3].content;
-      expect((<TestSafeHtml>content).changingThisBreaksApplicationSecurity)
+      expect((content as TestSafeHtml).changingThisBreaksApplicationSecurity)
         .toEqual(heading.innerHTML);
     });
 
@@ -321,7 +321,7 @@ describe('TocService', () => {
     });
 
     it('should have removed anchor link from tocItem html content', () => {
-      expect((<TestSafeHtml>tocItem.content)
+      expect((tocItem.content as TestSafeHtml)
         .changingThisBreaksApplicationSecurity)
         .toEqual('Setup to develop <i>locally</i>.');
     });

aio/src/app/shared/toc.service.ts

@@ -56,9 +56,8 @@ export class TocService {
   private extractHeadingSafeHtml(heading: HTMLHeadingElement) {
     const div: HTMLDivElement = this.document.createElement('div');
     div.innerHTML = heading.innerHTML;
-    const anchorLinks: NodeListOf<HTMLAnchorElement> = div.querySelectorAll('a');
-    for (let i = 0; i < anchorLinks.length; i++) {
-      const anchorLink = anchorLinks[i];
+    const anchorLinks = Array.from(div.querySelectorAll('a'));
+    for (const anchorLink of anchorLinks) {
       if (!anchorLink.classList.contains('header-link')) {
         // this is an anchor that contains actual content that we want to keep
         // move the contents of the anchor into its parent

aio/src/app/sw-updates/sw-updates.service.ts

@@ -59,7 +59,7 @@ export class SwUpdatesService implements OnDestroy {
   }
 
   private log(message: string) {
-    const timestamp = (new Date).toISOString();
+    const timestamp = new Date().toISOString();
     this.logger.log(`[SwUpdates - ${timestamp}]: ${message}`);
   }
 }

aio/tests/deployment/e2e/site.po.ts

@@ -46,7 +46,7 @@ export class SitePage {
     await browser.executeScript('document.body.classList.add(\'no-animations\')');
     await browser.waitForAngular();
     await this.unregisterSw();
-  };
+  }
 
   /**
    * Initialize the page object and get it ready for further requests.

aio/tools/firebase-test-utils/FirebaseRedirector.ts

@@ -25,8 +25,8 @@ export class FirebaseRedirector {
     throw new Error('infinite redirect loop');
   }
   private doRedirect(url: string) {
-    for (let i = 0; i < this.redirects.length; i++) {
-      const newUrl = this.redirects[i].replace(url);
+    for (const redirect of this.redirects) {
+      const newUrl = redirect.replace(url);
       if (newUrl !== undefined) {
         return newUrl;
       }