Refactor(types): unify node and edge handling (#3978)

* refactor(types): unify node and edge type behaviour

* chore(changelogs): update

* chore(examples): cleanup

examples/react/src/examples/CustomNode/ColorSelectorNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo, FC, CSSProperties, useCallback } from 'react';
+import React, { memo, CSSProperties, useCallback } from 'react';
 import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react';
 
 import type { ColorSelectorNode } from '.';
@@ -13,7 +13,7 @@ const sourceHandleStyleB: CSSProperties = {
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 
-const ColorSelectorNode: FC<NodeProps<ColorSelectorNode['data']>> = ({ data, isConnectable }) => {
+function ColorSelectorNode({ data, isConnectable }: NodeProps<ColorSelectorNode>) {
   const onStart = useCallback((viewport: Viewport) => console.log('onStart', viewport), []);
   const onChange = useCallback((viewport: Viewport) => console.log('onChange', viewport), []);
   const onEnd = useCallback((viewport: Viewport) => console.log('onEnd', viewport), []);
@@ -44,6 +44,6 @@ const ColorSelectorNode: FC<NodeProps<ColorSelectorNode['data']>> = ({ data, isC
       <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} isConnectable={isConnectable} />
     </>
   );
-};
+}
 
 export default memo(ColorSelectorNode);

examples/react/src/examples/CustomNode/index.tsx

@@ -17,6 +17,8 @@ import {
   OnBeforeDelete,
   BuiltInNode,
   BuiltInEdge,
+  NodeTypes,
+  ReactFlowProvider,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
@@ -40,7 +42,7 @@ const initBgColor = '#1A192B';
 const connectionLineStyle = { stroke: '#fff' };
 const snapGrid: SnapGrid = [16, 16];
 
-const nodeTypes = {
+const nodeTypes: NodeTypes = {
   selectorNode: ColorSelectorNode,
 };
 
@@ -188,4 +190,8 @@ const CustomNodeFlow = () => {
   );
 };
 
-export default CustomNodeFlow;
+export default () => (
+  <ReactFlowProvider>
+    <CustomNodeFlow />
+  </ReactFlowProvider>
+);

examples/react/src/examples/UseReactFlow/index.tsx

@@ -27,18 +27,21 @@ const initialNodes: Node[] = [
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
     className: 'light',
+    type: 'default',
   },
   {
     id: '3',
     data: { label: 'Node 3' },
     position: { x: 400, y: 100 },
     className: 'light',
+    type: 'default',
   },
   {
     id: '4',
     data: { label: 'Node 4' },
     position: { x: 400, y: 200 },
     className: 'light',
+    type: 'default',
   },
 ];
 
@@ -85,6 +88,7 @@ const UseZoomPanHelperFlow = () => {
           data: {
             label: `${projectedPosition.x}-${projectedPosition.y}`,
           },
+          type: 'default',
         })
       );
     },
@@ -106,6 +110,7 @@ const UseZoomPanHelperFlow = () => {
       data: {
         label: 'New Node',
       },
+      type: 'default',
     };
 
     addNodes(newNode);
