refactor(types): use same structure for nodes and edges

packages/react/src/container/EdgeRenderer/index.tsx

@@ -6,10 +6,10 @@ import { useVisibleEdgeIds } from '../../hooks/useVisibleEdgeIds';
 import MarkerDefinitions from './MarkerDefinitions';
 import { GraphViewProps } from '../GraphView';
 import { EdgeWrapper } from '../../components/EdgeWrapper';
-import type { ReactFlowState } from '../../types';
+import type { Edge, ReactFlowState, Node } from '../../types';
 
-type EdgeRendererProps = Pick<
-  GraphViewProps,
+type EdgeRendererProps<EdgeType extends Edge = Edge> = Pick<
+  GraphViewProps<Node, EdgeType>,
   | 'onEdgeClick'
   | 'onEdgeDoubleClick'
   | 'defaultMarkerColor'
@@ -40,7 +40,7 @@ const selector = (s: ReactFlowState) => ({
   onError: s.onError,
 });
 
-function EdgeRendererComponent({
+function EdgeRendererComponent<EdgeType extends Edge = Edge>({
   defaultMarkerColor,
   onlyRenderVisibleElements,
   rfId,
@@ -56,7 +56,7 @@ function EdgeRendererComponent({
   onEdgeDoubleClick,
   onEdgeUpdateStart,
   onEdgeUpdateEnd,
-}: EdgeRendererProps) {
+}: EdgeRendererProps<EdgeType>) {
   const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
   const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
 
@@ -66,7 +66,7 @@ function EdgeRendererComponent({
 
       {edgeIds.map((id) => {
         return (
-          <EdgeWrapper
+          <EdgeWrapper<EdgeType>
             key={id}
             id={id}
             edgesFocusable={edgesFocusable}
@@ -95,4 +95,4 @@ function EdgeRendererComponent({
 
 EdgeRendererComponent.displayName = 'EdgeRenderer';
 
-export const EdgeRenderer = memo(EdgeRendererComponent);
+export const EdgeRenderer = memo(EdgeRendererComponent) as typeof EdgeRendererComponent;

packages/react/src/container/FlowRenderer/index.tsx

@@ -9,7 +9,7 @@ import { Pane } from '../Pane';
 import { NodesSelection } from '../../components/NodesSelection';
 import type { ReactFlowState, Node } from '../../types';
 
-export type FlowRendererProps<NodeType extends Node> = Omit<
+export type FlowRendererProps<NodeType extends Node = Node> = Omit<
   GraphViewProps<NodeType>,
   | 'snapToGrid'
   | 'nodeTypes'
@@ -32,7 +32,7 @@ const selector = (s: ReactFlowState) => {
   return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };
 
-function FlowRendererComponent<NodeType extends Node>({
+function FlowRendererComponent<NodeType extends Node = Node>({
   children,
   onPaneClick,
   onPaneMouseEnter,

packages/react/src/container/GraphView/index.tsx

@@ -8,15 +8,15 @@ import { useOnInitHandler } from '../../hooks/useOnInitHandler';
 import { useViewportSync } from '../../hooks/useViewportSync';
 import { ConnectionLineWrapper } from '../../components/ConnectionLine';
 import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
-import type { Node, ReactFlowProps } from '../../types';
+import type { Edge, Node, ReactFlowProps } from '../../types';
 
-export type GraphViewProps<NodeType extends Node = Node> = Omit<
-  ReactFlowProps<NodeType>,
+export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<
+  ReactFlowProps<NodeType, EdgeType>,
   'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'
 > &
   Required<
     Pick<
-      ReactFlowProps<NodeType>,
+      ReactFlowProps<NodeType, EdgeType>,
       | 'selectionKeyCode'
       | 'deleteKeyCode'
       | 'multiSelectionKeyCode'
@@ -38,7 +38,7 @@ export type GraphViewProps<NodeType extends Node = Node> = Omit<
     rfId: string;
   };
 
-function GraphViewComponent<NodeType extends Node = Node>({
+function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge = Edge>({
   nodeTypes,
   edgeTypes,
   onInit,
@@ -102,7 +102,7 @@ function GraphViewComponent<NodeType extends Node = Node>({
   rfId,
   viewport,
   onViewportChange,
-}: GraphViewProps<NodeType>) {
+}: GraphViewProps<NodeType, EdgeType>) {
   useNodeOrEdgeTypesWarning(nodeTypes);
   useNodeOrEdgeTypesWarning(edgeTypes);
 
@@ -148,7 +148,7 @@ function GraphViewComponent<NodeType extends Node = Node>({
       isControlledViewport={!!viewport}
     >
       <Viewport>
-        <EdgeRenderer
+        <EdgeRenderer<EdgeType>
           edgeTypes={edgeTypes}
           onEdgeClick={onEdgeClick}
           onEdgeDoubleClick={onEdgeDoubleClick}

packages/react/src/container/ReactFlow/index.tsx

@@ -17,7 +17,7 @@ import { StoreUpdater } from '../../components/StoreUpdater';
 import { useColorModeClass } from '../../hooks/useColorModeClass';
 import { GraphView } from '../GraphView';
 import { Wrapper } from './Wrapper';
-import type { ReactFlowProps, ReactFlowRefType, Node } from '../../types';
+import type { ReactFlowProps, ReactFlowRefType, Node, Edge } from '../../types';
 
 export const initNodeOrigin: NodeOrigin = [0, 0];
 const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -30,13 +30,7 @@ const wrapperStyle: CSSProperties = {
   zIndex: 0,
 };
 
-declare module 'react' {
-  function forwardRef<T, P = Record<string, never>>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
-}
-
-function ReactFlow<NodeType extends Node = Node>(
+function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   {
     nodes,
     edges,
@@ -156,7 +150,7 @@ function ReactFlow<NodeType extends Node = Node>(
     height,
     colorMode = 'light',
     ...rest
-  }: ReactFlowProps<NodeType>,
+  }: ReactFlowProps<NodeType, EdgeType>,
   ref: ForwardedRef<ReactFlowRefType>
 ) {
   const rfId = id || '1';
@@ -172,7 +166,7 @@ function ReactFlow<NodeType extends Node = Node>(
       id={id}
     >
       <Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
-        <GraphView<NodeType>
+        <GraphView<NodeType, EdgeType>
           onInit={onInit}
           onNodeClick={onNodeClick}
           onEdgeClick={onEdgeClick}
@@ -300,6 +294,4 @@ function ReactFlow<NodeType extends Node = Node>(
   );
 }
 
-export default forwardRef(ReactFlow) as <T extends Node = Node>(
-  props: ReactFlowProps<T> & { ref?: React.ForwardedRef<HTMLUListElement> }
-) => ReturnType<typeof ReactFlow>;
+export default forwardRef(ReactFlow) as typeof ReactFlow;