refactor(react): use array for nodeInternals, rename to nodes

examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx

@@ -4,8 +4,8 @@ import { useStore, getStraightPath, EdgeProps } from '@xyflow/react';
 import { getEdgeParams } from './utils.js';
 
 function FloatingEdge({ id, source, target, markerEnd, style }: EdgeProps) {
-  const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(source), [source]));
-  const targetNode = useStore(useCallback((store) => store.nodeInternals.get(target), [target]));
+  const sourceNode = useStore(useCallback((store) => store.nodes.find((n) => n.id === source), [source]));
+  const targetNode = useStore(useCallback((store) => store.nodes.find((n) => n.id === target), [target]));
 
   if (!sourceNode || !targetNode) {
     return null;

examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx

@@ -14,7 +14,7 @@ const CustomEdge: FC<EdgeProps> = ({
   data,
 }) => {
   const isConnectedNodeDragging = useStore((s) =>
-    s.getNodes().find((n) => n.dragging && (target === n.id || source === n.id))
+    s.nodes.find((n) => n.dragging && (target === n.id || source === n.id))
   );
 
   const [edgePath, labelX, labelY] = getBezierPath({

examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx

@@ -14,7 +14,7 @@ const CustomEdge: FC<EdgeProps> = ({
   data,
 }) => {
   const isConnectedNodeDragging = useStore((s) =>
-    s.getNodes().find((n) => n.dragging && (target === n.id || source === n.id))
+    s.nodes.find((n) => n.dragging && (target === n.id || source === n.id))
   );
 
   const [edgePath, labelX, labelY] = getBezierPath({

examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx

@@ -1,15 +1,15 @@
-import { FC, useMemo, CSSProperties } from 'react';
-import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@xyflow/react';
+import { FC, CSSProperties } from 'react';
+import { EdgeProps, useStore, getBezierPath } from '@xyflow/react';
 
 import { getEdgeParams } from './utils';
 
-const nodeSelector = (s: ReactFlowState) => s.nodeInternals;
-
 const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
-  const nodeInternals = useStore(nodeSelector);
+  const { sourceNode, targetNode } = useStore((s) => {
+    const sourceNode = s.nodes.find((n) => n.id === source);
+    const targetNode = s.nodes.find((n) => n.id === target);
 
-  const sourceNode = useMemo(() => nodeInternals.get(source), [source, nodeInternals]);
-  const targetNode = useMemo(() => nodeInternals.get(target), [target, nodeInternals]);
+    return { sourceNode, targetNode };
+  });
 
   if (!sourceNode || !targetNode) {
     return null;

examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx

@@ -1,10 +1,7 @@
 import { NodeToolbar, ReactFlowState, useStore } from '@xyflow/react';
 
 const selectedNodesSelector = (state: ReactFlowState) =>
-  state
-    .getNodes()
-    .filter((node) => node.selected)
-    .map((node) => node.id);
+  state.nodes.filter((node) => node.selected).map((node) => node.id);
 
 export default function SelectedNodesToolbar() {
   const selectedNodeIds = useStore(selectedNodesSelector);

examples/vite-app/src/examples/Provider/Sidebar.tsx

@@ -5,7 +5,7 @@ import styles from './provider.module.css';
 const Sidebar = () => {
   const { setNodes } = useReactFlow();
   const nodeInfos = useStore((store) =>
-    store.getNodes().map((n) => `Node ${n.id} - x: ${n.position.x.toFixed(2)}, y: ${n.position.y.toFixed(2)}`)
+    store.nodes.map((n) => `Node ${n.id} - x: ${n.position.x.toFixed(2)}, y: ${n.position.y.toFixed(2)}`)
   );
   const transform = useStore((store) => store.transform);