Switch from tslint to eslint

.eslintignore

@@ -0,0 +1,5 @@
+coverage
+dist
+node_modules
+.vscode
+rollup.config.js

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+  ],
+};

package.json

@@ -14,14 +14,16 @@
   "module": "dist/signature_pad.js",
   "types": "dist/types/signature_pad.d.ts",
   "scripts": {
-    "build": "del dist && rollup --config && yarn run emit-types && cp dist/signature_pad.umd.js docs/js/",
+    "build": "yarn run lint && yarn run clean && rollup --config && yarn run emit-types && yarn run update-docs",
+    "clean": "yarn run del dist",
+    "emit-types": "mkdir -p dist/types && yarn run tsc src/signature_pad.ts --lib DOM,ES2015 --declaration --declarationDir dist/types --emitDeclarationOnly",
     "format": "prettier --write '{src,tests}/**/*.{js,ts}'",
-    "lint": "tslint -c tslint.json '{src,tests}/**/*.ts'",
+    "lint": "eslint '{src,tests}/**/*.ts'",
     "prepublishOnly": "yarn run build",
     "serve": "serve -l 9000 docs",
     "start": "yarn run build && yarn run serve",
     "test": "jest --coverage",
-    "emit-types": "mkdir -p dist/types && yarn run tsc src/signature_pad.ts --lib DOM,ES2015 --declaration --declarationDir dist/types --emitDeclarationOnly"
+    "update-docs": "cp dist/signature_pad.umd.js docs/js/"
   },
   "repository": {
     "type": "git",
@@ -36,21 +38,22 @@
     "@rollup/plugin-typescript": "^4.0.0",
     "@types/jest": "^25.1.4",
     "@types/node": "^13.9.3",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "@typescript-eslint/parser": "^2.24.0",
     "canvas": "^2.6.1",
     "del": "^5.1.0",
     "del-cli": "^3.0.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.1",
     "husky": "^4.2.3",
     "jest": "^25.1.0",
     "lint-staged": "^10.0.8",
     "prettier": "^2.0.1",
     "rollup": "^2.1.0",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-tslint": "^0.2.2",
     "serve": "^11.3.0",
     "ts-jest": "^25.2.1",
     "tslib": "^1.11.1",
-    "tslint": "^6.1.0",
-    "tslint-config-prettier": "^1.14.0",
     "typescript": "^3.8.3"
   },
   "husky": {

rollup.config.js

@@ -1,5 +1,4 @@
 const typescript = require('@rollup/plugin-typescript');
-const tslint = require('rollup-plugin-tslint');
 const { terser } = require('rollup-plugin-terser');
 const pkg = require('./package.json');
 
@@ -15,7 +14,7 @@ export default [
   {
     // UMD unminified
     input: 'src/signature_pad.ts',
-    plugins: [tslint(), typescript({ target: 'ES3' })],
+    plugins: [typescript({ target: 'ES3' })],
     output: {
       // dir: 'dist',
       file: 'dist/signature_pad.umd.js',
@@ -28,7 +27,7 @@ export default [
   {
     // UMD unminified
     input: 'src/signature_pad.ts',
-    plugins: [tslint(), typescript({ target: 'ES3' })],
+    plugins: [typescript({ target: 'ES3' })],
     output: {
       // dir: 'dist',
       file: 'dist/signature_pad.umd.min.js',
@@ -42,7 +41,7 @@ export default [
   {
     // ES module unminified
     input: 'src/signature_pad.ts',
-    plugins: [tslint(), typescript({ target: 'ES2015' })],
+    plugins: [typescript({ target: 'ES2015' })],
     output: {
       // dir: 'dist',
       file: 'dist/signature_pad.js',
@@ -54,7 +53,7 @@ export default [
   {
     // ES module minified
     input: 'src/signature_pad.ts',
-    plugins: [tslint(), typescript({ target: 'ES2015' })],
+    plugins: [typescript({ target: 'ES2015' })],
     output: {
       // dir: 'dist',
       file: 'dist/signature_pad.min.js',

src/bezier.ts

@@ -1,4 +1,4 @@
-import { IBasicPoint, Point } from './point';
+import { BasicPoint, Point } from './point';
 
 export class Bezier {
   public static fromPoints(
@@ -12,12 +12,12 @@ export class Bezier {
   }
 
   private static calculateControlPoints(
-    s1: IBasicPoint,
-    s2: IBasicPoint,
-    s3: IBasicPoint,
+    s1: BasicPoint,
+    s2: BasicPoint,
+    s3: BasicPoint,
   ): {
-    c1: IBasicPoint;
-    c2: IBasicPoint;
+    c1: BasicPoint;
+    c2: BasicPoint;
   } {
     const dx1 = s1.x - s2.x;
     const dy1 = s1.y - s2.y;
@@ -47,8 +47,8 @@ export class Bezier {
 
   constructor(
     public startPoint: Point,
-    public control2: IBasicPoint,
-    public control1: IBasicPoint,
+    public control2: BasicPoint,
+    public control1: BasicPoint,
     public endPoint: Point,
     public startWidth: number,
     public endWidth: number,

src/point.ts

@@ -1,28 +1,28 @@
 // Interface for point data structure used e.g. in SignaturePad#fromData method
-export interface IBasicPoint {
+export interface BasicPoint {
   x: number;
   y: number;
   time: number;
 }
 
-export class Point implements IBasicPoint {
+export class Point implements BasicPoint {
   public time: number;
 
   constructor(public x: number, public y: number, time?: number) {
     this.time = time || Date.now();
   }
 
-  public distanceTo(start: IBasicPoint): number {
+  public distanceTo(start: BasicPoint): number {
     return Math.sqrt(
       Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2),
     );
   }
 
-  public equals(other: IBasicPoint): boolean {
+  public equals(other: BasicPoint): boolean {
     return this.x === other.x && this.y === other.y && this.time === other.time;
   }
 
-  public velocityFrom(start: IBasicPoint): number {
+  public velocityFrom(start: BasicPoint): number {
     return this.time !== start.time
       ? this.distanceTo(start) / (this.time - start.time)
       : 0;

src/signature_pad.ts

@@ -10,7 +10,7 @@
  */
 
 import { Bezier } from './bezier';
-import { IBasicPoint, Point } from './point';
+import { BasicPoint, Point } from './point';
 import { throttle } from './throttle';
 
 declare global {
@@ -20,7 +20,7 @@ declare global {
   }
 }
 
-export interface IOptions {
+export interface Options {
   dotSize?: number | (() => number);
   minWidth?: number;
   maxWidth?: number;
@@ -33,9 +33,9 @@ export interface IOptions {
   onEnd?: (event: MouseEvent | Touch) => void;
 }
 
-export interface IPointGroup {
+export interface PointGroup {
   color: string;
-  points: IBasicPoint[];
+  points: BasicPoint[];
 }
 
 export default class SignaturePad {
@@ -57,15 +57,15 @@ export default class SignaturePad {
   private _mouseButtonDown: boolean;
   private _isEmpty: boolean;
   private _lastPoints: Point[]; // Stores up to 4 most recent points; used to generate a new curve
-  private _data: IPointGroup[]; // Stores all points in groups (one group per line or dot)
+  private _data: PointGroup[]; // Stores all points in groups (one group per line or dot)
   private _lastVelocity: number;
   private _lastWidth: number;
   private _strokeMoveUpdate: (event: MouseEvent | Touch) => void;
   /* tslint:enable: variable-name */
 
   constructor(
     private canvas: HTMLCanvasElement,
-    private options: IOptions = {},
+    private options: Options = {},
   ) {
     this.velocityFilterWeight = options.velocityFilterWeight || 0.7;
     this.minWidth = options.minWidth || 0.5;
@@ -74,36 +74,29 @@ export default class SignaturePad {
     this.minDistance = ('minDistance' in options
       ? options.minDistance
       : 5) as number; // in pixels
-
-    if (this.throttle) {
-      this._strokeMoveUpdate = throttle(
-        SignaturePad.prototype._strokeUpdate,
-        this.throttle,
-      );
-    } else {
-      this._strokeMoveUpdate = SignaturePad.prototype._strokeUpdate;
-    }
-
     this.dotSize =
       options.dotSize ||
-      function dotSize(this: SignaturePad) {
+      function dotSize(this: SignaturePad): number {
         return (this.minWidth + this.maxWidth) / 2;
       };
     this.penColor = options.penColor || 'black';
     this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
     this.onBegin = options.onBegin;
     this.onEnd = options.onEnd;
 
+    this._strokeMoveUpdate = this.throttle
+      ? throttle(SignaturePad.prototype._strokeUpdate, this.throttle)
+      : SignaturePad.prototype._strokeUpdate;
     this._ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
     this.clear();
 
     // Enable mouse and touch event handlers
     this.on();
   }
 
   public clear(): void {
-    const ctx = this._ctx;
-    const canvas = this.canvas;
+    const { _ctx: ctx, canvas } = this;
 
     // Clear canvas using background color
     ctx.fillStyle = this.backgroundColor;
@@ -127,13 +120,13 @@ export default class SignaturePad {
 
     this._reset();
 
-    image.onload = () => {
+    image.onload = (): void => {
       this._ctx.drawImage(image, 0, 0, width, height);
       if (callback) {
         callback();
       }
     };
-    image.onerror = (error) => {
+    image.onerror = (error): void => {
       if (callback) {
         callback(error);
       }
@@ -143,7 +136,7 @@ export default class SignaturePad {
     this._isEmpty = false;
   }
 
-  public toDataURL(type = 'image/png', encoderOptions?: number) {
+  public toDataURL(type = 'image/png', encoderOptions?: number): string {
     switch (type) {
       case 'image/svg+xml':
         return this._toSVG();
@@ -190,7 +183,7 @@ export default class SignaturePad {
     return this._isEmpty;
   }
 
-  public fromData(pointGroups: IPointGroup[]): void {
+  public fromData(pointGroups: PointGroup[]): void {
     this.clear();
 
     this._fromData(
@@ -202,7 +195,7 @@ export default class SignaturePad {
     this._data = pointGroups;
   }
 
-  public toData(): IPointGroup[] {
+  public toData(): PointGroup[] {
     return this._data;
   }
 
@@ -451,7 +444,7 @@ export default class SignaturePad {
     point,
   }: {
     color: string;
-    point: IBasicPoint;
+    point: BasicPoint;
   }): void {
     const ctx = this._ctx;
     const width =
@@ -465,7 +458,7 @@ export default class SignaturePad {
   }
 
   private _fromData(
-    pointGroups: IPointGroup[],
+    pointGroups: PointGroup[],
     drawCurve: SignaturePad['_drawCurve'],
     drawDot: SignaturePad['_drawDot'],
   ): void {
@@ -548,7 +541,7 @@ export default class SignaturePad {
         /* eslint-enable no-restricted-globals */
       },
 
-      ({ color, point }: { color: string; point: IBasicPoint }) => {
+      ({ color, point }: { color: string; point: BasicPoint }) => {
         const circle = document.createElement('circle');
         const dotSize =
           typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;

src/throttle.ts

@@ -1,13 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // Slightly simplified version of http://stackoverflow.com/a/27078401/815507
 
-export function throttle(fn: (...args: any[]) => any, wait = 250) {
+export function throttle(
+  fn: (...args: any[]) => any,
+  wait = 250,
+): (this: any, ...args: any[]) => any {
   let previous = 0;
   let timeout: number | null = null;
   let result: any;
   let storedContext: any;
   let storedArgs: any[];
 
-  const later = () => {
+  const later = (): void => {
     previous = Date.now();
     timeout = null;
     result = fn.apply(storedContext, storedArgs);
@@ -18,7 +22,7 @@ export function throttle(fn: (...args: any[]) => any, wait = 250) {
     }
   };
 
-  return function wrapper(this: any, ...args: any[]) {
+  return function wrapper(this: any, ...args: any[]): any {
     const now = Date.now();
     const remaining = wait - (now - previous);