Flatten React-DnD Directory Structure (#3038)

* refactor: break out react-dnd's internal package structure

* chore: cut major semver due to re-layout

* fix: remove extraneous deps

* fix: jest tests

* chore: cut semver

* fix: tsconfig updates

* refactor: roll pkgs back into react-dnd using a flattened folder structure

* refactor: update DragDropManager construction; fix tests/linting

* chore: update semver document

* ci: remove redundant build script

* build: nvm

* fix: top-level build steps

.github/workflows/gh-pages.yml

@@ -16,8 +16,8 @@ jobs:
           node-version: 12.x
 
       - run: yarn install
-      - run: yarn build_all
-      - run: yarn build_docsite
+      - run: yarn build:all
+      - run: yarn build:docsite
 
       - name: deploy
         uses: peaceiris/actions-gh-pages@v2.10.1

.yarn/versions/dc458a27.yml

@@ -0,0 +1,10 @@
+releases:  
+  dnd-core: major
+  react-dnd: major
+  react-dnd-documentation: major
+  react-dnd-examples-decorators: major
+  react-dnd-examples-hooks: major
+  react-dnd-html5-backend: major
+  react-dnd-test-backend: major
+  react-dnd-test-utils: major
+  react-dnd-touch-backend: major

package.json

@@ -37,20 +37,20 @@
   "homepage": "https://github.com/react-dnd/react-dnd",
   "scripts": {
     "preinstall": "npx only-allow yarn",
-    "clean_all": "yarn workspaces foreach -pv run clean",
-    "build_all": "yarn workspaces foreach -pv --topological-dev run build",
-    "test_all": "yarn workspaces foreach -pv run test",
-    "build_docsite": "yarn build:docsite",
-    "unit_test": "jest",
-    "unit_test:watch": "jest --watch",
-    "unit_test:coverage": "jest --coverage",
+    "clean:all": "yarn workspaces foreach --exclude @react-dnd/build -pv run clean",
+    "build:all": "yarn workspaces foreach -pv --topological-dev run build",
+    "test:all": "yarn workspaces foreach -pv run test",
+    "lint": "run-s 'lint:*'",
+    "jest": "jest",
+    "jest:watch": "jest --watch",
+    "jest:coverage": "jest --coverage",
     "lint:code": "eslint . --ext .js,.ts,.jsx,.tsx",
     "lint:spelling": "mdspell 'packages/documentation/docsite/markdown/**/*.md' --en-us --report",
     "lint:tone": "alex .",
     "lint:formatting": "pretty-quick --check",
-    "lint": "run-s 'lint:*'",
+    "build_docsite": "yarn build:docsite",
     "changelog": "conventional-changelog -p eslint -i CHANGELOG.md -s -r 0",
-    "ci": "npm-run-all -s build_all -p test_all lint unit_test:coverage build_docsite -s git-is-clean",
+    "ci": "npm-run-all -s build:all -p test:all lint jest:coverage build_docsite -s git-is-clean",
     "prettify:source": "prettier 'packages/*/*/src/**/*.ts*'",
     "prettify": "pretty-quick --fix",
     "precommit:lint": "lint-staged",
@@ -72,6 +72,8 @@
     "@testing-library/react": "^11.2.5",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.28",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
     "@types/testing-library__jest-dom": "^5.9.5",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",

packages/backend-html5/package.json

@@ -27,9 +27,6 @@
     "@react-dnd/build": "workspace:packages/build",
     "gulp": "^4.0.2"
   },
-  "peerDependencies": {
-    "react-refresh": "*"
-  },
   "umd": {
     "name": "ReactDnDHTML5Backend",
     "input": "./dist/esm/index.js",

packages/backend-touch/package.json

@@ -29,9 +29,6 @@
     "@react-dnd/build": "workspace:packages/build",
     "gulp": "^4.0.2"
   },
-  "peerDependencies": {
-    "react-refresh": "*"
-  },
   "umd": {
     "name": "ReactDnDTouchBackend",
     "input": "./dist/esm/index.js",

packages/dnd-core/package.json

@@ -29,8 +29,5 @@
     "@react-dnd/build": "workspace:packages/build",
     "gulp": "^4.0.2",
     "react-dnd-test-backend": "portal:../backend-test"
-  },
-  "peerDependencies": {
-    "react-refresh": "*"
   }
 }

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

@@ -10,18 +10,18 @@ import {
 	BadResultTarget,
 	TransformResultTarget,
 } from './targets'
-import { DragDropManagerImpl } from '../DragDropManagerImpl'
 import { DragDropManager, HandlerRegistry } from '../interfaces'
 import { isString } from '../utils/js_utils'
