feat(react): add basic ssr support

packages/react/src/components/Nodes/wrapNode.tsx

@@ -181,7 +181,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           zIndex,
           transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
           pointerEvents: hasPointerEvents ? 'all' : 'none',
-          visibility: initialized ? 'visible' : 'hidden',
+          visibility: initialized ? 'visible' : 'visible',
           ...style,
         }}
         data-id={id}

packages/react/src/components/ReactFlowProvider/index.tsx

@@ -1,20 +1,20 @@
-import { useRef, type FC, type PropsWithChildren } from 'react';
+import { useRef, type ReactNode } from 'react';
 import { type StoreApi } from 'zustand';
 import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
 
 import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
-import type { ReactFlowState } from '../../types';
+import type { ReactFlowState, Node, Edge } from '../../types';
 
-const ReactFlowProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
+function ReactFlowProvider({ children, nodes, edges }: { children: ReactNode; nodes?: Node[]; edges?: Edge[] }) {
   const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);
 
   if (!storeRef.current) {
-    storeRef.current = createRFStore();
+    storeRef.current = createRFStore({ nodes, edges });
   }
 
   return <Provider value={storeRef.current}>{children}</Provider>;
-};
+}
 
 ReactFlowProvider.displayName = 'ReactFlowProvider';
 

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