@@ -139,8 +144,8 @@ const UseZoomPanHelperFlow = () => {
 
   const onSetNodes = () => {
     setNodes([
-      { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node a' } },
-      { id: 'b', position: { x: 0, y: 150 }, data: { label: 'Node b' } },
+      { id: 'a', type: 'default', position: { x: 0, y: 0 }, data: { label: 'Node a' } },
+      { id: 'b', type: 'default', position: { x: 0, y: 150 }, data: { label: 'Node b' } },
     ]);
 
     setEdges([{ id: 'a-b', source: 'a', target: 'b' }]);

examples/svelte/src/routes/examples/customnode/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { ChangeEventHandler } from 'svelte/elements';
 	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,

examples/svelte/src/routes/examples/customnode/CustomNode.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { Writable } from 'svelte/store';
-	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, type Node } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	type $$Props = NodeProps<Node<{ colorStore: Writable<string> }>>;
 
-	export let data: { colorStore: Writable<string> };
+	export let data: $$Props['data'];
 
 	const { colorStore } = data;
 </script>

packages/react/CHANGELOG.md

@@ -5,6 +5,7 @@
 ## Patch changes
 
 - fix `ref` prop for `ReactFlow` and `Handle` component
+- unify `Edge` and `Node` type handling
 
 ## 12.0.0-next.10
 

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

@@ -212,6 +212,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
             id={id}
             source={edge.source}
             target={edge.target}
+            type={edge.type}
             selected={edge.selected}
             animated={edge.animated}
             label={edge.label}

packages/react/src/components/EdgeWrapper/utils.ts

@@ -1,5 +1,4 @@
-import type { ComponentType } from 'react';
-import type { EdgeProps, EdgeTypes } from '../../types';
+import type { EdgeTypes } from '../../types';
 import {
   BezierEdgeInternal,
   StraightEdgeInternal,
@@ -9,11 +8,11 @@ import {
 } from '../Edges';
 
 export const builtinEdgeTypes: EdgeTypes = {
-  default: BezierEdgeInternal as ComponentType<EdgeProps>,
-  straight: StraightEdgeInternal as ComponentType<EdgeProps>,
-  step: StepEdgeInternal as ComponentType<EdgeProps>,
-  smoothstep: SmoothStepEdgeInternal as ComponentType<EdgeProps>,
-  simplebezier: SimpleBezierEdgeInternal as ComponentType<EdgeProps>,
+  default: BezierEdgeInternal,
+  straight: StraightEdgeInternal,
+  step: StepEdgeInternal,
+  smoothstep: SmoothStepEdgeInternal,
+  simplebezier: SimpleBezierEdgeInternal,
 };
 
 export const nullPosition = {

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

@@ -1,10 +1,10 @@
 import {
-  memo,
-  forwardRef,
   type HTMLAttributes,
   type MouseEvent as ReactMouseEvent,
   type TouchEvent as ReactTouchEvent,
   type ForwardedRef,
+  memo,
+  forwardRef,
 } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';

packages/react/src/components/NodeWrapper/utils.tsx

@@ -1,5 +1,4 @@
-import type { ComponentType } from 'react';
-import type { NodeProps, XYPosition } from '@xyflow/system';
+import type { XYPosition } from '@xyflow/system';
 
 import { InputNode } from '../Nodes/InputNode';
 import { DefaultNode } from '../Nodes/DefaultNode';
@@ -15,10 +14,10 @@ export const arrowKeyDiffs: Record<string, XYPosition> = {
 };
 
 export const builtinNodeTypes: NodeTypes = {
-  input: InputNode as ComponentType<NodeProps>,
-  default: DefaultNode as ComponentType<NodeProps>,
-  output: OutputNode as ComponentType<NodeProps>,
-  group: GroupNode as ComponentType<NodeProps>,
+  input: InputNode,
+  default: DefaultNode,
+  output: OutputNode,
+  group: GroupNode,
 };
 
 export function getNodeInlineStyleDimensions<NodeType extends Node = Node>(

packages/react/src/components/Nodes/DefaultNode.tsx

@@ -1,13 +1,14 @@
-import { Position, type NodeProps } from '@xyflow/system';
+import { Position } from '@xyflow/system';
 
 import { Handle } from '../../components/Handle';
+import type { BuiltInNode, NodeProps } from '../../types/nodes';
 
 export function DefaultNode({
   data,
   isConnectable,
   targetPosition = Position.Top,
   sourcePosition = Position.Bottom,
-}: NodeProps) {
+}: NodeProps<BuiltInNode>) {
   return (
     <>
       <Handle type="target" position={targetPosition} isConnectable={isConnectable} />

packages/react/src/components/Nodes/InputNode.tsx

@@ -1,8 +1,9 @@
-import { Position, type NodeProps } from '@xyflow/system';
+import { Position } from '@xyflow/system';
 
 import { Handle } from '../../components/Handle';
+import type { BuiltInNode, NodeProps } from '../../types/nodes';
 
-export function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) {
+export function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps<BuiltInNode>) {
   return (
     <>
       {data?.label}

packages/react/src/components/Nodes/OutputNode.tsx

@@ -1,8 +1,9 @@
-import { Position, type NodeProps } from '@xyflow/system';
+import { Position } from '@xyflow/system';
 
 import { Handle } from '../../components/Handle';
+import type { BuiltInNode, NodeProps } from '../../types/nodes';
 
-export function OutputNode({ data, isConnectable, targetPosition = Position.Top }: NodeProps) {
+export function OutputNode({ data, isConnectable, targetPosition = Position.Top }: NodeProps<BuiltInNode>) {
   return (
     <>
       <Handle type="target" position={targetPosition} isConnectable={isConnectable} />

packages/react/src/index.ts

@@ -64,7 +64,6 @@ export {
   SelectionMode,
   type SelectionRect,
   type OnError,
-  type NodeProps,
   type NodeOrigin,
   type OnSelectionDrag,
   Position,

packages/react/src/types/edges.ts

@@ -98,10 +98,10 @@ export type EdgeTextProps = HTMLAttributes<SVGElement> &
  * Custom edge component props
  * @public
  */
-export type EdgeProps<
-  EdgeData extends Record<string, unknown> = Record<string, unknown>,
-  EdgeType extends string | undefined = string | undefined
-> = Pick<Edge<EdgeData, EdgeType>, 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'> &
+export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
+  EdgeType,
+  'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
+> &
   EdgePosition &
   EdgeLabelOptions & {
     sourceHandleId?: string | null;

packages/react/src/types/general.ts

@@ -10,18 +10,18 @@ import {
   SetCenter,
   FitBounds,
   XYPosition,
-  NodeProps,
   OnBeforeDeleteBase,
   Connection,
 } from '@xyflow/system';
 
-import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps } from '.';
+import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps, NodeProps } from '.';
 
 // this is needed, to use generics + forwardRef
 declare module 'react' {
-  function forwardRef<T, P>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 
 export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
@@ -34,8 +34,28 @@ export type OnDelete<NodeType extends Node = Node, EdgeType extends Edge = Edge>
   edges: EdgeType[];
 }) => void;
 
-export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
-export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
+export type NodeTypes = Record<
+  string,
+  ComponentType<
+    NodeProps & {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      data: any;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      type: any;
+    }
+  >
+>;
+export type EdgeTypes = Record<
+  string,
+  ComponentType<
+    EdgeProps & {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      data: any;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      type: any;
+    }
+  >
+>;
 
 export type UnselectNodesAndEdgesParams = {
   nodes?: Node[];

packages/react/src/types/nodes.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { CoordinateExtent, NodeBase, NodeOrigin, OnError } from '@xyflow/system';
+import type { CoordinateExtent, NodeBase, NodeOrigin, OnError, NodeProps as NodePropsBase } from '@xyflow/system';
 
 import { NodeTypes } from './general';
 
@@ -9,7 +9,7 @@ import { NodeTypes } from './general';
  */
 export type Node<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string | undefined = string | undefined
+  NodeType extends string = string
 > = NodeBase<NodeData, NodeType> & {
   style?: CSSProperties;
   className?: string;
@@ -49,3 +49,5 @@ export type NodeWrapperProps<NodeType extends Node> = {
 };
 
 export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;
+
+export type NodeProps<NodeType extends Node = Node> = NodePropsBase<NodeType>;

packages/svelte/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @xyflow/svelte
 
+## 0.0.38
+
+## ⚠️ Breaking changes
+
+- `NodeProps` generic is a node and not only node data. `type $$Props = NodeProps<AppNode>`  
+
+## Patch changes
+
+- unify `Edge` and `Node` type handling
+
 ## 0.0.37
 
 ## ⚠️ Breaking changes

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -51,7 +51,8 @@
     edgecontextmenu: { edge: Edge; event: MouseEvent };
   }>();
 
-  $: edgeComponent = $edgeTypes[type!] || BezierEdgeInternal;
+  const edgeType = type || 'default';
+  $: edgeComponent = $edgeTypes[edgeType] || BezierEdgeInternal;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
   $: isSelectable = selectable || ($elementsSelectable && typeof selectable === 'undefined');
@@ -113,6 +114,7 @@
         {data}
         {style}
         {interactionWidth}
+        type={edgeType}
         sourceHandleId={sourceHandle}
         targetHandleId={targetHandle}
         markerStart={markerStartUrl}

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,16 +1,10 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import {
-    createEventDispatcher,
-    setContext,
-    SvelteComponent,
-    type ComponentType,
-    onDestroy
-  } from 'svelte';
+  import { createEventDispatcher, setContext, onDestroy } from 'svelte';
   import { get, writable } from 'svelte/store';
   import cc from 'classcat';
-  import { errorMessages, Position, type NodeProps } from '@xyflow/system';
+  import { errorMessages, Position } from '@xyflow/system';
 
   import drag from '$lib/actions/drag';
   import { useStore } from '$lib/store';
@@ -71,8 +65,7 @@
     console.warn('003', errorMessages['error003'](type!));
   }
 
-  const nodeComponent: ComponentType<SvelteComponent<NodeProps>> =
-    $nodeTypes[nodeType] || DefaultNode;
+  const nodeComponent = $nodeTypes[nodeType] || DefaultNode;
   const dispatch = createEventDispatcher<{
     nodeclick: { node: Node; event: MouseEvent | TouchEvent };
     nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
@@ -211,11 +204,11 @@
       {selected}
       {sourcePosition}
       {targetPosition}
-      {type}
       {zIndex}
       {dragging}
       {dragHandle}
-      isConnectable={connectable}
+      type={nodeType}
+      isConnectable={$connectableStore}
       positionAbsoluteX={positionX}
       positionAbsoluteY={positionY}
       {width}

packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte

@@ -11,6 +11,7 @@
   export let source: $$Props['source'] = '';
   export let target: $$Props['target'] = '';
 
+  export let type: $$Props['type'] = 'straight';
   export let animated: $$Props['animated'] = undefined;
   export let selected: $$Props['selected'] = undefined;
   export let label: $$Props['label'] = undefined;

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { Position, type NodeProps } from '@xyflow/system';
+  import { Position } from '@xyflow/system';
 
   import { Handle } from '$lib/components/Handle';
+  import type { NodeProps } from '$lib/types';
 
-  interface $$Props extends NodeProps<{ label: string }> {}
+  interface $$Props extends NodeProps {}
 
   export let data: $$Props['data'] = { label: 'Node' };
   export let targetPosition: $$Props['targetPosition'] = Position.Top;
@@ -15,12 +16,12 @@
   export let height: $$Props['height'] = undefined;
   export let selected: $$Props['selected'] = undefined;
   export let type: $$Props['type'] = undefined;
-  export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
   export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
   export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-  export let isConnectable: $$Props['isConnectable'] = undefined;
+  export let isConnectable: $$Props['isConnectable'];
+  export let zIndex: $$Props['zIndex'];
 
   // @todo: there must be a better way to do this
   id;

packages/svelte/src/lib/components/nodes/GroupNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { NodeProps } from '@xyflow/system';
+  import type { NodeProps } from '$lib/types';
 
-  interface $$Props extends NodeProps<{}> {}
+  interface $$Props extends NodeProps {}
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
@@ -12,12 +12,12 @@
   export let sourcePosition: $$Props['sourcePosition'] = undefined;
   export let targetPosition: $$Props['targetPosition'] = undefined;
   export let type: $$Props['type'] = undefined;
-  export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
   export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
   export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-  export let isConnectable: $$Props['isConnectable'] = undefined;
+  export let isConnectable: $$Props['isConnectable'];
+  export let zIndex: $$Props['zIndex'];
 
   // @todo: there must be a better way to do this
   id;

packages/svelte/src/lib/components/nodes/InputNode.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { Position, type NodeProps } from '@xyflow/system';
+  import { Position } from '@xyflow/system';
+  import type { NodeProps } from '$lib/types';
 
   import { Handle } from '$lib/components/Handle';
 
-  interface $$Props extends NodeProps<{ label: string }> {}
+  interface $$Props extends NodeProps {}
 
   export let data: $$Props['data'] = { label: 'Node' };
   export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
@@ -15,12 +16,12 @@
   export let selected: $$Props['selected'] = undefined;
   export let targetPosition: $$Props['targetPosition'] = undefined;
   export let type: $$Props['type'] = undefined;
-  export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
   export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
   export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-  export let isConnectable: $$Props['isConnectable'] = undefined;
+  export let isConnectable: $$Props['isConnectable'];
+  export let zIndex: $$Props['zIndex'];
 
   // @todo: there must be a better way to do this
   id;

packages/svelte/src/lib/components/nodes/OutputNode.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { Position, type NodeProps } from '@xyflow/system';
+  import { Position } from '@xyflow/system';
+  import type { NodeProps } from '$lib/types';
 
   import { Handle } from '$lib/components/Handle';
 
-  interface $$Props extends NodeProps<{ label: string }> {}
+  interface $$Props extends NodeProps {}
 
   export let data: $$Props['data'] = { label: 'Node' };
   export let targetPosition: $$Props['targetPosition'] = Position.Top;
@@ -15,12 +16,12 @@
   export let selected: $$Props['selected'] = undefined;
   export let sourcePosition: $$Props['sourcePosition'] = undefined;
   export let type: $$Props['type'] = undefined;
-  export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
   export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
   export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-  export let isConnectable: $$Props['isConnectable'] = undefined;
+  export let isConnectable: $$Props['isConnectable'];
+  export let zIndex: $$Props['zIndex'];
 
   // @todo: there must be a better way to do this
   id;

packages/svelte/src/lib/index.ts

@@ -45,7 +45,7 @@ export type {
   DefaultEdgeOptions
 } from '$lib/types/edges';
 export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
-export type { Node, NodeTypes, DefaultNodeOptions, BuiltInNode } from '$lib/types/nodes';
+export type { Node, NodeTypes, DefaultNodeOptions, BuiltInNode, NodeProps } from '$lib/types/nodes';
 export type { SvelteFlowStore } from '$lib/store/types';
 
 // system types
@@ -77,7 +77,6 @@ export {
   SelectionMode,
   type SelectionRect,
   type OnError,
-  type NodeProps,
   type NodeOrigin,
   type OnSelectionDrag,
   Position,

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

@@ -49,11 +49,14 @@ export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge;
 /**
  * Custom edge component props.
  */
-export type EdgeProps<
-  EdgeData extends Record<string, unknown> = Record<string, unknown>,
-  EdgeType extends string | undefined = string | undefined
-> = Omit<Edge<EdgeData, EdgeType>, 'sourceHandle' | 'targetHandle' | 'type'> &
+export type EdgeProps<EdgeType extends Edge = Edge> = Omit<
+  EdgeType,
+  'sourceHandle' | 'targetHandle'
+> &
   EdgePosition & {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data?: any;
+    type: string;
     markerStart?: string;
     markerEnd?: string;
     sourceHandleId?: string | null;
@@ -103,7 +106,19 @@ export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
  */
 export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
 
-export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
+export type EdgeTypes = Record<
+  string,
+  ComponentType<
+    SvelteComponent<
+      EdgeProps & {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        data?: any;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        type: any;
+      }
+    >
+  >
+>;
 
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
 

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

@@ -1,5 +1,5 @@
 import type { ComponentType, SvelteComponent } from 'svelte';
-import type { NodeBase, NodeProps } from '@xyflow/system';
+import type { NodeBase, NodeProps as NodePropsBase } from '@xyflow/system';
 
 /**
  * The node data structure that gets used for the nodes prop.
@@ -7,13 +7,32 @@ import type { NodeBase, NodeProps } from '@xyflow/system';
  */
 export type Node<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string | undefined = string | undefined
+  NodeType extends string = string
 > = NodeBase<NodeData, NodeType> & {
   class?: string;
   style?: string;
 };
 
-export type NodeTypes = Record<string, ComponentType<SvelteComponent<NodeProps>>>;
+// @todo: currently generics for nodes are not really supported
+// let's fix `type: any` when we migrate to Svelte 5
+export type NodeProps<NodeType extends Node = Node> = NodePropsBase<NodeType> & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  type: any;
+};
+
+export type NodeTypes = Record<
+  string,
+  ComponentType<
+    SvelteComponent<
+      NodeProps & {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        data: any;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        type: any;
+      }
+    >
+  >
+>;
 
 export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;
 

packages/system/src/types/nodes.ts

@@ -10,7 +10,7 @@ import { Optional } from '../utils/types';
  */
 export type NodeBase<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string | undefined = string | undefined
+  NodeType extends string = string
 > = {
   /** Unique id of a node */
   id: string;
@@ -82,25 +82,19 @@ export type NodeBase<
  * The node data structure that gets used for the nodes prop.
  *
  * @public
- * @param id - The id of the node.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type NodeProps<NodeData = any> = {
-  id: NodeBase['id'];
-  data: NodeData;
-  dragHandle: NodeBase['dragHandle'];
-  type: NodeBase['type'];
-  selected: NodeBase['selected'];
-  isConnectable: NodeBase['connectable'];
-  zIndex: NodeBase['zIndex'];
-  positionAbsoluteX: number;
-  positionAbsoluteY: number;
-  width?: number;
-  height?: number;
-  dragging: NodeBase['dragging'];
-  sourcePosition?: NodeBase['sourcePosition'];
-  targetPosition?: NodeBase['targetPosition'];
-};
+export type NodeProps<NodeType extends NodeBase> = Pick<
+  NodeType,
+  'id' | 'data' | 'width' | 'height' | 'sourcePosition' | 'targetPosition' | 'selected' | 'dragHandle'
+> &
+  Required<Pick<NodeType, 'type' | 'dragging' | 'zIndex'>> & {
+    /** whether a node is connectable or not */
+    isConnectable: boolean;
+    /** position absolute x value */
+    positionAbsoluteX: number;
+    /** position absolute x value */
+    positionAbsoluteY: number;
+  };
 
 export type NodeHandleBounds = {
   source: HandleElement[] | null;