react-motion - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

lib/Spring.js

@@ -1,716 +0,501 @@
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"));
-	else if(typeof define === 'function' && define.amd)
-		define(["react"], factory);
-	else if(typeof exports === 'object')
-		exports["Spring"] = factory(require("react"));
-	else
-		root["Spring"] = factory(root["React"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
-return /******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
+'use strict';
 
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
+exports.__esModule = true;
+exports.updateCurrVals = updateCurrVals;
+exports.updateCurrV = updateCurrV;
+exports.noSpeed = noSpeed;
 
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId])
-/******/ 			return installedModules[moduleId].exports;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			exports: {},
-/******/ 			id: moduleId,
-/******/ 			loaded: false
-/******/ 		};
+var _react = require('react');
 
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+var _react2 = _interopRequireDefault(_react);
 
-/******/ 		// Flag the module as loaded
-/******/ 		module.loaded = true;
+var _utils = require('./utils');
 
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
+var _stepper = require('./stepper');
 
+var _stepper2 = _interopRequireDefault(_stepper);
 
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
+var FRAME_RATE = 1 / 60;
 
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
+function zero() {
+  return 0;
+}
 
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "lib/";
+// TODO: test
+function mergeDiff(_x, _x2, _x3, _x4) {
+  var _again = true;
 
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(0);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ function(module, exports, __webpack_require__) {
+  _function: while (_again) {
+    var collA = _x,
+        collB = _x2,
+        onRemove = _x3,
+        accum = _x4;
+    a = aa = b = bb = undefined;
+    _again = false;
+    var a = collA[0];
+    var aa = collA.slice(1);
+    var b = collB[0];
+    var bb = collB.slice(1);
 
-	'use strict';
+    if (collA.length === 0 && collB.length === 0) {
+      return accum;
+    }
+    if (collA.length === 0) {
+      return accum.concat(collB);
+    }
+    if (collB.length === 0) {
+      if (onRemove(a)) {
+        _x = aa;
+        _x2 = collB;
+        _x3 = onRemove;
+        _x4 = accum;
+        _again = true;
+        continue _function;
+      }
+      _x = aa;
+      _x2 = collB;
+      _x3 = onRemove;
+      _x4 = accum.concat(a);
+      _again = true;
+      continue _function;
+    }
+    if (a === b) {
+      // fails for ([undefined], [], () => true). but don't do that
+      _x = aa;
+      _x2 = bb;
+      _x3 = onRemove;
+      _x4 = accum.concat(a);
+      _again = true;
+      continue _function;
+    }
+    if (collB.indexOf(a) === -1) {
+      if (onRemove(a)) {
+        _x = aa;
+        _x2 = collB;
+        _x3 = onRemove;
+        _x4 = accum;
+        _again = true;
+        continue _function;
+      }
+      _x = aa;
+      _x2 = collB;
+      _x3 = onRemove;
+      _x4 = accum.concat(a);
+      _again = true;
+      continue _function;
+    }
+    _x = aa;
+    _x2 = collB;
+    _x3 = onRemove;
+    _x4 = accum;
+    _again = true;
+    continue _function;
+  }
+}
 
-	Object.defineProperty(exports, '__esModule', {
-	  value: true
-	});
+function mergeDiffObj(a, b, onRemove) {
+  var keys = mergeDiff(Object.keys(a), Object.keys(b), function (_a) {
+    return !onRemove(_a);
+  }, []);
+  var ret = {};
+  keys.forEach(function (key) {
+    if (b.hasOwnProperty(key)) {
+      ret[key] = b[key];
+    } else {
+      ret[key] = onRemove(key);
+    }
+  });
 
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+  return ret;
+}
 
-	function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }
+// TODO: refactor common logic with updateCurrV
 
-	function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }
+function updateCurrVals(frameRate, currVals, currV, endValue, k, b) {
+  if (endValue === null) {
+    return null;
+  }
+  if (typeof endValue === 'number') {
+    if (k == null || b == null) {
+      return endValue;
+    }
+    // TODO: do something to stepper to make this not allocate (2 steppers?)
+    return _stepper2['default'](frameRate, currVals, currV, endValue, k, b)[0];
+  }
+  if (endValue.val != null && endValue.config && endValue.config.length === 0) {
+    return endValue;
+  }
+  if (endValue.val != null) {
+    var _ref = endValue.config || [170, 26];
 
-	var _react = __webpack_require__(1);
+    var _k = _ref[0];
+    var _b = _ref[1];
 
-	var _react2 = _interopRequireDefault(_react);
+    var ret = {
+      val: updateCurrVals(frameRate, currVals.val, currV.val, endValue.val, _k, _b)
+    };
+    if (endValue.config) {
+      ret.config = endValue.config;
+    }
+    return ret;
+  }
+  if (Array.isArray(endValue)) {
+    return endValue.map(function (_, i) {
+      return updateCurrVals(frameRate, currVals[i], currV[i], endValue[i], k, b);
+    });
+  }
+  if (_utils.isPlainObject(endValue)) {
+    var _ret = (function () {
+      var ret = {};
+      Object.keys(endValue).forEach(function (key) {
+        ret[key] = updateCurrVals(frameRate, currVals[key], currV[key], endValue[key], k, b);
+      });
+      return {
+        v: ret
+      };
+    })();
 
-	var _utils = __webpack_require__(2);
+    if (typeof _ret === 'object') return _ret.v;
+  }
+  return endValue;
+}
 
