Run everything through the JSX transpiler with harmony=true

Use ES6 concise mixins
Use ES6 destructuring
Use ES6 arrow functions

Author: insin

gulpfile.js

@@ -14,8 +14,7 @@ var template = require('gulp-template')
 var uglify = require('gulp-uglify')
 
 var testFiles = ['./src/**/__tests__/*.js', './src/**/__mocks__/*.js']
-var jsFiles = ['./src/**/*.js'].concat(testFiles.map(function(p) { return '!' + p }))
-var jsxFiles = jsFiles[0] + 'x'
+var jsFiles = ['./src/**/*.js', './src/**/*.jsx'].concat(testFiles.map(function(p) { return '!' + p }))
 var buildFiles = './build/modules/**/*.js'
 
 var jsExt = (gutil.env.production ? 'min.js' : 'js')
@@ -29,17 +28,13 @@ gulp.task('clean-modules', function(cb) {
   del('./build/modules/**', cb)
 })
 
-/** Copy non-jsx JavaScript to /build/modules */
-gulp.task('copy-js', ['clean-modules'], function() {
-  return gulp.src(jsFiles)
-    .pipe(gulp.dest('./build/modules'))
-})
-
 /** Transpile JSX to plain old JavaScript and copy to /build/modules */
-gulp.task('transpile-jsx', ['clean-modules'], function() {
-  return gulp.src(jsxFiles)
+gulp.task('transpile-js', ['clean-modules'], function() {
+  return gulp.src(jsFiles)
     .pipe(plumber())
-    .pipe(react())
+    .pipe(react({
+      harmony: true
+    }))
     .pipe(gulp.dest('./build/modules'))
 })
 
@@ -64,7 +59,7 @@ gulp.task('build-deps', function() {
 })
 
 /** Lint everything in /build/modules */
-gulp.task('lint', ['copy-js', 'transpile-jsx'], function() {
+gulp.task('lint', ['transpile-js'], function() {
   return gulp.src(buildFiles)
     .pipe(jshint('./.jshintrc'))
     .pipe(jshint.reporter('jshint-stylish'))
@@ -162,7 +157,7 @@ gulp.task('dist', ['dist-copy'], function() {
  * against everything else which is already in /dist
  */
 gulp.task('watch', ['copy-app', 'lint-tests'], function() {
-  gulp.watch([jsFiles, jsxFiles], ['copy-app'])
+  gulp.watch(jsFiles, ['copy-app'])
   gulp.watch(testFiles, ['lint-tests'])
   gulp.watch('./public/**/*.css', ['dist-css'])
 })

src/Comment.jsx

@@ -24,27 +24,27 @@ var Comment = React.createClass({
   , threadStore: React.PropTypes.instanceOf(CommentThreadStore).isRequired
   },
 
-  getDefaultProps: function() {
+  getDefaultProps() {
     return {
       loadingSpinner: false
     }
   },
 
-  getInitialState: function() {
+  getInitialState() {
     return {
       comment: {}
     }
   },
 
-  componentWillMount: function() {
+  componentWillMount() {
     this.bindFirebaseRef()
   },
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this.clearDelayTimeout()
   },
 
-  componentDidUpdate: function(prevProps, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     if (!prevState.comment.id) {
       // Register a newly-loaded comment with the thread store
       if (this.state.comment.id) {
@@ -78,7 +78,7 @@ var Comment = React.createClass({
     }
   },
 
-  bindFirebaseRef: function() {
+  bindFirebaseRef() {
     this.bindAsObject(HNService.itemRef(this.props.id), 'comment', this.handleFirebaseRefCancelled)
     if (this.timeout) {
       this.timeout = null
@@ -90,7 +90,7 @@ var Comment = React.createClass({
    * its author using the delay setting, which is measured in minutes - try
    * again in 30 seconds.
    */
-  handleFirebaseRefCancelled: function(e) {
+  handleFirebaseRefCancelled(e) {
     if ("production" !== process.env.NODE_ENV) {
       console.error('Firebase ref for comment ' + this.props.id + ' was cancelled: ' + e.message)
     }
@@ -102,19 +102,19 @@ var Comment = React.createClass({
     }
   },
 
-  clearDelayTimeout: function() {
+  clearDelayTimeout() {
     if (this.timeout) {
       clearTimeout(this.timeout)
       this.timeout = null
     }
   },
 
-  toggleCollapse: function(e) {
+  toggleCollapse(e) {
     e.preventDefault()
     this.props.threadStore.toggleCollapse(this.state.comment.id)
   },
 
-  render: function() {
+  render() {
     var comment = this.state.comment
     var props = this.props
     // Render a placeholder while we're waiting for the comment to load

src/DisplayComment.jsx

@@ -18,18 +18,18 @@ var DisplayComment = React.createClass({
     comment: React.PropTypes.object.isRequired
   },
 
-  getInitialState: function() {
+  getInitialState() {
     return {
       op: {}
     , parent: {type: 'comment'}
     }
   },
 
-  componentWillMount: function() {
+  componentWillMount() {
     this.fetchAncestors(this.props.comment)
   },
 
-  render: function() {
+  render() {
     if (this.props.comment.deleted) { return null }
     if (this.props.comment.dead && !SettingsStore.showDead) { return null }
 

src/DisplayListItem.jsx

@@ -18,11 +18,11 @@ var DisplayListItem = React.createClass({
     item: React.PropTypes.object.isRequired
   },
 
-  componentWillMount: function() {
+  componentWillMount() {
     this.threadState = StoryCommentThreadStore.loadState(this.props.item.id)
   },
 
-  render: function() {
+  render() {
     return this.renderListItem(this.props.item, this.threadState)
   }
 })

src/Item.jsx

@@ -26,13 +26,13 @@ function timeUnitsAgo(_moment) {
 var Item = React.createClass({
   mixins: [ItemMixin, ReactFireMixin],
 
-  getInitialState: function() {
+  getInitialState() {
     return {
       item: ItemStore.getCachedStory(Number(this.props.params.id)) || {}
     }
   },
 
-  componentWillMount: function() {
+  componentWillMount() {
     this.bindAsObject(HNService.itemRef(this.props.params.id), 'item')
     if (this.state.item.id) {
       this.threadStore = new StoryCommentThreadStore(this.state.item, this.handleCommentsChanged, {cached: true})
@@ -41,12 +41,12 @@ var Item = React.createClass({
     window.addEventListener('beforeunload', this.handleBeforeUnload)
   },
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this.threadStore.dispose()
     window.removeEventListener('beforeunload', this.handleBeforeUnload)
   },
 
-  componentWillReceiveProps: function(nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (this.props.params.id != nextProps.params.id) {
       // Tear it down...
       this.threadStore.dispose()
@@ -63,14 +63,14 @@ var Item = React.createClass({
     }
   },
 
-  componentWillUpdate: function(nextProps, nextState) {
+  componentWillUpdate(nextProps, nextState) {
     // Update the title when the item has loaded.
     if (!this.state.item.id && nextState.item.id) {
       setTitle(nextState.item.title)
     }
   },
 
-  componentDidUpdate: function(prevProps, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     // If the state item id changed, an initial or new item must have loaded
     if (prevState.item.id != this.state.item.id) {
       if (!this.threadStore || this.threadStore.itemId != this.state.item.id) {
@@ -96,26 +96,26 @@ var Item = React.createClass({
    * Ensure the last visit time and comment details get stored for this item if
    * the user refreshes or otherwise navigates off the page.
    */
-  handleBeforeUnload: function() {
+  handleBeforeUnload() {
     this.threadStore.dispose()
   },
 
-  handleCommentsChanged: function(payload) {
+  handleCommentsChanged(payload) {
     this.forceUpdate()
   },
 
-  autoCollapse: function(e) {
+  autoCollapse(e) {
     e.preventDefault()
     this.threadStore.collapseThreadsWithoutNewComments()
   },
 
-  markAsRead: function(e) {
+  markAsRead(e) {
     e.preventDefault()
     this.threadStore.markAsRead()
     this.forceUpdate()
   },
 
-  render: function() {
+  render() {
     var state = this.state
     var item = state.item
     var threadStore = this.threadStore

src/Paginator.jsx

@@ -1,12 +1,10 @@
 'use strict';
 
 var React = require('react')
-var Router = require('react-router')
-
-var Link = Router.Link
+var {Link} = require('react-router')
 
 var Paginator = React.createClass({
-  render: function() {
+  render() {
     if (this.props.page == 1 && !this.props.hasNext) { return null }
     return <div className="Paginator">
       {this.props.page > 1 && <span className="Paginator__prev">

src/PermalinkedComment.jsx

@@ -2,7 +2,7 @@
 
 var React = require('react')
 var ReactFireMixin = require('reactfire')
-var Router = require('react-router')
+var {Navigation} = require('react-router')
 
 var CommentThreadStore = require('./stores/CommentThreadStore')
 var HNService = require('./services/HNService')
@@ -15,33 +15,31 @@ var CommentMixin = require('./mixins/CommentMixin')
 var cx = require('./utils/buildClassName')
 var setTitle = require('./utils/setTitle')
 
-var Navigation = Router.Navigation
-
 var PermalinkedComment = React.createClass({
   mixins: [CommentMixin, ReactFireMixin, Navigation],
 
-  getDefaultProps: function() {
+  getDefaultProps() {
     return {
       level: 0
     }
   },
 
-  getInitialState: function() {
+  getInitialState() {
     return {
       comment: UpdatesStore.getComment(this.props.params.id) || {}
     , parent: {type: 'comment'}
     , op: {}
     }
   },
 
-  componentWillMount: function() {
+  componentWillMount() {
     this.bindAsObject(HNService.itemRef(this.props.params.id), 'comment')
     if (this.state.comment.id) {
       this.commentLoaded(this.state.comment)
     }
   },
 
-  componentWillReceiveProps: function(nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (nextProps.params.id != this.props.params.id) {
       var comment = UpdatesStore.getComment(nextProps.params.id)
       if (comment) {
@@ -53,7 +51,7 @@ var PermalinkedComment = React.createClass({
     }
   },
 
-  componentWillUpdate: function(nextProps, nextState) {
+  componentWillUpdate(nextProps, nextState) {
     if (this.state.comment.id != nextState.comment.id) {
       if (!nextState.comment.deleted) {
         // Redirect to the appropriate route if a Comment "parent" link had a
@@ -69,15 +67,15 @@ var PermalinkedComment = React.createClass({
     }
   },
 
-  commentLoaded: function(comment) {
+  commentLoaded(comment) {
     this.setTitle(comment)
     if (!comment.deleted) {
       this.threadStore = new CommentThreadStore(comment, this.handleCommentsChanged)
       this.fetchAncestors(comment)
     }
   },
 
-  setTitle: function(comment) {
+  setTitle(comment) {
     if (comment.deleted) {
       return setTitle('Deleted comment')
     }
@@ -88,14 +86,14 @@ var PermalinkedComment = React.createClass({
     setTitle(title)
   },
 
-  handleCommentsChanged: function(payload) {
+  handleCommentsChanged(payload) {
     // We're only interested in re-rendering to update collapsed display
     if (payload.type == 'collapse') {
       this.forceUpdate()
     }
   },
 
-  render: function() {
+  render() {
     var comment = this.state.comment
     // Render a placeholder while we're waiting for the comment to load
     if (!comment.id) { return this.renderCommentLoading(comment) }

src/PollOption.jsx

@@ -12,15 +12,15 @@ var pluralise = require('./utils/pluralise')
 var PollOption = React.createClass({
   mixins: [ReactFireMixin],
 
-  getInitialState: function() {
+  getInitialState() {
     return {pollopt: {}}
   },
 
-  componentWillMount: function() {
+  componentWillMount() {
     this.bindAsObject(HNService.itemRef(this.props.id), 'pollopt')
   },
 
-  render: function() {
+  render() {
     var pollopt = this.state.pollopt
     if (!pollopt.id) { return <div className="PollOption PollOption--loading"><Spinner size="20"/></div> }
     return <div className="PollOption">

src/Settings.jsx

@@ -5,17 +5,17 @@ var React = require('react')
 var SettingsStore = require('./stores/SettingsStore')
 
 var Settings = React.createClass({
-  componentDidMount: function() {
+  componentDidMount() {
     this.refs.container.getDOMNode().focus()
   },
 
-  onChange: function(e) {
+  onChange(e) {
     SettingsStore[e.target.name] = e.target.checked
     this.forceUpdate()
     SettingsStore.save()
   },
 
-  render: function() {
+  render() {
     return <div ref="container" className="Settings" tabIndex="-1">
       <form onChange={this.onChange}>
         <div className="Settings__setting Settings__setting--checkbox">