Use ES6 import/export for modules

.eslintrc.json

@@ -3,7 +3,11 @@
     "parserOptions": {
         "ecmaVersion": 2017
     },
+    "settings": {
+        "import/resolver": "node"
+    },
     "rules": {
+        "import/no-commonjs": 2,
         "indent": [2, 2, {"SwitchCase": 0}],
         "no-console": 0,
         "no-process-env": 0,

scripts/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "import/no-commonjs": 0
+    }
+}

src/browser/components/AutoSaveIndicator.jsx

@@ -1,6 +1,6 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const {Alert} = require('react-bootstrap');
+import {Alert} from 'react-bootstrap';
 
 const baseClassName = 'AutoSaveIndicator';
 const leaveClassName = `${baseClassName}-Leave`;
@@ -25,7 +25,7 @@ function getClassNameAndMessage(savingState, errorMessage) {
   }
 }
 
-function AutoSaveIndicator(props) {
+export default function AutoSaveIndicator(props) {
   const {savingState, errorMessage, ...rest} = props;
   const {className, message} = getClassNameAndMessage(savingState, errorMessage);
   return (
@@ -50,5 +50,3 @@ Object.assign(AutoSaveIndicator, {
   SAVING_STATE_ERROR,
   SAVING_STATE_DONE,
 });
-
-module.exports = AutoSaveIndicator;

src/browser/components/DestructiveConfirmModal.jsx

@@ -1,8 +1,8 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const {Button, Modal} = require('react-bootstrap');
+import {Button, Modal} from 'react-bootstrap';
 
-function DestructiveConfirmationModal(props) {
+export default function DestructiveConfirmationModal(props) {
   const {
     title,
     body,
@@ -39,5 +39,3 @@ DestructiveConfirmationModal.propTypes = {
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
 };
-
-module.exports = DestructiveConfirmationModal;

src/browser/components/ErrorView.jsx

@@ -1,11 +1,11 @@
 // ErrorCode: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
 
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const {Grid, Row, Col} = require('react-bootstrap');
+import {Grid, Row, Col} from 'react-bootstrap';
-const {shell, remote} = require('electron');
+import {shell, remote} from 'electron';
 
-function ErrorView(props) {
+export default function ErrorView(props) {
   const classNames = ['container', 'ErrorView'];
   if (!props.active) {
     classNames.push('ErrorView-hidden');
@@ -82,5 +82,3 @@ ErrorView.propTypes = {
   active: PropTypes.bool,
   withTab: PropTypes.bool,
 };
-
-module.exports = ErrorView;

src/browser/components/HoveringURL.jsx

@@ -1,7 +1,7 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
 
-function HoveringURL(props) {
+export default function HoveringURL(props) {
   return (
     <div className='HoveringURL HoveringURL-left'>
       {props.targetURL}
@@ -12,5 +12,3 @@ function HoveringURL(props) {
 HoveringURL.propTypes = {
   targetURL: PropTypes.string,
 };
-
-module.exports = HoveringURL;

src/browser/components/LoginModal.jsx

@@ -1,9 +1,9 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const ReactDOM = require('react-dom');
+import {findDOMNode} from 'react-dom';
-const {Button, Col, ControlLabel, Form, FormGroup, FormControl, Modal} = require('react-bootstrap');
+import {Button, Col, ControlLabel, Form, FormGroup, FormControl, Modal} from 'react-bootstrap';
 
-class LoginModal extends React.Component {
+export default class LoginModal extends React.Component {
   constructor(props) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -11,8 +11,8 @@ class LoginModal extends React.Component {
 
   handleSubmit(event) {
     event.preventDefault();
-    const usernameNode = ReactDOM.findDOMNode(this.refs.username);
+    const usernameNode = findDOMNode(this.refs.username);
-    const passwordNode = ReactDOM.findDOMNode(this.refs.password);
+    const passwordNode = findDOMNode(this.refs.password);
     this.props.onLogin(this.props.request, usernameNode.value, passwordNode.value);
     usernameNode.value = '';
     passwordNode.value = '';
@@ -94,5 +94,3 @@ LoginModal.propTypes = {
   request: PropTypes.object,
   show: PropTypes.bool,
 };
-
-module.exports = LoginModal;

src/browser/components/MainPage.jsx

@@ -1,22 +1,22 @@
-const url = require('url');
+import url from 'url';
 
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const createReactClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const {CSSTransition, TransitionGroup} = require('react-transition-group');
+import {CSSTransition, TransitionGroup} from 'react-transition-group';
-const {Grid, Row} = require('react-bootstrap');
+import {Grid, Row} from 'react-bootstrap';
 
-const {ipcRenderer, remote} = require('electron');
+import {ipcRenderer, remote} from 'electron';
 
-const Utils = require('../../utils/util.js');
+import Utils from '../../utils/util.js';
 
-const LoginModal = require('./LoginModal.jsx');
+import LoginModal from './LoginModal.jsx';
-const MattermostView = require('./MattermostView.jsx');
+import MattermostView from './MattermostView.jsx';
-const TabBar = require('./TabBar.jsx');
+import TabBar from './TabBar.jsx';
-const HoveringURL = require('./HoveringURL.jsx');
+import HoveringURL from './HoveringURL.jsx';
-const PermissionRequestDialog = require('./PermissionRequestDialog.jsx');
+import PermissionRequestDialog from './PermissionRequestDialog.jsx';
 
-const NewTeamModal = require('./NewTeamModal.jsx');
+import NewTeamModal from './NewTeamModal.jsx';
 
 const MainPage = createReactClass({
   propTypes: {
@@ -386,4 +386,4 @@ const MainPage = createReactClass({
   },
 });
 
-module.exports = MainPage;
+export default MainPage;

src/browser/components/MattermostView.jsx

@@ -1,18 +1,18 @@
 /* eslint-disable react/no-set-state */
 // setState() is necessary for this component
-const url = require('url');
+import url from 'url';
 
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const createReactClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const {findDOMNode} = require('react-dom');
+import {findDOMNode} from 'react-dom';
-const {ipcRenderer, remote, shell} = require('electron');
+import {ipcRenderer, remote, shell} from 'electron';
 
-const contextMenu = require('../js/contextMenu');
+import contextMenu from '../js/contextMenu';
-const {protocols} = require('../../../electron-builder.json');
+import {protocols} from '../../../electron-builder.json';
 const scheme = protocols[0].schemes[0];
 
-const ErrorView = require('./ErrorView.jsx');
+import ErrorView from './ErrorView.jsx';
 
 const preloadJS = `file://${remote.app.getAppPath()}/browser/webview/mattermost_bundle.js`;
 
@@ -312,4 +312,4 @@ const MattermostView = createReactClass({
   },
 });
 
-module.exports = MattermostView;
+export default MattermostView;

src/browser/components/NewTeamModal.jsx

@@ -1,8 +1,8 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} = require('react-bootstrap');
+import {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} from 'react-bootstrap';
 
-class NewTeamModal extends React.Component {
+export default class NewTeamModal extends React.Component {
   constructor() {
     super();
 
@@ -201,5 +201,3 @@ NewTeamModal.propTypes = {
   editMode: PropTypes.bool,
   show: PropTypes.bool,
 };
-
-module.exports = NewTeamModal;

src/browser/components/PermissionRequestDialog.jsx

@@ -1,6 +1,6 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const {Button, Glyphicon, Popover} = require('react-bootstrap');
+import {Button, Glyphicon, Popover} from 'react-bootstrap';
 
 const PERMISSIONS = {
   media: {
@@ -49,7 +49,7 @@ function description(permission) {
   return `Be granted "${permission}" permission`;
 }
 
-function PermissionRequestDialog(props) {
+export default function PermissionRequestDialog(props) {
   const {origin, permission, onClickAllow, onClickBlock, onClickClose, ...reft} = props;
   return (
     <Popover
@@ -85,5 +85,3 @@ PermissionRequestDialog.propTypes = {
   onClickBlock: PropTypes.func,
   onClickClose: PropTypes.func,
 };
-
-module.exports = PermissionRequestDialog;

src/browser/components/RemoveServerModal.jsx

@@ -1,10 +1,10 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const {Modal} = require('react-bootstrap');
+import {Modal} from 'react-bootstrap';
 
-const DestructiveConfirmationModal = require('./DestructiveConfirmModal.jsx');
+import DestructiveConfirmationModal from './DestructiveConfirmModal.jsx';
 
-function RemoveServerModal(props) {
+export default function RemoveServerModal(props) {
   const {serverName, ...rest} = props;
   return (
     <DestructiveConfirmationModal
@@ -30,5 +30,3 @@ function RemoveServerModal(props) {
 RemoveServerModal.propTypes = {
   serverName: PropTypes.string.isRequired,
 };
-
-module.exports = RemoveServerModal;

src/browser/components/SettingsPage.jsx

@@ -1,18 +1,18 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const createReactClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const ReactDOM = require('react-dom');
+import ReactDOM from 'react-dom';
-const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');
+import {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} from 'react-bootstrap';
 
-const {ipcRenderer, remote} = require('electron');
+import {ipcRenderer, remote} from 'electron';
-const AutoLaunch = require('auto-launch');
+import AutoLaunch from 'auto-launch';
-const {debounce} = require('underscore');
+import {debounce} from 'underscore';
 
-const buildConfig = require('../../common/config/buildConfig');
+import buildConfig from '../../common/config/buildConfig';
-const settings = require('../../common/settings');
+import settings from '../../common/settings';
 
-const TeamList = require('./TeamList.jsx');
+import TeamList from './TeamList.jsx';
-const AutoSaveIndicator = require('./AutoSaveIndicator.jsx');
+import AutoSaveIndicator from './AutoSaveIndicator.jsx';
 
 const appLauncher = new AutoLaunch({
   name: remote.app.getName(),
@@ -625,4 +625,4 @@ const SettingsPage = createReactClass({
   },
 });
 
-module.exports = SettingsPage;
+export default SettingsPage;

src/browser/components/TabBar.jsx

@@ -1,10 +1,10 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const {Glyphicon, Nav, NavItem, Overlay} = require('react-bootstrap');
+import {Glyphicon, Nav, NavItem, Overlay} from 'react-bootstrap';
 
-const PermissionRequestDialog = require('./PermissionRequestDialog.jsx');
+import PermissionRequestDialog from './PermissionRequestDialog.jsx';
 
-class TabBar extends React.Component { // need "this"
+export default class TabBar extends React.Component { // need "this"
   render() {
     const tabs = this.props.teams.map((team, index) => {
       let unreadCount = 0;
@@ -118,5 +118,3 @@ TabBar.propTypes = {
   onAddServer: PropTypes.func,
   onClickPermissionDialog: PropTypes.func,
 };
-
-module.exports = TabBar;

src/browser/components/TeamList.jsx

@@ -1,11 +1,11 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
-const createReactClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const {ListGroup} = require('react-bootstrap');
+import {ListGroup} from 'react-bootstrap';
 
-const TeamListItem = require('./TeamListItem.jsx');
+import TeamListItem from './TeamListItem.jsx';
-const NewTeamModal = require('./NewTeamModal.jsx');
+import NewTeamModal from './NewTeamModal.jsx';
-const RemoveServerModal = require('./RemoveServerModal.jsx');
+import RemoveServerModal from './RemoveServerModal.jsx';
 
 const TeamList = createReactClass({
   propTypes: {
@@ -171,4 +171,4 @@ const TeamList = createReactClass({
   },
 });
 
-module.exports = TeamList;
+export default TeamList;

src/browser/components/TeamListItem.jsx

@@ -1,7 +1,7 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
 
-class TeamListItem extends React.Component {
+export default class TeamListItem extends React.Component {
   constructor(props) {
     super(props);
     this.handleTeamRemove = this.handleTeamRemove.bind(this);
@@ -49,5 +49,3 @@ TeamListItem.propTypes = {
   onTeamClick: PropTypes.func,
   url: PropTypes.string,
 };
-
-module.exports = TeamListItem;

src/browser/config/AppConfig.js

@@ -1,6 +1,6 @@
-const {remote} = require('electron');
+import {remote} from 'electron';
 
-const settings = require('../../common/settings');
+import settings from '../../common/settings';
 
 class AppConfig {
   constructor(file) {
@@ -20,4 +20,4 @@ class AppConfig {
   }
 }
 
-module.exports = new AppConfig(remote.app.getPath('userData') + '/config.json');
+export default new AppConfig(remote.app.getPath('userData') + '/config.json');

src/browser/index.jsx

@@ -1,24 +1,24 @@
 'use strict';
 
-require('./css/index.css');
+import './css/index.css';
 
 window.eval = global.eval = () => { // eslint-disable-line no-multi-assign, no-eval
   throw new Error('Sorry, Mattermost does not support window.eval() for security reasons.');
 };
 
-const url = require('url');
+import url from 'url';
 
-const React = require('react');
+import React from 'react';
-const ReactDOM = require('react-dom');
+import ReactDOM from 'react-dom';
-const {remote, ipcRenderer} = require('electron');
+import {remote, ipcRenderer} from 'electron';
 
-const buildConfig = require('../common/config/buildConfig');
+import buildConfig from '../common/config/buildConfig';
-const settings = require('../common/settings');
+import settings from '../common/settings';
-const utils = require('../utils/util');
+import utils from '../utils/util';
 
-const MainPage = require('./components/MainPage.jsx');
+import MainPage from './components/MainPage.jsx';
-const AppConfig = require('./config/AppConfig.js');
+import AppConfig from './config/AppConfig.js';
-const badge = require('./js/badge');
+import {createDataURL as createBadgeDataURL} from './js/badge';
 
 const teams = settings.mergeDefaultTeams(AppConfig.data.teams);
 
@@ -41,10 +41,10 @@ function showUnreadBadgeWindows(unreadCount, mentionCount) {
   }
 
   if (mentionCount > 0) {
-    const dataURL = badge.createDataURL(mentionCount.toString());
+    const dataURL = createBadgeDataURL(mentionCount.toString());
     sendBadge(dataURL, 'You have unread mentions (' + mentionCount + ')');
   } else if (unreadCount > 0 && AppConfig.data.showUnreadBadge) {
-    const dataURL = badge.createDataURL('•');
+    const dataURL = createBadgeDataURL('•');
     sendBadge(dataURL, 'You have unread channels (' + unreadCount + ')');
   } else {
     sendBadge(null, 'You have no unread messages');

src/browser/js/badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function createDataURL(text) {
+export function createDataURL(text) {
   const scale = 2; // should rely display dpi
   const size = 16 * scale;
   const canvas = document.createElement('canvas');
@@ -23,7 +23,3 @@ function createDataURL(text) {
 
   return canvas.toDataURL();
 }
-
-module.exports = {
-  createDataURL,
-};

src/browser/js/contextMenu.js

@@ -1,5 +1,5 @@
-const {ipcRenderer} = require('electron');
+import {ipcRenderer} from 'electron';
-const electronContextMenu = require('electron-context-menu');
+import electronContextMenu from 'electron-context-menu';
 
 function getSuggestionsMenus(win, suggestions) {
   if (suggestions.length === 0) {
@@ -37,7 +37,7 @@ function getSpellCheckerLocaleMenus(onSelectSpellCheckerLocale) {
   }));
 }
 
-module.exports = {
+export default {
   setup(win, options) {
     const defaultOptions = {
       useSpellChecker: false,

src/browser/js/notification.js

@@ -1,11 +1,12 @@
 'use strict';
 
 const OriginalNotification = Notification;
-const {ipcRenderer, remote} = require('electron');
+import {throttle} from 'underscore';
-const {throttle} = require('underscore');
 
-const osVersion = require('../../common/osVersion');
+import {ipcRenderer, remote} from 'electron';
-const dingDataURL = require('../../assets/ding.mp3'); // https://github.com/mattermost/platform/blob/v3.7.3/webapp/images/ding.mp3
+
+import osVersion from '../../common/osVersion';
+import dingDataURL from '../../assets/ding.mp3'; // https://github.com/mattermost/platform/blob/v3.7.3/webapp/images/ding.mp3
 
 const appIconURL = `file:///${remote.app.getAppPath()}/assets/appicon.png`;
 
@@ -14,7 +15,7 @@ const playDing = throttle(() => {
   ding.play();
 }, 3000, {trailing: false});
 
-class EnhancedNotification extends OriginalNotification {
+export default class EnhancedNotification extends OriginalNotification {
   constructor(title, options) {
     if (process.platform === 'win32') {
       // Replace with application icon.
@@ -64,5 +65,3 @@ class EnhancedNotification extends OriginalNotification {
     return super.onclick;
   }
 }
-
-module.exports = EnhancedNotification;

src/browser/settings.jsx

@@ -1,17 +1,17 @@
 'use strict';
-const {remote} = require('electron');
+import {remote} from 'electron';
 
 window.eval = global.eval = () => { // eslint-disable-line no-multi-assign, no-eval
   throw new Error(`Sorry, ${remote.app.getName()} does not support window.eval() for security reasons.`);
 };
 
-const React = require('react');
+import React from 'react';
-const ReactDOM = require('react-dom');
+import ReactDOM from 'react-dom';
 
-const buildConfig = require('../common/config/buildConfig');
+import buildConfig from '../common/config/buildConfig';
 
-const SettingsPage = require('./components/SettingsPage.jsx');
+import SettingsPage from './components/SettingsPage.jsx';
-const contextMenu = require('./js/contextMenu');
+import contextMenu from './js/contextMenu';
 
 const configFile = remote.app.getPath('userData') + '/config.json';
 

src/browser/webview/mattermost.js

@@ -1,10 +1,8 @@
 'use strict';
 
-const electron = require('electron');
+import {ipcRenderer, webFrame} from 'electron';
-const ipc = electron.ipcRenderer;
-const webFrame = electron.webFrame;
 
-const EnhancedNotification = require('../js/notification');
+import EnhancedNotification from '../js/notification';
 
 const UNREAD_COUNT_INTERVAL = 1000;
 //eslint-disable-next-line no-magic-numbers
@@ -41,11 +39,11 @@ function watchReactAppUntilInitialized(callback) {
 window.addEventListener('load', () => {
   if (document.getElementById('root') === null) {
     console.log('The guest is not assumed as mattermost-webapp');
-    ipc.sendToHost('onGuestInitialized');
+    ipcRenderer.sendToHost('onGuestInitialized');
     return;
   }
   watchReactAppUntilInitialized(() => {
-    ipc.sendToHost('onGuestInitialized');
+    ipcRenderer.sendToHost('onGuestInitialized');
   });
 });
 
@@ -67,7 +65,7 @@ function getUnreadCount() {
 
   // LHS not found => Log out => Count should be 0.
   if (document.getElementById('sidebar-left') === null) {
-    ipc.sendToHost('onUnreadCountChange', 0, 0, false, false);
+    ipcRenderer.sendToHost('onUnreadCountChange', 0, 0, false, false);
     this.unreadCount = 0;
     this.mentionCount = 0;
     setTimeout(getUnreadCount, UNREAD_COUNT_INTERVAL);
@@ -152,7 +150,7 @@ function getUnreadCount() {
   }
 
   if (this.unreadCount !== unreadCount || this.mentionCount !== mentionCount || isUnread || isMentioned) {
-    ipc.sendToHost('onUnreadCountChange', unreadCount, mentionCount, isUnread, isMentioned);
+    ipcRenderer.sendToHost('onUnreadCountChange', unreadCount, mentionCount, isUnread, isMentioned);
   }
   this.unreadCount = unreadCount;
   this.mentionCount = mentionCount;
@@ -165,28 +163,28 @@ function isElementVisible(elem) {
 }
 
 function resetMisspelledState() {
-  ipc.once('spellchecker-is-ready', () => {
+  ipcRenderer.once('spellchecker-is-ready', () => {
     const element = document.activeElement;
     if (element) {
       element.blur();
       element.focus();
     }
   });
-  ipc.send('reply-on-spellchecker-is-ready');
+  ipcRenderer.send('reply-on-spellchecker-is-ready');
 }
 
 function setSpellChecker() {
-  const spellCheckerLocale = ipc.sendSync('get-spellchecker-locale');
+  const spellCheckerLocale = ipcRenderer.sendSync('get-spellchecker-locale');
   webFrame.setSpellCheckProvider(spellCheckerLocale, false, {
     spellCheck(text) {
-      const res = ipc.sendSync('checkspell', text);
+      const res = ipcRenderer.sendSync('checkspell', text);
       return res === null ? true : res;
     },
   });
   resetMisspelledState();
 }
 setSpellChecker();
-ipc.on('set-spellcheker', setSpellChecker);
+ipcRenderer.on('set-spellcheker', setSpellChecker);
 
 // mattermost-webapp is SPA. So cache is not cleared due to no navigation.
 // We needed to manually clear cache to free memory in long-term-use.

src/common/JsonFileManager.js

@@ -1,6 +1,6 @@
-const fs = require('fs');
+import fs from 'fs';
 
-class JsonFileManager {
+export default class JsonFileManager {
   constructor(file) {
     this.jsonFile = file;
     try {
@@ -32,5 +32,3 @@ class JsonFileManager {
     return this.json[key];
   }
 }
-
-module.exports = JsonFileManager;

src/common/config/buildConfig.js

@@ -22,4 +22,4 @@ const buildConfig = {
   enableServerManagement: true,
 };
 
-module.exports = buildConfig;
+export default buildConfig;

src/common/config/defaultPreferences.js

@@ -18,4 +18,4 @@ const defaultPreferences = {
   enableHardwareAcceleration: false,
 };
 
-module.exports = defaultPreferences;
+export default defaultPreferences;

src/common/config/pastDefaultPreferences.js

@@ -1,4 +1,4 @@
-const defaultPreferences = require('./defaultPreferences');
+import defaultPreferences from './defaultPreferences';
 
 const pastDefaultPreferences = {
   0: {
@@ -8,4 +8,4 @@ const pastDefaultPreferences = {
 
 pastDefaultPreferences[`${defaultPreferences.version}`] = defaultPreferences;
 
-module.exports = pastDefaultPreferences;
+export default pastDefaultPreferences;

src/common/config/upgradePreferences.js

@@ -1,4 +1,4 @@
-const pastDefaultPreferences = require('./pastDefaultPreferences');
+import pastDefaultPreferences from './pastDefaultPreferences';
 
 function deepCopy(object) {
   return JSON.parse(JSON.stringify(object));
@@ -16,7 +16,7 @@ function upgradeV0toV1(configV0) {
   return config;
 }
 
-function upgradeToLatest(config) {
+export default function upgradeToLatest(config) {
   var configVersion = config.version ? config.version : 0;
   switch (configVersion) {
   case 0:
@@ -25,5 +25,3 @@ function upgradeToLatest(config) {
     return config;
   }
 }
-
-module.exports = upgradeToLatest;

src/common/deepmerge.js

@@ -1,10 +1,5 @@
-const deepmerge = require('deepmerge');
+import deepmerge from 'deepmerge';
 
-function deepMergeProxy(x, y, options) {
+export default function deepMergeProxy(x, y, options) {
-  if (process.env.TEST) {
+  return deepmerge(x, y, options); // due to webpack conversion
-    return deepmerge(x, y, options);
-  }
-  return deepmerge.default(x, y, options); // due to webpack conversion
 }
-
-module.exports = deepMergeProxy;

src/common/osVersion.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var os = require('os');
+import os from 'os';
 var releaseSplit = os.release().split('.');
 
-module.exports = {
+export default {
   major: parseInt(releaseSplit[0], 10),
   minor: parseInt(releaseSplit[1], 10),
   isLowerThanOrEqualWindows8_1() {

src/common/settings.js

@@ -1,16 +1,16 @@
 'use strict';
 
-const fs = require('fs');
+import fs from 'fs';
-const path = require('path');
+import path from 'path';
 
-const buildConfig = require('./config/buildConfig');
+import buildConfig from './config/buildConfig';
 
 function merge(base, target) {
   return Object.assign({}, base, target);
 }
 
-const defaultPreferences = require('./config/defaultPreferences');
+import defaultPreferences from './config/defaultPreferences';
-const upgradePreferences = require('./config/upgradePreferences');
+import upgradePreferences from './config/upgradePreferences';
 
 function loadDefault() {
   return JSON.parse(JSON.stringify(defaultPreferences));
@@ -24,7 +24,7 @@ function upgrade(config) {
   return upgradePreferences(config);
 }
 
-module.exports = {
+export default {
   version: defaultPreferences.version,
 
   upgrade,

src/main.js

@@ -1,8 +1,9 @@
 'use strict';
 
-const os = require('os');
+import os from 'os';
-const path = require('path');
+import path from 'path';
 
+import electron from 'electron';
 const {
   app,
   Menu,
@@ -12,15 +13,15 @@ const {
   dialog,
   systemPreferences,
   session,
-} = require('electron');
+} = electron;
-const isDev = require('electron-is-dev');
+import isDev from 'electron-is-dev';
-const installExtension = require('electron-devtools-installer');
+import installExtension, {REACT_DEVELOPER_TOOLS} from 'electron-devtools-installer';
-const parseArgv = require('yargs').parse;
+import {parse as parseArgv} from 'yargs';
 
-const protocols = require('../electron-builder.json').protocols;
+import {protocols} from '../electron-builder.json';
 
-const squirrelStartup = require('./main/squirrelStartup');
+import squirrelStartup from './main/squirrelStartup';
-const CriticalErrorHandler = require('./main/CriticalErrorHandler');
+import CriticalErrorHandler from './main/CriticalErrorHandler';
 
 const criticalErrorHandler = new CriticalErrorHandler();
 
@@ -32,19 +33,19 @@ app.setAppUserModelId('com.squirrel.mattermost.Mattermost'); // Use explicit App
 if (squirrelStartup()) {
   global.willAppQuit = true;
 }
+import settings from './common/settings';
+import CertificateStore from './main/certificateStore';
+const certificateStore = CertificateStore.load(path.resolve(app.getPath('userData'), 'certificate.json'));
+import createMainWindow from './main/mainWindow';
+import appMenu from './main/menus/app';
+import trayMenu from './main/menus/tray';
+import downloadURL from './main/downloadURL';
+import allowProtocolDialog from './main/allowProtocolDialog';
+import PermissionManager from './main/PermissionManager';
+import permissionRequestHandler from './main/permissionRequestHandler';
+import AppStateManager from './main/AppStateManager';
 
-var settings = require('./common/settings');
+import SpellChecker from './main/SpellChecker';
-var certificateStore = require('./main/certificateStore').load(path.resolve(app.getPath('userData'), 'certificate.json'));
-const {createMainWindow} = require('./main/mainWindow');
-const appMenu = require('./main/menus/app');
-const trayMenu = require('./main/menus/tray');
-const downloadURL = require('./main/downloadURL');
-const allowProtocolDialog = require('./main/allowProtocolDialog');
-const PermissionManager = require('./main/PermissionManager');
-const permissionRequestHandler = require('./main/permissionRequestHandler');
-const AppStateManager = require('./main/AppStateManager');
-
-const SpellChecker = require('./main/SpellChecker');
 
 const assetsDir = path.resolve(app.getAppPath(), 'assets');
 
@@ -267,7 +268,7 @@ function handleScreenResize(screen, browserWindow) {
 
 app.on('browser-window-created', (e, newWindow) => {
   // Screen cannot be required before app is ready
-  const {screen} = require('electron'); // eslint-disable-line global-require
+  const {screen} = electron; // eslint-disable-line global-require
   handleScreenResize(screen, newWindow);
 });
 
@@ -403,7 +404,7 @@ app.on('ready', () => {
   appState.lastAppVersion = app.getVersion();
 
   if (global.isDev) {
-    installExtension.default(installExtension.REACT_DEVELOPER_TOOLS).
+    installExtension(REACT_DEVELOPER_TOOLS).
       then((name) => console.log(`Added Extension:  ${name}`)).
       catch((err) => console.log('An error occurred: ', err));
   }

src/main/AppStateManager.js

@@ -1,6 +1,6 @@
-const JsonFileManager = require('../common/JsonFileManager');
+import JsonFileManager from '../common/JsonFileManager';
 
-class AppStateManager extends JsonFileManager {
+export default class AppStateManager extends JsonFileManager {
   set lastAppVersion(version) {
     this.setValue('lastAppVersion', version);
   }
@@ -9,5 +9,3 @@ class AppStateManager extends JsonFileManager {
     return this.getValue('lastAppVersion');
   }
 }
-
-module.exports = AppStateManager;

src/main/CriticalErrorHandler.js

@@ -1,9 +1,9 @@
-const {spawn} = require('child_process');
+import {spawn} from 'child_process';
-const fs = require('fs');
+import fs from 'fs';
-const os = require('os');
+import os from 'os';
-const path = require('path');
+import path from 'path';
 
-const {app, dialog} = require('electron');
+import {app, dialog} from 'electron';
 
 const BUTTON_OK = 'OK';
 const BUTTON_SHOW_DETAILS = 'Show Details';
@@ -36,7 +36,7 @@ function bindWindowToShowMessageBox(win) {
   return dialog.showMessageBox;
 }
 
-class CriticalErrorHandler {
+export default class CriticalErrorHandler {
   constructor() {
     this.mainWindow = null;
   }
@@ -97,5 +97,3 @@ class CriticalErrorHandler {
     throw err;
   }
 }
-
-module.exports = CriticalErrorHandler;

src/main/PermissionManager.js

@@ -1,11 +1,11 @@
-const fs = require('fs');
+import fs from 'fs';
 
-const utils = require('../utils/util');
+import utils from '../utils/util';
 
 const PERMISSION_GRANTED = 'granted';
 const PERMISSION_DENIED = 'denied';
 
-class PermissionManager {
+export default class PermissionManager {
   constructor(file, trustedURLs = []) {
     this.file = file;
     this.setTrustedURLs(trustedURLs);
@@ -70,5 +70,3 @@ class PermissionManager {
     }
   }
 }
-
-module.exports = PermissionManager;

src/main/SpellChecker.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const EventEmitter = require('events');
+import EventEmitter from 'events';
 
-const simpleSpellChecker = require('simple-spellchecker');
+import simpleSpellChecker from 'simple-spellchecker';
 
 /// Following approach for contractions is derived from electron-spellchecker.
 
@@ -28,7 +28,7 @@ const contractionMap = contractions.reduce((acc, word) => {
 
 /// End: derived from electron-spellchecker.
 
-class SpellChecker extends EventEmitter {
+export default class SpellChecker extends EventEmitter {
   constructor(locale, dictDir, callback) {
     super();
     this.dict = null;
@@ -89,5 +89,3 @@ SpellChecker.getSpellCheckerLocale = (electronLocale) => {
   }
   return 'en-US';
 };
-
-module.exports = SpellChecker;

src/main/allowProtocolDialog.js

@@ -1,14 +1,9 @@
 'use strict';
 
-const path = require('path');
+import path from 'path';
-const fs = require('fs');
+import fs from 'fs';
 
-const {
+import {app, dialog, ipcMain, shell} from 'electron';
-  app,
-  dialog,
-  ipcMain,
-  shell,
-} = require('electron');
 
 const allowedProtocolFile = path.resolve(app.getPath('userData'), 'allowedProtocols.json');
 var allowedProtocols = [];
@@ -63,6 +58,6 @@ function initDialogEvent(mainWindow) {
   });
 }
 
-module.exports = {
+export default {
   init,
 };

src/main/certificateStore.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const fs = require('fs');
+import fs from 'fs';
-const url = require('url');
+import url from 'url';
 
 function comparableCertificate(certificate) {
   return {
@@ -60,7 +60,7 @@ CertificateStore.prototype.isTrusted = function isTrusted(targetURL, certificate
   return areEqual(this.data[host], comparableCertificate(certificate));
 };
 
-module.exports = {
+export default {
   load(storeFile) {
     return new CertificateStore(storeFile);
   },

src/main/downloadURL.js

@@ -1,11 +1,11 @@
-const fs = require('fs');
+import fs from 'fs';
-const path = require('path');
+import path from 'path';
-const zlib = require('zlib');
+import zlib from 'zlib';
 
-const electron = require('electron');
+import electron from 'electron';
 const {app, dialog} = electron;
 
-function downloadURL(browserWindow, URL, callback) {
+export default function downloadURL(browserWindow, URL, callback) {
   const {net} = electron;
   const request = net.request(URL);
   request.setHeader('Accept-Encoding', 'gzip,deflate');
@@ -49,5 +49,3 @@ function saveResponseBody(response, filename, callback) {
     break;
   }
 }
-
-module.exports = downloadURL;

src/main/mainWindow.js

@@ -1,7 +1,7 @@
-const fs = require('fs');
+import fs from 'fs';
-const path = require('path');
+import path from 'path';
 
-const {app, BrowserWindow} = require('electron');
+import {app, BrowserWindow} from 'electron';
 
 function saveWindowState(file, window) {
   var windowState = window.getBounds();
@@ -135,4 +135,4 @@ function createMainWindow(config, options) {
   return mainWindow;
 }
 
-module.exports = {createMainWindow};
+export default createMainWindow;

src/main/menus/app.js

@@ -1,20 +1,18 @@
 'use strict';
 
-const electron = require('electron');
+import {app, dialog, Menu, shell} from 'electron';
 
-const settings = require('../../common/settings');
+import settings from '../../common/settings';
-const buildConfig = require('../../common/config/buildConfig');
+import buildConfig from '../../common/config/buildConfig';
-
-const Menu = electron.Menu;
 
 function createTemplate(mainWindow, config, isDev) {
-  const settingsURL = isDev ? 'http://localhost:8080/browser/settings.html' : `file://${electron.app.getAppPath()}/browser/settings.html`;
+  const settingsURL = isDev ? 'http://localhost:8080/browser/settings.html' : `file://${app.getAppPath()}/browser/settings.html`;
 
   const separatorItem = {
     type: 'separator',
   };
 
-  var appName = electron.app.getName();
+  var appName = app.getName();
   var firstMenuName = (process.platform === 'darwin') ? appName : 'File';
   var template = [];
 
@@ -22,9 +20,9 @@ function createTemplate(mainWindow, config, isDev) {
     label: 'About ' + appName,
     role: 'about',
     click() {
-      electron.dialog.showMessageBox(mainWindow, {
+      dialog.showMessageBox(mainWindow, {
         buttons: ['OK'],
-        message: `${appName} Desktop ${electron.app.getVersion()}`,
+        message: `${appName} Desktop ${app.getVersion()}`,
       });
     },
   }, separatorItem, {
@@ -64,7 +62,7 @@ function createTemplate(mainWindow, config, isDev) {
       role: 'quit',
       accelerator: 'CmdOrCtrl+Q',
       click() {
-        electron.app.quit();
+        app.quit();
       },
     }]
   );
@@ -215,13 +213,13 @@ function createTemplate(mainWindow, config, isDev) {
     submenu.push({
       label: 'Learn More...',
       click() {
-        electron.shell.openExternal(buildConfig.helpLink);
+        shell.openExternal(buildConfig.helpLink);
       },
     });
     submenu.push(separatorItem);
   }
   submenu.push({
-    label: `Version ${electron.app.getVersion()}`,
+    label: `Version ${app.getVersion()}`,
     enabled: false,
   });
   template.push({label: '&Help', submenu});
@@ -232,6 +230,6 @@ function createMenu(mainWindow, config, isDev) {
   return Menu.buildFromTemplate(createTemplate(mainWindow, config, isDev));
 }
 
-module.exports = {
+export default {
   createMenu,
 };

src/main/menus/tray.js

@@ -1,11 +1,8 @@
 'use strict';
 
-const {
+import {app, Menu} from 'electron';
-  app,
-  Menu,
-} = require('electron');
 
-const settings = require('../../common/settings');
+import settings from '../../common/settings';
 
 function createTemplate(mainWindow, config, isDev) {
   const settingsURL = isDev ? 'http://localhost:8080/browser/settings.html' : `file://${app.getAppPath()}/browser/settings.html`;
@@ -58,6 +55,6 @@ function showOrRestore(window) {
   }
 }
 
-module.exports = {
+export default {
   createMenu,
 };

src/main/permissionRequestHandler.js

@@ -1,6 +1,6 @@
-const {URL} = require('url');
+import {URL} from 'url';
 
-const {ipcMain} = require('electron');
+import {ipcMain} from 'electron';
 
 function dequeueRequests(requestQueue, permissionManager, origin, permission, status) {
   switch (status) {
@@ -31,7 +31,7 @@ function dequeueRequests(requestQueue, permissionManager, origin, permission, st
   }
 }
 
-function permissionRequestHandler(mainWindow, permissionManager) {
+export default function permissionRequestHandler(mainWindow, permissionManager) {
   const requestQueue = [];
   ipcMain.on('update-permission', (event, origin, permission, status) => {
     dequeueRequests(requestQueue, permissionManager, origin, permission, status);
@@ -55,5 +55,3 @@ function permissionRequestHandler(mainWindow, permissionManager) {
     mainWindow.webContents.send('request-permission', targetURL.origin, permission);
   };
 }
-
-module.exports = permissionRequestHandler;

src/main/squirrelStartup.js

@@ -1,5 +1,5 @@
-const AutoLaunch = require('auto-launch');
+import AutoLaunch from 'auto-launch';
-const {app} = require('electron');
+import {app} from 'electron';
 
 function shouldQuitApp(cmd) {
   if (process.platform !== 'win32') {
@@ -26,7 +26,7 @@ async function setupAutoLaunch(cmd) {
   return async () => true;
 }
 
-function squirrelStartup() {
+export default function squirrelStartup() {
   if (process.platform === 'win32') {
     const cmd = process.argv[1];
     setupAutoLaunch(cmd).then(() => {
@@ -36,5 +36,3 @@ function squirrelStartup() {
   }
   return false;
 }
-
-module.exports = squirrelStartup;

src/utils/util.js

@@ -1,8 +1,8 @@
-const url = require('url');
+import url from 'url';
 
 function getDomain(inputURL) {
   const parsedURL = url.parse(inputURL);
   return `${parsedURL.protocol}//${parsedURL.host}`;
 }
 
-module.exports = {getDomain};
+export default {getDomain};

test/.eslintrc.json

@@ -6,6 +6,7 @@
         "open_window": true
     },
     "rules": {
+        "import/no-commonjs": 0,
         "func-names": 0,
         "global-require": 0,
         "max-nested-callbacks": 0,