+import { createDragDropManager } from '../createDragDropManager'
 
 describe('DragDropManager', () => {
 	let manager: DragDropManager
 	let backend: ITestBackend
 	let registry: HandlerRegistry
 
 	beforeEach(() => {
-		manager = new DragDropManagerImpl()
-		backend = TestBackend(manager, null, null) as ITestBackend
+		manager = createDragDropManager(TestBackend)
+		backend = manager.getBackend() as ITestBackend
 		;(manager as any).receiveBackend(backend)
 		registry = manager.getRegistry()
 	})

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

@@ -11,7 +11,7 @@ import {
 	HandlerRegistry,
 	DragDropMonitor,
 } from '../interfaces'
-import { DragDropManagerImpl } from '../DragDropManagerImpl'
+import { createDragDropManager } from '../createDragDropManager'
 
 describe.only('DragDropMonitor', () => {
 	let manager: DragDropManager
@@ -20,8 +20,8 @@ describe.only('DragDropMonitor', () => {
 	let monitor: DragDropMonitor
 
 	beforeEach(() => {
-		manager = new DragDropManagerImpl()
-		backend = TestBackend(manager, null, null) as ITestBackend
+		manager = createDragDropManager(TestBackend)
+		backend = manager.getBackend() as ITestBackend
 		;(manager as any).receiveBackend(backend)
 		registry = manager.getRegistry()
 		monitor = manager.getMonitor()

packages/dnd-core/src/DragDropManagerImpl.ts → packages/dnd-core/src/classes/DragDropManagerImpl.ts

@@ -1,48 +1,25 @@
-import { createStore, Store, Action } from 'redux'
-import { reduce } from './reducers'
-import { createDragDropActions } from './actions/dragDrop'
+import { Store, Action } from 'redux'
+import { createDragDropActions } from '../actions/dragDrop'
 import { DragDropMonitorImpl } from './DragDropMonitorImpl'
-import { HandlerRegistryImpl } from './HandlerRegistryImpl'
 import {
 	ActionCreator,
 	Backend,
 	DragDropActions,
 	DragDropMonitor,
 	DragDropManager,
 	HandlerRegistry,
-} from './interfaces'
-import { State } from './reducers'
-
-function makeStoreInstance(debugMode: boolean): Store<State> {
-	// TODO: if we ever make a react-native version of this,
-	// we'll need to consider how to pull off dev-tooling
-	const reduxDevTools =
-		typeof window !== 'undefined' &&
-		(window as any).__REDUX_DEVTOOLS_EXTENSION__
-	return createStore(
-		reduce,
-		debugMode &&
-			reduxDevTools &&
-			reduxDevTools({
-				name: 'dnd-core',
-				instanceId: 'dnd-core',
-			}),
-	)
-}
+} from '../interfaces'
+import { State } from '../reducers'
 
 export class DragDropManagerImpl implements DragDropManager {
 	private store: Store<State>
 	private monitor: DragDropMonitor
 	private backend: Backend | undefined
 	private isSetUp = false
 
-	public constructor(debugMode = false) {
-		const store = makeStoreInstance(debugMode)
+	public constructor(store: Store<State>, monitor: DragDropMonitor) {
 		this.store = store
-		this.monitor = new DragDropMonitorImpl(
-			store,
-			new HandlerRegistryImpl(store),
-		)
+		this.monitor = monitor
 		store.subscribe(this.handleRefCountChange)
 	}
 

packages/dnd-core/src/DragDropMonitorImpl.ts → packages/dnd-core/src/classes/DragDropMonitorImpl.ts

@@ -1,20 +1,20 @@
 import { Store } from 'redux'
 import { invariant } from '@react-dnd/invariant'
-import { matchesType } from './utils/matchesType'
+import { matchesType } from '../utils/matchesType'
 import {
 	getSourceClientOffset,
 	getDifferenceFromInitialOffset,
-} from './utils/coords'
-import { areDirty } from './utils/dirtiness'
-import { State } from './reducers'
+} from '../utils/coords'
+import { areDirty } from '../utils/dirtiness'
+import { State } from '../reducers'
 import {
 	DragDropMonitor,
 	Listener,
 	Unsubscribe,
 	XYCoord,
 	HandlerRegistry,
 	Identifier,
-} from './interfaces'
+} from '../interfaces'
 
 export class DragDropMonitorImpl implements DragDropMonitor {
 	private store: Store<State>

packages/dnd-core/src/HandlerRegistryImpl.ts → packages/dnd-core/src/classes/HandlerRegistryImpl.ts

@@ -5,9 +5,9 @@ import {
 	addTarget,
 	removeSource,
 	removeTarget,
-} from './actions/registry'
-import { getNextUniqueId } from './utils/getNextUniqueId'
-import { State } from './reducers'
+} from '../actions/registry'
+import { getNextUniqueId } from '../utils/getNextUniqueId'
+import { State } from '../reducers'
 import {
 	DragSource,
 	DropTarget,
@@ -16,12 +16,12 @@ import {
 	Identifier,
 	HandlerRole,
 	HandlerRegistry,
-} from './interfaces'
+} from '../interfaces'
 import {
 	validateSourceContract,
 	validateTargetContract,
 	validateType,
-} from './contracts'
+} from '../contracts'
 import { asap } from '@react-dnd/asap'
 
 function getNextHandlerId(role: HandlerRole): string {

packages/dnd-core/src/createDragDropManager.ts

@@ -0,0 +1,37 @@
+import { DragDropManagerImpl } from './classes/DragDropManagerImpl'
+import { DragDropManager, BackendFactory } from './interfaces'
+import { createStore, Store } from 'redux'
+import { reduce, State } from './reducers'
+import { DragDropMonitorImpl } from './classes/DragDropMonitorImpl'
+import { HandlerRegistryImpl } from './classes/HandlerRegistryImpl'
+
+export function createDragDropManager(
+	backendFactory: BackendFactory,
+	globalContext: unknown = undefined,
+	backendOptions: unknown = {},
+	debugMode = false,
+): DragDropManager {
+	const store = makeStoreInstance(debugMode)
+	const monitor = new DragDropMonitorImpl(store, new HandlerRegistryImpl(store))
+	const manager = new DragDropManagerImpl(store, monitor)
+	const backend = backendFactory(manager, globalContext, backendOptions)
+	manager.receiveBackend(backend)
+	return manager
+}
+
+function makeStoreInstance(debugMode: boolean): Store<State> {
+	// TODO: if we ever make a react-native version of this,
+	// we'll need to consider how to pull off dev-tooling
+	const reduxDevTools =
+		typeof window !== 'undefined' &&
+		(window as any).__REDUX_DEVTOOLS_EXTENSION__
+	return createStore(
+		reduce,
+		debugMode &&
+			reduxDevTools &&
+			reduxDevTools({
+				name: 'dnd-core',
+				instanceId: 'dnd-core',
+			}),
+	)
+}

packages/dnd-core/src/index.ts

@@ -1,2 +1,2 @@
 export * from './interfaces'
-export * from './factories'
+export * from './createDragDropManager'

packages/examples-decorators/package.json

@@ -40,25 +40,20 @@
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.28",
     "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
     "@types/testing-library__jest-dom": "^5.9.5",
     "gulp": "^4.0.2",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.1",
     "react-dnd-test-backend": "workspace:packages/backend-test",
     "react-dnd-test-utils": "workspace:packages/test-utils",
-    "react-dom": "^17.0.1",
     "typescript": "^4.1.5"
   },
   "peerDependencies": {
     "@types/node": ">= 12",
     "@types/react": ">= 16",
-    "@types/react-dom": ">= 16",
     "prop-types": ">= 15",
     "react": ">= 16.14",
-    "react-dnd": ">11.1.3",
-    "react-dom": ">= 16.14",
-    "react-refresh": "*"
+    "react-dnd": ">11.1.3"
   },
   "peerDependenciesMeta": {
     "@types/node": {
@@ -67,9 +62,6 @@
     "@types/react": {
       "optional": true
     },
-    "@types/react-dom": {
-      "optional": true
-    },
     "react-dnd": {
       "optional": false
     }

packages/examples-decorators/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "emitDeclarationOnly": false,
     "outDir": "./lib/",
-    "baseUrl": "./",
-    "allowSyntheticDefaultImports": true
+    "baseUrl": "./"
   },
   "include": ["./src/index.ts"]
 }

packages/examples-hooks/package.json

@@ -39,23 +39,18 @@
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.28",
     "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
     "gulp": "^4.0.2",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.1",
     "react-dnd-test-utils": "workspace:packages/test-utils",
-    "react-dom": "^17.0.1",
     "typescript": "^4.1.5"
   },
   "peerDependencies": {
     "@types/node": ">= 12",
     "@types/react": ">= 16",
-    "@types/react-dom": ">= 16",
     "prop-types": ">= 15",
     "react": ">= 16.14",
-    "react-dnd": ">11.1.3",
-    "react-dom": ">= 16.14",
-    "react-refresh": "*"
+    "react-dnd": ">11.1.3"
   },
   "peerDependenciesMeta": {
     "@types/node": {
@@ -64,9 +59,6 @@
     "@types/react": {
       "optional": true
     },
-    "@types/react-dom": {
-      "optional": true
-    },
     "react-dnd": {
       "optional": false
     }

packages/examples-hooks/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
     "emitDeclarationOnly": false,
     "outDir": "./lib",
     "baseUrl": "./",