[pull] main from xyflow:main

.changeset/allow-undefined-builtin-node-type.md

@@ -0,0 +1,6 @@
+---
+"@xyflow/react": patch
+"@xyflow/svelte": patch
+---
+
+Allow `type` field to be missing in `BuiltInNode` (no `type` field is the same as `type: "default"`)

.changeset/fix-store-reset-timing.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Fix empty store during ReactFlow remount by reordering StoreUpdater before GraphView and using layout effects

examples/react/cypress/components/reactflow/storeAvailabilityOnRemount.cy.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { ReactFlow, ReactFlowProvider, useStoreApi, type Node, type Edge, type NodeTypes, type NodeProps } from '@xyflow/react';
+
+import { edges as initialEdges } from '../../fixtures/simpleflow';
+
+type CheckResult = { nodesLength: number; lookupSize: number };
+
+// We use a global ref so the custom node can report without prop drilling.
+// Each test resets this before mounting.
+let checkSpy: ((result: CheckResult) => void) | null = null;
+
+/**
+ * Custom node rendered inside GraphView's subtree. Verifies that
+ * the store (nodes, nodeLookup, etc.) is populated by the time
+ * custom node effects fire after a <ReactFlow> key-based remount.
+ */
+function CheckerNode({ data }: NodeProps) {
+  const store = useStoreApi();
+  const useHook = data.useLayout ? useLayoutEffect : useEffect;
+
+  useHook(() => {
+    if (checkSpy) {
+      const { nodes, nodeLookup } = store.getState();
+      checkSpy({ nodesLength: nodes.length, lookupSize: nodeLookup.size });
+    }
+  });
+
+  return <div>{data.label as string}</div>;
+}
+
+const nodeTypes: NodeTypes = { checker: CheckerNode };
+
+const makeNodes = (useLayout = false): Node[] => [
+  { id: '1', type: 'checker', data: { label: 'Node 1', useLayout }, position: { x: 0, y: 0 } },
+  { id: '2', type: 'checker', data: { label: 'Node 2', useLayout }, position: { x: 200, y: 200 } },
+];
+
+describe('<ReactFlow /> remount: store availability', () => {
+  it('node useEffect sees populated store after <ReactFlow> key remount', () => {
+    const spy = cy.spy().as('spy');
+    checkSpy = spy;
+
+    const nodes = makeNodes(false);
+
+    cy.mount(
+      <ReactFlowProvider>
+        <RemountableFlow nodes={nodes} edges={initialEdges} />
+      </ReactFlowProvider>
+    );
+
+    cy.get('@spy').should('have.been.calledWithMatch', { lookupSize: 2 });
+    cy.then(() => spy.resetHistory());
+    cy.get('[data-testid="remount"]').click();
+    cy.get('@spy').should('have.been.called');
+    cy.get('@spy').should('always.have.been.calledWithMatch', { lookupSize: 2 });
+  });
+
+  it('node useLayoutEffect sees populated store after <ReactFlow> key remount', () => {
+    const spy = cy.spy().as('spy');
+    checkSpy = spy;
+
+    const nodes = makeNodes(true);
+
+    cy.mount(
+      <ReactFlowProvider>
+        <RemountableFlow nodes={nodes} edges={initialEdges} />
+      </ReactFlowProvider>
+    );
+
+    cy.get('@spy').should('have.been.calledWithMatch', { lookupSize: 2 });
+    cy.then(() => spy.resetHistory());
+    cy.get('[data-testid="remount"]').click();
+    cy.get('@spy').should('have.been.called');
+    cy.get('@spy').should('always.have.been.calledWithMatch', { lookupSize: 2 });
+  });
+
+  it('node useEffect sees populated store after <ReactFlow> key remount with defaultNodes', () => {
+    const spy = cy.spy().as('spy');
+    checkSpy = spy;
+
+    const nodes = makeNodes(false);
+
+    const DefaultFlow = () => {
+      const [remountKey, setRemountKey] = useState(0);
+
+      return (
+        <>
+          <button data-testid="remount" onClick={() => setRemountKey((k) => k + 1)}>
+            Remount
+          </button>
+          <ReactFlow key={remountKey} defaultNodes={nodes} defaultEdges={initialEdges} nodeTypes={nodeTypes}>
+            <div />
+          </ReactFlow>
+        </>
+      );
+    };
+
+    cy.mount(
+      <ReactFlowProvider>
+        <DefaultFlow />
+      </ReactFlowProvider>
+    );
+
+    cy.get('@spy').should('have.been.calledWithMatch', { lookupSize: 2 });
+    cy.then(() => spy.resetHistory());
+    cy.get('[data-testid="remount"]').click();
+    cy.get('@spy').should('have.been.called');
+    cy.get('@spy').should('always.have.been.calledWithMatch', { lookupSize: 2 });
+  });
+});
+
+const RemountableFlow = ({ nodes, edges }: { nodes: Node[]; edges: Edge[] }) => {
+  const [remountKey, setRemountKey] = useState(0);
+
+  const handleRemount = useCallback(() => {
+    setRemountKey((k) => k + 1);
+  }, []);
+
+  return (
+    <>
+      <button data-testid="remount" onClick={handleRemount}>
+        Remount
+      </button>
+      <ReactFlow key={remountKey} nodes={nodes} edges={edges} nodeTypes={nodeTypes}>
+        <div />
+      </ReactFlow>
+    </>
+  );
+};

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

@@ -3,10 +3,11 @@
  * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`)
  * and values that have a dedicated setter function in the store (like `setNodes`).
  */
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { shallow } from 'zustand/shallow';
 import { infiniteExtent, type CoordinateExtent, mergeAriaLabelConfig, AriaLabelConfig } from '@xyflow/system';
 
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import type { Node, Edge, ReactFlowState, ReactFlowProps, FitViewOptions } from '../../types';
 import { defaultNodeOrigin } from '../../container/ReactFlow/init-values';
@@ -125,7 +126,12 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
   } = useStore(selector, shallow);
   const store = useStoreApi<NodeType, EdgeType>();
 
-  useEffect(() => {
+  // We use layout effects here so that the store is always populated before
+  // any child useEffect or useLayoutEffect fires. With regular useEffect, the
+  // cleanup calls reset() which empties the store, and child effects can run
+  // before the new mount effect repopulates it — causing children to read
+  // empty nodeLookup/nodes/edges during a <ReactFlow> remount.
+  useIsomorphicLayoutEffect(() => {
     setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
 
     return () => {
@@ -137,7 +143,7 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
 
   const previousFields = useRef<Partial<StoreUpdaterProps<NodeType, EdgeType>>>(initPrevValues);
 
-  useEffect(
+  useIsomorphicLayoutEffect(
     () => {
       for (const fieldName of fieldsToTrack) {
         const fieldValue = props[fieldName];

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

@@ -189,6 +189,67 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
         nodeExtent={nodeExtent}
         zIndexMode={zIndexMode}
       >
+        <StoreUpdater<NodeType, EdgeType>
+          nodes={nodes}
+          edges={edges}
+          defaultNodes={defaultNodes}
+          defaultEdges={defaultEdges}
+          onConnect={onConnect}
+          onConnectStart={onConnectStart}
+          onConnectEnd={onConnectEnd}
+          onClickConnectStart={onClickConnectStart}
+          onClickConnectEnd={onClickConnectEnd}
+          nodesDraggable={nodesDraggable}
+          autoPanOnNodeFocus={autoPanOnNodeFocus}
+          nodesConnectable={nodesConnectable}
+          nodesFocusable={nodesFocusable}
+          edgesFocusable={edgesFocusable}
+          edgesReconnectable={edgesReconnectable}
+          elementsSelectable={elementsSelectable}
+          elevateNodesOnSelect={elevateNodesOnSelect}
+          elevateEdgesOnSelect={elevateEdgesOnSelect}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          nodeExtent={nodeExtent}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          snapToGrid={snapToGrid}
+          snapGrid={snapGrid}
+          connectionMode={connectionMode}
+          translateExtent={translateExtent}
+          connectOnClick={connectOnClick}
+          defaultEdgeOptions={defaultEdgeOptions}
+          fitView={fitView}
+          fitViewOptions={fitViewOptions}
+          onNodesDelete={onNodesDelete}
+          onEdgesDelete={onEdgesDelete}
+          onDelete={onDelete}
+          onNodeDragStart={onNodeDragStart}
+          onNodeDrag={onNodeDrag}
+          onNodeDragStop={onNodeDragStop}
+          onSelectionDrag={onSelectionDrag}
+          onSelectionDragStart={onSelectionDragStart}
+          onSelectionDragStop={onSelectionDragStop}
+          onMove={onMove}
+          onMoveStart={onMoveStart}
+          onMoveEnd={onMoveEnd}
+          noPanClassName={noPanClassName}
+          nodeOrigin={nodeOrigin}
+          rfId={rfId}
+          autoPanOnConnect={autoPanOnConnect}
+          autoPanOnNodeDrag={autoPanOnNodeDrag}
+          autoPanSpeed={autoPanSpeed}
+          onError={onError}
+          connectionRadius={connectionRadius}
+          isValidConnection={isValidConnection}
+          selectNodesOnDrag={selectNodesOnDrag}
+          nodeDragThreshold={nodeDragThreshold}
+          connectionDragThreshold={connectionDragThreshold}
+          onBeforeDelete={onBeforeDelete}
+          debug={debug}
+          ariaLabelConfig={ariaLabelConfig}
+          zIndexMode={zIndexMode}
+        />
         <GraphView<NodeType, EdgeType>
           onInit={onInit}
           onNodeClick={onNodeClick}
@@ -254,67 +315,6 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           viewport={viewport}
           onViewportChange={onViewportChange}
         />
-        <StoreUpdater<NodeType, EdgeType>
-          nodes={nodes}
-          edges={edges}
-          defaultNodes={defaultNodes}
-          defaultEdges={defaultEdges}
-          onConnect={onConnect}
-          onConnectStart={onConnectStart}
-          onConnectEnd={onConnectEnd}
-          onClickConnectStart={onClickConnectStart}
-          onClickConnectEnd={onClickConnectEnd}
-          nodesDraggable={nodesDraggable}
-          autoPanOnNodeFocus={autoPanOnNodeFocus}
-          nodesConnectable={nodesConnectable}
-          nodesFocusable={nodesFocusable}
-          edgesFocusable={edgesFocusable}
-          edgesReconnectable={edgesReconnectable}
-          elementsSelectable={elementsSelectable}
-          elevateNodesOnSelect={elevateNodesOnSelect}
-          elevateEdgesOnSelect={elevateEdgesOnSelect}
-          minZoom={minZoom}
-          maxZoom={maxZoom}
-          nodeExtent={nodeExtent}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          snapToGrid={snapToGrid}
-          snapGrid={snapGrid}
-          connectionMode={connectionMode}
-          translateExtent={translateExtent}
-          connectOnClick={connectOnClick}
-          defaultEdgeOptions={defaultEdgeOptions}
-          fitView={fitView}
-          fitViewOptions={fitViewOptions}
-          onNodesDelete={onNodesDelete}
-          onEdgesDelete={onEdgesDelete}
-          onDelete={onDelete}
-          onNodeDragStart={onNodeDragStart}
-          onNodeDrag={onNodeDrag}
-          onNodeDragStop={onNodeDragStop}
-          onSelectionDrag={onSelectionDrag}
-          onSelectionDragStart={onSelectionDragStart}
-          onSelectionDragStop={onSelectionDragStop}
-          onMove={onMove}
-          onMoveStart={onMoveStart}
-          onMoveEnd={onMoveEnd}
-          noPanClassName={noPanClassName}
-          nodeOrigin={nodeOrigin}
-          rfId={rfId}
-          autoPanOnConnect={autoPanOnConnect}
-          autoPanOnNodeDrag={autoPanOnNodeDrag}
-          autoPanSpeed={autoPanSpeed}
-          onError={onError}
-          connectionRadius={connectionRadius}
-          isValidConnection={isValidConnection}
-          selectNodesOnDrag={selectNodesOnDrag}
-          nodeDragThreshold={nodeDragThreshold}
-          connectionDragThreshold={connectionDragThreshold}
-          onBeforeDelete={onBeforeDelete}
-          debug={debug}
-          ariaLabelConfig={ariaLabelConfig}
-          zIndexMode={zIndexMode}
-        />
         <SelectionListener<NodeType, EdgeType> onSelectionChange={onSelectionChange} />
         {children}
         <Attribution proOptions={proOptions} position={attributionPosition} />

packages/react/src/types/nodes.ts

@@ -93,7 +93,7 @@ export type NodeWrapperProps<NodeType extends Node> = {
  * ```
  */
 export type BuiltInNode =
-  | Node<{ label: string }, 'input' | 'output' | 'default'>
+  | Node<{ label: string }, 'input' | 'output' | 'default' | undefined>
   | Node<Record<string, never>, 'group'>;
 
 /**

packages/svelte/src/lib/types/nodes.ts

@@ -63,5 +63,5 @@ export type NodeTypes = Record<
 >;
 
 export type BuiltInNode =
-  | Node<{ label: string }, 'input' | 'output' | 'default'>
+  | Node<{ label: string }, 'input' | 'output' | 'default' | undefined>
   | Node<Record<string, never>, 'group'>;