Update to latest react flow and zustand packages

package.json

@@ -12,14 +12,14 @@
     "nanoid": "^4.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "reactflow": "^11.6.1",
+    "@xyflow/react": "^12.9.0",
     "twind": "^0.16.19",
-    "zustand": "^4.3.6"
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
     "vite": "^4.2.0"
   }
-}
+}

src/App.jsx

@@ -1,61 +1,69 @@
-import React from "react";
-import ReactFlow, {
-  ReactFlowProvider,
+import  {
+  ReactFlow,
   Background,
-  Panel,
-  useReactFlow,
-} from "reactflow";
-import { shallow } from "zustand/shallow";
-import { useStore } from "./store";
+  Panel
+} from "@xyflow/react";
+import React, { useCallback } from "react";
 import { tw } from "twind";
-import Osc from "./nodes/Osc";
+import { useShallow } from "zustand/react/shallow";
 import Amp from "./nodes/Amp";
+import Osc from "./nodes/Osc";
 import Out from "./nodes/Out";
+import { useStore } from "./store";
 
-import "reactflow/dist/style.css";
+import "@xyflow/react/dist/style.css";
 
 const nodeTypes = {
   osc: Osc,
   amp: Amp,
   out: Out,
 };
 
-const selector = (store) => ({
-  nodes: store.nodes,
-  edges: store.edges,
-  onNodesChange: store.onNodesChange,
-  onNodesDelete: store.onNodesDelete,
-  onEdgesChange: store.onEdgesChange,
-  onEdgesDelete: store.onEdgesDelete,
-  addEdge: store.addEdge,
-  addOsc: () => store.createNode("osc"),
-  addAmp: () => store.createNode("amp"),
-});
-
 export default function App() {
-  const store = useStore(selector, shallow);
+  const {
+    nodes,
+    edges,
+    onNodesChange,
+    onNodesDelete,
+    onEdgesChange,
+    onEdgesDelete,
+    addEdge,
+    createNode,
+  } = useStore(useShallow((store) => ({
+    nodes: store.nodes,
+    edges: store.edges,
+    onNodesChange: store.onNodesChange,
+    onNodesDelete: store.onNodesDelete,
+    onEdgesChange: store.onEdgesChange,
+    onEdgesDelete: store.onEdgesDelete,
+    addEdge: store.addEdge,
+    createNode: store.createNode,
+  })));
+
+  const addOsc = useCallback(() => createNode("osc", 0, 0), [createNode]);
+  const addAmp = useCallback(() => createNode("amp", 0, 0), [createNode]);
   return (
     <ReactFlow
       nodeTypes={nodeTypes}
-      nodes={store.nodes}
-      edges={store.edges}
-      onNodesChange={store.onNodesChange}
-      onNodesDelete={store.onNodesDelete}
-      onEdgesChange={store.onEdgesChange}
-      onEdgesDelete={store.onEdgesDelete}
-      onConnect={store.addEdge}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onNodesDelete={onNodesDelete}
+      onEdgesChange={onEdgesChange}
+      onEdgesDelete={onEdgesDelete}
+      onConnect={addEdge}
       fitView
     >
       <Panel className={tw("space-x-4")} position="top-right">
         <button
           className={tw("px-2 py-1 rounded bg-white shadow")}
-          onClick={store.addOsc}
+          onClick={addOsc}
         >
           Add Osc
         </button>
         <button
           className={tw("px-2 py-1 rounded bg-white shadow")}
-          onClick={store.addAmp}
+          onClick={addAmp}
         >
           Add Amp
         </button>

src/main.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { ReactFlowProvider } from "reactflow";
+import { ReactFlowProvider } from "@xyflow/react";
 import App from "./App";
 
-import "reactflow/dist/style.css";
+import "@xyflow/react/dist/style.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>

src/nodes/Amp.jsx

@@ -1,19 +1,18 @@
-import React from "react";
-import { Handle } from "reactflow";
-import { shallow } from "zustand/shallow";
+import React, { useCallback } from "react";
+import { Handle, Position } from "@xyflow/react";
 import { tw } from "twind";
 import { useStore } from "../store";
 
-const selector = (id) => (store) => ({
-  setGain: (e) => store.updateNode(id, { gain: +e.target.value }),
-});
-
-export default function Osc({ id, data }) {
-  const { setGain } = useStore(selector(id), shallow);
+export default function Amp({ id, data }) {
+  const updateNode = useStore((store) => store.updateNode);
+  
+  const setGain = useCallback((e) => {
+    updateNode(id, { gain: +e.target.value });
+  }, [id, updateNode]);
 
   return (
     <div className={tw("rounded-md bg-white shadow-xl")}>
-      <Handle className={tw("w-2 h-2")} type="target" position="top" />
+      <Handle className={tw("w-2 h-2")} type="target" position={Position.Top} />
 
       <p
         className={tw("rounded-t-md px-2 py-1 bg-blue-500 text-white text-sm")}
@@ -34,7 +33,7 @@ export default function Osc({ id, data }) {
         <p className={tw("text-right text-xs")}>{data.gain.toFixed(2)}</p>
       </label>
 
-      <Handle className={tw("w-2 h-2")} type="source" position="bottom" />
+      <Handle className={tw("w-2 h-2")} type="source" position={Position.Bottom} />
     </div>
   );
 }

src/nodes/Osc.jsx

@@ -1,16 +1,18 @@
-import React from "react";
-import { Handle } from "reactflow";
-import { shallow } from "zustand/shallow";
+import React, { useCallback } from "react";
+import { Handle, Position } from "@xyflow/react";
 import { tw } from "twind";
 import { useStore } from "../store";
 
-const selector = (id) => (store) => ({
-  setFrequency: (e) => store.updateNode(id, { frequency: +e.target.value }),
-  setType: (e) => store.updateNode(id, { type: e.target.value }),
-});
-
 export default function Osc({ id, data }) {
-  const { setFrequency, setType } = useStore(selector(id), shallow);
+  const updateNode = useStore((store) => store.updateNode);
+
+  const setFrequency = useCallback((e) => {
+    updateNode(id, { frequency: +e.target.value });
+  }, [id, updateNode]);
+
+  const setType = useCallback((e) => {
+    updateNode(id, { type: e.target.value });
+  }, [id, updateNode]);
 
   return (
     <div className={tw("rounded-md bg-white shadow-xl")}>
@@ -45,7 +47,7 @@ export default function Osc({ id, data }) {
         </select>
       </label>
 
-      <Handle className={tw("w-2 h-2")} type="source" position="bottom" />
+      <Handle className={tw("w-2 h-2")} type="source" position={Position.Bottom} />
     </div>
   );
 }

src/nodes/Out.jsx

@@ -1,20 +1,15 @@
 import React from "react";
-import { Handle } from "reactflow";
-import { shallow } from "zustand/shallow";
+import { Handle, Position } from "@xyflow/react";
 import { useStore } from "../store";
 import { tw } from "twind";
 
-const selector = (store) => ({
-  isRunning: store.isRunning,
-  toggleAudio: store.toggleAudio,
-});
-
-export default function Out({ id, data }) {
-  const { isRunning, toggleAudio } = useStore(selector, shallow);
+export default function Out() {
+  const isRunning = useStore((store) => store.isRunning);
+  const toggleAudio = useStore((store) => store.toggleAudio);
 
   return (
     <div className={tw("rounded-md bg-white shadow-xl px-4 py-2")}>
-      <Handle className={tw("w-2 h-2")} type="target" position="top" />
+      <Handle className={tw("w-2 h-2")} type="target" position={Position.Top} />
 
       <button onClick={toggleAudio}>
         {isRunning ? (

src/store.js

@@ -1,4 +1,4 @@
-import { applyNodeChanges, applyEdgeChanges } from "reactflow";
+import { applyNodeChanges, applyEdgeChanges } from "@xyflow/react";
 import { nanoid } from "nanoid";
 import { create } from "zustand";
 import {