chore: upgrade to [email protected]

packages/animated/src/AnimatedObject.ts

@@ -1,5 +1,10 @@
 import { Lookup } from '@react-spring/types'
-import { each, eachProp, getFluidConfig } from '@react-spring/shared'
+import {
+  each,
+  eachProp,
+  getFluidValue,
+  hasFluidValue,
+} from '@react-spring/shared'
 import { Animated, isAnimated, getPayload } from './Animated'
 import { AnimatedValue } from './AnimatedValue'
 import { TreeContext } from './context'
@@ -16,13 +21,10 @@ export class AnimatedObject extends Animated {
     eachProp(this.source, (source, key) => {
       if (isAnimated(source)) {
         values[key] = source.getValue(animated)
-      } else {
-        const config = getFluidConfig(source)
-        if (config) {
-          values[key] = config.get()
-        } else if (!animated) {
-          values[key] = source
-        }
+      } else if (hasFluidValue(source)) {
+        values[key] = getFluidValue(source)
+      } else if (!animated) {
+        values[key] = source
       }
     })
     return values
@@ -51,8 +53,7 @@ export class AnimatedObject extends Animated {
 
   /** Add to a payload set. */
   protected _addToPayload(this: Set<AnimatedValue>, source: any) {
-    const config = getFluidConfig(source)
-    if (config && TreeContext.dependencies) {
+    if (TreeContext.dependencies && hasFluidValue(source)) {
       TreeContext.dependencies.add(source)
     }
     const payload = getPayload(source)

packages/animated/src/withAnimated.tsx

@@ -10,6 +10,8 @@ import {
   FluidEvent,
   FluidObserver,
   FluidValue,
+  addFluidObserver,
+  removeFluidObserver,
 } from '@react-spring/shared'
 import { ElementType } from '@react-spring/types'
 
@@ -67,29 +69,29 @@ export const withAnimated = (Component: any, host: HostConfig) => {
       observerRef.current = observer
 
       // Observe the latest dependencies.
-      each(deps, dep => dep.addChild(observer))
+      each(deps, dep => addFluidObserver(dep, observer))
 
       // Stop observing previous dependencies.
       if (lastObserver) {
-        each(lastObserver.deps, dep => dep.removeChild(lastObserver))
+        each(lastObserver.deps, dep => removeFluidObserver(dep, lastObserver))
         raf.cancel(lastObserver.update)
       }
     })
 
     // Stop observing on unmount.
     useOnce(() => () => {
       const observer = observerRef.current!
-      each(observer.deps, dep => dep.removeChild(observer))
+      each(observer.deps, dep => removeFluidObserver(dep, observer))
     })
 
     const usedProps = host.getComponentProps(props.getValue())
     return <Component {...usedProps} ref={ref} />
   })
 }
 
