@react-spring/core - npm Package Compare versions

Comparing version 9.2.0-beta.6 to 9.2.0-beta.7

CHANGELOG.md

 # @react-spring/core
 
-## 9.2.0-beta.6
+## 9.2.0-beta.7

dist/declarations/src/Controller.d.ts

 import { OneOrMore, UnknownProps, Lookup, Falsy } from '@react-spring/types';
 import { FrameValue } from './FrameValue';
-import { SpringRef } from './SpringRef';
+import type { SpringRef } from './SpringRef';
 import { SpringValue } from './SpringValue';
@@ -5,0 +5,0 @@ import { RunAsyncState } from './runAsync';

dist/declarations/src/hooks/useSprings.d.ts

@@ -5,5 +5,5 @@ import { Lookup } from '@react-spring/types';
 import { Controller } from '../Controller';
-import { SpringRef } from '../SpringRef';
+import type { SpringRef as SpringRefType } from '../SpringRef';
 export declare type UseSpringsProps<State extends Lookup = Lookup> = unknown & ControllerUpdate<State> & {
-    ref?: SpringRef<State>;
+    ref?: SpringRefType<State>;
 };
@@ -16,3 +16,3 @@ /**
  */
-export declare function useSprings<Props extends UseSpringProps>(length: number, props: (i: number, ctrl: Controller) => Props, deps?: readonly any[]): PickAnimated<Props> extends infer State ? [SpringValues<State>[], SpringRef<State>] : never;
+export declare function useSprings<Props extends UseSpringProps>(length: number, props: (i: number, ctrl: Controller) => Props, deps?: readonly any[]): PickAnimated<Props> extends infer State ? [SpringValues<State>[], SpringRefType<State>] : never;
 /**
@@ -25,2 +25,2 @@ * Animations are updated on re-render.
  */
-export declare function useSprings<Props extends UseSpringsProps>(length: number, props: Props[] & UseSpringsProps<PickAnimated<Props>>[], deps: readonly any[] | undefined): PickAnimated<Props> extends infer State ? [SpringValues<State>[], SpringRef<State>] : never;
+export declare function useSprings<Props extends UseSpringsProps>(length: number, props: Props[] & UseSpringsProps<PickAnimated<Props>>[], deps: readonly any[] | undefined): PickAnimated<Props> extends infer State ? [SpringValues<State>[], SpringRefType<State>] : never;

dist/declarations/src/hooks/useTransition.d.ts

 import { OneOrMore } from '@react-spring/types';
 import { PickAnimated, TransitionFn, UseTransitionProps } from '../types';
 import { Valid } from '../types/common';
-import { SpringRef } from '../SpringRef';
-export declare function useTransition<Item, Props extends object>(data: OneOrMore<Item>, props: () => UseTransitionProps<Item> | (Props & Valid<Props, UseTransitionProps<Item>>), deps?: any[]): PickAnimated<Props> extends infer State ? [TransitionFn<Item, PickAnimated<Props>>, SpringRef<State>] : never;
+import type { SpringRef as SpringRefType } from '../SpringRef';
+export declare function useTransition<Item, Props extends object>(data: OneOrMore<Item>, props: () => UseTransitionProps<Item> | (Props & Valid<Props, UseTransitionProps<Item>>), deps?: any[]): PickAnimated<Props> extends infer State ? [TransitionFn<Item, PickAnimated<Props>>, SpringRefType<State>] : never;
 export declare function useTransition<Item, Props extends object>(data: OneOrMore<Item>, props: UseTransitionProps<Item> | (Props & Valid<Props, UseTransitionProps<Item>>)): TransitionFn<Item, PickAnimated<Props>>;
-export declare function useTransition<Item, Props extends object>(data: OneOrMore<Item>, props: UseTransitionProps<Item> | (Props & Valid<Props, UseTransitionProps<Item>>), deps: any[] | undefined): PickAnimated<Props> extends infer State ? [TransitionFn<Item, State>, SpringRef<State>] : never;
+export declare function useTransition<Item, Props extends object>(data: OneOrMore<Item>, props: UseTransitionProps<Item> | (Props & Valid<Props, UseTransitionProps<Item>>), deps: any[] | undefined): PickAnimated<Props> extends infer State ? [TransitionFn<Item, State>, SpringRefType<State>] : never;

