From fad6cf706e47eac83927531e84bdcef263469052 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 19 Sep 2022 16:07:30 +0200 Subject: [PATCH] refactor(packages) support react 17 and 18 --- .gitignore | 1 - .npmrc | 4 +-- package.json | 1 - packages/background/package.json | 16 +++++++--- packages/background/src/Background.tsx | 21 +++++++------- packages/controls/package.json | 7 +++-- packages/core/package.json | 11 ++++--- .../src/components/StoreUpdater/index.tsx | 3 ++ .../core/src/container/ReactFlow/index.tsx | 9 +++--- packages/core/src/store/initialState.ts | 1 + packages/core/src/types/general.ts | 4 ++- packages/core/src/utils/graph.ts | 2 +- packages/minimap/package.json | 7 +++-- packages/minimap/src/MiniMap.tsx | 8 ++--- packages/reactflow/package.json | 8 +++-- pnpm-lock.yaml | 29 +++++++++++++++++-- turbo.json | 1 - 17 files changed, 86 insertions(+), 47 deletions(-) diff --git a/.gitignore b/.gitignore index 8e7ce8a9..86da1ac9 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,5 @@ stats.html .eslintcache .idea .log - .turbo .rollup.cache \ No newline at end of file diff --git a/.npmrc b/.npmrc index a9e8761a..8d10578a 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1,3 @@ -registry = "https://registry.npmjs.com/" -legacy-peer-deps = true +registry="https://registry.npmjs.com/" +legacy-peer-deps=true strict-peer-dependencies=false \ No newline at end of file diff --git a/package.json b/package.json index 1c384338..46bed7fd 100644 --- a/package.json +++ b/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" } diff --git a/packages/background/package.json b/packages/background/package.json index 0699129f..1822dfdf 100644 --- a/packages/background/package.json +++ b/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" } } diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx index e3867a6e..7fc52cae 100644 --- a/packages/background/src/Background.tsx +++ b/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(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} > )} - + ); } diff --git a/packages/controls/package.json b/packages/controls/package.json index a52f8e79..6a81229e 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -41,15 +41,16 @@ "classcat": "^5.0.3" }, "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" + "react": ">=17", + "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": { diff --git a/packages/core/package.json b/packages/core/package.json index 7e5a66c9..848edc94 100644 --- a/packages/core/package.json +++ b/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-dom": ">=18" + "react": ">=17", + "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", diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index f287a39d..1c0db13a 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/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(nodes, setNodes); useStoreUpdater(edges, setEdges); diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index d09a8827..bda960ec 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/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( 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 (
( noWheelClassName={noWheelClassName} noPanClassName={noPanClassName} elevateEdgesOnSelect={elevateEdgesOnSelect} - rfId={rfId} + rfId={id} disableKeyboardA11y={disableKeyboardA11y} nodeOrigin={nodeOrigin} nodeExtent={nodeExtent} @@ -269,11 +269,12 @@ const ReactFlow = forwardRef( onSelectionDragStop={onSelectionDragStop} noPanClassName={noPanClassName} nodeOrigin={nodeOrigin} + id={id} /> {onSelectionChange && } {children} - {!disableKeyboardA11y && } + {!disableKeyboardA11y && }
); diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index 708097bc..b84946ef 100644 --- a/packages/core/src/store/initialState.ts +++ b/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], diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 85e8f689..a4bed713 100644 --- a/packages/core/src/types/general.ts +++ b/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; diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 533eb5a0..10e880c2 100644 --- a/packages/core/src/utils/graph.ts +++ b/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'; diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 79b759e0..668fb598 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -42,8 +42,8 @@ "zustand": "^4.0.0" }, "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" + "react": ">=17", + "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": { diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index 82eaac14..a0ccd154 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/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 } = useStore(selector, shallow); + const { boundingRect, viewBB, nodes, rfId } = 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 ( diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 97f1fa19..efa9cb1d 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -39,15 +39,17 @@ "@reactflow/minimap": "workspace:*" }, "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" + "react": ">=17", + "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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 56f3730f..0db36b6d 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/turbo.json b/turbo.json index cebf132a..ada06cd2 100644 --- a/turbo.json +++ b/turbo.json @@ -13,7 +13,6 @@ "outputs": [] }, "typecheck": { - "dependsOn": ["^build"], "outputs": [] }, "test": {