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

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

* chore(changelogs): update

* chore(examples): cleanup

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} />