-	var _stepper = __webpack_require__(3);
+function updateCurrV(frameRate, currVals, currV, endValue, k, b) {
+  if (endValue === null) {
+    return null;
+  }
+  if (typeof endValue === 'number') {
+    if (k == null || b == null) {
+      return _utils.mapTree(zero, currV);
+    }
+    // TODO: do something to stepper to make this not allocate (2 steppers?)
+    return _stepper2['default'](frameRate, currVals, currV, endValue, k, b)[1];
+  }
+  if (endValue.val != null && endValue.config && endValue.config.length === 0) {
+    return _utils.mapTree(zero, currV);
+  }
+  if (endValue.val != null) {
+    var _ref2 = endValue.config || [170, 26];
 
-	var _stepper2 = _interopRequireDefault(_stepper);
+    var _k = _ref2[0];
+    var _b = _ref2[1];
 
-	// ---------
-	var FRAME_RATE = 1 / 60;
+    var ret = {
+      val: updateCurrV(frameRate, currVals.val, currV.val, endValue.val, _k, _b)
+    };
+    if (endValue.config) {
+      ret.config = endValue.config;
+    }
+    return ret;
+  }
+  if (Array.isArray(endValue)) {
+    return endValue.map(function (_, i) {
+      return updateCurrV(frameRate, currVals[i], currV[i], endValue[i], k, b);
+    });
+  }
+  if (_utils.isPlainObject(endValue)) {
+    var _ret2 = (function () {
+      var ret = {};
+      Object.keys(endValue).forEach(function (key) {
+        ret[key] = updateCurrV(frameRate, currVals[key], currV[key], endValue[key], k, b);
+      });
+      return {
+        v: ret
+      };
+    })();
 
-	function zero() {
-	  return 0;
-	}
+    if (typeof _ret2 === 'object') return _ret2.v;
+  }
+  return _utils.mapTree(zero, currV);
+}
 
-	// TODO: test
-	function mergeDiff(_x5, _x6, _x7, _x8) {
-	  var _again = true;
+function noSpeed(coll) {
+  if (Array.isArray(coll)) {
+    return coll.every(noSpeed);
+  }
+  if (_utils.isPlainObject(coll)) {
+    return Object.keys(coll).every(function (key) {
+      return key === 'config' ? true : noSpeed(coll[key]);
+    });
+  }
+  return typeof coll === 'number' ? coll === 0 : true;
+}
 
-	  _function: while (_again) {
-	    var collA = _x5,
-	        collB = _x6,
-	        onRemove = _x7,
-	        accum = _x8;
-	    _collA = a = aa = _collB = b = bb = undefined;
-	    _again = false;
+var Spring = _react2['default'].createClass({
+  displayName: 'Spring',
 
-	    var _collA = _toArray(collA);
+  propTypes: {
+    endValue: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.object, _react.PropTypes.array]).isRequired,
+    children: _react.PropTypes.func.isRequired
+  },
 
-	    var a = _collA[0];
+  getInitialState: function getInitialState() {
+    var endValue = this.props.endValue;
 
-	    var aa = _collA.slice(1);
+    if (typeof endValue === 'function') {
+      endValue = endValue();
+    }
+    return {
+      currVals: endValue,
+      currV: _utils.mapTree(zero, endValue),
+      now: null
+    };
+  },
 
-	    var _collB = _toArray(collB);
+  componentDidMount: function componentDidMount() {
+    this.raf(true, false);
+  },
 
-	    var b = _collB[0];
+  componentWillReceiveProps: function componentWillReceiveProps() {
+    this.raf(true, false);
+  },
 
-	    var bb = _collB.slice(1);
+  componentWillUnmount: function componentWillUnmount() {
+    cancelAnimationFrame(this._rafID);
+  },
 
-	    if (collA.length === 0 && collB.length === 0) {
-	      return accum;
-	    }
-	    if (collA.length === 0) {
-	      return accum.concat(collB);
-	    }
-	    if (collB.length === 0) {
-	      if (onRemove(a)) {
-	        _x5 = aa;
-	        _x6 = collB;
-	        _x7 = onRemove;
-	        _x8 = accum;
-	        _again = true;
-	        continue _function;
-	      }
-	      _x5 = aa;
-	      _x6 = collB;
-	      _x7 = onRemove;
-	      _x8 = accum.concat(a);
-	      _again = true;
-	      continue _function;
-	    }
-	    if (a === b) {
-	      // fails for ([undefined], [], () => true). but don't do that
-	      _x5 = aa;
-	      _x6 = bb;
-	      _x7 = onRemove;
-	      _x8 = accum.concat(a);
-	      _again = true;
-	      continue _function;
-	    }
-	    if (collB.indexOf(a) === -1) {
-	      if (onRemove(a)) {
-	        _x5 = aa;
-	        _x6 = collB;
-	        _x7 = onRemove;
-	        _x8 = accum;
-	        _again = true;
-	        continue _function;
-	      }
-	      _x5 = aa;
-	      _x6 = collB;
-	      _x7 = onRemove;
-	      _x8 = accum.concat(a);
-	      _again = true;
-	      continue _function;
-	    }
-	    _x5 = aa;
-	    _x6 = collB;
-	    _x7 = onRemove;
-	    _x8 = accum;
-	    _again = true;
-	    continue _function;
-	  }
-	}
+  _rafID: null,
 
