Library Refresh, Prep for Release (#1159)

* fix: TS fixes for dragDrop * fix: correct tests, update libraries, fix chained decorator typings * fix: remove generic argument from decorateHandler invocatinos * chore: clean up some typings in the dnd interfaces * refactor: clean up tyings, remove DndComponentClass type * Revert "refactor: clean up tyings, remove DndComponentClass type" This reverts commit f2d24bd. * fix: keep DndComponentClass, correct typings issues with the examples * fix: update dragsource test
react-dnd · Nov 7, 2018 · 760cef3 · 760cef3
1 parent 84db06e
commit 760cef3
Show file tree

Hide file tree

Showing 19 changed files with 1,055 additions and 2,327 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "react-dnd-master",
+	"name": "react-dnd-parent",
 	"private": true,
 	"description": "React-DnD Monorepo",
 	"repository": {
@@ -60,7 +60,7 @@
 	"devDependencies": {
 		"@commitlint/cli": "^7.2.1",
 		"@commitlint/config-conventional": "^7.1.2",
-		"@types/jest": "^23.3.8",
+		"@types/jest": "^23.3.9",
 		"husky": "^1.1.3",
 		"jest": "^23.6.0",
 		"jest-environment-jsdom": "^23.4.0",
@@ -107,8 +107,7 @@
 	},
 	"workspaces": {
     "packages": ["packages/*"],
-    "nohoist": [
-
+    "nohoist": [      
       "**/@types/*",
       "**/hoist-non-react-statics",
 			"**/redux"

diff --git a/packages/dnd-core/src/actions/dragDrop.ts b/packages/dnd-core/src/actions/dragDrop.ts
@@ -56,7 +56,7 @@ export default function createDragDropActions<Context>(
 					typeof getSourceClientOffset === 'function',
 					'When clientOffset is provided, getSourceClientOffset must be a function.',
 				)
-				sourceClientOffset = getSourceClientOffset(sourceId)
+				sourceClientOffset = getSourceClientOffset!(sourceId)
 			}
 			return {
 				type: INIT_COORDS,
@@ -101,7 +101,7 @@ export default function createDragDropActions<Context>(
 					typeof getSourceClientOffset === 'function',
 					'When clientOffset is provided, getSourceClientOffset must be a function.',
 				)
-				sourceClientOffset = getSourceClientOffset(sourceId)
+				sourceClientOffset = getSourceClientOffset!(sourceId)
 			}
 
 			const source = registry.getSource(sourceId)
@@ -234,8 +234,8 @@ export default function createDragDropActions<Context>(
 			invariant(monitor.isDragging(), 'Cannot call endDrag while not dragging.')
 
 			const sourceId = monitor.getSourceId()
-			const source = registry.getSource(sourceId, true)
-			source.endDrag(monitor, sourceId)
+			const source = registry.getSource(sourceId!, true)
+			source.endDrag(monitor, sourceId!)
 			registry.unpinSource()
 			return { type: END_DRAG }
 		},

diff --git a/packages/documentation-examples/package.json b/packages/documentation-examples/package.json
@@ -21,21 +21,17 @@
 		"@types/styled-components": "^4.0.3",
 		"dnd-core": "^4.0.5",
 		"faker": "^4.1.0",
-		"hoist-non-react-statics": "^2.5.0",
 		"immutability-helper": "^2.8.1",
-		"invariant": "^2.1.0",
 		"lodash": "^4.17.11",
 		"react-dnd": "^5.0.0",
 		"react-dnd-html5-backend": "^5.0.1",
-		"recompose": "^0.27.1",
-		"shallowequal": "^1.1.0",
 		"styled-components": "^4.0.3"
 	},
 	"devDependencies": {
-		"@types/react": "16.3.14",
-		"@types/react-dom": "16.0.9",
+		"@types/react": "^16.4.18",
+		"@types/react-dom": "^16.0.9",
 		"npm-run-all": "^4.1.3",
-		"react": "^16.6.0",
+		"react": "^16.6.1",
 		"rimraf": "^2.6.2",
 		"typescript": "^3.1.6"
 	},

diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target/__tests__/integration.spec.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target/__tests__/integration.spec.tsx
@@ -28,7 +28,10 @@ describe('Integration', () => {
 
 		window.alert = jest.fn()
 
-		const dustbin: any = TestUtils.findRenderedComponentWithType(root, Dustbin)
+		const dustbin: any = TestUtils.findRenderedComponentWithType(
+			root,
+			Dustbin as any,
+		)
 		backend.simulateHover([dustbin.getHandlerId()])
 		backend.simulateDrop()
 		backend.simulateEndDrag()

diff --git a/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/Card.tsx b/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/Card.tsx
@@ -64,7 +64,7 @@ interface CardSourceCollectedProps {
 }
 
 interface CardTargetCollectedProps {
-	connectDropTarget?: ConnectDropTarget
+	connectDropTarget: ConnectDropTarget
 }
 
 class Card extends React.Component<
@@ -80,7 +80,7 @@ class Card extends React.Component<
 		const opacity = isDragging ? 0 : 1
 
 		return connectDragSource(
-			connectDropTarget!(<div style={{ ...style, opacity }}>{text}</div>),
+			connectDropTarget(<div style={{ ...style, opacity }}>{text}</div>),
 		)
 	}
 }

diff --git a/packages/documentation-examples/src/04 Sortable/Simple/Card.tsx b/packages/documentation-examples/src/04 Sortable/Simple/Card.tsx
@@ -95,7 +95,7 @@ interface CardSourceCollectedProps {
 }
 
 interface CardTargetCollectedProps {
-	connectDropTarget?: ConnectDropTarget
+	connectDropTarget: ConnectDropTarget
 }
 
 class Card extends React.Component<
@@ -111,7 +111,7 @@ class Card extends React.Component<
 		const opacity = isDragging ? 0 : 1
 
 		return connectDragSource(
-			connectDropTarget!(<div style={{ ...style, opacity }}>{text}</div>),
+			connectDropTarget(<div style={{ ...style, opacity }}>{text}</div>),
 		)
 	}
 }

diff --git a/packages/documentation-examples/src/04 Sortable/Stress Test/Card.tsx b/packages/documentation-examples/src/04 Sortable/Stress Test/Card.tsx
@@ -44,7 +44,7 @@ interface CardSourceCollectedProps {
 }
 
 interface CardTargetCollectedProps {
-	connectDropTarget?: ConnectDropTarget
+	connectDropTarget: ConnectDropTarget
 }
 
 class Card extends React.Component<
@@ -60,7 +60,7 @@ class Card extends React.Component<
 		const opacity = isDragging ? 0 : 1
 
 		return connectDragSource(
-			connectDropTarget!(<div style={{ ...style, opacity }}>{text}</div>),
+			connectDropTarget(<div style={{ ...style, opacity }}>{text}</div>),
 		)
 	}
 }

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -4,8 +4,8 @@
   "version": "5.0.1",
   "private": true,
   "dependencies": {
-    "@types/react": "16.3.14",
-    "@types/react-dom": "16.0.9",
+    "@types/react": "^16.4.18",
+    "@types/react-dom": "^16.0.9",
     "@types/react-helmet": "^5.0.7",
     "@types/styled-components": "^4.0.3",
     "gatsby": "^2.0.40",
@@ -26,12 +26,12 @@
     "gatsby-transformer-remark": "^2.1.11",
     "gatsby-transformer-sharp": "^2.1.8",
     "prismjs": "^1.15.0",
-    "react": "^16.6.0",
+    "react": "^16.6.1",
     "react-dnd": "^5.0.0",
     "react-dnd-documentation-examples": "^5.0.0",
     "react-dnd-html5-backend": "^5.0.1",
     "react-dnd-test-backend": "^5.0.1",
-    "react-dom": "^16.6.0",
+    "react-dom": "^16.6.1",
     "react-frame-component": "^4.0.2",
     "react-helmet": "^5.2.0",
     "react-typography": "^0.16.13",

diff --git a/packages/react-dnd-html5-backend/package.json b/packages/react-dnd-html5-backend/package.json
@@ -24,12 +24,12 @@
 		"lodash": "^4.17.11"
 	},
 	"devDependencies": {
-		"@types/react": "16.3.14",
+		"@types/react": "^16.4.18",
 		"npm-run-all": "^4.1.3",
 		"react": "^16.6.0",
 		"react-dnd-test-backend": "^5.0.1",
 		"rimraf": "^2.6.2",
-		"ts-loader": "^5.2.2",
+		"ts-loader": "^5.3.0",
 		"typescript": "^3.1.6",
 		"webpack": "^4.23.1",
 		"webpack-cli": "^3.1.2"

diff --git a/packages/react-dnd/package.json b/packages/react-dnd/package.json
@@ -21,22 +21,22 @@
 	},
 	"dependencies": {
 		"dnd-core": "^4.0.5",
-		"hoist-non-react-statics": "^2.5.0",
+		"hoist-non-react-statics": "^3.1.0",
 		"invariant": "^2.1.0",
 		"lodash": "^4.17.11",
-		"recompose": "^0.27.1",
+		"recompose": "^0.30.0",
 		"shallowequal": "^1.1.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.1.2",
-		"@babel/core": "^7.1.2",
-		"@types/react": "16.3.14",
-		"@types/react-dom": "16.0.9",
+		"@babel/cli": "^7.1.5",
+		"@babel/core": "^7.1.5",
+		"@types/react": "^16.4.18",
+		"@types/react-dom": "^16.0.9",
 		"babel-loader": "^8.0.4",
 		"npm-run-all": "^4.1.3",
-		"react": "^16.6.0",
+		"react": "^16.6.1",
 		"rimraf": "^2.6.2",
-		"ts-loader": "^5.2.2",
+		"ts-loader": "^5.3.0",
 		"typescript": "^3.1.6",
 		"webpack": "^4.23.1",
 		"webpack-cli": "^3.1.2"

diff --git a/packages/react-dnd/src/DragLayer.tsx b/packages/react-dnd/src/DragLayer.tsx
@@ -27,11 +27,9 @@ export default function DragLayer<Props, CollectedProps = {}>(
 		options,
 	)
 
-	return function decorateLayer<
-		TargetClass extends
-			| React.ComponentClass<Props>
-			| React.StatelessComponent<Props>
-	>(DecoratedComponent: TargetClass): TargetClass & DndComponentClass<Props> {
+	return function decorateLayer<T>(
+		DecoratedComponent: React.ComponentType<T>,
+	): DndComponentClass<Props> {
 		const Decorated = DecoratedComponent as any
 		const { arePropsEqual = shallowEqual } = options
 		const displayName = Decorated.displayName || Decorated.name || 'Component'
@@ -154,7 +152,9 @@ export default function DragLayer<Props, CollectedProps = {}>(
 			}
 		}
 
-		return hoistStatics(DragLayerContainer, DecoratedComponent) as TargetClass &
-			DndComponentClass<Props>
+		return hoistStatics(
+			DragLayerContainer,
+			DecoratedComponent,
+		) as DndComponentClass<Props>
 	}
 }
