deploy: 5bd6963

.gitattributes

@@ -0,0 +1 @@
+package-lock.json -diff

.gitignore

@@ -0,0 +1,16 @@
+# OS files
+.DS_Store
+
+# npm
+node_modules
+*-debug.log
+
+# Code coverage
+/coverage
+
+# Output
+packages/*/dist
+webpack-stats.json
+
+# IDE
+.vscode

.jest-setup.ts

@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom'
+import React from 'react'
+global.React = React

.npmignore

@@ -0,0 +1,22 @@
+# OS files
+.DS_Store
+
+# esbuild
+/esbuild
+
+# Output
+/examples
+
+# npm
+node_modules
+npm-debug.log
+
+# Config
+biome.json
+.jest.config.js
+.github
+lerna.json
+tsconfig.*json
+
+# Code coverage
+coverage

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016-2022 Louis Brunner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,33 @@
+# DnD Multi Backend [![NPM Version][npm-image]][npm-url] ![Build Status][ci-image] [![Coverage Status][coveralls-image]][coveralls-url]
+
+This project is a Drag'n'Drop backend compatible with [DnD Core](https://github.com/react-dnd/react-dnd).
+
+It enables your application to use different DnD backends depending on the situation. Different packages are available depending on your front-end framework:
+
+  - React: [`react-dnd-multi-backend`](packages/react-dnd-multi-backend)
+  - Angular: [`angular-skyhook`](https://github.com/cormacrelf/angular-skyhook) (see [documentation](https://cormacrelf.github.io/angular-skyhook/angular-skyhook-multi-backend/) for more information)
+  - Any: [`dnd-multi-backend`](packages/dnd-multi-backend)
+
+This project also contains some helpers (available standalone or included in other packages):
+
+ - React DnD Preview: [`react-dnd-preview`](packages/react-dnd-preview) (included in `react-dnd-multi-backend`)
+
+[Try them here!](https://louisbrunner.github.io/dnd-multi-backend/examples)
+
+
+## Thanks
+
+Thanks to the [React DnD HTML5 Backend](https://github.com/react-dnd/react-dnd) maintainers which obviously greatly inspired this project.
+
+
+## License
+
+MIT, Copyright (c) 2016-2022 Louis Brunner
+
+
+
+[npm-image]: https://img.shields.io/npm/v/dnd-multi-backend.svg
+[npm-url]: https://npmjs.org/package/dnd-multi-backend
+[ci-image]: https://github.com/LouisBrunner/dnd-multi-backend/workflows/Build/badge.svg
+[coveralls-image]: https://coveralls.io/repos/github/LouisBrunner/dnd-multi-backend/badge.svg?branch=master
+[coveralls-url]: https://coveralls.io/github/LouisBrunner/dnd-multi-backend?branch=master

__mocks__/mocks.ts

@@ -0,0 +1,62 @@
+import type {MultiBackendSwitcher, PreviewList} from 'dnd-multi-backend'
+import type {DragLayerMonitor} from 'react-dnd'
+
+export const MockDragMonitor = <DragObject = unknown>(item: DragObject): jest.Mocked<DragLayerMonitor<DragObject>> => {
+  return {
+    isDragging: jest.fn(() => {
+      return false
+    }),
+    getItemType: jest.fn(() => {
+      return null
+    }),
+    // FIXME: why is it failing to get the type correct?
+    getItem: jest.fn(() => {
+      return item
+    }) as jest.MockInstance<DragObject, []> & (<T = DragObject>() => T),
+    getClientOffset: jest.fn(() => {
+      return null
+    }),
+    getInitialClientOffset: jest.fn(() => {
+      return null
+    }),
+    getInitialSourceClientOffset: jest.fn(() => {
+      return null
+    }),
+    getDifferenceFromInitialOffset: jest.fn(() => {
+      return null
+    }),
+    getSourceClientOffset: jest.fn(() => {
+      return null
+    }),
+  }
+}
+
+type OmitThisParameters<T> = {
+  [P in keyof T]: OmitThisParameter<T[P]>
+}
+
+export type MockedPreviewList = OmitThisParameters<jest.Mocked<PreviewList>>
+
+export const MockPreviewList = (): MockedPreviewList => {
+  return {
+    register: jest.fn(),
+    unregister: jest.fn(),
+    backendChanged: jest.fn(),
+  }
+}
+
+export type MockedMultiBackend = jest.Mocked<MultiBackendSwitcher>
+
+export const MockMultiBackend = (): MockedMultiBackend => {
+  return {
+    backendsList: jest.fn(),
+    previewsList: jest.fn(),
+    previewEnabled: jest.fn(),
+    setup: jest.fn(),
+    teardown: jest.fn(),
+    connectDragSource: jest.fn(),
+    connectDragPreview: jest.fn(),
+    connectDropTarget: jest.fn(),
+    profile: jest.fn(),
+  }
+}

__mocks__/pipeline.ts

@@ -0,0 +1,50 @@
+import type {Backend} from 'dnd-core'
+import {type MultiBackendOptions, createTransition} from 'dnd-multi-backend'
+
+const createBackend = () => {
+  return {
+    setup: jest.fn(),
+    teardown: jest.fn(),
+    connectDragSource: jest.fn(),
+    connectDragPreview: jest.fn(),
+    connectDropTarget: jest.fn(),
+    profile: jest.fn(),
+  }
+}
+
+export const TestBackends = [createBackend(), createBackend()]
+
+export const TestPipeline: MultiBackendOptions = {
+  backends: [
+    {
+      id: 'back1',
+      backend: jest.fn((): Backend => {
+        return TestBackends[0]
+      }),
+    },
+    {
+      id: 'back2',
+      backend: jest.fn((): Backend => {
+        return TestBackends[1]
+      }),
+      options: {abc: 123},
+      preview: true,
+      transition: createTransition(
+        'touchstart',
+        jest.fn((event) => {
+          return event.type === 'touchstart'
+        }),
+      ),
+    },
+  ],
+}
+
+export const TestPipelineWithSkip: MultiBackendOptions = {
+  backends: [
+    TestPipeline.backends[0],
+    {
+      ...TestPipeline.backends[1],
+      skipDispatchOnTransition: true,
+    },
+  ],
+}

__mocks__/react-dnd-preview.ts

@@ -0,0 +1,34 @@
+import {MockDragMonitor} from '@mocks/mocks'
+import type {PreviewProps, PreviewState, usePreviewState} from 'react-dnd-preview'
+
+import type {JSX} from 'react'
+
+const preview = jest.createMockFromModule<Record<string, unknown>>('react-dnd-preview')
+
+const state: PreviewState = {
+  ref: {current: null},
+  itemType: 'abc',
+  item: {},
+  style: {},
+  monitor: MockDragMonitor<unknown>(null),
+}
+
+const Preview = (props: PreviewProps): JSX.Element | null => {
+  if ('children' in props) {
+    return null
+  }
+  return props.generator(state)
+}
+
+export const usePreview = (): usePreviewState => {
+  return {
+    display: true,
+    ...state,
+  }
+}
+
+module.exports = {
+  ...preview,
+  Preview,
+  usePreview,
+}

__mocks__/react-dnd.ts

@@ -0,0 +1,17 @@
+import type {DragLayerMonitor} from 'react-dnd'
+
+const dnd = jest.requireActual<Record<string, unknown>>('react-dnd')
+
+let mockMonitor: DragLayerMonitor
+export const __setMockMonitor = (monitor: DragLayerMonitor): void => {
+  mockMonitor = monitor
+}
+
+export const useDragLayer = <CollectedProps>(collect: (monitor: DragLayerMonitor) => CollectedProps): CollectedProps => {
+  return collect(mockMonitor)
+}
+
+export const DndProvider = dnd.DndProvider
+export const useDrag = dnd.useDrag
+export const useDrop = dnd.useDrop
+export const DndContext = dnd.DndContext

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-typescript"]
+}

biome.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 200
+  },
+  "javascript": {
+    "formatter": {
+      "trailingCommas": "all",
+      "semicolons": "asNeeded",
+      "quoteStyle": "single",
+      "bracketSpacing": false
+    }
+  },
+  "files": {
+    "ignore": ["examples/*.js", "coverage", "packages/*/dist"]
+  }
+}