-	function mergeDiffObj(a, b, onRemove) {
-	  var keys = mergeDiff(Object.keys(a), Object.keys(b), function (a) {
-	    return !onRemove(a);
-	  }, []);
-	  var ret = {};
-	  keys.forEach(function (key) {
-	    if (b.hasOwnProperty(key)) {
-	      ret[key] = b[key];
-	    } else {
-	      ret[key] = onRemove(key);
-	    }
-	  });
+  raf: function raf(justStarted, isLastRaf) {
+    var _this = this;
 
-	  return ret;
-	}
+    if (justStarted && this._rafID != null) {
+      // already rafing
+      return;
+    }
+    this._rafID = requestAnimationFrame(function () {
+      var _state = _this.state;
+      var currVals = _state.currVals;
+      var currV = _state.currV;
+      var now = _state.now;
+      var endValue = _this.props.endValue;
 
-	// TODO: refactor common logic with updateCurrV
-	// TODO: tests
-	function updateCurrVals(frameRate, currVals, currV, endValue) {
-	  var k = arguments[4] === undefined ? 170 : arguments[4];
-	  var b = arguments[5] === undefined ? 26 : arguments[5];
+      if (typeof endValue === 'function') {
+        endValue = endValue(currVals);
+      }
+      var frameRate = now && !justStarted ? (Date.now() - now) / 1000 : FRAME_RATE;
 
-	  if (endValue === null) {
-	    return null;
-	  }
-	  if (typeof endValue === 'number') {
-	    // TODO: do something to stepper to make this not allocate (2 steppers?)
-	    return (0, _stepper2['default'])(frameRate, currVals, currV, endValue, k, b)[0];
-	  }
-	  if (endValue.val != null && endValue.config && endValue.config.length === 0) {
-	    return endValue;
-	  }
-	  if (endValue.val != null) {
-	    var _ref = endValue.config || [170, 26];
+      var newCurrVals = updateCurrVals(frameRate, currVals, currV, endValue);
+      var newCurrV = updateCurrV(frameRate, currVals, currV, endValue);
 
-	    var _ref2 = _slicedToArray(_ref, 2);
+      _this.setState(function () {
+        return {
+          currVals: newCurrVals,
+          currV: newCurrV,
+          now: Date.now()
+        };
+      });
 
-	    var _k = _ref2[0];
-	    var _b = _ref2[1];
+      var stop = noSpeed(newCurrV);
+      if (stop && !justStarted) {
+        // this flag is necessary, because in `endValue` callback, the user
+        // might check that the current value has reached the destination, and
+        // decide to return a new destination value. However, since s/he's
+        // accessing the last tick's current value, and if we stop rafing after
+        // speed is 0, the next `endValue` is never called and we never detect
+        // the new chained animation. isLastRaf ensures that we raf a single
+        // more time in case the user wants to chain another animation at the
+        // end of this one
+        if (isLastRaf) {
+          _this._rafID = null;
+        } else {
+          _this.raf(false, true);
+        }
+      } else {
+        _this.raf(false, false);
+      }
+    });
+  },
 
-	    return {
-	      val: updateCurrVals(frameRate, currVals.val, currV.val, endValue.val, _k, _b),
-	      config: endValue.config
-	    };
-	  }
-	  if (Object.prototype.toString.call(endValue) === '[object Array]') {
-	    return endValue.map(function (_, i) {
-	      return updateCurrVals(frameRate, currVals[i], currV[i], endValue[i], k, b);
-	    });
-	  }
-	  if (Object.prototype.toString.call(endValue) === '[object Object]') {
-	    var _ret = (function () {
-	      var ret = {};
-	      Object.keys(endValue).forEach(function (key) {
-	        ret[key] = updateCurrVals(frameRate, currVals[key], currV[key], endValue[key], k, b);
-	      });
-	      return {
-	        v: ret
-	      };
-	    })();
+  render: function render() {
+    var currVals = this.state.currVals;
 
-	    if (typeof _ret === 'object') return _ret.v;
-	  }
-	  return endValue;
-	}
+    return _react2['default'].Children.only(this.props.children(currVals));
+  }
+});
 
-	function updateCurrV(frameRate, currVals, currV, endValue) {
-	  var k = arguments[4] === undefined ? 170 : arguments[4];
-	  var b = arguments[5] === undefined ? 26 : arguments[5];
+exports.Spring = Spring;
+var TransitionSpring = _react2['default'].createClass({
+  displayName: 'TransitionSpring',
 
-	  if (endValue === null) {
-	    return null;
-	  }
-	  if (typeof endValue === 'number') {
-	    return (0, _stepper2['default'])(frameRate, currVals, currV, endValue, k, b)[1];
-	  }
-	  if (endValue.val != null && endValue.config && endValue.config.length === 0) {
-	    return (0, _utils.mapTree)(zero, currV);
-	  }
-	  if (endValue.val != null) {
-	    var _ref3 = endValue.config || [170, 26];
+  propTypes: {
+    endValue: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.object]).isRequired,
+    willLeave: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.object, _react.PropTypes.array]),
+    willEnter: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.object, _react.PropTypes.array]),
+    children: _react.PropTypes.func.isRequired
+  },
 
