From 54010e7ee6475e71b4a6fc25f975b1422441133f Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 25 Jan 2023 18:32:13 +0100 Subject: [PATCH] refactor(errors): put in constants --- packages/core/src/components/Handle/index.tsx | 5 ++--- .../container/EdgeRenderer/MarkerSymbols.tsx | 3 ++- .../core/src/container/EdgeRenderer/index.tsx | 10 +++------- .../core/src/container/NodeRenderer/index.tsx | 3 ++- .../core/src/container/ReactFlow/utils.ts | 6 ++---- packages/core/src/contants.ts | 20 +++++++++++++++++++ packages/core/src/hooks/useDrag/utils.ts | 3 ++- packages/core/src/hooks/useResizeHandler.ts | 5 ++--- packages/core/src/hooks/useStore.ts | 8 ++++---- packages/core/src/utils/graph.ts | 7 ++++--- 10 files changed, 43 insertions(+), 27 deletions(-) create mode 100644 packages/core/src/contants.ts diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index 1bf631b9..59d2bd7f 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -10,6 +10,7 @@ import { addEdge } from '../../utils/graph'; import { Position } from '../../types'; import type { HandleProps, Connection, ReactFlowState } from '../../types'; import { isValidHandle } from './utils'; +import { errorMessages } from '../../contants'; const alwaysValid = () => true; @@ -42,9 +43,7 @@ const Handle = forwardRef( const nodeId = useNodeId(); if (!nodeId) { - store - .getState() - .onError?.('010', 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.'); + store.getState().onError?.('010', errorMessages['010']()); return null; } diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx index d95fd70d..7429f635 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -3,6 +3,7 @@ import { useMemo } from 'react'; import { MarkerType } from '../../types'; import type { EdgeMarker } from '../../types'; import { useStoreApi } from '../../hooks/useStore'; +import { errorMessages } from '../../contants'; type SymbolProps = Omit; @@ -43,7 +44,7 @@ export function useMarkerSymbol(type: MarkerType) { const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type); if (!symbolExists) { - store.getState().onError?.('009', `Marker type "${type}" doesn't exist.`); + store.getState().onError?.('009', errorMessages['009'](type)); return null; } diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index e25f305d..ddc4aa4d 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -10,6 +10,7 @@ import { getEdgePositions, getHandle, getNodeData } from './utils'; import { GraphViewProps } from '../GraphView'; import { ConnectionMode, Position } from '../../types'; import type { Edge, ReactFlowState } from '../../types'; +import { errorMessages } from '../../contants'; type EdgeRendererProps = Pick< GraphViewProps, @@ -98,7 +99,7 @@ const EdgeRenderer = ({ let edgeType = edge.type || 'default'; if (!edgeTypes[edgeType]) { - onError?.('003', `Edge type "${edgeType}" not found. Using fallback type "default".`); + onError?.('011', errorMessages['011'](edgeType)); edgeType = 'default'; } @@ -115,12 +116,7 @@ const EdgeRenderer = ({ const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); if (!sourceHandle || !targetHandle) { - onError?.( - '008', - `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${ - !sourceHandle ? edge.sourceHandle : edge.targetHandle - }", edge id: ${edge.id}.` - ); + onError?.('008', errorMessages['008'](sourceHandle, edge)); return null; } diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx index 7129b937..ab35cb74 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -10,6 +10,7 @@ import { GraphViewProps } from '../GraphView'; import { getPositionWithOrigin } from './utils'; import { Position } from '../../types'; import type { ReactFlowState, WrapNodeProps } from '../../types'; +import { errorMessages } from '../../contants'; type NodeRendererProps = Pick< GraphViewProps, @@ -77,7 +78,7 @@ const NodeRenderer = (props: NodeRendererProps) => { let nodeType = node.type || 'default'; if (!props.nodeTypes[nodeType]) { - onError?.('003', `Node type "${nodeType}" not found. Using fallback type "default".`); + onError?.('003', errorMessages['003'](nodeType)); nodeType = 'default'; } diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts index f76f91f1..cc5ab36d 100644 --- a/packages/core/src/container/ReactFlow/utils.ts +++ b/packages/core/src/container/ReactFlow/utils.ts @@ -5,6 +5,7 @@ import { devWarn } from '../../utils'; import { CreateEdgeTypes } from '../EdgeRenderer/utils'; import { CreateNodeTypes } from '../NodeRenderer/utils'; import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types'; +import { errorMessages } from '../../contants'; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped; @@ -16,10 +17,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any if (process.env.NODE_ENV === 'development') { const typeKeys = Object.keys(nodeOrEdgeTypes); if (shallow(typesKeysRef.current, typeKeys)) { - devWarn( - '002', - "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them." - ); + devWarn('002', errorMessages['002']()); } typesKeysRef.current = typeKeys; diff --git a/packages/core/src/contants.ts b/packages/core/src/contants.ts new file mode 100644 index 00000000..815ac6f0 --- /dev/null +++ b/packages/core/src/contants.ts @@ -0,0 +1,20 @@ +import { Edge, HandleElement } from './types'; + +export const errorMessages = { + '001': () => + '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001', + '002': () => + "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.", + '003': (nodeType: string) => `Node type "${nodeType}" not found. Using fallback type "default".`, + '004': () => 'The React Flow parent container needs a width and a height to render the graph.', + '005': () => 'Only child nodes can use a parent extent.', + '006': () => "Can't create edge. An edge needs a source and a target.", + '007': (id: string) => `The old edge with id=${id} does not exist.`, + '009': (type: string) => `Marker type "${type}" doesn't exist.`, + '008': (sourceHandle: HandleElement | null, edge: Edge) => + `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${ + !sourceHandle ? edge.sourceHandle : edge.targetHandle + }", edge id: ${edge.id}.`, + '010': () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.', + '011': (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`, +}; diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index 028387aa..ed40053b 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -3,6 +3,7 @@ import type { RefObject } from 'react'; import { clampPosition, isNumeric } from '../../utils'; import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, OnError, XYPosition } from '../../types'; import { getNodePositionWithOrigin } from '../../utils/graph'; +import { errorMessages } from '../../contants'; export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean { if (!node.parentNode) { @@ -82,7 +83,7 @@ export function calcNextPosition( ] : currentExtent; } else { - onError?.('005', 'Only child nodes can use a parent extent.'); + onError?.('005', errorMessages['005']()); currentExtent = nodeExtent; } diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts index 5fc9aebc..a6d6d921 100644 --- a/packages/core/src/hooks/useResizeHandler.ts +++ b/packages/core/src/hooks/useResizeHandler.ts @@ -3,6 +3,7 @@ import type { MutableRefObject } from 'react'; import { useStoreApi } from '../hooks/useStore'; import { getDimensions } from '../utils'; +import { errorMessages } from '../contants'; function useResizeHandler(rendererNode: MutableRefObject): void { const store = useStoreApi(); @@ -18,9 +19,7 @@ function useResizeHandler(rendererNode: MutableRefObject) const size = getDimensions(rendererNode.current); if (size.height === 0 || size.width === 0) { - store - .getState() - .onError?.('004', 'The React Flow parent container needs a width and a height to render the graph.'); + store.getState().onError?.('004', errorMessages['004']()); } store.setState({ width: size.width || 500, height: size.height || 500 }); diff --git a/packages/core/src/hooks/useStore.ts b/packages/core/src/hooks/useStore.ts index bc0e605e..3983579d 100644 --- a/packages/core/src/hooks/useStore.ts +++ b/packages/core/src/hooks/useStore.ts @@ -3,10 +3,10 @@ import { useStore as useZustandStore } from 'zustand'; import type { StoreApi } from 'zustand'; import StoreContext from '../contexts/RFStoreContext'; +import { errorMessages } from '../contants'; import type { ReactFlowState } from '../types'; -const errorMessage = - '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#100'; +const zustandErrorMessage = errorMessages['001'](); type ExtractState = StoreApi extends { getState: () => infer T } ? T : never; @@ -17,7 +17,7 @@ function useStore( const store = useContext(StoreContext); if (store === null) { - throw new Error(errorMessage); + throw new Error(zustandErrorMessage); } return useZustandStore(store, selector, equalityFn); @@ -27,7 +27,7 @@ const useStoreApi = () => { const store = useContext(StoreContext); if (store === null) { - throw new Error(errorMessage); + throw new Error(zustandErrorMessage); } return useMemo( diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 4b1182f4..c7772a1c 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -13,6 +13,7 @@ import { NodeInternals, NodeOrigin, } from '../types'; +import { errorMessages } from '../contants'; export const isEdge = (element: Node | Connection | Edge): element is Edge => 'id' in element && 'source' in element && 'target' in element; @@ -70,7 +71,7 @@ const connectionExists = (edge: Edge, edges: Edge[]) => { export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => { if (!edgeParams.source || !edgeParams.target) { - devWarn('006', "Can't create edge. An edge needs a source and a target."); + devWarn('006', errorMessages['006']()); return edges; } @@ -94,7 +95,7 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => { if (!newConnection.source || !newConnection.target) { - devWarn('006', "Can't create a new edge. An edge needs a source and a target."); + devWarn('006', errorMessages['006']()); return edges; } @@ -102,7 +103,7 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge; if (!foundEdge) { - devWarn('007', `The old edge with id=${oldEdge.id} does not exist.`); + devWarn('007', errorMessages['007'](oldEdge.id)); return edges; }