@@ -62,23 +62,13 @@ const EdgeRenderer = ({
   onEdgeUpdateEnd,
   children,
 }: EdgeRendererProps) => {
-  const { width, height, edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
+  const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
   const edgeTree = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);
 
-  if (!width) {
-    return null;
-  }
-
   return (
     <>
       {edgeTree.map(({ level, edges, isMaxLevel }) => (
-        <svg
-          key={level}
-          style={{ zIndex: level }}
-          width={width}
-          height={height}
-          className="react-flow__edges react-flow__container"
-        >
+        <svg key={level} style={{ zIndex: level }} className="react-flow__edges react-flow__container">
           {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />}
           <g>
             {edges.map((edge) => {

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

@@ -1,9 +1,10 @@
-import { useContext, type FC, type PropsWithChildren } from 'react';
+import { useContext, type ReactNode } from 'react';
 
 import StoreContext from '../../contexts/RFStoreContext';
 import ReactFlowProvider from '../../components/ReactFlowProvider';
+import type { Node, Edge } from '../../types';
 
-const Wrapper: FC<PropsWithChildren<unknown>> = ({ children }) => {
+function Wrapper({ children, nodes, edges }: { children: ReactNode; nodes?: Node[]; edges?: Edge[] }) {
   const isWrapped = useContext(StoreContext);
 
   if (isWrapped) {
@@ -12,8 +13,12 @@ const Wrapper: FC<PropsWithChildren<unknown>> = ({ children }) => {
     return <>{children}</>;
   }
 
-  return <ReactFlowProvider>{children}</ReactFlowProvider>;
-};
+  return (
+    <ReactFlowProvider nodes={nodes} edges={edges}>
+      {children}
+    </ReactFlowProvider>
+  );
+}
 
 Wrapper.displayName = 'ReactFlowWrapper';
 

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

@@ -181,7 +181,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
         data-testid="rf__wrapper"
         id={id}
       >
-        <Wrapper>
+        <Wrapper nodes={nodes} edges={edges}>
           <GraphView
             onInit={onInit}
             onNodeClick={onNodeClick}

packages/react/src/store/index.ts

@@ -11,7 +11,7 @@ import {
 
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import { updateNodesAndEdgesSelections } from './utils';
-import initialState from './initialState';
+import getInitialState from './initialState';
 import type {
   ReactFlowState,
   Node,
@@ -24,10 +24,10 @@ import type {
   FitViewOptions,
 } from '../types';
 
-const createRFStore = () =>
+const createRFStore = ({ nodes, edges }: { nodes?: Node[]; edges?: Edge[] }) =>
   createWithEqualityFn<ReactFlowState>(
     (set, get) => ({
-      ...initialState,
+      ...getInitialState({ nodes, edges }),
       setNodes: (nodes: Node[]) => {
         const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
         const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect });
@@ -263,9 +263,9 @@ const createRFStore = () =>
       },
       cancelConnection: () =>
         set({
-          connectionStatus: initialState.connectionStatus,
-          connectionStartHandle: initialState.connectionStartHandle,
-          connectionEndHandle: initialState.connectionEndHandle,
+          connectionStatus: null,
+          connectionStartHandle: null,
+          connectionEndHandle: null,
         }),
       updateConnection: (params) => {
         const { connectionStatus, connectionStartHandle, connectionEndHandle, connectionPosition } = get();
@@ -279,7 +279,7 @@ const createRFStore = () =>
 
         set(currentConnection);
       },
-      reset: () => set({ ...initialState }),
+      reset: () => set({ ...getInitialState({ nodes: [] }) }),
     }),
     Object.is
   );

packages/react/src/store/initialState.ts

@@ -1,65 +1,69 @@
-import { devWarn, infiniteExtent, ConnectionMode } from '@xyflow/system';
+import { devWarn, infiniteExtent, ConnectionMode, updateNodes } from '@xyflow/system';
 
-import type { ReactFlowStore } from '../types';
+import type { Edge, Node, ReactFlowStore } from '../types';
 
-const initialState: ReactFlowStore = {
-  rfId: '1',
-  width: 0,
-  height: 0,
-  transform: [0, 0, 1],
-  nodes: [],
-  edges: [],
-  onNodesChange: null,
-  onEdgesChange: null,
-  hasDefaultNodes: false,
-  hasDefaultEdges: false,
-  panZoom: null,
-  minZoom: 0.5,
-  maxZoom: 2,
-  translateExtent: infiniteExtent,
-  nodeExtent: infiniteExtent,
-  nodesSelectionActive: false,
-  userSelectionActive: false,
-  userSelectionRect: null,
-  connectionPosition: { x: 0, y: 0 },
-  connectionStatus: null,
-  connectionMode: ConnectionMode.Strict,
-  domNode: null,
-  paneDragging: false,
-  noPanClassName: 'nopan',
-  nodeOrigin: [0, 0],
-  nodeDragThreshold: 0,
+const getInitialState = ({ nodes = [], edges = [] }: { nodes?: Node[]; edges?: Edge[] }): ReactFlowStore => {
+  const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
-  snapGrid: [15, 15],
-  snapToGrid: false,
+  return {
+    rfId: '1',
+    width: 0,
+    height: 0,
+    transform: [0, 0, 1],
+    nodes: nextNodes,
+    edges: edges,
+    onNodesChange: null,
+    onEdgesChange: null,
+    hasDefaultNodes: false,
+    hasDefaultEdges: false,
+    panZoom: null,
+    minZoom: 0.5,
+    maxZoom: 2,
+    translateExtent: infiniteExtent,
+    nodeExtent: infiniteExtent,
+    nodesSelectionActive: false,
+    userSelectionActive: false,
+    userSelectionRect: null,
+    connectionPosition: { x: 0, y: 0 },
+    connectionStatus: null,
+    connectionMode: ConnectionMode.Strict,
+    domNode: null,
+    paneDragging: false,
+    noPanClassName: 'nopan',
+    nodeOrigin: [0, 0],
+    nodeDragThreshold: 0,
 
-  nodesDraggable: true,
-  nodesConnectable: true,
-  nodesFocusable: true,
-  edgesFocusable: true,
-  edgesUpdatable: true,
-  elementsSelectable: true,
-  elevateNodesOnSelect: true,
-  fitViewOnInit: false,
-  fitViewDone: false,
-  fitViewOnInitOptions: undefined,
-  selectNodesOnDrag: true,
+    snapGrid: [15, 15],
+    snapToGrid: false,
 
-  multiSelectionActive: false,
+    nodesDraggable: true,
+    nodesConnectable: true,
+    nodesFocusable: true,
+    edgesFocusable: true,
+    edgesUpdatable: true,
+    elementsSelectable: true,
+    elevateNodesOnSelect: true,
+    fitViewOnInit: false,
+    fitViewDone: false,
+    fitViewOnInitOptions: undefined,
+    selectNodesOnDrag: true,
 
-  connectionStartHandle: null,
-  connectionEndHandle: null,
-  connectionClickStartHandle: null,
-  connectOnClick: true,
+    multiSelectionActive: false,
 
-  ariaLiveMessage: '',
-  autoPanOnConnect: true,
-  autoPanOnNodeDrag: true,
-  connectionRadius: 20,
-  onError: devWarn,
-  isValidConnection: undefined,
+    connectionStartHandle: null,
+    connectionEndHandle: null,
+    connectionClickStartHandle: null,
+    connectOnClick: true,
 
-  lib: 'react',
+    ariaLiveMessage: '',
+    autoPanOnConnect: true,
+    autoPanOnNodeDrag: true,
+    connectionRadius: 20,
+    onError: devWarn,
+    isValidConnection: undefined,
+
+    lib: 'react',
+  };
 };
 
-export default initialState;
+export default getInitialState;