chore: replace tslint with eslint (#1380)

.eslintignore

@@ -0,0 +1,5 @@
+**/node_modules/
+**/lib/
+**/dist/
+**/public/
+**/static/

.eslintrc

@@ -0,0 +1,35 @@
+{
+	"parser": "@typescript-eslint/parser",
+	"plugins": ["@typescript-eslint", "react-hooks"],
+	"extends": [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"plugin:@typescript-eslint/recommended",
+		"prettier",
+		"prettier/@typescript-eslint"
+	],
+	"settings": {
+		"react": {
+			"version": "16.8"
+		}
+	},
+	"env": {
+		"browser": true,
+		"jest": true,
+		"es6": true,
+		"node": true
+	},
+	"rules": {
+		"@typescript-eslint/explicit-function-return-type": 0,
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-var-requires": 0,
+		"@typescript-eslint/no-parameter-properties": 0,
+		"@typescript-eslint/explicit-member-accessibility": 0,
+		"@typescript-eslint/no-object-literal-type-assertion": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+		"@typescript-eslint/array-type": 0,
+		"@typescript-eslint/no-use-before-define": 0,
+		"react/prop-types": 0,
+		"react/display-name": 0
+	}
+}

.vscode/extensions.json

@@ -1,6 +1,3 @@
 {
-	"recommendations": [
-		"ms-vscode.vscode-typescript-tslint-plugin",
-		"esbenp.prettier-vscode"
-	]
+	"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
 }

package.json

@@ -38,7 +38,7 @@
 		"unit_test": "jest",
 		"jest:watch": "jest --watch",
 		"jest:cov": "jest --coverage",
-		"lint": "tslint \"packages/**/*.{ts,tsx}\" -e \"**/{lib,node_modules}/**\"",
+		"lint": "eslint .",
 		"test_modules": "lerna run test --stream",
 		"publish_docs": "lerna run publish --scope react-dnd-documentation",
 		"test": "run-s lint build test_modules jest:cov",
@@ -58,8 +58,15 @@
 		"@commitlint/cli": "^8.0.0",
 		"@commitlint/config-conventional": "^8.0.0",
 		"@types/jest": "^24.0.13",
+		"@typescript-eslint/eslint-plugin": "^1.9.0",
+		"@typescript-eslint/parser": "^1.9.0",
 		"enzyme": "^3.9.0",
 		"enzyme-adapter-react-16": "^1.11.2",
+		"eslint": "^5.16.0",
+		"eslint-config-prettier": "^4.3.0",
+		"eslint-plugin-prettier": "^3.1.0",
+		"eslint-plugin-react": "^7.13.0",
+		"eslint-plugin-react-hooks": "^1.6.0",
 		"husky": "^2.3.0",
 		"jest": "^24.8.0",
 		"jest-environment-jsdom": "^24.8.0",
@@ -71,10 +78,6 @@
 		"react": "^16.8.6",
 		"react-dom": "^16.8.6",
 		"ts-jest": "^24.0.2",
-		"tslint": "^5.17.0",
-		"tslint-config-prettier": "^1.18.0",
-		"tslint-react": "^4.0.0",
-		"tslint-react-hooks": "^2.1.0",
 		"typescript": "^3.5.1"
 	},
 	"jest": {
@@ -125,7 +128,7 @@
 			"git add"
 		],
 		"*.{ts,tsx}": [
-			"tslint --fix",
+			"eslint --fix",
 			"prettier --write",
 			"git add"
 		]

packages/dnd-core/src/__tests__/sources.ts

@@ -1,5 +1,3 @@
-// tslint:disable max-classes-per-file
-
 import DragSource from './DragSourceImpl'
 import { DragDropMonitor } from '../interfaces'
 
@@ -42,8 +40,7 @@ export class BadItemSource extends DragSource {
 }
 
 export class NumberSource extends DragSource {
-	// tslint:disable-next-line variable-name
-	constructor(public number: number, public allowDrag: boolean) {
+	public constructor(public number: number, public allowDrag: boolean) {
 		super()
 	}
 

packages/dnd-core/src/__tests__/targets.ts

@@ -1,5 +1,3 @@
-// tslint:disable max-classes-per-file
-
 import DropTarget from './DropTargetImpl'
 import { DragDropMonitor } from '../interfaces'
 

packages/documentation/gatsby-config.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const siteMetadata = {
 	title: 'React DnD',
 	githubUrl: 'https://github.com/react-dnd/react-dnd/',

packages/documentation/gatsby-node.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const path = require('path')
 
 /**

packages/documentation/src/components/doc.tsx

@@ -13,7 +13,7 @@ const Doc: React.FC<DocProps> = ({ docPage }) => {
 	return (
 		<Container>
 			<Gutter />
-			<HtmlContainer>{renderAst(docPage.htmlAst)}</HtmlContainer>>
+			<HtmlContainer>{renderAst(docPage.htmlAst)}</HtmlContainer>
 			<Gutter />
 		</Container>
 	)

packages/documentation/src/components/layout.tsx

@@ -1,4 +1,3 @@
-// tslint:disable jsx-no-lambda
 declare var require: any
 
 import * as React from 'react'

packages/documentation/src/components/navbar.tsx

@@ -1,4 +1,3 @@
-// tslint:disable jsx-no-lambda
 import * as React from 'react'
 import { Link as GatsbyLink } from 'gatsby'
 import styled from 'styled-components'

packages/documentation/write_sample_boilerplate.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const fs = require('fs')
 const path = require('path')
 

packages/examples-hooks/.eslintrc

@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"react/display-name": 0
+	}
+}

packages/examples-hooks/src/01-dustbin/multiple-targets/index.tsx

@@ -76,7 +76,6 @@ const Container: React.FC = () => {
 					<Dustbin
 						accept={accepts}
 						lastDroppedItem={lastDroppedItem}
-						// tslint:disable-next-line jsx-no-lambda
 						onDrop={item => handleDrop(index, item)}
 						key={index}
 					/>

packages/examples-hooks/src/01-dustbin/single-target-in-iframe/index.tsx

@@ -1,10 +1,7 @@
 declare var require: any
 
 import React from 'react'
-import {
-	__EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__,
-	DragDropContextProvider,
-} from 'react-dnd'
+import { DragDropContextProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
 import Dustbin from './Dustbin'
 import Box from './Box'
@@ -25,7 +22,6 @@ const FrameBindingContext: React.FC = ({ children }) => (
 )
 
 // Don't use the decorator, embed the DnD context within the iframe
-// tslint:disable-next-line max-classes-per-file
 export default function Container() {
 	// The react-frame-component will pass the iframe's 'window' global as a context value
 	// to the DragDropContext provider. You could also directly inject it in via a prop.

packages/examples-hooks/src/01-dustbin/stress-test/index.tsx

@@ -1,4 +1,3 @@
-// tslint:disable jsx-no-lambda
 declare var require: any
 import React, { useState, useEffect, useCallback } from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'

packages/examples-hooks/src/03-nesting/drag-sources/SourceBox.tsx

@@ -1,4 +1,3 @@
-// tslint:disable max-classes-per-file jsx-no-lambda
 import React, { useState, useCallback, useMemo } from 'react'
 import {
 	__EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__,

packages/examples-hooks/src/03-nesting/drag-sources/TargetBox.tsx

@@ -1,4 +1,3 @@
-// tslint:disable max-classes-per-file
 import React, { useState, useCallback } from 'react'
 import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
 import Colors from './Colors'

packages/examples-hooks/src/04-sortable/stress-test/Container.tsx

@@ -29,7 +29,6 @@ function buildCardData() {
 }
 
 export default class Container extends React.Component<{}, ContainerState> {
-	// tslint:disable-next-line ban-types
 	private pendingUpdateFn: any
 	private requestedFrame: number | undefined
 
@@ -64,7 +63,6 @@ export default class Container extends React.Component<{}, ContainerState> {
 		)
 	}
 
-	// tslint:disable-next-line ban-types
 	private scheduleUpdate(updateFn: any) {
 		this.pendingUpdateFn = updateFn
 

packages/examples/.eslintrc

@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"react/display-name": 0
+	}
+}

packages/examples/src/01-dustbin/multiple-targets/index.tsx

@@ -76,7 +76,6 @@ const Container: React.FC = () => {
 					<Dustbin
 						accepts={accepts}
 						lastDroppedItem={lastDroppedItem}
-						// tslint:disable-next-line jsx-no-lambda
 						onDrop={item => handleDrop(index, item)}
 						key={index}
 					/>

packages/examples/src/01-dustbin/stress-test/index.tsx

@@ -1,4 +1,3 @@
-// tslint:disable jsx-no-lambda
 declare var require: any
 import React, { useState, useEffect, useCallback } from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'

packages/examples/src/03-nesting/drag-sources/SourceBox.tsx

@@ -1,4 +1,3 @@
-// tslint:disable max-classes-per-file jsx-no-lambda
 import React, { useState, useCallback } from 'react'
 import {
 	DragSource,

packages/examples/src/03-nesting/drag-sources/TargetBox.tsx

@@ -1,4 +1,3 @@
-// tslint:disable max-classes-per-file
 import React, { useState, useCallback } from 'react'
 import { DropTarget, ConnectDropTarget, DropTargetMonitor } from 'react-dnd'
 import Colors from './Colors'

packages/examples/src/04-sortable/stress-test/Card.tsx

@@ -33,6 +33,7 @@ const Card: React.FC<CardProps> = memo(
 		)
 	},
 )
+Card.displayName = 'Card'
 
 export default DropTarget(
 	ItemTypes.CARD,

packages/examples/src/04-sortable/stress-test/Container.tsx

@@ -13,7 +13,6 @@ export interface ContainerState {
 }
 
 export default class Container extends React.Component<{}, ContainerState> {
-	// tslint:disable-next-line ban-types
 	private pendingUpdateFn: any
 	private requestedFrame: number | undefined
 
@@ -58,7 +57,6 @@ export default class Container extends React.Component<{}, ContainerState> {
 		)
 	}
 
-	// tslint:disable-next-line ban-types
 	private scheduleUpdate(updateFn: any) {
 		this.pendingUpdateFn = updateFn
 

packages/react-dnd-html5-backend/src/BrowserDetector.ts

@@ -1,7 +1,6 @@
 import { memoize } from './utils/discount_lodash'
 
 declare global {
-	// tslint:disable-next-line interface-name
 	interface Window extends HTMLElement {
 		safari: any
 	}

packages/react-dnd-html5-backend/src/HTML5Backend.ts

@@ -22,7 +22,6 @@ import { HTML5BackendContext } from './interfaces'
 import { NativeDragSource } from './NativeDragSources/NativeDragSource'
 
 declare global {
-	// tslint:disable-next-line interface-name
 	interface Window {
 		__isReactDndBackendSetUp: boolean | undefined
 	}

packages/react-dnd-html5-backend/src/NativeDragSources/NativeDragSource.ts

@@ -11,7 +11,7 @@ export class NativeDragSource {
 				configurable: true, // This is needed to allow redefining it later
 				enumerable: true,
 				get() {
-					// tslint:disable-next-line no-console
+					// eslint-disable-next-line no-console
 					console.warn(
 						`Browser doesn't allow reading "${property}" until the drop event.`,
 					)

packages/react-dnd/src/DragDropContext.tsx

@@ -1,4 +1,3 @@
-/* tslint:disable no-shadowed-variable */
 declare var require: any
 import * as React from 'react'
 import {

packages/react-dnd/src/DragPreviewImage.tsx

@@ -18,5 +18,6 @@ const DragPreviewImage: React.FC<DragPreviewImageProps> = React.memo(
 		return null
 	},
 )
+DragPreviewImage.displayName = 'DragPreviewImage'
 
 export default DragPreviewImage

packages/react-dnd/src/SourceConnector.ts

@@ -57,7 +57,7 @@ export default class SourceConnector implements Connector {
 	private lastConnectedDragPreview: any = null
 	private lastConnectedDragPreviewOptions: any = null
 
-	constructor(private backend: Backend) {}
+	public constructor(private backend: Backend) {}
 
 	public receiveHandlerId(newHandlerId: Identifier | null) {
 		if (this.handlerId === newHandlerId) {

packages/react-dnd/src/TargetConnector.ts

@@ -31,7 +31,7 @@ export default class TargetConnector implements Connector {
 	private lastConnectedDropTarget: any = null
 	private lastConnectedDropTargetOptions: any = null
 
-	constructor(private backend: Backend) {}
+	public constructor(private backend: Backend) {}
 
 	public get connectTarget() {
 		return this.dropTarget

packages/react-dnd/src/__tests__/DragDropContext.spec.tsx

@@ -1,4 +1,3 @@
-// tslint:disable max-classes-per-file
 import { createDragDropManager } from 'dnd-core'
 import * as React from 'react'
 import * as TestUtils from 'react-dom/test-utils'

packages/react-dnd/src/__tests__/DragLayer.spec.tsx

@@ -1,4 +1,3 @@
-// tslint:disable max-classes-per-file
 import * as React from 'react'
 import { DragLayer } from '../index'
 

packages/react-dnd/src/__tests__/DragSource.spec.tsx

@@ -1,4 +1,3 @@
-// tslint:disable max-classes-per-file
 import * as React from 'react'
 import * as TestUtils from 'react-dom/test-utils'
 import { DragSource } from '../index'

packages/react-dnd/src/__tests__/DropTarget.spec.tsx

@@ -1,4 +1,3 @@
-// tslint:disable max-classes-per-file
 import * as React from 'react'
 import * as TestUtils from 'react-dom/test-utils'
 import { DropTarget } from '../index'

packages/react-dnd/src/utils/checkDecoratorArguments.ts

@@ -8,7 +8,7 @@ export default function checkDecoratorArguments(
 	if (process.env.NODE_ENV !== 'production') {
 		for (const arg of args) {
 			if (arg && arg.prototype && arg.prototype.render) {
-				// tslint:disable-next-line no-console
+				// eslint-disable-next-line no-console
 				console.error(
 					'You seem to be applying the arguments in the wrong order. ' +
 						`It should be ${functionName}(${signature})(Component), not the other way around. ` +

packages/react-dnd/src/utils/disposables/CompositeDisposable.ts

@@ -8,7 +8,7 @@ export class CompositeDisposable {
 	private isDisposed = false
 	private disposables: Disposable[]
 
-	constructor(...disposables: Disposable[]) {
+	public constructor(...disposables: Disposable[]) {
 		this.disposables = disposables
 	}
 

packages/react-dnd/src/utils/disposables/Disposable.ts

@@ -37,7 +37,7 @@ export class Disposable {
 	private isDisposed = false
 	private action: () => void
 
-	constructor(action: any) {
+	public constructor(action: any) {
 		this.action = isFunction(action) ? action : noop
 	}