-	    var _ref32 = _slicedToArray(_ref3, 2);
+  getDefaultProps: function getDefaultProps() {
+    return {
+      willEnter: function willEnter(key, value) {
+        return value;
+      },
+      willLeave: function willLeave() {
+        return null;
+      }
+    };
+  },
 
-	    var _k = _ref32[0];
-	    var _b = _ref32[1];
+  getInitialState: function getInitialState() {
+    var endValue = this.props.endValue;
 
-	    return {
-	      val: updateCurrV(frameRate, currVals.val, currV.val, endValue.val, _k, _b),
-	      config: endValue.config
-	    };
-	  }
-	  if (Object.prototype.toString.call(endValue) === '[object Array]') {
-	    return endValue.map(function (_, i) {
-	      return updateCurrV(frameRate, currVals[i], currV[i], endValue[i], k, b);
-	    });
-	  }
-	  if (Object.prototype.toString.call(endValue) === '[object Object]') {
-	    var _ret2 = (function () {
-	      var ret = {};
-	      Object.keys(endValue).forEach(function (key) {
-	        ret[key] = updateCurrV(frameRate, currVals[key], currV[key], endValue[key], k, b);
-	      });
-	      return {
-	        v: ret
-	      };
-	    })();
+    if (typeof endValue === 'function') {
+      endValue = endValue();
+    }
+    return {
+      currVals: endValue,
+      currV: _utils.mapTree(zero, endValue),
+      now: null
+    };
+  },
 
-	    if (typeof _ret2 === 'object') return _ret2.v;
-	  }
-	  return (0, _utils.mapTree)(zero, currV);
-	}
+  componentDidMount: function componentDidMount() {
+    this.raf(true, false);
+  },
 
-	function noSpeed(coll) {
-	  if (Object.prototype.toString.call(coll) === '[object Array]') {
-	    return coll.every(noSpeed);
-	  }
-	  if (Object.prototype.toString.call(coll) === '[object Object]') {
-	    return Object.keys(coll).every(function (key) {
-	      return key === 'config' ? true : noSpeed(coll[key]);
-	    });
-	  }
-	  return coll === 0;
-	}
+  componentWillReceiveProps: function componentWillReceiveProps() {
+    this.raf(true, false);
+  },
 
-	exports['default'] = _react2['default'].createClass({
-	  displayName: 'Spring',
+  componentWillUnmount: function componentWillUnmount() {
+    cancelAnimationFrame(this._rafID);
+  },
 
-	  propTypes: {
-	    endValue: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.object, _react.PropTypes.array]).isRequired
-	  },
+  _rafID: null,
 
