Set up ESLint, make it happy

client/.eslintrc

@@ -0,0 +1,22 @@
+{
+	"ecmaFeatures": {
+		"jsx": true
+	},
+	"env": {
+		"browser": true,
+		"node": true
+	},
+	"parser": "babel-eslint",
+	"plugins": [
+		"react"
+	],
+	"rules": {
+		"quotes": [2, "single"],
+		"strict": [2, "never"],
+		"eol-last": [0],
+		"new-cap": [2, { "capIsNew": false }],
+		"react/jsx-uses-react": 2,
+		"react/jsx-uses-vars": 2,
+		"react/react-in-jsx-scope": 2
+	}
+}

client/gulpfile.js

@@ -8,6 +8,7 @@ var autoprefixer = require('gulp-autoprefixer');
 var uglify = require('gulp-uglify');
 var gzip = require('gulp-gzip');
 var concat = require('gulp-concat');
+var eslint = require('gulp-eslint');
 var browserify = require('browserify');
 var source = require('vinyl-source-stream');
 var streamify = require('gulp-streamify');
@@ -74,6 +75,13 @@ function js(watch) {
     return rebundle();
 }
 
+gulp.task('lint', function() {
+    return gulp.src('src/js/**/*.{js,jsx}')
+        .pipe(eslint())
+        .pipe(eslint.format())
+        .pipe(eslint.failOnError());
+});
+
 gulp.task('fonts', function() {
     return gulp.src('src/font/*')
         .pipe(gulp.dest('dist/font'));
@@ -116,7 +124,8 @@ gulp.task('watch', ['default'], function() {
     gulp.watch('dist/**/*.{html,css,js}', ['gzip:watch', 'bindata:watch'])
     gulp.watch('src/*.html', ['html']);
     gulp.watch('src/css/*.css', ['css']);
+    gulp.watch('src/js/**/*.{js,jsx}', ['lint']);
     return js(true);
 });
 
-gulp.task('default', ['html', 'css', 'js', 'fonts', 'config', 'gzip', 'bindata']);
+gulp.task('default', ['html', 'css', 'js', 'lint', 'fonts', 'config', 'gzip', 'bindata']);

client/package.json

@@ -4,22 +4,26 @@
   "description": "",
   "main": "index.js",
   "devDependencies": {
-    "yargs": "~1.3.3",
+    "babel-eslint": "^3.1.9",
+    "babelify": "6.1.0",
+    "browserify": "10.2.0",
+    "eslint": "^0.22.1",
+    "eslint-plugin-react": "^2.4.0",
+    "gulp": "~3.8.10",
+    "gulp-autoprefixer": "2.2.0",
+    "gulp-concat": "~2.5.2",
+    "gulp-eslint": "^0.12.0",
+    "gulp-gzip": "0.0.8",
+    "gulp-if": "~1.2.5",
+    "gulp-minify-css": "1.1.1",
+    "gulp-minify-html": "1.0.2",
+    "gulp-streamify": "0.0.5",
+    "gulp-uglify": "1.2.0",
+    "reactify": "^1.1.1",
     "strictify": "~0.2.0",
     "vinyl-source-stream": "~1.0.0",
-    "gulp-if": "~1.2.5",
-    "gulp": "~3.8.10",
-    "gulp-uglify": "1.2.0",
-    "gulp-minify-css": "1.1.1",
-    "gulp-streamify": "0.0.5",
-    "gulp-minify-html": "1.0.2",
     "watchify": "3.2.1",
-    "browserify": "10.2.0",
-    "gulp-autoprefixer": "2.2.0",
-    "gulp-gzip": "0.0.8",
-    "babelify": "6.1.0",
-    "gulp-concat": "~2.5.2",
-    "reactify": "^1.1.1"
+    "yargs": "~1.3.3"
   },
   "dependencies": {
     "lodash": "3.8.0",

client/src/js/actions/channel.js

@@ -1,5 +1,4 @@
 var Reflux = require('reflux');
-var _ = require('lodash');
 
 var socket = require('../socket');
 

client/src/js/actions/message.js

@@ -1,5 +1,4 @@
 var Reflux = require('reflux');
-var _ = require('lodash');
 
 var socket = require('../socket');
 

client/src/js/actions/tab.js

@@ -1,7 +1,5 @@
 var Reflux = require('reflux');
 
-var routeActions = require('./route');
-
 var tabActions = Reflux.createActions([
 	'select'
 ]);

client/src/js/command.js

@@ -43,7 +43,7 @@ messageActions.command.listen(function(line, channel, server) {
 			break;
 
 		case 'topic':
-			var topic = channelStore.getTopic(server, channel);
+			let topic = channelStore.getTopic(server, channel);
 			if (topic) {
 				messageActions.add({
 					server: server,
@@ -72,8 +72,8 @@ messageActions.command.listen(function(line, channel, server) {
 
 		case 'msg':
 			if (params.length > 2) {
-				var dest = params[1];
-				var message = params.slice(2).join(' ');
+				let dest = params[1];
+				let message = params.slice(2).join(' ');
 
 				messageActions.send(message, dest, server);
 			}
@@ -81,7 +81,7 @@ messageActions.command.listen(function(line, channel, server) {
 
 		case 'say':
 			if (params.length > 1) {
-				var message = params.slice(1).join(' ');
+				let message = params.slice(1).join(' ');
 
 				messageActions.send(message, channel, server);
 			}

client/src/js/components/ChatTitle.jsx

@@ -70,9 +70,9 @@ var ChatTitle = React.createClass({
                         <span className="chat-topic" dangerouslySetInnerHTML={{ __html: topic }}></span>
                     </div>
                     <i className="icon-search" title="Search" onClick={searchActions.toggle}></i>
-                    <i 
-                        className="icon-logout button-leave" 
-                        title={leaveTitle} 
+                    <i
+                        className="icon-logout button-leave"
+                        title={leaveTitle}
                         onClick={this.handleLeaveClick}></i>
                 </div>
                 <div className="userlist-bar">

client/src/js/components/Connect.jsx

@@ -35,7 +35,7 @@ var Connect = React.createClass({
 			serverActions.connect(address, nick, opts);
 
 			if (channels.length > 0) {
-				channelActions.join(channels, address);				
+				channelActions.join(channels, address);
 			}
 		}
 	},

client/src/js/components/MessageBox.jsx

@@ -1,8 +1,6 @@
 var React = require('react');
 var Reflux = require('reflux');
-var _ = require('lodash');
 var Infinite = require('react-infinite');
-var Autolinker = require('autolinker');
 
 var MessageHeader = require('./MessageHeader.jsx');
 var MessageLine = require('./MessageLine.jsx');
@@ -66,7 +64,7 @@ var MessageBox = React.createClass({
 		var lines = [];
 
 		this.state.messages.forEach((message, j) => {
-			var key = message.server + dest + j;			
+			var key = message.server + dest + j;
 
 			lines.push(<MessageHeader key={key} message={message} />);
 

client/src/js/components/MessageHeader.jsx

@@ -1,5 +1,4 @@
 var React = require('react');
-var Reflux = require('reflux');
 var Autolinker = require('autolinker');
 
 var util = require('../util');

client/src/js/components/MessageInput.jsx

@@ -61,10 +61,10 @@ var MessageInput = React.createClass({
 	render() {
 		return (
 			<div className="message-input-wrap">
-				<input 
-					ref="input" 
-					className="message-input" 
-					type="text" 
+				<input
+					ref="input"
+					className="message-input"
+					type="text"
 					value={this.state.history || this.state.value}
 					onKeyDown={this.handleKey}
 					onChange={this.handleChange} />

client/src/js/components/Search.jsx

@@ -1,6 +1,5 @@
 var React = require('react');
 var Reflux = require('reflux');
-var _ = require('lodash');
 
 var util = require('../util');
 var searchStore = require('../stores/search');
@@ -42,9 +41,9 @@ var Search = React.createClass({
 
 		return (
 			<div className="search" style={style}>
-				<input 
+				<input
 					ref="input"
-					className="search-input" 
+					className="search-input"
 					type="text"
 					onChange={this.handleChange} />
 				<div className="search-results">{results}</div>

client/src/js/components/TabList.jsx

@@ -1,6 +1,5 @@
 var React = require('react');
 var Reflux = require('reflux');
-var _ = require('lodash');
 
 var TabListItem = require('./TabListItem.jsx');
 var channelStore = require('../stores/channel');
@@ -30,9 +29,9 @@ var TabList = React.createClass({
 
 		this.state.channels.forEach((server, address) => {
 			tabs.push(
-				<TabListItem 
+				<TabListItem
 					key={address}
-					server={address} 
+					server={address}
 					channel={null}
 					name={this.state.servers.getIn([address, 'name'])}>
 				</TabListItem>
@@ -41,8 +40,8 @@ var TabList = React.createClass({
 			server.forEach((channel, name) => {
 				tabs.push(
 					<TabListItem
-						key={address + name} 
-						server={address} 
+						key={address + name}
+						server={address}
 						channel={name}
 						name={name}>
 					</TabListItem>
@@ -52,9 +51,9 @@ var TabList = React.createClass({
 			if (this.state.privateChats.has(address)) {
 				this.state.privateChats.get(address).forEach(nick => {
 					tabs.push(
-						<TabListItem 
+						<TabListItem
 							key={address + nick}
-							server={address} 
+							server={address}
 							channel={nick}
 							name={nick}>
 						</TabListItem>

client/src/js/components/UserList.jsx

@@ -1,6 +1,5 @@
 var React = require('react');
 var Reflux = require('reflux');
-var _ = require('lodash');
 var Infinite = require('react-infinite');
 
 var UserListItem = require('./UserListItem.jsx');
@@ -77,7 +76,7 @@ var UserList = React.createClass({
 					<div>{users}</div>
 				</div>
 			);
-		}		
+		}
 	}
 });
 

client/src/js/components/UserListItem.jsx

@@ -7,8 +7,8 @@ var PureMixin = require('../mixins/pure');
 
 var UserListItem = React.createClass({
     mixins: [PureMixin],
-    
-	handleClick() {
+
+    handleClick() {
 		var server = selectedTabStore.getServer();
 
 		privateChatActions.open(server, this.props.user.nick);

client/src/js/irc.js

@@ -6,9 +6,12 @@ var channelActions = require('./actions/channel');
 var messageActions = require('./actions/message');
 var serverActions = require('./actions/server');
 var routeActions = require('./actions/route');
-var tabActions = require('./actions/tab');
 var searchActions = require('./actions/search');
 
+function withReason(message, reason) {
+	return message + (reason ? ' (' + reason + ')' : '');
+}
+
 socket.on('join', function(data) {
 	channelActions.addUser(data.user, data.server, data.channels[0]);
 	messageActions.inform(data.user + ' joined the channel', data.server, data.channels[0]);
@@ -90,10 +93,6 @@ socket.on('search', function(data) {
 	searchActions.searchDone(data.results);
 });
 
-serverActions.connect.listen(function(server, nick, opts) {
+serverActions.connect.listen(function(server) {
 	messageActions.inform('Connecting...', server);
-});
-
-function withReason(message, reason) {
-	return message + (reason ? ' (' + reason + ')' : '');
-}
+});

client/src/js/mixins/pure.js

@@ -12,6 +12,6 @@ module.exports = {
 		}
 
 		return !shallowEqual(this.props, nextProps) ||
-		       !shallowEqual(this.state, nextState);
+			!shallowEqual(this.state, nextState);
 	}
 };

client/src/js/socket.js

@@ -3,7 +3,7 @@ var EventEmitter = require('events').EventEmitter;
 class Socket extends EventEmitter {
 	constructor() {
 		super();
-		
+
 		this.ws = new WebSocket('ws://' + window.location.host + '/ws');
 
 		this.ws.onopen = () => this.emit('connect');
@@ -12,7 +12,7 @@ class Socket extends EventEmitter {
 			var msg = JSON.parse(e.data);
 
 			this.emit(msg.type, msg.response);
-		}
+		};
 	}
 
 	send(type, data) {

client/src/js/stores/channel.js

@@ -14,6 +14,18 @@ var User = Immutable.Record({
 	mode: ''
 });
 
+function updateRenderName(user) {
+	var name = user.nick;
+
+	if (user.mode.indexOf('o') !== -1) {
+		name = '@' + name;
+	} else if (user.mode.indexOf('v') !== -1) {
+		name = '+' + name;
+	}
+
+	return user.set('renderName', name);
+}
+
 function createUser(nick, mode) {
 	return updateRenderName(new User({
 		nick: nick,
@@ -38,18 +50,6 @@ function loadUser(nick) {
 	return createUser(nick, mode);
 }
 
-function updateRenderName(user) {
-	var name = user.nick;
-
-	if (user.mode.indexOf('o') !== -1) {
-		name = '@' + name;
-	} else if (user.mode.indexOf('v') !== -1) {
-		name = '+' + name;
-	}
-
-	return user.set('renderName', name);
-}
-
 function compareUsers(a, b) {
 	a = a.renderName.toLowerCase();
 	b = b.renderName.toLowerCase();
@@ -142,10 +142,10 @@ var channelStore = Reflux.createStore({
 		var i = channels.getIn([mode.server, mode.channel, 'users']).findIndex(u => u.nick === mode.user);
 
 		channels = channels.updateIn([mode.server, mode.channel, 'users', i], user => {
-			_.each(mode.remove, function(mode) {
-				user = user.set('mode', user.mode.replace(mode, ''));
+			_.each(mode.remove, remove => {
+				user = user.set('mode', user.mode.replace(remove, ''));
 			});
-			
+
 			user = user.set('mode', user.mode + mode.add);
 
 			return updateRenderName(user);

client/src/js/stores/inputHistory.js

@@ -1,5 +1,4 @@
 var Reflux = require('reflux');
-var _ = require('lodash');
 
 var actions = require('../actions/inputHistory');
 

client/src/js/stores/message.js

@@ -95,7 +95,7 @@ var messageStore = Reflux.createStore({
 				type: 'info'
 			}, channel || server);
 		}
-		
+
 		this.trigger(messages);
 	},
 

client/src/js/stores/messageLine.js

@@ -1,5 +1,4 @@
 var Reflux = require('reflux');
-var _ = require('lodash');
 
 var util = require('../util');
 var messageStore = require('./message');
@@ -13,14 +12,14 @@ var prev;
 
 function updateCharWidth() {
 	window.charWidth = util.stringWidth(' ', '16px Droid Sans Mono');
-	window.messageIndent = 6 * charWidth;
+	window.messageIndent = 6 * window.charWidth;
 }
 
 function wrap() {
 	var next = messageStore.getMessages(tab.server, tab.channel || tab.server);
 	if (next !== prev) {
 		prev = next;
-		messages = util.wrapMessages(next, width, charWidth, messageIndent);
+		messages = util.wrapMessages(next, width, window.charWidth, window.messageIndent);
 		return true;
 	}
 	return false;
@@ -45,7 +44,7 @@ var messageLineStore = Reflux.createStore({
 
 	setWrapWidth(w) {
 		width = w;
-		messages = util.wrapMessages(messages, width, charWidth, messageIndent);
+		messages = util.wrapMessages(messages, width, window.charWidth, window.messageIndent);
 		this.trigger(messages);
 	},
 
@@ -57,7 +56,7 @@ var messageLineStore = Reflux.createStore({
 
 	selectedTabChanged(selectedTab) {
 		tab = selectedTab;
-		
+
 		if (wrap()) {
 			this.trigger(messages);
 		}

client/src/js/stores/selectedTab.js

@@ -51,10 +51,10 @@ var selectedTabStore = Reflux.createStore({
 	},
 
 	select(server, channel = null) {
-		selectedTab = new Tab({ 
-			server, 
-			channel, 
-			name: channel || serverStore.getName(server) 
+		selectedTab = new Tab({
+			server,
+			channel,
+			name: channel || serverStore.getName(server)
 		});
 
 		history.push(selectedTab);
@@ -63,14 +63,14 @@ var selectedTabStore = Reflux.createStore({
 	},
 
 	part(channels, server) {
-		if (server === selectedTab.server && 
+		if (server === selectedTab.server &&
 			channels.indexOf(selectedTab.channel) !== -1) {
 			if (!selectPrevTab()) {
 				selectedTab = selectedTab
 					.set('channel', null)
 					.set('name', serverStore.getName(server));
 			}
-			
+
 			this.trigger(selectedTab);
 		}
 	},
@@ -83,7 +83,7 @@ var selectedTabStore = Reflux.createStore({
 					.set('channel', null)
 					.set('name', serverStore.getName(server));
 			}
-			
+
 			this.trigger(selectedTab);
 		}
 	},
@@ -112,7 +112,7 @@ var selectedTabStore = Reflux.createStore({
 	},
 
 	loadChannels(channels) {
-		_.each(channels, (channel) => {
+		_.each(channels, (channel) => {
 			if (channel.server === selectedTab.server &&
 				channel.name !== selectedTab.channel &&
 				channel.name.indexOf(selectedTab.channel) !== -1) {
@@ -156,23 +156,23 @@ var selectedTabStore = Reflux.createStore({
 	getState
 });
 
-selectedTabStore.listen(selectedTab => {
-	var channel = selectedTab.channel;
+selectedTabStore.listen(tab => {
+	var channel = tab.channel;
 
-	if (selectedTab.server) {
+	if (tab.server) {
 		if (channel) {
 			while (channel[0] === '#') {
 				channel = channel.slice(1);
 			}
-			routeActions.navigate('/' + selectedTab.server + '/' + channel);
+			routeActions.navigate('/' + tab.server + '/' + channel);
 		} else {
-			routeActions.navigate('/' + selectedTab.server);
+			routeActions.navigate('/' + tab.server);
 		}
 	} else if (serverStore.getState().size === 0) {
 		routeActions.navigate('connect');
 	}
-	
-	localStorage.selectedTab = JSON.stringify(selectedTab);
+
+	localStorage.selectedTab = JSON.stringify(tab);
 });
 
 module.exports = selectedTabStore;

client/src/js/util.js

@@ -2,15 +2,15 @@ var _ = require('lodash');
 
 exports.UUID = function() {
 	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-	    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-	    return v.toString(16);
+		var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+		return v.toString(16);
 	});
 };
 
 exports.timestamp = function(date) {
 	date = date || new Date();
-	
-	var h = _.padLeft(date.getHours(), 2, '0')
+
+	var h = _.padLeft(date.getHours(), 2, '0');
 	var m = _.padLeft(date.getMinutes(), 2, '0');
 
 	return h + ':' + m;
@@ -85,7 +85,7 @@ exports.wrapMessages = function(messages, width, charWidth, indent = 0) {
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 
-exports.stringWidth = function(str, font) {	
+exports.stringWidth = function(str, font) {
 	ctx.font = font;
 	return ctx.measureText(str).width;
 };
@@ -102,7 +102,7 @@ exports.scrollbarWidth = function() {
 
     var inner = document.createElement('div');
     inner.style.width = '100%';
-    outer.appendChild(inner);        
+    outer.appendChild(inner);
 
     var widthWithScroll = inner.offsetWidth;