refactor(utils): remove react dependencies

packages/core/src/components/Handle/handler.ts

@@ -59,7 +59,7 @@ export function handlePointerDown({
   let autoPanId = 0;
   let prevClosestHandle: ConnectionHandle | null;
 
-  const { x, y } = getEventPosition(event);
+  const { x, y } = getEventPosition(event.nativeEvent);
   const clickedHandle = doc?.elementFromPoint(x, y);
   const handleType = getHandleType(edgeUpdaterType, clickedHandle);
   const containerBounds = domNode?.getBoundingClientRect();
@@ -69,7 +69,7 @@ export function handlePointerDown({
   }
 
   let prevActiveHandle: Element;
-  let connectionPosition = getEventPosition(event, containerBounds);
+  let connectionPosition = getEventPosition(event.nativeEvent, containerBounds);
   let autoPanStarted = false;
   let connection: Connection | null = null;
   let isValid = false;

packages/core/src/components/Handle/index.tsx

@@ -69,9 +69,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     };
 
     const onPointerDown = (event: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {
-      const isMouseTriggered = isMouseEvent(event);
+      const isMouseTriggered = isMouseEvent(event.nativeEvent);
 
-      if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
+      if ((isMouseTriggered && (event as ReactMouseEvent<HTMLDivElement>).button === 0) || !isMouseTriggered) {
         handlePointerDown({
           event,
           handleId,
@@ -85,9 +85,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       }
 
       if (isMouseTriggered) {
-        onMouseDown?.(event);
+        onMouseDown?.(event as ReactMouseEvent<HTMLDivElement>);
       } else {
-        onTouchStart?.(event);
+        onTouchStart?.(event as ReactTouchEvent<HTMLDivElement>);
       }
     };
 
@@ -101,7 +101,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
 
       const doc = getHostForElement(event.target as HTMLElement);
       const { connection, isValid } = isValidHandle(
-        event,
+        event.nativeEvent,
         {
           nodeId,
           id: handleId,

packages/core/src/components/Handle/utils.ts

@@ -73,7 +73,7 @@ const nullConnection: Connection = { source: null, target: null, sourceHandle: n
 
 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
 export function isValidHandle(
-  event: MouseEvent | TouchEvent | ReactMouseEvent | ReactTouchEvent,
+  event: MouseEvent | TouchEvent,
   handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'> | null,
   connectionMode: ConnectionMode,
   fromNodeId: string,

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -21,7 +21,6 @@
   const handleId = id || null;
   const dispatch = createEventDispatcher();
 
-
   const {
     connectionMode,
     domNode,
@@ -34,13 +33,13 @@
     updateConnection
   } = useStore();
 
-  function dispatchEvent(eventName: string) {
-    dispatch(eventName, { nodeId, handleId, type });
+  function dispatchEvent(eventName: string, params?: Connection) {
+    dispatch(eventName, params || { nodeId, handleId, type });
   }
 
   function onConnectExtended(params: Connection) {
     addEdge(params);
-    dispatchEvent('connect')
+    dispatchEvent('connect', params)
   }
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -66,12 +65,6 @@
         onConnectEnd: () => dispatchEvent('connect:end')
       });
     }
-
-    // if (isMouseTriggered) {
-    //   onMouseDown?.(event);
-    // } else {
-    //   onTouchStart?.(event);
-    // }
   }
 </script>
 

packages/system/package.json

@@ -3,14 +3,12 @@
   "version": "11.5.5",
   "description": "Core system of React Flow.",
   "keywords": [
-    "react",
-    "svelte",
     "node-based UI",
     "graph",
     "diagram",
     "workflow",
-    "react-flow",
-    "svelte-flow"
+    "reactflow",
+    "svelteflow"
   ],
   "files": [
     "dist"

packages/utils/package.json

@@ -3,12 +3,12 @@
   "version": "11.5.5",
   "description": "Core utils of React Flow.",
   "keywords": [
-    "react",
     "node-based UI",
     "graph",
     "diagram",
     "workflow",
-    "react-flow"
+    "reactflow",
+    "svelteflow"
   ],
   "files": [
     "dist"
@@ -43,18 +43,11 @@
     "@types/d3-zoom": "^3.0.1",
     "d3-zoom": "^3.0.0"
   },
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
-  },
   "devDependencies": {
     "@reactflow/eslint-config": "workspace:*",
     "@reactflow/rollup-config": "workspace:*",
     "@reactflow/tsconfig": "workspace:*",
     "@types/node": "^18.7.16",
-    "@types/react": ">=17",
-    "@types/react-dom": ">=17",
-    "react": "^18.2.0",
     "typescript": "^4.9.4"
   },
   "rollup": {

packages/utils/src/utils.ts

@@ -1,8 +1,3 @@
-import type {
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-} from 'react';
 import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect, BaseNode, BaseEdge } from '@reactflow/system';
 import { getConnectedEdgesBase } from './graph';
 
@@ -93,13 +88,9 @@ export const devWarn = (id: string, message: string) => {
   }
 };
 
-const isReactKeyboardEvent = (event: KeyboardEvent | ReactKeyboardEvent): event is ReactKeyboardEvent =>
-  'nativeEvent' in event;
-
-export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boolean {
-  const kbEvent = isReactKeyboardEvent(event) ? event.nativeEvent : event;
+export function isInputDOMNode(event: KeyboardEvent): boolean {
   // using composed path for handling shadow dom
-  const target = (kbEvent.composedPath?.()?.[0] || event.target) as HTMLElement;
+  const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement;
 
   const isInput = ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable');
   // we want to be able to do a multi selection event if we are in an input field
@@ -109,14 +100,9 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole
   return (isInput && !isModifierKey) || !!target?.closest('.nokey');
 }
 
-export const isMouseEvent = (
-  event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent
-): event is MouseEvent | ReactMouseEvent => 'clientX' in event;
+export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event;
 
-export const getEventPosition = (
-  event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent,
-  bounds?: DOMRect
-) => {
+export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRect) => {
   const isMouseTriggered = isMouseEvent(event);
   const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX;
   const evtY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY;