diff --git a/packages/react/src/components/ReactFlowProvider/index.tsx b/packages/react/src/components/ReactFlowProvider/index.tsx index 3d2577e7..33d3d4c4 100644 --- a/packages/react/src/components/ReactFlowProvider/index.tsx +++ b/packages/react/src/components/ReactFlowProvider/index.tsx @@ -1,22 +1,10 @@ -import { useRef, type ReactNode } from 'react'; -import { type StoreApi } from 'zustand'; -import { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; +import { useState, type ReactNode } from 'react'; -import { Provider } from '../../contexts/RFStoreContext'; -import { createRFStore } from '../../store'; -import type { ReactFlowState, Node, Edge } from '../../types'; +import { Provider } from '../../contexts/StoreContext'; +import { createStore } from '../../store'; +import type { Node, Edge } from '../../types'; -export function ReactFlowProvider({ - children, - initialNodes, - initialEdges, - defaultNodes, - defaultEdges, - initialWidth, - initialHeight, - fitView, -}: { - children: ReactNode; +export type ReactFlowProviderProps = { initialNodes?: Node[]; initialEdges?: Edge[]; defaultNodes?: Node[]; @@ -24,19 +12,30 @@ export function ReactFlowProvider({ initialWidth?: number; initialHeight?: number; fitView?: boolean; -}) { - const storeRef = useRef> | null>(null); - if (!storeRef.current) { - storeRef.current = createRFStore({ - nodes: initialNodes, - edges: initialEdges, + children: ReactNode; +}; + +export function ReactFlowProvider({ + initialNodes: nodes, + initialEdges: edges, + defaultNodes, + defaultEdges, + initialWidth: width, + initialHeight: height, + fitView, + children, +}: ReactFlowProviderProps) { + const [store] = useState(() => + createStore({ + nodes, + edges, defaultNodes, defaultEdges, - width: initialWidth, - height: initialHeight, + width, + height, fitView, - }); - } + }) + ); - return {children}; + return {children}; } diff --git a/packages/react/src/container/ReactFlow/Wrapper.tsx b/packages/react/src/container/ReactFlow/Wrapper.tsx index b82ca249..af9ad4a4 100644 --- a/packages/react/src/container/ReactFlow/Wrapper.tsx +++ b/packages/react/src/container/ReactFlow/Wrapper.tsx @@ -1,6 +1,6 @@ import { useContext, type ReactNode } from 'react'; -import StoreContext from '../../contexts/RFStoreContext'; +import StoreContext from '../../contexts/StoreContext'; import { ReactFlowProvider } from '../../components/ReactFlowProvider'; import type { Node, Edge } from '../../types'; diff --git a/packages/react/src/contexts/RFStoreContext.ts b/packages/react/src/contexts/RFStoreContext.ts deleted file mode 100644 index 7f0d8be8..00000000 --- a/packages/react/src/contexts/RFStoreContext.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createContext } from 'react'; - -import { createRFStore } from '../store'; - -const StoreContext = createContext | null>(null); - -export const Provider = StoreContext.Provider; -export default StoreContext; diff --git a/packages/react/src/contexts/StoreContext.ts b/packages/react/src/contexts/StoreContext.ts new file mode 100644 index 00000000..316ef16c --- /dev/null +++ b/packages/react/src/contexts/StoreContext.ts @@ -0,0 +1,8 @@ +import { createContext } from 'react'; + +import { createStore } from '../store'; + +const StoreContext = createContext | null>(null); + +export const Provider = StoreContext.Provider; +export default StoreContext; diff --git a/packages/react/src/hooks/useStore.ts b/packages/react/src/hooks/useStore.ts index 8a600706..88c1abad 100644 --- a/packages/react/src/hooks/useStore.ts +++ b/packages/react/src/hooks/useStore.ts @@ -1,10 +1,10 @@ import { useContext, useMemo } from 'react'; import { UseBoundStoreWithEqualityFn, useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional'; +import { StoreApi } from 'zustand'; import { errorMessages } from '@xyflow/system'; -import StoreContext from '../contexts/RFStoreContext'; +import StoreContext from '../contexts/StoreContext'; import type { Edge, Node, ReactFlowState } from '../types'; -import { StoreApi } from 'zustand'; const zustandErrorMessage = errorMessages['error001'](); @@ -47,7 +47,6 @@ function useStoreApi getState: store.getState, setState: store.setState, subscribe: store.subscribe, - destroy: store.destroy, }), [store] ); diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 48010a2e..5d7f521b 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -18,7 +18,7 @@ import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelection import getInitialState from './initialState'; import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types'; -const createRFStore = ({ +const createStore = ({ nodes, edges, defaultNodes, @@ -329,4 +329,4 @@ const createRFStore = ({ Object.is ); -export { createRFStore }; +export { createStore };