chore(zustand): upgrade to v4

packages/core/src/components/ConnectionLine/index.tsx

@@ -1,10 +1,10 @@
 import React, { CSSProperties, useCallback } from 'react';
 import shallow from 'zustand/shallow';
 
-import { useStore } from '../../store';
+import { useStore } from '../../hooks/useStore';
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
-import { ConnectionLineType, ConnectionLineComponent, HandleType, Position } from '../../types';
+import { ConnectionLineType, ConnectionLineComponent, HandleType, Position, ReactFlowStore } from '../../types';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
 
@@ -34,7 +34,7 @@ export default ({
 }: ConnectionLineProps) => {
   const { fromNode, handleId, toX, toY } = useStore(
     useCallback(
-      (s) => ({
+      (s: ReactFlowStore) => ({
         fromNode: s.nodeInternals.get(connectionNodeId),
         handleId: s.connectionHandleId,
         toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],

packages/core/src/components/Edges/wrapEdge.tsx

@@ -1,7 +1,7 @@
 import React, { memo, ComponentType, useState, useMemo, KeyboardEvent, useRef } from 'react';
 import cc from 'classcat';
 
-import { useStoreApi } from '../../store';
+import { useStoreApi } from '../../hooks/useStore';
 import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
 import { handleMouseDown } from '../Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';

packages/core/src/components/Handle/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, useContext, HTMLAttributes, forwardRef } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
-import { useStore, useStoreApi } from '../../store';
+import { useStore, useStoreApi } from '../../hooks/useStore';
 import NodeIdContext from '../../contexts/NodeIdContext';
 import { HandleProps, Connection, ReactFlowState, Position } from '../../types';
 import { checkElementBelowIsValid, handleMouseDown } from './handler';

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, memo, ComponentType, MouseEvent, KeyboardEvent } from 'react';
 import cc from 'classcat';
 
-import { useStoreApi } from '../../store';
+import { useStoreApi } from '../../hooks/useStore';
 import { Provider } from '../../contexts/NodeIdContext';
 import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
 import useDrag from '../../hooks/useDrag';

packages/core/src/components/NodesSelection/index.tsx

@@ -7,7 +7,7 @@ import React, { memo, useRef, MouseEvent, KeyboardEvent, useEffect } from 'react
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
-import { useStore, useStoreApi } from '../../store';
+import { useStore, useStoreApi } from '../../hooks/useStore';
 import { Node, ReactFlowState } from '../../types';
 import { getRectOfNodes } from '../../utils/graph';
 import useDrag from '../../hooks/useDrag';

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

@@ -1,10 +1,19 @@
-import React, { FC, PropsWithChildren } from 'react';
+import React, { FC, PropsWithChildren, useRef } from 'react';
+import { StoreApi } from 'zustand';
 
-import { Provider, createStore } from '../../store';
+import { Provider } from '../../contexts/RFStoreContext';
+import { createRFStore } from '../../store';
+import { ReactFlowState } from '../../types';
 
-const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => (
-  <Provider createStore={createStore}>{children}</Provider>
-);
+const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const storeRef = useRef<StoreApi<ReactFlowState> | null>(null);
+
+  if (!storeRef.current) {
+    storeRef.current = createRFStore();
+  }
+
+  return <Provider value={storeRef.current}>{children}</Provider>;
+};
 
 ReactFlowProvider.displayName = 'ReactFlowProvider';
 

packages/core/src/components/SelectionListener/index.tsx

@@ -2,7 +2,7 @@ import { memo, useEffect } from 'react';
 import shallow from 'zustand/shallow';
 
 import { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types';
-import { useStore } from '../../store';
+import { useStore } from '../../hooks/useStore';
 
 interface SelectionListenerProps {
   onSelectionChange: OnSelectionChangeFunc;

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

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
-import { SetState } from 'zustand';
+import { StoreApi } from 'zustand';
 import shallow from 'zustand/shallow';
 
-import { useStore, useStoreApi } from '../../store';
+import { useStore, useStoreApi } from '../../hooks/useStore';
 import { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps } from '../../types';
 
 type StoreUpdaterProps = Pick<
@@ -61,7 +61,7 @@ function useStoreUpdater<T>(value: T | undefined, setStoreState: (param: T) => v
   }, [value]);
 }
 
-function useDirectStoreUpdater(key: keyof ReactFlowState, value: any, setState: SetState<ReactFlowState>) {
+function useDirectStoreUpdater(key: keyof ReactFlowState, value: any, setState: StoreApi<ReactFlowState>['setState']) {
   useEffect(() => {
     if (typeof value !== 'undefined') {
       // @ts-ignore

packages/core/src/components/UserSelection/index.tsx

@@ -5,7 +5,7 @@
 import React, { memo, useState, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
-import { useStore, useStoreApi } from '../../store';
+import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils/changes';
 import { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types';
 import { getConnectedEdges, getNodesInside } from '../../utils/graph';