refactor(on-error): use onError for node and edge type creation

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

@@ -7,11 +7,10 @@ import { useStore } from '../../hooks/useStore';
 import useVisibleEdges from '../../hooks/useVisibleEdges';
 import MarkerDefinitions from './MarkerDefinitions';
 import { GraphViewProps } from '../GraphView';
-import type { ReactFlowState } from '../../types';
+import type { EdgeTypesWrapped, ReactFlowState } from '../../types';
 
 type EdgeRendererProps = Pick<
   GraphViewProps,
-  | 'edgeTypes'
   | 'onEdgeClick'
   | 'onEdgeDoubleClick'
   | 'defaultMarkerColor'
@@ -29,6 +28,7 @@ type EdgeRendererProps = Pick<
   | 'rfId'
   | 'disableKeyboardA11y'
 > & {
+  edgeTypes: EdgeTypesWrapped;
   elevateEdgesOnSelect: boolean;
   children: ReactNode;
 };

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

@@ -6,7 +6,10 @@ import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
 import ConnectionLine from '../../components/ConnectionLine';
-import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
+import type { NodeTypesWrapped, ReactFlowProps } from '../../types';
+import { createNodeTypes } from '../NodeRenderer/utils';
+import { createEdgeTypes } from '../EdgeRenderer/utils';
+import { useNodeOrEdgeTypes } from './utils';
 
 export type GraphViewProps = Omit<
   ReactFlowProps,
@@ -15,6 +18,8 @@ export type GraphViewProps = Omit<
   Required<
     Pick<
       ReactFlowProps,
+      | 'nodeTypes'
+      | 'edgeTypes'
       | 'selectionKeyCode'
       | 'deleteKeyCode'
       | 'multiSelectionKeyCode'
@@ -33,8 +38,6 @@ export type GraphViewProps = Omit<
       | 'nodeOrigin'
     >
   > & {
-    nodeTypes: NodeTypesWrapped;
-    edgeTypes: EdgeTypesWrapped;
     rfId: string;
   };
 
@@ -102,6 +105,9 @@ const GraphView = ({
   nodeExtent,
   rfId,
 }: GraphViewProps) => {
+  const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes);
+  const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes);
+
   useOnInitHandler(onInit);
 
   return (
@@ -142,7 +148,7 @@ const GraphView = ({
     >
       <ViewportWrapper>
         <EdgeRenderer
-          edgeTypes={edgeTypes}
+          edgeTypes={edgeTypesWrapped}
           onEdgeClick={onEdgeClick}
           onEdgeDoubleClick={onEdgeDoubleClick}
           onEdgeUpdate={onEdgeUpdate}
@@ -170,7 +176,7 @@ const GraphView = ({
         <div className="react-flow__edgelabel-renderer" />
 
         <NodeRenderer
-          nodeTypes={nodeTypes}
+          nodeTypes={nodeTypesWrapped}
           onNodeClick={onNodeClick}
           onNodeDoubleClick={onNodeDoubleClick}
           onNodeMouseEnter={onNodeMouseEnter}

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

@@ -1,22 +1,24 @@
 import { useMemo, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
-import { errorMessages, devWarn } from '@xyflow/system';
+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)) {
-        devWarn('002', errorMessages['error002']());
+        store.getState().onError?.('002', errorMessages['error002']());
       }
 
       typesKeysRef.current = typeKeys;

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

@@ -6,11 +6,10 @@ import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
-import type { ReactFlowState, WrapNodeProps } from '../../types';
+import type { NodeTypesWrapped, ReactFlowState, WrapNodeProps } from '../../types';
 
 type NodeRendererProps = Pick<
   GraphViewProps,
-  | 'nodeTypes'
   | 'onNodeClick'
   | 'onNodeDoubleClick'
   | 'onNodeMouseEnter'
@@ -24,7 +23,9 @@ type NodeRendererProps = Pick<
   | 'disableKeyboardA11y'
   | 'nodeOrigin'
   | 'nodeExtent'
->;
+> & {
+  nodeTypes: NodeTypesWrapped;
+};
 
 const selector = (s: ReactFlowState) => ({
   nodesDraggable: s.nodesDraggable,

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

@@ -20,19 +20,9 @@ import GroupNode from '../../components/Nodes/GroupNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
 import A11yDescriptions from '../../components/A11yDescriptions';
-import { createEdgeTypes } from '../EdgeRenderer/utils';
-import { createNodeTypes } from '../NodeRenderer/utils';
 import GraphView from '../GraphView';
 import Wrapper from './Wrapper';
-import { useNodeOrEdgeTypes } from './utils';
+import type { EdgeTypes, NodeTypes, ReactFlowProps, ReactFlowRefType } from '../../types';
-import type {
-  EdgeTypes,
-  EdgeTypesWrapped,
-  NodeTypes,
-  NodeTypesWrapped,
-  ReactFlowProps,
-  ReactFlowRefType,
-} from '../../types';
 
 const defaultNodeTypes: NodeTypes = {
   input: InputNode,
@@ -177,8 +167,6 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
     },
     ref
   ) => {
-    const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
-    const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
     const rfId = id || '1';
 
     return (
@@ -200,8 +188,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onNodeMouseLeave={onNodeMouseLeave}
             onNodeContextMenu={onNodeContextMenu}
             onNodeDoubleClick={onNodeDoubleClick}
-            nodeTypes={nodeTypesWrapped}
+            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypesWrapped}
+            edgeTypes={edgeTypes}
             connectionLineType={connectionLineType}
             connectionLineStyle={connectionLineStyle}
             connectionLineComponent={connectionLineComponent}