Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

deps: upgrade react-spring to v9 #1218

Closed
wants to merge 5 commits into from
Closed

deps: upgrade react-spring to v9 #1218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c40b639
feat(@visx/react-spring): upgrade react-spring to v9
hsunpei May 15, 2021
d111e07
fix(@visx/react-spring): remove the unnecessary yarn lock file
hsunpei May 22, 2021
9388a40
feat(@visx/react-spring): refine the typing for keys of animatedTicks
hsunpei May 22, 2021
2752910
feat(@visx/demo): upgrade react-spring's dependency
hsunpei May 22, 2021
9d16b37
feat(@visx/react-spring): temporarily suppress type checks for styles
hsunpei May 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/visx-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
"react-dom": "^16.9.0",
"react-github-button": "^0.1.10",
"react-markdown": "^4.3.1",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"react-tilt": "^0.1.4",
"recompose": "^0.26.0",
"topojson-client": "^3.0.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-axis/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"react": "^16",
"react-dom": "^16",
"react-scripts-ts": "3.1.0",
"react-spring": "8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-shape-line-radial/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"react": "^16.8",
"react-dom": "^16.8",
"react-scripts-ts": "3.1.0",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-shape-pie/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"react": "^16.8",
"react-dom": "^16.8",
"react-scripts-ts": "3.1.0",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-streamgraph/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"react": "^16.8",
"react-dom": "^16.8",
"react-scripts-ts": "3.1.0",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-xychart/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"react": "^16",
"react-dom": "^16",
"react-scripts-ts": "3.1.0",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-react-spring/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
},
"peerDependencies": {
"react": "^16.3.0-0",
"react-spring": "^8.0.27"
"react-spring": "^9.0.0-rc.3"
},
"dependencies": {
"@types/classnames": "^2.2.9",
Expand Down
98 changes: 46 additions & 52 deletions packages/visx-react-spring/src/axis/AnimatedTicks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { animated, useTransition, interpolate } from 'react-spring';
import { animated, useTransition, to, SpringValue } from 'react-spring';
import cx from 'classnames';
import Orientation from '@visx/axis/lib/constants/orientation';
import { TicksRendererProps, AxisScale } from '@visx/axis/lib/types';
import { ComputedTick, TicksRendererProps, AxisScale } from '@visx/axis/lib/types';
import { Text } from '@visx/text';

import useLineTransitionConfig from '../spring-configs/useLineTransitionConfig';
Expand All @@ -20,63 +20,57 @@ export default function AnimatedTicks<Scale extends AxisScale>({
ticks,
animationTrajectory,
}: TicksRendererProps<Scale> & { animationTrajectory?: AnimationTrajectory }) {
const animatedTicks = useTransition(
ticks,
tick => `${tick.value}`,
useLineTransitionConfig({ scale, animateXOrY: horizontal ? 'x' : 'y', animationTrajectory }),
);
const animatedTicks = useTransition(ticks, {
...useLineTransitionConfig({
scale,
animateXOrY: horizontal ? 'x' : 'y',
animationTrajectory,
}),
keys: (tick: ComputedTick<Scale>) => `${tick.value}`,
});

return (
// eslint-disable-next-line react/jsx-no-useless-fragment
<>
{animatedTicks.map(
(
{
item,
key,
// @ts-ignore react-spring types only include CSSProperties
props: { fromX, toX, fromY, toY, opacity },
},
index,
) => {
const tickLabelProps = allTickLabelProps[index] ?? allTickLabelProps[0] ?? {};
return item == null || key == null ? null : (
{/* @ts-ignore: react-spring's type inference issue on the styles */}
{animatedTicks(({ fromX, toX, fromY, toY, opacity }, item, { key }, index) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: im getting a ts warning -> Property 'fromX' does not exist on type '{}'.ts(2339) for { fromX, toX, fromY, toY, opacity },
might be good to keep the @ts-ignore if no explicit type is defined

// @ts-ignore react-spring types only include CSSProperties

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may be caused by the type inference issue of 9.1.2.
After running yarn, it picks up9.1.2 automatically instead of 9.0.0-rc.3.
But I think it's not nice to stick to 9.0.0-rc.3 instead of using ^9.0.0-rc.3 in peer dependencies, so I think putting @ts-ignore here is indeed a good idea.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like this is still broken in 9.2.0 so maybe @ts-ignore is the way to go 😢

const tickLabelProps = allTickLabelProps[index] ?? allTickLabelProps[0] ?? {};
return item == null || key == null ? null : (
<animated.g
key={key}
className={cx('visx-axis-tick', tickClassName)}
transform={tickTransform}
>
{!hideTicks && (
<animated.line
x1={fromX}
x2={toX}
y1={fromY}
y2={toY}
stroke={tickStroke}
strokeLinecap="square"
strokeOpacity={opacity}
/>
)}
{/** animate the group, not the Text */}
<animated.g
key={key}
className={cx('visx-axis-tick', tickClassName)}
transform={tickTransform}
>
{!hideTicks && (
<animated.line
x1={fromX}
x2={toX}
y1={fromY}
y2={toY}
stroke={tickStroke}
strokeLinecap="square"
strokeOpacity={opacity}
/>
key={index}
transform={to(
[toX as SpringValue<number>, toY as SpringValue<number>],
(interpolatedX, interpolatedY) =>
`translate(${interpolatedX},${interpolatedY +
(orientation === Orientation.bottom &&
typeof tickLabelProps.fontSize === 'number'
? tickLabelProps.fontSize ?? 10
: 0)})`,
)}
{/** animate the group, not the Text */}
<animated.g
key={index}
transform={interpolate(
[toX, toY],
(interpolatedX, interpolatedY) =>
`translate(${interpolatedX},${interpolatedY +
(orientation === Orientation.bottom &&
typeof tickLabelProps.fontSize === 'number'
? tickLabelProps.fontSize ?? 10
: 0)})`,
)}
opacity={opacity}
>
<Text {...tickLabelProps}>{item?.formattedValue}</Text>
</animated.g>
opacity={opacity}
>
<Text {...tickLabelProps}>{item?.formattedValue}</Text>
</animated.g>
);
},
)}
</animated.g>
);
})}
</>
);
}
38 changes: 18 additions & 20 deletions packages/visx-react-spring/src/grid/AnimatedGridLines.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,34 +22,32 @@ export default function AnimatedGridLines<Scale extends GridScale>({
lineStyle,
...lineProps
}: AnimatedGridLinesProps<Scale>) {
const animatedLines = useTransition(
lines,
lineKey,
useLineTransitionConfig({
const animatedLines = useTransition(lines, {
...useLineTransitionConfig({
scale,
animateXOrY,
animationTrajectory,
}),
);
key: lineKey,
});

return (
// eslint-disable-next-line react/jsx-no-useless-fragment
<>
{animatedLines.map((
// @ts-ignore react-spring types only include CSSProperties
{ key, props: { fromX, toX, fromY, toY, opacity } },
) => (
<animated.line
key={key}
x1={fromX}
x2={toX}
y1={fromY}
y2={toY}
strokeOpacity={opacity}
style={lineStyle}
{...lineProps}
/>
))}
{animatedLines(({ fromX, toX, fromY, toY, opacity }, _, { key }) => {
return (
<animated.line
key={key}
x1={fromX}
x2={toX}
y1={fromY}
y2={toY}
strokeOpacity={opacity}
style={lineStyle}
{...lineProps}
/>
);
})}
</>
);
}
1 change: 0 additions & 1 deletion packages/visx-react-spring/src/spring-configs/useLineTransitionConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ export default function useLineTransitionConfig<Scale extends AxisScale | GridSc
});

return {
unique: true,
from: fromLeave,
leave: fromLeave,
enter: enterUpdate,
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-xychart/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
},
"peerDependencies": {
"react": "^16.4.0-0",
"react-spring": "^8.0.27"
"react-spring": "^9.0.0-rc.3"
},
"dependencies": {
"@types/classnames": "^2.2.9",
Expand Down
105 changes: 97 additions & 8 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3500,6 +3500,86 @@
"@octokit/openapi-types" "^4.0.0"
"@types/node" ">= 8"

"@react-spring/animated@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/animated/-/animated-9.1.2.tgz#e43b122160f8f4cbb0caac8a7f57acd76dd12369"
integrity sha512-nKOGk+3aWbNp46V/CB1J2vR3GJI/Vork8N1WTI5mt+32QekrSsBn5/YFt4/iPaDGhLjukFxF0IjLs6hRLqSObw==
dependencies:
"@react-spring/shared" "~9.1.2"
"@react-spring/types" "~9.1.2"

"@react-spring/core@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/core/-/core-9.1.2.tgz#6d854a12fe9c3caa7942e51e708cb5fb4e2d1124"
integrity sha512-rgobYPCcLdDwbHBVqAmvtXhhX92G7MoPltJlzUge843yp1dNr47tkagFdCtw9NMGp6eHu/CE5byh/imlhLLAxw==
dependencies:
"@react-spring/animated" "~9.1.2"
"@react-spring/shared" "~9.1.2"
"@react-spring/types" "~9.1.2"

"@react-spring/konva@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/konva/-/konva-9.1.2.tgz#20567063efd8d441a268826e326bd5d7574bbc50"
integrity sha512-P60mhUHRYgPPhoTBQWzuzD3hfeCFWC0BQ7N0iHzpMTzDIrAvutyg+iAX59jSXo3yatrcx60NmlCsiG8tRxbw6w==
dependencies:
"@react-spring/animated" "~9.1.2"
"@react-spring/core" "~9.1.2"
"@react-spring/shared" "~9.1.2"
"@react-spring/types" "~9.1.2"

"@react-spring/native@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/native/-/native-9.1.2.tgz#d21a64c20ca08d2c5839cedcf9cc4842770f8ffc"
integrity sha512-d7+tCoKAnDPSoVtpyFFm4BWQhn1h833ocdP0d2POZzKTcR1iQ8YI7EQ22iKGLvwH+0vjymde039CgYy31INqWQ==
dependencies:
"@react-spring/animated" "~9.1.2"
"@react-spring/core" "~9.1.2"
"@react-spring/shared" "~9.1.2"
"@react-spring/types" "~9.1.2"

"@react-spring/shared@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/shared/-/shared-9.1.2.tgz#c36d077d7eb31fd2cbcf8956d9d35037b2998613"
integrity sha512-sj/RrhFZAteCWAMk+W0t6Ku/skn/lbskCCs8B7ZnHNLMGPM+Zb3MOk+aVbX3T/D0iq/oTnKWyQYqrXDKiFcZ7g==
dependencies:
"@react-spring/types" "~9.1.2"
rafz "^0.1.14"

"@react-spring/three@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/three/-/three-9.1.2.tgz#49d1d4c0b9d059bd470712c78c9dd73af130677d"
integrity sha512-d/v94ykmfJGLTJxJ+jxlTAJSfFdD+SSf+yvXReS81hc7+9VYeEwIHVIEKOzckYnPy/MEOSVhIVKF/9wdFIIo6g==
dependencies:
"@react-spring/animated" "~9.1.2"
"@react-spring/core" "~9.1.2"
"@react-spring/shared" "~9.1.2"
"@react-spring/types" "~9.1.2"

"@react-spring/types@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/types/-/types-9.1.2.tgz#3273a182f825b38f44ead2a2f3984344abad1e2b"
integrity sha512-NZNImL0ymRFbss1cGKX2qSEeFdFoOgnIJZEW4Uczt+wm04J7g0Zuf23Hf8hM35JtxDr8QO5okp8BBtCM5FzzMg==

"@react-spring/web@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/web/-/web-9.1.2.tgz#6ec409e8559676834b67aa33f0a2d57643c3c555"
integrity sha512-E5W9Hmi2bO6CPorCNV/2iv12ux9LxHJAbpXmrBPKWFRqZixysiHoNQKKPG0DmSvUU1uKkvCvMC4VoB6pj/2kxw==
dependencies:
"@react-spring/animated" "~9.1.2"
"@react-spring/core" "~9.1.2"
"@react-spring/shared" "~9.1.2"
"@react-spring/types" "~9.1.2"

"@react-spring/zdog@~9.1.2":
version "9.1.2"
resolved "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.1.2.tgz#edf270e93d5db8a94f65d4e94e4438352fbb454f"
integrity sha512-t5RobDp12HGVh6XJ1BZ+dFdxRQ/goEapYvjH5eqQa1vC97bSqJGLiG+SM/E360DtDlh8GXAyGSesd2pXzBkpPg==
dependencies:
"@react-spring/animated" "~9.1.2"
"@react-spring/core" "~9.1.2"
"@react-spring/shared" "~9.1.2"
"@react-spring/types" "~9.1.2"

"@sinonjs/commons@^1.7.0":
version "1.8.0"
resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"
Expand Down Expand Up @@ -12188,7 +12268,7 @@ prop-types-exact@^1.2.0:
object.assign "^4.1.0"
reflect.ownkeys "^0.2.0"

prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -12318,6 +12398,11 @@ raf@^3.4.0, raf@^3.4.1:
dependencies:
performance-now "^2.1.0"

rafz@^0.1.14:
version "0.1.14"
resolved "https://registry.npmjs.org/rafz/-/rafz-0.1.14.tgz#164f01cf7cc6094e08467247ef351ef5c8d278fe"
integrity sha512-YiQkedSt1urYtYbvHhTQR3l67M8SZbUvga5eJFM/v4vx/GmDdtXlE2hjJIyRjhhO/PjcdGC+CXCYOUA4onit8w==

railroad-diagrams@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
Expand Down Expand Up @@ -12414,13 +12499,17 @@ react-refresh@0.8.3:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==

react-spring@^8.0.27:
version "8.0.27"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
dependencies:
"@babel/runtime" "^7.3.1"
prop-types "^15.5.8"
react-spring@^9.0.0-rc.3:
version "9.1.2"
resolved "https://registry.npmjs.org/react-spring/-/react-spring-9.1.2.tgz#a2392f5468bfd960976747d59361236536e1f303"
integrity sha512-xLmkierisElCQShCqAH3PpepjHhCyOK1wGSTdpvG7GGD+SbfG4Sac7wj6wrKTT5A5NUFM5OnVQUXZLe5HScIfA==
dependencies:
"@react-spring/core" "~9.1.2"
"@react-spring/konva" "~9.1.2"
"@react-spring/native" "~9.1.2"
"@react-spring/three" "~9.1.2"
"@react-spring/web" "~9.1.2"
"@react-spring/zdog" "~9.1.2"

react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.6:
version "16.13.1"
Expand Down