feat: make platforms work together

ie: @react-spring/web should work in the same window as @react-spring/three

Author: aleclarson

packages/animated/src/AnimatedProps.ts

@@ -18,12 +18,12 @@ export class AnimatedProps extends AnimatedObject implements FluidObserver {
     if (!props) return // The constructor passes null.
     if (context) {
       TreeContext.current = context
+      if (props.style) {
+        const { createAnimatedStyle } = context.host
+        props = { ...props, style: createAnimatedStyle(props.style) }
+      }
     }
-    super.setValue(
-      props.style && G.createAnimatedStyle
-        ? { ...props, style: G.createAnimatedStyle(props.style) }
-        : props
-    )
+    super.setValue(props)
     TreeContext.current = null
   }
 

packages/animated/src/context.ts

@@ -1,7 +1,9 @@
 import { FluidValue } from 'shared'
+import { HostConfig } from './createHost'
 
 export type TreeContext = {
   dependencies: Set<FluidValue>
+  host: HostConfig
 }
 
 export const TreeContext: { current: TreeContext | null } = { current: null }

packages/animated/src/createHost.ts

@@ -0,0 +1,70 @@
+import { is, each, Lookup } from 'shared'
+import { AnimatableComponent, withAnimated } from './withAnimated'
+import { Animated } from './Animated'
+import { AnimatedObject } from './AnimatedObject'
+
+export interface HostConfig {
+  /** Provide custom logic for native updates */
+  applyAnimatedValues: (node: any, props: Lookup) => boolean | void
+  /** Wrap the `style` prop with an animated node */
+  createAnimatedStyle: (style: Lookup) => Animated
+  /** Intercept props before they're passed to an animated component */
+  getComponentProps: (props: Lookup) => typeof props
+}
+
+// A stub type that gets replaced by @react-spring/web and others.
+type WithAnimated = {
+  (Component: AnimatableComponent): any
+  [key: string]: any
+}
+
+// For storing the animated version on the original component
+const cacheKey = Symbol.for('AnimatedComponent')
+
+export const createHost = (
+  components: AnimatableComponent[] | { [key: string]: AnimatableComponent },
+  {
+    applyAnimatedValues = () => false,
+    createAnimatedStyle = style => new AnimatedObject(style),
+    getComponentProps = props => props,
+  }: Partial<HostConfig> = {}
+) => {
+  const hostConfig: HostConfig = {
+    applyAnimatedValues,
+    createAnimatedStyle,
+    getComponentProps,
+  }
+
+  const animated: WithAnimated = (Component: any) => {
+    const displayName = getDisplayName(Component) || 'Anonymous'
+
+    if (is.str(Component)) {
+      Component = withAnimated(Component, hostConfig)
+    } else {
+      Component =
+        Component[cacheKey] ||
+        (Component[cacheKey] = withAnimated(Component, hostConfig))
+    }
+
+    Component.displayName = `Animated(${displayName})`
+    return Component
+  }
+
+  each(components, (Component, key) => {
+    if (!is.str(key)) {
+      key = getDisplayName(Component)!
+    }
+    animated[key] = animated(Component)
+  })
+
+  return {
+    animated,
+  }
+}
+
+const getDisplayName = (arg: AnimatableComponent) =>
+  is.str(arg)
+    ? arg
+    : arg && is.str(arg.displayName)
+    ? arg.displayName
+    : (is.fun(arg) && arg.name) || null

packages/animated/src/globals.ts

@@ -4,7 +4,6 @@ export * from './AnimatedValue'
 export * from './AnimatedString'
 export * from './AnimatedArray'
 export * from './AnimatedObject'
-export * from './AnimatedStyle'
 export * from './AnimatedProps'
-export * from './withAnimated'
+export * from './createHost'
 export * from './types'

packages/animated/src/index.ts

@@ -1,37 +1,13 @@
 import React, { forwardRef, useRef, Ref } from 'react'
 import { useLayoutEffect } from 'react-layout-effect'
 import { is, each, useForceUpdate, ElementType, FluidConfig } from 'shared'
-import * as G from 'shared/globals'
 
 import { AnimatedProps } from './AnimatedProps'
+import { HostConfig } from './createHost'
 
-// For storing the animated version on the original component
-const cacheKey = Symbol.for('AnimatedComponent')
+export type AnimatableComponent = string | Exclude<ElementType, string>
 
