Migrate linting from standard to XO (#53)

Author: jfmengels

.eslintrc.json

@@ -1,4 +1,7 @@
-# React Keyframes [![Build Status](https://travis-ci.org/zeit/react-keyframes.svg?branch=master)](https://travis-ci.org/zeit/react-keyframes)
+# React Keyframes
+
+[![Build Status](https://travis-ci.org/zeit/react-keyframes.svg?branch=master)](https://travis-ci.org/zeit/react-keyframes)
+[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
 
 A React component for creating frame-based animations.
 

README.md

@@ -1,30 +1,18 @@
-const gulp = require('gulp');
-const del = require('del');
-const babel = require('gulp-babel');
-const eslint = require('gulp-eslint');
-const help = require('gulp-task-listing');
+const gulp = require('gulp')
+const del = require('del')
+const babel = require('gulp-babel')
+const help = require('gulp-task-listing')
 
-gulp.task('help', help);
+gulp.task('help', help)
 
-gulp.task('compile', function () {
+gulp.task('compile', () => {
  return gulp.src('lib/**/*.js')
  .pipe(babel())
- .pipe(gulp.dest('build/lib'));
-});
+ .pipe(gulp.dest('build/lib'))
+})
 
-gulp.task('lint', function () {
- return gulp.src([
- 'gulpfile.js',
- 'test/*.js',
- 'lib/**/*.js'
- ])
- .pipe(eslint())
- .pipe(eslint.format())
- .pipe(eslint.failAfterError());
-});
+gulp.task('clean', () => {
+ return del(['build'])
+})
 
-gulp.task('clean', function () {
- return del(['build']);
-});
-
-gulp.task('default', ['lint', 'compile']);
+gulp.task('default', ['compile'])

gulpfile.js

@@ -1,10 +1,10 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react'
 
 export default class Frame extends React.Component {
  static propTypes = {
  children: PropTypes.any,
  component: PropTypes.any,
- duration: PropTypes.number,
+ duration: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
  onRender: PropTypes.func
  };
 
@@ -13,21 +13,23 @@ export default class Frame extends React.Component {
  onRender: () => {}
  };
 
- componentDidMount () {
- this.props.onRender();
+ componentDidMount() {
+ this.props.onRender()
  }
 
- componentDidUpdate () {
- this.props.onRender();
+ componentDidUpdate() {
+ this.props.onRender()
  }
 
- render () {
- const { component } = this.props;
- const props = {};
- Object.keys(this.props).forEach((k) => {
- if (Frame.propTypes[k]) return;
- props[k] = this.props[k];
- });
- return React.createElement(component, props, this.props.children);
+ render() {
+ const {component} = this.props
+ const props = {}
+ Object.keys(this.props).forEach(k => {
+ if (Frame.propTypes[k]) {
+ return
+ }
+ props[k] = this.props[k]
+ })
+ return React.createElement(component, props, this.props.children)
  }
 }

lib/frame.js

@@ -1,2 +1,2 @@
-export { default as Keyframes } from './keyframes';
-export { default as Frame } from './frame';
+export {default as Keyframes} from './keyframes'
+export {default as Frame} from './frame'

lib/index.js

@@ -1,12 +1,12 @@
-import React, { PropTypes } from 'react';
-import Frame from './frame';
+import React, {PropTypes} from 'react'
+import Frame from './frame'
 
-const noop = () => {};
+const noop = () => {}
 
 export default class Keyframes extends React.Component {
  static propTypes = {
  children: PropTypes.arrayOf(PropTypes.element).isRequired,
- component: PropTypes.any,
+ component: PropTypes.any, // eslint-disable-line react/no-unused-prop-types
  delay: PropTypes.number,
  loop: PropTypes.oneOfType([
  React.PropTypes.string,
@@ -25,92 +25,95 @@ export default class Keyframes extends React.Component {
  onEnd: noop
  };
 
- constructor (props) {
- super(props);
+ constructor(props) {
+ super(props)
  this.state = {
  frameNum: this.props.delay ? -1 : 0,
  loopNum: 0
- };
- this.timer = null;
+ }
+ this.timer = null
  }
 
- shouldComponentUpdate (nextProps, nextState) {
- const { frameNum } = nextState;
- if (this.state.frameNum === frameNum) return false;
- return 0 <= frameNum && frameNum < this.props.children.length;
+ shouldComponentUpdate(nextProps, nextState) {
+ const {frameNum} = nextState
+ if (this.state.frameNum === frameNum) {
+ return false
+ }
+ return frameNum >= 0 && frameNum < this.props.children.length
  }
 
- componentWillMount () {
- if (0 === this.state.frameNum) {
- this.props.onStart();
+ componentWillMount() {
+ if (this.state.frameNum === 0) {
+ this.props.onStart()
  }
  }
 
- componentWillUpdate () {
- if (0 === this.state.frameNum) {
- this.props.onStart();
+ componentWillUpdate() {
+ if (this.state.frameNum === 0) {
+ this.props.onStart()
  }
  }
 
- componentDidMount () {
- this.requestNextFrame();
+ componentDidMount() {
+ this.requestNextFrame()
  }
 
- componentDidUpdate () {
- this.requestNextFrame();
+ componentDidUpdate() {
+ this.requestNextFrame()
  }
 
- componentWillUnmount () {
- clearTimeout(this.timer);
+ componentWillUnmount() {
+ clearTimeout(this.timer)
  }
 
- render () {
- const frame = this.getFrame();
- if (!frame) return null;
+ render() {
+ const frame = this.getFrame()
+ if (!frame) {
+ return null
+ }
 
- const props = {};
- Object.keys(this.props).forEach((k) => {
+ const props = {}
+ Object.keys(this.props).forEach(k => {
  // don't pass props which exist only on Keyframes
  if (Keyframes.propTypes[k] && !Frame.propTypes[k]) {
- return;
+ return
  }
 
- props[k] = this.props[k];
- });
+ props[k] = this.props[k]
+ })
 
- return React.cloneElement(frame, { ...props, ...frame.props });
+ return React.cloneElement(frame, {...props, ...frame.props})
  }
 
- requestNextFrame () {
+ requestNextFrame() {
  this.waitForDelay(() => {
- const frameNum = this.state.frameNum + 1;
- const loopNum = this.state.loopNum + 1;
+ const frameNum = this.state.frameNum + 1
+ const loopNum = this.state.loopNum + 1
  if (this.props.children.length <= frameNum) {
  if (this.props.loop === true || this.props.loop === 'infinite' || loopNum < this.props.loop) {
  this.setState({
  frameNum: 0,
  loopNum
- });
- this.requestNextFrame();
- return;
- } else {
- this.props.onEnd();
- return;
+ })
+ this.requestNextFrame()
+ return
  }
+ this.props.onEnd()
+ return
  }
 
- this.setState({ frameNum });
- });
+ this.setState({frameNum})
+ })
  }
 
- waitForDelay (fn) {
- const currentFrame = this.getFrame();
- const delay = currentFrame ? currentFrame.props.duration : this.props.delay;
- clearTimeout(this.timer);
- this.timer = setTimeout(fn, delay);
+ waitForDelay(fn) {
+ const currentFrame = this.getFrame()
+ const delay = currentFrame ? currentFrame.props.duration : this.props.delay
+ clearTimeout(this.timer)
+ this.timer = setTimeout(fn, delay)
  }
 
- getFrame () {
- return this.props.children[this.state.frameNum];
+ getFrame() {
+ return this.props.children[this.state.frameNum]
  }
 }

lib/keyframes.js

@@ -11,7 +11,7 @@
  },
  "devDependencies": {
  "ava": "0.15.2",
- "babel-eslint": "6.1.2",
+ "babel-eslint": "^7.0.0",
  "babel-plugin-transform-async-to-generator": "6.8.0",
  "babel-plugin-transform-class-properties": "6.11.5",
  "babel-plugin-transform-object-rest-spread": "6.8.0",
@@ -23,24 +23,20 @@
  "babel-register": "6.14.0",
  "babel-runtime": "6.11.6",
  "del": "2.2.2",
- "eslint-config-standard": "6.0.1",
- "eslint-config-standard-jsx": "3.0.1",
- "eslint-config-standard-react": "4.0.2",
- "eslint-plugin-promise": "2.0.1",
- "eslint-plugin-react": "6.2.2",
- "eslint-plugin-standard": "2.0.0",
+ "eslint-config-xo-react": "^0.10.0",
+ "eslint-plugin-react": "^6.4.1",
  "gulp": "3.9.1",
  "gulp-babel": "6.1.2",
- "gulp-eslint": "3.0.1",
  "gulp-task-listing": "1.0.1",
  "jsdom": "9.5.0",
  "lolex": "1.5.1",
  "react": "15.3.2",
- "react-dom": "15.3.1"
+ "react-dom": "15.3.1",
+ "xo": "^0.17.0"
  },
  "scripts": {
  "gulp": "gulp",
- "test": "ava"
+ "test": "xo && ava"
  },
  "babel": {
  "presets": [
@@ -74,5 +70,16 @@
  "transform-runtime"
  ]
  }
+ },
+ "xo": {
+ "esnext": true,
+ "space": true,
+ "semicolon": false,
+ "extends": "xo-react/space",
+ "parser": "babel-eslint",
+ "envs": [
+ "browser",
+ "jsx"
+ ]
  }
 }

package.json

@@ -1,5 +1,5 @@
-import jsdom from 'jsdom';
+import jsdom from 'jsdom'
 
-global.document = jsdom.jsdom('<body></body>');
-global.window = document.defaultView;
-global.navigator = window.navigator;
+global.document = jsdom.jsdom('<body></body>')
+global.window = document.defaultView
+global.navigator = window.navigator