v9.0.0-beta.34 • Feedback wanted

We just released v9.0.0-beta.3 and would like some feedback from the community.
Give it a try and let us know if there are any issues or concerns. Thanks! 👍
yarn add react-spring@next

The latest canary can be found here.

noticed a useTransition bug, my modal close animation stopped working after upgrading (it's now opening with animation and closing instantly on v9)

@brunolemos Nothing stands out in your example code.
Can you reproduce in react-spring-examples, maybe?

Everything’s fine, I think there’s a minor regression on useSprings that no longer accepts ˋset({...})ˋ and requires ˋset(i => ({...}))ˋ but I believe this was undocumented anyway!

@dbismut That should still be supported. The implementation is here:
https://github.com/react-spring/react-spring/blob/ee4467412626a423702700338e965b420200c723/src/useSprings.js#L29-L37

Hmm... in my case I noticed a regression when upgrading to @next, I'll have another look.

This is a nice idea @aleclarson let's make this a perfect release for everyone 😍👍

@aleclarson Here is a csb that shows the problem:
https://codesandbox.io/s/003pl8m2vn
You can uncomment line 12 and comment line 13 to see the difference when dragging the colored squares or clicking the button. In the first case, only the first square moves.
I can create an issue if you'd like!

Hello there!
I've just found this issue and would like to mention that I created an issue (and repo reproducing it) that affects 9.0.0-beta.1, but also 8.0.19.
https://github.com/react-spring/react-spring/issues/646
Thank you for your time and work, react-spring is awesome I've been using it since 5.x!

The beta speeds up TypeScript considerably for me (resolving #613), but the typings seem to be buggy, causing errors where there shouldn’t be any. I’ve opened a separate issue for this: #653

9.0.0-beta.2 is now available! 🎉 Please give it a test drive. 👍

lots of TypeScript fixes
all entry points now have a .d.ts module
minor fixes to useSpring 92c0e484eb837f59d079ea31f634974bb3a2b291
minor fixes to useTrail 7c557bd8d7b45c73433f47810e48217ba376b5ed
added support for config.decay to be a number

9.0.0-beta.3 is now available 👀😲

I noticed a regression with useTrail in this release, so when the number of items is 0 then i get an error saying Cannot read props of undefined.~
I'll try to create a repro when i get the time.
code snippet:
const data = [];
const trails = useTrail(data.length, {
  config: config.stiff,
  from: {
    rotate: -90
  },
  rotate: 0,
});

The transition component crashes when the children is a boolean instead of a function but this change from 8.0.19 is not specified as breaking change on the changelog.
Created a minimal repro case, hope it helps: https://codesandbox.io/s/vv9jk778ly

@sjnonweb Bug confirmed: https://codesandbox.io/s/04058yr1pv

@dbismut An issue would be great! https://github.com/react-spring/react-spring/issues/642#issuecomment-485829276

@Ne3l Thank you. That will be fixed in the next beta.

@brunolemos Can you open a new issue for this: https://github.com/react-spring/react-spring/issues/642#issuecomment-485619594
Maybe you or someone else can reproduce in a CodeSandbox? 🚀

9.0.0-beta.4 is now available 🐉
See the commits here: https://github.com/react-spring/react-spring/compare/7c775a7e2fc8e2a0061a8762665c274c392b09b7...a0c2e843fc899052fd2ec3967aa9be92fe0cf324

@aleclarson no big deal at all, just wanted to say that this line seems useless in useTrail:
https://github.com/react-spring/react-spring/blob/31200a79843ce85200b2a7692e8f14788e60f9e9/src/useTrail.js#L30

@dbismut I noticed the same thing and removed it in the first beta: 7c557bd8d7b45c73433f47810e48217ba376b5ed

9.0.0-beta.5 is now available 🎉
See the commits here: https://github.com/react-spring/react-spring/compare/2fc8d534439de4561e9812db0991e54500e972c6...4e2cbbaba586e6091ac075e65b1e41681a68519a

Strange, I'm getting the Type instantiation is excessively deep and possibly infinite.ts(2589) error from this:
  const transitions = useTransition(snacks, item => item.key, {
    from: { opacity: 1, height: 0, life: '100%' },
    enter: item => async (next: SpringUpdateFn) =>
      await next({ opacity: 1, height: refMap.get(item).offsetHeight, config }),
    leave: item => async (next: SpringUpdateFn) => {
      console.log('LEAVING');
      await next({
        life: '0%',
        config: { ...config, duration: item.persisting ? 0 : SNACKBAR_DURATION },
      });
      await next({ height: 0, config });
      await next({ opacity: 0, config });
    },
  });
  return transitions.map(({ key, item, props: { life, ...style } }) => {
          return <animated.div key={key} style={style} />;
        })

Getting the error in all v9 betas

@ehellman Please provide a CodeSandbox. Thanks! 👍

@aleclarson amazing work on these betas, it's exciting to see it evolving so fast!
I can also see the TS error @ehellman mentioned above. Here's a repro:
import React from 'react';
import { View } from 'react-native';
import { animated, useSpring } from 'react-spring/native';

const AnimatedView = animated(View);

export const MyComponent = () => {
  const style = {
    backgroundColor: 'red',
    height: 100,
    width: 100,
  };

  const motionProps = useSpring({
    from: { opacity: 0, scale: 0 },
    opacity: 1,
    scale: 1,
  });
  const motionStyle = {
    ...style,
    opacity: motionProps.opacity,
    transform: [{ scale: motionProps.scale }],
  };

  return (
    <View>
      <AnimatedView style={motionStyle} /> // THIS LINE THROWS THE ERROR
    </View>
  );
};

Error:
error TS2589: Type instantiation is excessively deep and possibly infinite.

Tested with 9.0.0-beta.5.

Thank you for your work on this! I'm very excited to have a fully typed version of react-spring.
It seems like the interpolate helper is no longer exported?
Useful in situations like this:
import React from 'react';
import { animated, interpolate, useSprings, useTrail } from 'react-spring';

function Component(items: unknown[]) {
  const trail = useTrail(items.length, {
    from: {
      y: 20
    },
    y: 0,
  });

  const [springs, set] = useSprings(items.length, (i) => {
      return {
        s: 1,
      };
  });

  return trail.map(({ y }, i) => {
    const { s } = springs[i];
    return (
      <animated.div
        onMouseEnter={() => {
          set(i2 => {
            if (i2 === i) {
              return {
                s: 1.1,
              };
            }

            return {
              s: 1,
            }
          });
        }}
        style={{
          transform: interpolate([y, s], (y, s) => {
            return `scale(${s}) translateY(${y})%`
          })
        }}
      />
      );
  });
}

Great work!
I found a regression, server side rendering no longer works:
6:47:27 PM: error Building static HTML failed for path "/projekt/orion"
6:47:27 PM: See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
6:47:27 PM:   616 |   if (!active) {
6:47:27 PM:   617 |     active = true;
6:47:27 PM: > 618 |     if (manualFrameloop) manualFrameloop();else requestAnimationFrame(update);
6:47:27 PM:       |                                            ^
6:47:27 PM:   619 |   }
6:47:27 PM:   620 | };
6:47:27 PM:   621 |
6:47:27 PM:
6:47:27 PM:   WebpackError: TypeError: requestAnimationFrame is not a function

Seems to have been solved previously here: https://github.com/react-spring/react-spring/commit/7213e91b7ca6fd83c4ea4582cf950c44ae14deba#diff-fff0687320c3122269fa9422e7739eb0
Also seeing the type instantiation too deep error, with useSprings on web.
error TS2589: Type instantiation is excessively deep and possibly infinite.

v9 is really nice (fully typed ftw), but I'm also running into the server side rendering issue with gatsby. This is with v9.0.0-beta.5

9.0.0-beta.6 is now available 🎉
See the commits here: https://github.com/react-spring/react-spring/compare/dd6c5fa...6ba72d2
Note: I haven't looked into the "excessively deep" issue yet (see here).

@brunolemos Can you open a new issue for this: https://github.com/react-spring/react-spring/issues/642#issuecomment-485619594
Maybe you or someone else can reproduce in a CodeSandbox? 🚀

@aleclarson So, latest now points to 9.0.0-beta.6. That's intended, right?

@phaistonian Whoops, no. Thank you! 👍

9.0.0-beta.7 is now available :tada:
https://github.com/react-spring/react-spring/compare/5c560cb...86d5118
Notable changes:

Changes to the from prop are now respected when no animations have started yet.
Default spring precision now defaults to 0.005 instead of 0.01. This should fix any visual glitches at the end of every spring animation.
Warn when a useChain ref has no animations. This can happen when useSpring is called from a parent component, and then its ref is passed into a child component, which passes the ref into a useChain call. The useSpring call won't have any animations queued up until its child components have finished rendering, and this breaks the chain.
A new build script, so you can do yarn build -t web -t native --watch when you're working in a local react-spring git clone.
Changing the cancel prop from true to false should always trigger an animation(s) when it makes sense

Hi, I'm using react-spring with typescript, and attempting to build with beta.5 and beta.6 gives me type errors: ...react-spring/lib/common"' has no exported member 'SpringValue'.. Using beta.5 i dont get any type errors. In addition, importing animated causes visual studio code to slow down quite a bit, probably due to how the typings are implemented.. I believe this may be related to #613.

Default spring precision now defaults to 0.005 instead of 0.01. This should fix any visual glitches at the end of every spring animation.

Wouldn't that affect performance? Maybe increase the precision internally only when about to hit the end of the animation?

@brunolemos The precision is only used to know when a spring has come to a full stop. It should have no bearing on performance. If you can prove otherwise, let me know.

9.0.0-beta.8 is now available :tada:
https://github.com/react-spring/react-spring/compare/0ced68d7b3023156f07ae1e225c6de8c50895d58...7a9d6aaeefd80938514a0d727a4fb669019567a1
Notable changes:

useSpring now returns a new object on every call
The onFrame prop now receives a new object on every call
Avoid unnecessary copying of internal data structures when updating animations
Fixed a bug where the cancel prop (when used with a non-zero delay) could affect updates that were queued later on (especially other delayed updates)
Changed the destroy method to prevent all future updates forever
Added a reset method to the Controller class that does what the destroy method used to do (plus a bug fix or two)

It seems like since beta.5 typescript compilation has been broken<EMAIL_ADDRESS>node_modules/react-spring/lib/interpolation.d.ts:32:14 - error TS2304: Cannot find name 'OneOrMore'.

32     parents: OneOrMore<SpringValue>,
                ~~~~~~~~~

node_modules/react-spring/lib/interpolation.d.ts:38:14 - error TS2304: Cannot find name 'OneOrMore'.

38     parents: OneOrMore<SpringValue>,
                ~~~~~~~~~

node_modules/react-spring/lib/interpolation.d.ts:63:54 - error TS2344: Type 'In' does not satisfy the constraint 'readonly any[]'.

63     config: InterpolatorConfig<Out> | InterpolatorFn<In, Out>
                                                        ~~

node_modules/react-spring/web.d.ts:1:10 - error TS2305: Module '"./lib/common"' has no exported member 'SpringValue'.

1 import { SpringValue, Solve, AssignableKeys } from './lib/common'

I'm seeing Type instantiation is excessively deep and possibly infinite.ts(2589)
{
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-spring": "^9.0.0-beta.8",
    "typescript": "^3.4.5"
  },
  "devDependencies": {
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4"
  }
}

