Lib Upgrades (WIP) (#1149)

* chore: upgrade husky, add commitlint verification

Additionally, upgrading prettier and npm-run-all

* remove @types/node dependency

* chore: add commitlint config

* chore: upgrade webpack, webpack-dev-server, webpack-cli

* chore: upgrade lodash

* chore: upgrade shallowequal

* chore: remove @types/shallowequal dependency, since it was unused

* chore: upgrade webpack loaders, babel

* chore: upgrade lerna

* chore: upgrade jest

* chore: upgrade runtime version of react

* chore: enable strict-mode in docsite

* remove autobind-decorator in favor of class-bind member semantics

* chore: use suspense for loading examples

* chore: pin the version of react to match what's in react-dom

* chore: upgrade react-dom version

* chore: remove less, replace with styled-components

* chore: update redux

* chore: upgrade typescript & tooling

* chore: remove suspense from static site generation, as it uses SSR

* chore: use gh-pages module to manage docsite deployment

* chore: remove less file

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

package.json

@@ -41,7 +41,7 @@
 		"lint":
 			"tslint \"packages/**/*.{ts,tsx}\" -e \"**/{lib,node_modules}/**\"",
 		"test_modules": "lerna run test --stream",
-		"publish_docs": "./scripts/publishDocumentation.sh",
+		"publish_docs": "lerna run publish --scope react-dnd-documentation",
 		"test": "run-s lint build test_modules jest:cov",
 		"prettify":
 			"prettier 'packages/*/**/*.js' 'examples/**/*.js' 'site/**/*.js'",
@@ -50,19 +50,28 @@
 		"start": "lerna run --parallel --stream start",
     "watch": "lerna run --parallel --stream watch"
 	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "lint-staged",
+			"pre-publish": "npm test",
+			"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+		}
+	},
 	"devDependencies": {
-		"@types/jest": "^22.2.3",
-		"husky": "^0.14.3",
-		"jest": "^23.0.0-beta.3r",
-		"jest-environment-jsdom": "^22.4.3",
-		"lerna": "^2.9.0",
-		"lint-staged": "^4.2.3",
-		"npm-run-all": "^4.1.2",
-		"prettier": "^1.11.1",
-		"ts-jest": "^22.4.4",
-		"tslint": "^5.9.1",
-		"tslint-config-prettier": "^1.12.0",
-		"tslint-react": "^3.5.1"
+		"@commitlint/cli": "^7.2.1",
+		"@commitlint/config-conventional": "^7.1.2",
+		"@types/jest": "^23.3.8",
+		"husky": "^1.1.2",
+		"jest": "^23.6.0",
+		"jest-environment-jsdom": "^23.4.0",
+		"lerna": "^3.4.3",
+		"lint-staged": "^7.3.0",
+		"npm-run-all": "^4.1.3",
+		"prettier": "^1.14.3",
+		"ts-jest": "^23.10.4",
+		"tslint": "^5.11.0",
+		"tslint-config-prettier": "^1.15.0",
+		"tslint-react": "~3.6.0"
 	},
 	"jest": {
 		"moduleFileExtensions": ["ts", "tsx", "js", "jsx"],
@@ -100,7 +109,6 @@
     "nohoist": [
       "**/@types/*",
       "**/hoist-non-react-statics",
-      "**/autobind-decorator",
       "**/redux"
     ]
 	}

packages/dnd-core/package.json

@@ -19,13 +19,12 @@
 	"dependencies": {
 		"asap": "^2.0.6",
 		"invariant": "^2.2.4",
-		"lodash": "^4.17.10",
-		"redux": "^4.0.0"
+		"lodash": "^4.17.11",
+		"redux": "^4.0.1"
 	},
 	"devDependencies": {
-		"@types/node": "10.3.2",
-		"npm-run-all": "^4.1.2",
+		"npm-run-all": "^4.1.3",
 		"rimraf": "^2.6.2",
-		"typescript": "^2.8.1"
+		"typescript": "^3.1.3"
 	}
 }

