refactor(react): use size instead of dimensions, cleanup defaul node handling

packages/react/src/container/ReactFlow/Wrapper.tsx

@@ -26,7 +26,7 @@ function Wrapper({
   }
 
   return (
-    <ReactFlowProvider nodes={nodes} edges={edges} width={width} height={height}>
+    <ReactFlowProvider initialNodes={nodes} initialEdges={edges} initialWidth={width} initialHeight={height}>
       {children}
     </ReactFlowProvider>
   );

packages/react/src/container/ReactFlow/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import {

packages/react/src/store/index.ts

@@ -55,15 +55,27 @@ const createRFStore = ({
         const hasDefaultNodes = typeof nodes !== 'undefined';
         const hasDefaultEdges = typeof edges !== 'undefined';
 
-        const nextNodes = hasDefaultNodes
+        const nextState: {
-          ? updateNodes(nodes, [], {
+          nodes?: Node[];
-              nodeOrigin: get().nodeOrigin,
+          edges?: Edge[];
-              elevateNodesOnSelect: get().elevateNodesOnSelect,
+          hasDefaultNodes: boolean;
-            })
+          hasDefaultEdges: boolean;
-          : [];
+        } = {
-        const nextEdges = hasDefaultEdges ? edges : [];
+          hasDefaultNodes,
+          hasDefaultEdges,
+        };
 
-        set({ nodes: nextNodes, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
+        if (hasDefaultNodes) {
+          nextState.nodes = updateNodes(nodes, [], {
+            nodeOrigin: get().nodeOrigin,
+            elevateNodesOnSelect: get().elevateNodesOnSelect,
+          });
+        }
+        if (hasDefaultEdges) {
+          nextState.edges = edges;
+        }
+
+        set(nextState);
       },
       updateNodeDimensions: (updates) => {
         const { onNodesChange, fitView, nodes, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin } =
@@ -289,7 +301,13 @@ const createRFStore = ({
 
         set(currentConnection);
       },
-      reset: () => set({ ...getInitialState({ nodes: [] }) }),
+      reset: () => {
+        // @todo: what should we do about this? Do we still need it?
+        // if you are on a SPA with multiple flows, we want to make sure that the store gets resetted
+        // when you switch pages. Does this reset solves this? Currently it always gets called. This
+        // leads to an emtpy nodes array at the beginning.
+        // set({ ...getInitialState() });
+      },
     }),
     Object.is
   );

packages/react/src/store/initialState.ts

@@ -20,7 +20,7 @@ const getInitialState = ({
   edges?: Edge[];
   width?: number;
   height?: number;
-}): ReactFlowStore => {
+} = {}): ReactFlowStore => {
   const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
   let transform: Transform = [0, 0, 1];
@@ -28,8 +28,8 @@ const getInitialState = ({
   if (width && height) {
     const nodesWithDimensions = nextNodes.map((node) => ({
       ...node,
-      width: node.dimensions?.width,
+      width: node.size?.width,
-      height: node.dimensions?.height,
+      height: node.size?.height,
     }));
     const bounds = getRectOfNodes(nodesWithDimensions, [0, 0]);
     transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);

packages/react/src/types/general.ts

@@ -42,7 +42,10 @@ export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
 export type FitViewParams = FitViewParamsBase<Node>;
 export type FitViewOptions = FitViewOptionsBase<Node>;
 export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
-export type OnInit<NodeData = any, EdgeData = any> = (reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>) => void;
+export type OnInit<NodeData = any, EdgeData = any> = (
+  reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>,
+  { nodes, edges }: { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }
+) => void;
 
 export type ViewportHelperFunctions = {
   zoomIn: ZoomInOut;

tooling/rollup-config/src/index.js

@@ -30,6 +30,7 @@ export const esmConfig = defineConfig({
   output: {
     file: pkg.module,
     format: 'esm',
+    banner: '"use client"',
   },
   onwarn,
   plugins: [