v9.0.0

[aleclarson]

Follow-up to #615

• rework the Controller class (a lot)
• rework the TypeScript types (with tests!)
• rewrite the Render Props API on top of hooks (share code between hooks and classes #561)
• merge fix: ordering of deleted items #626
• look for issues fixed by this PR

Changelog

Closes #335
Closes #362
Closes #383
Closes #432
Closes #436
Closes #461
Closes #535
Closes #559
Closes #571
Closes #576
Closes #591
Closes #594
Closes #613
Closes #623
Closes #624
Closes #629
Closes #633
Closes #634
Closes #637
Closes #641

[Nizarius]

Hi @aleclarson. I'm not sure that it's a right place to ask but anyway:
You said that #629 was implemented in #615 so I went to test it as I need this feature as soon as possible.

I test it from your branch https://github.com/aleclarson/react-spring/tree/wip-1 and then https://github.com/react-spring/react-spring/tree/v9.
If i pass config object with
{ duration: 0 }
to one of the next function in useTransition (update lifecycle), it overrides duration for all the other phases and all the new update lifecycles.

Could you check it please?

[aleclarson]

@Nizarius Currently, if you provide a config, it will be saved for future animations. In the case of duration, that behavior is probably a bad idea. WDYT @drcmda?

[drcmda]

@Nizarius could i see the transition code?

[Nizarius]

@drcmda i created the repository for it: https://github.com/Nizarius/Spring_test

[Nizarius]

It seems obvious that passing config object to the specific step should change only that step's config.
Besides, it changes config not only for the specific execution (to the last step on that lifecycle) but for all updates in the future.

[aleclarson]

@Nizarius That will be changed. Thanks for your input! 👍

[Nizarius]

@aleclarson thank you. By the way, if this change is not in priority I can make PR for it.
It's really crucial for me but I don't want to do double work.

[aleclarson]

@drcmda Can it be useful to update the config of existing animations? If we change this behavior, the only workaround is accessing the controllers through the ref API and manually editing the animations of each controller. But if it's rarely useful, we should do what @Nizarius wants.

@Nizarius I can take of it, thanks!

[drcmda]

you mean ongoing animations? not sure where that could ever happen.

[aleclarson]

@Nizarius Okay, should be good to go now. 🤞 LMK if anything breaks!

[Nizarius]

@aleclarson yeah, it works as expected now! Yesterday I also noticed some behaviour that was unexpected, but it seems like you fixed it too. If it appears again I'll let you know.
Thank you!

[aleclarson]

@Nizarius You don't understand when the update lifecycle triggers. Please move your comments to here: #621

[andrewdavidcostello]

Not sure if this is the right place but as this added rc.3 thought I'd put it here in case it hasn't been noticed.

https://codesandbox.io/s/issue-948-ufqf4?file=/src/index.js

The sandbox you created here works fine on 9.0.0-canary.809.5.f01ecc2 but on rc3 when manually removing items they are no longer removed, in fact if you keep clicking seems to exhibit some strange behaviour.

Also I can't pinpoint where in the code this is a problem but in Firefox 48

syntax error missing = in const declaration

Assuming there is a const somewhere being initialised without a value, not sure if this doesn't support this browser as it is quite old now.

Some compat testing given the above example, minimum browser versions that worked:

Firefox 52
Chrome 55
Safari 11
Edge 79
Yandex 17.4

[aleclarson]

@andrewdavidcostello An updated version of that demo exists here: https://codesandbox.io/s/issue-948-ggq87?file=/src/index.js (There does seem to be a hiccup, but not the one you mentioned AFAICT.)

If you ever see a demo that fails with 9.0.0-rc.3, be sure to check the v9 branch of the react-spring-examples repo before reaching out.

As for the Firefox syntax error, you're probably using the .js bundle, which has modern syntax in it. You need the .cjs.js bundle instead. More info here: #601

[andrewdavidcostello]

@aleclarson Thanks for the quick reply. I swapped out the .js with .cjs.js which fixed that Firefox error but now gives the error SyntaxError: missing ; before statement. Any thoughts?

I forked the linked demo here and applied the global style from the previous one as it seemed to throw it off without it: https://codesandbox.io/s/issue-948-lbz3b?file=/src/index.js

Seems to be the same unless I misunderstood you, items are not removed from the dom and quickly closing items seems to result in some popping back up?

[aleclarson]

now gives the error SyntaxError: missing ; before statement. Any thoughts?

Not sure. What are the line/column numbers?

items are not removed from the dom and quickly closing items seems to result in some popping back up?

By default, items are not unmounted until all transitions are at rest. That's probably what you're seeing. The "popping back up" issue will be fixed in the next version. 👍

[andrewdavidcostello]

@aleclarson Looking in Chrome 50 gave some better output. It looks to be the use of async/await within the module. Does the cjs version depend on browser support for that?

Just in case some wires are crossed on the other issue:

When an item is cancelled off manually this is left in the dom

Create new notification, as old notification is still in the dom it reappears

All clear after allowing that to progress normally. Both items are removed from dom.

[aleclarson]

It looks to be the use of async/await within the module. Does the cjs version depend on browser support for that?

Nope, that's compiled to use regenerator. Line and column numbers?

Create new notification, as old notification is still in the dom it reappears

Yeah, I've already fixed the bug causing that. Will be released soon.

[andrewdavidcostello]

@aleclarson Thanks a lot for your help really appreciate it, asking for the line and column numbers made me realise something was up so I did a prod build and everything is now a-ok. Well that and the fact I was importing animate into another file from the non cjs version 🤦

Have noticed on Chrome 50 this error:

Object.values is not a function

Which is easy to polyfill but as the cjs versions seem to be aiming for compatibility just a heads up in case you want to change that.