Merge pull request #104 from ckeditor/t/94

Internal: Switched from TSLint to ESLint, added a pre-commit hook. Closes #94.

.eslintrc.js

@@ -0,0 +1,46 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * This file is licensed under the terms of the MIT License (see LICENSE.md).
+ */
+
+/* eslint-env node */
+const path = require( 'path' );
+
+module.exports = {
+  extends: [
+    'ckeditor5',
+    'plugin:@typescript-eslint/recommended'
+  ],
+  env: {
+    browser: true
+  },
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint/eslint-plugin'
+  ],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json'
+  },
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/indent': [ 'error', 'tab' ],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-use-before-define': [ 'error', 'nofunc' ],
+    '@typescript-eslint/no-var-requires': 'off',
+    'new-cap': 'off',
+  },
+  overrides: [ {
+    files: [ '**/*.spec.ts' ],
+    env: {
+      jasmine: true
+    },
+    parserOptions: {
+      tsconfigRootDir: path.join( __dirname, 'src' ),
+      project: 'tsconfig.app.json'
+    },
+  } ]
+}

.travis.yml

@@ -14,7 +14,7 @@ before_install:
 install:
 - npm install
 script:
-- ng lint && npm run coverage && ng e2e && cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+- npm run lint && npm run coverage && ng e2e && cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
 env:
   global:
   - secure: U+n/+bjnWUdkmcRtPzYGciEaHpzwuyKf2g4JA78QmRHGdmaPLmfrX65bjYFZcfnO4YboCr6nlnziDCQwdbXb1hbGnBTgyzLkk5xxAY4GVzZKoyyGIZ+jYQ6fMsC8d6ZG1LOwDAZAmIN/mpNXg/63mTuJmsOUBEnt9GkcVGz0PD4FsFrVQ48Gk2EAc9vYYZs9JcXc0thh7QUS107Mz9m/szbaNUvX4V2iC0AoQBiNfShxEDOKdhXjuFH0vZ3Faex39r6hfuGk9SWEfCqR+ebOdgZA/Vgcb54k/BNifFiI7SuMjeoeEYpVHxsEXrUsLgzKOmZpah0JOjXixcGwpvyZXr7JvJ2IMCIGzpO5VpzunXfu5ahViLn2c759vEbZEddJBBHVEzxbY0IMCxlS0iP2ALfmIPzSU1mMdLFRohcRGYUinVvzi/7oRmDcQ/sj0ar1yuKCB0Be53XGwWdd1Nz++nMZihNW1UqsQX9MyZuGrDChM2pf2AIEUPUdSq2Bps92SVz31eYJ1BSjkXbgqUhd1dCl+jUC5YHwryQoxDfY+9gxZMkak0cohoB7flnZG4wfj5IfqygGmk8kk8HHXefAEFJhosLx+FyZKAaaBmp98t/UbCRqV16XG2wNENklcTnNQdP8QIWSxhx7BnLV5HbKwXgTv2C6ILRkRf2YFuZRZYg=

angular.json

@@ -81,18 +81,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -106,15 +94,6 @@
             "protractorConfig": "e2e/protractor.conf.js",
             "devServerTarget": "ckeditor5-angular:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

e2e/protractor.conf.js

