prep 0.8.0

.eslintrc

@@ -1,11 +1,11 @@
 {
   "extends": [ "standard", "plugin:react/recommended" ],
   "parser": "babel-eslint",
-  "plugins": [
-    "react"
-  ],
-  "ecmaFeatures": {
-    "jsx": true,
-    "experimentalObjectRestSpread": true
+  "parserOptions": {
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
   }
 }

.npmignore

@@ -2,5 +2,4 @@ src/
 public/
 test/
 webpack.config.js
-webpack.dist.js
 showcase.gif

README.md

@@ -96,6 +96,11 @@ What if you don't want the animation applied to *ALL* paths inside your SVG? Add
 
 
 ### Changelog
+**Ver 0.8.0**
+* Update dependencies
+* Migrate to Webpack 3
+* Use prop-types package
+
 **Ver 0.7.3**
 * No-op server-side
 * Do not budle/minify distribution package

lib/index.js

@@ -12,6 +12,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _utils = require('./utils.js');
 
 var _tween = require('tween.js');
@@ -400,21 +404,21 @@ var MtSvgLines = function (_React$Component) {
 }(_react2.default.Component);
 
 MtSvgLines.propTypes = {
-  className: _react.PropTypes.string, // custom CSS class (applied to svg elem)
-  animate: _react.PropTypes.oneOfType([// external animation trigger
-  _react.PropTypes.string, // - pass a unique string or true to (re)start animation
-  _react.PropTypes.number, // - pass a number to specify delay before the animation begins (ms)
-  _react.PropTypes.bool // - pass false (or omit) to draw static SVG (no animation)
+  className: _propTypes2.default.string, // custom CSS class (applied to svg elem)
+  animate: _propTypes2.default.oneOfType([// external animation trigger
+  _propTypes2.default.string, // - pass a unique string or true to (re)start animation
+  _propTypes2.default.number, // - pass a number to specify delay before the animation begins (ms)
+  _propTypes2.default.bool // - pass false (or omit) to draw static SVG (no animation)
   ]),
-  duration: _react.PropTypes.number, // total anim duration (ms)
-  stagger: _react.PropTypes.number, // delay between start times of each path (percentage)
+  duration: _propTypes2.default.number, // total anim duration (ms)
+  stagger: _propTypes2.default.number, // delay between start times of each path (percentage)
   timing: _react2.default.PropTypes.oneOf([// easing type
   'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end']),
-  playback: _react.PropTypes.string, // iteration-count || direction || fill-mode (perhaps even play-state)
-  fade: _react.PropTypes.bool, // apply a fade-in to each path
-  callback: _react.PropTypes.func, // callback fn to run when when anim completes
-  jsOnly: _react.PropTypes.bool, // apply JS animation, regardless of browser
-  children: _react.PropTypes.node
+  playback: _propTypes2.default.string, // iteration-count || direction || fill-mode (perhaps even play-state)
+  fade: _propTypes2.default.bool, // apply a fade-in to each path
+  callback: _propTypes2.default.func, // callback fn to run when when anim completes
+  jsOnly: _propTypes2.default.bool, // apply JS animation, regardless of browser
+  children: _propTypes2.default.node
 };
 MtSvgLines.defaultProps = {
   className: 'mt-svg',

package.json

@@ -38,36 +38,37 @@
     "tween.js": "^16.3.4"
   },
   "devDependencies": {
-    "autoprefixer": "^6.3.7",
+    "autoprefixer": "^7.1.2",
     "babel-cli": "^6.24.0",
     "babel-core": "^6.10.4",
     "babel-eslint": "^7.2.1",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^7.1.1",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
-    "css-loader": "^0.27.3",
-    "eslint": "^3.18.0",
-    "eslint-config-standard": "^7.1.0",
+    "css-loader": "^0.28.4",
+    "eslint": "^4.3.0",
+    "eslint-config-standard": "^10.2.1",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-node": "^4.2.1",
+    "eslint-plugin-node": "^5.1.1",
     "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-react": "^6.9.0",
-    "eslint-plugin-standard": "^2.1.1",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.10.1",
+    "eslint-plugin-react": "^7.1.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.22.0",
     "node-sass": "^4.5.1",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.6",
+    "prop-types": "^15.5.10",
     "react": "^15.2.0",
     "react-dom": "^15.2.0",
     "react-hot-loader": "^1.3.0",
     "rimraf": "^2.5.3",
     "sass-loader": "^6.0.3",
-    "style-loader": "^0.16.0",
+    "style-loader": "^0.18.2",
     "url-loader": "^0.5.7",
-    "webpack": "^1.14.0",
-    "webpack-dev-server": "^1.16.3",
-    "webpack-merge": "^1.1.2"
+    "webpack": "^3.4.1",
+    "webpack-dev-server": "^2.6.1",
+    "webpack-merge": "^4.1.0"
   }
 }

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    'autoprefixer': { browsers: ['last 2 versions'] }
+  }
+}

