refactor(packages) support react 17 and 18

.gitignore

@@ -10,6 +10,5 @@ stats.html
 .eslintcache
 .idea
 .log
-
 .turbo
 .rollup.cache

.npmrc

@@ -1,3 +1,3 @@
-registry = "https://registry.npmjs.com/"
+registry="https://registry.npmjs.com/"
-legacy-peer-deps = true
+legacy-peer-deps=true
 strict-peer-dependencies=false

package.json

@@ -37,7 +37,6 @@
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.0",
-    "start-server-and-test": "^1.14.0",
     "turbo": "^1.4.6",
     "typescript": "^4.7.4"
   }

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": ">=17",
-    "react-dom": ">=18"
+    "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 { transform, rfId } = useStore(selector, shallow);
-  const [tX, tY, tScale] = useStore(transformSelector);
-
   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 scaledGap: [number, number] = [gapXY[0] * transform[2] || 1, gapXY[1] * transform[2] || 1];
-  const scaledSize = patternSize * tScale;
+  const scaledSize = patternSize * transform[2];
 
   const patternDimensions: [number, number] = isCross ? [scaledSize, scaledSize] : scaledGap;
 
@@ -62,9 +61,9 @@ function Background({
       ref={ref}
     >
       <pattern
-        id={patternId}
+        id={rfId}
-        x={tX % scaledGap[0]}
+        x={transform[0] % scaledGap[0]}
-        y={tY % scaledGap[1]}
+        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>
   );
 }

packages/controls/package.json

@@ -41,15 +41,16 @@
     "classcat": "^5.0.3"
   },
   "peerDependencies": {
-    "react": ">=18",
+    "react": ">=17",
-    "react-dom": ">=18"
+    "react-dom": ">=17"
   },
   "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",