esbuild/build.js

@@ -0,0 +1,13 @@
+import esbuild from 'esbuild'
+import {nodeExternalsPlugin} from 'esbuild-node-externals'
+import tsConfig from '../tsconfig.json' with {type: 'json'}
+
+esbuild.build({
+  entryPoints: ['./src/index.ts'],
+  format: 'esm',
+  bundle: true,
+  outfile: 'dist/index.js',
+  minify: true,
+  plugins: [nodeExternalsPlugin()],
+  target: tsConfig.compilerOptions.target,
+})

esbuild/common.js

@@ -0,0 +1,30 @@
+// Note: this is not a technically a esbuild-related script.
+import {execSync, spawnSync} from 'node:child_process'
+
+export const getCommandOutput = (...args) => {
+  const stdout = execSync(args.join(' '), {
+    encoding: 'utf8',
+  })
+  return stdout.toString()
+}
+
+export const getWorkspaces = () => {
+  const workspacesJSON = getCommandOutput('npm', 'query', '.workspace')
+  const workspaces = JSON.parse(workspacesJSON)
+  return workspaces.toSorted((a, b) => {
+    if (Object.keys(a.dependencies ?? {}).includes(b.name)) {
+      return 1
+    }
+    if (Object.keys(b.dependencies ?? {}).includes(a.name)) {
+      return -1
+    }
+    return 0
+  })
+}
+
+export const executeCommand = (command, args, options) => {
+  spawnSync(command, args, {
+    stdio: 'inherit',
+    ...options,
+  })
+}

esbuild/config.js

@@ -0,0 +1,10 @@
+export const examples = {
+  entryPoints: {
+    'examples_dnd-multi-backend.min': './packages/dnd-multi-backend/examples/index.ts',
+    'examples_react-dnd-multi-backend.min': './packages/react-dnd-multi-backend/examples/index.tsx',
+    'examples_react-dnd-preview_main.min': './packages/react-dnd-preview/examples/main/index.tsx',
+    'examples_react-dnd-preview_offset.min': './packages/react-dnd-preview/examples/offset/index.tsx',
+  },
+  bundle: true,
+  minify: true,
+}

esbuild/dev.js

@@ -0,0 +1,15 @@
+import esbuild from 'esbuild'
+import {examples} from './config.js'
+
+const baseDir = 'examples/'
+
+const context = await esbuild.context({
+  ...examples,
+  outdir: baseDir,
+})
+
+const server = await context.serve({
+  servedir: baseDir,
+  port: 4001,
+})
+console.log(`Server available at http://${server.host}:${server.port}`)

esbuild/examples.js

@@ -0,0 +1,7 @@
+import esbuild from 'esbuild'
+import {examples} from './config.js'
+
+esbuild.build({
+  ...examples,
+  outdir: 'examples/',
+})