fix(handle-on-connect): use correct HandleConnection type #5447

packages/react/src/hooks/useNodeConnections.ts

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useRef } from 'react';
 import {
-  Connection,
-  NodeConnection,
-  HandleType,
   areConnectionMapsEqual,
-  handleConnectionChange,
   errorMessages,
+  handleConnectionChange,
+  type NodeConnection,
+  type HandleType,
+  type HandleConnection,
 } from '@xyflow/system';
 
 import { useStore } from './useStore';
@@ -21,9 +21,9 @@ type UseNodeConnectionsParams = {
   /** Filter by handle id (this is only needed if the node has multiple handles of the same type). */
   handleId?: string;
   /** Gets called when a connection is established. */
-  onConnect?: (connections: Connection[]) => void;
+  onConnect?: (connections: HandleConnection[]) => void;
   /** Gets called when a connection is removed. */
-  onDisconnect?: (connections: Connection[]) => void;
+  onDisconnect?: (connections: HandleConnection[]) => void;
 };
 
 /**

packages/react/src/index.ts

@@ -112,6 +112,7 @@ export {
   type SetCenter,
   type SetViewport,
   type FitBounds,
+  type HandleConnection,
 } from '@xyflow/system';
 
 // we need this workaround to prevent a duplicate identifier error

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

@@ -1,10 +1,10 @@
-import type { Connection, HandleProps as HandlePropsSystem } from '@xyflow/system';
+import type { HandleConnection, HandleProps as HandlePropsSystem } from '@xyflow/system';
 import type { Snippet } from 'svelte';
 import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 
 export type HandleProps = HandlePropsSystem & {
   class?: ClassValue;
-  onconnect?: (connections: Connection[]) => void;
+  onconnect?: (connections: HandleConnection[]) => void;
-  ondisconnect?: (connections: Connection[]) => void;
+  ondisconnect?: (connections: HandleConnection[]) => void;
   children?: Snippet;
 } & HTMLAttributes<HTMLDivElement>;

packages/svelte/src/lib/hooks/useNodeConnections.svelte.ts

@@ -1,9 +1,9 @@
 import {
   areConnectionMapsEqual,
+  handleConnectionChange,
   type NodeConnection,
   type HandleType,
-  type Connection,
+  type HandleConnection
-  handleConnectionChange
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -13,8 +13,8 @@ type UseNodeConnectionsParams = {
   id?: string;
   handleType?: HandleType;
   handleId?: string;
-  onConnect?: (connections: Connection[]) => void;
+  onConnect?: (connections: HandleConnection[]) => void;
-  onDisconnect?: (connections: Connection[]) => void;
+  onDisconnect?: (connections: HandleConnection[]) => void;
 };
 
 type ConnectionMap = Map<string, NodeConnection>;

packages/svelte/src/lib/index.ts

@@ -54,7 +54,7 @@ export type {
   StraightEdgeProps,
   EdgeTypes,
   DefaultEdgeOptions,
-  BuiltInEdge,
+  BuiltInEdge
 } from '$lib/types/edges';
 export type * from '$lib/types/general';
 export type { Node, NodeTypes, BuiltInNode, NodeProps, InternalNode } from '$lib/types/nodes';
@@ -120,7 +120,8 @@ export {
   type AriaLabelConfig,
   type SetCenter,
   type SetViewport,
-  type FitBounds
+  type FitBounds,
+  type HandleConnection
 } from '@xyflow/system';
 
 // system utils

packages/system/src/xyhandle/XYHandle.ts

@@ -209,6 +209,7 @@ function onPointerDown(
   function onPointerUp(event: MouseEvent | TouchEvent) {
     if (connectionStarted) {
       if ((closestHandle || resultHandleDomNode) && connection && isValid) {
+        console.log(connection);
         onConnect?.(connection);
       }