packages/dnd-core/src/DragDropMonitorImpl.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 import { Store } from 'redux'
 import matchesType from './utils/matchesType'
 import {

packages/dnd-core/src/HandlerRegistryImpl.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 import { Store } from 'redux'
 import {
 	addSource,
@@ -51,7 +53,10 @@ function mapContainsValue<T>(map: Map<string, T>, searchValue: T) {
 	const entries = map.entries()
 	let isDone = false
 	do {
-		const { done, value: [, value] } = entries.next()
+		const {
+			done,
+			value: [, value],
+		} = entries.next()
 		if (value === searchValue) {
 			return true
 		}

packages/dnd-core/src/__tests__/DragDropManager.spec.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 import createTestBackend, { TestBackend } from 'react-dnd-test-backend'
 import * as Types from './types'
 import { NormalSource, NonDraggableSource, BadItemSource } from './sources'
@@ -9,7 +11,7 @@ import {
 	TransformResultTarget,
 } from './targets'
 import DragDropManagerImpl from '../DragDropManagerImpl'
-import { DragDropManager, Backend, HandlerRegistry } from '../interfaces'
+import { DragDropManager, HandlerRegistry } from '../interfaces'
 const isString = require('lodash/isString')
 
 describe('DragDropManager', () => {
@@ -306,7 +308,7 @@ describe('DragDropManager', () => {
 
 			it('throws in endDrag() if it is called outside a drag operation', () => {
 				const source = new NormalSource()
-				const sourceId = registry.addSource(Types.FOO, source)
+				registry.addSource(Types.FOO, source)
 				expect(() => backend.simulateEndDrag()).toThrow()
 			})
 

packages/dnd-core/src/actions/dragDrop.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 import {
 	Action,
 	DragDropManager,

packages/dnd-core/src/contracts.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 import { DragSource, DropTarget, Identifier } from './interfaces'
 const invariant = require('invariant')
 

packages/dnd-core/src/reducers/dirtyHandlerIds.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 import {
 	BEGIN_DRAG,
 	PUBLISH_DRAG_SOURCE,

packages/dnd-core/src/reducers/dragOperation.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 import {
 	BEGIN_DRAG,
 	PUBLISH_DRAG_SOURCE,

packages/dnd-core/src/reducers/index.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 import dragOffset, { State as DragOffsetState } from './dragOffset'
 import dragOperation, { State as DragOperationState } from './dragOperation'
 import refCount, { State as RefCountState } from './refCount'

packages/dnd-core/src/utils/dirtiness.ts

@@ -1,3 +1,5 @@
+declare var require: any
+
 const intersection = require('lodash/intersection')
 
 export const NONE: string[] = []

packages/documentation/examples/00 Chessboard/Tutorial App/Board.tsx

@@ -1,14 +1,21 @@
 import * as React from 'react'
 import { DragDropContext } from 'react-dnd'
+import styled from 'styled-components'
 import HTML5Backend from 'react-dnd-html5-backend'
 import BoardSquare from './BoardSquare'
 import Knight from './Knight'
-import './Board.less'
 
 export interface BoardProps {
 	knightPosition: [number, number]
 }
 
+const Container = styled.div`
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+`
+
 @DragDropContext(HTML5Backend)
 export default class Board extends React.Component<BoardProps> {
 	public render() {
@@ -17,7 +24,7 @@ export default class Board extends React.Component<BoardProps> {
 			squares.push(this.renderSquare(i))
 		}
 
-		return <div className="Board">{squares}</div>
+		return <Container>{squares}</Container>
 	}
 
 	private renderSquare(i: number) {

packages/documentation/examples/00 Chessboard/Tutorial App/Game.ts

@@ -1,23 +1,17 @@
 let knightPosition: [number, number] = [1, 7]
+let observers: PositionObserver[] = []
 export type PositionObserver = ((position: [number, number]) => void) | null
-let observer: PositionObserver = null
 
 function emitChange() {
-	if (observer) {
-		observer(knightPosition)
-	}
+	observers.forEach(o => o && o(knightPosition))
 }
 
 export function observe(o: PositionObserver) {
-	if (observer) {
-		throw new Error('Multiple observers not implemented.')
-	}
-
-	observer = o
+	observers.push(o)
 	emitChange()
 
 	return () => {
-		observer = null
+		observers = observers.filter(t => t !== o)
 	}
 }
 

packages/documentation/examples/00 Chessboard/Tutorial App/index.tsx

@@ -1,3 +1,4 @@
+// tslint:disable member-ordering
 import * as React from 'react'
 import Board from './Board'
 import { observe } from './Game'
@@ -13,10 +14,16 @@ export default class ChessboardTutorialApp extends React.Component<
 	{},
 	ChessboardTutorialAppState
 > {
-	private unobserve: () => void = observe(this.handleChange.bind(this))
+	public state: ChessboardTutorialAppState = { knightPosition: [1, 7] }
+	private unobserve?: (() => void)
 
+	public componentDidMount() {
+		this.unobserve = observe(this.handleChange)
+	}
 	public componentWillUnmount() {
-		this.unobserve()
+		if (this.unobserve) {
+			this.unobserve()
+		}
 	}
 
 	public render() {
@@ -56,7 +63,7 @@ export default class ChessboardTutorialApp extends React.Component<
 		)
 	}
 
-	private handleChange(knightPosition: [number, number]) {
+	private handleChange = (knightPosition: [number, number]) => {
 		const nextState = { knightPosition }
 		if (this.state) {
 			this.setState(nextState)

packages/documentation/examples/01 Dustbin/Single Target/index.tsx

@@ -1,25 +1,21 @@
 import * as React from 'react'
 import Container from './Container'
 
-export default class DustbinSingleTarget extends React.PureComponent {
-	public render() {
-		return (
-			<div>
-				<p>
-					<b>
-						<a href="https://github.com/react-dnd/react-dnd/tree/master/packages/documentation/examples/01%20Dustbin/Single%20Target">
-							Browse the Source
-						</a>
-					</b>
-				</p>
-				<p>This is the simplest example there is.</p>
-				<p>
-					Drag the boxes below and drop them into the dustbin. Note that it has
-					a neutral, an active and a hovered state. The dragged item itself
-					changes opacity while dragged.
-				</p>
-				<Container />
-			</div>
-		)
-	}
-}
+export default (React as any).memo(() => (
+	<div>
+		<p>
+			<b>
+				<a href="https://github.com/react-dnd/react-dnd/tree/master/packages/documentation/examples/01%20Dustbin/Single%20Target">
+					Browse the Source
+				</a>
+			</b>
+		</p>
+		<p>This is the simplest example there is.</p>
+		<p>
+			Drag the boxes below and drop them into the dustbin. Note that it has a
+			neutral, an active and a hovered state. The dragged item itself changes
+			opacity while dragged.
+		</p>
+		<Container />
+	</div>
+))

packages/documentation/package.json

@@ -4,52 +4,50 @@
 	"private": true,
 	"scripts": {
 		"clean": "rimraf __site__ __site_prerender__",
-		"serve": "webpack-dev-server --config site/webpack-client.config.js --hot --content-base __site__",
-		"start": "run-s clean prerender build:index_page serve",
+		"serve": "webpack-dev-server --mode development --config site/webpack-client.config.js --hot --content-base __site__",
+		"start": "run-s clean prerender build_index serve",
 		"prerender": "./node_modules/.bin/webpack --config site/webpack-prerender.config.js",
 		"build": "tsc",
-		"build:index_page": "ts-node ./scripts/buildSiteIndexPages.ts",
-		"build_site": "./scripts/buildStaticSite.sh"
+		"build_index": "ts-node ./scripts/buildSiteIndexPages.ts",
+		"build_site": "./scripts/buildStaticSite.sh",
+		"publish_gh_pages": "NODE_DEBUG=gh-pages gh-pages -d __site__ -t",
+		"nojekyll": "touch __site__/.nojekyll",
+		"publish": "run-s clean build_site nojekyll publish_gh_pages"
 	},
 	"devDependencies": {
-		"autoprefixer": "^7.1.2",
-		"babel-loader": "^7.1.4",
-		"babel-register": "^6.24.1",
-		"circular-dependency-plugin": "^5.0.2",
-		"css-loader": "^0.28.11",
-		"file-loader": "^1.1.11",
+		"@babel/register": "^7.0.0",
+		"babel-loader": "^8.0.4",
+		"file-loader": "^2.0.0",
+		"gh-pages": "^2.0.1",
 		"html-loader": "^0.5.5",
 		"karma-sourcemap-loader": "^0.3.7",
-		"less": "^2.7.2",
-		"less-loader": "^4.1.0",
-		"marked": "^0.3.6",
+		"marked": "^0.5.1",
 		"null-loader": "^0.1.1",
-		"postcss": "^6.0.6",
-		"react-hot-loader": "^4.1.2",
+		"react-hot-loader": "^4.3.11",
 		"rimraf": "^2.6.2",
-		"style-loader": "^0.21.0",
-		"ts-loader": "^4.2.0",
-		"ts-node": "^6.0.5",
-		"url-loader": "^1.0.1",
-		"webpack": "^4.6.0",
-		"webpack-cli": "^2.1.2",
-		"webpack-dev-server": "^3.1.3"
+		"ts-loader": "^5.2.2",
+		"ts-node": "^7.0.1",
+		"url-loader": "^1.1.2",
+		"webpack": "^4.23.1",
+		"webpack-cli": "^3.1.2",
+		"webpack-dev-server": "^3.1.10"
 	},
 	"dependencies": {
 		"@types/faker": "^4.1.2",
 		"@types/immutability-helper": "^2.6.3",
-		"@types/node": "10.3.2",
-		"@types/react": "^16.3.14",
-		"@types/react-dom": "^16.0.5",
+		"@types/react": "16.3.14",
+		"@types/react-dom": "16.0.9",
+		"@types/styled-components": "^4.0.3",
 		"faker": "^3.1.0",
 		"immutability-helper": "^2.4.0",
-		"lodash": "^4.17.10",
-		"react": "^16.4.0",
+		"lodash": "^4.17.11",
+		"react": "^16.6.0",
 		"react-dnd": "^5.0.0",
 		"react-dnd-html5-backend": "^5.0.1",
 		"react-dnd-test-backend": "^5.0.1",
-		"react-dom": "^16.4.0",
-		"react-frame-component": "git://github.com/ryanseddon/react-frame-component.git#bcc0af0a4fc43c8e50908f478133cf8ee528238c",
-		"shallowequal": "^1.0.2"
+		"react-dom": "^16.6.0",
+		"react-frame-component": "^4.0.2",
+		"shallowequal": "^1.1.0",
+		"styled-components": "^4.0.2"
 	}
 }

packages/documentation/scripts/buildStaticSite.sh

@@ -4,6 +4,6 @@ PATH=$(npm bin):$PATH
 
 rm -rf ./__site__
 rm -rf ./__site_prerender__
-NODE_ENV=production webpack --config "$PWD/site/webpack-client.config.js"
-NODE_ENV=production webpack --config "$PWD/site/webpack-prerender.config.js"
+webpack --mode production --config "$PWD/site/webpack-client.config.js"
+webpack --mode production --config "$PWD/site/webpack-prerender.config.js"
 NODE_ENV=production ts-node ./scripts/buildSiteIndexPages.ts