feat(react): add basic ssr support

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;