refactor(edges): use EdgeWrapper instead of wrapEdge

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

@@ -8,19 +8,15 @@ import useOnInitHandler from '../../hooks/useOnInitHandler';
 import useViewportSync from '../../hooks/useViewportSync';
 import ConnectionLine from '../../components/ConnectionLine';
 import type { ReactFlowProps } from '../../types';
-import { createNodeTypes } from '../NodeRenderer/utils';
-import { createEdgeTypes } from '../EdgeRenderer/utils';
-import { useNodeOrEdgeTypes } from './utils';
+import useNodeOrEdgeTypesWarning from './useNodeOrEdgeTypesWarning';
 
 export type GraphViewProps = Omit<
   ReactFlowProps,
-  'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes' | 'onMove' | 'onMoveStart' | 'onMoveEnd'
+  'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd'
 > &
   Required<
     Pick<
       ReactFlowProps,
-      | 'nodeTypes'
-      | 'edgeTypes'
       | 'selectionKeyCode'
       | 'deleteKeyCode'
       | 'multiSelectionKeyCode'
@@ -108,8 +104,8 @@ const GraphView = ({
   viewport,
   onViewportChange,
 }: GraphViewProps) => {
-  const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes);
-  const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes);
+  useNodeOrEdgeTypesWarning(nodeTypes);
+  useNodeOrEdgeTypesWarning(edgeTypes);
 
   useOnInitHandler(onInit);
   useViewportSync(viewport);
@@ -154,7 +150,7 @@ const GraphView = ({
     >
       <ViewportWrapper>
         <EdgeRenderer
-          edgeTypes={edgeTypesWrapped}
+          edgeTypes={edgeTypes}
           onEdgeClick={onEdgeClick}
           onEdgeDoubleClick={onEdgeDoubleClick}
           onEdgeUpdate={onEdgeUpdate}
@@ -182,7 +178,7 @@ const GraphView = ({
         <div className="react-flow__edgelabel-renderer" />
 
         <NodeRenderer
-          nodeTypes={nodeTypesWrapped}
+          nodeTypes={nodeTypes}
           onNodeClick={onNodeClick}
           onNodeDoubleClick={onNodeDoubleClick}
           onNodeMouseEnter={onNodeMouseEnter}

packages/react/src/container/GraphView/useNodeOrEdgeTypesWarning.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { errorMessages } from '@xyflow/system';
+
+import type { EdgeTypes, NodeTypes } from '../../types';
+import { useStoreApi } from '../../hooks/useStore';
+
+const emptyTypes = {};
+
+/*
+ * This hook warns the user if node or edgeTypes change.
+ */
+export function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes?: NodeTypes): void;
+export function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes?: EdgeTypes): void;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes: any = emptyTypes): any {
+  const updateCount = useRef(0);
+  const store = useStoreApi();
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      if (updateCount.current > 1) {
+        store.getState().onError?.('002', errorMessages['error002']());
+      }
+      updateCount.current += 1;
+    }
+  }, [nodeOrEdgeTypes]);
+}

packages/react/src/container/GraphView/utils.ts

@@ -1,31 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { shallow } from 'zustand/shallow';
-import { errorMessages } from '@xyflow/system';
-
-import { CreateEdgeTypes } from '../EdgeRenderer/utils';
-import { CreateNodeTypes } from '../NodeRenderer/utils';
-import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
-import { useStoreApi } from '../../hooks/useStore';
-
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
-  const typesKeysRef = useRef<string[] | null>(null);
-  const store = useStoreApi();
-
-  const typesParsed = useMemo(() => {
-    if (process.env.NODE_ENV === 'development') {
-      const typeKeys = Object.keys(nodeOrEdgeTypes);
-
-      if (shallow(typesKeysRef.current, typeKeys)) {
-        store.getState().onError?.('002', errorMessages['error002']());
-      }
-
-      typesKeysRef.current = typeKeys;
-    }
-    return createTypes(nodeOrEdgeTypes);
-  }, [nodeOrEdgeTypes]);
-
-  return typesParsed;
-}