public/css/d6cf0349c15323791a0a.min.css

@@ -0,0 +1,7 @@
+@import url(http://fonts.googleapis.com/css?family=Lato:200,300,700);body {
+  font: 200 normal 16px 'Lato', sans-serif;
+  background-color: #FFF; }
+
+@media (max-width: 380px) {
+  .column, .column-short {
+    width: 100% !important; } }

public/index.html

@@ -7,8 +7,8 @@
     <title>Mt React Component</title>
     <meta name="description" content="Mt React Component" />
     <meta name="author" content="moarwick" />
-  <link href="css/2f6dc120081c95e3636f.min.css" rel="stylesheet"></head>
+  <link href="css/d6cf0349c15323791a0a.min.css" rel="stylesheet"></head>
   <body>
     <div id="component"></div>
-  <script type="text/javascript" src="2f6dc120081c95e3636f.min.js"></script></body>
+  <script type="text/javascript" src="d6cf0349c15323791a0a.min.js"></script></body>
 </html>

src/demos/components/DemoPage.js

@@ -212,7 +212,7 @@ const styles = {
   },
   row: {
     borderTop: '1px solid #888',
-    width: '100%',   // for IE
+    width: '100%', // for IE
     paddingTop: 20
   },
   ieMessage: {

src/demos/index.js

@@ -1,9 +1,9 @@
-require('./stylesheet.scss')
-
 import React from 'react'
 import ReactDOM from 'react-dom'
 import DemoPage from './components/DemoPage'
 
+require('./stylesheet.scss')
+
 ReactDOM.render((
   <DemoPage />
 ), document.getElementById('component'))

src/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import { shortUID, clamp, trimFloat, isMsBrowser } from './utils.js'
 import TWEEN from 'tween.js'
@@ -9,21 +10,21 @@ const EASING = {
   'ease-out': TWEEN.Easing.Cubic.Out,
   'ease-in-out': TWEEN.Easing.Cubic.InOut,
   'linear': TWEEN.Easing.Linear.None,
-  'step-start': TWEEN.Easing.Bounce.In,     // not quite the same thing ;)
-  'step-end': TWEEN.Easing.Bounce.Out       // not quite the same thing ;)
+  'step-start': TWEEN.Easing.Bounce.In, // not quite the same thing ;)
+  'step-end': TWEEN.Easing.Bounce.Out // not quite the same thing ;)
 }
 
 export default class MtSvgLines extends React.Component {
   static propTypes = {
-    className: PropTypes.string,            // custom CSS class (applied to svg elem)
-    animate: PropTypes.oneOfType([          // external animation trigger
-      PropTypes.string,                     // - pass a unique string or true to (re)start animation
-      PropTypes.number,                     // - pass a number to specify delay before the animation begins (ms)
-      PropTypes.bool                        // - pass false (or omit) to draw static SVG (no animation)
+    className: PropTypes.string, // custom CSS class (applied to svg elem)
+    animate: PropTypes.oneOfType([ // external animation trigger
+      PropTypes.string, // - pass a unique string or true to (re)start animation
+      PropTypes.number, // - pass a number to specify delay before the animation begins (ms)
+      PropTypes.bool // - pass false (or omit) to draw static SVG (no animation)
     ]),
-    duration: PropTypes.number,             // total anim duration (ms)
-    stagger: PropTypes.number,              // delay between start times of each path (percentage)
-    timing: React.PropTypes.oneOf([         // easing type
+    duration: PropTypes.number, // total anim duration (ms)
+    stagger: PropTypes.number, // delay between start times of each path (percentage)
+    timing: React.PropTypes.oneOf([ // easing type
       'ease',
       'ease-in',
       'ease-out',
@@ -32,10 +33,10 @@ export default class MtSvgLines extends React.Component {
       'step-start',
       'step-end'
     ]),
-    playback: PropTypes.string,             // iteration-count || direction || fill-mode (perhaps even play-state)
-    fade: PropTypes.bool,                   // apply a fade-in to each path
-    callback: PropTypes.func,               // callback fn to run when when anim completes
-    jsOnly: PropTypes.bool,                 // apply JS animation, regardless of browser
+    playback: PropTypes.string, // iteration-count || direction || fill-mode (perhaps even play-state)
+    fade: PropTypes.bool, // apply a fade-in to each path
+    callback: PropTypes.func, // callback fn to run when when anim completes
+    jsOnly: PropTypes.bool, // apply JS animation, regardless of browser
     children: PropTypes.node
   };
 
@@ -56,16 +57,16 @@ export default class MtSvgLines extends React.Component {
     super(props)
 
     this.state = {
-      classKey: `mt-${shortUID()}`,         // unique class name for the wrapper, an internal "trigger" (re-gen each time anim is to run)
-      css: '',                              // generated CSS
-      tweenElapsed: 0,                      // tween duration so far (ms)
-      tweenProgress: 0                      // tween completion (pct)
+      classKey: `mt-${shortUID()}`, // unique class name for the wrapper, an internal "trigger" (re-gen each time anim is to run)
+      css: '', // generated CSS
+      tweenElapsed: 0, // tween duration so far (ms)
+      tweenProgress: 0 // tween completion (pct)
     }
 
     this._lastAnimate = ''
     this._lastClassKey = ''
 
-    this._animStart = 0                     // anim start timestamp
+    this._animStart = 0 // anim start timestamp
 
     this._pathElems = []
     this._pathDataFrom = {}
@@ -134,7 +135,7 @@ export default class MtSvgLines extends React.Component {
       this._lastClassKey = classKey
 
       // parse out vars common for both modes
-      const startDelay = typeof animate === 'number' ? animate : 0   // if numeric, treat as delay (ms)
+      const startDelay = typeof animate === 'number' ? animate : 0 // if numeric, treat as delay (ms)
       let numOfRepeats = parseInt(playback, 10) || 0
 
       /* ----- JS MODE ----- */
@@ -184,7 +185,7 @@ export default class MtSvgLines extends React.Component {
         const pathQty = pathLenghts.length || 1
 
         // 2) calc all timing values
-        const staggerMult = clamp(stagger, 0, 100) / 100        // convert pct to 0-1
+        const staggerMult = clamp(stagger, 0, 100) / 100 // convert pct to 0-1
         const pathStaggerDelay = (stagger > 0 ? duration / pathQty * staggerMult : 0)
         const pathDrawDuration = (stagger > 0 ? duration - ((pathStaggerDelay * (pathQty - 1)) * (2 - staggerMult)) : duration)
 
@@ -221,7 +222,7 @@ export default class MtSvgLines extends React.Component {
    */
   _onTweenUpdate = () => {
     this._setStrokeDashoffset(this._pathElems, this._tweenData)
-    this._animate()  // go again..
+    this._animate() // go again..
   }
 
   /*