chore(template): use react flow 12

.github/dependabot.yml

@@ -3,10 +3,9 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "daily"
+      interval: 'daily'
     allow:
       - dependency-name: '@xyflow/react'
-      - dependency-name: 'reactflow'

package.json

@@ -9,9 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@xyflow/react": "^12.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "reactflow": "^11.11.4"
+    "react-dom": "^18.2.0"
   },
   "license": "MIT",
   "devDependencies": {

src/App.tsx

@@ -1,20 +1,19 @@
-import type { OnConnect } from "reactflow";
-
-import { useCallback } from "react";
+import { useCallback } from 'react';
 import {
+  ReactFlow,
   Background,
   Controls,
   MiniMap,
-  ReactFlow,
   addEdge,
   useNodesState,
   useEdgesState,
-} from "reactflow";
+  type OnConnect,
+} from '@xyflow/react';
 
-import "reactflow/dist/style.css";
+import '@xyflow/react/dist/style.css';
 
-import { initialNodes, nodeTypes } from "./nodes";
-import { initialEdges, edgeTypes } from "./edges";
+import { initialNodes, nodeTypes } from './nodes';
+import { initialEdges, edgeTypes } from './edges';
 
 export default function App() {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);

src/edges/index.ts

@@ -1,10 +1,10 @@
-import type { Edge, EdgeTypes } from "reactflow";
+import type { Edge, EdgeTypes } from '@xyflow/react';
 
-export const initialEdges = [
-  { id: "a->c", source: "a", target: "c", animated: true },
-  { id: "b->d", source: "b", target: "d" },
-  { id: "c->d", source: "c", target: "d", animated: true },
-] satisfies Edge[];
+export const initialEdges: Edge[] = [
+  { id: 'a->c', source: 'a', target: 'c', animated: true },
+  { id: 'b->d', source: 'b', target: 'd' },
+  { id: 'c->d', source: 'c', target: 'd', animated: true },
+];
 
 export const edgeTypes = {
   // Add your custom edge types here!

src/nodes/PositionLoggerNode.tsx

@@ -1,17 +1,14 @@
-import type { NodeProps } from "reactflow";
-import { Handle, Position } from "reactflow";
+import { Handle, Position, type NodeProps } from '@xyflow/react';
 
-export type PositionLoggerNodeData = {
-  label?: string;
-};
+import { type PositionLoggerNode } from './types';
 
 export function PositionLoggerNode({
-  xPos,
-  yPos,
+  positionAbsoluteX,
+  positionAbsoluteY,
   data,
-}: NodeProps<PositionLoggerNodeData>) {
-  const x = `${Math.round(xPos)}px`;
-  const y = `${Math.round(yPos)}px`;
+}: NodeProps<PositionLoggerNode>) {
+  const x = `${Math.round(positionAbsoluteX)}px`;
+  const y = `${Math.round(positionAbsoluteY)}px`;
 
   return (
     // We add this class to use the same styles as React Flow's default nodes.

src/nodes/index.ts

@@ -1,24 +1,26 @@
-import type { Node, NodeTypes } from "reactflow";
-import { PositionLoggerNode } from "./PositionLoggerNode";
+import type { NodeTypes } from '@xyflow/react';
 
-export const initialNodes = [
-  { id: "a", type: "input", position: { x: 0, y: 0 }, data: { label: "wire" } },
+import { PositionLoggerNode } from './PositionLoggerNode';
+import { AppNode } from './types';
+
+export const initialNodes: AppNode[] = [
+  { id: 'a', type: 'input', position: { x: 0, y: 0 }, data: { label: 'wire' } },
   {
-    id: "b",
-    type: "position-logger",
+    id: 'b',
+    type: 'position-logger',
     position: { x: -100, y: 100 },
-    data: { label: "drag me!" },
+    data: { label: 'drag me!' },
   },
-  { id: "c", position: { x: 100, y: 100 }, data: { label: "your ideas" } },
+  { id: 'c', position: { x: 100, y: 100 }, data: { label: 'your ideas' } },
   {
-    id: "d",
-    type: "output",
+    id: 'd',
+    type: 'output',
     position: { x: 0, y: 200 },
-    data: { label: "with React Flow" },
+    data: { label: 'with React Flow' },
   },
-] satisfies Node[];
+];
 
 export const nodeTypes = {
-  "position-logger": PositionLoggerNode,
+  'position-logger': PositionLoggerNode,
   // Add any of your custom nodes here!
 } satisfies NodeTypes;

src/nodes/types.ts

@@ -0,0 +1,4 @@
+import type { Node, BuiltInNode } from '@xyflow/react';
+
+export type PositionLoggerNode = Node<{ label: string }, 'position-logger'>;
+export type AppNode = BuiltInNode | PositionLoggerNode;