v9.0.0-beta.34 • Feedback wanted

aleclarson commented 5 years ago

Replaced by #985

brunolemos commented 5 years ago

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

https://github.com/devhubapp/devhub/blob/6aa24bb96658ce2541f69f9eccfc3d65826c726b/packages/components/src/components/modals/ModalRenderer.tsx#L130-L172

aleclarson commented 5 years ago

@brunolemos Your code looks fine at first glance.

Can you reproduce in react-spring-examples, maybe?

dbismut commented 5 years ago

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!

aleclarson commented 5 years ago

@dbismut That should still be supported. The implementation is here:

https://github.com/react-spring/react-spring/blob/ee4467412626a423702700338e965b420200c723/src/useSprings.js#L29-L37

dbismut commented 5 years ago

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

drcmda commented 5 years ago

A beta feedback playground is a super nice idea @aleclarson let's make this a perfect release for everyone 😍👍You think i should tweet this out for exposure?

dbismut commented 5 years ago

@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!

flsilva commented 5 years ago

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!

pbock commented 5 years ago

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

aleclarson commented 5 years ago

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

edit: There seem to be some TypeScript issues, so I'll be publishing another beta in a bit.

aleclarson commented 5 years ago

9.0.0-beta.3 is now available 👀😲

sjnonweb commented 5 years ago

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,
});

Ne3l commented 5 years ago

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

aleclarson commented 5 years ago

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

edit: Fixed in the next beta 🎉

aleclarson commented 5 years ago

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

aleclarson commented 5 years ago

@Ne3l Thank you. That will be fixed in the next beta. https://github.com/react-spring/react-spring/issues/642#issuecomment-487653288

aleclarson commented 5 years ago

9.0.0-beta.4 is now available 🐉

See the commits here: https://github.com/react-spring/react-spring/compare/7c775a7e2fc8e2a0061a8762665c274c392b09b7...a0c2e843fc899052fd2ec3967aa9be92fe0cf324

dbismut commented 5 years ago

@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

aleclarson commented 5 years ago

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

aleclarson commented 5 years ago

9.0.0-beta.5 is now available 🎉

See the commits here: https://github.com/react-spring/react-spring/compare/2fc8d534439de4561e9812db0991e54500e972c6...4e2cbbaba586e6091ac075e65b1e41681a68519a

ehellman commented 5 years ago

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

flsilva commented 5 years ago

@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.

cdebotton commented 5 years ago

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})%`
          })
        }}
      />
      );
  });
}

olapersson commented 5 years ago

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.

bmcmahen commented 5 years ago

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

aleclarson commented 5 years ago

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).

phaistonian commented 5 years ago

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

aleclarson commented 5 years ago

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

dagstuan commented 5 years ago

Hi, I'm using react-spring with typescript, and attempting to build with beta.6 and beta.7 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.

brunolemos commented 5 years ago

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?

aleclarson commented 5 years ago

@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.

aleclarson commented 5 years ago

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)

ChrisW-B commented 5 years ago

It seems like since beta.5 typescript compilation has been broken (typescript@3.4.5)

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'

Let me know if it would be better to split this off to a separate issue!

rockingskier commented 5 years ago

I'm seeing Type instantiation is excessively deep and possibly infinite.ts(2589)

I've tried to make the smallest demo possible to show it as an example.

{
  "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.

Kukkimonsuta commented 5 years ago

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?

itsdouges commented 5 years ago

using react-spring@9.0.0-beta.8

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}))

also there are no types for Controller

BowlingX commented 5 years ago

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>

CosmaTrix commented 5 years ago

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.

Edit: Fixed using

useRef<SpringHandle>(null);

aocenas commented 5 years ago

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 started. https://codesandbox.io/s/dreamy-sea-3el3n

aleclarson commented 5 years ago

@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).

aleclarson commented 5 years ago

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

@madou Tracking the example bug here: https://github.com/react-spring/react-spring.io/issues/16

@ChrisW-B An example repo for https://github.com/react-spring/react-spring/issues/642#issuecomment-491309508 would be helpful. Thanks!

ksaldana1 commented 5 years ago

I had been having some issues with VSCode performance recently and I spent some time looking into it tonight—for the particular project I'm working on 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. This is running the latest 3.5-rc build of TypeScript.

File at rest (with v9 typings active):

1 second after save/change (CPU spikes up to 280%):

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 (spikes to ~400 MB/85%-100% CPU usage). 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.

aocenas commented 5 years ago

@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: (canceled: boolean) => {
  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.

rainstormza commented 5 years ago

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 and feels smoother.

v8 example https://react-spring-325-aszmjdhnnv.now.sh May-30-2562 08-36-35

v9 example https://react-spring-325-tkuptdounw.now.sh May-30-2562 08-35-05

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.

aleclarson commented 5 years ago

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

dagstuan commented 5 years ago

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.

aleclarson commented 5 years ago

9.0.0-beta.10 is now available! 🎉

Notable changes:

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

rainstormza commented 5 years ago

@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.

wangzuo commented 5 years ago

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

aleclarson commented 5 years ago

I just released react-spring@9.0.0-beta.11 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.

pmndrs / react-spring