import { animated, useTransition } from "react-spring";

export const Test: React.FC = () => {
  const transitions = useTransition(true, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
  });

  return (
    <>
      {transitions.map(
        ({ item, key, props }) =>
          item && <animated.p style={props} key={key}>Words...</animated.p>,
          //      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
          //      Type instantiation is excessively deep and possibly infinite.ts(2589)
      )}
    </>
  );
};

export default Test;

However I also made a Codesandbox and that doesn't error.

There seem to be regression/change of behavior with useTransition where values are cached by key. This is problematic for us because we use this mechanism to skip transitions by using the same key, but still need the new object to be propagated to the view.
Sample:
react-spring 8 - https://codesandbox.io/s/ly068v5x2q
react-spring 9 - https://codesandbox.io/s/434popoxyw
In both cases no animation is expected (correct as the key is always the same), however in v8 item holds newly propagated value whereas in v9 item holds value from previous render.
Is this intended change?

using<EMAIL_ADDRESS>using the example here https://www.react-spring.io/docs/props/gotchas for the manual api
class Test extends React.Component {
  state = { show: true };
  animations = new Controller({ opacity: 0 });
  toggle = () => this.setState(state => ({ show: !state.show }));
  render() {
    const props = this.animations.update({ opacity: this.state.show ? 1 : 0 });
    return (
      <>
        <button onClick={this.toggle}>click</button>
        <animated.div style={props}>I will fade</animated.div>
      </>
    );
  }
}

it just doesn't actually work. any ideas?
also fyi the set state block isn't accessing prevState properly
-toggle = () => this.setState(state => ({show: !show}))
+toggle = () => this.setState(state => ({show: !state.show}))

Thank you for this release :). I tried the latest version and it seems like not all values are animated anymore. For Example the strokeDashoffset. If I try react-spring/renderprops it works. Is this intended?
<Spring
    from={{ strokeDashoffset: 157 }}
    to={{ strokeDashoffset: shouldAnimate ? 0 : 157 }} config={{ duration: 1000, easing: easeOut }}>
    { style => (
      <svg viewBox="0 0 60 60">
        ...
      </svg>
    )}
  </Spring>

Hi all,
I'm seeing a TypeScript error when using ref's (and use the ref's in a useChain hook).
const titleRef = useRef();

const titleAnimation = useSpring({
  from: {
    y: 100,
  },
  to: {
    y: 0,
  },
  ref: titleRef,
});

Type 'MutableRefObject<undefined>' is not assignable to type 'MutableRefObject<undefined> & RefObject<SpringHandle>'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<SpringHandle>'.
    Types of property 'current' are incompatible.
      Type 'undefined' is not assignable to type 'SpringHandle | null'.ts(2322)

The error makes sense, as useRef is actually returning MutableRefObject<undefined>, but useSpring is expecting something else.

Regarding change to:

Repurposed onStart prop
The onStart prop is now called whenever an animated key is about to start animating to a new value. Previously, it was called every time the props were updated (even when no animations were actually started), which proved to be unreliable.

Though onStart is not called, the onRest is still called even though no animation was not started. https://codesandbox.io/s/dreamy-sea-3el3n

@aocenas Thanks for pointing that out! It's probably the incorrect behavior, but onRest currently means "all updates have completed without cancellation" instead of "all animations have come to a halt". I'll see how I can ensure the latter instead.
Do you think cancelled animations should trigger onRest? It gets tricky, because onRest is often used for chaining animations together, and cancelling one animation typically implies you want to cancel any dependent animations too (eg: the remaining animations in a chain).

@BowlingX I would recommend opening an issue for https://github.com/react-spring/react-spring/issues/642#issuecomment-492613412. Thanks! 👍

I had been having some issues with VSCode performance recently and I spent some time looking into it tonight—for this particular project it seems that the new TS typings are the cause for a good bulk of my Intellisense / tsserver slowdown. Here are some rough numbers from the VSCode process monitor.
File at rest (with v9 typings active):

1 second after save/change:

File at rest (typings commented out):

It's hard for me to even get a picture of the jump without the typings, as it garbage collects pretty quick. It does seem a similar quick spike in CPU usage, but that's pretty expected with the language server. Looking at the typings themselves, there's some pretty crazy stuff going on (hard API to type), so I'm not entirely surprised to find this. Something we probably want to keep an eye on though, as it's been a real drag on my TS dev experience lately... enough that I've disabled these typings for now.
This isn't an entirely unique problem as styled-components has recently had some issues.

@aleclarson Well if the onRest should mean "all animations have come to a halt" than I think it should be called also on canceling (meaning someone called stop() right?) but maybe with boolean argument to mark whether the animation is finished (or in other words that the value of the animation equals the configured to value). Or if it is already possible to get that from current API it just needs to be in the docs. That way you could do
onRest: () => {
  if (!canceled) {
    // more animations
  }
}

@ksaldana1 Have the same issue both in VS code and WebStorm. Was much worse in 3.4 TS, in 3.5 it is much better but still ended up using my own simplified typings.

https://github.com/react-spring/react-spring/issues/325
@aleclarson
I try v9-beta with nextjs look like animation flashing again when I change route with animation.
It works fine on v8.
v8 example
https://react-spring-325-aszmjdhnnv.now.sh
v9 example
https://react-spring-325-tkuptdounw.now.sh
codesandbox (code example but this behavior does not effect on codesandbox)
https://codesandbox.io/s/reactspring-325-vu8en

try to change route between about page and contacts page slowly, you will see flashing white background before they animate.

9.0.0-beta.9 is now available :tada:
https://github.com/react-spring/react-spring/compare/1e1c19d...2261d9b
Notable changes:

Types should be ~100% working now (and hopefully not slow anymore)
No longer relying on .d.ts modules for types
Passing a functional component to animated is now supported
Convert the frameloop from a singleton to the FrameLoop class
Add the frameLoop global (for custom FrameLoop instance)
Add the skipAnimation global (for making all animations instant)
Export the isAnimated function (used to test for Animated nodes)
Rewrite the Parallax component in TypeScript
Event props passed to useTrail now receive a spring index
Plenty of bug fixes for useTrail
New target zdog available as react-spring/zdog or @react-spring/zdog
We now use a monorepo!!

Targets are available as @react-spring/web etc
The react-spring package can still be used like before, but the react-spring/renderprops module no longer exists (use import { Spring } from 'react-spring' instead)
The react-spring/universal package is a mirror of @react-spring/core
Our fork of Animated (used internally) is available as @react-spring/animated
See the targets and packages directories for source code

Thanks for your hard work! However, 9.0.0-beta.9 did not fix the issue with slow typings. Importing animated still causes VS Code to run very slowly.

9.0.0-beta.10 is now available! 🎉
Notable changes:

Hotfix for invalid tiny-invariant import
Added @react-spring/envinfo for bug reports

@aleclarson

The react-spring package can still be used like before, but the react-spring/renderprops module no longer exists (use import { Spring } from 'react-spring' instead)
Look like import { Spring } from 'react-spring'  does not work in 9.0.0-beta.10.

In 9.0.0-beta.10,  the main entry point file (index.cjs.js) is missing.

I just released<EMAIL_ADDRESS>with a hotfix for the incorrect main module.

In 9.0.0-beta.10, the main entry point file (index.cjs.js) is missing.

Note: That module should not be referenced directly, since it doesn't exist anymore.

@aleclarson It seems that latest is, again, pointing to beta :)

<EMAIL_ADDRESS>has not specified a types-field in package.json, so the types are currently not working :)

It seems that latest is, again, pointing to beta :)

Ah, the lovely default behavior of npm publish 😅 That's what I get for rushing! Sorry :S

<EMAIL_ADDRESS>has not specified a types-field in package.json, so the types are currently not working :)

Whoops. I didn't think that through enough. Fixed now in v9.0.0-beta.12!

I've tried updating to the latest beta but get this strange error when using within Storybook. Maybe this makes more sense to you than it does me:

@bmcmahen Can you reproduce and give me a link? All packages come with sourcemaps. Not sure how your project is setup, but you should be able to use the sourcemaps for easier debugging. If not, we should fix that.

@aleclarson I get the same error as @bmcmahen on a standard gatsby site

@aleclarson here's a branch with nothing changed except for the new version of react-spring: https://github.com/bmcmahen/react-gesture-view/tree/upgrade-react-spring
You can clone that branch, install using yarn, and run storybook using yarn run storybook

@bmcmahen I'm not seeing the error. Did you run yarn --force like I asked?

Strange. Yep, I've used yarn --force. You're using the correct branch? Master is using an older version of react-spring and it still works.

@bmcmahen Oops, looks like I ran yarn instead of yarn --force earlier. 😅 Taking a look!

Note: For anyone using webpack with react-spring, add the following to your webpack.config.js for sourcemaps to be used.
devtool: 'source-map',
module: {
  rules: [{
    test: /\.js$/,
    loader: require.resolve("source-map-loader"),
    enforce: 'pre',
  }]
}

@bmcmahen @marcuslindfeldt It's a webpack bug. See here: https://github.com/webpack/webpack/issues/9253

I'm attempting to upgrade to the 12 beta, but getting yarn errors:

9.0.0-beta.16 is now available! 🎉
Notable changes:

All src files are published to npm
Removed sourcesContent from sourcemaps
The bundles aren't minified anymore (which avoids the webpack bug)

error [project-folder]/node_modules/@react-spring/shared: Command failed.
Exit code: 1
Command: node postinstall.js
Arguments:
Directory: [project-folder]/node_modules/@react-spring/shared
Output:
fs.js:115
    throw err;
    ^

Error: ENOENT: no such file or directory, symlink '@react-spring/shared' -> 'node_modules/shared'
    at Object.symlinkSync (fs.js:902:3)
    at Object.<anonymous> ([project-folder]/node_modules/@react-spring/shared/postinstall.js:10:4)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

9.0.0-beta.18 should fix the postinstall errors. 👍

v9.0.0-beta.20 is now available! 🎉
Notable changes

No more postinstall scripts

I haven't dug into it yet - but beta8 works fine - however if I update to 20 I get this:

(We are using the Spring component in a few places, no actual hooks implementations atm)

@amadeus In my experience, that happens most easily because of multiple react packages with different versions being imported by the bundle.

Pretty sure we would have a ton of other issues if we imported multiple versions of react, but I will dig into Yarn and see if it's showing multiple copies.
Here is an example usage of how we use Spring:
https://gist.github.com/amadeus/62544af6d4f12e8f30afdb3dc3bd5a5a

I would check the sourcemapped node_modules in Chrome devtools too.

Using yarn - it appears there's only 1 version of react and react-dom:

Something interesting I am noticing - in node_modules there is a both a @react-spring folder and a react-spring folder. Is this intended? (there's only 1 item in package.json referring to react-spring

@amadeus Yeah it is. The react-spring package is now an umbrella for all platforms. It doesn't contain any of the actual implementation anymore.

We figured it out - turned out due to our yarn workspaces configuration - it was importing 2 copies of the same version - due to some relative naming shenanigans.

I tried beta.20 and have a question (may be an issue)
I want to position my animated component only "from" or, like examples do.
how can I pass the position property to style which require PositionProperty type, when getValue() or interpolate() return string?

@kodai3 Please make an issue for your question, and please include a CodeSandbox of what you've tried.

I have issues building with v 9.0.0-beta.20 and typescript version 3.3.3333
We get the following error
`
ERROR in<EMAIL_ADDRESS>8:88 '>' expected.
6 | export declare const is: {
7 |     arr: IsArray;

8 |     obj: (a: T) => a is Exclude<T & Indexable, Function | readonly any[]>;
|                                                                                ^
9 |     fun: (a: unknown) => a is Function;
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>8:91 ',' expected.
6 | export declare const is: {
7 |     arr: IsArray;
8 |     obj: (a: T) => a is Exclude<T & Indexable, Function | readonly any[]>;
|                                                                                ^
9 |     fun: (a: unknown) => a is Function;
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>8:93 ',' expected.
6 | export declare const is: {
7 |     arr: IsArray;
8 |     obj: (a: T) => a is Exclude<T & Indexable, Function | readonly any[]>;
|                                                                                ^
9 |     fun: (a: unknown) => a is Function;
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>8:94 Expression expected.
6 | export declare const is: {
7 |     arr: IsArray;
8 |     obj: (a: T) => a is Exclude<T & Indexable, Function | readonly any[]>;
|                                                                                ^
9 |     fun: (a: unknown) => a is Function;
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>9:28 ';' expected.
7 |     arr: IsArray;
8 |     obj: (a: T) => a is Exclude<T & Indexable, Function | readonly any[]>;
9 |     fun: (a: unknown) => a is Function;
|                            ^
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
12 |     und: (a: unknown) => a is undefined;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>9:31 ';' expected.
7 |     arr: IsArray;
8 |     obj: (a: T) => a is Exclude<T & Indexable, Function | readonly any[]>;
9 |     fun: (a: unknown) => a is Function;
|                               ^
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
12 |     und: (a: unknown) => a is undefined;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>10:28 ';' expected.
8 |     obj: (a: T) => a is Exclude<T & Indexable, Function | readonly any[]>;
9 |     fun: (a: unknown) => a is Function;
10 |     str: (a: unknown) => a is string;
|                            ^
11 |     num: (a: unknown) => a is number;
12 |     und: (a: unknown) => a is undefined;
13 |     boo: (a: unknown) => a is boolean;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>10:31 ';' expected.
8 |     obj: (a: T) => a is Exclude<T & Indexable, Function | readonly any[]>;
9 |     fun: (a: unknown) => a is Function;
10 |     str: (a: unknown) => a is string;
|                               ^
11 |     num: (a: unknown) => a is number;
12 |     und: (a: unknown) => a is undefined;
13 |     boo: (a: unknown) => a is boolean;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>11:28 ';' expected.
9 |     fun: (a: unknown) => a is Function;
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
|                            ^
12 |     und: (a: unknown) => a is undefined;
13 |     boo: (a: unknown) => a is boolean;
14 | };
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>11:31 ';' expected.
9 |     fun: (a: unknown) => a is Function;
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
|                               ^
12 |     und: (a: unknown) => a is undefined;
13 |     boo: (a: unknown) => a is boolean;
14 | };
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>12:28 ';' expected.
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
12 |     und: (a: unknown) => a is undefined;
|                            ^
13 |     boo: (a: unknown) => a is boolean;
14 | };
15 | export declare function useOnce(effect: React.EffectCallback): void;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>12:31 ';' expected.
10 |     str: (a: unknown) => a is string;
11 |     num: (a: unknown) => a is number;
12 |     und: (a: unknown) => a is undefined;
|                               ^
13 |     boo: (a: unknown) => a is boolean;
14 | };
15 | export declare function useOnce(effect: React.EffectCallback): void;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>13:28 ';' expected.
11 |     num: (a: unknown) => a is number;
12 |     und: (a: unknown) => a is undefined;
13 |     boo: (a: unknown) => a is boolean;
|                            ^
14 | };
15 | export declare function useOnce(effect: React.EffectCallback): void;
16 | export declare function useForceUpdate(): () => void;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>13:31 ';' expected.
11 |     num: (a: unknown) => a is number;
12 |     und: (a: unknown) => a is undefined;
13 |     boo: (a: unknown) => a is boolean;
|                               ^
14 | };
15 | export declare function useOnce(effect: React.EffectCallback): void;
16 | export declare function useForceUpdate(): () => void;
×<EMAIL_ADDRESS>ERROR in<EMAIL_ADDRESS>14:1 Declaration or statement expected.
12 |     und: (a: unknown) => a is undefined;
13 |     boo: (a: unknown) => a is boolean;
14 | };
| ^
15 | export declare function useOnce(effect: React.EffectCallback): void;
16 | export declare function useForceUpdate(): () => void;
17 | /** Use a value from the previous render */
× Compilation failed
[ERROR!] Task frontend:build failed with Compilation error
[ERROR!] build failed
[ERROR!] Compilation error
`

@mikkno The latest beta requires TypeScript 3.5+

The latest beta (v20) is working well for me and the new typescript definitions are great! No issues with importing. Thanks for the hard work @aleclarson.

v9.0.0-beta.21 is now available! 🎉
https://github.com/react-spring/react-spring/compare/05f1122bc7ced02c14df6fc6952340c96437a99d...f7c18d667cc2c4df0fb85d337140099a0a3084c2
Notable changes

Added animated.Image to @react-spring/native
Be less strict about interpolate return type
Fix passing function components to animated function
Simplify ref forwarding in animated function
Remove createAnimatedRef global

Is ref forwarding broken? 🤔
https://codesandbox.io/s/infallible-water-z6qtq

@ElForastero Only when ref is attached to child element of <Transition>. Working on a fix now. Thanks for reporting! ❤

v9.0.0-beta.22 is now available! 🎉
https://github.com/react-spring/react-spring/compare/f7c18d6...fb03c2d
Notable changes

Fixed ref prop with <Transition> children
Fixed ref prop with useTransition
Minor tweaks to typings

@aleclarson just wanted to let you know that I was running v9.0.0-beta.8 and hitting the ref issue, upgraded to v9.0.0-beta.22 and it worked! Thanks for your work!

beta.22 is giving me this error:
Type '{ [x: string]: SpringValue<any>; opacity: SpringValue<number>; pointerEvents: SpringValue<string>; }' is not assignable to type '{ alignContent?: string | SpringValue<string>; alignItems?: string | SpringValue<string>; alignSelf?: string | SpringValue<string>; animationDelay?: string | SpringValue<string>; ... 741 more ...; vectorEffect?: "-moz-initial" | ... 6 more ... | SpringValue<...>; }'.
  Types of property 'pointerEvents' are incompatible.
    Type 'SpringValue<string>' is not assignable to type '"all" | "fill" | "stroke" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "none" | "visible" | "painted" | "visibleFill" | "visiblePainted" | "visibleStroke" | SpringValue<...>'.
      Type 'SpringValue<string>' is not assignable to type 'SpringValue<PointerEventsProperty>'.
        Type 'string' is not assignable to type 'PointerEventsProperty'.  TS2322

    111 |   return (
    112 |     <ModalTriggerContainer>
  > 113 |       <Button style={buttonSpring} onClick={() => setIsOpen(true)}>
        |               ^
    114 |         {label}
    115 |       </Button>
    116 |       <ModalOverlay style={modalContainerSpring}>

@louisgv Please see #702

I think the culprit is pointerEvents that I have this in the spring:
const openStyle = {
  opacity: 1,
  pointerEvents: 'all'
}

const closeStyle = {
  opacity: 0,
  pointerEvents: 'none'
}

Is there an updated method for supporting IE11 with the new changes to the overall project structure? The webpack config from before:
alias: {
   'react-spring$': 'react-spring/web.cjs',
   'react-spring/renderprops$': 'react-spring/renderprops.cjs'
}

Don't seem to work for the newest beta versions.

@anthonysapp Thanks for reporting! 👍
The renderprops module no longer exists. Do this instead:
import { Spring } from 'react-spring'

Also, looks like react-spring/{target}.cjs is currently broken. I'll try to fix that when I get time. For now, you can use @react-spring/{target}/index.cjs instead.

@anthonysapp Thanks for reporting! 👍
The renderprops module no longer exists. Do this instead:
import { Spring } from 'react-spring'

The react-spring/web.cjs import should work, though.

@aleclarson Yes, absolutely, the renderprops thing was redundant as I am using the hooks api :)
I am, however, getting an error in ie11. It's a syntax error - seems to be related to the the "Animated" class declaration in @react-spring/animated/index.cjs.js

v9.0.0-beta.23 is now available! 🎉
Notable changes

Fix rollup config that accidentally skipped Babel
Stop using tslib since @babel/runtime is all we need

I got this error after upgrading to 22/23:
index.js:1437 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.  Thanks 👍

@aleclarson I can't quite reproduce the exact structure, but the current error I saw above is now omitted by the fix I included in the codesandbox. If I encounter this bug again, I will definitely try to spend more time on the reprod

v9.0.0-beta.22 is now available! 🎉
https://github.com/react-spring/react-spring/compare/0b8011c...144a6a5
Notable changes

Added the onAnimate prop, which is called whenever the animations are about to be updated. This is useful for inspecting the controller and its props after they've been "diffed".
Fixed strange "onRest is not a function" bug reported by #703
Fixed argument type of onStart prop
Fixed buggy useForceUpdate (internal hook)

v9.0.0-beta.24 is now available! 🎉
https://github.com/react-spring/react-spring/compare/0b8011c...144a6a5
Notable changes

Added the onAnimate(props, controller) prop, which is called whenever the animations are about to be updated. This is useful for inspecting the props of each update after they've been merged into the controller.
Fixed strange "onRest is not a function" bug reported by #703
Fixed argument type of onStart prop
Fixed buggy useForceUpdate (internal hook)

Latest betas 22, 24 doesn't seem to work in IE11

@taikn Can you open an issue for that, and please provide a repro. Thanks!

@taikn What errors are you seeing? Try again with the latest beta.

v9.0.0-beta.27 is now available! 🎉
https://github.com/react-spring/react-spring/compare/144a6a5...e40df28
Notable changes

Fixed transform animations in @react-spring/native
The onFrame event prop now receives the last frame again
The onRest event prop is no longer called when no animations have actually started
The useSprings function now has proper typings for its update function (by @barry4dev)
The from prop of useTransition now properly receives an index when it's a function
The animated function should work in "concurrent mode" now
The animated function now caches its result on the original component if possible, and it prefers to return the cached result if the given component was ever passed in earlier
Added the getComponentProps global for modifying the props of animated components
Made isAnimated checks faster by looking for a symbol instead of using instanceof

I've tried latest beta and still seeing syntax error, please check the screen below:

Maybe it has something to do with declaring variable with let, which is not recognized by IE11?

@taikn Try adding.
'react-spring$': 'react-spring/web.cjs',

To your resolve.alias array in your webpack config.
The default module points to the ES6 version, not the commonjs one.

thx @phaistonian, but I've already got this alias in my webpack config and it still doesn't work in IE11 ( react-spring@beta 27), though it was working with react-spring@beta 8.

@phaistonian That shouldn't be necessary. The main field points to the .cjs.js bundle.
@taikn I double-checked the files published to npm, and I'm not seeing any let statements in the .cjs.js bundles.

Hi , I used while(1) in ^9.0.0-beta.27, but it was not the expected loop, but only run once

@GSZS Open an issue with a repro. Thanks! 👍

@aleclarson Indeed the .cjs.js files are suitable for IE11. The problem might be that though main field inside package.json points to web.cjs.js  - the web.cjs.js itself is pointing to:
...
var web = require('@react-spring/web');
...

which is picking up index.js written in ES6 and not the index.cjs.js

@taikn Hmm, is there some way to confirm that? The main field of @react-spring/web also points to a .cjs.js module.

It does, but the imports in @react-spring/web .cjs.js seem to point to index.js of the corresponding modules:
...
var core = require('@react-spring/core');
var stringInterpolation = require('@react-spring/shared/stringInterpolation');
var colorNames = _interopDefault(require('@react-spring/shared/colors'));
var animated$1 = require('@react-spring/animated');
...

Ahh there it is. Those @react-spring/shared/* imports are the culprit! We'll need to fix the Rollup config then.

v9.0.0-beta.28 is now available! 🎉
https://github.com/react-spring/react-spring/compare/e40df28...ad6184b
Notable changes

Fixed invalid import in Parallax addon
Fixed invalid imports in CommonJS builds
Fixed crash when to prop is defined but not an object
Fixed infinite await in async to prop when an update call doesn't start any animations

It looks like 274afadb11ec8d3612c0c575a1e69d769876ffa9 introduced an issue. @react-spring/shared does not currently have a rollup config that would output .cjs.js files, yet these are now being referenced as a result of that change.

A new bug somewhere after beta 24 and before 27. It seems usePrev logic is wrong and causing useSprings to not pick up the initial springs you set, and also never update.
I have something like this:
const [springs, set] = useSprings(3, i => ({
    xyz: [i * 30, 0, -i * 50],
    config: { mass: 1 + i * 2, tension: 700 - i * 100, friction: 30 + i * 20 },
  }))

And if I set the debugger inside useSprings I'm seeing hasNewSprings === false on initial render, which means state.springs never is set to anything. Then when I try and run set later on (from console) the update function just sees an 0 length array and doesn't do anything.

@nhardy That's a good point. I forgot that @react-spring/shared doesn't even use Rollup, so I misdiagnosed the problem. We already target ES5 in packages/shared/tsconfig.json, so now I'm wondering where this IE11 that @taikn reported is coming from.

@aleclarson @react-spring/web/index.cjs.js has following imports besides shared modules(which are in ES5 anyways):
var animated$1 = require('@react-spring/animated');
var core = require('@react-spring/core');

I am wondering, if it should explicitly point to .cjs.js files like this:
var animated$1 = require('@react-spring/animated/index.cjs');
var core = require('@react-spring/core/index.cjs');

to pick the right cjs modules? Otherwise its picking the default ES6 modules? Or my assumption is wrong and imports in cjs.js files automatically pick the .cjs files?

@taikn You should check the main field in each<EMAIL_ADDRESS>file. I'm pretty sure they all point to .cjs.js modules.

@aleclarson true, problem seems to be with webpack - it is prioritising module over main:
https://github.com/webpack/webpack/issues/5756
one workaround could be to add browser to package.json pointing to cjs.js which has priority over module

@taikn You can tell webpack to ignore the module field (see here). Also, you could just have webpack compile the ESM bundles to ES5 with Babel.

@aleclarson Thanks for your suggestions, however modifying resolve.mainFields affects all installed packages and might lead to unpredictable results and adding exception to transpile react-spring with babel-loader seems cumbersome...

@taikn If you're targeting IE11, you should be compiling your whole bundle to ES5 with webpack, no? Which means you probably should ignore the module field of all packages.

@aleclarson Not really, its transpiling the app files, but not the packages inside node_modules, which are excluded from babel, by default webpack just loads them as they are.

@taikn Ah I see. It's very confusing that webpack expects(?) the module field to contain ES5 code when import/export syntax was introduced in ES6.

Okay, I found proof that we're indeed doing it wrong. The module field should preserve import/export like we're already doing, but everything else should be transpiled to ES5.

v9.0.0-beta.30 is now available! 🎉
https://github.com/react-spring/react-spring/compare/d9aef95...4803f24
Notable changes

ESM bundles are now transpiled to ES5 as they should be
Deprecated the value.interpolate() method in favor of value.to()
Deprecated the interpolate() function in favor of to()

@aleclarson he problem is that this adds a ton of code and also causes perf problems for 90% of our users that use evergreen. even babel recommends to not transpile es5 these days: https://babeljs.io/docs/en/babel-preset-env#options (> 0.25%, not dead), but that will still include internet explorer, so most patches will ship. see: https://jamie.build/last-2-versions
unfortunately he's had his twitter account blocked, he made a side by side comparison and it was insane.
basically the idea would be to concentrate on the mass of people and leave polyfilling up to the users. making the cjs bundles fully es5 would also be ok.

@drcmda I made a tweet recently asking for input about having a source field in package.json for users that want to target modern browsers. No one replied, but I think it's probably the best way forward. As I mentioned above, the module field must contain ES5 syntax (see here). Having ES6+ syntax in the ESM bundle breaks webpack, so it's a non-starter.

I might be doing something wrong but I can't get render props to work in 9 beta3.0.
For example basic Trail from manual won't bugde. Here is sample code:
https://codesandbox.io/s/renderprops-gzie7
Steps to reproduce.
If you reload it on 9beta30 the trail items don't animate at all.

If you change dependency to official release (and make sure to import Trail from renderpros now), all animations start to work.

What am I missing?

@aleclarson have you measured how large the bundle impact is, what does size-snapshot say? or some light perf checkup to see if the perf regressions are drastic. if it's not that much i think it's fine to go es5, though something in me feels weird having to support javascript from half a decade ago with regressions, knowing that so many authors do push es2015 (like sindre). but if perf for instance goes down 50% or something evil like that, i think we should break webpack. ☠

@drcmda Not sure about performance, but the bundle impact is <3.8kb minified (note: that measurement includes the recent deprecation of interpolate). Parcel recognizes the "source" field in package.json OOTB (according to this tweet), and it's not hard to add "source" to webpack's list of mainFields. It's probably better if we go that route.

I think beta 30 totally breaks what I was doing with interpolate. Any reason to deprecate it? I have a few cases where I share the same value across a few different components/props to sync the animations, so a lot of lines like:
class Example extends React.Component {
  getLowerBadgeStyles() {
    const {spring} = this.state.lowerBadgeMask.animated;
    return {
      opacity: spring.interpolate([0, 0.5, 1], [0, 0, 1]),
      transform: spring.interpolate(value => `translate(${16 - value * 16}px, ${16 - value * 16}px)`),
    };
  }

  getUpperBadgeStyles() {
    const {spring} = this.state.upperBadgeMask.animated;
    return {
      opacity: spring.interpolate([0, 0.5, 1], [0, 0, 1]),
      transform: spring.interpolate(value => `translate(${16 - value * 16}px, ${-1 * (16 - value * 16)}px)`),
    };
  }
}

@amadeus 	It hasn't been removed, just renamed to .to(...)

Very strange, i did try renaming everything to .to, but it seemed to be broken. I'll dig a bit more and see if I can figure out what is going on (it's like some values seem to get update but others never animated)

@amadeus 	Sorry, I need to push a new beta that includes the typings for the new name. I'll do that early tomorrow.

@amadeus 	Sorry, I need to publish a new beta that includes the typings for the new name. I'll do that either before I go to sleep or early tomorrow morning.
Though, it shouldn't have caused any bugs on your end.

So I am 99% sure this is a React Spring bug (I was on beta 20 before going to beta 30, so this could've been introduced anytime before then, can try bisecting betas more to see if I can find which version).
Anyways, for some context - I am doing some animations using a combination of SVG masks and dom elements.
I am animating an svg mask on the same spring value as a dom element's transform, to create this effect in beta20 and prior:
good example
And after updating to beta30, you can see what is now happening:
bug example
It appears the SVG is animating fine on the value (as can be seen by the mask) however the dom element just get's the from values applied and never animates.

v9.0.0-beta.30 is now available! 🎉
https://github.com/react-spring/react-spring/compare/4803f24...416315b
Notable changes

ESM bundles have ES6+ syntax again
CJS bundles now point to explicit CJS dependencies
ts: The SpringsUpdateFn type is now exported
ts: The SpringValue interface now has the to method

v9.0.0-beta.31 is now available! 🎉
https://github.com/react-spring/react-spring/compare/4803f24...416315b
Notable changes

ESM bundles have ES6+ syntax again
CJS bundles now point to explicit CJS dependencies
ts: The SpringsUpdateFn type is now exported
ts: The SpringValue interface now has the to method

Upgrading to v9.0.0-beta.31 in a TS project gives me the following errors:

@raunofreiberg 	Try upgrading to typescript 3.5+

FWIW, the error related to @react-spring/core went away with the upgrade.

@raunofreiberg 	Yep, that's because Omit is a built-in type in TS 3.5+ (see here)

I have a weird issue. I've created a modal with below springs and I am using useChain hook to control them. Locally the animations work but once I build the React project (created from CRA) npm run build and host it either locally or somewhere in the cloud then only one animation is being triggered (I can see that based on the styles in code inspector).
Config:
const aProps = useSpring({
    ref: modalContentRef,
    config: { mass: 2, tension: 364, friction: 31 },
    from: { transform: "translate(-50%,-50%) scale(0)", opacity: 0 },
    to: {
      transform: isOpen
        ? "translate(-50%,-50%) scale(1)"
        : "translate(-50%,-50%) scale(0)",
      opacity: isOpen ? 1 : 0
    }
  });
  const bgOpacity = useSpring({
    ref: opacityRef,
    from: {
      opacity: 0
    },
    to: [
      {
        opacity: isOpen ? 0.32 : 0
      }
    ]
  });
  const bgScale = useSpring({
    ref: scaleRef,
    from: {
      transform: "scale(0)"
    },
    to: {
      transform: isOpen ? "scale(1)" : "scale(0)"
    },
    config: {
      duration: 1
    }
  });

Chain:
useChain(
    isOpen
      ? [scaleRef, opacityRef, modalContentRef]
      : [modalContentRef, opacityRef, scaleRef],
    isOpen ? [0, 0, 0.3] : [0, 0.3, 0.7]
  );

Hi,
I have combo issue NextJS + react-spring. It's strictly connected with NextJS, so I've posted it here https://github.com/zeit/next.js/issues/8222
Summery: for some reason react-spring causing memory leak in NodeJS by allocating  new Controller class for each request.
Thank you

Please consider feature requests #785 and #783 to be added to v9.
Thank you.

v9.0.0-beta.33 is now available! 🎉
https://github.com/react-spring/react-spring/compare/416315b...96f1bad
Notable changes

feat: In react-spring/web, animated components now accept shortcuts for style.transform such as style.x, style.scale, etc (more info: #782)
feat: export isAnimated function (https://github.com/react-spring/react-spring/commit/8c08a561892f2e8dbc8de83f0e7d4db145a42647)
fix: avoid calling onRest if no animations were created/updated (https://github.com/react-spring/react-spring/commit/301de6d85344229d8840f06cf6b5163d06ff18fd)
fix: avoid forcing a re-render in animated component when not yet mounted (https://github.com/react-spring/react-spring/commit/ef73bac137cd9659211f0caf2fe8d894b3bbbc24)
fix: make usePrev internal helper work in React's concurrent mode (https://github.com/react-spring/react-spring/commit/a238b7fd5c40c32126ed6b4e1a743136539b8444)
fix: add missing dependency to @react-spring/animated (https://github.com/react-spring/react-spring/commit/d6a45662c9a55f6a8fe7af4c1fec4a76afe6b563)
types: minor fixes to TypeScript types (https://github.com/react-spring/react-spring/commit/a43393ddc0b01d46a8a0c413a07bdec237d3cc25, https://github.com/react-spring/react-spring/commit/ab68cca0c4e27e6c66cfd0f944152f9194763c2f, https://github.com/react-spring/react-spring/commit/a9f39eb7ca4c1c9806507cc33cfc3ee554c39384, https://github.com/react-spring/react-spring/commit/48cb3e2406e186778744eea5ac718e9c7592f50d)

I dont know when this broke, but useTransition with a function for enter seems to be broken when using strings... example here: https://codesandbox.io/s/hardcore-wiles-lw5u5

I don't know if it's just me but using v9.0.0-beta.33 spikes CPU high, both in VSCode and in CRA. This slows file saving, leaving any errors/warning not be cleared until a while. react-scripts start also spend a lot of times doing type check after each file save.
VSCode
Version: 1.37.1
Commit: f06011ac164ae4dc8e753a3fe7f9549844d15e35
Date: 2019-08-15T16:17:25.463Z
Electron: 4.2.7
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Linux x64 4.19.66-1-MANJARO

NodeJS: v10.16.0
TypeScript: v3.5.3

Looks like the newly released typescript 3.6.2 has some difficulties with react-spring types, I keep getting Type instantiation is excessively deep and possibly infinite.  TS2589 when using 'animated' from react-spring 9.0.0-beta.33.
Downgrading project to typescript 3.5.3 works fine.
Node v12.9.0

@IngoValente re your issue (which I hit too) - I may be wrong, but it looks related to this https://github.com/microsoft/TypeScript/issues/33132 where there's a comment that they're looking into it internally: https://github.com/microsoft/TypeScript/issues/33132#issuecomment-526309720.
This error should have hit conditional types but not mapped types (and in react-spring this seems to be caused by DOMComponents, a mapped type)

@aleclarson This may or may not help - I did quite a bit of digging into the TS 3.6 upgrade issue.  The problem appears to be due to the introduction of an instantiation count.
https://github.com/microsoft/TypeScript/pull/32079/commits/49e3f1788641fe3709644f5644048a00a3fea43b
and its related issue.
Seems to be partially at least partially related to the recursive nature of the AnimatedProps/AnimatedStyles/etc. definitions.  (Wish they gave a better way to debug Conditional Types...)

@panjiesw @IngoValente @barrymay this issue is probably the same as #613.

@cdebotton yeah i saw that thread, likely similar I agree in terms of root cause.  I also tried applying the short-term fix @aleclarson made but to no avail.  This new issue just brings to the fore all around because it prevents TS upgrade.
I've been struggling to understand the use case where the react-spring types need to be recursive as they are.  I wonder if they could be simplified so that the types help with high-level animated attributes w/ SpringValue but then let's the dev do what they want beyond that.  It should surely help tsserver as well imo.
It seems that ts's type system tries to flush out all alternatives and that's where this goes wonky.

I'm experiencing this problem after upgrade to 33. This happens only on prod. It worked perfectly with previous version.

#807 and #750 could use some feedback before they're merged into v9

@aleclarson I'm taking a look at both of the above, but I'm curious on your feedback on the aforementioned TS 3.6 issues. I saw you made some updates, and I've tried pulling/building/linking the latest v9 branch against my own project, but I'm still getting the same "Type instantiation is excessively deep and possibly infinite" that @IngoValente mentioned.  Thx

I've been working on the types all night. Should have #807 updated soon.

Great, just was checking you saw it - thanks very much! (happy to help if there's any part I can assist with)

for useSpring, onRest is fired every time the component unmounts.
Anyone have a workaround for this?
I think it relates to #623
Thanks in advance 🙏🏾

@danieloi 	Thanks for the heads up! This will be fixed in #808

I am getting the following ts error when importing from cjs:
import { useTransition } from "react-spring/web.cjs";

Could not find a declaration file for module 'react-spring/web.cjs'. 'C:/Git/ComponentLibrary/node_modules/react-spring/web.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/react-spring` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-spring/web.cjs';`

using "react-spring": "^9.0.0-beta.34"

Hi, I'm finding it really hard to understand the docs for useTransition. Does anyone have a source of videos that people use it ?
Thanks in advance

useTransition does unecessary mounts/unmounts
Mount - Unmount - Mount - on show, and on hide Unmount - Mount - Unmount
see https://codesandbox.io/s/react-spring-mountunmount-sbqns

@kigorw I think this might be because your useEffect is running on component update. Working as expected for me if I pass an empty array [] to useEffect as a second argument.

@aleclarson any ETA for next beta?

@RafalFilipek The next beta will be whenever #808 and #809 get merged (no ETA on that).

I just released a canary for #808 and #809:
npm install<EMAIL_ADDRESS>
Feel free to try it out and give feedback here.

I've just experienced an issue with useTransition typings. I noticed that somehow useTransition.tsx file from this PR got into the release. I got this error, when using the hook:
Argument of type '{ from: { readonly transform: string; readonly position: "absolute"; }; enter: { readonly transform: "translate3d(0, 0, 0)"; readonly position: "static"; }; leave: { readonly transform: string; readonly position: "absolute"; }; }' is not assignable to parameter of type 'any[]'.
  Object literal may only specify known properties, and 'from' does not exist in type 'any[]'.

43     from: { transform: `translate3d(${getMinusSign()}100vw, 0, 0)`, position: 'absolute' } as const,
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

@DeyLak You can't use caret ranges with v9 beta anymore, because a canary version exists, and SemVer thinks you want that. 😢

@aleclarson Thanks, I didn't think about it. Managed to fix version by removing caret.
BTW, I'm using useTransition with react-router, and it seems to be broken with the new API.
I reproduced it with this demo from docs:
https://codesandbox.io/s/admiring-lewin-07wzr?fontsize=14

@DeyLak Fixed in 9.0.0-canary.809.2.49361198
Example (will delete later)
Code
I also made sure you can click fast repeatedly without any visual glitches.
From 4511182c54954759932977b6f72ce7f9ec05863d Mon Sep 17 00:00:00 2001
From: Alec Larson<EMAIL_ADDRESS>Date: Sun, 29 Sep 2019 19:50:44 -0400
Subject: [PATCH] Revert "old code"

This reverts commit ba0f3e85f406b67a05aa213426f8d9ebc79f549f.
---
 tmp.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/tmp.js b/tmp.js
index 7c5bd64b..c44d2f71 100644
--- a/tmp.js
+++ b/tmp.js
@@ -1,5 +1,5 @@
 import { render } from 'react-dom'
-import React, { useState, useCallback } from 'react'
+import React, { useState } from 'react'
 import { useTransition, animated } from 'react-spring'
 import './styles.css'

@@ -19,16 +19,15 @@ const pages = [

 export default function App() {
   const [index, set] = useState(0)
-  const onClick = useCallback(() => set(state => (state + 1) % 3), [])
   const transition = useTransition(index, {
     from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
     enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
     leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
   })
   return (
-    <div className="simple-trans-main" onClick={onClick}>
+    <div className="simple-trans-main" onClick={() => set(index => index + 1)}>
       {transition((props, item) => {
-        const Page = pages[item]
+        const Page = pages[item % 3]
         return <Page style={props} />
       })}
     </div>
--
2.19.2

https://github.com/react-spring/react-spring/issues/642#issuecomment-527160526

@louisgv Let me know if 9.0.0-canary.809.2.49361198 fixes that issue. 👍

https://github.com/react-spring/react-spring/issues/642#issuecomment-522923705

@dagstuan Fixed in 9.0.0-canary.809.2.49361198

@aleclarson I tried the new canary build, changed my code to fit, and I'm getting the following error every time when navigating to the page where the spring is:
(I noticed by looking at the code that this regeneratorRuntime ref is only in the build when using the new branch (use-transition-rework) and not v9 or master).
If there's no obvious issue you can see I'll try to add a sandbox if needed
ReferenceError: regeneratorRuntime is not defined
    at <srcdir>/node_modules/@react-spring/core/index.cjs.js:635:5
    at <srcdir>/node_modules/@react-spring/core/index.cjs.js:687:4
    at Object.<anonymous> (<srcdir>/node_modules/@react-spring/core/index.cjs.js:1203:2)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (<srcdir>/node_modules/@react-spring/web/index.cjs.js:8:12)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)

@barrymay Fixed in 9.0.0-canary.809.3.a66b280 👍

Works! 🎉  In testing further I do have an issue with the new useTransition onDestroyed change - see https://github.com/react-spring/react-spring/pull/809#issuecomment-536752679

I've just tried 9+ versions up to 20 with this Sandbox but I'm getting tab crashes after a few seconds each time. The same with the React Spring website, it crashes browser regularly. (Windows 10, Chrome).
https://codesandbox.io/s/intelligent-nightingale-4zv2w

@matthewlilley That sounds serious! Could you open an issue with a basic repro so it can be looked at by someone with a Windows machine? 👍

I've just tried 9+ versions up to 820

What does this mean? You tried v8.20.0 and below?
Try this too, please: npm install react-spring@next

I tired the code sandbox above on Windows 10, Chrome and did not have any issues, not crashes no fan spinups. CPU was about 15-20%

@aleclarson  Sorry I wasn't clear, I'd meant version 9 up to canary ending 820. I didn't see these issues in 8 with the same examples. If you take the "SPRING RESET SCRIPT" from the React Spring examples pages, and switch that over to any 9+ version it's repeatable, at least on my system.
The code sandbox itself is protecting itself somewhat by throwing "RangeError: Potential infinite loop: exceeded 10001 iterations. You can disable this check by creating a sandbox.config.json file." which is killing the animation after around 5 seconds. Sandbox used is below.
https://codesandbox.io/s/staging-sunset-i2wcl
In the real world, the usage builds and builds to the point where Chrome tabs become inaccessible, this periodically happens to me on the React Spring website I'd imagine for similar reasons.
@tm1000 Maybe it's more noticeable when something odd is happening since I have 12 x 120mm fans on this machine which I don't regularly hear RPM changes from at all, the codesandbox seems to be protecting against the high resource usage somewhat.

Confirmed that the canary build works fine with TypeScript 3.6.3 - great job @aleclarson!  Would love to hear sometime how you sorted that, if there was any reduction in strictness, etc.

I found a regression in using transition to zero value.
Here is the example of using react-router for old version(8.0.3)
Here is the same example but with latest canary build
If you try to click on links, you'll see that leaving animation is not taking place for previous route. It took me some time to understand, that the issue is that I have enter config like this: enter: { transform: 'translate3d(0,0,0)' }. If I change it to enter: { transform: 'translate3d(0%,0,0)' }, everything works fine (pay attention to percent sign before zero).
As far as I know, not using unit in zero values considered good practice, also this behaviour could be very confusing, so may be it should be fixed or at least have a note in the docs?

@DeyLak Thanks for the bug report! The v8 example still breaks if you want to use different units (eg: animating from 100% to 20px), but that's easier (and less common) for users to debug than a missing %. I think v8 just uses the from value as a template, which is why 0 alone works there. If you try swapping the from and enter objects, you'll see v8 break just like v9 does.

I don't know if it was mentioned earlier or not but the "notifications" example is broken on v9.
https://codesandbox.io/s/messagehub-t7pbx

@ElForastero You can find the updated demos here: https://github.com/react-spring/react-spring-examples/tree/v9

The latest canary is out<EMAIL_ADDRESS>Let me know if anything broke. ;)

Love the canary builds, but is 808.1 greater than 809.6 (the last one?)

Ah whoops, I forgot to try it on CodeSandbox. 😅 The 808 is the PR number. I stopped using 809 because it's now merged into #808. The .1 is the canary version number specific to the PR.
Anyway, after 2 more broken canaries, I've got a working canary again.
npm install<EMAIL_ADDRESS>

I'm getting a Typescript error on fluids dependency of React-spring in the latest canary build. No problems in 809.
└─┬<EMAIL_ADDRESS>└─┬<EMAIL_ADDRESS>└─┬<EMAIL_ADDRESS>└──<EMAIL_ADDRESS>node_modules/fluids/src/index.ts:42:10 - error TS7030: Not all code paths return a value. 42 function addFluidObserver(target: object, observer: FluidObserver) {

@martinbroos Please provide a git repo that reproduces the issue. Thanks 👍

I am getting an error for useTransition on canary version<EMAIL_ADDRESS>Cannot read property 'ref' of null

here is a codesandbox with the issue: https://codesandbox.io/s/hardcore-field-y07un

@devwells Stick to 9.0.0-beta.34 if you don't want to change your useTransition calls. The useTransition hook only takes 2 arguments now. What was once the 2nd argument is now the key or keys prop. If you have any questions, please ask in #808. 👍
For more info on the useTransition changes, check out #809. 🌶

awesome, thanks so much for the quick reply!

Hi, very nice library. I'm quite anxious to see what's coming next.
I noticed a breaking change on Spring component. Now you can't use custom properties on from and to attributes which was kind of a nice feature. I'm supposing you guys moved it to some other component? If so, I'd like to know why so I can ditch old version from my code.
I'm currently using @react-spring/web package available on NPM and I'm having a hard time on finding documentation for it. So, where's it? :)
Thank you for making it possible to create such amazing and blazing smooth animations.

I noticed a breaking change on Spring component. Now you can't use custom properties on from and to attributes which was kind of a nice feature

The Spring component should work as expected. No major changes to the from or to props. You were probably confused by SpringValue in #808, right? Anyway, official documentation hasn't been written yet, but some of the changes are detailed here, as well as #808 and #809.

When using the v9 beta 34 I get the following warning
interpolate() will be deprecated in v10, use .to()".

I am doing this
interpolate([width, center], (w, c) => `calc(${c} - ${w} / 2)`);

How should I use .to() instead of interpolate() when using multiple values?

@subhero24 Did you try import { to } from 'react-spring' 😉

Oh I see. I thought the warning meant to use value.to(). My mistake. Thanks for the quick reply!

I'm using v9.0.0-beta.34 and using useTransition with React-Router for some animated page transitions, but it gives me an error:

transitions.map is not a function

it seems like useTransition no longer returns an array, or maybe something wrong with react router?
link to sandbox
it used to work on v8.0.3
Thanks in advance and wonderful job by the way, amazing lib :)

@MickaelNeves installing<EMAIL_ADDRESS>actually ends up installing the newest canary. Pinning the version to<EMAIL_ADDRESS>fixes your demo :)

@dagstuan thanks! didn't notice that :P

Having issues with animated on React Native.
For example:
  const AnimatedView = animated(View)

  return (
    <AnimatedView
      style={{
        height: 100,
        width: 100,
        backgroundColor: 'red',
        transform: [{ translateX: 100 }, { translateY: 200 }, { rotateZ: '45deg' }],
      }}
    >
      <Text>TEST</Text>
    </AnimatedView>
  )

This works fine in v8. Doesn't work in v9. It breaks because the transform array is converted to a string that looks something like this: [[Object object], [Object object], [Object object]].

Brutal feedback, but why is 9.0.0 taking longer than 8 months to deliver when it's entire feature set (becides bug fixes) can already be achieved in the 8.0.0 version of react-spring trivially.
(Note this is based off MY personal understanding of the 9.0.0 feature set and i haven't actually dove under the hood this may be off)
"stop": Same as just having a variable in state called "stop" which removes the styles from the styles object, if you need the state of the last frame to be preserved use onFrame updating useRef then stop in state can apply the last styles.
"delay": Same as just awaiting a async function that resolve on delay.
enter: async (next, cancel) => {
     await new Promise((res) => setTimeout(() => resolve(true), 500))
     await next({opacity: 1})
}

"time based diffing"
useTransition(items, null, {
  from: { size: 0, color: 'green' },
  enter: { size: 100, color: 'black' },
  leave: { size: 0 }, // Once the "leave" animation begins, the "color" will continue
})                    // animating from "green" to "black" since it never changed.

just not the same as...
useTransition(items, null, {
  from: { size: 0, color: 'green' },
  enter: { size: 100, color: 'black' },
  leave: { size: 0, color: 'black' },
})

? Like am i missing the point i don't understand why we need this let alone why it takes 8months like i understand this project is a labor of love, open source, yadda yadda but realistically this project is stagnating where-as projects like framer motion which has some insanely useful built in primitives including layout transitions without math position values (https://codesandbox.io/s/framer-motion-drag-to-reorder-pkm1k)   (using useLayoutEffect) are starting to catch up.
But framer motion comes with more bundle size + terrible physics. React-spring is still my favorite library our team uses it on 7+ projects, our main product and our private npm package component library however my teammates ask me more and more if we can migrate off react-spring. This is not a dig at the maintainers as i'm literally a react-spring #1 fan but i feel like this project has gone extremely south to the point where its lifespan realistically hasn't got long left when other libraries are starting to catch up and in some areas exceed.

Hi @ShanonJackson,
If you want to write up some feature proposals or just open an issue for each of your complaints about the library, feel free. Anyway, I wouldn't blame you for preferring an OSS library with actual funding, but I'm sticking with react-spring because I love the API and cross-platform support.
There's no reason to think it's stagnating. I release a new canary whenever I find a bug that is preventing my own projects from moving forward. Apart from that, I'm only being paid $23 a month for my volunteer work on this, and I have no income currently (full-time on my startup).
@drcmda has been working on other things, so he hasn't contributed much lately. And I made no promises that v9 would be done before 2020.
Let me know if you have any other concerns. ✌

I know, this isn't an attack on the library i understand people volunteering their time to maintain it is a godsend for me, our teams and our projects because without them we'd be in a forced migration situation rather than an optional migration situation.
I know @drcmda has been working on react-three-fiber which has done some super impressive stuff but it has come at a cost to the progression of react-spring.
I will also be sticking with react-spring for now but i do feel like there's alot to be learnt from framer motion who i feel outside of their terrible physics is doing some crazy work in the inbuilt-primitive space (as in they have inbuilt things to handle touch, gestures, drag and drop, layout, etc).
Appreciate the work on 9.0.0, the reply and the time volunteering.
Thanks

@ShanonJackson I’m pretty sure you’re aware of react-use-gesture which also allows out of the box support for drag, pinch, etc. I agree the react-spring ecosystem might be missing FLIP but I’m curious if you have any other feature requests we can help building?

Hello,
first of all I would like to thank you for awesome job, that you are doing - react spring is really great.
I think I found a bug in 9.0.0-beta.34 version: I'm doing async animations in useTransition hook in leave phase. Here is codesandbox: https://codesandbox.io/s/sad-https-l7lxe and here is leave handler:
leave: () => async next => {
  await next({ opacity: 1, border: '10px solid tomato' })
  await next({ opacity: 0, transform: 'translate3d(-50%,0,0)', border: '10px solid yellow' })
},

First I change border to border: '10px solid tomato' which happens, but second animation (with translate and another border change) doesn't. If I swap their places, the result is the same - first animation is triggered and second not.
Am I doing something wrong or is it really a bug?

🐛 Bug report!
I've just tried upgrading to 9.0.0-beta.24, and useTrail is no longer animating its items in a trail, but rather all at once. Here's a repro for reference: https://codesandbox.io/s/confident-cloud-tvyqu?fontsize=14&hidenavigation=1&theme=dark

@warsawgentleman That's a bug, but it's fixed in the latest canary. However, the canary requires you to change the usage of useTransition slightly (see here), because it's been rewritten. Even with the canary, your sandbox isn't bug-free. I don't know when I'll be able to take a closer look. Thanks for reporting!

@colepeters Using v8 seems to have issues as well. With the latest canary, useTrail is no longer animating all 3 boxes at once, but there are other issues that need to be looked into. Thanks for reporting!

@dbismut
Yeah i do know about react-use-gesture we use it heavily at the moment to create multi column drag-and-drop. Love the library.
This is going to be a long detailed post just around spit balling ideas i have a lot of these but these are just a few.
Feature: Layout Animation
Framer Motion has positionTransition which is a prop they've added to their own animated.div style component, with it you can do animation between layout states without "math"; By math based layouts i mean https://codesandbox.io/s/20yw31pyxj?from-embed where each sibling is position with translate3d + absolute, the problem with positioning elements this way is that your essentially have to write all the code yourself in the parent to do css's job for it without access to everything css has access to. I.E Try doing a math based layout where each item has a dynamic height.
This previously would be very very hard to achieve with react but now with useLayoutEffect it becomes a lot easier in-fact you can implement it with react-spring in very little code here's a terrible demo i threw together for you https://codesandbox.io/s/drag-and-drop-spring-j2r9j
Problems with this implementation and how i believe the framer motion implementation works under the hood:

State is stored in the component of the last position why this isn't a good idea is it makes multi-column transitions impossible because elements will always remount when they move from a sibling of 1 element to a sibling of another. (Currently react keys are used in the demo to allow sibling layout animation)

How to fix it:
Create  a component that controls transitions between single and multi layouts, it renders nothing but its children wrapped in a context in which they store their state to persist it between remounts.
How it works:

Each component's position and last position is animated to and from relative to the BODY and not relative to its container.

Each components position is stored by a unique id (key or otherwise) that gets registered in the context to store state of the last position this key is controlled in the parent by people using layout so that they can decide what key system they want to use.

**Why is this useful **

Drag-And-Drop (obviously, single and multi column)
List reordering animations (see react-spring's own examples)
List item deleting animations (where you want items around the deleted one to slide nicely into their new position)
Any other use case where you want an element to move nicely between two DOM positions without having to calculate the math yourself in the parent.
No other animation library i know about can currently do multi column layout animations this easily which i believe will put react-spring way ahead of the game.

Feature: animate auto width and auto height with hooks
Currently, there's some issue floating around somewhere where the react-spring says that because hooks don't control the render phase animations to "auto" couldn't be implemented and will remain solely as a feature of the render props API.
This is true, however work arounds are possible i'll leave it up to peoples imagination as to what the API should actually look like but just an idea of how this can be achieved is something like this...
const AnimateAuto = () => {
        const auto = useSpring({width: 0,  to: {width: "auto"}});
        return auto((styles) => {
                <animated.div style={styles}>
                </animated.div>
         })
}

Obvious issues: useSpring currently doesn't return a function, i'm just merely using it as a hypothetical of how it could be achieved with hooks.
Why?

We should move away from the render props API now that hooks exist; Correct me if i'm wrong but everything in the render props API can be achieved with the hooks API except "auto" animations meaning we could potentially remove the render props API after this is released
importing Spring from RenderProps just for "auto" animations adds to bundle size because people now have to use both useSpring + Spring as apposed to just useSpring. (hope that makes sense)
"React-Resize-Aware" and Resize observer polyfil are incredibly buggy where-as react-springs implementation (fixAuto) is more reliable and should be brought into the hooks api.

I have a lot more ideas and would love to share our actual internal code to show you where our pain points are at the moment with react-spring. I absolutely adore the library i just want to reiterate on that fact as i know my earlier post could be seen as an attack but really i just want this library to flourish.
Here is a snapshot of our component library from 1 year ago, we're about to open source an incredibly polished version in January, just posting it here to give you guys an idea of how we use react-spring.
http://qrious-storybook.s3-website-ap-southeast-2.amazonaws.com/

SpawnModal (which grows/shrinks modal from a location) uses react-spring, useTransition to animate in/out of DOM and for width/height animations.
DatatableEdit (Drag-And-Drop multi-column uses react-spring + react-use-gesture + virtualization for performance written from scratch)
Checkbox animates tick with react-spring
Modal useTransition to animate in/out of DOM and for width/height animations
DataTable when you click a row it chains animations to show/hide that content.

Wish i had a deployment floating around of our Component Library today to show how heavily we use it now as apposed to 1 year ago. DatatableEdit would shrink its source code by about 70% if we didn't have to calculate all that position math for drag and drop.

Hey @ShanonJackson, thanks for the detailed input and interesting read. Quick one before I go to bed, what you’re describing is the FLIP technique right?
Because yes, I agree that this is something that does miss in the current ecosystem. It’s just that FLIP can be tricky (I think react-spring used to animate auto at one point but stopped because it wasn’t reliable).
Have you tried react-flip-toolkit out of curiosity?

I have used the old "auto" animation stuff in react-spring and based on my experience trying a lot of other methods out there react-spring is the most reliable (by other method i mean  resize observer polyfill and react-resize-aware).
Now after you've linked that i understand what you mean by the FLIP technique; No i haven't tried that library it looks interesting from a sense that their using transform: matrix instead of translate3d i'm assuming its because matrix performs better. However they're also storing state on the DOM elements themselves with data- properties which is extremely dirty. Also after a quick skim read of the source they're also not leveraging useLayoutEffect which makes layout stuff alot more trivial.
Would be great if this was built into react-spring as i feel like layout animations are an extremely common use case of this library.

Hi @ShanonJackson I've moved our conversation to #9 so that @aleclarson can focus on critical feedback for v9. I've hidden our comments as off topic for lack of a better reason, but I appreciate the time and efforts you've put in making your point. We'll try to investigate how to find the best API for FLIP ;)

9.0.0-canary.808.13.719834d is ready for testing! 🥳
See what changed here.

First of all, thanks for all the awesome work on react-spring. It's a real joy to use, and you guys rock!
It seems I've run into an issue with 9.0.0-canary.808.14.192785c. I'm not sure how to reset animations which was previously achieved with reset: true passed in as a prop. For example:
const { radians } = useSpring({
    to: async next => {
      await next({ radians: 2 * Math.PI });
    },
    from: { radians: 0 },
    config: { duration: 7000 },
    reset: true,
  });

now leads to animations playing only once.
I know that

Make Controller#reset work with async to prop

is on a list of TODOs, but how would you implement this functionality on the current vesion?
Full example available here (I've taken the official example and bumped the version of react-spring to the aforementioned canary): https://codesandbox.io/s/eloquent-williamson-wds49
Please let me know if you need any additional info. Thanks!

@Doesntmeananything Thanks for the positivity!
In v9, that example will call the async to function on every render (even if reset: true is removed), because your to prop is a new function each time. To avoid that, you can do one of these 3 things:

wrap the to prop with useCallback
pass a props function to useSpring (instead of a props object)
pass an array of dependencies that tells useSpring when to update its animation

To animate once from 0 radians to 2π radians, use this:
// with useCallback:
const { radians } = useSpring({
  to: useCallback(async next => {
    await next({ radians: 2 * Math.PI })
  }, []),
  from: { radians: 0 },
  config: { duration: 7000 },
})

// with a props function:
const [{ radians }] = useSpring(() => ({
  to: async next => {
    await next({ radians: 2 * Math.PI })
  },
  from: { radians: 0 },
  config: { duration: 7000 },
}))

// with dependencies:
const { radians } = useSpring({
  to: async next => {
    await next({ radians: 2 * Math.PI })
  },
  from: { radians: 0 },
  config: { duration: 7000 },
}, [])

To animate on every render from 0 radians to 2π radians, keep doing what you're doing:
const { radians } = useSpring({
  to: async next => {
    await next({ radians: 2 * Math.PI })
  },
  from: { radians: 0 },
  config: { duration: 7000 },
  reset: true,
})

To animate non-stop from 0 radians to 2π radians, use this:
const { radians } = useSpring({
  to: useCallback(async next => {
    while (true) {
      await next({
        radians: 2 * Math.PI,
        reset: true,
      })
    }
  }, []),
  from: { radians: 0 },
  config: { duration: 7000 },
})

If you're doing this a lot, you could even make a useLoop hook:
const useLoop = (to, deps = []) =>
  useCallback(async next => {
    while ((await to(next)) !== false) {}
  }, deps)

const { radians } = useSpring({
  to: useLoop(async next => {
    await next({
      radians: 2 * Math.PI,
      reset: true,
    })

    // Return false to stop the loop. (optional)
    return false
  }),
  from: { radians: 0 },
  config: { duration: 7000 },
})

With a little more code, the useLoop hook could take a props object or an array of props:
// Animate from 0 radians to 2π radians forever.
to: useLoop({
  radians: 2 * Math.PI,
  reset: true,
})

// Animate between "blue" and "red" forever.
to: useLoop([
  { color: 'blue' },
  { color: 'red' },
])

Anyway, let me know if you have any more questions!

@aleclarson What a brilliant answer, thank you very much! You should definitely consider adding it to the docs in some fashion, as it succinctly covers a lot of ground for this particular use case.
In general, v9 looks absolutely fantastic. I like how it improves DX by allowing you to express the behaviour you want more naturally, while simplifying the API and keeping the overall surface area of the library low.
Thanks again, and stay awesome!

@aleclarson On lots of recommendations from looking on Spectrum was to update to v9 beta to fix the useTransition issue where notifications would not be removed individually (https://spectrum.chat/react-spring/general/transitions-with-seperate-durations~7d2cd2f8-f052-4a7c-b413-6d5a90fa5265)
It actually works now, but it does doesn't seem to properly animate items out

I've used the old config like so:
config: (item, state) => (state === "leave" ? [{ duration: 5000 }, config, config] : config), and even fiddled around with adding a duration to the other configs. Just pinging here to check if it's a regression

@aleclarson Is this scheduled to be fixed in 9.x?

@phaistonian Getting a 404 on your link

@aleclarson works for me.
Error it shows is Cannot animate to the given "to" prop, because the current value has a different type
Gist of the code

Sounds related to https://github.com/react-spring/react-spring/issues/867

I'm playing around with chaining transitions using async/await. I have something working on v.8,:
https://codesandbox.io/s/dazzling-swartz-2fcn4
but changing to v.9 causes the enter animation to sporadically not fire:
https://codesandbox.io/s/crazy-leakey-lr5ve

setting ref for RenderProps api breaks for beta.34
  import { Spring } from 'react-spring'
// ...
  const ref = React.useRef(null)
// ...
  return (
    <Spring ref={ref}
     {...}>
     {...}
    </Spring>
  )

Warning: Function components cannot be given refs. Attempts to access this ref will fail.
is setting ref for renderProps api deprecated?
or is there any other way to get the controller from the component?

@jjang16 Please try with the latest canary. 👍

Running into an issue in combination with #601, if you're using typescript and you add .cjs to your import to get the commonjs version, you don't get the types because it's expecting a .cjs.d.ts file, and doesn't pickup the regular .d.ts file.
For what it's worth, I'm in agreement with the OP of #601 that exporting es modules by default is confusing for people to work around, and goes against what the majority of modules do.

I agree with you. @wbobeirne Actually, I am having the same problem, and building by artificially adding cjs.d.ts file to solve it. (with nextjs v9 & react-spring v9) This was too confusing. So, basically, it is necessary to provide a cjs.d.ts file and describe the guide on the document or use the basic module as cjs. What do you think? @aleclarson

It appears there might be a regression of https://github.com/react-spring/react-spring/pull/910.
Using Gatsby, I upgraded to 9.0.0-beta.34 and getting the error, TypeError: Cannot read property 'isReactComponent' of undefined anytime I try gatsby build.
No issues when running gatsby develop though.

@wbobeirne @gtolarc The .cjs.d.ts module will exist in the next canary. Thanks 👍
@NerdCowboy That hasn't been released under 9.0.0-beta yet, but the latest canary has it.

When might another canary land? We're excited for React-Spring, but a few broken things have had us unable to use it. Sadly other things broken in v8 prevent us from using it either. Hope I don't sound ungrateful asking. React-Spring is just awesome and I'm excited and looking forward to implementing it.

I'm getting some weird behaviour in the latest canaries, starting from the versions beginning with 809. Last version of the 808's works as expected.
Looks like the spring gets reset on a component rerender, see example here: https://codesandbox.io/s/initial-rocket-lubsl
Drag the red rectangle, then resize your window -> the rectangle will jump back to its initial position. Switch to the last 808 version, and it remains in the correct position.
Is this a change in the API I'm missing or a potential bug?

@IngoValente Please open a new issue whose title starts with [808] and I'll check it out
@Slapbox Have all the issues you encountered been reported? Canary coming in the next few days maybe.

@aleclarson thanks for your response, count me among the excited! #922 is a showstopper for us. It's the only major bug I'm aware of.

@IngoValente If your props function was being called on every render, that was fixed with https://github.com/react-spring/react-spring/commit/55c569162b8583ea9d22e1970e4edea2761d3252 in the 808.17 canary.
@Slapbox I think there's a fix for that waiting to be released. Stay tuned!

Hi,
I notice that decay is not working with v9.0.0-beta.34
See the rocket example in "React Use Gesture":
https://codesandbox.io/s/initial-rocket-8r4pn?file=/src/index.js

This <animate> component's TypeScript error (TS3589) is still remaining in v9.0.0-beta,34 . https://github.com/react-spring/react-spring/issues/653 But it is resolved in canary of v.9.0.0.

@asfktz
I notice that decay is not working with v9.0.0-beta.34
...
https://codesandbox.io/s/initial-rocket-8r4pn?file=/src/index.js

decay works fine for me.
get was renamed to getValue though 😉
# line 21
- { initial: () => pos.get() }
+ { initial: () => pos.getValue() }

I found a bug using v9.0.0-beta.34 with the useTransition hook.
When I try to update any item of the array being passed as the first argument to  useTransition, the items returned from the hook are never updated.
I used the List-Reordering example from the docs as a base for simulating the bug: https://codesandbox.io/s/usetransitionflip-1w1ul?file=/src/index.js
Try clicking on the "increase quantity" button on each item, you will see that the rows array is updated, but the transitions return from the hook never reflects those changes.

@iagodahlem try a canary release. I think your issue has been solved: https://github.com/react-spring/react-spring/issues/949

@iagodahlem @brotzky the latest canary available on npm is from January, but the PR is from March so it will be in the next canary.

Replaced by #985
To those who reported an unsolved issue: Please reproduce it using v9.0.0-rc.1, then open a new issue with your report. Thanks! 👍


transformCallbackFor() is not returning `onTransformModel' handler

onTransformModel is not correctly resolved in transformCallbackFor()

this method is deleted in #206


Explain what is the "Anonymous Voting" on the Event form

Today we have a voting style called Anonymous Voting, where we hide the proposal`s author informations.
But we should add a simple help text on the event form explaining how it woks.

Hi, Can I work on this?


New Haskell package: fullstop

We have that package in the haskell-ng package set already, but it doesn't seem to be able to compile its test suite:
nix-build --option extra-binary-caches http://hydra.nixos.org "<nixpkgs>" -A haskell-ng.packages.ghc784.fullstop
[...]
test/Tests/NLP/FullStop.hs:41:40:
    Ambiguous occurrence ‘assertEqual’
    It could refer to either ‘Test.HUnit.assertEqual’,
                             imported from ‘Test.HUnit’ at test/Tests/NLP/FullStop.hs:5:1-17
                             (and originally defined in ‘Test.HUnit.Base’)
                          or ‘Test.Tasty.HUnit.assertEqual’,
                             imported from ‘Test.Tasty.HUnit’ at test/Tests/NLP/FullStop.hs:7:1-23
                             (and originally defined in ‘tasty-hunit-0.9.1:Test.Tasty.HUnit.Orig’)

This should probably be fixed upstream by Eric Kow.

@peti Do I need to stop submitting PRs to haskellPackages and focus on haskell-ng instead?
In any case, I'll report the problem upstream and come back to you.

Yes, I think it's time to switch to NG. The old package set will be removed soon (i.e. in a couple of weeks).


Use get_strdup instead of strdup to avoid cygwin crashes

Fixes one of the reasons for the issue #2380

Travis failed jobs are not due to changes here.


Prompting for password

https://github.com/Willena/sqlite-jdbc-crypt#open-an-encrypted-db describes the opening of encrypted database a little bit the following way:
    Open the database file
    set cipher configuration
    Apply the corresponding key using the PRAGMA syntax
    Use normally

I have case where the database is not always encrypted and the user would be prompted for a password only when needed. What is the expected usage to detect the encryption since general SQLiteException could mean the file is otherwise faulty?

SQLiteException extends SQLException and has getResultCode method that can be used. SQLiteErrorCode is an enum and contains SQLITE_CANTOPEN(14), which seems to be closest to what might work. I will have to test and try.

SQLiteException extends SQLException and has getResultCode method that can be used. SQLiteErrorCode is an enum and contains SQLITE_CANTOPEN(14), which seems to be closest to what might work. I will have to test and try.

SQLiteException extends SQLException and has getResultCode method that can be used. SQLiteErrorCode is an enum and contains SQLITE_CANTOPEN(14) or SQLITE_AUTH(23), which seems to be closest to what might work. I will have to test and try.

if (e.getErrorCode() == SQLiteErrorCode.SQLITE_NOTADB.code) {
  String key = getPasswordWithPrompt();
  readAgain(file, key);
}

seems to work, but the downside is that it cannot differentiate from trying to read non-database files. Maybe that cannot be done because of the how the encryption behaves?

SQLiteException extends SQLException and has getResultCode method that can be used. SQLiteErrorCode is an enum and contains SQLITE_CANTOPEN(14) or SQLITE_AUTH(23), which seems to be closest to what might work. I will have to test and try.

if (e.getErrorCode() == SQLiteErrorCode.SQLITE_NOTADB.code) {
  String key = getPasswordWithPrompt();
  readAgain(file, key);
}

seems to work, but the downside is that it cannot differentiate from trying to read non-database files. Maybe that cannot be done because of the how the encryption behaves?

What you experienced is exactly how it should work. NOTADB is the error code thrown when impossible to open the database.
The only way to check if the DB is decrypted is the execute a select statement on the sqlite_master table and check the results.
When ciphered, the DB file is unreadable. So before anything you should provide the key. If the key is wrong, then the uncophered version of the file would not be valid creating a NOTADB error.
If the password is correct, then the uncophered DB will be valid and readable.

What you experienced is exactly how it should work. NOTADB is the error code thrown when impossible to open the database.
The only way to check if the DB is decrypted is the execute a select statement on the sqlite_master table and check the results.
When ciphered, the DB file is unreadable. So before anything you should provide the key. If the key is wrong, then the uncophered version of the file would not be valid creating a NOTADB error.
If the password is correct, then the uncophered DB will be valid and readable.

I guess it works as intended. On the other hand it would have been nice to be able to detect that given file is an encrypted database for sure (SQLite SEE works this way if I understood correctly), but I guess this way offers some degree of deniability since if you don't know the password, you can't know it is a database file.
I might make a PR trying to add some usage examples to the documentation about this and how to encrypt an unencrypted database, change the password or decrypt a database via the Java API, as the docs are quite thin on that now.

I guess it works as intended. On the other hand it would have been nice to be able to detect that given file is an encrypted database for sure (SQLite SEE works this way if I understood correctly), but I guess this way offers some degree of deniability since if you don't know the password, you can't know it is a database file.
I might make a PR trying to add some usage examples to the documentation about this and how to encrypt an unencrypted database, change the password or decrypt a database via the Java API, as the docs are quite thin on that now.

I'll gladly look at your PR if you make one. Contribution are always welcomed !

I'll gladly look at your PR if you make one. Contribution are always welcomed !


Add write-ahead log

This adds a write-ahead log based on tidwall/wal. The whole design can be found in design/wal.md. As a side effect of having to replay schemas, we can now serialize and deserialize schemas using protobuf (and jsonpb).
The durability guarantees we get through this outweigh the minuscule performance overhead I think:
$ benchstat -delta-test=none ../old.txt ../new.txt
name                                          old time/op  new time/op  delta
_Table_Insert_1000Rows_10Iters_10Writers-10    603ms ± 0%   626ms ± 0%  +3.77%
_Table_Insert_100Rows_1000Iters_1Writers-10    569ms ± 0%   595ms ± 0%  +4.64%
_Table_Insert_100Rows_100Iters_100Writers-10   63.6s ± 0%   65.3s ± 0%  +2.75%

@metalmatze @thorfour

Ok so I made a mistake with the benchmarks, they didn't actually turn on the WAL.
Here are the benchmarks with the first commit of this PR (it couldn't even run all benchmarks):
$ benchstat -delta-test=none ../old.txt ../new.txt
name                                         old time/op  new time/op   delta
_Table_Insert_1000Rows_10Iters_10Writers-10   609ms ± 0%   2119ms ± 0%   +247.72%
_Table_Insert_100Rows_1000Iters_1Writers-10   540ms ± 0%  24732ms ± 0%  +4475.96%

The culprit is ultimately always the synchronization and actual writing of WAL records. Therefore I decided to relax the durability guarantee a bit and have records be written asynchronously in batches. Doing that makes the situation pretty much identical to what we had previously:
$ benchstat -delta-test=none ../old.txt ../new.txt
name                                          old time/op  new time/op  delta
_Table_Insert_1000Rows_10Iters_10Writers-10    609ms ± 0%   602ms ± 0%  -1.19%
_Table_Insert_100Rows_1000Iters_1Writers-10    540ms ± 0%   550ms ± 0%  +1.70%
_Table_Insert_100Rows_100Iters_100Writers-10   64.5s ± 0%   63.2s ± 0%  -2.09%

If it's not going to really be a WAL then these should be consistency settings that users can tweak such that they could have a fully guarnteed wal

If it's not going to really be a WAL then these should be consistency settings that users can tweak such that they could have a fully guarnteed wal

Pretty much all WALs are best-effort, especially those that rely on POSIX fsync (which this one does as well), meaning the underlying file is flushed by the kernel, which can be up to 30s after the write was issued.
I would agree with allowing tweaking if the result of tweaking was in any shape or form reasonable, but exponential synchronization cost is never going to work, so I wouldn't want to allow that.


Add .nfs files to Linux.gitignore

Reasons for making this change:
.nfs files are created when an open file is removed but is still being accessed
Links to documentation supporting these rule changes:
http://serverfault.com/questions/201294/nfsxxxx-files-appearing-what-are-those

@jfloff thanks!


sync to this src folder as the debugger is using it

I think you need to also update the tutorial: https://www.okteto.com/docs/guides/samples/aspnetcore/

Right!
https://github.com/okteto/docs/pull/675