From 86ea34b47074a9be91a76611dd42b6e5f45faaf9 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 17 Aug 2022 11:55:37 +0200 Subject: [PATCH] refactor(dev-warnings): cleanup --- .../container/EdgeRenderer/MarkerSymbols.tsx | 5 ++-- .../core/src/container/EdgeRenderer/index.tsx | 14 +++++------ .../core/src/container/NodeRenderer/index.tsx | 10 ++++---- .../core/src/container/NodeRenderer/utils.ts | 3 ++- .../core/src/container/ReactFlow/utils.ts | 5 ++-- packages/core/src/hooks/useDrag/utils.ts | 7 +++--- packages/core/src/hooks/useResizeHandler.ts | 12 ++++------ packages/core/src/utils/graph.ts | 23 ++++++------------- packages/core/src/utils/index.ts | 6 +++++ 9 files changed, 39 insertions(+), 46 deletions(-) diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx index b9de053a..b0a5757e 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -1,5 +1,6 @@ import { useMemo } from 'react'; import { MarkerType, EdgeMarker } from '../../types'; +import { devWarn } from '../../utils'; type SymbolProps = Omit; @@ -39,9 +40,7 @@ export function useMarkerSymbol(type: MarkerType) { const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type); if (!symbolExists) { - if (process.env.NODE_ENV === 'development') { - console.warn(`[React Flow]: Marker type "${type}" doesn't exist. Help: https://reactflow.dev/error#900`); - } + devWarn(`Marker type "${type}" doesn't exist. Help: https://reactflow.dev/error#900`); return null; } diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index aacf72eb..98b4e947 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 { Position, Edge, ConnectionMode, ReactFlowState } from '../../types'; import { GraphViewProps } from '../GraphView'; +import { devWarn } from '../../utils'; interface EdgeRendererProps extends Pick< @@ -111,13 +112,12 @@ const EdgeRenderer = (props: EdgeRendererProps) => { const targetPosition = targetHandle?.position || Position.Top; if (!sourceHandle || !targetHandle) { - if (process.env.NODE_ENV === 'development') { - const handleType = !sourceHandle ? 'source' : 'target'; - const handleId = !sourceHandle ? edge.sourceHandle : edge.targetHandle; - console.warn( - `[React Flow]: Couldn't create edge for ${handleType} handle id: ${handleId}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800` - ); - } + devWarn( + `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: ${ + !sourceHandle ? edge.sourceHandle : edge.targetHandle + }; edge id: ${edge.id}. Help: https://reactflow.dev/error#800` + ); + return null; } diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx index 0b3f3ea3..c94751d9 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -3,7 +3,7 @@ import shallow from 'zustand/shallow'; import useVisibleNodes from '../../hooks/useVisibleNodes'; import { useStore } from '../../hooks/useStore'; -import { internalsSymbol } from '../../utils'; +import { devWarn, internalsSymbol } from '../../utils'; import { containerStyle } from '../../styles'; import { GraphViewProps } from '../GraphView'; import { Position, ReactFlowState, WrapNodeProps } from '../../types'; @@ -70,11 +70,9 @@ const NodeRenderer = (props: NodeRendererProps) => { let nodeType = node.type || 'default'; if (!props.nodeTypes[nodeType]) { - if (process.env.NODE_ENV === 'development') { - console.warn( - `[React Flow]: Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300` - ); - } + devWarn( + `Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300` + ); nodeType = 'default'; } diff --git a/packages/core/src/container/NodeRenderer/utils.ts b/packages/core/src/container/NodeRenderer/utils.ts index 6d1d68a6..6893aeb9 100644 --- a/packages/core/src/container/NodeRenderer/utils.ts +++ b/packages/core/src/container/NodeRenderer/utils.ts @@ -6,6 +6,7 @@ import OutputNode from '../../components/Nodes/OutputNode'; import GroupNode from '../../components/Nodes/GroupNode'; import wrapNode from '../../components/Nodes/wrapNode'; import { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types'; +import { devWarn } from '../../utils'; export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped; @@ -50,7 +51,7 @@ export const getPositionWithOrigin = ({ } if (origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) { - console.warn('[ReactFlow]: nodeOrigin must be between 0 and 1'); + devWarn('nodeOrigin must be between 0 and 1'); return { x, y }; } diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts index c72cc529..6eca2c89 100644 --- a/packages/core/src/container/ReactFlow/utils.ts +++ b/packages/core/src/container/ReactFlow/utils.ts @@ -2,6 +2,7 @@ import { useMemo, useRef } from 'react'; import shallow from 'zustand/shallow'; import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types'; +import { devWarn } from '../../utils'; import { CreateEdgeTypes } from '../EdgeRenderer/utils'; import { CreateNodeTypes } from '../NodeRenderer/utils'; @@ -15,8 +16,8 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any if (process.env.NODE_ENV === 'development') { const typeKeys = Object.keys(nodeOrEdgeTypes); if (shallow(typesKeysRef.current, typeKeys)) { - console.warn( - "[React Flow]: It looks like you have 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. Help: https://reactflow.dev/error#200" + devWarn( + "It looks like you have 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. Help: https://reactflow.dev/error#200" ); } diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index edbd90ba..bf9cd294 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -1,7 +1,7 @@ import { RefObject } from 'react'; import { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types'; -import { clampPosition } from '../../utils'; +import { clampPosition, devWarn } from '../../utils'; export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean { if (!node.parentNode) { @@ -78,9 +78,8 @@ export function calcNextPosition( ] : currentExtent; } else { - if (process.env.NODE_ENV === 'development') { - console.warn('[React Flow]: Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500'); - } + devWarn('Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500'); + currentExtent = nodeExtent; } } else if (node.extent && node.parentNode) { diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts index add3bf08..8635db38 100644 --- a/packages/core/src/hooks/useResizeHandler.ts +++ b/packages/core/src/hooks/useResizeHandler.ts @@ -1,7 +1,7 @@ import { useEffect, MutableRefObject } from 'react'; import { useStoreApi } from '../hooks/useStore'; -import { getDimensions } from '../utils'; +import { devWarn, getDimensions } from '../utils'; function useResizeHandler(rendererNode: MutableRefObject): void { const store = useStoreApi(); @@ -16,12 +16,10 @@ function useResizeHandler(rendererNode: MutableRefObject) const size = getDimensions(rendererNode.current); - if (process.env.NODE_ENV === 'development') { - if (size.height === 0 || size.width === 0) { - console.warn( - '[React Flow]: The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#400' - ); - } + if (size.height === 0 || size.width === 0) { + devWarn( + 'The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#400' + ); } store.setState({ width: size.width || 500, height: size.height || 500 }); diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 7f0517a4..f4fa3075 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { Selection as D3Selection } from 'd3'; -import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils'; +import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils'; import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types'; export const isEdge = (element: Node | Connection | Edge): element is Edge => @@ -60,11 +60,8 @@ const connectionExists = (edge: Edge, edges: Edge[]) => { export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => { if (!edgeParams.source || !edgeParams.target) { - if (process.env.NODE_ENV === 'development') { - console.warn( - "[React Flow]: Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600" - ); - } + devWarn("Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600"); + return edges; } @@ -87,22 +84,16 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => { if (!newConnection.source || !newConnection.target) { - if (process.env.NODE_ENV === 'development') { - console.warn( - "[React Flow]: Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600" - ); - } + devWarn("Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600"); + return edges; } const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge; if (!foundEdge) { - if (process.env.NODE_ENV === 'development') { - console.warn( - `[React Flow]: The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/error#700` - ); - } + devWarn(`The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/error#700`); + return edges; } diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index 3ee46173..6456daaa 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -46,3 +46,9 @@ export const internalsSymbol = Symbol.for('internals'); // used for a11y key board controls for nodes and edges export const elementSelectionKeys = ['Enter', ' ', 'Escape']; + +export const devWarn = (message: string) => { + if (process.env.NODE_ENV === 'development') { + console.warn(`[React Flow]: ${message}`); + } +};