use class properties

Author: nkzawa

gulpfile.js

@@ -16,6 +16,7 @@ gulp.task('compile', function () {
     plugins: [
       'syntax-async-functions',
       'transform-async-to-generator',
+      "transform-class-properties",
       'transform-runtime'
     ]
   }))

lib/frame.js

@@ -1,6 +1,19 @@
 import React, { PropTypes } from 'react';
 
 export default class Frame extends React.Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.element).isRequired,
+    component: PropTypes.string,
+    delay: PropTypes.number,
+    onRender: PropTypes.func
+  };
+
+  static defaultProps = {
+    component: null,
+    delay: 0,
+    onRender: () => {}
+  };
+
   componentDidMount () {
     this.props.onRender();
   }
@@ -14,16 +27,3 @@ export default class Frame extends React.Component {
     return React.createElement(component, null, this.props.children);
   }
 }
-
-Frame.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
-  component: PropTypes.string,
-  delay: PropTypes.number,
-  onRender: PropTypes.func
-};
-
-Frame.defaultProps = {
-  component: null,
-  delay: 0,
-  onRender: () => {}
-};

lib/keyframes.js

@@ -3,6 +3,19 @@ import React, { PropTypes } from 'react';
 const noop = () => {};
 
 export default class Keyframes extends React.Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.element).isRequired,
+    component: PropTypes.string,
+    onStart: PropTypes.func,
+    onEnd: PropTypes.func
+  };
+
+  static defaultProps = {
+    component: 'span',
+    onStart: noop,
+    onEnd: noop
+  };
+
   constructor (props) {
     super(props);
     this.state = { frameNum: -1 };
@@ -68,16 +81,3 @@ export default class Keyframes extends React.Component {
     return this.props.children[frameNum];
   }
 }
-
-Keyframes.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
-  component: PropTypes.string,
-  onStart: PropTypes.func,
-  onEnd: PropTypes.func
-};
-
-Keyframes.defaultProps = {
-  component: 'span',
-  onStart: noop,
-  onEnd: noop
-};

package.json

@@ -14,6 +14,7 @@
     "babel-eslint": "5.0.0",
     "babel-plugin-syntax-async-functions": "6.5.0",
     "babel-plugin-transform-async-to-generator": "6.7.0",
+    "babel-plugin-transform-class-properties": "6.6.0",
     "babel-plugin-transform-runtime": "6.6.0",
     "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
@@ -43,9 +44,10 @@
       "react"
     ],
     "plugins": [
-      "transform-runtime",
       "syntax-async-functions",
-      "transform-async-to-generator"
+      "transform-async-to-generator",
+      "transform-class-properties",
+      "transform-runtime"
     ]
   },
   "ava": {