refactor(internals): make prop optional

example/src/UseReactFlow/index.tsx

@@ -33,7 +33,18 @@ const UseZoomPanHelperFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-  const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook, addEdges } = useReactFlow();
+  const {
+    project,
+    setCenter,
+    zoomIn,
+    zoomOut,
+    fitView,
+    addNodes,
+    setNodes: setNodesHook,
+    addEdges,
+    getNodes,
+    getEdges,
+  } = useReactFlow();
 
   const onPaneClick = useCallback(
     (evt: MouseEvent) => {
@@ -72,6 +83,11 @@ const UseZoomPanHelperFlow = () => {
     addNodes(newNode);
   }, [addNodes]);
 
+  const logNodes = useCallback(() => {
+    console.log('nodes', getNodes());
+    console.log('edges', getEdges());
+  }, [getNodes]);
+
   useEffect(() => {
     addEdges({ id: 'e3-4', source: '3', target: '4' });
   }, [addEdges]);
@@ -97,6 +113,7 @@ const UseZoomPanHelperFlow = () => {
         <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
         <button onClick={onAddNode}>add node</button>
         <button onClick={onResetNodes}>reset nodes</button>
+        <button onClick={logNodes}>useNodes</button>
       </div>
       <Background />
       <MiniMap />

src/components/ConnectionLine/index.tsx

@@ -38,7 +38,7 @@ export default ({
 
   const { nodeInternals, transform } = useStore(selector, shallow);
   const fromNode = useRef<Node | undefined>(nodeInternals.get(nodeId));
-  const fromHandleBounds = fromNode.current?.[internalsSymbol].handleBounds;
+  const fromHandleBounds = fromNode.current?.[internalsSymbol]?.handleBounds;
 
   if (!fromNode.current || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
     return null;

src/container/EdgeRenderer/utils.ts

@@ -168,7 +168,7 @@ export function isEdgeVisible({
 
 export function getNodeData(nodeInternals: NodeInternals, nodeId: string): [Rect, NodeHandleBounds | null, boolean] {
   const node = nodeInternals.get(nodeId);
-  const handleBounds = node?.[internalsSymbol].handleBounds || null;
+  const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
 
   const isInvalid =
     !node ||

src/container/NodeRenderer/index.tsx

@@ -118,8 +118,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isConnectable={isConnectable}
             resizeObserver={resizeObserver}
             dragHandle={node.dragHandle}
-            zIndex={node[internalsSymbol].z ?? 0}
-            isParent={!!node[internalsSymbol].isParent}
+            zIndex={node[internalsSymbol]?.z ?? 0}
+            isParent={!!node[internalsSymbol]?.isParent}
             noDragClassName={props.noDragClassName}
             noPanClassName={props.noPanClassName}
           />

src/hooks/useVisibleEdges.ts

@@ -18,8 +18,8 @@ function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, elevate
       z = hasZIndex
         ? edge.zIndex!
         : Math.max(
-            nodeInternals.get(edge.source)?.[internalsSymbol].z || 0,
-            nodeInternals.get(edge.target)?.[internalsSymbol].z || 0
+            nodeInternals.get(edge.source)?.[internalsSymbol]?.z || 0,
+            nodeInternals.get(edge.target)?.[internalsSymbol]?.z || 0
           );
     }
 

src/index.ts

@@ -32,7 +32,6 @@ export {
 } from './utils/graph';
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils';
-export { internalsSymbol } from './utils';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';

src/store/utils.ts

@@ -30,7 +30,7 @@ function calculateXYZPosition(
   return calculateXYZPosition(parentNode, nodeInternals, parentNodes, {
     x: (result.x ?? 0) + (parentNode.position?.x ?? 0),
     y: (result.y ?? 0) + (parentNode.position?.y ?? 0),
-    z: (parentNode[internalsSymbol].z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol].z ?? 0 : result.z ?? 0,
+    z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
   });
 }
 
@@ -60,7 +60,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
     Object.defineProperty(internals, internalsSymbol, {
       enumerable: false,
       value: {
-        handleBounds: currInternals?.[internalsSymbol].handleBounds,
+        handleBounds: currInternals?.[internalsSymbol]?.handleBounds,
         z,
       },
     });
@@ -76,7 +76,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
     if (node.parentNode || parentNodes[node.id]) {
       const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
         ...node.position,
-        z: node[internalsSymbol].z ?? 0,
+        z: node[internalsSymbol]?.z ?? 0,
       });
 
       node.positionAbsolute = {
@@ -84,10 +84,10 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
         y,
       };
 
-      node[internalsSymbol].z = z;
+      node[internalsSymbol]!.z = z;
 
       if (parentNodes[node.id]) {
-        node[internalsSymbol].isParent = true;
+        node[internalsSymbol]!.isParent = true;
       }
     }
   });

src/types/nodes.ts

@@ -29,7 +29,7 @@ export interface Node<T = any> {
   positionAbsolute?: XYPosition;
 
   // only used internally
-  [internalsSymbol]: {
+  [internalsSymbol]?: {
     z?: number;
     handleBounds?: NodeHandleBounds;
     isParent?: boolean;