+    "typescript": "^4.7.4"
   },
   "rollup": {
     "globals": {

packages/core/package.json

@@ -36,7 +36,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@types/d3": "^7.4.0",
+    "@types/d3-drag": "^3.0.1",
+    "@types/d3-selection": "^3.0.3",
+    "@types/d3-zoom": "^3.0.1",
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
@@ -44,16 +46,13 @@
     "zustand": "^4.0.0"
   },
   "peerDependencies": {
-    "react": ">=18",
+    "react": ">=17",
-    "react-dom": ">=18"
+    "react-dom": ">=17"
   },
   "devDependencies": {
     "@reactflow/eslint-config": "workspace:^0.0.0",
     "@reactflow/rollup-config": "workspace:*",
     "@reactflow/tsconfig": "workspace:*",
-    "@types/d3-drag": "^3.0.1",
-    "@types/d3-selection": "^3.0.3",
-    "@types/d3-zoom": "^3.0.1",
     "@types/node": "^18.7.16",
     "@types/react": "^18.0.17",
     "react": "^18.2.0",

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

@@ -42,6 +42,7 @@ type StoreUpdaterProps = Pick<
   | 'onSelectionDragStop'
   | 'noPanClassName'
   | 'nodeOrigin'
+  | 'id'
 >;
 
 const selector = (s: ReactFlowState) => ({
@@ -112,6 +113,7 @@ const StoreUpdater = ({
   onSelectionDragStop,
   noPanClassName,
   nodeOrigin,
+  id,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -161,6 +163,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
   useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
   useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
+  useDirectStoreUpdater('rfId', id, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);

packages/core/src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, forwardRef, useId } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import cc from 'classcat';
 
 import Attribution from '../../components/Attribution';
@@ -154,13 +154,13 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       elevateEdgesOnSelect = false,
       disableKeyboardA11y = false,
       style,
+      id = '1',
       ...rest
     },
     ref
   ) => {
     const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
     const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
-    const rfId = useId();
 
     return (
       <div
@@ -228,7 +228,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             noWheelClassName={noWheelClassName}
             noPanClassName={noPanClassName}
             elevateEdgesOnSelect={elevateEdgesOnSelect}
-            rfId={rfId}
+            rfId={id}
             disableKeyboardA11y={disableKeyboardA11y}
             nodeOrigin={nodeOrigin}
             nodeExtent={nodeExtent}
@@ -269,11 +269,12 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onSelectionDragStop={onSelectionDragStop}
             noPanClassName={noPanClassName}
             nodeOrigin={nodeOrigin}
+            id={id}
           />
           {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
           {children}
           <Attribution proOptions={proOptions} position={attributionPosition} />
-          {!disableKeyboardA11y && <A11yDescriptions rfId={rfId} />}
+          {!disableKeyboardA11y && <A11yDescriptions rfId={id} />}
         </Wrapper>
       </div>
     );

packages/core/src/store/initialState.ts

@@ -6,6 +6,7 @@ export const infiniteExtent: CoordinateExtent = [
 ];
 
 const initialState: ReactFlowStore = {
+  rfId: '1',
   width: 0,
   height: 0,
   transform: [0, 0, 1],

packages/core/src/types/general.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
-import { Selection as D3Selection, ZoomBehavior } from 'd3';
+import { Selection as D3Selection } from 'd3-selection';
+import { ZoomBehavior } from 'd3-zoom';
 
 import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
 import { NodeChange, EdgeChange } from './changes';
@@ -130,6 +131,7 @@ export interface ViewportHelperFunctions {
 }
 
 export type ReactFlowStore = {
+  rfId: string;
   width: number;
   height: number;
   transform: Transform;

packages/core/src/utils/graph.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Selection as D3Selection } from 'd3';
+import { Selection as D3Selection } from 'd3-selection';
 
 import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils';
 import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';

packages/minimap/package.json

@@ -42,8 +42,8 @@
     "zustand": "^4.0.0"
   },
   "peerDependencies": {
-    "react": ">=18",
+    "react": ">=17",
-    "react-dom": ">=18"
+    "react-dom": ">=17"
   },
   "devDependencies": {
     "@reactflow/eslint-config": "workspace:^0.0.0",
@@ -51,7 +51,8 @@
     "@reactflow/tsconfig": "workspace:*",
     "@types/node": "^18.7.16",
     "@types/react": "^18.0.19",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "typescript": "^4.7.4"
   },
   "rollup": {
     "globals": {

packages/minimap/src/MiniMap.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { memo, useId } from 'react';
+import { memo } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@reactflow/core';
@@ -25,6 +25,7 @@ const selector = (s: ReactFlowState) => {
     nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
     viewBB,
     boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB,
+    rfId: s.rfId,
   };
 };
 
@@ -43,8 +44,7 @@ function MiniMap({
   maskColor = 'rgb(240, 242, 243, 0.7)',
   position = 'bottom-right',
 }: MiniMapProps) {
-  const minimapId = useId();
+  const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow);
-  const { boundingRect, viewBB, nodes } = useStore(selector, shallow);
   const elementWidth = (style?.width as number) ?? defaultWidth;
   const elementHeight = (style?.height as number) ?? defaultHeight;
   const nodeColorFunc = getAttrFunction(nodeColor);
@@ -61,7 +61,7 @@ function MiniMap({
   const width = viewWidth + offset * 2;
   const height = viewHeight + offset * 2;
   const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
-  const labelledBy = `${ARIA_LABEL_KEY}-${minimapId}`;
+  const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
 
   return (
     <Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>

packages/reactflow/package.json

@@ -39,15 +39,17 @@
     "@reactflow/minimap": "workspace:*"
   },
   "peerDependencies": {
-    "react": ">=18",
+    "react": ">=17",
-    "react-dom": ">=18"
+    "react-dom": ">=17"
   },
   "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"
   },
   "rollup": {
     "globals": {

pnpm-lock.yaml

@@ -26,7 +26,6 @@ importers:
       react-dom: ^18.2.0
       rimraf: ^3.0.2
       rollup: ^2.79.0
-      start-server-and-test: ^1.14.0
       turbo: ^1.4.6
       typescript: ^4.7.4
     devDependencies:
@@ -52,7 +51,6 @@ importers:
       react-dom: registry.npmjs.org/react-dom/18.2.0_react@18.2.0
       rimraf: registry.npmjs.org/rimraf/3.0.2
       rollup: registry.npmjs.org/rollup/2.79.0
-      start-server-and-test: registry.npmjs.org/start-server-and-test/1.14.0
       turbo: registry.npmjs.org/turbo/1.4.6
       typescript: registry.npmjs.org/typescript/4.8.3
 
@@ -101,10 +99,12 @@ importers:
       '@types/node': ^18.7.16
       '@types/react': ^18.0.19
       classcat: ^5.0.3
+      zustand: ^4.0.0
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
       '@reactflow/core': link:../core
       classcat: registry.npmjs.org/classcat/5.0.4
+      zustand: registry.npmjs.org/zustand/4.1.1
     devDependencies:
       '@reactflow/eslint-config': link:../../tooling/eslint-config
       '@reactflow/rollup-config': link:../../tooling/rollup-config
@@ -6984,6 +6984,14 @@ packages:
       punycode: registry.npmjs.org/punycode/2.1.1
     dev: true
 
+  registry.npmjs.org/use-sync-external-store/1.2.0:
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz}
+    name: use-sync-external-store
+    version: 1.2.0
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dev: false
+
   registry.npmjs.org/use-sync-external-store/1.2.0_react@18.2.0:
     resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz}
     id: registry.npmjs.org/use-sync-external-store/1.2.0
@@ -7284,6 +7292,23 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  registry.npmjs.org/zustand/4.1.1:
+    resolution: {integrity: sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/zustand/-/zustand-4.1.1.tgz}
+    name: zustand
+    version: 4.1.1
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      immer: '>=9.0'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      use-sync-external-store: registry.npmjs.org/use-sync-external-store/1.2.0
+    dev: false
+
   registry.npmjs.org/zustand/4.1.1_react@18.2.0:
     resolution: {integrity: sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/zustand/-/zustand-4.1.1.tgz}
     id: registry.npmjs.org/zustand/4.1.1

turbo.json

@@ -13,7 +13,6 @@
       "outputs": []
     },
     "typecheck": {
-      "dependsOn": ["^build"],
       "outputs": []
     },
     "test": {