dist/declarations/src/SpringRef.d.ts

@@ -7,17 +7,21 @@ import { Lookup, Falsy, OneOrMore } from '@react-spring/types';
 }
-/**
- * Extending from function allows SpringRef instances to be callable.
- * https://hackernoon.com/creating-callable-objects-in-javascript-d21l3te1
- *
- * ```js
- * const [springs, api] = useSpring(() => ({x: 0}))
- * api.start({x: 3}) // this works
- * api({x: 3}) // this also works (non breaking from 9rc3)
- * ```
- */
-export declare class SpringRef<State extends Lookup = Lookup> extends Function {
-    readonly current: Controller<State>[];
-    constructor();
-    /** @deprecated use the property 'start' instead */
-    _call(props?: ControllerUpdate<State> | ControllerUpdateFn<State>): void;
+export interface SpringRef<State extends Lookup = Lookup> {
+    (props?: ControllerUpdate<State> | ControllerUpdateFn<State>): AsyncResult<Controller<State>>[];
+    current: Controller<State>[];
+    /** Add a controller to this ref */
+    add(ctrl: Controller<State>): void;
+    /** Remove a controller from this ref */
+    delete(ctrl: Controller<State>): void;
+    /** Pause all animations. */
+    pause(): this;
+    /** Pause animations for the given keys. */
+    pause(keys: OneOrMore<string>): this;
+    /** Pause some or all animations. */
+    pause(keys?: OneOrMore<string>): this;
+    /** Resume all animations. */
+    resume(): this;
+    /** Resume animations for the given keys. */
+    resume(keys: OneOrMore<string>): this;
+    /** Resume some or all animations. */
+    resume(keys?: OneOrMore<string>): this;
     /** Update the state of each controller without animating. */
@@ -33,17 +37,2 @@ set(values: Partial<State>): void;
     start(props?: ControllerUpdate<State> | ControllerUpdateFn<State>): AsyncResult<Controller<State>>[];
-    /** Add the same props to each controller's update queue. */
-    update(props: ControllerUpdate<State>): this;
-    /** Generate separate props for each controller's update queue. */
-    update(props: ControllerUpdateFn<State>): this;
-    /** Add props to each controller's update queue. */
-    update(props: ControllerUpdate<State> | ControllerUpdateFn<State>): this;
-    /** Add a controller to this ref */
-    add(ctrl: Controller<State>): void;
-    /** Remove a controller from this ref */
-    delete(ctrl: Controller<State>): void;
-    /** Overridden by `useTrail` to manipulate props */
-    protected _getProps(arg: ControllerUpdate<State> | ControllerUpdateFn<State>, ctrl: Controller<State>, index: number): ControllerUpdate<State> | Falsy;
-}
-export interface SpringRef<State extends Lookup> {
-    (props?: ControllerUpdate<State> | ControllerUpdateFn<State>): AsyncResult<Controller<State>>[];
     /** Stop all animations. */
@@ -61,15 +50,11 @@ stop(): this;
     stop(cancel: boolean, keys?: OneOrMore<string>): this;
-    /** Pause all animations. */
-    pause(): this;
-    /** Pause animations for the given keys. */
-    pause(keys: OneOrMore<string>): this;
-    /** Pause some or all animations. */
-    pause(keys?: OneOrMore<string>): this;
-    /** Resume all animations. */
-    resume(): this;
-    /** Resume animations for the given keys. */
-    resume(keys: OneOrMore<string>): this;
-    /** Resume some or all animations. */
-    resume(keys?: OneOrMore<string>): this;
+    /** Add the same props to each controller's update queue. */
+    update(props: ControllerUpdate<State>): this;
+    /** Generate separate props for each controller's update queue. */
+    update(props: ControllerUpdateFn<State>): this;
+    /** Add props to each controller's update queue. */
+    update(props: ControllerUpdate<State> | ControllerUpdateFn<State>): this;
+    _getProps(arg: ControllerUpdate<State> | ControllerUpdateFn<State>, ctrl: Controller<State>, index: number): ControllerUpdate<State> | Falsy;
 }
+export declare const SpringRef: <State extends Lookup<any> = Lookup<any>>() => SpringRef<State>;
 export {};

dist/react-spring-core.cjs.dev.js

@@ -1794,23 +1794,52 @@ 'use strict';
 
-class SpringRef extends Function {
-  constructor() {
-    super();
-    this.current = [];
-    return new Proxy(this, {
-      apply: (target, thisArg, args) => target._call(...args)
-    });
-  }
+const SpringRef = () => {
+  const current = [];
 
-  _call(props) {
+  const SpringRef = function SpringRef(props) {
     shared.deprecateDirectCall();
-    this.start(props);
-  }
+    const results = [];
+    shared.each(current, (ctrl, i) => {
+      if (shared.is.und(props)) {
+        results.push(ctrl.start());
+      } else {
+        const update = _getProps(props, ctrl, i);
 
-  set(values) {
-    shared.each(this.current, ctrl => ctrl.set(values));
-  }
+        if (update) {
+          results.push(ctrl.start(update));
+        }
+      }
+    });
+    return results;
+  };
 
-  start(props) {
+  SpringRef.current = current;
+
+  SpringRef.add = function (ctrl) {
+    if (!current.includes(ctrl)) {
+      current.push(ctrl);
+    }
+  };
+
+  SpringRef.delete = function (ctrl) {
+    const i = current.indexOf(ctrl);
+    if (~i) current.splice(i, 1);
+  };
+
+  SpringRef.pause = function () {
+    shared.each(current, ctrl => ctrl.pause(...arguments));
+    return this;
+  };
+
+  SpringRef.resume = function () {
+    shared.each(current, ctrl => ctrl.resume(...arguments));
+    return this;
+  };
+
+  SpringRef.set = function (values) {
+    shared.each(current, ctrl => ctrl.set(values));
+  };
+
+  SpringRef.start = function (props) {
     const results = [];
-    shared.each(this.current, (ctrl, i) => {
+    shared.each(current, (ctrl, i) => {
       if (shared.is.und(props)) {
@@ -1827,36 +1856,26 @@ results.push(ctrl.start());
     return results;
-  }
+  };
 
-  update(props) {
-    shared.each(this.current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
+  SpringRef.stop = function () {
+    shared.each(current, ctrl => ctrl.stop(...arguments));
     return this;
-  }
+  };
 
-  add(ctrl) {
-    if (!this.current.includes(ctrl)) {
-      this.current.push(ctrl);
-    }
-  }
+  SpringRef.update = function (props) {
+    shared.each(current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
+    return this;
+  };
 
-  delete(ctrl) {
-    const i = this.current.indexOf(ctrl);
-    if (~i) this.current.splice(i, 1);
-  }
-
-  _getProps(arg, ctrl, index) {
+  const _getProps = function _getProps(arg, ctrl, index) {
     return shared.is.fun(arg) ? arg(index, ctrl) : arg;
-  }
-
-}
-shared.each(['stop', 'pause', 'resume'], key => {
-  SpringRef.prototype[key] = function () {
-    shared.each(this.current, ctrl => ctrl[key](...arguments));
-    return this;
   };
-});
 
+  SpringRef._getProps = _getProps;
+  return SpringRef;
+};
+
 function useSprings(length, props, deps) {
   const propsFn = shared.is.fun(props) && props;
   if (propsFn && !deps) deps = [];
-  const ref = React.useMemo(() => propsFn || arguments.length == 3 ? new SpringRef() : void 0, []);
+  const ref = React.useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
   const layoutId = React.useRef(0);
@@ -1959,3 +1978,3 @@ const forceUpdate = shared.useForceUpdate();
 
-const initSpringRef = () => new SpringRef();
+const initSpringRef = () => SpringRef();
 
@@ -2020,3 +2039,3 @@ const useSpringRef = () => React.useState(initSpringRef)[0];
   } = propsFn ? propsFn() : props;
-  const ref = React.useMemo(() => propsFn || arguments.length == 3 ? new SpringRef() : void 0, []);
+  const ref = React.useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
   const items = shared.toArray(data);
@@ -2023,0 +2042,0 @@ const transitions = [];

dist/react-spring-core.cjs.prod.js

@@ -1794,23 +1794,52 @@ 'use strict';
 
-class SpringRef extends Function {
-  constructor() {
-    super();
-    this.current = [];
-    return new Proxy(this, {
-      apply: (target, thisArg, args) => target._call(...args)
-    });
-  }
+const SpringRef = () => {
+  const current = [];
 
-  _call(props) {
+  const SpringRef = function SpringRef(props) {
     shared.deprecateDirectCall();
-    this.start(props);
-  }
+    const results = [];
+    shared.each(current, (ctrl, i) => {
+      if (shared.is.und(props)) {
+        results.push(ctrl.start());
+      } else {
+        const update = _getProps(props, ctrl, i);
 
-  set(values) {
-    shared.each(this.current, ctrl => ctrl.set(values));
-  }
+        if (update) {
+          results.push(ctrl.start(update));
+        }
+      }
+    });
+    return results;
+  };
 
-  start(props) {
+  SpringRef.current = current;
+
+  SpringRef.add = function (ctrl) {
+    if (!current.includes(ctrl)) {
+      current.push(ctrl);
+    }
+  };
+
+  SpringRef.delete = function (ctrl) {
+    const i = current.indexOf(ctrl);
+    if (~i) current.splice(i, 1);
+  };
+
+  SpringRef.pause = function () {
+    shared.each(current, ctrl => ctrl.pause(...arguments));
+    return this;
+  };
+
+  SpringRef.resume = function () {
+    shared.each(current, ctrl => ctrl.resume(...arguments));
+    return this;
+  };
+
+  SpringRef.set = function (values) {
+    shared.each(current, ctrl => ctrl.set(values));
+  };
+
+  SpringRef.start = function (props) {
     const results = [];
-    shared.each(this.current, (ctrl, i) => {
+    shared.each(current, (ctrl, i) => {
       if (shared.is.und(props)) {
@@ -1827,36 +1856,26 @@ results.push(ctrl.start());
     return results;
-  }
+  };
 
-  update(props) {
-    shared.each(this.current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
+  SpringRef.stop = function () {
+    shared.each(current, ctrl => ctrl.stop(...arguments));
     return this;
-  }
+  };
 
-  add(ctrl) {
-    if (!this.current.includes(ctrl)) {
-      this.current.push(ctrl);
-    }
-  }
+  SpringRef.update = function (props) {
+    shared.each(current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
+    return this;
+  };
 
-  delete(ctrl) {
-    const i = this.current.indexOf(ctrl);
-    if (~i) this.current.splice(i, 1);
-  }
-
-  _getProps(arg, ctrl, index) {
+  const _getProps = function _getProps(arg, ctrl, index) {
     return shared.is.fun(arg) ? arg(index, ctrl) : arg;
-  }
-
-}
-shared.each(['stop', 'pause', 'resume'], key => {
-  SpringRef.prototype[key] = function () {
-    shared.each(this.current, ctrl => ctrl[key](...arguments));
-    return this;
   };
-});
 
+  SpringRef._getProps = _getProps;
+  return SpringRef;
+};
+
 function useSprings(length, props, deps) {
   const propsFn = shared.is.fun(props) && props;
   if (propsFn && !deps) deps = [];
-  const ref = React.useMemo(() => propsFn || arguments.length == 3 ? new SpringRef() : void 0, []);
+  const ref = React.useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
   const layoutId = React.useRef(0);
@@ -1959,3 +1978,3 @@ const forceUpdate = shared.useForceUpdate();
 
-const initSpringRef = () => new SpringRef();
+const initSpringRef = () => SpringRef();
 
@@ -2020,3 +2039,3 @@ const useSpringRef = () => React.useState(initSpringRef)[0];
   } = propsFn ? propsFn() : props;
-  const ref = React.useMemo(() => propsFn || arguments.length == 3 ? new SpringRef() : void 0, []);
+  const ref = React.useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
   const items = shared.toArray(data);
@@ -2023,0 +2042,0 @@ const transitions = [];

dist/react-spring-core.esm.js

@@ -1770,23 +1770,52 @@ import { eachProp, is, toArray, isAnimatedString, Globals, getFluidValue, useLayoutEffect, each, raf, flush, FluidValue, deprecateInterpolate, callFluidObservers, frameLoop, hasFluidValue, flushCalls, isEqual, getFluidObservers, addFluidObserver, removeFluidObserver, noop, useMemoOne, deprecateDirectCall, useForceUpdate, usePrev, useOnce, createInterpolator, createStringInterpolator } from '@react-spring/shared';
 
-class SpringRef extends Function {
-  constructor() {
-    super();
-    this.current = [];
-    return new Proxy(this, {
-      apply: (target, thisArg, args) => target._call(...args)
-    });
-  }
+const SpringRef = () => {
+  const current = [];
 
-  _call(props) {
+  const SpringRef = function SpringRef(props) {
     deprecateDirectCall();
-    this.start(props);
-  }
+    const results = [];
+    each(current, (ctrl, i) => {
+      if (is.und(props)) {
+        results.push(ctrl.start());
+      } else {
+        const update = _getProps(props, ctrl, i);
 
-  set(values) {
-    each(this.current, ctrl => ctrl.set(values));
-  }
+        if (update) {
+          results.push(ctrl.start(update));
+        }
+      }
+    });
+    return results;
+  };
 
-  start(props) {
+  SpringRef.current = current;
+
+  SpringRef.add = function (ctrl) {
+    if (!current.includes(ctrl)) {
+      current.push(ctrl);
+    }
+  };
+
+  SpringRef.delete = function (ctrl) {
+    const i = current.indexOf(ctrl);
+    if (~i) current.splice(i, 1);
+  };
+
+  SpringRef.pause = function () {
+    each(current, ctrl => ctrl.pause(...arguments));
+    return this;
+  };
+
+  SpringRef.resume = function () {
+    each(current, ctrl => ctrl.resume(...arguments));
+    return this;
+  };
+
+  SpringRef.set = function (values) {
+    each(current, ctrl => ctrl.set(values));
+  };
+
+  SpringRef.start = function (props) {
     const results = [];
-    each(this.current, (ctrl, i) => {
+    each(current, (ctrl, i) => {
       if (is.und(props)) {
@@ -1803,36 +1832,26 @@ results.push(ctrl.start());
     return results;
-  }
+  };
 
-  update(props) {
-    each(this.current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
+  SpringRef.stop = function () {
+    each(current, ctrl => ctrl.stop(...arguments));
     return this;
-  }
+  };
 
-  add(ctrl) {
-    if (!this.current.includes(ctrl)) {
-      this.current.push(ctrl);
-    }
-  }
+  SpringRef.update = function (props) {
+    each(current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
+    return this;
+  };
 
-  delete(ctrl) {
-    const i = this.current.indexOf(ctrl);
-    if (~i) this.current.splice(i, 1);
-  }
-
-  _getProps(arg, ctrl, index) {
+  const _getProps = function _getProps(arg, ctrl, index) {
     return is.fun(arg) ? arg(index, ctrl) : arg;
-  }
-
-}
-each(['stop', 'pause', 'resume'], key => {
-  SpringRef.prototype[key] = function () {
-    each(this.current, ctrl => ctrl[key](...arguments));
-    return this;
   };
-});
 
+  SpringRef._getProps = _getProps;
+  return SpringRef;
+};
+
 function useSprings(length, props, deps) {
   const propsFn = is.fun(props) && props;
   if (propsFn && !deps) deps = [];
-  const ref = useMemo(() => propsFn || arguments.length == 3 ? new SpringRef() : void 0, []);
+  const ref = useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
   const layoutId = useRef(0);
@@ -1935,3 +1954,3 @@ const forceUpdate = useForceUpdate();
 
-const initSpringRef = () => new SpringRef();
+const initSpringRef = () => SpringRef();
 
@@ -1996,3 +2015,3 @@ const useSpringRef = () => useState(initSpringRef)[0];
   } = propsFn ? propsFn() : props;
-  const ref = useMemo(() => propsFn || arguments.length == 3 ? new SpringRef() : void 0, []);
+  const ref = useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
   const items = toArray(data);
@@ -1999,0 +2018,0 @@ const transitions = [];

package.json

 {
   "name": "@react-spring/core",
-  "version": "9.2.0-beta.6",
+  "version": "9.2.0-beta.7",
   "main": "dist/react-spring-core.cjs.js",
@@ -5,0 +5,0 @@ "module": "dist/react-spring-core.esm.js",

No alert changes

Improved metrics

Total package byte prevSize

247089

increased by0.45%

Lines of code

7626

increased by0.36%

No dependency changes