chore: upgrade to React Flow v12

This was fairly easy to do. I followed the guide posted here: xyflow/xyflow#3764 Besides the renamed imports, the only particularly notable changes required were: * Replacing `unknown` type parameters with more specific types, as React Flow now has better types; and * changing `node.parentNode` with `node.parentId`, which fixed an issue where Primer `match` branch labels were misplaced. Signed-off-by: Drew Hess <[email protected]>
hackworthltd · Apr 24, 2024 · 6bbf659 · 6bbf659
1 parent 48f40e9
commit 6bbf659
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 149 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@tanstack/react-query": "^5.29.0",
     "@tanstack/react-query-devtools": "^5.29.0",
     "@types/deep-equal": "^1.0.4",
+    "@xyflow/react": "12.0.0-next.15",
     "@zxch3n/tidy": "github:hackworthltd/tidy#e07fdef2ae7bf593701817113dd47b4cd56c7a97",
     "axios": "^1.6.8",
     "deep-equal": "^2.2.3",
@@ -41,7 +42,6 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
     "react-router-dom": "^6.22.3",
-    "reactflow": "^11.10.3",
     "universal-cookie": "^7.1.4",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Edit/index.tsx b/src/components/Edit/index.tsx
@@ -22,7 +22,7 @@ import {
   useState,
 } from "react";
 import { useParams } from "react-router-dom";
-import { ReactFlowProvider } from "reactflow";
+import { ReactFlowProvider } from "@xyflow/react";
 import {
   useGetAvailableActions,
   useGetProgram,

diff --git a/src/components/EvalBoundedInterp/index.tsx b/src/components/EvalBoundedInterp/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { NodeChange, ReactFlowProvider, useReactFlow } from "reactflow";
+import { NodeChange, ReactFlowProvider, useReactFlow } from "@xyflow/react";
 import { EvalBoundedInterpResp, GlobalName, Level } from "@/primer-api";
 import { SelectMenu, TreeReactFlowOne } from "@/components";
 import {

diff --git a/src/components/EvalFull/index.tsx b/src/components/EvalFull/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { NodeChange, ReactFlowProvider, useReactFlow } from "reactflow";
+import { NodeChange, ReactFlowProvider, useReactFlow } from "@xyflow/react";
 import { EvalFullResp, GlobalName, Level } from "@/primer-api";
 import { SelectMenu, TreeReactFlowOne } from "@/components";
 import {

diff --git a/src/components/SelectionInfo/index.tsx b/src/components/SelectionInfo/index.tsx
@@ -1,4 +1,4 @@
-import { NodeChange, ReactFlowProvider, useReactFlow } from "reactflow";
+import { NodeChange, ReactFlowProvider, useReactFlow } from "@xyflow/react";
 import { Tree, Level, TypeOrKind } from "@/primer-api";
 import { TreeReactFlowOne } from "@/components";
 import {

diff --git a/src/components/TreeReactFlow/Types.ts b/src/components/TreeReactFlow/Types.ts
@@ -7,7 +7,7 @@ import {
   NodeType,
 } from "@/primer-api";
 import { unzip } from "fp-ts/lib/Array";
-import { Position } from "reactflow";
+import { Position } from "@xyflow/react";
 import { NodeFlavor } from "./Flavor";
 
 /** A generic graph. */

diff --git a/src/components/TreeReactFlow/ZoomBar.tsx b/src/components/TreeReactFlow/ZoomBar.tsx
@@ -1,4 +1,4 @@
-import { useReactFlow, Panel } from "@reactflow/core";
+import { useReactFlow, Panel } from "@xyflow/react";
 import {
   ArrowsPointingOutIcon,
   MagnifyingGlassPlusIcon,

diff --git a/src/components/TreeReactFlow/index.tsx b/src/components/TreeReactFlow/index.tsx
@@ -8,7 +8,7 @@ import {
   Level,
   TypeDef,
 } from "@/primer-api";
-import type { NodeChange } from "reactflow";
+import type { NodeChange } from "@xyflow/react";
 import {
   ReactFlow,
   Node as RFNode,
@@ -23,7 +23,7 @@ import {
   getBezierPath,
   EdgeTypes,
   useReactFlow,
-} from "reactflow";
+} from "@xyflow/react";
 import "./reactflow.css";
 import { MutableRefObject, PropsWithChildren, useId } from "react";
 import classNames from "classnames";
@@ -462,7 +462,7 @@ const edgeTypes = {
     targetX,
     targetY,
     targetPosition,
-  }: EdgeProps<unknown> & { data: PrimerEdgeProps }) => {
+  }: EdgeProps<PrimerEdge> & { data: PrimerEdgeProps }) => {
     const [edgePath] = getBezierPath({
       sourceX,
       sourceY,
@@ -490,7 +490,7 @@ const edgeTypes = {
     targetX,
     targetY,
     targetPosition,
-  }: EdgeProps<unknown>) => {
+  }: EdgeProps<PrimerEdge>) => {
     const [edgePath] = getSmoothStepPath({
       sourceX,
       sourceY,
@@ -756,7 +756,7 @@ const makePrimerNode = async (
         bodyNested.concat({
           nodes: bodyLayout.nodes.map((node) => ({
             ...node,
-            parentNode: id,
+            parentId: id,
             position: {
               x: node.position.x + p.boxPadding / 2,
               y: node.position.y + p.boxPadding / 2,
@@ -1378,19 +1378,17 @@ const SetTreeReactFlowCallbacks = ({
  * check that we register its subtypes correctly with ReactFlow,
  * and safely act on that type in handlers. */
 export const ReactFlowSafe = <
-  N extends RFNode<unknown> & { type: string },
-  E extends RFEdge<unknown> & { type: string },
+  N extends RFNode & { type: string },
+  E extends RFEdge & { type: string },
 >(
   p: Omit<Parameters<typeof ReactFlow>[0], "onNodeClick" | "edgeTypes"> & {
     nodes: N[];
     nodeTypes: {
-      [T in N["type"]]: (
-        args: NodeProps<unknown> & N & { type: T }
-      ) => JSX.Element;
+      [T in N["type"]]: (args: NodeProps & N & { type: T }) => JSX.Element;
     };
     edgeTypes: {
       [T in E["type"]]: (
-        args: EdgeProps<unknown> & E & { type: T }
+        args: EdgeProps<PrimerEdge> & E & { type: T }
       ) => JSX.Element;
     };
     onNodeClick?: (e: React.MouseEvent<Element, MouseEvent>, n: N) => void;

diff --git a/src/components/TreeReactFlow/reactflow.css b/src/components/TreeReactFlow/reactflow.css
@@ -1,4 +1,4 @@
-@import "reactflow/dist/base.css";
+@import "@xyflow/react/dist/base.css";
 
 .react-flow__edge-path,
 .react-flow__connection-path {