-type AnimatableComponent = string | Exclude<ElementType, string>
-
-// A stub type that gets replaced by @react-spring/web and others.
-type WithAnimated = {
-  (Component: AnimatableComponent): any
-  [key: string]: any
-}
-
-export const withAnimated: WithAnimated = (Component: any) => {
-  const animated = is.str(Component)
-    ? createAnimatedComponent(Component)
-    : Component[cacheKey] ||
-      (Component[cacheKey] = createAnimatedComponent(Component))
-
-  animated.displayName = `Animated(${
-    is.str(Component)
-      ? Component
-      : Component.displayName || Component.name || 'Anonymous'
-  })`
-
-  return animated
-}
-
-const createAnimatedComponent = (Component: any) =>
+export const withAnimated = (Component: any, host: HostConfig) =>
   forwardRef((rawProps: any, ref: Ref<any>) => {
     const instanceRef = useRef<any>(null)
     const hasInstance: boolean =
@@ -48,7 +24,7 @@ const createAnimatedComponent = (Component: any) =>
       }
 
       const didUpdate = instance
-        ? G.applyAnimatedValues(instance, props.getValue(true))
+        ? host.applyAnimatedValues(instance, props.getValue(true))
         : false
 
       // Re-render the component when native updates fail.
@@ -58,7 +34,7 @@ const createAnimatedComponent = (Component: any) =>
     })
 
     const dependencies = new Set<FluidConfig>()
