React-DnD Version 8 (#1384)

* docs: use hooks-based examples in code-sandboxes

* refactor: move decorator-based API to a new package (#1382)

* docs: correct docsite loading

* Consolidate builds into ES-Modules (#1383)

* refactor: remove cjs builds

* fix: update tsconfigs

* refactor: replace require() form with imports. use @ts-ignore if types are unavailable

* refactor: remove umd builds

* refactor: remove webpack deps from react-dnd-html5-backend

* refactor: update how internals are shared between react-dnd and react-dnd-decorators

* fix: correct tests

* fix: jest typings issues

* Move Decorators back into React-DnD (#1392)

* refactor: move decorators back to the main library

* fix: add type: module to package.json files

* chore: remove wallaby.js file

* Restore UMD Builds as a new Package (#1393)

* build: add umd builds package

* feat: restore umd builds in a separate package

* test: add test.html driver

* docs: allow examples to swap between hooks and decorator mode

* docs: style the hooks/decorators toggle

* docs: add hooks/decorator example sandboxes

* docs: remove mention of the ?legacy flag

* fix: remove mention of react-dnd-decorators

* docs: correct examples import

* docs: use hooks on docsroot

packages/dnd-core/package.json

@@ -1,17 +1,16 @@
 {
 	"name": "dnd-core",
-	"version": "7.6.0",
+	"version": "7.6.2",
 	"description": "Drag and drop sans the GUI",
 	"license": "MIT",
-	"main": "./lib/cjs/index.js",
-	"module": "./lib/esm/index.js",
-	"types": "./lib/cjs/index.d.ts",
+	"main": "./lib/index.js",
+	"module": "./lib/index.js",
+	"type": "module",
+	"types": "./lib/index.d.ts",
 	"scripts": {
-		"build:esm": "tsc -b tsconfig.esm.json",
-		"build:cjs": "tsc -b tsconfig.cjs.json",
-		"build": "run-p build:*",
+		"build": "tsc -b tsconfig.json",
 		"clean": "rimraf lib",
-		"start": "tsc -b tsconfig.cjs.json -w --preserveWatchOutput",
+		"start": "tsc -b tsconfig.json -w --preserveWatchOutput",
 		"test": "run-s clean build"
 	},
 	"repository": {

packages/dnd-core/src/DragDropMonitorImpl.ts

@@ -1,5 +1,3 @@
-declare var require: any
-
 import { Store } from 'redux'
 import matchesType from './utils/matchesType'
 import {
@@ -16,7 +14,8 @@ import {
 	HandlerRegistry,
 	Identifier,
 } from './interfaces'
-const invariant = require('invariant')
+// @ts-ignore
+import invariant from 'invariant'
 
 export default class DragDropMonitorImpl implements DragDropMonitor {
 	constructor(private store: Store<State>, public registry: HandlerRegistry) {}

packages/dnd-core/src/HandlerRegistryImpl.ts

@@ -1,5 +1,3 @@
-declare var require: any
-
 import { Store } from 'redux'
 import {
 	addSource,
@@ -23,8 +21,10 @@ import {
 	validateTargetContract,
 	validateType,
 } from './contracts'
-const invariant = require('invariant')
-const asap = require('asap')
+// @ts-ignore
+import invariant from 'invariant'
+// @ts-ignore
+import asap from 'asap'
 
 function getNextHandlerId(role: HandlerRole): string {
 	const id = getNextUniqueId().toString()

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

@@ -1,5 +1,3 @@
-declare var require: any
-
 import {
 	Action,
 	DragDropManager,
@@ -11,7 +9,8 @@ import {
 } from '../../interfaces'
 import { setClientOffset } from './local/setClientOffset'
 import { isObject } from '../../utils/discount_lodash'
-const invariant = require('invariant')
+// @ts-ignore
+import invariant from 'invariant'
 
 import { BEGIN_DRAG, INIT_COORDS } from './types'
 

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

@@ -8,8 +8,8 @@ import {
 } from '../../interfaces'
 import { DROP } from './types'
 import { isObject } from '../../utils/discount_lodash'
-declare var require: any
-const invariant = require('invariant')
+// @ts-ignore
+import invariant from 'invariant'
 
 export default function createDrop<Context>(manager: DragDropManager<Context>) {
 	return function drop(options = {}): void {

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

@@ -1,13 +1,11 @@
-declare var require: any
-
 import {
 	DragDropManager,
 	SentinelAction,
 	DragDropMonitor,
 } from '../../interfaces'
 import { END_DRAG } from './types'
-
-const invariant = require('invariant')
+// @ts-ignore
+import invariant from 'invariant'
 
 export default function createEndDrag<Context>(
 	manager: DragDropManager<Context>,

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

@@ -1,5 +1,3 @@
-declare var require: any
-
 import {
 	Action,
 	DragDropManager,
@@ -10,8 +8,8 @@ import {
 } from '../../interfaces'
 import matchesType from '../../utils/matchesType'
 import { HOVER } from './types'
-
-const invariant = require('invariant')
+// @ts-ignore
+import invariant from 'invariant'
 
 export default function createHover<Context>(
 	manager: DragDropManager<Context>,

packages/dnd-core/src/contracts.ts

@@ -1,7 +1,6 @@
-declare var require: any
-
 import { DragSource, DropTarget, Identifier } from './interfaces'
-const invariant = require('invariant')
+// @ts-ignore
+import invariant from 'invariant'
 
 export function validateSourceContract(source: DragSource) {
 	invariant(

packages/react-dnd-test-utils/tsconfig.cjs.json → packages/dnd-core/tsconfig.json

@@ -1,7 +1,7 @@
 {
-	"extends": "../../tsconfig.cjs.base.json",
+	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"outDir": "./lib/cjs",
+		"outDir": "lib",
 		"baseUrl": "./src"
 	},
 	"include": ["src/index.ts"]

packages/documentation/.gitignore

@@ -2,5 +2,7 @@
 
 # Build directory
 /public
-/static/examples_js
-/static/examples_ts
+/static/examples_hooks_js
+/static/examples_hooks_ts
+/static/examples_decorators_js
+/static/examples_decorators_ts

packages/documentation/markdown/docs/00 Quick Start/Tutorial.md

@@ -424,7 +424,7 @@ In the future, you might want to explore alternative third-party backends, such
 
 ## Setting up the Drag and Drop Context
 
-The first thing we need to set up in our app is the [`DragDropContextProvider`](/docs/api/drag-drop-context-provider). This should be mounted near the top of our application.
+The first thing we need to set up in our app is the [`DndProvider`](/docs/api/dnd-provider). This should be mounted near the top of our application.
 We need this to specify that we're going to use the [HTML5Backend](/docs/backends/html5).
 
 ```jsx

packages/documentation/markdown/docs/01 Top Level API/DragDropContextProvider.md → packages/documentation/markdown/docs/01 Top Level API/DndContext.md

@@ -1,6 +1,6 @@
 ---
-path: '/docs/api/drag-drop-context-provider'
-title: 'DragDropContextProvider'
+path: '/docs/api/dnd-provider'
+title: 'DndProvider'
 ---
 
 _New to React DnD? [Read the overview](/docs/overview) before jumping into the docs._
@@ -15,15 +15,11 @@ injected with a backend via the `backend` prop, but it also can be injected with
 
 ```jsx
 import HTML5Backend from 'react-dnd-html5-backend'
-import { DragDropContextProvider } from 'react-dnd'
+import { DndProvider } from 'react-dnd'
 
 export default class YourApp {
   render() {
-    return (
-      <DragDropContextProvider backend={HTML5Backend}>
-        /* ... */
-      </DragDropContextProvider>
-    )
+    return <DndProvider backend={HTML5Backend}>/* ... */</DndProvider>
   }
 }
 ```

packages/documentation/markdown/docs/docsRoot.md

@@ -8,11 +8,7 @@ React DnD is a set of React utilities to help you build complex drag and drop in
 ## Installation
 
 ```bash
-# Using npm
-npm i -s react-dnd react-dnd-html5-backend
-
-# Using yarn
-yarn add  react-dnd react-dnd-html5-backend
+yarn add react-dnd react-dnd-html5-backend
 ```
 
 The second package will allow React DnD [the HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop) under the hood. You may choose to use a third-party backend instead, such as [the touch backend](https://github.com/yahoo/react-dnd-touch-backend).
@@ -23,36 +19,25 @@ The second package will allow React DnD [the HTML5 drag and drop API](https://de
 // Let's make <Card text='Write the docs' /> draggable!
 
 import React from 'react'
-import { DragSource } from 'react-dnd'
+import { useDrag, DragSource } from 'react-dnd'
 import { ItemTypes } from './Constants'
 
 /**
  * Your Component
  */
-function Card({ isDragging, dragSource, text }) {
-  const opacity = isDragging ? 0.5 : 1
-  return dragSource(<div style={{ opacity }}>{text}</div>)
-}
-
-/**
- * Implement the drag source contract.
- */
-const cardSource = {
-  beginDrag: props => ({ text: props.text }),
+export default function Card({ isDragging, dragSource, text }) {
+  const [{ opacity }, dragRef] = useDrag({
+    item: { type: ItemTypes.CARD, text },
+    collect: monitor => ({
+      opacity: monitor.isDragging() ? 0.5 : 1,
+    }),
+  })
+  return (
+    <div ref={dragRef} style={{ opacity }}>
+      {text}
+    </div>
+  )
 }
-
-/**
- * Specifies the props to inject into your component.
- */
-function collect(connect, monitor) {
-  return {
-    dragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  }
-}
-
-// Export the wrapped component:
-export default DragSource(ItemTypes.CARD, cardSource, collect)(Card)
 ```
 
 ## Features

packages/documentation/markdown/docs/examples/examplesRoot.md

@@ -18,7 +18,6 @@ If you use a pattern that is not covered here, please submit a Pull Request to a
 For these examples, the following flags are available. To enable them add them to the end of your URL.
 
 - `?debug` - Enables **debug mode** of `dnd-core`. This registers `dnd-core` with the [Redux Devtools Chrome extension](https://github.com/zalmoxisus/redux-devtools-extension).
-- `?legacy` - Enables the legacy **decorator-based** examples.
 
 The source code for the hooks-based examples are in the [examples-hooks package](https://github.com/react-dnd/react-dnd/tree/master/packages/examples-hooks/src) on GitHub.
 

packages/documentation/markdown/examples/chessboard/tutorial.md

@@ -9,6 +9,5 @@ It illustrates creating the drag sources and the drop targets, using
 the monitors to query the current drag state, and customizing the drag
 previews.
 
-<view-source name="00-chessboard">
-  <chessboard></chessboard>
+<view-source name="00-chessboard" component="chessboard">
 </view-source>

packages/documentation/markdown/examples/customize/drop-effects.md

@@ -7,6 +7,5 @@ Some browsers let you specify the “drop effects” for the draggable
 items. In the compatible browsers, you will see a “copy” icon when you
 drag the first box over the drop zone.
 
-<view-source name="05-customize/drop-effects">
-  <customize-drop-effects></customize-drop-effects>
+<view-source name="05-customize/drop-effects" component="customize-drop-effects">
 </view-source>

packages/documentation/markdown/examples/customize/handles-and-previews.md

@@ -8,6 +8,5 @@ preview node in your component's `render` function.
 
 You may also use an [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) instance that you created programmatically once it has loaded.
 
-<view-source name="05-customize/handles-and-previews">
-  <customize-handles-and-previews></customize-handles-and-previews>
+<view-source name="05-customize/handles-and-previews" component="customize-handles-and-previews">
 </view-source>

packages/documentation/markdown/examples/drag-around/custom-drag-layer.md

@@ -19,6 +19,5 @@ With this approach, we miss out on default “return” animation when
 dropping outside the container. However, we get great flexibility in
 customizing drag feedback and zero flicker.
 
-<view-source name="02-drag-around/custom-drag-layer">
-  <drag-around-custom-drag-layer></drag-around-custom-drag-layer>
+<view-source name="02-drag-around/custom-drag-layer" component="drag-around-custom-drag-layer">
 </view-source>

packages/documentation/markdown/examples/drag-around/naive.md

@@ -24,6 +24,5 @@ control what happens to dragged preview once the browser has drawn it.
 Check out the [custom rendering example](/examples/drag-around/custom-drag-layer)  
 if you'd rather trade more control for some more work.
 
-<view-source name="02-drag-around/naive">
-  <drag-around-naive></drag-around-naive>
+<view-source name="02-drag-around/naive" component="drag-around-naive">
 </view-source>

packages/documentation/markdown/examples/dustbin/copy-or-move.md

@@ -12,6 +12,5 @@ could be used to sort the list, while holding down the alt key while
 dragging and dropping could copy the todo item to the drop target
 instead of moving it.
 
-<view-source name="01-dustbin/copy-or-move">
-  <dustbin-copy-or-move></dustbin-copy-or-move>
+<view-source name="01-dustbin/copy-or-move" component="dustbin-copy-or-move">
 </view-source>

packages/documentation/markdown/examples/dustbin/iframe.md

@@ -8,8 +8,7 @@ This is the same simple example, but nested in an iframe.
 When you are using the [react-dnd-html5-backend](/docs/backends/html5), you are limited to
 drag-and-drop within a single HTML document.
 
-Using react-dnd inside of an iframe requires using a [DragDropContextProvider](/docs/api/drag-drop-context-provider) within the iframe.
+Using react-dnd inside of an iframe requires using a [DndProvider](/docs/api/dnd-provider) within the iframe.
 
-<view-source name="01-dustbin/single-target-in-iframe">
-  <dustbin-single-target-in-iframe></dustbin-single-target-in-iframe>
+<view-source name="01-dustbin/single-target-in-iframe" component="dustbin-single-target-in-iframe">
 </view-source>

packages/documentation/markdown/examples/dustbin/multiple-targets.md

@@ -9,6 +9,5 @@ and how those types may be derived from props. It also demonstrates
 the handling of native files and URLs (try dropping them onto the last
 two dustbins).
 
-<view-source name="01-dustbin/multiple-targets">
-  <dustbin-multiple-targets></dustbin-multiple-targets>
+<view-source name="01-dustbin/multiple-targets" component="dustbin-multiple-targets">
 </view-source>

packages/documentation/markdown/examples/dustbin/single-target.md

@@ -9,6 +9,5 @@ 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.
 
-<view-source name="01-dustbin/single-target">
-  <dustbin-single-target></dustbin-single-target>
+<view-source name="01-dustbin/single-target" component="dustbin-single-target">
 </view-source>

packages/documentation/markdown/examples/dustbin/stress-test.md

@@ -9,6 +9,5 @@ that React DnD keeps track of the changing props, and if a component
 receives the new props, React DnD recalculates the drag and drop
 state. It also shows how a custom `isDragging` implementation can make the drag source appear as dragged, even if the component that initiated the drag has received new props.
 
-<view-source name="01-dustbin/stress-test">
-  <dustbin-stress-test></dustbin-stress-test>
+<view-source name="01-dustbin/stress-test" component="dustbin-stress-test">
 </view-source>

packages/documentation/markdown/examples/nesting/drag-sources.md

@@ -9,6 +9,5 @@ be asked, until a draggable source is found and activated. Only the
 activated drag source will have its `beginDrag()` and
 `endDrag()` called.
 
-<view-source name="03-nesting/drag-sources">
-  <nesting-drag-sources></nesting-drag-sources>
+<view-source name="03-nesting/drag-sources" component="nesting-drag-sources">
 </view-source>

packages/documentation/markdown/examples/nesting/drop-targets.md

@@ -9,6 +9,5 @@ dragged.
 
 React DnD by design offers no means of stopping propagation. Instead, the drop targets may compare `monitor.isOver()` and `monitor.isOver({ shallow: false })` to learn if just them, or their nested targets, are being hovered. They may also check `monitor.didDrop()` and `monitor.getDropResult()` to learn if a nested target has already handled the drop, and even return a different drop result.
 
-<view-source name="03-nesting/drop-targets">
-  <nesting-drop-targets></nesting-drop-targets>
+<view-source name="03-nesting/drop-targets" compnoent="nesting-drop-targets">
 </view-source>

packages/documentation/markdown/examples/other/drag-source-rerender.md

@@ -5,6 +5,5 @@ title: 'Drag Source Rerender'
 
 Regression example using a drop target that's connected as a child
 
-<view-source name="06-other/drag-source-rerender">
-  <other-drag-source-rerender></other-drag-source-rerender>
+<view-source name="06-other/drag-source-rerender" component="other-drag-source-rerender">
 </view-source>

packages/documentation/markdown/examples/other/native-files.md

@@ -5,6 +5,5 @@ title: 'Native Files'
 
 Example demonstrating drag and drop of native files.
 
-<view-source name="06-other/native-files">
-  <other-native-files></other-native-files>
+<view-source name="06-other/native-files" component="other-native-files">
 </view-source>

packages/documentation/markdown/examples/sortable/cancel-on-drop-outside.md

@@ -8,6 +8,5 @@ you can tweak the behavior to the one your app needs.
 
 In this example, instead of moving the card inside the drop target's `drop()` handler, we do it inside the drag source's `endDrag()` handler. This let us check `monitor.didDrop()` and revert the drag operation if the card was dropped outside its container.
 
-<view-source name="04-sortable/cancel-on-drop-outside">
-  <sortable-cancel-on-drop-outside></sortable-cancel-on-drop-outside>
+<view-source name="04-sortable/cancel-on-drop-outside" component="sortable-cancel-on-drop-outside">
 </view-source>

packages/documentation/markdown/examples/sortable/simple.md

@@ -7,6 +7,5 @@ It is easy to implement a sortable interface with React DnD. Just make
 the same component both a drag source and a drop target, and reorder
 the data in the `hover` handler.
 
-<view-source name="04-sortable/simple">
-  <sortable-simple></sortable-simple>
+<view-source name="04-sortable/simple" component="sortable-simple">
 </view-source>