[TypeScript] V9 UseSprings setter definition issue

[barrymay]

Hi,

I'm trying to use useSprings with Typescript, and the setter seems to be defined incorrectly in the d.ts. This was equally a problem in v8 but my understanding is that you're not taking updates typing there ;)

The useSprings (plural) setting is currently defined like this for v9

export interface SpringUpdateFn<T extends object = {}> {
  /** Update the props of a spring */
  (props: SpringUpdate<T>): void

export type SpringUpdate<T extends object = {}> = Partial<T> &
  SpringProps<{ to: T }> &
  UnknownProps

But it seems to me like it should be this:

export type SpringsUpdateFn<Props extends object = {}> = (
  i: number
) => Props & UseSpringProps<Props>

I tried to create a PR to help here, but I'm getting an error (below) after running thru the contributing script and hooking it into my project:

.../react-spring/packages/core/src/legacy.js
SyntaxError: .../react-spring/packages/core/src/legacy.js: Unexpected token (25:6)

  23 |     const element = is.fun(result) ? result(props) : result
  24 |     return element && element.type ? (
> 25 |       <element.type {...element.props} key={key} ref={element.ref} />
     |       ^
  26 |     ) : (
  27 |       element
  28 |     )

If someone can either help me with the PR building or just make the update themselves, I'd be happy to test it for you. I'm confident on this since my old code that worked on v8 still works on v9, just the typing here is problematic in both versions. (If I'm using it wrong in both, please let me know!)

Thanks,
Barry

[aleclarson]

Nice catch! So the SpringUpdateFn can actually be called 3 ways:

const [props, update] = useSprings(2, i => { ... })

// Update every Controller instance using a function:
update((i, spring) => { ... })

// ...using an array of updates (one per controller):
update([{ ... }, { ... }])

// ...using a single update (applied to all controllers):
update({ ... })

I'll push a commit to the v9 branch, and you can tell me if it works for you. 👍

[aleclarson]

I tried to create a PR to help here, but I'm getting an error (below) after running thru the contributing script and hooking it into my project

Sorry about the misleading contributor guide! 😅

First off, make sure your dev environment supports symlinks. Otherwise, you'll probably need a tool like relative-deps or yalc.

Also, if your dev environment can't compile TypeScript in node_modules, you should...

# Do this
yarn build && yarn lerna exec -- 'cd dist && yarn link'
# ...instead of this
yarn lerna exec -- yarn link

[aleclarson]

Here's the commit: bbf4829#diff-5bc9b0fe586e30b1bb7c54004608d241

You can git pull and try it out! 👍 It will be released in the next beta.

[barrymay]

Thanks @aleclarson! In testing I found an issue or two , please do check my PR out and make a beta if you're ok with the changes.

I'm having an 'Invalid Hook call' error showing up in my local project when I'm linking it (and it's referring to a call made in react-spring), but I think it's just the react linkage acting up (I tried doing yarn link react but unlike in other projects, it's not working in this case)

[aleclarson]

@barry4dev Try using relative-deps. That's made to solve the duplicate peer dependency issue, which is probably what's causing the "Invalid hook call" error.

Btw, to "realign" your local branch with force-pushed v9 branch, you can do git pull --rebase instead of creating a merge commit.

[barrymay]

Thanks - I'll give relative-deps a try - that said my dev env has worked ok in the past with yarn link (I'm on a Mac, so symlinks are fine)

[barrymay]

HI @aleclarson - relative-deps seems to get me further but didn't work.

Since the critical change was in @react-spring/core, I set it up like this

  "relativeDependencies": {
    "react-spring": "../../githubProjects/react-spring/packages/react-spring",
    "@react-spring/core": "../../githubProjects/react-spring/packages/core"
  },

but when I ran it it failed right after hitting the circular dependency you see in the build process.

I'm not positive it's the issue, but I'm thinking if we can fix that circular dependency it may fix the problem (since I think it's probably trying to resolve the file dependency). When I ran it with the config above, react-spring imported properly, but @react-spring/core didn't. It may also relate to the link issue (yarn links worked fine for me outside of react-spring)

src/index.ts → dist/index.d.ts...
(!) Circular dependency: src/types/spring.ts -> src/Controller.ts -> src/types/spring.ts
created dist/index.d.ts in 1.5s
[relative-deps] Copying to local node_modules
events.js:174
      throw er; // Unhandled 'error' event

Error: ENOENT: no such file or directory, open '@react-spring/core1561742406432.tgz'
Emitted 'error' event at:
    at errorOrDestroy (internal/streams/destroy.js:107:12)
    at WriteStream.onerror (_stream_readable.js:717:7)
    at WriteStream.emit (events.js:198:13)
    at lazyFs.open (internal/fs/streams.js:277:12)
    at FSReqWrap.args [as oncomplete] (fs.js:140:20)
(node:19408) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, unlink '...Development/githubProjects/react-spring/packages/core/@react-spring/core1561742406432.tgz'
    at Object.unlinkSync (fs.js:956:3)
    at packAndInstallLibrary (...Development/react/phase-ten-scorer/node_modules/relative-deps/index.js:154:8)
    at main (...Development/react/phase-ten-scorer/node_modules/relative-deps/index.js:60:7)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:19408) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:19408) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
✨  Done in 19.63s.