-class PropsObserver implements FluidObserver {
+class PropsObserver {
   constructor(readonly update: () => void, readonly deps: Set<FluidValue>) {}
-  onParentChange(event: FluidEvent) {
+  eventObserved(event: FluidEvent) {
     if (event.type == 'change') {
       raf.write(this.update)
     }

packages/core/src/Controller.ts

@@ -8,6 +8,8 @@ import {
   toArray,
   eachProp,
   flushCalls,
+  addFluidObserver,
+  FluidObserver,
 } from '@react-spring/shared'
 
 import { getDefaultProp } from './helpers'
@@ -40,8 +42,7 @@ export interface ControllerQueue<State extends Lookup = Lookup>
     }
   > {}
 
-export class Controller<State extends Lookup = Lookup>
-  implements FrameValue.Observer {
+export class Controller<State extends Lookup = Lookup> {
   readonly id = nextId++
 
   /** The animated values */
@@ -246,7 +247,7 @@ export class Controller<State extends Lookup = Lookup>
   }
 
   /** @internal */
-  onParentChange(event: FrameValue.Event) {
+  eventObserved(event: FrameValue.Event) {
     if (event.type == 'change') {
       this._changed.add(event.parent)
       if (!event.idle) {
@@ -449,16 +450,16 @@ export function setSprings(
   eachProp(springs, (spring, key) => {
     if (!ctrl.springs[key]) {
       ctrl.springs[key] = spring
-      spring.addChild(ctrl)
+      addFluidObserver(spring, ctrl)
     }
   })
 }
 
-function createSpring(key: string, observer?: FrameValue.Observer) {
+function createSpring(key: string, observer?: FluidObserver<FrameValue.Event>) {
   const spring = new SpringValue()
   spring.key = key
   if (observer) {
-    spring.addChild(observer)
+    addFluidObserver(spring, observer)
   }
   return spring
 }

packages/core/src/FrameValue.ts

@@ -1,10 +1,9 @@
 import {
   deprecateInterpolate,
-  each,
   frameLoop,
   FluidValue,
-  FluidObserver,
   Globals as G,
+  callFluidObservers,
 } from '@react-spring/shared'
 import { InterpolatorArgs } from '@react-spring/types'
 import { getAnimated } from '@react-spring/animated'
@@ -21,16 +20,16 @@ let nextId = 1
  *
  * Its underlying value can be accessed and even observed.
  */
-export abstract class FrameValue<T = any>
-  extends FluidValue<T, FrameValue.Event<T>>
-  implements FluidObserver<FrameValue.Event> {
+export abstract class FrameValue<T = any> extends FluidValue<
+  T,
+  FrameValue.Event<T>
+> {
   readonly id = nextId++
 
   abstract key?: string
   abstract get idle(): boolean
 
   protected _priority = 0
-  protected _children = new Set<FrameValue.Observer<T>>()
 
   get priority() {
     return this._priority
@@ -63,23 +62,19 @@ export abstract class FrameValue<T = any>
     return this.get()
   }
 
-  /** @internal */
-  addChild(child: FrameValue.Observer<T>): void {
-    if (!this._children.size) this._attach()
-    this._children.add(child)
+  protected observerAdded(count: number) {
+    if (count == 1) this._attach()
   }
 
-  /** @internal */
-  removeChild(child: FrameValue.Observer<T>): void {
-    this._children.delete(child)
-    if (!this._children.size) this._detach()
+  protected observerRemoved(count: number) {
+    if (count == 0) this._detach()
   }
 
   /** @internal */
   abstract advance(dt: number): void
 
   /** @internal */
-  abstract onParentChange(_event: FrameValue.Event): void
+  abstract eventObserved(_event: FrameValue.Event): void
 
   /** Called when the first child is added. */
   protected _attach() {}
@@ -89,7 +84,7 @@ export abstract class FrameValue<T = any>
 
   /** Tell our children about our new value */
   protected _onChange(value: T, idle = false) {
-    this._emit({
+    callFluidObservers(this, {
       type: 'change',
       parent: this,
       value,
@@ -102,19 +97,12 @@ export abstract class FrameValue<T = any>
     if (!this.idle) {
       frameLoop.sort(this)
     }
-    this._emit({
+    callFluidObservers(this, {
       type: 'priority',
       parent: this,
       priority,
     })
   }
-
-  protected _emit(event: FrameValue.Event) {
-    // Clone "_children" so it can be safely mutated inside the loop.
-    each(Array.from(this._children), child => {
-      child.onParentChange(event)
-    })
-  }
 }
 
 export declare namespace FrameValue {
@@ -141,7 +129,4 @@ export declare namespace FrameValue {
 
   /** Events sent to children of `FrameValue` objects */
   export type Event<T = any> = ChangeEvent<T> | PriorityEvent<T> | IdleEvent<T>
-
-  /** An object that handles `FrameValue` events */
-  export type Observer<T = any> = FluidObserver<Event<T>>
 }

packages/core/src/Interpolation.test.ts

@@ -1,5 +1,6 @@
 import { SpringValue } from './SpringValue'
 import { to } from './interpolate'
+import { addFluidObserver } from '@react-spring/shared'
 
 describe('Interpolation', () => {
   it.todo('can use a SpringValue')
@@ -25,7 +26,7 @@ describe('Interpolation', () => {
 
       // For interpolation to be active, it must be observed.
       const observer = jest.fn()
-      c.addChild({ onParentChange: observer })
+      addFluidObserver(c, observer)
 
       // Pause the first input.
       a.pause()

packages/core/src/Interpolation.ts

@@ -12,8 +12,12 @@ import {
   toArray,
   frameLoop,
   FluidValue,
+  getFluidValue,
   createInterpolator,
   Globals as G,
+  callFluidObservers,
+  addFluidObserver,
+  removeFluidObserver,
 } from '@react-spring/shared'
 
 import { FrameValue, isFrameValue } from './FrameValue'
@@ -75,8 +79,8 @@ export class Interpolation<In = any, Out = any> extends FrameValue<Out> {
 
   protected _get() {
     const inputs: Arrify<In> = is.arr(this.source)
-      ? this.source.map(node => node.get())
-      : (toArray(this.source.get()) as any)
+      ? this.source.map(getFluidValue)
+      : (toArray(getFluidValue(this.source)) as any)
 
     return this.calc(...inputs)
   }
@@ -102,7 +106,7 @@ export class Interpolation<In = any, Out = any> extends FrameValue<Out> {
   protected _attach() {
     let priority = 1
     each(toArray(this.source), source => {
-      source.addChild(this)
+      addFluidObserver(source, this)
       if (isFrameValue(source)) {
         if (!source.idle) {
           this._active.add(source)
@@ -117,14 +121,14 @@ export class Interpolation<In = any, Out = any> extends FrameValue<Out> {
   // Stop observing our sources once we have no observers.
   protected _detach() {
     each(toArray(this.source), source => {
-      source.removeChild(this)
+      removeFluidObserver(source, this)
     })
     this._active.clear()
     becomeIdle(this)
   }
 
   /** @internal */
-  onParentChange(event: FrameValue.Event) {
+  eventObserved(event: FrameValue.Event) {
     // Update our value when an idle parent is changed,
     // and enter the frameloop when a parent is resumed.
     if (event.type == 'change') {
@@ -172,7 +176,7 @@ function becomeIdle(self: Interpolation) {
       node.done = true
     })
 
-    self['_emit']({
+    callFluidObservers(self, {
       type: 'idle',
       parent: self,
     })

packages/core/src/SpringValue.test.ts

@@ -1,7 +1,13 @@
 import { SpringValue } from './SpringValue'
 import { FrameValue } from './FrameValue'
 import { flushMicroTasks } from 'flush-microtasks'
-import { Globals } from '@react-spring/shared'
+import {
+  addFluidObserver,
+  FluidObserver,
+  getFluidObservers,
+  Globals,
+  removeFluidObserver,
+} from '@react-spring/shared'
 
 const frameLength = 1000 / 60
 
@@ -64,7 +70,7 @@ describe('SpringValue', () => {
     })
 
     // The target is not attached until the spring is observed.
-    spring.addChild({ onParentChange() {} })
+    addFluidObserver(spring, () => {})
 
     mockRaf.step()
     target.set('red')
@@ -801,14 +807,12 @@ function describeTarget(name: string, create: (from: number) => OpaqueTarget) {
   describe('when our target is ' + name, () => {
     let target: OpaqueTarget
     let spring: SpringValue
-    let observer: FrameValue.Observer & {
-      onParentChange: jest.MockedFunction<any>
-    }
+    let observer: FluidObserver
     beforeEach(() => {
       target = create(1)
       spring = new SpringValue(0)
       // The target is not attached until the spring is observed.
-      spring.addChild((observer = { onParentChange: jest.fn() }))
+      addFluidObserver(spring, (observer = () => {}))
     })
 
     it('animates toward the current value', async () => {
@@ -906,14 +910,14 @@ function describeTarget(name: string, create: (from: number) => OpaqueTarget) {
     // in a memory leak since the Interpolation stays in the frameloop.
     describe('when our last child is detached', () => {
       it('detaches from the target', () => {
-        const children = target.node['_children']
         spring.start({ to: target.node })
 
         // Expect the target node to be attached.
+        const children = getFluidObservers(target.node)!
         expect(children.has(spring)).toBeTruthy()
 
         // Remove the observer.
-        spring.removeChild(observer)
+        removeFluidObserver(spring, observer)
 
         // Expect the target node to be detached.
         expect(children.has(spring)).toBeFalsy()