diff --git a/packages/react-dnd/src/DragSource.ts b/packages/react-dnd/src/DragSource.ts
@@ -76,10 +76,10 @@ export default function DragSource<Props, CollectedProps = {}, DragObject = {}>(
 		collect,
 	)
 
-	return function decorateSource<
-		TargetClass extends React.ComponentType<Props & CollectedProps>
-	>(DecoratedComponent: TargetClass): DndComponentClass<Props> {
-		return decorateHandler<Props, TargetClass, SourceType>({
+	return function decorateSource<T>(
+		DecoratedComponent: React.ComponentType<T>,
+	): DndComponentClass<Props> {
+		return decorateHandler<Props, SourceType>({
 			containerDisplayName: 'DragSource',
 			createHandler: createSource,
 			registerHandler: registerSource,

diff --git a/packages/react-dnd/src/DropTarget.ts b/packages/react-dnd/src/DropTarget.ts
@@ -69,10 +69,10 @@ export default function DropTarget<Props, CollectedProps = {}>(
 		collect,
 	)
 
-	return function decorateTarget<
-		TargetClass extends React.ComponentType<Props & CollectedProps>
-	>(DecoratedComponent: TargetClass): DndComponentClass<Props> {
-		return decorateHandler<Props, TargetClass, TargetType>({
+	return function decorateTarget<T>(
+		DecoratedComponent: React.ComponentType<T>,
+	): DndComponentClass<Props> {
+		return decorateHandler<Props, TargetType>({
 			containerDisplayName: 'DropTarget',
 			createHandler: createTarget,
 			registerHandler: registerTarget,

diff --git a/packages/react-dnd/src/__tests__/DragLayer.spec.tsx b/packages/react-dnd/src/__tests__/DragLayer.spec.tsx
@@ -3,13 +3,6 @@ import * as React from 'react'
 import { DragLayer } from '../index'
 
 describe('DragLayer', () => {
-	it('can apply to a class via decorator-fashion', () => {
-		@DragLayer(() => ({}))
-		class DecoratedClass extends React.Component {}
-
-		expect(DecoratedClass).toBeDefined()
-	})
-
 	it('can apply via composition', () => {
 		class ContextClass extends React.Component {}
 		const DecoratedClass = DragLayer(() => ({}))(ContextClass)

diff --git a/packages/react-dnd/src/__tests__/DragSource.spec.tsx b/packages/react-dnd/src/__tests__/DragSource.spec.tsx
@@ -3,13 +3,6 @@ import * as React from 'react'
 import { DragSource } from '../index'
 
 describe('DragSource', () => {
-	it('can apply to a class via decorator-fashion', () => {
-		@DragSource('abc', { beginDrag: () => null }, () => ({}))
-		class DecoratedClass extends React.Component {}
-
-		expect(DecoratedClass).toBeDefined()
-	})
-
 	it('can apply via composition', () => {
 		class ContextClass extends React.Component {}
 		const DecoratedClass = DragSource(
@@ -32,10 +25,17 @@ describe('DragSource', () => {
 	})
 
 	it('can apply to a ref-forwarded component', () => {
-		const RefForwarded: React.RefForwardingComponent<any, {}> = (props, ref) =>
-			null
+		interface RFProps {
+			children?: React.ReactNode
+		}
+
+		const RefForwarded: React.RefForwardingComponent<
+			HTMLDivElement,
+			RFProps
+		> = () => null
+
 		const DecoratedComponent = DragSource(
-			'abc',
+			'test_id',
 			{ beginDrag: () => null },
 			() => ({}),
 		)(RefForwarded)

diff --git a/packages/react-dnd/src/__tests__/DropTarget.spec.tsx b/packages/react-dnd/src/__tests__/DropTarget.spec.tsx
@@ -3,19 +3,6 @@ import * as React from 'react'
 import { DropTarget } from '../index'
 
 describe('DropTarget', () => {
-	it('can apply to a class via decorator-fashion', () => {
-		@DropTarget(
-			'abc',
-			{
-				drop: () => ({}),
-			},
-			() => ({}),
-		)
-		class DecoratedClass extends React.Component {}
-
-		expect(DecoratedClass).toBeDefined()
-	})
-
 	it('can apply via composition', () => {
 		class ContextClass extends React.Component {}
 		const DecoratedClass = DropTarget(

diff --git a/packages/react-dnd/src/decorateHandler.tsx b/packages/react-dnd/src/decorateHandler.tsx
@@ -13,8 +13,8 @@ const invariant = require('invariant')
 const hoistStatics = require('hoist-non-react-statics')
 const shallowEqual = require('shallowequal')
 
-export interface DecorateHandlerArgs<Props, TargetClass, ItemIdType> {
-	DecoratedComponent: TargetClass
+export interface DecorateHandlerArgs<Props, ItemIdType> {
+	DecoratedComponent: any
 	createHandler: any
 	createMonitor: any
 	createConnector: any
@@ -25,11 +25,7 @@ export interface DecorateHandlerArgs<Props, TargetClass, ItemIdType> {
 	options: any
 }
 
-export default function decorateHandler<
-	Props,
-	TargetClass extends React.ComponentType<any>,
-	ItemIdType
->({
+export default function decorateHandler<Props, ItemIdType>({
 	DecoratedComponent,
 	createHandler,
 	createMonitor,
@@ -39,9 +35,7 @@ export default function decorateHandler<
 	getType,
 	collect,
 	options,
-}: DecorateHandlerArgs<Props, TargetClass, ItemIdType>): DndComponentClass<
-	Props
-> {
+}: DecorateHandlerArgs<Props, ItemIdType>): DndComponentClass<Props> {
 	const { arePropsEqual = shallowEqual } = options
 	const Decorated: any = DecoratedComponent
 
@@ -255,6 +249,8 @@ export default function decorateHandler<
 		}
 	}
 
-	return hoistStatics(DragDropContainer, DecoratedComponent) as TargetClass &
-		DndComponentClass<Props>
+	return hoistStatics(
+		DragDropContainer,
+		DecoratedComponent,
+	) as DndComponentClass<Props>
 }