Upgrade d3-shape, d3-path to 3 (#1960)

hshoff · web-flow · commit 3d408ad4c185 · 2025-11-04T17:38:31.000-05:00
* vendor: add d3-shape and d3-path

* refactor: migrate d3-shape and d3-path dependencies to @visx/vendor

- Updated package.json files across visx packages to replace direct d3-shape and d3-path dependencies with @visx/vendor
- Adjusted import statements in various components and utilities to source from @visx/vendor/d3-shape and @visx/vendor/d3-path
- Removed unnecessary d3-shape and d3-path dependencies from package.json files

* fix: update d3-path and d3-shape type definitions and versions in yarn.lock

* fix: add references to visx-vendor in tsconfig.json for multiple packages

* refactor: run yarn lint:fix
diff --git a/packages/visx-curve/package.json b/packages/visx-curve/package.json
@@ -21,8 +21,7 @@
   "author": "@hshoff",
   "license": "MIT",
   "dependencies": {
-    "@types/d3-shape": "^1.3.1",
-    "d3-shape": "^1.0.6"
+    "@visx/vendor": "workspace:*"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/visx-curve/src/index.ts b/packages/visx-curve/src/index.ts
@@ -17,4 +17,4 @@ export {
   curveMonotoneX,
   curveMonotoneY,
   curveNatural,
-} from 'd3-shape';
+} from '@visx/vendor/d3-shape';
diff --git a/packages/visx-curve/tsconfig.json b/packages/visx-curve/tsconfig.json
@@ -14,5 +14,9 @@
     "types/**/*",
     "../../types/**/*"
   ],
-  "references": []
+  "references": [
+    {
+      "path": "../visx-vendor"
+    }
+  ]
 }
diff --git a/packages/visx-glyph/package.json b/packages/visx-glyph/package.json
@@ -34,10 +34,9 @@
     "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
   },
   "dependencies": {
-    "@types/d3-shape": "^1.3.1",
     "@types/react": "*",
     "@visx/group": "workspace:*",
-    "classnames": "^2.3.1",
-    "d3-shape": "^1.2.0"
+    "@visx/vendor": "workspace:*",
+    "classnames": "^2.3.1"
   }
 }