@@ -1,6 +1,9 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
+/* eslint-env node */
+/* globals jasmine */
+
 const { SpecReporter } = require( 'jasmine-spec-reporter' );
 
 exports.config = {
@@ -17,7 +20,7 @@ exports.config = {
 	jasmineNodeOpts: {
 		showColors: true,
 		defaultTimeoutInterval: 30000,
-		print: function() { }
+		print() {}
 	},
 	onPrepare() {
 		require( 'ts-node' ).register( {

e2e/src/app.e2e-spec.ts

@@ -12,13 +12,13 @@ describe( 'app', () => {
 			return page.navigateTo();
 		} );
 
-		it( 'should display header message', async () => {
+		it( 'should display header message', async() => {
 			const content = await page.getHeaderContent();
 
 			expect( content ).toEqual( 'CKEditor integration with Angular 2+' );
 		} );
 
-		it( 'should display editor with set content', async () => {
+		it( 'should display editor with set content', async() => {
 			const content = await page.getEditorContent();
 
 			expect( content ).toContain( 'Getting used to an entirely different culture can be challenging.' );
@@ -30,21 +30,21 @@ describe( 'app', () => {
 			return page.navigateTo( 'forms' );
 		} );
 
-		it( 'should set initial values for name and surname fields', async () => {
+		it( 'should set initial values for name and surname fields', async() => {
 			const name = await page.getNameInputValue();
 			const surname = await page.getSurnameInputValue();
 
 			expect( name ).toEqual( 'John' );
 			expect( surname ).toEqual( 'Doe' );
 		} );
 
-		it( 'should set initial value for the description', async () => {
+		it( 'should set initial value for the description', async() => {
 			const desc = await page.getDescription();
 
 			expect( desc ).toEqual( '<p>A <strong>really</strong> nice fellow.</p>' );
 		} );
 
-		it( 'should show and update json data preview', async () => {
+		it( 'should show and update json data preview', async() => {
 			expect( await page.getFormDataPreview() )
 				.toEqual( '{"name":"John","surname":"Doe","description":"<p>A <b>really</b> nice fellow.</p>"}' );
 

e2e/src/app.po.ts

@@ -1,49 +1,49 @@
 import { browser, by, element, promise } from 'protractor';
 
 export class AppPage {
-	navigateTo( url = '' ) {
+	public navigateTo( url = '' ) {
 		return browser.get( '/' + url );
 	}
 
-	getHeaderContent() {
+	public getHeaderContent() {
 		return element( by.css( 'app-root h1' ) ).getText();
 	}
 
-	getEditorContent(): promise.Promise<string> {
+	public getEditorContent(): promise.Promise<string> {
 		return browser.executeScript( 'return arguments[0].innerHTML', element( by.css( 'app-root #classic-editor' ) ) );
 	}
 
-	getNameInputValue() {
+	public getNameInputValue() {
 		return element( by.css( 'app-root  input#name' ) ).getAttribute( 'value' );
 	}
 
-	async setNameInputValue( value: string ) {
+	public async setNameInputValue( value: string ) {
 		const el = element( by.css( 'app-root  input#name' ) );
 
 		await el.clear();
 		await el.sendKeys( value );
 	}
 
-	getSurnameInputValue() {
+	public getSurnameInputValue() {
 		return element( by.css( 'app-root  input#surname' ) ).getAttribute( 'value' );
 	}
 
-	async setSurnameInputValue( value: string ) {
+	public async setSurnameInputValue( value: string ) {
 		const el = element( by.css( 'app-root  input#surname' ) );
 
 		await el.clear();
 		await el.sendKeys( value );
 	}
 
-	getDescription() {
+	public getDescription() {
 		return browser.executeScript( 'return arguments[0].innerHTML', element( by.css( 'app-root #description .ck-editor__editable' ) ) );
 	}
 
-	getFormDataPreview() {
+	public getFormDataPreview() {
 		return element( by.css( 'app-root pre' ) ).getText();
 	}
 
-	async setDescription( value: string ) {
+	public async setDescription( value: string ) {
 		const descEl = element( by.css( 'app-root #description .ck-editor__editable' ) );
 
 		// Select the whole content.

package.json

@@ -8,7 +8,7 @@
     "build": "ng build --prod",
     "test": "ng test",
     "coverage": "ng test --watch=false --code-coverage",
-    "lint": "ng lint",
+    "lint": "eslint '*/**/*.+(js|ts)'",
     "e2e": "ng e2e",
     "changelog": "node ./scripts/changelog.js",
     "build-package": "node ./scripts/build-package.js",
@@ -39,9 +39,13 @@
     "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
     "@types/jasmine": "^3.3.8",
     "@types/jasminewd2": "^2.0.3",
-    "codelyzer": "^4.4.2",
+    "@typescript-eslint/eslint-plugin": "^1.8.0",
+    "@typescript-eslint/parser": "^1.8.0",
     "coveralls": "^3.0.2",
+    "eslint": "^5.16.0",
+    "eslint-config-ckeditor5": "^1.0.14",
     "fs-extra": "^7.0.0",
+    "husky": "^2.2.0",
     "jasmine-core": "^3.2.1",
     "jasmine-spec-reporter": "^4.2.1",
     "karma": "^4.0.0",
@@ -51,11 +55,11 @@
     "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.3.1",
+    "lint-staged": "^8.1.6",
     "ng-packagr": "^4.0.0",
     "protractor": "^5.4.0",
     "ts-node": "^8.0.2",
     "tsickle": "^0.34.3",
-    "tslint": "^5.11.0",
     "typescript": "~3.2.4"
   },
   "engines": {
@@ -69,5 +73,20 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/ckeditor/ckeditor5-angular.git"
-  }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.+(js|ts)": [
+      "eslint --quiet"
+    ]
+  },
+  "eslintIgnore": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "src/polyfills.ts"
+  ]
 }

src/app/demo-form/demo-form.component.ts

@@ -13,7 +13,7 @@ import { NgForm } from '@angular/forms';
 	styleUrls: [ './demo-form.component.css' ]
 } )
 export class DemoFormComponent implements AfterViewInit {
-	@ViewChild( 'demoForm' ) demoForm?: NgForm;
+	@ViewChild( 'demoForm' ) public demoForm?: NgForm;
 
 	public Editor = ClassicEditorBuild;
 	public model = {
@@ -24,20 +24,21 @@ export class DemoFormComponent implements AfterViewInit {
 
 	public formDataPreview?: string;
 
-	ngAfterViewInit() {
-		this.demoForm!.control.valueChanges
-			.subscribe( values => this.formDataPreview = JSON.stringify( values ) );
+	public get description() {
+		return this.demoForm!.controls.description;
 	}
 
-	onSubmit() {
-		console.log( 'Form submit, model', this.model );
+	public ngAfterViewInit() {
+		this.demoForm!.control.valueChanges.subscribe( values => {
+			this.formDataPreview = JSON.stringify( values );
+		} );
 	}
 
-	reset() {
-		this.demoForm!.reset();
+	public onSubmit() {
+		console.log( 'Form submit, model', this.model );
 	}
 
-	get description() {
-		return this.demoForm!.controls.description;
+	public reset() {
+		this.demoForm!.reset();
 	}
 }

src/app/simple-usage/simple-usage.component.html

@@ -14,15 +14,15 @@ <h3>Classic build</h3>
 	id="classic-editor"
 	name="classic-editor"
 
-	(ready)="onReady($event)"
-	(change)="onChange($event)"
-	(focus)="onFocus($event)"
-	(blur)="onBlur($event)">
+	(ready)="onReady()"
+	(change)="onChange()"
+	(focus)="onFocus()"
+	(blur)="onBlur()">
 </ckeditor>
 
 <h4>Component events:</h4>
 <ul>
 	<li *ngFor="let eventInfo of componentEvents">
-		<span>{{ eventInfo }}</span>
+		<span>{{ eventInfo[ 0 ] }}</span>
 	</li>
 </ul>

src/app/simple-usage/simple-usage.component.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
 import * as ClassicEditorBuild from '@ckeditor/ckeditor5-build-classic';
-import { CKEditor5 } from '../../ckeditor/ckeditor';
-import { ChangeEvent, FocusEvent, BlurEvent } from '../../ckeditor/ckeditor.component';
 
 @Component( {
 	selector: 'app-simple-usage',
@@ -14,29 +12,29 @@ export class SimpleUsageComponent {
 
 	public isDisabled = false;
 	public editorData =
-		`<p>Getting used to an entirely different culture can be challenging.
+	`<p>Getting used to an entirely different culture can be challenging.
 While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person.
 You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>`;
 
 	public componentEvents: string[] = [];
 
-	toggleDisableEditors() {
+	public toggleDisableEditors() {
 		this.isDisabled = !this.isDisabled;
 	}
 
-	onReady( editor: CKEditor5.Editor ): void {
+	public onReady() {
 		this.componentEvents.push( 'The editor is ready.' );
 	}
 
-	onChange( event: ChangeEvent ): void {
+	public onChange() {
 		this.componentEvents.push( 'Editor model changed.' );
 	}
 
-	onFocus( event: FocusEvent ): void {
+	public onFocus() {
 		this.componentEvents.push( 'Focused the editing view.' );
 	}
 
-	onBlur( event: BlurEvent ): void {
+	public onBlur() {
 		this.componentEvents.push( 'Blurred the editing view.' );
 	}
 }