Switch to ESM-Only; add React 18 Support (#3420)

* chore: move to esm-only publication

* chore: some pkg updates

* chore: semver

* chore: rewire tsconfigs; use workspace:^ links

* build: add import ordering eslint rule

* fix: lodash import

* build: remove alex

* build: update gatsby

* fix: get tests running

* fix: get esm-check working

* build: update linter targets

.eslintrc

@@ -1,6 +1,12 @@
 {
 	"parser": "@typescript-eslint/parser",
-	"plugins": ["@typescript-eslint", "react-hooks", "no-for-of-loops"],
+	"plugins": [
+		"@typescript-eslint",
+		"react-hooks",
+		"no-for-of-loops",
+		"import",
+		"simple-import-sort"
+	],
 	"extends": [
 		"eslint:recommended",
 		"plugin:react/recommended",
@@ -19,12 +25,47 @@
 		"node": true
 	},
 	"rules": {
+		"import/first": "error",
+		"import/no-amd": "error",
+		"import/no-anonymous-default-export": "warn",
+		"import/no-webpack-loader-syntax": "error",
+		"import/extensions": ["error", "always", { "ignorePackages": true }],
+		// use simple-import-sort
+		"import/order": "off",
+
+		// https://github.com/lydell/eslint-plugin-simple-import-sort#usage
+		"simple-import-sort/imports": "error",
+		"simple-import-sort/exports": "error",
+
+		"@typescript-eslint/consistent-type-imports": [
+			"error",
+			{
+				"prefer": "type-imports"
+			}
+		],
+
 		"no-for-of-loops/no-for-of-loops": 2,
 		"react/prop-types": 0,
 		"react/react-in-jsx-scope": 0,
 
 		// TODO: re-enable
 		"@typescript-eslint/no-explicit-any": 0,
 		"@typescript-eslint/explicit-module-boundary-types": 0
-	}
+	},
+	"overrides": [
+		{
+			"files": "packages/test-suite-*/**/*",
+			"rules": {
+				"import/extensions": ["error", "never"],
+				"@typescript-eslint/consistent-type-imports": "off"
+			}
+		},
+		{
+			"files": "packages/docsite/**/*",
+			"rules": {
+				"import/extensions": ["error", "never"],
+				"@typescript-eslint/consistent-type-imports": "off"
+			}
+		}
+	]
 }

.yarn/versions/122d1557.yml

@@ -0,0 +1,16 @@
+releases:
+  "@react-dnd/asap": major
+  "@react-dnd/invariant": major
+  "@react-dnd/shallowequal": major
+  dnd-core: major
+  react-dnd: major
+  react-dnd-examples: major
+  react-dnd-html5-backend: major
+  react-dnd-test-backend: major
+  react-dnd-test-utils: major
+  react-dnd-touch-backend: major
+
+declined:
+  - react-dnd-documentation
+  - test-suite-cra
+  - test-suite-vite

jest.config.js

