refactor(packages) support react 17 and 18

packages/background/package.json

@@ -37,20 +37,28 @@
   "dependencies": {
     "@babel/runtime": "^7.18.9",
     "@reactflow/core": "workspace:*",
-    "classcat": "^5.0.3"
+    "classcat": "^5.0.3",
+    "zustand": "^4.0.0"
   },
   "devDependencies": {
     "@reactflow/eslint-config": "workspace:^0.0.0",
     "@reactflow/rollup-config": "workspace:*",
     "@reactflow/tsconfig": "workspace:*",
     "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19"
+    "@types/react": "^18.0.19",
+    "react": "^18.2.0",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "rollup": {
+    "globals": {
+      "zustand": "Zustand",
+      "zustand/shallow": "zustandShallow",
+      "classcat": "cc"
+    },
     "name": "ReactFlowBackground"
   }
 }

packages/background/src/Background.tsx

@@ -1,6 +1,7 @@
-import { memo, useRef, useId } from 'react';
+import { memo, useRef } from 'react';
 import cc from 'classcat';
 import { useStore, ReactFlowState } from '@reactflow/core';
+import shallow from 'zustand/shallow';
 
 import { BackgroundProps, BackgroundVariant } from './types';
 import { DotPattern, LinePattern } from './Patterns';
@@ -17,7 +18,7 @@ const defaultSize = {
   [BackgroundVariant.Cross]: 6,
 };
 
-const transformSelector = (s: ReactFlowState) => s.transform;
+const selector = (s: ReactFlowState) => ({ transform: s.transform, rfId: s.rfId });
 
 function Background({
   variant = BackgroundVariant.Dots,
@@ -31,16 +32,14 @@ function Background({
   className,
 }: BackgroundProps) {
   const ref = useRef<SVGSVGElement>(null);
-  const patternId = useId();
-  const [tX, tY, tScale] = useStore(transformSelector);
-
+  const { transform, rfId } = useStore(selector, shallow);
   const patternColor = color || defaultColor[variant];
   const patternSize = size || defaultSize[variant];
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
   const gapXY: [number, number] = Array.isArray(gap) ? gap : [gap, gap];
-  const scaledGap: [number, number] = [gapXY[0] * tScale || 1, gapXY[1] * tScale || 1];
-  const scaledSize = patternSize * tScale;
+  const scaledGap: [number, number] = [gapXY[0] * transform[2] || 1, gapXY[1] * transform[2] || 1];
+  const scaledSize = patternSize * transform[2];
 
   const patternDimensions: [number, number] = isCross ? [scaledSize, scaledSize] : scaledGap;
 
@@ -62,9 +61,9 @@ function Background({
       ref={ref}
     >
       <pattern
-        id={patternId}
-        x={tX % scaledGap[0]}
-        y={tY % scaledGap[1]}
+        id={rfId}
+        x={transform[0] % scaledGap[0]}
+        y={transform[1] % scaledGap[1]}
         width={scaledGap[0]}
         height={scaledGap[1]}
         patternUnits="userSpaceOnUse"
@@ -76,7 +75,7 @@ function Background({
           <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
         )}
       </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${rfId})`} />
     </svg>
   );
 }