-	  getInitialState: function getInitialState() {
-	    var endValue = this.props.endValue;
+  raf: function raf(justStarted, isLastRaf) {
+    var _this2 = this;
 
-	    if (typeof endValue === 'function') {
-	      endValue = endValue();
-	    }
-	    return {
-	      currVals: endValue,
-	      currV: (0, _utils.mapTree)(zero, endValue),
-	      now: null
-	    };
-	  },
+    if (justStarted && this._rafID != null) {
+      // already rafing
+      return;
+    }
+    this._rafID = requestAnimationFrame(function () {
+      var _state2 = _this2.state;
+      var currVals = _state2.currVals;
+      var currV = _state2.currV;
+      var now = _this2.state.now;
+      var endValue = _this2.props.endValue;
+      var _props = _this2.props;
+      var willEnter = _props.willEnter;
+      var willLeave = _props.willLeave;
 
-	  componentDidMount: function componentDidMount() {
-	    this.raf(true, false);
-	  },
+      if (typeof endValue === 'function') {
+        endValue = endValue(currVals);
+      }
 
-	  componentWillReceiveProps: function componentWillReceiveProps() {
-	    this.raf(true, false);
-	  },
+      var mergedVals = undefined;
+      if (Array.isArray(endValue)) {
+        (function () {
+          var currValsObj = {};
+          currVals.forEach(function (objWithKey) {
+            currValsObj[objWithKey.key] = objWithKey;
+          });
 
-	  componentWillUnmount: function componentWillUnmount() {
-	    cancelAnimationFrame(this._rafID);
-	  },
+          var endValueObj = {};
+          endValue.forEach(function (objWithKey) {
+            endValueObj[objWithKey.key] = objWithKey;
+          });
+          var currVObj = {};
+          endValue.forEach(function (objWithKey) {
+            currVObj[objWithKey.key] = objWithKey;
+          });
 
-	  _rafID: null,
+          var mergedValsObj = mergeDiffObj(currValsObj, endValueObj, function (key) {
+            return willLeave(key, endValue, currVals, currV);
+          });
 
-	  raf: function raf(justStarted, isLastRaf) {
-	    var _this = this;
+          var mergedValsKeys = Object.keys(mergedValsObj);
+          mergedVals = mergedValsKeys.map(function (key) {
+            return mergedValsObj[key];
+          });
+          mergedValsKeys.filter(function (key) {
+            return !currValsObj.hasOwnProperty(key);
+          }).forEach(function (key) {
+            currValsObj[key] = willEnter(key, mergedValsObj[key], endValue, currVals, currV);
+            currVObj[key] = _utils.mapTree(zero, currValsObj[key]);
+          });
 
-	    if (justStarted && this._rafID != null) {
-	      // already rafing
-	      return;
-	    }
-	    this._rafID = requestAnimationFrame(function () {
-	      var _state = _this.state;
-	      var currVals = _state.currVals;
-	      var currV = _state.currV;
-	      var now = _state.now;
-	      var endValue = _this.props.endValue;
+          currVals = Object.keys(currValsObj).map(function (key) {
+            return currValsObj[key];
+          });
+          currV = Object.keys(currVObj).map(function (key) {
+            return currVObj[key];
+          });
+        })();
+      } else {
+        // only other option is obj
+        mergedVals = mergeDiffObj(currVals, endValue,
+        // TODO: stop allocating like crazy in this whole code path
+        function (key) {
+          return willLeave(key, endValue, currVals, currV);
+        });
 
-	      if (typeof endValue === 'function') {
-	        endValue = endValue(currVals);
-	      }
-	      var frameRate = now && !justStarted ? (Date.now() - now) / 1000 : FRAME_RATE;
+        // TODO: check if this is necessary
+        currVals = _utils.clone(currVals);
+        currV = _utils.clone(currV);
+        Object.keys(mergedVals).filter(function (key) {
+          return !currVals.hasOwnProperty(key);
+        }).forEach(function (key) {
+          // TODO: param format changed, check other demos
+          currVals[key] = willEnter(key, mergedVals[key], endValue, currVals, currV);
+          currV[key] = _utils.mapTree(zero, currVals[key]);
+        });
+      }
 
-	      var newCurrVals = updateCurrVals(frameRate, currVals, currV, endValue);
-	      var newCurrV = updateCurrV(frameRate, currVals, currV, endValue);
+      var frameRate = now && !justStarted ? (Date.now() - now) / 1000 : FRAME_RATE;
 
-	      _this.setState(function () {
-	        return {
-	          currVals: newCurrVals,
-	          currV: newCurrV,
-	          now: Date.now()
-	        };
-	      });
+      var newCurrVals = updateCurrVals(frameRate, currVals, currV, mergedVals);
+      var newCurrV = updateCurrV(frameRate, currVals, currV, mergedVals);
 
-	      var stop = noSpeed(newCurrV);
-	      if (stop && !justStarted) {
-	        // this flag is necessary, because in `endValue` callback, the user
-	        // might check that the current value has reached the destination, and
-	        // decide to return a new destination value. However, since s/he's
-	        // accessing the last tick's current value, and if we stop rafing after
-	        // speed is 0, the next `endValue` is never called and we never detect
-	        // the new chained animation. isLastRaf ensures that we raf a single
-	        // more time in case the user wants to chain another animation at the
-	        // end of this one
-	        if (isLastRaf) {
-	          _this._rafID = null;
-	        } else {
-	          _this.raf(false, true);
-	        }
-	      } else {
-	        _this.raf(false, false);
-	      }
-	    });
-	  },
+      _this2.setState(function () {
+        return {
+          currVals: newCurrVals,
+          currV: newCurrV,
+          now: Date.now()
+        };
+      });
 
-	  render: function render() {
-	    var currVals = this.state.currVals;
+      var stop = noSpeed(newCurrV);
+      if (stop && !justStarted) {
+        if (isLastRaf) {
+          _this2._rafID = null;
+        } else {
+          _this2.raf(false, true);
+        }
+      } else {
+        _this2.raf(false, false);
+      }
+    });
+  },
 
-	    return _react2['default'].createElement(
-	      'div',
-	      this.props,
-	      this.props.children(currVals)
-	    );
-	  }
-	});
-	var TransitionSpring = _react2['default'].createClass({
-	  displayName: 'TransitionSpring',
+  render: function render() {
+    var currVals = this.state.currVals;
 
-	  propTypes: {
-	    endValue: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.object]).isRequired,
-	    willLeave: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.object, _react.PropTypes.array]),
-	    willEnter: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.object, _react.PropTypes.array])
-	  },
+    return _react2['default'].Children.only(this.props.children(currVals));
+  }
+});
 
-	  getDefaultProps: function getDefaultProps() {
-	    return {
-	      willEnter: function willEnter(key, endValue) {
-	        return endValue[key];
-	      },
-	      willLeave: function willLeave() {
-	        return null;
-	      }
-	    };
-	  },
+exports.TransitionSpring = TransitionSpring;
+function reorderKeys(obj, f) {
+  var ret = {};
+  f(Object.keys(obj)).forEach(function (key) {
+    ret[key] = obj[key];
+  });
+  return ret;
+}
 
-	  getInitialState: function getInitialState() {
-	    var endValue = this.props.endValue;
+var utils = {
+  reorderKeys: reorderKeys
+};
+exports.utils = utils;
 
-	    if (typeof endValue === 'function') {
-	      endValue = endValue();
-	    }
-	    return {
-	      currVals: endValue,
-	      currV: (0, _utils.mapTree)(zero, endValue),
-	      now: null
-	    };
-	  },
+// coming soon
+// PropTypes.arrayOf(PropTypes.shape({
+//   key: PropTypes.any.isRequired,
+// })),
+// PropTypes.arrayOf(PropTypes.element),
 
