add cookbook for easier target creation, allow frameloop to be called manually

Author: drcmda

rollup.config.js

@@ -91,6 +91,20 @@ export default [
   ...createConfig('targets/native', 'native'),
   ...createConfig('targets/universal', 'universal'),
   ...createConfig('targets/konva', 'konva'),
+  {
+    input: `./src/targets/cookbook/index`,
+    output: { file: `dist/cookbook.js`, format: 'esm' },
+    external,
+    plugins: [
+      babel(
+        getBabelOptions(
+          { useESModules: true },
+          '>1%, not dead, not ie 11, not op_mini all'
+        )
+      ),
+      resolve({ extensions }),
+    ],
+  },
   ...createCjs('renderprops/targets/web', 'renderprops'),
   ...createCjs('renderprops/addons', 'renderprops-addons'),
   ...createCjs('renderprops/targets/native', 'renderprops-native'),

src/animated/FrameLoop.ts

@@ -1,11 +1,12 @@
 import Animated from './Animated'
 import Controller from './Controller'
-import { now, requestFrame } from './Globals'
+import { now, requestFrame, manualFrameloop } from './Globals'
 
 let active = false
 const controllers = new Set()
 
-const frameLoop = () => {
+const update = () => {
+  if (!active) return
   let time = now()
   for (let controller of controllers) {
     let isActive = false
@@ -126,16 +127,17 @@ const frameLoop = () => {
   }
 
   // Loop over as long as there are controllers ...
-  if (controllers.size) requestFrame(frameLoop)
-  else active = false
+  if (controllers.size) {
+    if (!manualFrameloop) requestFrame(update)
+  } else active = false
 }
 
 const start = (controller: Controller) => {
   if (!controllers.has(controller)) {
     controllers.add(controller)
-    if (!active) requestFrame(frameLoop)
+    if (!active && !manualFrameloop) requestFrame(update)
     active = true
   }
 }
 
-export { start }
+export { start, update }

src/animated/Globals.ts

@@ -66,3 +66,8 @@ export let createAnimatedStyle: (style: any) => AnimatedStyle
 export function injectCreateAnimatedStyle(factory: typeof createAnimatedStyle) {
   createAnimatedStyle = factory
 }
+
+export let manualFrameloop = false
+export function injectManualFrameloop(manual: boolean) {
+  manualFrameloop = manual
+}

src/targets/cookbook/index.js

@@ -0,0 +1,52 @@
+import * as Globals from '../../animated/Globals'
+import AnimatedInterpolation, {
+  interpolate,
+} from '../../animated/AnimatedInterpolation'
+import animated from '../../animated/createAnimatedComponent'
+import Interpolation from '../../animated/Interpolation'
+import Animated from '../../animated/Animated'
+import AnimatedArray from '../../animated/AnimatedArray'
+import AnimatedProps from '../../animated/AnimatedProps'
+import AnimatedStyle from '../../animated/AnimatedStyle'
+import AnimatedValue from '../../animated/AnimatedValue'
+import Controller from '../../animated/Controller'
+import * as frameloop from '../../animated/Frameloop'
+import * as colorMatchers from '../../shared/colorMatchers'
+import * as helpers from '../../shared/helpers'
+import * as constants from '../../shared/constants'
+import { config } from '../../shared/constants'
+import colorNames from '../../shared/colors'
+import normalizeColor from '../../shared/normalizeColors'
+import createInterpolation from '../../shared/interpolation'
+import { useChain } from '../../useChain'
+import { useSpring } from '../../useSpring'
+import { useSprings } from '../../useSprings'
+import { useTrail } from '../../useTrail'
+import { useTransition } from '../../useTransition'
+
+export {
+  Globals,
+  AnimatedInterpolation,
+  interpolate,
+  animated,
+  Interpolation,
+  Animated,
+  AnimatedArray,
+  AnimatedProps,
+  AnimatedStyle,
+  AnimatedValue,
+  Controller,
+  frameloop,
+  colorMatchers,
+  helpers,
+  constants,
+  config,
+  colorNames,
+  normalizeColor,
+  createInterpolation,
+  useSpring,
+  useTrail,
+  useTransition,
+  useChain,
+  useSprings,
+}

src/targets/web/globals.ts

@@ -124,4 +124,4 @@ Globals.injectApplyAnimatedValues(
     } else return false
   },
   style => style
-)
+)