Backend Factory

/**
 * Factory function that creates HTML5Backend instances
 * @param manager - React DnD's drag drop manager
 * @param context - Optional window context (defaults to global window)
 * @param options - Configuration options for the backend
 * @returns HTML5BackendImpl instance
 */
const HTML5Backend: BackendFactory = function createBackend(
  manager: DragDropManager,
  context?: HTML5BackendContext,
  options?: HTML5BackendOptions,
): HTML5BackendImpl;

type HTML5BackendContext = Window | undefined;

interface HTML5BackendOptions {
  /** The root DOM node to use for subscribing to events. Default=Window */
  rootElement: Node;
}

interface HTML5BackendImpl extends Backend {
  /** Generate profiling statistics for the HTML5Backend */
  profile(): Record<string, number>;
  /** Setup the backend and initialize event listeners */
  setup(): void;
  /** Clean up the backend and remove event listeners */
  teardown(): void;
  /** Connect a drag source element */
  connectDragSource(sourceId: string, node: Element, options: any): Unsubscribe;
  /** Connect a drag preview element */
  connectDragPreview(sourceId: string, node: Element, options: any): Unsubscribe;
  /** Connect a drop target element */
  connectDropTarget(targetId: string, node: HTMLElement): Unsubscribe;
  /** Access to the window object used by the backend */
  readonly window: Window | undefined;
  /** Access to the document object used by the backend */
  readonly document: Document | undefined;
}

type BackendFactory = (
  manager: DragDropManager,
  context?: any,
  options?: any
) => Backend;

type Unsubscribe = () => void;

import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

// Basic usage with default settings
function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <YourDragDropComponents />
    </DndProvider>
  );
}

// With custom root element
const options = {
  rootElement: document.getElementById("custom-drag-area")
};

function AppWithCustomRoot() {
  return (
    <DndProvider backend={HTML5Backend} options={options}>
      <YourDragDropComponents />
    </DndProvider>
  );
}

// Access backend instance for profiling
import { useDragDropManager } from "react-dnd";

function ProfileComponent() {
  const manager = useDragDropManager();
  const backend = manager.getBackend();
  
  const stats = backend.profile();
  console.log("Backend stats:", stats);
  
  return <div>See console for backend statistics</div>;
}

interface HTML5BackendOptions {
  /**
   * The root DOM node to use for subscribing to events
   * Defaults to the global window object
   * Useful for constraining drag/drop to specific container elements
   */
  rootElement: Node;
}

/**
 * HTML5Backend context - the window object to use for operations
 * Defaults to the global window if not specified
 * Useful for testing or iframe scenarios
 */
type HTML5BackendContext = Window | undefined;