Merge pull request pmndrs#558 from jacobrask/typescript/index

Convert Controller, Frameloop and target files to TypeScript

Author: drcmda

package.json

@@ -70,6 +70,7 @@
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@types/jest": "^24.0.0",
+    "@types/mock-raf": "^1.0.2",
     "@types/react": "16.8.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "24.1.0",
@@ -89,6 +90,7 @@
     "react": "16.8.1",
     "react-dom": "16.8.1",
     "react-konva": "^16.8.0",
+    "react-native": "^0.58.4",
     "react-test-renderer": "16.8.1",
     "react-testing-library": "5.6.1",
     "rimraf": "2.6.3",
@@ -127,7 +129,9 @@
       "src/**/*.js",
       "!test/"
     ],
-    "setupFilesAfterEnv": ["<rootDir>/setupTests.js"]
+    "setupFilesAfterEnv": [
+      "<rootDir>/setupTests.js"
+    ]
   },
   "collective": {
     "type": "opencollective",

rollup.config.js

@@ -29,7 +29,7 @@ const getBabelOptions = ({ useESModules }, targets) => ({
 function createConfig(entry, out) {
   return [
     {
-      input: `./src/${entry}/index.js`,
+      input: `./src/${entry}/index`,
       output: { file: `dist/${out}.js`, format: 'esm' },
       external,
       plugins: [
@@ -44,7 +44,7 @@ function createConfig(entry, out) {
       ],
     },
     {
-      input: `./src/${entry}/index.js`,
+      input: `./src/${entry}/index`,
       output: { file: `dist/${out}.cjs.js`, format: 'cjs' },
       external,
       plugins: [

src/animated/Animated.ts

@@ -1,3 +1,10 @@
+/**
+ * The public API for Animated classes.
+ */
+export interface SpringValue<T> {
+  getValue: () => T
+}
+
 export default abstract class Animated {
   abstract addChild(child: Animated): void
   abstract removeChild(child: Animated): void

src/animated/Controller.test.ts

@@ -0,0 +1,48 @@
+import createMockRaf from 'mock-raf'
+import Controller from '../animated/Controller'
+import { Globals } from '../targets/web'
+
+test('update simple value', () => {
+  const mockRaf = createMockRaf()
+  Globals.injectFrame(mockRaf.raf, mockRaf.cancel)
+  Globals.injectNow(mockRaf.now)
+
+  const ctrl = new Controller<{ x: number; y?: number }>()
+  ctrl.update({ x: 0 })
+  ctrl.start()
+  expect(ctrl.getValues().x.getValue()).toBe(0)
+
+  ctrl.update({ x: 100, y: 50 })
+  expect(ctrl.getValues().x.getValue()).toBe(0)
+
+  ctrl.start()
+
+  mockRaf.step({ count: 10 })
+  expect(ctrl.getValues().x.getValue()).toBeCloseTo(56.4)
+
+  mockRaf.step({ count: 100 })
+  expect(ctrl.getValues().x.getValue()).toBe(100)
+})
+
+test('update array value', () => {
+  const mockRaf = createMockRaf()
+  Globals.injectFrame(mockRaf.raf, mockRaf.cancel)
+  Globals.injectNow(mockRaf.now)
+
+  const ctrl = new Controller<{ x: number[] }>()
+  ctrl.update({ x: [0, 0] })
+  ctrl.start()
+  expect(ctrl.getValues().x.getValue()).toEqual([0, 0])
+
+  ctrl.update({ x: [10, 20] })
+  expect(ctrl.getValues().x.getValue()).toEqual([0, 0])
+
+  ctrl.start()
+
+  mockRaf.step({ count: 10 })
+  expect(ctrl.getValues().x.getValue()[0]).toBeCloseTo(5.64)
+  expect(ctrl.getValues().x.getValue()[1]).toBeCloseTo(11.28)
+
+  mockRaf.step({ count: 100 })
+  expect(ctrl.getValues().x.getValue()).toEqual([10, 20])
+})

src/animated/Controller.js renamed to src/animated/Controller.ts

@@ -1,56 +1,64 @@
-import Animated from './Animated'
-import AnimatedValue from './AnimatedValue'
-import AnimatedArray from './AnimatedArray'
-import Interpolation from './Interpolation'
-import {
-  interpolation as interp,
-  now,
-  colorNames,
-  requestFrame as raf,
-} from './Globals'
-import { start } from './FrameLoop'
 import {
-  interpolateTo,
-  withDefault,
-  toArray,
   callProp,
+  interpolateTo,
   is,
+  toArray,
+  withDefault,
 } from '../shared/helpers'
+import AnimatedArray from './AnimatedArray'
+import AnimatedValue from './AnimatedValue'
+import { start } from './FrameLoop'
+import { colorNames, interpolation as interp, now } from './Globals'
+
+type FinishedCallback = (finished?: boolean) => void
+
+type AnimationsFor<P> = { [Key in keyof P]: any }
+
+type ValuesFor<P> = { [Key in keyof P]: any }
+
+type InterpolationsFor<P> = {
+  [Key in keyof P]: P[Key] extends ArrayLike<any>
+    ? AnimatedArray
+    : AnimatedValue
+}
 
 let G = 0
-export default class Controller {
-  constructor(props) {
+class Controller<P extends any = {}> {
+  id: number
+
+  idle = true
+  hasChanged = false
+  guid = 0
+  local = 0
+  props: P = {} as P
+  merged: any = {}
+  animations = {} as AnimationsFor<P>
+  interpolations = {} as InterpolationsFor<P>
+  values = {} as ValuesFor<P>
+  configs: any = []
+  listeners: FinishedCallback[] = []
+  queue: any[] = []
+  localQueue?: any[]
+
+  constructor() {
     this.id = G++
-    this.idle = true
-    this.hasChanged = false
-    this.guid = 0
-    this.local = 0
-    this.props = {}
-    this.merged = {}
-    this.animations = {}
-    this.interpolations = {}
-    this.values = {}
-    this.configs = []
-    this.listeners = []
-    this.queue = []
-    if (props) this.update(props)
   }
 
   /** update(props)
    *  This function filters input props and creates an array of tasks which are executed in .start()
    *  Each task is allowed to carry a delay, which means it can execute asnychroneously */
-  update(args) {
+  update(args?: P) {
     //this._id = n + this.id
 
     if (!args) return this
     // Extract delay and the to-prop from props
-    const { delay = 0, to, ...props } = interpolateTo(args)
+    const { delay = 0, to, ...props } = interpolateTo(args) as any
     if (is.arr(to) || is.fun(to)) {
       // If config is either a function or an array queue it up as is
       this.queue.push({ ...props, delay, to })
     } else if (to) {
       // Otherwise go through each key since it could be delayed individually
-      let merge = {}
+      let merge: any = {}
       Object.entries(to).forEach(([k, v]) => {
         // Fetch delay and create an entry, consisting of the to-props, the delay, and basic props
         const entry = { to: { [k]: v }, delay: callProp(delay, k), ...props }
@@ -71,7 +79,7 @@ export default class Controller {
 
   /** start(onEnd)
    *  This function either executes a queue, if present, or starts the frameloop, which animates */
-  start(onEnd) {
+  start(onEnd?: FinishedCallback) {
     // If a queue is present we must excecute it
     if (this.queue.length) {
       this.idle = false
@@ -92,7 +100,7 @@ export default class Controller {
 
       // Go through each entry and execute it
       queue.forEach(({ delay, ...props }, index) => {
-        const cb = finished => {
+        const cb: FinishedCallback = finished => {
           if (index === queue.length - 1 && local === this.guid && finished) {
             this.idle = true
             if (this.props.onRest) this.props.onRest(this.merged)
@@ -122,43 +130,45 @@ export default class Controller {
     return this
   }
 
-  stop(finished) {
+  stop(finished?: boolean) {
     this.listeners.forEach(onEnd => onEnd(finished))
     this.listeners = []
     return this
   }
 
-  runAsync({ delay, ...props }, onEnd) {
+  runAsync({ delay, ...props }: P, onEnd: FinishedCallback) {
     const local = this.local
     // If "to" is either a function or an array it will be processed async, therefor "to" should be empty right now
     // If the view relies on certain values "from" has to be present
-    let queue = Promise.resolve()
+    let queue = Promise.resolve(undefined)
     if (is.arr(props.to)) {
       for (let i = 0; i < props.to.length; i++) {
         const index = i
-        const last = index === props.to.length - 1
         const fresh = { ...props, to: props.to[index] }
         if (is.arr(fresh.config)) fresh.config = fresh.config[index]
-        queue = queue.then(() => {
-          //this.stop()
-          if (local === this.guid)
-            return new Promise(r => this.diff(interpolateTo(fresh)).start(r))
-        })
+        queue = queue.then(
+          (): Promise<any> | void => {
+            //this.stop()
+            if (local === this.guid)
+              return new Promise(r => this.diff(interpolateTo(fresh)).start(r))
+          }
+        )
       }
     } else if (is.fun(props.to)) {
       let index = 0
-      let last = undefined
+      let last: Promise<any>
       queue = queue.then(() =>
         props
           .to(
             // next(props)
-            p => {
+            (p: P) => {
               const fresh = { ...props, ...interpolateTo(p) }
               if (is.arr(fresh.config)) fresh.config = fresh.config[index]
               index++
               //this.stop()
               if (local === this.guid)
                 return (last = new Promise(r => this.diff(fresh).start(r)))
+              return
             },
             // cancel()
             (finished = true) => this.stop(finished)
@@ -169,7 +179,7 @@ export default class Controller {
     queue.then(onEnd)
   }
 
-  diff(props) {
+  diff(props: any) {
     this.props = { ...this.props, ...props }
     let {
       from = {},
@@ -179,7 +189,6 @@ export default class Controller {
       attach,
       reset,
       immediate,
-      ref,
     } = this.props
 
     // Reverse values when requested
@@ -195,8 +204,8 @@ export default class Controller {
     let target = attach && attach(this)
 
     // Reduces input { name: value } pairs into animated values
-    this.animations = Object.entries(this.merged).reduce(
-      (acc, [name, value], i) => {
+    this.animations = Object.entries<any>(this.merged).reduce(
+      (acc, [name, value]) => {
         // Issue cached entries, except on reset
         let entry = acc[name] || {}
 
@@ -222,12 +231,16 @@ export default class Controller {
 
         let newValue = value
         if (isInterpolation)
-          newValue = interp({ range: [0, 1], output: [value, value] })(1)
+          newValue = interp({
+            range: [0, 1],
+            output: [value as string, value as string],
+          })(1)
         let currentValue = interpolation && interpolation.getValue()
 
         // Change detection flags
         const isFirst = is.und(parent)
-        const isActive = !isFirst && entry.animatedValues.some(v => !v.done)
+        const isActive =
+          !isFirst && entry.animatedValues.some((v: AnimatedValue) => !v.done)
         const currentValueDiffersFromGoal = !is.equ(newValue, currentValue)
         const hasNewGoal = !is.equ(newValue, entry.previous)
         const hasNewConfig = !is.equ(toConfig, entry.config)
@@ -301,7 +314,7 @@ export default class Controller {
               friction: withDefault(toConfig.friction, 26),
               mass: withDefault(toConfig.mass, 1),
               duration: toConfig.duration,
-              easing: withDefault(toConfig.easing, t => t),
+              easing: withDefault(toConfig.easing, (t: number) => t),
               decay: toConfig.decay,
             },
           }
@@ -329,8 +342,8 @@ export default class Controller {
     if (this.hasChanged) {
       // Make animations available to frameloop
       this.configs = Object.values(this.animations)
-      this.values = {}
-      this.interpolations = {}
+      this.values = {} as ValuesFor<P>
+      this.interpolations = {} as InterpolationsFor<P>
       for (let key in this.animations) {
         this.interpolations[key] = this.animations[key].interpolation
         this.values[key] = this.animations[key].interpolation.getValue()
@@ -341,14 +354,16 @@ export default class Controller {
 
   destroy() {
     this.stop()
-    this.props = {}
+    this.props = {} as P
     this.merged = {}
-    this.animations = {}
-    this.interpolations = {}
-    this.values = {}
+    this.animations = {} as AnimationsFor<P>
+    this.interpolations = {} as InterpolationsFor<P>
+    this.values = {} as ValuesFor<P>
     this.configs = []
     this.local = 0
   }
 
   getValues = () => this.interpolations
 }
+
+export default Controller

src/animated/FrameLoop.js renamed to src/animated/FrameLoop.ts

@@ -1,4 +1,5 @@
 import Animated from './Animated'
+import Controller from './Controller'
 import { now, requestFrame } from './Globals'
 
 let active = false
@@ -15,7 +16,7 @@ const frameLoop = () => {
       configIdx++
     ) {
       let config = controller.configs[configIdx]
-      let endOfAnimation, lastTime, velocity
+      let endOfAnimation, lastTime
       for (let valIdx = 0; valIdx < config.animatedValues.length; valIdx++) {
         let animation = config.animatedValues[valIdx]
 
@@ -129,14 +130,12 @@ const frameLoop = () => {
   else active = false
 }
 
-const start = controller => {
+const start = (controller: Controller) => {
   if (!controllers.has(controller)) {
     controllers.add(controller)
     if (!active) requestFrame(frameLoop)
     active = true
   }
 }
 
-const isActive = controller => active && controllers.has(controller)
-
 export { start }