refactor(types): only export HandleProps but not HandleComponentProps

examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx

@@ -1,7 +1,7 @@
 import { memo, FC, useEffect, useCallback } from 'react';
-import { Handle, Position, NodeProps, useHandleConnections, Connection, HandleComponentProps } from '@xyflow/react';
+import { Handle, Position, NodeProps, useHandleConnections, Connection, HandleProps } from '@xyflow/react';
 
-function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeId: string }) {
+function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string }) {
   const onConnect = useCallback(
     (connections: Connection[]) => console.log('onConnect handler, node id:', nodeId, connections),
     [nodeId]

examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx

@@ -1,7 +1,7 @@
 import { memo, FC, useEffect, useCallback } from 'react';
-import { Handle, Position, NodeProps, useHandleConnections, Connection, HandleComponentProps } from '@xyflow/react';
+import { Handle, Position, NodeProps, useHandleConnections, Connection, HandleProps } from '@xyflow/react';
 
-function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeId: string }) {
+function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string }) {
   const onConnect = useCallback(
     (connections: Connection[]) => {
       console.log('onConnect handler, node id:', nodeId, connections);

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

@@ -14,10 +14,11 @@ import {
   getHostForElement,
   isMouseEvent,
   addEdge,
-  type HandleProps,
+  type HandleProps as HandlePropsSystem,
   type Connection,
   type HandleType,
   ConnectionMode,
+  OnConnect,
 } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -25,7 +26,10 @@ import { useNodeId } from '../../contexts/NodeIdContext';
 import { type ReactFlowState } from '../../types';
 import { fixedForwardRef } from '../../utils';
 
-export interface HandleComponentProps extends HandleProps, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {}
+export interface HandleProps extends HandlePropsSystem, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+  /** Callback called when connection is made */
+  onConnect?: OnConnect;
+}
 
 const selector = (s: ReactFlowState) => ({
   connectOnClick: s.connectOnClick,
@@ -75,7 +79,7 @@ function HandleComponent(
     onMouseDown,
     onTouchStart,
     ...rest
-  }: HandleComponentProps,
+  }: HandleProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
   const handleId = id || null;

packages/react/src/index.ts

@@ -1,5 +1,5 @@
 export { default as ReactFlow } from './container/ReactFlow';
-export { Handle, type HandleComponentProps } from './components/Handle';
+export { Handle, type HandleProps } from './components/Handle';
 export { EdgeText } from './components/Edges/EdgeText';
 export { StraightEdge } from './components/Edges/StraightEdge';
 export { StepEdge } from './components/Edges/StepEdge';

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

@@ -13,9 +13,9 @@
   } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
-  import type { HandleComponentProps } from '$lib/types';
+  import type { HandleProps } from '$lib/types';
 
-  type $$Props = HandleComponentProps;
+  type $$Props = HandleProps;
 
   export let id: $$Props['id'] = undefined;
   export let type: $$Props['type'] = 'source';

packages/svelte/src/lib/index.ts

@@ -46,7 +46,7 @@ export type {
   EdgeTypes,
   DefaultEdgeOptions
 } from '$lib/types/edges';
-export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
+export type { HandleProps, FitViewOptions } from '$lib/types/general';
 export type {
   Node,
   NodeTypes,

packages/svelte/src/lib/types/general.ts

@@ -1,12 +1,11 @@
 import type { ShortcutModifierDefinition } from '@svelte-put/shortcut';
 import type {
   FitViewOptionsBase,
-  HandleType,
-  Position,
   XYPosition,
   ConnectingHandle,
   Connection,
-  OnBeforeDeleteBase
+  OnBeforeDeleteBase,
+  HandleProps as HandlePropsSystem
 } from '@xyflow/system';
 
 import type { Node } from './nodes';
@@ -23,32 +22,9 @@ export type ConnectionData = {
   connectionStatus: string | null;
 };
 
-export type HandleComponentProps = {
+export type HandleProps = HandlePropsSystem & {
-  /** Type of the handle
-   * @example HandleType.Source, HandleType.Target
-   */
-  type: HandleType;
-  /** Position of the handle
-   * @example Position.TopLeft, Position.TopRight,
-   * Position.BottomLeft, Position.BottomRight
-   */
-  position?: Position;
-  /** Id of the handle
-   * @remarks optional if there is only one handle of this type
-   */
-  id?: string;
   class?: string;
   style?: string;
-  /** Should you be able to connect from/to this handle */
-  isConnectable?: boolean;
-  /** Shoould you be able to connect from this handle */
-  isConnectableStart?: boolean;
-  /** Should you be able to connect to this handle */
-  isConnectableEnd?: boolean;
-  /** Function that is called when checking if connection is valid.
-   * Overrides the isValidConnection on the Flow component.
-   */
-  isValidConnection?: IsValidConnection;
   onconnect?: (connections: Connection[]) => void;
   ondisconnect?: (connections: Connection[]) => void;
 };

packages/system/src/types/handles.ts

@@ -1,4 +1,4 @@
-import type { Position, OnConnect, IsValidConnection } from '.';
+import type { Position, IsValidConnection } from '.';
 
 export type HandleType = 'source' | 'target';
 
@@ -42,8 +42,6 @@ export type HandleProps = {
   isConnectableStart?: boolean;
   /** Should you be able to connect to this handle */
   isConnectableEnd?: boolean;
-  /** Callback called when connection is made */
-  onConnect?: OnConnect;
   /** Callback if connection is valid
    * @remarks connection becomes an edge if isValidConnection returns true
    */