-    props.setValue(rawProps, { dependencies })
+    props.setValue(rawProps, { dependencies, host })
 
     useLayoutEffect(() => {
       each(dependencies, dep => dep.addChild(props))
@@ -67,7 +43,7 @@ const createAnimatedComponent = (Component: any) =>
 
     return (
       <Component
-        {...G.getComponentProps(props.getValue())}
+        {...host.getComponentProps(props.getValue())}
         ref={
           hasInstance &&
           ((value: any) => {
@@ -85,31 +61,3 @@ function updateRef<T>(ref: Ref<T>, value: T) {
   }
   return value
 }
-
-/**
- * Pass the given components to `withAnimated` and add the newly animated
- * components to `withAnimated` as properties.
- */
-export const extendAnimated = (
-  withAnimated: WithAnimated,
-  components: AnimatableComponent[] | { [key: string]: AnimatableComponent },
-  lowercase?: boolean
-): any => {
-  each(components, (Component, key) => {
-    if (!is.str(key)) {
-      key = getDisplayName(Component)!
-    }
-    if (lowercase) {
-      key = key[0].toLowerCase() + key.slice(1)
-    }
-    withAnimated[key] = withAnimated(Component)
-  })
-  return withAnimated
-}
-
-const getDisplayName = (arg: AnimatableComponent) =>
-  is.str(arg)
-    ? arg
-    : arg && is.str(arg.displayName)
-    ? arg.displayName
-    : (is.fun(arg) && arg.name) || null

packages/animated/src/withAnimated.tsx

@@ -9,8 +9,6 @@ import { noop } from './helpers'
 // Required
 //
 
-export let applyAnimatedValues: (node: any, props: any) => boolean | void
-
 export let createStringInterpolator: (
   config: InterpolatorConfig<string>
 ) => (input: number) => string
@@ -34,12 +32,6 @@ export let colorNames = null as { [key: string]: number } | null
 
 export let skipAnimation = false as boolean
 
-export let getComponentProps = (props: any) => props
-
-export let createAnimatedStyle = null as ((style: any) => any) | null
-
-export let createAnimatedTransform = null as ((transform: any) => any) | null
-
 declare const window: {
   requestAnimationFrame: (cb: (time: number) => void) => number
 }
@@ -66,16 +58,8 @@ export interface AnimatedGlobals {
   colorNames?: typeof colorNames
   /** Make all animations instant and skip the frameloop entirely */
   skipAnimation?: typeof skipAnimation
-  /** Intercept props before they're passed to an animated component */
-  getComponentProps?: typeof getComponentProps
-  /** Provide custom logic for native updates */
-  applyAnimatedValues?: typeof applyAnimatedValues
   /** Provide custom logic for string interpolation */
   createStringInterpolator?: typeof createStringInterpolator
-  /** Wrap the `transform` prop with an animated node */
-  createAnimatedTransform?: typeof createAnimatedTransform
-  /** Wrap the `style` prop with an animated node */
-  createAnimatedStyle?: typeof createAnimatedStyle
   /** Schedule a function to run on the next frame */
   requestAnimationFrame?: typeof requestAnimationFrame
   /** Event props are called with `batchedUpdates` to reduce extraneous renders */
@@ -91,11 +75,7 @@ export const assign = (globals: AnimatedGlobals): AnimatedGlobals =>
     frameLoop,
     colorNames,
     skipAnimation,
-    getComponentProps,
-    applyAnimatedValues,
     createStringInterpolator,
-    createAnimatedTransform,
-    createAnimatedStyle,
     requestAnimationFrame,
     batchedUpdates,
     willAdvance,
@@ -106,11 +86,7 @@ export const assign = (globals: AnimatedGlobals): AnimatedGlobals =>
       frameLoop,
       colorNames,
       skipAnimation,
-      getComponentProps,
-      applyAnimatedValues,
       createStringInterpolator,
-      createAnimatedTransform,
-      createAnimatedStyle,
       requestAnimationFrame,
       batchedUpdates,
       willAdvance,

packages/shared/src/globals.ts

@@ -1,28 +1,20 @@
 import { CSSProperties, ForwardRefExoticComponent } from 'react'
-import { withAnimated, extendAnimated } from 'animated'
 import {
   AssignableKeys,
   ElementType,
   ComponentPropsWithRef,
   FluidValue,
 } from 'shared'
-import { KonvaExports, KonvaElements, elements } from './elements'
+import { KonvaExports, Primitives } from './primitives'
 
-type CreateAnimated = <T extends ElementType>(
-  wrappedComponent: T
-) => AnimatedComponent<T>
-
-type KonvaComponents = {
-  [Tag in KonvaElements]: AnimatedComponent<KonvaExports[Tag]>
+type AnimatedPrimitives = {
+  [P in Primitives]: AnimatedComponent<KonvaExports[P]>
 }
 
-// Extend animated with all the available Konva elements
-export const animated: CreateAnimated & KonvaComponents = extendAnimated(
-  withAnimated,
-  elements
-)
-
-export { animated as a }
+/** The type of the `animated()` function */
+export type WithAnimated = {
+  <T extends ElementType>(wrappedComponent: T): AnimatedComponent<T>
+} & AnimatedPrimitives
 
 /** The type of an `animated()` component */
 export type AnimatedComponent<

targets/konva/src/animated.ts

@@ -1,15 +1,24 @@
 import { Globals } from 'shared'
 import { createStringInterpolator } from 'shared/stringInterpolation'
 import colorNames from 'shared/colors'
+import { createHost } from 'animated'
+import { primitives } from './primitives'
+import { WithAnimated } from './animated'
 
 Globals.assign({
   createStringInterpolator,
   colorNames,
+})
+
+const host = createHost(primitives, {
   applyAnimatedValues(instance, props) {
     if (!instance.nodeType) return false
     instance._applyProps(instance, props)
   },
 })
 
+export const animated = host.animated as WithAnimated
+export { animated as a }
+
 export * from './animated'
 export * from 'core'

targets/konva/src/index.ts

@@ -3,11 +3,11 @@ import * as konva from 'react-konva'
 
 export type KonvaExports = typeof konva
 
-export type KonvaElements = {
+export type Primitives = {
   [P in keyof KonvaExports]: KonvaExports[P] extends ElementType ? P : never
 }[keyof KonvaExports]
 
-export const elements: KonvaElements[] = [
+export const primitives: Primitives[] = [
   'Arc',
   'Arrow',
   'Circle',

targets/konva/src/elements.ts renamed to targets/konva/src/primitives.ts

@@ -1,5 +1,5 @@
-import { AnimatedObject } from './AnimatedObject'
-import * as G from 'shared/globals'
+import { AnimatedObject } from 'animated'
+import { AnimatedTransform } from './AnimatedTransform'
 
 type Style = object & { transform?: any }
 
@@ -10,8 +10,8 @@ export class AnimatedStyle extends AnimatedObject {
 
   setValue(style: Style | null) {
     super.setValue(
-      style && style.transform && G.createAnimatedTransform
-        ? { ...style, transform: G.createAnimatedTransform(style.transform) }
+      style && style.transform
+        ? { ...style, transform: new AnimatedTransform(style.transform) }
         : style
     )
   }

packages/animated/src/AnimatedStyle.ts renamed to targets/native/src/AnimatedStyle.ts

@@ -1,6 +1,5 @@
 import { assert, _, test, describe } from 'spec.ts';
-import { AnimatedProps } from '..';
-import { AnimatedTransform } from '../animated';
+import { AnimatedProps, AnimatedTransform } from '../animated';
 import { FluidProps, FluidValue } from 'shared';
 import { ViewStyle } from 'react-native';