Consolidate builds into ES-Modules

package.json

@@ -96,6 +96,7 @@
 		],
 		"moduleNameMapper": {
 			"^react-dnd$": "<rootDir>/packages/react-dnd/src",
+			"^react-dnd-decorators$": "<rootDir>/packages/react-dnd-decorators/src",
 			"^react-dnd-html5-backend$": "<rootDir>//packages/react-dnd-html5-backend/src",
 			"^react-dnd-test-backend$": "<rootDir>//packages/react-dnd-test-backend/src",
 			"^react-dnd-test-utils$": "<rootDir>//packages/react-dnd-test-utils/src",

packages/dnd-core/package.json

@@ -3,14 +3,13 @@
 	"version": "7.6.0",
 	"description": "Drag and drop sans the GUI",
 	"license": "MIT",
-	"main": "./lib/esm/index.js",
-	"module": "./lib/esm/index.js",
-	"types": "./lib/esm/index.d.ts",
+	"main": "./lib/index.js",
+	"module": "./lib/index.js",
+	"types": "./lib/index.d.ts",
 	"scripts": {
-		"build:esm": "tsc -b tsconfig.esm.json",
-		"build": "run-p build:*",
+		"build": "tsc -b tsconfig.json",
 		"clean": "rimraf lib",
-		"start": "tsc -b tsconfig.esm.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/src/components/layout.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import Helmet from 'react-helmet'
 import styled from 'styled-components'
 import HTML5Backend from 'react-dnd-html5-backend'
-import { isDebugMode } from 'react-dnd-examples-hooks/lib/esm/index'
+import { isDebugMode } from 'react-dnd-examples-hooks/lib/index'
 import { DndProvider } from 'react-dnd'
 import PageBody from './pagebody'
 import Sidebar from './sidebar'
@@ -13,7 +13,7 @@ import { APIPages, ExamplePages } from '../constants'
 import Header from './header'
 import './layout.css'
 import { isLegacyMode } from '../util/renderHtmlAst'
-require('prismjs/themes/prism.css')
+import 'prismjs/themes/prism.css'
 const favicon = require('../favicon.png')
 
 export interface LayoutProps {

packages/documentation/src/util/renderHtmlAst.ts

@@ -1,12 +1,14 @@
-declare var require: any
 import { createElement } from 'react'
-import { componentIndex as decoratorComponentIndex } from 'react-dnd-examples-decorators/lib/esm/index'
-import { componentIndex as hookComponentIndex } from 'react-dnd-examples-hooks/lib/esm/index'
+import { componentIndex as decoratorComponentIndex } from 'react-dnd-examples-decorators/lib/index'
+import { componentIndex as hookComponentIndex } from 'react-dnd-examples-hooks/lib/index'
 import { parse } from 'query-string'
 import processImages from './processImagesInMarkdownAst'
 import exampleTabs from '../components/exampleTabs'
-const log = require('debug')('site:renderHtmlAst')
-const rehypeReact = require('rehype-react')
+import debug from 'debug'
+// @ts-ignore
+import rehypeReact from 'rehype-react'
+
+const log = debug('site:renderHtmlAst')
 
 export function isLegacyMode() {
 	if (typeof window !== 'undefined') {

packages/documentation/tsconfig.json

@@ -1,10 +1,11 @@
 {
-	"extends": "../../tsconfig.esm.base.json",
+	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"outDir": "./lib",
 		"baseUrl": "./",
 		"allowSyntheticDefaultImports": true,
 		"esModuleInterop": true,
+		"declaration": false,
 		"allowJs": true
 	},
 	"include": ["./src/index.ts"]

packages/examples-decorators/package.json

@@ -3,21 +3,20 @@
 	"version": "7.6.0",
 	"private": true,
 	"description": "Drag and Drop for React",
-	"main": "lib/cjs/index.js",
-	"types": "lib/cjs/index.d.ts",
+	"main": "lib/index.js",
+	"types": "lib/index.d.ts",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/react-dnd/react-dnd.git"
 	},
 	"license": "MIT",
 	"scripts": {
 		"clean": "rimraf lib",
-		"build:cjs": "tsc -b tsconfig.cjs.json",
-		"build:esm": "tsc -b tsconfig.esm.json",
+		"build:ts": "tsc -b tsconfig.json",
 		"build:docs": "tsc -b tsconfig.docs.json",
 		"build": "run-p build:*",
 		"test": "run-s clean build",
-		"start": "tsc -b tsconfig.cjs.json -w --preserveWatchOutput"
+		"start": "tsc -b tsconfig.json -w --preserveWatchOutput"
 	},
 	"dependencies": {
 		"@types/faker": "^4.1.5",

packages/examples-decorators/src/01-dustbin/multiple-targets/Dustbin.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { ConnectDropTarget, DropTargetMonitor } from 'react-dnd'
 import { DropTarget } from 'react-dnd-decorators'
+
 const style: React.CSSProperties = {
 	height: '12rem',
 	width: '12rem',

packages/examples-decorators/src/01-dustbin/multiple-targets/__tests__/multiple-target-integration.spec.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-dnd-test-utils'
 import { mount } from 'enzyme'
 import { TestBackend } from 'react-dnd-test-backend'
-import { DndComponent as DndC } from 'react-dnd'
+import { DndComponent as DndC } from 'react-dnd-decorators'
 
 describe('Dustbin: Multiple Targets', () => {
 	it('behaves as expected', () => {

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

@@ -1,15 +1,10 @@
-declare var require: any
-
 import React from 'react'
 import { DndProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
 import Dustbin from './Dustbin'
 import Box from './Box'
-
-const {
-	default: Frame,
-	FrameContextConsumer,
-} = require('react-frame-component')
+// @ts-ignore
+import Frame, { FrameContextConsumer } from 'react-frame-component'
 
 const FrameBindingContext: React.FC = ({ children }) => (
 	<FrameContextConsumer>

packages/examples-decorators/src/01-dustbin/single-target/__tests__/Box.spec.tsx

@@ -3,7 +3,7 @@ import Box from '../Box'
 import { wrapInTestContext } from 'react-dnd-test-utils'
 import { mount } from 'enzyme'
 import { TestBackend } from 'react-dnd-test-backend'
-import { ContextComponent } from 'react-dnd'
+import { ContextComponent } from 'react-dnd-decorators'
 
 describe('Box', () => {
 	// TODO: test utils are acting wonking with function components.

packages/examples-decorators/src/01-dustbin/single-target/__tests__/single-target-integration.spec.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-dnd-test-utils'
 import { mount } from 'enzyme'
 import { TestBackend } from 'react-dnd-test-backend'
-import { DndComponent } from 'react-dnd'
+import { DndComponent } from 'react-dnd-decorators'
 
 describe('Integration: Dustbin Single Target', () => {
 	it('can simulate a full drag and drop interaction', () => {

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

@@ -1,11 +1,11 @@
-declare var require: any
 import React, { useState, useEffect, useCallback } from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import Dustbin from './Dustbin'
 import Box from './Box'
 import ItemTypes from './ItemTypes'
 import update from 'immutability-helper'
-const shuffle = require('lodash/shuffle')
+// @ts-ignore
+import shuffle from 'lodash/shuffle'
 
 export interface SourceBox {
 	name: string

packages/examples-decorators/src/02-drag-around/custom-drag-layer/Container.tsx

@@ -1,11 +1,11 @@
-declare var require: any
 import React from 'react'
 import { ConnectDropTarget, DropTargetMonitor } from 'react-dnd'
 import { DropTarget, DropTargetConnector } from 'react-dnd-decorators'
 import ItemTypes from './ItemTypes'
 import DraggableBox from './DraggableBox'
 import snapToGrid from './snapToGrid'
-const update = require('immutability-helper')
+// @ts-ignore
+import update from 'immutability-helper'
 
 const styles: React.CSSProperties = {
 	width: 300,

packages/examples-decorators/tsconfig.docs.json

@@ -1,5 +1,5 @@
 {
-	"extends": "./tsconfig.esm.json",
+	"extends": "./tsconfig.json",
 	"compilerOptions": {
 		"allowSyntheticDefaultImports": true,
 		"jsx": "preserve",

packages/examples-hooks/tsconfig.esm.json → packages/examples-decorators/tsconfig.json

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

packages/examples-hooks/package.json

@@ -3,21 +3,20 @@
 	"version": "7.6.0",
 	"private": true,
 	"description": "Drag and Drop for React",
-	"main": "lib/cjs/index.js",
-	"types": "lib/cjs/index.d.ts",
+	"main": "lib/index.js",
+	"types": "lib/index.d.ts",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/react-dnd/react-dnd.git"
 	},
 	"license": "MIT",
 	"scripts": {
 		"clean": "rimraf lib",
-		"build:cjs": "tsc -b tsconfig.cjs.json",
-		"build:esm": "tsc -b tsconfig.esm.json",
+		"build:ts": "tsc -b tsconfig.json",
 		"build:docs": "tsc -b tsconfig.docs.json",
 		"build": "run-p build:*",
 		"test": "run-s clean build",
-		"start": "tsc -b tsconfig.cjs.json -w --preserveWatchOutput"
+		"start": "tsc -b tsconfig.json -w --preserveWatchOutput"
 	},
 	"dependencies": {
 		"@types/faker": "^4.1.5",

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

@@ -1,15 +1,10 @@
-declare var require: any
-
 import React from 'react'
 import { DndProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
 import Dustbin from './Dustbin'
 import Box from './Box'
-
-const {
-	default: Frame,
-	FrameContextConsumer,
-} = require('react-frame-component')
+// @ts-ignore
+import Frame, { FrameContextConsumer } from 'react-frame-component'
 
 const FrameBindingContext: React.FC = ({ children }) => (
 	<FrameContextConsumer>

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

@@ -1,11 +1,11 @@
-declare var require: any
 import React, { useState, useEffect, useCallback } from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import Dustbin from './Dustbin'
 import Box from './Box'
 import ItemTypes from './ItemTypes'
 import update from 'immutability-helper'
-const shuffle = require('lodash/shuffle')
+// @ts-ignore
+import shuffle from 'lodash/shuffle'
 
 export interface SourceBox {
 	name: string