refactor(packages): add @reactflow/system

packages/core/src/components/ConnectionLine/index.tsx

@@ -1,12 +1,12 @@
 import { CSSProperties, useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
+import { internalsSymbol } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
-import { internalsSymbol } from '../../utils';
 import type {
   ConnectionLineComponent,
   ConnectionStatus,

packages/core/src/components/Handle/utils.ts

@@ -1,7 +1,8 @@
 import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
+import { internalsSymbol } from '@reactflow/system';
 
 import { ConnectionMode, ConnectionStatus } from '../../types';
-import { getEventPosition, internalsSymbol } from '../../utils';
+import { getEventPosition } from '../../utils';
 import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 
 export type ConnectionHandle = {

packages/core/src/container/EdgeRenderer/utils.ts

@@ -1,8 +1,9 @@
 import type { ComponentType } from 'react';
+import { internalsSymbol } from '@reactflow/system';
 
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
-import { internalsSymbol, rectToBox } from '../../utils';
+import { rectToBox } from '../../utils';
 import { Position } from '../../types';
 import type {
   EdgeProps,

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

@@ -1,10 +1,11 @@
 import { memo, useMemo, useEffect, useRef } from 'react';
 import type { ComponentType } from 'react';
 import { shallow } from 'zustand/shallow';
+import { internalsSymbol } from '@reactflow/system';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
-import { clampPosition, internalsSymbol } from '../../utils';
+import { clampPosition } from '../../utils';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
 import { getPositionWithOrigin } from './utils';

packages/core/src/hooks/useNodesInitialized.ts

@@ -1,4 +1,5 @@
-import { internalsSymbol } from '../utils';
+import { internalsSymbol } from '@reactflow/system';
+
 import { useStore } from './useStore';
 import type { ReactFlowState } from '../types';
 

packages/core/src/hooks/useVisibleEdges.ts

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
+import { internalsSymbol } from '@reactflow/system';
 
 import { useStore } from '../hooks/useStore';
 import { isEdgeVisible } from '../container/EdgeRenderer/utils';
-import { internalsSymbol, isNumeric } from '../utils';
+import { isNumeric } from '../utils';
 import type { ReactFlowState, NodeInternals, Edge } from '../types';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];

packages/core/src/index.ts

@@ -8,7 +8,7 @@ export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/E
 export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge';
 export { default as BaseEdge } from './components/Edges/BaseEdge';
 
-export { internalsSymbol, rectToBox, boxToRect, getBoundsOfRects } from './utils';
+export { rectToBox, boxToRect, getBoundsOfRects } from './utils';
 export {
   isNode,
   isEdge,
@@ -40,5 +40,6 @@ export { default as useOnSelectionChange } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized } from './hooks/useNodesInitialized';
 export { default as useGetPointerPosition } from './hooks/useGetPointerPosition';
 export { useNodeId } from './contexts/NodeIdContext';
+export * from '@reactflow/system';
 
-export * from './types';
+// export * from './types';

packages/core/src/store/index.ts

@@ -1,7 +1,8 @@
 import { createStore } from 'zustand';
 import { zoomIdentity } from 'd3-zoom';
+import { internalsSymbol } from '@reactflow/system';
 
-import { clampPosition, getDimensions, internalsSymbol } from '../utils';
+import { clampPosition, getDimensions } from '../utils';
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import { getHandleBounds } from '../components/Nodes/utils';
 import { createNodeInternals, fitView, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils';

packages/core/src/store/utils.ts

@@ -1,7 +1,8 @@
 import { zoomIdentity } from 'd3-zoom';
 import type { StoreApi } from 'zustand';
+import { internalsSymbol } from '@reactflow/system';
 
-import { internalsSymbol, isNumeric } from '../utils';
+import { isNumeric } from '../utils';
 import { getD3Transition, getRectOfNodes, getTransformForBounds, getNodePositionWithOrigin } from '../utils/graph';
 import type {
   Edge,

packages/core/src/types/nodes.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+import { internalsSymbol } from '@reactflow/system';
 
-import { internalsSymbol } from '../utils';
 import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 
 // interface for the user node items

packages/core/src/utils/index.ts

@@ -84,8 +84,6 @@ export const isRectObject = (obj: any): obj is Rect =>
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);
 
-export const internalsSymbol = Symbol.for('internals');
-
 // used for a11y key board controls for nodes and edges
 export const elementSelectionKeys = ['Enter', ' ', 'Escape'];