@@ -1,13 +1,14 @@
 module.exports = {
 	rootDir: __dirname,
 	testEnvironment: 'jsdom',
+	extensionsToTreatAsEsm: ['.ts', '.tsx'],
 	transform: {
 		'^.+\\.(t|j)sx?$': [
 			require.resolve('@swc/jest'),
 			{
 				sourceMaps: true,
 				jsc: {
-					target: 'es2017',
+					target: 'es2019',
 					parser: {
 						syntax: 'typescript',
 						tsx: true,

module_test/mjs-imports.mjs

@@ -2,9 +2,10 @@
 import * as core from 'dnd-core'
 import * as dnd from 'react-dnd'
 import * as htmlBackend from 'react-dnd-html5-backend'
-import * as touchBackend from 'react-dnd-touch-backend'
 import * as testBackend from 'react-dnd-test-backend'
 import * as testUtils from 'react-dnd-test-utils'
+import * as touchBackend from 'react-dnd-touch-backend'
+
 import { check } from './common.js'
 
 check(core, 'core')

package.json

@@ -40,18 +40,15 @@
     "clean:": "yarn workspaces foreach --exclude @react-dnd/build -pv run clean",
     "build:": "yarn workspaces foreach -pv --topological-dev run build",
     "test:": "yarn workspaces foreach -pv run test",
-    "modules:cjs": "node ./module_test/cjs-imports.cjs",
-    "modules:mjs": "node ./module_test/mjs-imports.mjs",
-    "modules:": "run-s 'modules:*'",
-    "release:": "yarn workspaces foreach -pv --exclude 'react-dnd-parent' --exclude '@react-dnd/build' --exclude 'react-dnd-documentation' --exclude 'react-dnd-examples' -pv npm publish --tolerate-republish",
+    "modules:": "node ./module_test/mjs-imports.mjs",
+    "release:": "yarn workspaces foreach -pv --exclude 'react-dnd-parent' --exclude '@react-dnd/build' --exclude 'react-dnd-documentation' --exclude 'react-dnd-examples' --exclude 'test-suite-*' -pv npm publish --tolerate-republish --access public",
     "lint:": "run-s 'lint:*'",
-    "jest:": "yarn node --experimental-vm-modules $(yarn bin jest) --coverage",
-    "lint:code": "eslint . --ext .js,.ts,.jsx,.tsx",
+    "jest:": "NODE_OPTIONS=--experimental-vm-modules yarn node $(yarn bin jest) --coverage",
+    "lint:code": "eslint . --ext .js,.jsx,.mjs,.cjs,.ts,.tsx,.cts,.mts --fix",
     "lint:spelling": "mdspell 'packages/documentation/docsite/markdown/**/*.md' --en-us --report",
-    "lint:tone": "alex .",
     "lint:formatting": "prettier --check \"**/*.(ts|tsx|js|json|md|cjs|mjs|cts|mts)\"",
     "build_docsite": "yarn build:docsite",
-    "format:": "prettier --write \"**/*.(ts|tsx|js|json|cjs|mjs|cts|mts)\"",
+    "format:": "prettier --write \"**/*.(js|jsx|cjs|mjs|ts|tsx|cts|mts|json)\"",
     "changelog": "conventional-changelog -p eslint -i CHANGELOG.md -s -r 0",
     "ci": "run-s build: test: lint: jest: modules: build_docsite git-is-clean",
     "precommit": "lint-staged",
@@ -61,48 +58,47 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@commitlint/cli": "^13.2.1",
-    "@commitlint/config-conventional": "^13.2.0",
-    "@swc/core": "^1.2.161",
+    "@commitlint/cli": "^16.2.3",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@swc/core": "^1.2.163",
     "@swc/jest": "^0.2.20",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.0",
     "@tsconfig/strictest": "^1.0.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/testing-library__jest-dom": "^5.14.3",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
-    "alex": "^9.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "conventional-changelog-cli": "^2.1.1",
-    "dnd-core": "workspace:packages/dnd-core",
+    "dnd-core": "workspace:^",
     "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-no-for-of-loops": "^1.0.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "husky": "^7.0.4",
     "inquirer": "^7.3.3",
     "jest": "~27.5.1",
-    "lint-staged": "^11.2.6",
+    "lint-staged": "^12.3.7",
     "markdown-spellcheck": "^1.3.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.1",
-    "react-dnd": "workspace:packages/react-dnd",
-    "react-dnd-examples": "workspace:packages/examples",
-    "react-dnd-html5-backend": "workspace:packages/backend-html5",
-    "react-dnd-test-backend": "workspace:packages/backend-test",
-    "react-dnd-test-utils": "workspace:packages/test-utils",
-    "react-dnd-touch-backend": "workspace:packages/backend-touch",
+    "prettier": "^2.6.2",
+    "react-dnd": "workspace:^",
+    "react-dnd-examples": "workspace:^",
+    "react-dnd-html5-backend": "workspace:^",
+    "react-dnd-test-backend": "workspace:^",
+    "react-dnd-test-utils": "workspace:^",
+    "react-dnd-touch-backend": "workspace:^",
     "typescript": "^4.6.3"
   },
-  "resolutions": {
-    "@types/react": "17.0.17",
-    "@types/react-dom": "17.0.9"
-  },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.0",
+  "dependencies": {
+    "eslint-plugin-simple-import-sort": "^7.0.0"
+  }
 }

packages/backend-html5/package.json

@@ -2,13 +2,9 @@
   "name": "react-dnd-html5-backend",
   "version": "15.1.3",
   "description": "HTML5 backend for React DnD",
-  "main": "dist/cjs/index.js",
-  "types": "dist/types/index.d.ts",
-  "exports": {
-    "import": "./dist/esm/index.mjs",
-    "require": "./dist/cjs/index.js",
-    "types": "./dist/types/index.d.ts"
-  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "repository": {
@@ -18,17 +14,15 @@
   "scripts": {
     "clean": "shx rm -rf dist/",
     "build_types": "tsc -b .",
-    "build_esm": "swc -C module.type=es6 -d dist/esm src/",
-    "build_cjs": "swc -C module.type=commonjs -d dist/cjs src/",
-    "esm_hack": "node ../../scripts/esmify.mjs",
-    "build": "run-s build_types build_esm build_cjs esm_hack"
+    "build_esm": "swc -C module.type=es6 -d dist src/",
+    "build": "run-s build_types build_esm"
   },
   "dependencies": {
-    "dnd-core": "workspace:packages/dnd-core"
+    "dnd-core": "workspace:^"
   },
   "devDependencies": {
     "@swc/cli": "^0.1.57",
-    "@swc/core": "^1.2.161",
+    "@swc/core": "^1.2.163",
     "@types/jest": "^27.4.1",
     "npm-run-all": "^4.1.5",
     "shx": "^0.3.4",

packages/backend-html5/src/HTML5BackendImpl.ts

@@ -1,25 +1,26 @@
 import type {
 	Backend,
-	DragDropManager,
 	DragDropActions,
+	DragDropManager,
 	DragDropMonitor,
 	HandlerRegistry,
 	Identifier,
-	XYCoord,
 	Unsubscribe,
+	XYCoord,
 } from 'dnd-core'
+
 import { EnterLeaveCounter } from './EnterLeaveCounter.js'
-import {
-	getNodeClientOffset,
-	getEventClientOffset,
-	getDragPreviewOffset,
-} from './OffsetUtils.js'
 import {
 	createNativeDragSource,
 	matchNativeItemType,
 } from './NativeDragSources/index.js'
-import * as NativeTypes from './NativeTypes.js'
 import type { NativeDragSource } from './NativeDragSources/NativeDragSource.js'
+import * as NativeTypes from './NativeTypes.js'
+import {
+	getDragPreviewOffset,
+	getEventClientOffset,
+	getNodeClientOffset,
+} from './OffsetUtils.js'
 import { OptionsReader } from './OptionsReader.js'
 import type { HTML5BackendContext, HTML5BackendOptions } from './types.js'
 

packages/backend-html5/src/NativeDragSources/NativeDragSource.ts

@@ -1,6 +1,7 @@
-import type { NativeItemConfig } from './nativeTypesConfig.js'
 import type { DragDropMonitor } from 'dnd-core'
 
+import type { NativeItemConfig } from './nativeTypesConfig.js'
+
 export class NativeDragSource {
 	public item: any
 	private config: NativeItemConfig

packages/backend-html5/src/NativeDragSources/index.ts

@@ -1,5 +1,5 @@
-import { nativeTypesConfig } from './nativeTypesConfig.js'
 import { NativeDragSource } from './NativeDragSource.js'
+import { nativeTypesConfig } from './nativeTypesConfig.js'
 
 export function createNativeDragSource(
 	type: string,

packages/backend-html5/src/OffsetUtils.ts

@@ -1,7 +1,8 @@
-import { isSafari, isFirefox } from './BrowserDetector.js'
-import { MonotonicInterpolant } from './MonotonicInterpolant.js'
 import type { XYCoord } from 'dnd-core'
 
+import { isFirefox, isSafari } from './BrowserDetector.js'
+import { MonotonicInterpolant } from './MonotonicInterpolant.js'
+
 const ELEMENT_NODE = 1
 
 export function getNodeClientOffset(node: Node): XYCoord | null {

packages/backend-html5/src/__tests__/BrowserDetector.spec.ts

@@ -1,4 +1,4 @@
-import { isFirefox } from '../BrowserDetector'
+import { isFirefox } from '../BrowserDetector.js'
 
 describe('BrowserDetector', () => {
 	it('should detect firefox', () => {

packages/backend-html5/src/__tests__/EnterLeaveCounter.spec.ts

@@ -1,4 +1,4 @@
-import { EnterLeaveCounter } from '../EnterLeaveCounter'
+import { EnterLeaveCounter } from '../EnterLeaveCounter.js'
 
 describe('EnterLeaveCounter', () => {
 	const parentDiv = document.createElement('div')

packages/backend-html5/src/__tests__/HTML5Backend.spec.ts

@@ -1,9 +1,10 @@
-declare const global: any
-
-import type { HTML5BackendImpl } from '../HTML5BackendImpl'
-import { HTML5Backend } from '../index'
 import type { DragDropManager } from 'dnd-core'
 
+import type { HTML5BackendImpl } from '../HTML5BackendImpl.js'
+import { HTML5Backend } from '../index.js'
+
+declare const global: any
+
 describe('The HTML5 Backend', () => {
 	describe('window injection', () => {
 		it('uses an undefined window when no window is available', () => {

packages/backend-html5/src/__tests__/MonotonicInterpolant.spec.ts

@@ -1,4 +1,4 @@
-import { MonotonicInterpolant } from '../MonotonicInterpolant'
+import { MonotonicInterpolant } from '../MonotonicInterpolant.js'
 
 describe('The MonotonicInterpolant', () => {
 	it('can be constructed', () => {

packages/backend-html5/src/__tests__/OffsetUtils.spec.ts

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {
-	getNodeClientOffset,
-	getEventClientOffset,
 	getDragPreviewOffset,
-} from '../OffsetUtils'
+	getEventClientOffset,
+	getNodeClientOffset,
+} from '../OffsetUtils.js'
 
 describe('OffsetUtils', () => {
 	describe('getNodeClientOffset', () => {

packages/backend-html5/src/__tests__/getEmptyImage.spec.ts

@@ -1,4 +1,4 @@
-import { getEmptyImage } from '../getEmptyImage'
+import { getEmptyImage } from '../getEmptyImage.js'
 
 describe('Get Empty Image', () => {
 	it('should return image', () => {

packages/backend-html5/src/__tests__/index.spec.ts

@@ -1,6 +1,7 @@
-import { HTML5Backend } from '../index'
 import type { DragDropManager } from 'dnd-core'
 
+import { HTML5Backend } from '../index.js'
+
 describe('index', () => {
 	it('should return HTML5 backend', () => {
 		const mockManager: DragDropManager = {

packages/backend-html5/src/__tests__/matchesType.spec.ts

@@ -1,4 +1,4 @@
-import { matchesType } from '../matchesType'
+import { matchesType } from '../matchesType.js'
 
 describe('matchesType', () => {
 	it('should match type for single source and single target', () => {