[Typescript] Type inference fails when useTransition styles are set via functions

[hsunpei]

🐛 Bug Report

I was trying to make an animated tree diagram using SVG and visx by modifying the example.

👉 Link to Codesandbox: https://codesandbox.io/s/tree-diagram-visx-t3q2d?file=/src/AnimatedLines.tsx

In 9.0.0-rc.3 the type inference of useTransition worked pretty well, the styles can be properly inferred as:

{
    sx: number;
    sy: number;
    tx: number;
    ty: number;
}

However, after upgrading to the newer version of react-spring, the styles is inferred as {}.

Does anyone have an idea about the cause of this problem?

To Reproduce

Steps to reproduce the behavior:
Open AnimatedLines.tsx: https://codesandbox.io/s/tree-diagram-visx-t3q2d?file=/src/AnimatedLines.tsx
In line 44, there are Typescript errors because the styles cannot be properly inferred.

While downgrading to 9.0.0-rc.3 solve this issue.

Expected behavior

In 9.0.0-rc.3 transition is inferred correctly:

After the upgrade, transition is inferred as TransitionFn<HierarchyPointLink<T>, {}>.

Link to repro (highly encouraged)

https://codesandbox.io/s/tree-diagram-visx-t3q2d?file=/src/AnimatedLines.tsx

Environment

• react-spring v9.1.2
• react v17.0.1

[joshuaellis]

Your example is very noisy, firstly have you checked the docs for transition? I know there were huge changes from rc3 to stable.

Secondly, can you reduce your sandbox down to the essence of the bug please?

[hsunpei]

Hi @joshuaellis,
Thanks so much for your prompt reply!

I tried to reproduce the issue by modifying the official example, and found that if I am not using CSS attributes as the return value such as sx in from, enter, update, and leave functions, the type inference might not be able to work as before (9.0.0-rc.3):

https://codesandbox.io/s/react-spring-transition-example-q649f?file=/src/App.tsx

Is this the intended change to restrict the use of none CSS attributes after the upgrade to the v9 official release?

[joshuaellis]

No, i don't think it's because they're a CSS value, i think it's because you're using a function to set the vals.

So if you just do:

enter: { xy: 0, ty: 100 }

It will know the types exist, but it clearly doesn't if they're the ReturnValue of a function. If you're interested in solving the issue – that's it.

[joshuaellis]

i've released a beta v9.2.5-beta.0, let me know if this resolves your issue 💪🏼

[hsunpei]

Hi @joshuaellis,
Thanks so much for the fix! The issue no longer exists with v9.2.5-beta.0 🙂