-	  componentDidMount: function componentDidMount() {
-	    this.raf(true, false);
-	  },
-
-	  componentWillReceiveProps: function componentWillReceiveProps() {
-	    this.raf(true, false);
-	  },
-
-	  componentWillUnmount: function componentWillUnmount() {
-	    cancelAnimationFrame(this._rafID);
-	  },
-
-	  _rafID: null,
-
-	  raf: function raf(justStarted, isLastRaf) {
-	    var _this2 = this;
-
-	    if (justStarted && this._rafID != null) {
-	      // already rafing
-	      return;
-	    }
-	    this._rafID = requestAnimationFrame(function () {
-	      var _state2 = _this2.state;
-	      var currVals = _state2.currVals;
-	      var currV = _state2.currV;
-	      var now = _state2.now;
-	      var _props = _this2.props;
-	      var endValue = _props.endValue;
-	      var willEnter = _props.willEnter;
-	      var willLeave = _props.willLeave;
-
-	      if (typeof endValue === 'function') {
-	        endValue = endValue(currVals);
-	      }
-
-	      var mergedVals = mergeDiffObj(currVals, endValue, function (key) {
-	        return willLeave(key, endValue, currVals, currV);
-	      });
-
-	      currVals = (0, _utils.clone)(currVals);
-	      currV = (0, _utils.clone)(currV);
-	      Object.keys(mergedVals).filter(function (key) {
-	        return !currVals.hasOwnProperty(key);
-	      }).forEach(function (key) {
-	        currVals[key] = willEnter(key, endValue, currVals, currV);
-	        currV[key] = (0, _utils.mapTree)(zero, currVals[key]);
-	      });
-
-	      var frameRate = now && !justStarted ? (Date.now() - now) / 1000 : FRAME_RATE;
-
-	      var newCurrVals = updateCurrVals(frameRate, currVals, currV, mergedVals);
-	      var newCurrV = updateCurrV(frameRate, currVals, currV, mergedVals);
-
-	      _this2.setState(function () {
-	        return {
-	          currVals: newCurrVals,
-	          currV: newCurrV,
-	          now: Date.now()
-	        };
-	      });
-
-	      var stop = noSpeed(newCurrV);
-	      if (stop && !justStarted) {
-	        if (isLastRaf) {
-	          _this2._rafID = null;
-	        } else {
-	          _this2.raf(false, true);
-	        }
-	      } else {
-	        _this2.raf(false, false);
-	      }
-	    });
-	  },
-
-	  render: function render() {
-	    var currVals = this.state.currVals;
-
-	    return _react2['default'].createElement(
-	      'div',
-	      this.props,
-	      this.props.children(currVals)
-	    );
-	  }
-	});
-
-	exports.TransitionSpring = TransitionSpring;
-	function reorderKeys(obj, f) {
-	  var ret = {};
-	  f(Object.keys(obj)).forEach(function (key) {
-	    ret[key] = obj[key];
-	  });
-	  return ret;
-	}
-
-	var utils = {
-	  reorderKeys: reorderKeys
-	};
-	exports.utils = utils;
-
-	// coming soon
-	// PropTypes.arrayOf(PropTypes.shape({
-	//   key: PropTypes.any.isRequired,
-	// })),
-	// PropTypes.arrayOf(PropTypes.element),
-
-	// TODO: numbers? strings?
-
-/***/ },
-/* 1 */
-/***/ function(module, exports) {
-
-	module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
-
-/***/ },
-/* 2 */
-/***/ function(module, exports) {
-
-	'use strict';
-
-	Object.defineProperty(exports, '__esModule', {
-	  value: true
-	});
-	exports.clone = clone;
-	exports.eq = eq;
-	exports.range = range;
-	exports.mapTree = mapTree;
-	exports.reshapeTree = reshapeTree;
-	exports.toOj = toOj;
-	exports.toArr = toArr;
-	exports.reinsert = reinsert;
-	exports.clamp = clamp;
-
-	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
-
-	// damn it JS
-
-	function clone(coll) {
-	  return JSON.parse(JSON.stringify(coll));
-	}
-
-	function eq(a, b) {
-	  return JSON.stringify(a) === JSON.stringify(b);
-	}
-
-	function range(start, afterStop) {
-	  if (afterStop == null) {
-	    afterStop = start;
-	    start = 0;
-	  }
-	  var ret = [];
-	  for (var i = start; i < afterStop; i++) {
-	    ret.push(i);
-	  }
-	  return ret;
-	}
-
-	// assume trees same are same
-	function _mapTree(path, f, trees) {
-	  var t1 = trees[0];
-	  if (Object.prototype.toString.call(t1) === '[object Array]') {
-	    return t1.map(function (_, i) {
-	      return _mapTree([].concat(_toConsumableArray(path), [i]), f, trees.map(function (val) {
-	        return val[i];
-	      }));
-	    });
-	  }
-	  if (Object.prototype.toString.call(t1) === '[object Object]') {
-	    var _ret = (function () {
-	      var newTree = {};
-	      Object.keys(t1).forEach(function (key) {
-	        newTree[key] = _mapTree([].concat(_toConsumableArray(path), [key]), f, trees.map(function (val) {
-	          return val[key];
-	        }));
-	      });
-	      return {
-	        v: newTree
-	      };
-	    })();
-
-	    if (typeof _ret === 'object') return _ret.v;
-	  }
-	  return f.apply(undefined, [path].concat(_toConsumableArray(trees)));
-	}
-
-	function mapTree(f) {
-	  for (var _len = arguments.length, rest = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-	    rest[_key - 1] = arguments[_key];
-	  }
-
-	  return _mapTree([], f, rest);
-	}
-
-	function _reshapeTree(path, a, b, f) {
-	  if (a == null) {
-	    throw 'wtf2';
-	  }
-
-	  if (b == null) {
-	    return f(path, a);
-	  }
-
-	  if (Object.prototype.toString.call(a) === '[object Array]') {
-	    return a.map(function (val, i) {
-	      return _reshapeTree([].concat(_toConsumableArray(path), [i]), val, b[i], f);
-	    });
-	  }
-	  if (Object.prototype.toString.call(a) === '[object Object]') {
-	    var _ret2 = (function () {
-	      var newTree = {};
-	      Object.keys(a).forEach(function (key) {
-	        newTree[key] = _reshapeTree([].concat(_toConsumableArray(path), [key]), a[key], b[key], f);
-	      });
-	      return {
-	        v: newTree
-	      };
-	    })();
-
-	    if (typeof _ret2 === 'object') return _ret2.v;
-	  }
-
-	  return b;
-	}
-
-	function reshapeTree(a, b, f) {
-	  return _reshapeTree([], a, b, f);
-	}
-
-	function toOj(vals, keys) {
-	  var ret = {};
-	  vals.forEach(function (val, i) {
-	    return ret[keys[i]] = val;
-	  });
-	  return ret;
-	}
-
-	function toArr(obj) {
-	  var keys = Object.keys(obj);
-	  var vals = keys.map(function (k) {
-	    return obj[k];
-	  });
-	  return [keys, vals];
-	}
-
-	function reinsert(arr, from, to) {
-	  arr = clone(arr);
-	  var val = arr[from];
-	  arr.splice(from, 1);
-	  arr.splice(to, 0, val);
-	  return arr;
-	}
-
-	function clamp(n, min, max) {
-	  return n < min ? min : n > max ? max : n;
-	}
-
-/***/ },
-/* 3 */
-/***/ function(module, exports) {
-
-	"use strict";
-
-	Object.defineProperty(exports, "__esModule", {
-	  value: true
-	});
-	exports["default"] = stepper;
-	var errorMargin = 0.0001;
-
-	function stepper(frameRate, x, v, destX, k, b) {
-	  // Spring stiffness, in kg / s^2
-
-	  // for animations, destX is really spring length (spring at rest). initial
-	  // position is considered as the stretched/compressed position of a spring
-	  var Fspring = -k * (x - destX);
-
-	  // Damping constant, in kg / s
-	  var Fdamper = -b * v;
-
-	  // usually we put mass here, but for animation purposes, specifying mass is a
-	  // bit redundant. you could simply adjust k and b accordingly
-	  // let a = (Fspring + Fdamper) / mass;
-	  var a = Fspring + Fdamper;
-
-	  var newX = x + v * frameRate;
-	  var newV = v + a * frameRate;
-
-	  if (Math.abs(newV - v) < errorMargin && Math.abs(newX - x) < errorMargin) {
-	    return [destX, 0];
-	  }
-
-	  return [newX, newV];
-	}
-
-	module.exports = exports["default"];
-
-/***/ }
-/******/ ])
-});
-;
+// TODO: numbers? strings?

