[WIP] refactor to eslint airbnb, remove babel-eslint

.eslintrc

@@ -1,12 +1,12 @@
 {
-  "extends": "rackt",
-  "rules": {
-    "valid-jsdoc": 2,
-    // Disable until Flow supports let and const
-    "no-var": 0,
-    "react/jsx-uses-react": 1,
-    "react/jsx-no-undef": 2,
-    "react/wrap-multilines": 2
+  "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    },
   },
   "plugins": [
     "react"

build/es3ify.js

@@ -1,25 +1,25 @@
-var glob = require('glob')
-var fs = require('fs')
-var es3ify = require('es3ify')
+const glob = require('glob');
+const fs = require('fs');
+const es3ify = require('es3ify');
 
-glob('./@(lib|dist|es)/**/*.js', function (err, files) {
+glob('./@(lib|dist|es)/**/*.js', (err, files) => {
   if (err) {
-    throw err
+    throw err;
   }
 
-  files.forEach(function (file) {
-    fs.readFile(file, 'utf8', function (err, data) {
-      if (err) {
-        throw err
+  files.forEach((file) => {
+    fs.readFile(file, 'utf8', (error, data) => {
+      if (error) {
+        throw error;
       }
 
-      fs.writeFile(file, es3ify.transform(data), function (err) {
-        if (err) {
-          throw err
+      fs.writeFile(file, es3ify.transform(data), (writeErr) => {
+        if (writeErr) {
+          throw writeErr;
         }
 
-        console.log('es3ified ' + file) // eslint-disable-line no-console
-      })
-    })
-  })
-})
+        console.log(`es3ified ${file}`); // eslint-disable-line no-console
+      });
+    });
+  });
+});

build/use-lodash-es.js

@@ -1,10 +1,10 @@
-module.exports = function () {
+module.exports = function useLodashEs() {
   return {
     visitor: {
       ImportDeclaration(path) {
-        var source = path.node.source
-        source.value = source.value.replace(/^lodash($|\/)/, 'lodash-es$1')
-      }
-    }
-  }
-}
+        const source = path.node.source;
+        source.value = source.value.replace(/^lodash($|\/)/, 'lodash-es$1');
+      },
+    },
+  };
+};

examples/async/actions/index.js

@@ -1,64 +1,65 @@
-import fetch from 'isomorphic-fetch'
+import fetch from 'isomorphic-fetch';
 
-export const REQUEST_POSTS = 'REQUEST_POSTS'
-export const RECEIVE_POSTS = 'RECEIVE_POSTS'
-export const SELECT_REDDIT = 'SELECT_REDDIT'
-export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT'
+export const REQUEST_POSTS = 'REQUEST_POSTS';
+export const RECEIVE_POSTS = 'RECEIVE_POSTS';
+export const SELECT_REDDIT = 'SELECT_REDDIT';
+export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT';
 
 export function selectReddit(reddit) {
   return {
     type: SELECT_REDDIT,
-    reddit
-  }
+    reddit,
+  };
 }
 
 export function invalidateReddit(reddit) {
   return {
     type: INVALIDATE_REDDIT,
-    reddit
-  }
+    reddit,
+  };
 }
 
 function requestPosts(reddit) {
   return {
     type: REQUEST_POSTS,
-    reddit
-  }
+    reddit,
+  };
 }
 
 function receivePosts(reddit, json) {
   return {
     type: RECEIVE_POSTS,
-    reddit: reddit,
+    reddit,
     posts: json.data.children.map(child => child.data),
-    receivedAt: Date.now()
-  }
+    receivedAt: Date.now(),
+  };
 }
 
 function fetchPosts(reddit) {
   return dispatch => {
-    dispatch(requestPosts(reddit))
+    dispatch(requestPosts(reddit));
     return fetch(`https://www.reddit.com/r/${reddit}.json`)
       .then(response => response.json())
-      .then(json => dispatch(receivePosts(reddit, json)))
-  }
+      .then(json => dispatch(receivePosts(reddit, json)));
+  };
 }
 
 function shouldFetchPosts(state, reddit) {
-  const posts = state.postsByReddit[reddit]
+  const posts = state.postsByReddit[reddit];
   if (!posts) {
-    return true
+    return true;
   }
   if (posts.isFetching) {
-    return false
+    return false;
   }
-  return posts.didInvalidate
+  return posts.didInvalidate;
 }
 
 export function fetchPostsIfNeeded(reddit) {
   return (dispatch, getState) => {
     if (shouldFetchPosts(getState(), reddit)) {
-      return dispatch(fetchPosts(reddit))
+      return dispatch(fetchPosts(reddit));
     }
-  }
+    return null;
+  };
 }

examples/async/components/Picker.js

@@ -1,29 +1,27 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react';
 
