From 1e4e8d20ae505d6e54fe1891e96230287a4f4b87 Mon Sep 17 00:00:00 2001 From: Leland Richardson Date: Sat, 11 Nov 2017 20:03:15 -0800 Subject: [PATCH] Use rollup for more compact build output --- .babelrc | 27 ++++++- .gitignore | 1 + package.json | 12 +++- rollup.config.js | 61 ++++++++++++++++ src/Animated.js | 2 +- src/AnimatedAddition.js | 12 ++-- src/AnimatedInterpolation.js | 12 ++-- src/AnimatedModulo.js | 10 +-- src/AnimatedMultiplication.js | 12 ++-- src/AnimatedProps.js | 6 +- src/AnimatedStyle.js | 10 +-- src/AnimatedTemplate.js | 6 +- src/AnimatedTracking.js | 6 +- src/AnimatedTransform.js | 6 +- src/AnimatedValue.js | 19 ++--- src/AnimatedValueXY.js | 12 ++-- src/AnimatedWithChildren.js | 4 +- src/Animation.js | 2 +- src/DecayAnimation.js | 8 +-- src/Easing.js | 4 +- src/Interpolation.js | 7 +- src/SetPolyfill.js | 2 +- src/SpringAnimation.js | 14 ++-- src/SpringConfig.js | 2 +- src/TimingAnimation.js | 12 ++-- src/bezier.js | 2 +- src/createAnimatedComponent.js | 8 +-- src/guid.js | 2 +- src/index.js | 94 ++++++++++++++----------- src/injectable/ApplyAnimatedValues.js | 2 +- src/injectable/CancelAnimationFrame.js | 2 +- src/injectable/FlattenStyle.js | 2 +- src/injectable/InteractionManager.js | 2 +- src/injectable/RequestAnimationFrame.js | 2 +- src/injectable/index.js | 13 ++++ src/isAnimated.js | 4 +- 36 files changed, 259 insertions(+), 143 deletions(-) create mode 100644 rollup.config.js create mode 100644 src/injectable/index.js diff --git a/.babelrc b/.babelrc index d6ff3f1..3f817d0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,28 @@ { - "presets": [ - "react-native" + "plugins": [ + "syntax-async-functions", + "syntax-class-properties", + "syntax-trailing-function-commas", + "transform-class-properties", + "transform-es2015-function-name", + "transform-es2015-arrow-functions", + "transform-es2015-block-scoping", + ["transform-es2015-classes", { "loose": true }], + "transform-es2015-computed-properties", + "check-es2015-constants", + "transform-es2015-destructuring", + "transform-es2015-parameters", + "transform-es2015-shorthand-properties", + "transform-es2015-spread", + "transform-es2015-template-literals", + "transform-es2015-literals", + "transform-flow-strip-types", + "transform-object-assign", + "transform-object-rest-spread", + "transform-react-display-name", + "transform-react-jsx", + "transform-regenerator", + ["transform-es2015-for-of", { "loose": true }], + "external-helpers" ] } diff --git a/.gitignore b/.gitignore index eeb5f8f..b5be707 100644 --- a/.gitignore +++ b/.gitignore @@ -33,6 +33,7 @@ node_modules .node_repl_history /lib +/dist .DS_Store examples/interactive-docs/example.bundle.js diff --git a/package.json b/package.json index 321bdc4..62112f9 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,7 @@ "scripts": { "prepublish": "npm run build:lib", "build": "npm run build:lib && npm run build:interactive-docs", - "build:lib": "babel src --out-dir lib", - "build:watch": "npm run build:lib -- --watch", + "build:lib": "rollup -c", "build:interactive-docs": "browserify -e examples/interactive-docs/example.js -o examples/interactive-docs/example.bundle.js", "test": "echo \"Error: no test specified\" && exit 1" }, @@ -38,6 +37,7 @@ "devDependencies": { "babel": "^6.5.2", "babel-cli": "^6.5.1", + "babel-plugin-external-helpers": "^6.22.0", "babel-plugin-syntax-object-rest-spread": "^6.5.0", "babel-plugin-syntax-trailing-function-commas": "^6.5.0", "babel-plugin-transform-flow-strip-types": "^6.5.0", @@ -46,6 +46,12 @@ "babel-preset-react-native": "^1.4.0", "browserify": "^13.0.0", "react": "^15.4.0", - "react-dom": "^15.4.0" + "react-dom": "^15.4.0", + "rollup": "^0.51.5", + "rollup-plugin-babel": "^3.0.2", + "rollup-plugin-commonjs": "^8.2.6", + "rollup-plugin-node-resolve": "^3.0.0", + "rollup-plugin-replace": "^2.0.0", + "rollup-plugin-uglify": "^2.0.1" } } diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..dcb55bb --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,61 @@ +import babel from 'rollup-plugin-babel'; +import commonjs from 'rollup-plugin-commonjs'; +import replace from 'rollup-plugin-replace'; +import resolve from 'rollup-plugin-node-resolve'; +import uglify from 'rollup-plugin-uglify'; + +import pkg from './package.json'; + +function distBuild(options = {}) { + return { + input: 'src/index.js', + output: { + file: `dist/${options.filename}`, + format: options.format, + name: 'animated', + sourcemap: options.sourcemap, + }, + plugins: [ + babel({ + exclude: ['node_modules/**'], + }), + replace({ + 'process.env.NODE_ENV': JSON.stringify('production'), + }), + resolve({ + browser: true, + }), // so rollup can find node modules + commonjs(), // so rollup can convert node modules to ESM if needed + options.minify && uglify(), + ] + }; +} + +function standardBuilds(filename) { + return { + input: `src/${filename}.js`, + external: [ + ...Object.keys(pkg.dependencies), + ...Object.keys(pkg.peerDependencies) + ], + output: [ + { file: `lib/${filename}.js`, format: 'cjs' }, + { file: `lib/${filename}.mjs`, format: 'es' }, + ], + plugins: [ + babel({ + exclude: ['node_modules/**'], + }), + commonjs(), // so rollup can convert node modules to ESM if needed + ] + }; +} + +export default [ + distBuild({ filename: 'animated.umd.js', format: 'umd', sourcemap: true, minify: false }), + distBuild({ filename: 'animated.umd.min.js', format: 'umd', sourcemap: true, minify: true }), + distBuild({ filename: 'animated.js', format: 'cjs', sourcemap: false, minify: false }), + standardBuilds('index'), + standardBuilds('targets/react-dom'), + standardBuilds('targets/react-native'), +]; diff --git a/src/Animated.js b/src/Animated.js index 96bf6ac..0f53c41 100644 --- a/src/Animated.js +++ b/src/Animated.js @@ -22,4 +22,4 @@ class Animated { __getChildren(): Array { return []; } } -module.exports = Animated; +export default Animated; diff --git a/src/AnimatedAddition.js b/src/AnimatedAddition.js index bc0857a..7ef8b48 100644 --- a/src/AnimatedAddition.js +++ b/src/AnimatedAddition.js @@ -10,11 +10,11 @@ */ 'use strict'; -var AnimatedWithChildren = require('./AnimatedWithChildren'); -var Animated = require('./Animated'); -var AnimatedValue = require('./AnimatedValue'); -var Interpolation = require('./Interpolation'); -var AnimatedInterpolation = require('./AnimatedInterpolation'); +import AnimatedWithChildren from './AnimatedWithChildren'; +import Animated from './Animated'; +import AnimatedValue from './AnimatedValue'; +import Interpolation from './Interpolation'; +import AnimatedInterpolation from './AnimatedInterpolation'; import type { InterpolationConfigType } from './Interpolation'; @@ -75,4 +75,4 @@ class AnimatedAddition extends AnimatedWithChildren { } } -module.exports = AnimatedAddition; +export default AnimatedAddition; diff --git a/src/AnimatedInterpolation.js b/src/AnimatedInterpolation.js index 5a6c170..b03a1a9 100644 --- a/src/AnimatedInterpolation.js +++ b/src/AnimatedInterpolation.js @@ -10,11 +10,11 @@ */ 'use strict'; -var Animated = require('./Animated'); -var AnimatedWithChildren = require('./AnimatedWithChildren'); -var invariant = require('invariant'); -var Interpolation = require('./Interpolation'); -var guid = require('./guid'); +import Animated from './Animated'; +import AnimatedWithChildren from './AnimatedWithChildren'; +import invariant from 'invariant'; +import Interpolation from './Interpolation'; +import guid from './guid'; import type { ValueListenerCallback } from './AnimatedValue'; @@ -71,4 +71,4 @@ class AnimatedInterpolation extends AnimatedWithChildren { } } -module.exports = AnimatedInterpolation; +export default AnimatedInterpolation; diff --git a/src/AnimatedModulo.js b/src/AnimatedModulo.js index 84b6ef5..44a690e 100644 --- a/src/AnimatedModulo.js +++ b/src/AnimatedModulo.js @@ -10,10 +10,10 @@ */ 'use strict'; -var Animated = require('./Animated'); -var AnimatedWithChildren = require('./AnimatedWithChildren'); -var AnimatedInterpolation = require('./AnimatedInterpolation'); -var Interpolation = require('./Interpolation'); +import Animated from './Animated'; +import AnimatedWithChildren from './AnimatedWithChildren'; +import AnimatedInterpolation from './AnimatedInterpolation'; +import Interpolation from './Interpolation'; import type { InterpolationConfigType } from './Interpolation'; @@ -64,4 +64,4 @@ class AnimatedModulo extends AnimatedWithChildren { } } -module.exports = AnimatedModulo; +export default AnimatedModulo; diff --git a/src/AnimatedMultiplication.js b/src/AnimatedMultiplication.js index 0ff713b..cc8caca 100644 --- a/src/AnimatedMultiplication.js +++ b/src/AnimatedMultiplication.js @@ -10,11 +10,11 @@ */ 'use strict'; -var AnimatedWithChildren = require('./AnimatedWithChildren'); -var Animated = require('./Animated'); -var AnimatedValue = require('./AnimatedValue'); -var AnimatedInterpolation = require('./AnimatedInterpolation'); -var Interpolation = require('./Interpolation'); +import AnimatedWithChildren from './AnimatedWithChildren'; +import Animated from './Animated'; +import AnimatedValue from './AnimatedValue'; +import AnimatedInterpolation from './AnimatedInterpolation'; +import Interpolation from './Interpolation'; import type { InterpolationConfigType } from './Interpolation'; @@ -75,4 +75,4 @@ class AnimatedMultiplication extends AnimatedWithChildren { } } -module.exports = AnimatedMultiplication; +export default AnimatedMultiplication; diff --git a/src/AnimatedProps.js b/src/AnimatedProps.js index e36d914..b8dcff1 100644 --- a/src/AnimatedProps.js +++ b/src/AnimatedProps.js @@ -10,8 +10,8 @@ */ 'use strict'; -var Animated = require('./Animated'); -var AnimatedStyle = require('./AnimatedStyle'); +import Animated from './Animated'; +import AnimatedStyle from './AnimatedStyle'; class AnimatedProps extends Animated { _props: Object; @@ -80,4 +80,4 @@ class AnimatedProps extends Animated { } } -module.exports = AnimatedProps; +export default AnimatedProps; diff --git a/src/AnimatedStyle.js b/src/AnimatedStyle.js index 91c2bbc..3820d29 100644 --- a/src/AnimatedStyle.js +++ b/src/AnimatedStyle.js @@ -10,10 +10,10 @@ */ 'use strict'; -var Animated = require('./Animated'); -var AnimatedWithChildren = require('./AnimatedWithChildren'); -var AnimatedTransform = require('./AnimatedTransform'); -var FlattenStyle = require('./injectable/FlattenStyle'); +import Animated from './Animated'; +import AnimatedWithChildren from './AnimatedWithChildren'; +import AnimatedTransform from './AnimatedTransform'; +import FlattenStyle from './injectable/FlattenStyle'; class AnimatedStyle extends AnimatedWithChildren { _style: Object; @@ -73,4 +73,4 @@ class AnimatedStyle extends AnimatedWithChildren { } } -module.exports = AnimatedStyle; +export default AnimatedStyle; diff --git a/src/AnimatedTemplate.js b/src/AnimatedTemplate.js index 205d910..4a59f35 100644 --- a/src/AnimatedTemplate.js +++ b/src/AnimatedTemplate.js @@ -10,8 +10,8 @@ */ 'use strict'; -var Animated = require('./Animated'); -var AnimatedWithChildren = require('./AnimatedWithChildren'); +import Animated from './Animated'; +import AnimatedWithChildren from './AnimatedWithChildren'; class AnimatedTemplate extends AnimatedWithChildren { _strings: Array; @@ -56,4 +56,4 @@ class AnimatedTemplate extends AnimatedWithChildren { } } -module.exports = AnimatedTemplate; +export default AnimatedTemplate; diff --git a/src/AnimatedTracking.js b/src/AnimatedTracking.js index b0c47dc..a8cac7d 100644 --- a/src/AnimatedTracking.js +++ b/src/AnimatedTracking.js @@ -10,8 +10,8 @@ */ 'use strict'; -var Animated = require('./Animated'); -var AnimatedValue = require('./AnimatedValue'); +import Animated from './Animated'; +import AnimatedValue from './AnimatedValue'; import type { EndCallback } from './Animated'; @@ -58,4 +58,4 @@ class AnimatedTracking extends Animated { } } -module.exports = AnimatedTracking; +export default AnimatedTracking; diff --git a/src/AnimatedTransform.js b/src/AnimatedTransform.js index ebbeb31..81d109d 100644 --- a/src/AnimatedTransform.js +++ b/src/AnimatedTransform.js @@ -10,8 +10,8 @@ */ 'use strict'; -var Animated = require('./Animated'); -var AnimatedWithChildren = require('./AnimatedWithChildren'); +import Animated from './Animated'; +import AnimatedWithChildren from './AnimatedWithChildren'; class AnimatedTransform extends AnimatedWithChildren { _transforms: Array; @@ -75,4 +75,4 @@ class AnimatedTransform extends AnimatedWithChildren { } } -module.exports = AnimatedTransform; +export default AnimatedTransform; diff --git a/src/AnimatedValue.js b/src/AnimatedValue.js index 2c2b415..1f790a0 100644 --- a/src/AnimatedValue.js +++ b/src/AnimatedValue.js @@ -10,13 +10,16 @@ */ 'use strict'; -var AnimatedWithChildren = require('./AnimatedWithChildren'); -var InteractionManager = require('./injectable/InteractionManager'); -var AnimatedInterpolation = require('./AnimatedInterpolation'); -var Interpolation = require('./Interpolation'); -var Animation = require('./Animation'); -var guid = require('./guid'); -var Set = global.Set || require('./SetPolyfill'); +import AnimatedWithChildren from './AnimatedWithChildren'; +import InteractionManager from './injectable/InteractionManager'; +import AnimatedInterpolation from './AnimatedInterpolation'; +import Interpolation from './Interpolation'; +import Animation from './Animation'; +import guid from './guid'; +import SetPilyfill from './SetPolyfill'; + +// TODO: wonder if we should do the set polyfill another way... +var Set = global.Set || SetPilyfill; import type { EndCallback } from './Animation'; import type { InterpolationConfigType } from './Interpolation'; @@ -209,4 +212,4 @@ class AnimatedValue extends AnimatedWithChildren { } } -module.exports = AnimatedValue; +export default AnimatedValue; diff --git a/src/AnimatedValueXY.js b/src/AnimatedValueXY.js index 14b113c..d1cd58b 100644 --- a/src/AnimatedValueXY.js +++ b/src/AnimatedValueXY.js @@ -10,11 +10,11 @@ */ 'use strict'; -var Animated = require('./Animated'); -var AnimatedValue = require('./AnimatedValue'); -var AnimatedWithChildren = require('./AnimatedWithChildren'); -var invariant = require('invariant'); -var guid = require('./guid'); +import Animated from './Animated'; +import AnimatedValue from './AnimatedValue'; +import AnimatedWithChildren from './AnimatedWithChildren'; +import invariant from 'invariant'; +import guid from './guid'; type ValueXYListenerCallback = (value: {x: number; y: number}) => void; @@ -157,4 +157,4 @@ class AnimatedValueXY extends AnimatedWithChildren { } } -module.exports = AnimatedValueXY; +export default AnimatedValueXY; diff --git a/src/AnimatedWithChildren.js b/src/AnimatedWithChildren.js index a98f116..e917ded 100644 --- a/src/AnimatedWithChildren.js +++ b/src/AnimatedWithChildren.js @@ -10,7 +10,7 @@ */ 'use strict'; -var Animated = require('./Animated'); +import Animated from './Animated'; class AnimatedWithChildren extends Animated { _children: Array; @@ -44,4 +44,4 @@ class AnimatedWithChildren extends Animated { } } -module.exports = AnimatedWithChildren; +export default AnimatedWithChildren; diff --git a/src/Animation.js b/src/Animation.js index 009db0b..9f46f37 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -38,4 +38,4 @@ class Animation { } } -module.exports = Animation; +export default Animation; diff --git a/src/DecayAnimation.js b/src/DecayAnimation.js index a95725c..3ac1d5b 100644 --- a/src/DecayAnimation.js +++ b/src/DecayAnimation.js @@ -10,9 +10,9 @@ */ 'use strict'; -var Animation = require('./Animation'); -var RequestAnimationFrame = require('./injectable/RequestAnimationFrame'); -var CancelAnimationFrame = require('./injectable/CancelAnimationFrame'); +import Animation from './Animation'; +import RequestAnimationFrame from './injectable/RequestAnimationFrame'; +import CancelAnimationFrame from './injectable/CancelAnimationFrame'; import type { AnimationConfig, EndCallback } from './Animation'; @@ -80,4 +80,4 @@ class DecayAnimation extends Animation { } } -module.exports = DecayAnimation; +export default DecayAnimation; diff --git a/src/Easing.js b/src/Easing.js index 0ee219e..ca0c491 100644 --- a/src/Easing.js +++ b/src/Easing.js @@ -10,7 +10,7 @@ */ 'use strict'; -var _bezier = require('./bezier'); +import _bezier from './bezier'; /** * This class implements common easing functions. The math is pretty obscure, @@ -142,4 +142,4 @@ var ease = Easing.bezier(0.42, 0, 1, 1); -module.exports = Easing; +export default Easing; diff --git a/src/Interpolation.js b/src/Interpolation.js index 315d596..945b42b 100644 --- a/src/Interpolation.js +++ b/src/Interpolation.js @@ -11,9 +11,8 @@ /* eslint no-bitwise: 0 */ 'use strict'; -var normalizeColor = require('normalize-css-color'); - -var invariant = require('invariant'); +import normalizeColor from 'normalize-css-color'; +import invariant from 'invariant'; type ExtrapolateType = 'extend' | 'identity' | 'clamp'; @@ -287,4 +286,4 @@ function checkInfiniteRange(name: string, arr: Array) { ); } -module.exports = Interpolation; +export default Interpolation; diff --git a/src/SetPolyfill.js b/src/SetPolyfill.js index 988f0b3..216ddf3 100644 --- a/src/SetPolyfill.js +++ b/src/SetPolyfill.js @@ -23,4 +23,4 @@ SetPolyfill.prototype.forEach = function(cb) { this._cache.forEach(cb); }; -module.exports = SetPolyfill; +export default SetPolyfill; diff --git a/src/SpringAnimation.js b/src/SpringAnimation.js index 4ab2c77..bbc0020 100644 --- a/src/SpringAnimation.js +++ b/src/SpringAnimation.js @@ -10,12 +10,12 @@ */ 'use strict'; -var Animation = require('./Animation'); -var AnimatedValue = require('./AnimatedValue'); -var RequestAnimationFrame = require('./injectable/RequestAnimationFrame'); -var CancelAnimationFrame = require('./injectable/CancelAnimationFrame'); -var invariant = require('invariant'); -var SpringConfig = require('./SpringConfig'); +import Animation from './Animation'; +import AnimatedValue from './AnimatedValue'; +import RequestAnimationFrame from './injectable/RequestAnimationFrame'; +import CancelAnimationFrame from './injectable/CancelAnimationFrame'; +import invariant from 'invariant'; +import SpringConfig from './SpringConfig'; import type { AnimationConfig, EndCallback } from './Animation'; @@ -221,4 +221,4 @@ class SpringAnimation extends Animation { } } -module.exports = SpringAnimation; +export default SpringAnimation; diff --git a/src/SpringConfig.js b/src/SpringConfig.js index ddb8e35..f598577 100644 --- a/src/SpringConfig.js +++ b/src/SpringConfig.js @@ -95,7 +95,7 @@ function fromBouncinessAndSpeed( }; } -module.exports = { +export default { fromOrigamiTensionAndFriction, fromBouncinessAndSpeed, }; diff --git a/src/TimingAnimation.js b/src/TimingAnimation.js index 6441b21..7c3b6ba 100644 --- a/src/TimingAnimation.js +++ b/src/TimingAnimation.js @@ -10,11 +10,11 @@ */ 'use strict'; -var Animation = require('./Animation'); -var AnimatedValue = require('./AnimatedValue'); -var Easing = require('./Easing'); -var RequestAnimationFrame = require('./injectable/RequestAnimationFrame'); -var CancelAnimationFrame = require('./injectable/CancelAnimationFrame'); +import Animation from './Animation'; +import AnimatedValue from './AnimatedValue'; +import Easing from './Easing'; +import RequestAnimationFrame from './injectable/RequestAnimationFrame'; +import CancelAnimationFrame from './injectable/CancelAnimationFrame'; import type { AnimationConfig, EndCallback } from './Animation'; @@ -107,4 +107,4 @@ class TimingAnimation extends Animation { } } -module.exports = TimingAnimation; +export default TimingAnimation; diff --git a/src/bezier.js b/src/bezier.js index db2e1d8..a77a0c8 100644 --- a/src/bezier.js +++ b/src/bezier.js @@ -52,7 +52,7 @@ return aGuessT; } - module.exports = function bezier (mX1, mY1, mX2, mY2) { + export default function bezier (mX1, mY1, mX2, mY2) { if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { // eslint-disable-line yoda throw new Error('bezier x values must be in [0, 1] range'); } diff --git a/src/createAnimatedComponent.js b/src/createAnimatedComponent.js index 8b7c589..ae76301 100644 --- a/src/createAnimatedComponent.js +++ b/src/createAnimatedComponent.js @@ -10,9 +10,9 @@ */ 'use strict'; -var React = require('react'); -var AnimatedProps = require('./AnimatedProps'); -var ApplyAnimatedValues = require('./injectable/ApplyAnimatedValues'); +import React from 'react'; +import AnimatedProps from './AnimatedProps'; +import ApplyAnimatedValues from './injectable/ApplyAnimatedValues'; function createAnimatedComponent(Component: any): any { var refName = 'node'; @@ -105,4 +105,4 @@ function createAnimatedComponent(Component: any): any { return AnimatedComponent; } -module.exports = createAnimatedComponent; +export default createAnimatedComponent; diff --git a/src/guid.js b/src/guid.js index dcaae6e..945b8e1 100644 --- a/src/guid.js +++ b/src/guid.js @@ -12,6 +12,6 @@ var _uniqueId = 0; -module.exports = function uniqueId(): string { +export default function uniqueId(): string { return String(_uniqueId++); }; diff --git a/src/index.js b/src/index.js index c65b515..28a4343 100644 --- a/src/index.js +++ b/src/index.js @@ -10,22 +10,23 @@ */ 'use strict'; -var invariant = require('invariant'); - -var Animated = require('./Animated'); -var AnimatedValue = require('./AnimatedValue'); -var AnimatedValueXY = require('./AnimatedValueXY'); -var AnimatedAddition = require('./AnimatedAddition'); -var AnimatedMultiplication = require('./AnimatedMultiplication'); -var AnimatedModulo = require('./AnimatedModulo'); -var AnimatedTemplate = require('./AnimatedTemplate'); -var AnimatedTracking = require('./AnimatedTracking'); -var isAnimated = require('./isAnimated'); - -var Animation = require('./Animation'); -var TimingAnimation = require('./TimingAnimation'); -var DecayAnimation = require('./DecayAnimation'); -var SpringAnimation = require('./SpringAnimation'); +import invariant from 'invariant'; + +import Animated from './Animated'; +import AnimatedValue from './AnimatedValue'; +import AnimatedValueXY from './AnimatedValueXY'; +import AnimatedAddition from './AnimatedAddition'; +import AnimatedMultiplication from './AnimatedMultiplication'; +import AnimatedModulo from './AnimatedModulo'; +import AnimatedTemplate from './AnimatedTemplate'; +import AnimatedTracking from './AnimatedTracking'; +import isAnimated from './isAnimated'; +import Animation from './Animation'; +import TimingAnimation from './TimingAnimation'; +import DecayAnimation from './DecayAnimation'; +import SpringAnimation from './SpringAnimation'; +import createAnimatedComponent from './createAnimatedComponent'; +import inject from './injectable'; import type { InterpolationConfigType } from './Interpolation'; import type { AnimationConfig, EndResult, EndCallback } from './Animation'; @@ -303,6 +304,23 @@ var event = function( }; }; +function add(a: Animated, b: Animated): AnimatedAddition { + return new AnimatedAddition(a, b); +} + +function multiply(a: Animated, b: Animated): AnimatedMultiplication { + return new AnimatedMultiplication(a, b); +} + +function modulo(a: Animated, modulus: number): AnimatedModulo { + return new AnimatedModulo(a, modulus); +} + +function template(strings, ...values) { + return new AnimatedTemplate(strings, values); +} + + /** * Animations are an important part of modern UX, and the `Animated` * library is designed to make them fluid, powerful, and easy to build and @@ -392,27 +410,31 @@ var event = function( * limitations, but use it sparingly since it might have performance * implications in the future. */ -module.exports = { +export { + /** * Standard value class for driving animations. Typically initialized with * `new Animated.Value(0);` */ - Value: AnimatedValue, + AnimatedValue as Value, + /** * 2D value class for driving 2D animations, such as pan gestures. */ - ValueXY: AnimatedValueXY, + AnimatedValueXY as ValueXY, /** * Animates a value from an initial velocity to zero based on a decay * coefficient. */ decay, + /** * Animates a value along a timed easing curve. The `Easing` module has tons * of pre-defined curves, or you can use your own function. */ timing, + /** * Spring animation based on Rebound and Origami. Tracks velocity state to * create fluid motions as the `toValue` updates, and can be chained together. @@ -421,51 +443,47 @@ module.exports = { /** * Creates a new Animated value composed from two Animated values added - * together. + * together */ - add: function add(a: Animated, b: Animated): AnimatedAddition { - return new AnimatedAddition(a, b); - }, + add, + /** * Creates a new Animated value composed from two Animated values multiplied * together. */ - multiply: function multiply(a: Animated, b: Animated): AnimatedMultiplication { - return new AnimatedMultiplication(a, b); - }, + multiply, /** * Creates a new Animated value that is the (non-negative) modulo of the * provided Animated value */ - modulo: function modulo(a: Animated, modulus: number): AnimatedModulo { - return new AnimatedModulo(a, modulus); - }, + modulo, /** * Creates a new Animated value that is the specified string, with each * substitution expression being separately animated and interpolated. */ - template: function template(strings, ...values) { - return new AnimatedTemplate(strings, values); - }, + template, /** * Starts an animation after the given delay. */ delay, + /** * Starts an array of animations in order, waiting for each to complete * before starting the next. If the current running animation is stopped, no * following animations will be started. */ sequence, + /** * Starts an array of animations all at the same time. By default, if one * of the animations is stopped, they will all be stopped. You can override * this with the `stopTogether` flag. */ parallel, + /** * Array of animations may run in parallel (overlap), but are started in * sequence with successive delays. Nice for doing trailing effects. @@ -499,15 +517,7 @@ module.exports = { /** * Make any React component Animatable. Used to create `Animated.View`, etc. */ - createAnimatedComponent: require('./createAnimatedComponent'), - - inject: { - ApplyAnimatedValues: require('./injectable/ApplyAnimatedValues').inject, - InteractionManager: require('./injectable/InteractionManager').inject, - FlattenStyle: require('./injectable/FlattenStyle').inject, - RequestAnimationFrame: require('./injectable/RequestAnimationFrame').inject, - CancelAnimationFrame: require('./injectable/CancelAnimationFrame').inject, - }, + createAnimatedComponent, - __PropsOnlyForTests: require('./AnimatedProps'), + inject, }; diff --git a/src/injectable/ApplyAnimatedValues.js b/src/injectable/ApplyAnimatedValues.js index cab8b89..26f9649 100644 --- a/src/injectable/ApplyAnimatedValues.js +++ b/src/injectable/ApplyAnimatedValues.js @@ -23,4 +23,4 @@ var ApplyAnimatedValues = { }, }; -module.exports = ApplyAnimatedValues; +export default ApplyAnimatedValues; diff --git a/src/injectable/CancelAnimationFrame.js b/src/injectable/CancelAnimationFrame.js index 81cde5c..d065bd7 100644 --- a/src/injectable/CancelAnimationFrame.js +++ b/src/injectable/CancelAnimationFrame.js @@ -17,4 +17,4 @@ var CancelAnimationFrame = { }, }; -module.exports = CancelAnimationFrame; +export default CancelAnimationFrame; diff --git a/src/injectable/FlattenStyle.js b/src/injectable/FlattenStyle.js index fd8c0c1..1a85569 100644 --- a/src/injectable/FlattenStyle.js +++ b/src/injectable/FlattenStyle.js @@ -17,4 +17,4 @@ var FlattenStyle = { }, }; -module.exports = FlattenStyle; +export default FlattenStyle; diff --git a/src/injectable/InteractionManager.js b/src/injectable/InteractionManager.js index 88891c4..d1f8f95 100644 --- a/src/injectable/InteractionManager.js +++ b/src/injectable/InteractionManager.js @@ -20,4 +20,4 @@ var InteractionManager = { }, }; -module.exports = InteractionManager; +export default InteractionManager; diff --git a/src/injectable/RequestAnimationFrame.js b/src/injectable/RequestAnimationFrame.js index aa3e926..ba71555 100644 --- a/src/injectable/RequestAnimationFrame.js +++ b/src/injectable/RequestAnimationFrame.js @@ -17,4 +17,4 @@ var RequestAnimationFrame = { }, }; -module.exports = RequestAnimationFrame; +export default RequestAnimationFrame; diff --git a/src/injectable/index.js b/src/injectable/index.js new file mode 100644 index 0000000..4d10582 --- /dev/null +++ b/src/injectable/index.js @@ -0,0 +1,13 @@ +import ApplyAnimatedValues from './ApplyAnimatedValues'; +import InteractionManager from './InteractionManager'; +import FlattenStyle from './FlattenStyle'; +import RequestAnimationFrame from './RequestAnimationFrame'; +import CancelAnimationFrame from './CancelAnimationFrame'; + +export default { + ApplyAnimatedValues: ApplyAnimatedValues.inject, + InteractionManager: InteractionManager.inject, + FlattenStyle: FlattenStyle.inject, + RequestAnimationFrame: RequestAnimationFrame.inject, + CancelAnimationFrame: CancelAnimationFrame.inject, +}; diff --git a/src/isAnimated.js b/src/isAnimated.js index 01cd9e4..f19d855 100644 --- a/src/isAnimated.js +++ b/src/isAnimated.js @@ -10,10 +10,10 @@ */ 'use strict'; -var Animated = require('./Animated'); +import Animated from './Animated'; function isAnimated(obj) { return obj instanceof Animated; } -module.exports = isAnimated; +export default isAnimated;