diff --git a/packages/visx-glyph/src/glyphs/GlyphCircle.tsx b/packages/visx-glyph/src/glyphs/GlyphCircle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Symbol } from 'd3-shape';
-import { symbol, symbolCircle } from 'd3-shape';
+import type { Symbol } from '@visx/vendor/d3-shape';
+import { symbol, symbolCircle } from '@visx/vendor/d3-shape';
 import Glyph from './Glyph';
 
 export type GlyphCircleProps<Datum> = {
diff --git a/packages/visx-glyph/src/glyphs/GlyphCross.tsx b/packages/visx-glyph/src/glyphs/GlyphCross.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Symbol } from 'd3-shape';
-import { symbol, symbolCross } from 'd3-shape';
+import type { Symbol } from '@visx/vendor/d3-shape';
+import { symbol, symbolCross } from '@visx/vendor/d3-shape';
 import Glyph from './Glyph';
 
 export type GlyphCrossProps<Datum> = {
diff --git a/packages/visx-glyph/src/glyphs/GlyphDiamond.tsx b/packages/visx-glyph/src/glyphs/GlyphDiamond.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Symbol } from 'd3-shape';
-import { symbol, symbolDiamond } from 'd3-shape';
+import type { Symbol } from '@visx/vendor/d3-shape';
+import { symbol, symbolDiamond } from '@visx/vendor/d3-shape';
 import Glyph from './Glyph';
 
 export type GlyphDiamondProps<Datum> = {
diff --git a/packages/visx-glyph/src/glyphs/GlyphSquare.tsx b/packages/visx-glyph/src/glyphs/GlyphSquare.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Symbol } from 'd3-shape';
-import { symbol, symbolSquare } from 'd3-shape';
+import type { Symbol } from '@visx/vendor/d3-shape';
+import { symbol, symbolSquare } from '@visx/vendor/d3-shape';
 import Glyph from './Glyph';
 
 export type GlyphSquareProps<Datum> = {
diff --git a/packages/visx-glyph/src/glyphs/GlyphStar.tsx b/packages/visx-glyph/src/glyphs/GlyphStar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Symbol } from 'd3-shape';
-import { symbol, symbolStar } from 'd3-shape';
+import type { Symbol } from '@visx/vendor/d3-shape';
+import { symbol, symbolStar } from '@visx/vendor/d3-shape';
 import Glyph from './Glyph';
 
 export type GlyphStarProps<Datum> = {
diff --git a/packages/visx-glyph/src/glyphs/GlyphTriangle.tsx b/packages/visx-glyph/src/glyphs/GlyphTriangle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Symbol } from 'd3-shape';
-import { symbol, symbolTriangle } from 'd3-shape';
+import type { Symbol } from '@visx/vendor/d3-shape';
+import { symbol, symbolTriangle } from '@visx/vendor/d3-shape';
 import Glyph from './Glyph';
 
 export type GlyphTriangleProps<Datum> = {
diff --git a/packages/visx-glyph/src/glyphs/GlyphWye.tsx b/packages/visx-glyph/src/glyphs/GlyphWye.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Symbol } from 'd3-shape';
-import { symbol, symbolWye } from 'd3-shape';
+import type { Symbol } from '@visx/vendor/d3-shape';
+import { symbol, symbolWye } from '@visx/vendor/d3-shape';
 import Glyph from './Glyph';
 
 export type GlyphWyeProps<Datum> = {
diff --git a/packages/visx-glyph/tsconfig.json b/packages/visx-glyph/tsconfig.json
@@ -17,6 +17,9 @@
   "references": [
     {
       "path": "../visx-group"
+    },
+    {
+      "path": "../visx-vendor"
     }
   ]
 }
diff --git a/packages/visx-sankey/package.json b/packages/visx-sankey/package.json
@@ -34,9 +34,9 @@
     "@types/d3-sankey": "^0.12.4",
     "@types/react": "*",
     "@visx/group": "workspace:*",
+    "@visx/vendor": "workspace:*",
     "classnames": "^2.3.1",
-    "d3-sankey": "^0.12.3",
-    "d3-shape": "1.3.7"
+    "d3-sankey": "^0.12.3"
   },
   "peerDependencies": {
     "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
diff --git a/packages/visx-sankey/src/Sankey.tsx b/packages/visx-sankey/src/Sankey.tsx
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { Group } from '@visx/group';
 import type { SankeyExtraProperties, SankeyGraph, SankeyLink, SankeyNode } from 'd3-sankey';
 import { sankey as d3sankey, sankeyLinkHorizontal } from 'd3-sankey';
-import type { Link } from 'd3-shape';
+import type { Link } from '@visx/vendor/d3-shape';
 
 const DEFAULT_COLOR = '#000';
 
diff --git a/packages/visx-sankey/tsconfig.json b/packages/visx-sankey/tsconfig.json
@@ -17,6 +17,9 @@
   "references": [
     {
       "path": "../visx-group"
+    },
+    {
+      "path": "../visx-vendor"
     }
   ]
 }
diff --git a/packages/visx-shape/package.json b/packages/visx-shape/package.json
@@ -21,16 +21,13 @@
   "author": "@hshoff",
   "license": "MIT",
   "dependencies": {
-    "@types/d3-path": "^1.0.8",
-    "@types/d3-shape": "^1.3.1",
     "@types/lodash": "^4.17.13",
     "@types/react": "*",
     "@visx/curve": "workspace:*",
     "@visx/group": "workspace:*",
     "@visx/scale": "workspace:*",
+    "@visx/vendor": "workspace:*",
     "classnames": "^2.3.1",
-    "d3-path": "^1.0.5",
-    "d3-shape": "^1.2.0",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
diff --git a/packages/visx-shape/src/shapes/Arc.tsx b/packages/visx-shape/src/shapes/Arc.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Arc as ArcType } from 'd3-shape';
+import type { Arc as ArcType } from '@visx/vendor/d3-shape';
 import type { $TSFIXME, AddSVGProps, ArcPathConfig } from '../types';
 import { arc } from '../util/D3ShapeFactories';
 