package.json

 {
   "name": "react-motion",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "A spring that solves your animation problems.",
-  "main": "lib/Spring.js",
-  "dependencies": {
+  "main": "lib/react-motion.js",
+  "peerDependencies": {
     "react": ">=0.13.2"
@@ -11,6 +11,14 @@ },
     "babel": "^5.6.14",
-    "babel-core": "^5.2.17",
-    "babel-loader": "^5.0.0",
-    "react-hot-loader": "^1.2.7",
-    "webpack": "^1.8.11",
+    "babel-core": "^5.6.18",
+    "babel-eslint": "^3.1.23",
+    "babel-loader": "^5.3.1",
+    "eslint": "^0.24.1",
+    "eslint-config-airbnb": "0.0.6",
+    "eslint-loader": "^0.14.1",
+    "eslint-plugin-react": "^2.7.0",
+    "expect": "^1.6.0",
+    "isparta": "^3.0.3",
+    "mocha": "^2.2.5",
+    "react-hot-loader": "^1.2.8",
+    "webpack": "^1.10.1",
     "webpack-dev-server": "^1.10.1"
@@ -20,6 +28,13 @@ },
     "start": "NODE_ENV=development node server.js",
-    "build": "NODE_ENV=production webpack -p",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "prerelease": "NODE_ENV=production webpack --config webpack.prod.config.js"
+    "build-demos": "NODE_ENV=production webpack -p",
+    "lint": "eslint --ext .js,.jsx .",
+    "prerelease": "babel src --out-dir lib && NODE_ENV=production webpack --config webpack.prod.config.js",
+    "test": "mocha --compilers js:babel/register --recursive test",
+    "test:dev": "npm test -- --watch",
+    "test:cov": "`npm bin`/babel-node `npm bin`/isparta cover --report text --report html `npm bin`/_mocha -- --recursive src"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chenglou/react-motion.git"
+  },
   "keywords": [
@@ -26,0 +41,0 @@ "react",

README.md

 # React-Motion
 
+[![npm version](https://badge.fury.io/js/react-motion.svg)](https://www.npmjs.com/package/react-motion)
+[![Bower version](https://badge.fury.io/bo/react-motion.svg)](http://badge.fury.io/bo/react-motion)
+[![react-motion channel on slack](https://img.shields.io/badge/slack-react--motion%40reactiflux-61DAAA.svg?style=flat)](https://reactiflux.slack.com/messages/react-motion/)
+
 ```js
@@ -17,2 +21,6 @@ <Spring endValue={{val: 10}}>
 
+1998 Script Tag:
+`<script src="path/to/react-motion/build/react-motion.js"></script>`
+(Module exposed as `ReactMotion`)
+
 [Check](https://cdn.rawgit.com/chenglou/react-motion/cffb3894f42e4825178d9c7c0313b2f4e9e65ab2/demo0/index.html) [Out](https://cdn.rawgit.com/chenglou/react-motion/cffb3894f42e4825178d9c7c0313b2f4e9e65ab2/demo1/index.html) [The](https://cdn.rawgit.com/chenglou/react-motion/cffb3894f42e4825178d9c7c0313b2f4e9e65ab2/demo2/index.html) [Cool](https://cdn.rawgit.com/chenglou/react-motion/cffb3894f42e4825178d9c7c0313b2f4e9e65ab2/demo3/index.html) [Demos](https://cdn.rawgit.com/chenglou/react-motion/072fef7b84b2d57187643baa4156ee2a7374655f/demo4/index.html).
@@ -22,2 +30,4 @@
 
+[My React-Europe talk](https://www.youtube.com/watch?v=1tavDv5hXpo)
+
 For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping constant for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about the more petty questions such as "what if the item's currently animating and is a position `x`? How do I adjust my time and curve?". It also greatly simplifies an animation API since there's really not that much to set up.
@@ -246,13 +256,16 @@
         willLeave={this.willLeave}>
-        {currentValue => Object.keys(currentValue).map(key => {
-          let style = {
-            height: currentValue[key].height.val,
-            opacity: currentValue[key].opacity.val,
-          };
-          return (
-            <div onClick={this.handleClick.bind(null, key)} style={style}>
-              {currentValue[key].text}
-            </div>
-          );
-        })}
+        {currentValue =>
+          <div>
+            {Object.keys(currentValue).map(key => {
+              let style = {
+                height: currentValue[key].height.val,
+                opacity: currentValue[key].opacity.val,
+              };
+              return (
+                <div onClick={this.handleClick.bind(null, key)} style={style}>
+                  {currentValue[key].text}
+                </div>
+              );
+            })}}
+          </div>
       </TransitionSpring>
@@ -259,0 +272,0 @@ );

webpack.prod.config.js

 var webpack = require('webpack');
 var path = require('path');
 
+// currently, this is for bower
 var config = {
   entry: {
-    index: './Spring.jsx'
+    index: './src/react-motion.js'
   },
   output: {
-    path: path.join(__dirname, 'lib'),
-    publicPath: 'lib/',
-    filename: 'Spring.js',
-    sourceMapFilename: 'Spring.map',
-    library: 'Spring',
+    path: path.join(__dirname, 'build'),
+    publicPath: 'build/',
+    filename: 'react-motion.js',
+    sourceMapFilename: 'react-motion.map',
+    library: 'ReactMotion',
     libraryTarget: 'umd'
@@ -19,3 +20,3 @@ },
       test: /\.(js|jsx)/,
-      loader: 'babel?stage=0'
+      loader: 'babel'
     }]
@@ -38,60 +39,1 @@ },
 module.exports = config;
-
-// var devtool;
-// var loaders = ['babel?stage=0'];
-// var DEV = process.env.NODE_ENV === 'development';
-
-// var plugins = [
-//   new webpack.DefinePlugin({
-//     '__DEV__': JSON.stringify(DEV)
-//   })
-// ];
-// var entry = {
-//   demo0: './demo0/index.jsx',
-//   demo1: './demo1/index.jsx',
-//   demo2: './demo2/index.jsx',
-//   demo3: './demo3/index.jsx',
-//   demo4: './demo4/index.jsx',
-// };
-
-// if (DEV) {
-//   devtool = 'eval-source-map';
-//   loaders = ['react-hot'].concat(loaders);
-//   plugins = plugins.concat([
-//     new webpack.HotModuleReplacementPlugin(),
-//     new webpack.NoErrorsPlugin()
-//   ]);
-//   entry = Object.keys(entry).reduce(function(result, key) {
-//     result[key] = [
-//       'webpack-dev-server/client?http://localhost:3000',
-//       'webpack/hot/only-dev-server',
-//       entry[key]
-//     ];
-//     return result;
-//   }, {});
-// } else {
-//   plugins = plugins.concat([
-//     new webpack.optimize.OccurenceOrderPlugin()
-//   ]);
-// }
-
-// module.exports = {
-//   devtool: devtool,
-//   entry: entry,
-//   output: {
-//     filename: './[name]/all.js',
-//     publicPath: '/',
-//     path: __dirname
-//   },
-//   module: {
-//     loaders: [{
-//       test: /\.jsx?$/,
-//       exclude: /build|node_modules/,
-//       loaders: loaders
-//     }]
-//   },
-//   resolve: {
-//     extensions: ['', '.js', '.jsx']
-//   },
-//   plugins: plugins
-// };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46772

increased by3.51%

Number of package files

15

increased by66.67%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

284

increased by4.8%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

14

increased by133.33%

Lines of code

1077

decreased by-6.18%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedreact@>=0.13.2