-export default class Picker extends Component {
-  render() {
-    const { value, onChange, options } = this.props
-
-    return (
-      <span>
-        <h1>{value}</h1>
-        <select onChange={e => onChange(e.target.value)}
-                value={value}>
-          {options.map(option =>
-            <option value={option} key={option}>
-              {option}
-            </option>)
-          }
-        </select>
-      </span>
-    )
-  }
-}
+const Picker = ({ value, onChange, options }) => (
+  <span>
+    <h1>{value}</h1>
+    <select
+      onChange={e => onChange(e.target.value)}
+      value={value}
+    >
+      {options.map(option =>
+        <option value={option} key={option}>
+          {option}
+        </option>)
+      }
+    </select>
+  </span>
+);
 
 Picker.propTypes = {
   options: PropTypes.arrayOf(
     PropTypes.string.isRequired
   ).isRequired,
   value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-}
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Picker;

examples/async/components/Posts.js

@@ -1,17 +1,15 @@
-import React, { PropTypes, Component } from 'react'
+import React, { PropTypes } from 'react';
 
-export default class Posts extends Component {
-  render() {
-    return (
-      <ul>
-        {this.props.posts.map((post, i) =>
-          <li key={i}>{post.title}</li>
-        )}
-      </ul>
-    )
-  }
-}
+const Posts = ({ posts }) => (
+  <ul>
+    {posts.map((post, i) =>
+      <li key={i}>{post.title}</li>
+    )}
+  </ul>
+);
 
 Posts.propTypes = {
-  posts: PropTypes.array.isRequired
-}
+  posts: PropTypes.array.isRequired,
+};
+
+export default Posts;

examples/async/containers/App.js

@@ -1,48 +1,50 @@
-import React, { Component, PropTypes } from 'react'
-import { connect } from 'react-redux'
-import { selectReddit, fetchPostsIfNeeded, invalidateReddit } from '../actions'
-import Picker from '../components/Picker'
-import Posts from '../components/Posts'
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { selectReddit, fetchPostsIfNeeded, invalidateReddit } from '../actions';
+import Picker from '../components/Picker';
+import Posts from '../components/Posts';
 
 class App extends Component {
   constructor(props) {
-    super(props)
-    this.handleChange = this.handleChange.bind(this)
-    this.handleRefreshClick = this.handleRefreshClick.bind(this)
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleRefreshClick = this.handleRefreshClick.bind(this);
   }
 
   componentDidMount() {
-    const { dispatch, selectedReddit } = this.props
-    dispatch(fetchPostsIfNeeded(selectedReddit))
+    const { dispatch, selectedReddit } = this.props;
+    dispatch(fetchPostsIfNeeded(selectedReddit));
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.selectedReddit !== this.props.selectedReddit) {
-      const { dispatch, selectedReddit } = nextProps
-      dispatch(fetchPostsIfNeeded(selectedReddit))
+      const { dispatch, selectedReddit } = nextProps;
+      dispatch(fetchPostsIfNeeded(selectedReddit));
     }
   }
 
   handleChange(nextReddit) {
-    this.props.dispatch(selectReddit(nextReddit))
+    this.props.dispatch(selectReddit(nextReddit));
   }
 
   handleRefreshClick(e) {
-    e.preventDefault()
+    e.preventDefault();
 
-    const { dispatch, selectedReddit } = this.props
-    dispatch(invalidateReddit(selectedReddit))
-    dispatch(fetchPostsIfNeeded(selectedReddit))
+    const { dispatch, selectedReddit } = this.props;
+    dispatch(invalidateReddit(selectedReddit));
+    dispatch(fetchPostsIfNeeded(selectedReddit));
   }
 
   render() {
-    const { selectedReddit, posts, isFetching, lastUpdated } = this.props
-    const isEmpty = posts.length === 0
+    const { selectedReddit, posts, isFetching, lastUpdated } = this.props;
+    const isEmpty = posts.length === 0;
+    const message = isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>;
     return (
       <div>
         <Picker value={selectedReddit}
-                onChange={this.handleChange}
-                options={[ 'reactjs', 'frontend' ]} />
+          onChange={this.handleChange}
+          options={['reactjs', 'frontend']}
+        />
         <p>
           {lastUpdated &&
             <span>
@@ -52,19 +54,18 @@ class App extends Component {
           }
           {!isFetching &&
             <a href="#"
-               onClick={this.handleRefreshClick}>
+              onClick={this.handleRefreshClick}
+            >
               Refresh
             </a>
           }
         </p>
-        {isEmpty
-          ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
-          : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
+          {isEmpty ? message : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
               <Posts posts={posts} />
             </div>
-        }
+          }
       </div>
-    )
+    );
   }
 }
 
@@ -73,26 +74,26 @@ App.propTypes = {
   posts: PropTypes.array.isRequired,
   isFetching: PropTypes.bool.isRequired,
   lastUpdated: PropTypes.number,
-  dispatch: PropTypes.func.isRequired
-}
+  dispatch: PropTypes.func.isRequired,
+};
 
 function mapStateToProps(state) {
-  const { selectedReddit, postsByReddit } = state
+  const { selectedReddit, postsByReddit } = state;
   const {
     isFetching,
     lastUpdated,
-    items: posts
+    items: posts,
   } = postsByReddit[selectedReddit] || {
     isFetching: true,
-    items: []
-  }
+    items: [],
+  };
 
   return {
     selectedReddit,
     posts,
     isFetching,
-    lastUpdated
-  }
+    lastUpdated,
+  };
 }
 
-export default connect(mapStateToProps)(App)
+export default connect(mapStateToProps)(App);