diff --git a/packages/visx-shape/src/shapes/BarStack.tsx b/packages/visx-shape/src/shapes/BarStack.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { SeriesPoint } from 'd3-shape';
-import { stack as d3stack } from 'd3-shape';
+import type { SeriesPoint } from '@visx/vendor/d3-shape';
+import { stack as d3stack } from '@visx/vendor/d3-shape';
 import { Group } from '@visx/group';
 import type { ScaleInput } from '@visx/scale';
 import type {
diff --git a/packages/visx-shape/src/shapes/BarStackHorizontal.tsx b/packages/visx-shape/src/shapes/BarStackHorizontal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import type { SeriesPoint } from 'd3-shape';
-import { stack as d3stack } from 'd3-shape';
+import type { SeriesPoint } from '@visx/vendor/d3-shape';
+import { stack as d3stack } from '@visx/vendor/d3-shape';
 import { Group } from '@visx/group';
 import type { ScaleInput } from '@visx/scale';
 import type { AddSVGProps, PositionScale, BaseBarStackProps, StackKey, Accessor } from '../types';
diff --git a/packages/visx-shape/src/shapes/LinePath.tsx b/packages/visx-shape/src/shapes/LinePath.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import type { Line as LineType } from 'd3-shape';
+import type { Line as LineType } from '@visx/vendor/d3-shape';
 import type { AddSVGProps, LinePathConfig } from '../types';
 import { line } from '../util/D3ShapeFactories';
 
diff --git a/packages/visx-shape/src/shapes/LineRadial.tsx b/packages/visx-shape/src/shapes/LineRadial.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import type { RadialLine } from 'd3-shape';
+import type { RadialLine } from '@visx/vendor/d3-shape';
 import type { LinePathProps } from './LinePath';
 import type { AddSVGProps, RadialLinePathConfig } from '../types';
 import { radialLine } from '../util/D3ShapeFactories';
diff --git a/packages/visx-shape/src/shapes/Pie.tsx b/packages/visx-shape/src/shapes/Pie.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import cx from 'classnames';
 import { Group } from '@visx/group';
-import type { Arc as ArcType, PieArcDatum as PieArcDatumType, Pie as PieType } from 'd3-shape';
+import type {
+  Arc as ArcType,
+  PieArcDatum as PieArcDatumType,
+  Pie as PieType,
+} from '@visx/vendor/d3-shape';
 import type { $TSFIXME, AddSVGProps, ArcPathConfig, PiePathConfig } from '../types';
 import { arc as arcPath, pie as piePath } from '../util/D3ShapeFactories';
 
diff --git a/packages/visx-shape/src/shapes/Stack.tsx b/packages/visx-shape/src/shapes/Stack.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
 import { Group } from '@visx/group';
-import type { Area as AreaType, Stack as StackType, SeriesPoint, Series } from 'd3-shape';
+import type {
+  Area as AreaType,
+  Stack as StackType,
+  SeriesPoint,
+  Series,
+} from '@visx/vendor/d3-shape';
 import type {
   $TSFIXME,
   AddSVGProps,
diff --git a/packages/visx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/visx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { path as d3Path } from 'd3-path';
+import { path as d3Path } from '@visx/vendor/d3-path';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getY, getX, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/curve/LinkRadialCurve.tsx b/packages/visx-shape/src/shapes/link/curve/LinkRadialCurve.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { path as d3Path } from 'd3-path';
+import { path as d3Path } from '@visx/vendor/d3-path';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getX, getY, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx b/packages/visx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { path as d3Path } from 'd3-path';
+import { path as d3Path } from '@visx/vendor/d3-path';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getX, getY, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/visx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { linkHorizontal } from 'd3-shape';
+import { linkHorizontal } from '@visx/vendor/d3-shape';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getY, getX, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/visx-shape/src/shapes/link/diagonal/LinkRadial.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { linkRadial } from 'd3-shape';
+import { linkRadial } from '@visx/vendor/d3-shape';
 import type { SharedLinkProps, RadialAccessorProps, AddSVGProps } from '../../../types';
 import { getX, getY, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/diagonal/LinkVertical.tsx b/packages/visx-shape/src/shapes/link/diagonal/LinkVertical.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { linkVertical } from 'd3-shape';
+import { linkVertical } from '@visx/vendor/d3-shape';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getX, getY, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/visx-shape/src/shapes/link/line/LinkHorizontalLine.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { path as d3Path } from 'd3-path';
+import { path as d3Path } from '@visx/vendor/d3-path';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getY, getX, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/line/LinkRadialLine.tsx b/packages/visx-shape/src/shapes/link/line/LinkRadialLine.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { path as d3Path } from 'd3-path';
+import { path as d3Path } from '@visx/vendor/d3-path';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getX, getY, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/line/LinkVerticalLine.tsx b/packages/visx-shape/src/shapes/link/line/LinkVerticalLine.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { path as d3Path } from 'd3-path';
+import { path as d3Path } from '@visx/vendor/d3-path';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getX, getY, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/step/LinkHorizontalStep.tsx b/packages/visx-shape/src/shapes/link/step/LinkHorizontalStep.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { path as d3Path } from 'd3-path';
+import { path as d3Path } from '@visx/vendor/d3-path';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getX, getY, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/shapes/link/step/LinkVerticalStep.tsx b/packages/visx-shape/src/shapes/link/step/LinkVerticalStep.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { path as d3Path } from 'd3-path';
+import { path as d3Path } from '@visx/vendor/d3-path';
 import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
 import { getX, getY, getSource, getTarget } from '../../../util/accessors';
 
diff --git a/packages/visx-shape/src/types/D3ShapeConfig.ts b/packages/visx-shape/src/types/D3ShapeConfig.ts
@@ -1,4 +1,4 @@
-import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+import type { CurveFactory, CurveFactoryLineOnly } from '@visx/vendor/d3-shape';
 import type { Accessor, AccessorForArrayItem } from './accessor';
 import type { STACK_OFFSETS } from '../util/stackOffset';
 import type { STACK_ORDERS } from '../util/stackOrder';
diff --git a/packages/visx-shape/src/types/area.ts b/packages/visx-shape/src/types/area.ts
@@ -1,4 +1,4 @@
-import type { Area } from 'd3-shape';
+import type { Area } from '@visx/vendor/d3-shape';
 import type { ReactNode, Ref } from 'react';
 import type { AreaPathConfig } from './D3ShapeConfig';
 
diff --git a/packages/visx-shape/src/util/D3ShapeFactories.ts b/packages/visx-shape/src/util/D3ShapeFactories.ts
@@ -5,7 +5,7 @@ import {
   pie as d3Pie,
   radialLine as d3RadialLine,
   stack as d3Stack,
-} from 'd3-shape';
+} from '@visx/vendor/d3-shape';
 import setNumberOrNumberAccessor from './setNumberOrNumberAccessor';
 import type {
   ArcPathConfig,
@@ -73,11 +73,22 @@ export function pie<Datum>({
 }: PiePathConfig<Datum> = {}) {
   const path = d3Pie<Datum>();
 
-  // ts can't distinguish between these method overloads
-  if (sort === null) path.sort(sort);
-  else if (sort != null) path.sort(sort);
-  if (sortValues === null) path.sortValues(sortValues);
-  else if (sortValues != null) path.sortValues(sortValues);
+  // In d3-shape v3+, sortValues defaults to descending sort.
+  // To maintain visx's behavior of preserving input order by default,
+  // we explicitly set sortValues to null when neither sort nor sortValues is provided.
+  // Note: d3's pie generator clears sortValues when sort is set, and vice versa.
+  if (sortValues !== undefined) {
+    path.sortValues(sortValues);
+  } else if (sort === undefined) {
+    // Neither provided - disable sorting to preserve input order
+    path.sortValues(null);
+  } else if (sort === null) {
+    // explicit null: clear comparator
+    path.sort(null);
+  } else {
+    // here sort is narrowed to a comparator function
+    path.sort(sort);
+  }
 
   if (value != null) path.value(value);
 
diff --git a/packages/visx-shape/src/util/stackOffset.ts b/packages/visx-shape/src/util/stackOffset.ts
@@ -4,7 +4,7 @@ import {
   stackOffsetNone,
   stackOffsetSilhouette,
   stackOffsetWiggle,
-} from 'd3-shape';
+} from '@visx/vendor/d3-shape';
 
 export const STACK_OFFSETS = {
   expand: stackOffsetExpand,
diff --git a/packages/visx-shape/src/util/stackOrder.ts b/packages/visx-shape/src/util/stackOrder.ts
@@ -4,7 +4,7 @@ import {
   stackOrderInsideOut,
   stackOrderNone,
   stackOrderReverse,
-} from 'd3-shape';
+} from '@visx/vendor/d3-shape';
 
 export const STACK_ORDERS = {
   ascending: stackOrderAscending,
diff --git a/packages/visx-shape/test/Pie.test.tsx b/packages/visx-shape/test/Pie.test.tsx
diff --git a/packages/visx-shape/test/utils/D3ShapeFactories.test.ts b/packages/visx-shape/test/utils/D3ShapeFactories.test.ts
diff --git a/packages/visx-shape/tsconfig.json b/packages/visx-shape/tsconfig.json
diff --git a/packages/visx-stats/package.json b/packages/visx-stats/package.json
diff --git a/packages/visx-stats/src/ViolinPlot.tsx b/packages/visx-stats/src/ViolinPlot.tsx
diff --git a/packages/visx-stats/tsconfig.json b/packages/visx-stats/tsconfig.json
diff --git a/packages/visx-vendor/.gitignore b/packages/visx-vendor/.gitignore
diff --git a/packages/visx-vendor/package.json b/packages/visx-vendor/package.json
diff --git a/packages/visx-xychart/package.json b/packages/visx-xychart/package.json
diff --git a/packages/visx-xychart/src/components/series/private/BaseAreaStack.tsx b/packages/visx-xychart/src/components/series/private/BaseAreaStack.tsx
diff --git a/packages/visx-xychart/src/components/series/private/BaseBarStack.tsx b/packages/visx-xychart/src/components/series/private/BaseBarStack.tsx
diff --git a/packages/visx-xychart/src/hooks/useStackedData.ts b/packages/visx-xychart/src/hooks/useStackedData.ts
diff --git a/packages/visx-xychart/src/types/series.ts b/packages/visx-xychart/src/types/series.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -34,10 +34,9 @@`
`34`	`34`	`"react": "^16.3.0-0 \|\| ^17.0.0-0 \|\| ^18.0.0-0 \|\| ^19.0.0-0"`
`35`	`35`	`},`
`36`	`36`	`"dependencies": {`
`37`		`- "@types/d3-shape": "^1.3.1",`
`38`	`37`	`"@types/react": "*",`
`39`	`38`	`"@visx/group": "workspace:*",`
`40`		`- "classnames": "^2.3.1",`
`41`		`- "d3-shape": "^1.2.0"`
	`39`	`+ "@visx/vendor": "workspace:*",`
	`40`	`+ "classnames": "^2.3.1"`
`42`	`41`	`}`
`43`	`42`	`}`