feat: new hooks api

Author: drcmda

packages/core/src/legacy.js

@@ -5,11 +5,11 @@ import { useTransition } from './useTransition'
 import { is } from 'shared'
 
 export function Spring({ children, ...props }) {
-  return children(useSpring(props))
+  return children(useSpring(props)[0])
 }
 
 export function Trail({ items, children, ...props }) {
-  const trails = useTrail(items.length, props)
+  const [trails] = useTrail(items.length, props)
   return items.map((item, index) => {
     const result = children(item, index)
     return is.fun(result) ? result(trails[index]) : result

packages/core/src/useSpring.js

@@ -2,12 +2,12 @@ import { useSprings } from './useSprings'
 import { is } from 'shared'
 
 /** API
- * const props = useSpring({ ... })
- * const [props, set] = useSpring(() => ({ ... }))
+ * const [props, set, cancel] = useSpring(props, [optionalDeps])
+ * const [props, set, cancel] = useSpring(() => props, [optionalDeps])
  */
 
 export const useSpring = (props, deps) => {
   const isFn = is.fun(props)
   const [result, set, stop] = useSprings(1, isFn ? props : [props], deps)
-  return isFn ? [result[0], set, stop] : result
+  return [result[0], set, stop]
 }

packages/core/src/useSprings.js

@@ -5,8 +5,9 @@ import { useMemoOne } from 'use-memo-one'
 import { Controller } from './Controller'
 
 /** API
- * const props = useSprings(number, [{ ... }, { ... }, ...])
- * const [props, set] = useSprings(number, (i, controller) => ({ ... }))
+ * const [props, set, cancel] = useSprings(number, props, [optionalDeps])
+ * const [props, set, cancel] = useSprings(number, [props], [optionalDeps])
+ * const [props, set, cancel] = useSprings(number, index => props, [optionalDeps])
  */
 
 export const useSprings = (length, propsArg, deps) => {
@@ -90,5 +91,5 @@ export const useSprings = (length, propsArg, deps) => {
   })
 
   const values = springs.map(s => ({ ...s.animated }))
-  return isFn ? [values, update, stop] : values
+  return [values, update, stop]
 }

packages/core/src/useTrail.js

@@ -5,11 +5,11 @@ import { useSprings } from './useSprings'
 import { callProp } from './helpers'
 
 /** API
- * const trails = useTrail(number, { ... })
- * const [trails, set] = useTrail(number, () => ({ ... }))
+ * const [trails, set, cancel] = useTrail(number, props, [optionalDeps])
+ * const [trails, set, cancel] = useTrail(number, () => props, [optionalDeps])
  */
 
-export const useTrail = (length, propsArg) => {
+export const useTrail = (length, propsArg, deps) => {
   const hasNewSprings = length !== usePrev(length)
   const isFn = is.fun(propsArg)
 
@@ -22,22 +22,24 @@ export const useTrail = (length, propsArg) => {
   if (hasNewSprings) springs.length = length
 
   // The controllers are recreated whenever `length` changes.
-  const [values, animate, stop] = useSprings(length, (i, spring) => {
-    if (isFn && !props) {
-      props = callProp(propsArg, spring) || {}
-    }
-    springs[i] = spring
-    return {
-      ...props,
-      ...(i > 0 && {
-        attach: () => springs[i - 1],
+  const [values, animate, stop] = useSprings(
+    length,
+    (i, spring) => {
+      if (isFn && !props) {
+        props = callProp(propsArg, spring) || {}
+      }
+      springs[i] = spring
+      return {
+        ...props,
+        parent: i > 0 ? springs[i - 1] : null,
+        config: callProp(props.config, i),
         onStart: withArgument(props.onStart, i),
         onFrame: withArgument(props.onFrame, i),
         onRest: withArgument(props.onRest, i),
-      }),
-      config: callProp(props.config, i),
-    }
-  })
+      }
+    },
+    deps
+  )
 
   /** For imperative updates to the props of all springs in the trail */
   const update = useCallbackOne(
@@ -62,8 +64,7 @@ export const useTrail = (length, propsArg) => {
     }
   })
 
-  // Return the update/stop functions when the `propsArg` is a function.
-  return isFn ? [values, update, stop] : values
+  return [values, update, stop]
 }
 
 function withArgument(fn, arg) {

packages/core/src/useTransition.js

@@ -4,8 +4,8 @@ import { is, useForceUpdate, useOnce } from 'shared'
 import { Controller } from './Controller'
 
 /** API
- * const transitions = useTransition(items, itemKeys, { ... })
- * const [transitions, update] = useTransition(items, itemKeys, () => ({ ... }))
+ * const transitions = useTransition(items, itemKeys, props)
+ * const transitions = useTransition(items, itemKeys, () => props)
  */
 
 let guid = 0
@@ -25,6 +25,8 @@ const makeConfig = props => {
 }
 
 export function useTransition(input, keyTransform, props) {
+  // Coerce props to an object
+  props = useMemo(() => callProp(props), [])
   props = makeConfig({
     ...props,
     items: input,

targets/web/src/__tests__/useSpring.tsx

@@ -11,7 +11,7 @@ import {
 } from '..';
 
 test('infer return type via forward prop', () => {
-  const props = useSpring({ width: 0, delay: 1000 });
+  const [props] = useSpring({ width: 0, delay: 1000 });
   assert(props, _ as {
     [key: string]: SpringValue<any>;
     width: SpringValue<number>;
@@ -24,7 +24,7 @@ test('infer return type via forward prop', () => {
 });
 
 test('infer return type via "from" prop', () => {
-  const props = useSpring({
+  const [props] = useSpring({
     from: { width: 0 },
   });
   assert(props, _ as {
@@ -34,7 +34,7 @@ test('infer return type via "from" prop', () => {
 });
 
 test('infer return type via "to" prop', () => {
-  const props = useSpring({
+  const [props] = useSpring({
     to: { width: 0 },
   });
   assert(props, _ as {
@@ -44,7 +44,7 @@ test('infer return type via "to" prop', () => {
 });
 
 test('infer return type via "from" and "to" props', () => {
-  const props = useSpring({
+  const [props] = useSpring({
     from: { width: 0 },
     to: { height: '100%' },
   });
@@ -56,7 +56,7 @@ test('infer return type via "from" and "to" props', () => {
 });
 
 test('infer return type via "from" and forward props', () => {
-  const props = useSpring({
+  const [props] = useSpring({
     from: { width: 0 },
     height: '100%',
   });
@@ -68,7 +68,7 @@ test('infer return type via "from" and forward props', () => {
 });
 
 test('infer animated array', () => {
-  const props = useSpring({
+  const [props] = useSpring({
     to: { foo: [0, 0] },
   });
   assert(props, _ as {
@@ -166,7 +166,7 @@ test('spring refs', () => {
 });
 
 test('basic config', () => {
-  const props = useSpring({
+  const [props] = useSpring({
     from: { width: 0 },
     reset: true,
     delay: 1000,
@@ -187,7 +187,7 @@ test('basic config', () => {
 });
 
 test('function as "to" prop', () => {
-  const props = useSpring({
+  const [props] = useSpring({
     to: async next => {
       assert(next, _ as SpringUpdateFn);
 
@@ -209,7 +209,7 @@ test('function as "to" prop', () => {
   });
 
   test('with "from" prop', () => {
-    const props = useSpring({
+    const [props] = useSpring({
       from: { foo: 1 },
       to: async next => {
         assert(next, _ as SpringUpdateFn); // FIXME: should be "SpringUpdateFn<{ foo: number }>"
@@ -229,7 +229,7 @@ test('function as "to" prop', () => {
 
 test('array as "to" prop', () => {
   // ⚠️ Animated keys are not inferred when "to" is an array (unless "from" exists)
-  const props = useSpring({
+  const [props] = useSpring({
     to: [{ opacity: 1 }, { opacity: 0 }],
     foo: 0, // ️️⚠️ This key is ignored because "to" exists
   });
@@ -239,7 +239,7 @@ test('array as "to" prop', () => {
   });
 
   test('with "from" prop', () => {
-    const props = useSpring({
+    const [props] = useSpring({
       to: [{ opacity: 1 }, { opacity: 0 }],
       from: { opacity: 0 },
     });

targets/web/src/__tests__/useSprings.tsx

@@ -4,7 +4,7 @@ import { useSprings, SpringValue, SpringUpdateFn, SpringStopFn } from '..';
 const items: string[] = [];
 
 test('pass an array', () => {
-  const springs = useSprings(
+  const [springs] = useSprings(
     items.length,
     items.map(item => {
       assert(item, _ as string);

targets/web/src/__tests__/useTrail.tsx

@@ -2,7 +2,7 @@ import { assert, test, _ } from 'spec.ts';
 import { useTrail, SpringValue, SpringUpdateFn, SpringStopFn } from '..';
 
 test('basic usage', () => {
-  const springs = useTrail(3, { opacity: 1 });
+  const [springs] = useTrail(3, { opacity: 1 });
   assert(springs, _ as Array<{
     [key: string]: SpringValue<any>;
     opacity: SpringValue<number>;