feat(react): ssr

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

@@ -98,6 +98,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
           height: node.height ?? 0,
           origin: node.origin || props.nodeOrigin,
         });
+        const initialized = (!!node.width && !!node.height) || (!!node.dimensions?.width && !!node.dimensions?.height);
 
         return (
           <NodeComponent
@@ -105,6 +106,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
             id={node.id}
             className={node.className}
             style={node.style}
+            dimensionWidth={node.dimensions?.width}
+            dimensionHeight={node.dimensions?.height}
             type={nodeType}
             data={node.data}
             sourcePosition={node.sourcePosition || Position.Bottom}
@@ -131,7 +134,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isParent={!!node[internalsSymbol]?.isParent}
             noDragClassName={props.noDragClassName}
             noPanClassName={props.noPanClassName}
-            initialized={!!node.width && !!node.height}
+            initialized={initialized}
             rfId={props.rfId}
             disableKeyboardA11y={props.disableKeyboardA11y}
             ariaLabel={node.ariaLabel}

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

@@ -4,7 +4,19 @@ import StoreContext from '../../contexts/RFStoreContext';
 import ReactFlowProvider from '../../components/ReactFlowProvider';
 import type { Node, Edge } from '../../types';
 
-function Wrapper({ children, nodes, edges }: { children: ReactNode; nodes?: Node[]; edges?: Edge[] }) {
+function Wrapper({
+  children,
+  nodes,
+  edges,
+  width,
+  height,
+}: {
+  children: ReactNode;
+  nodes?: Node[];
+  edges?: Edge[];
+  width?: number;
+  height?: number;
+}) {
   const isWrapped = useContext(StoreContext);
 
   if (isWrapped) {
@@ -14,7 +26,7 @@ function Wrapper({ children, nodes, edges }: { children: ReactNode; nodes?: Node
   }
 
   return (
-    <ReactFlowProvider nodes={nodes} edges={edges}>
+    <ReactFlowProvider nodes={nodes} edges={edges} width={width} height={height}>
       {children}
     </ReactFlowProvider>
   );

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

@@ -166,6 +166,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       nodeDragThreshold,
       viewport,
       onViewportChange,
+      width,
+      height,
       ...rest
     },
     ref
@@ -181,7 +183,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
         data-testid="rf__wrapper"
         id={id}
       >
-        <Wrapper nodes={nodes} edges={edges}>
+        <Wrapper nodes={nodes} edges={edges} width={width} height={height}>
           <GraphView
             onInit={onInit}
             onNodeClick={onNodeClick}