Update client dependencies

client/.eslintrc

@@ -13,9 +13,13 @@
     "no-param-reassign": 0,
     "no-plusplus": 0,
     "no-restricted-globals": 1,
+    "no-underscore-dangle": 1,
     "react/destructuring-assignment": 0,
     "react/jsx-filename-extension": 0,
-    "react/prop-types": 0
+    "react/jsx-props-no-spreading": 0,
+    "react/prop-types": 0,
+    "react/state-in-constructor": 0,
+    "react/static-property-placement": 0
   },
   "settings": {
     "import/resolver": {

client/.prettierrc.json

@@ -1,3 +1,5 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
 }

client/gulpfile.js

@@ -12,7 +12,7 @@ var br = require('brotli');
 var del = require('del');
 
 function brotli(opts) {
-  return through.obj(function(file, enc, callback) {
+  return through.obj(function (file, enc, callback) {
     if (file.isNull()) {
       return callback(null, file);
     }
@@ -40,7 +40,7 @@ function js(cb) {
 
   process.env['NODE_ENV'] = 'production';
 
-  compiler.run(function(err, stats) {
+  compiler.run(function (err, stats) {
     if (err) throw new gutil.PluginError('webpack', err);
 
     gutil.log(
@@ -104,13 +104,13 @@ function serve() {
   app.use(
     '*',
     proxy('localhost:1337', {
-      proxyReqPathResolver: function(req) {
+      proxyReqPathResolver: function (req) {
         return req.originalUrl;
       }
     })
   );
 
-  app.listen(3000, function(err) {
+  app.listen(3000, function (err) {
     if (err) {
       console.log(err);
       return;
@@ -120,9 +120,13 @@ function serve() {
   });
 }
 
-const assets = gulp.parallel(js, config, public);
-
-const build = gulp.series(clean, assets, compress, cleanup, bindata);
+const build = gulp.series(
+  clean,
+  gulp.parallel(js, config),
+  compress,
+  cleanup,
+  bindata
+);
 
 const dev = gulp.series(
   clean,

client/js/components/modals/withModal.js

@@ -66,9 +66,6 @@ export default function withModal({ name, ...modalProps }) {
       return actions;
     };
 
-    return connect(
-      mapState,
-      mapDispatch
-    )(ReduxModal);
+    return connect(mapState, mapDispatch)(ReduxModal);
   };
 }

client/js/containers/App.js

@@ -23,7 +23,4 @@ const mapState = createStructuredSelector({
 
 const mapDispatch = { push, select, hideMenu, openModal };
 
-export default connect(
-  mapState,
-  mapDispatch
-)(App);
+export default connect(mapState, mapDispatch)(App);

client/js/containers/Chat.js

@@ -85,7 +85,4 @@ const mapDispatch = dispatch => ({
   )
 });
 
-export default connect(
-  mapState,
-  mapDispatch
-)(Chat);
+export default connect(mapState, mapDispatch)(Chat);

client/js/containers/Connect.js

@@ -17,7 +17,4 @@ const mapDispatch = {
   select
 };
 
-export default connect(
-  mapState,
-  mapDispatch
-)(Connect);
+export default connect(mapState, mapDispatch)(Connect);

client/js/containers/Navicon.js

@@ -6,7 +6,4 @@ const mapDispatch = {
   onClick: toggleMenu
 };
 
-export default connect(
-  null,
-  mapDispatch
-)(Navicon);
+export default connect(null, mapDispatch)(Navicon);

client/js/containers/Settings.js

@@ -24,7 +24,4 @@ const mapDispatch = {
   onInstall: () => appSet('installable', null)
 };
 
-export default connect(
-  mapState,
-  mapDispatch
-)(Settings);
+export default connect(mapState, mapDispatch)(Settings);

client/js/modules/socket.js

@@ -81,7 +81,12 @@ export default function handleSocket({
     },
 
     motd({ content, server }) {
-      dispatch(addMessages(content.map(line => ({ content: line })), server));
+      dispatch(
+        addMessages(
+          content.map(line => ({ content: line })),
+          server
+        )
+      );
     },
 
     whois(data) {

client/js/state/__tests__/reducer-messages.test.js

@@ -82,7 +82,10 @@ describe('message reducer', () => {
       server: 'srv',
       tab: '#chan1',
       prepend: true,
-      messages: [{ id: 1, date: new Date() }, { id: 2, date: new Date() }]
+      messages: [
+        { id: 1, date: new Date() },
+        { id: 2, date: new Date() }
+      ]
     });
 
     expect(state).toMatchObject({

client/js/state/channels.js

@@ -91,18 +91,14 @@ export function compareUsers(a, b) {
 
 export const getChannels = state => state.channels;
 
-export const getSortedChannels = createSelector(
-  getChannels,
-  channels =>
-    sortBy(
-      Object.keys(channels).map(server => ({
-        address: server,
-        channels: sortBy(channels[server], channel =>
-          channel.name.toLowerCase()
-        )
-      })),
-      server => server.address.toLowerCase()
-    )
+export const getSortedChannels = createSelector(getChannels, channels =>
+  sortBy(
+    Object.keys(channels).map(server => ({
+      address: server,
+      channels: sortBy(channels[server], channel => channel.name.toLowerCase())
+    })),
+    server => server.address.toLowerCase()
+  )
 );
 
 export const getSelectedChannel = createSelector(

client/js/state/modals.js

@@ -4,19 +4,16 @@ import * as actions from './actions';
 
 export const getModals = state => state.modals;
 
-export const getHasOpenModals = createSelector(
-  getModals,
-  modals => {
-    const keys = Object.keys(modals);
+export const getHasOpenModals = createSelector(getModals, modals => {
+  const keys = Object.keys(modals);
 
-    for (let i = 0; i < keys.length; i++) {
-      if (modals[keys[i]].isOpen) {
-        return true;
-      }
+  for (let i = 0; i < keys.length; i++) {
+    if (modals[keys[i]].isOpen) {
+      return true;
     }
-    return false;
   }
-);
+  return false;
+});
 
 export default createReducer(
   {},

client/js/sw.js

@@ -1,6 +1,13 @@
-workbox.core.skipWaiting();
-workbox.core.clientsClaim();
+import { skipWaiting, clientsClaim } from 'workbox-core';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { NavigationRoute, registerRoute } from 'workbox-routing';
 
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {
+skipWaiting();
+clientsClaim();
+
+precacheAndRoute(self.__WB_MANIFEST, {
   ignoreUrlParametersMatching: [/.*/]
 });
+
+const handler = createHandlerBoundToURL('/');
+registerRoute(new NavigationRoute(handler));

client/js/utils/connect.js

@@ -3,11 +3,6 @@ import { connect } from 'react-redux';
 const strictEqual = (a, b) => a === b;
 
 export default (mapState, mapDispatch) =>
-  connect(
-    mapState,
-    mapDispatch,
-    null,
-    {
-      areStatePropsEqual: strictEqual
-    }
-  );
+  connect(mapState, mapDispatch, null, {
+    areStatePropsEqual: strictEqual
+  });

client/js/utils/index.js

@@ -8,10 +8,7 @@ export function normalizeChannel(channel) {
     return channel;
   }
 
-  return channel
-    .split('#')
-    .join('')
-    .toLowerCase();
+  return channel.split('#').join('').toLowerCase();
 }
 
 export function isChannel(name) {

client/js/utils/router.js

@@ -1,8 +1,6 @@
-import createHistory from 'history/createBrowserHistory';
+import history from 'history/browser';
 import UrlPattern from 'url-pattern';
 
-const history = createHistory();
-
 export const LOCATION_CHANGED = 'ROUTER_LOCATION_CHANGED';
 export const PUSH = 'ROUTER_PUSH';
 export const REPLACE = 'ROUTER_REPLACE';
@@ -97,7 +95,7 @@ export default function initRouter(routes, store) {
     matched = { location: {} };
   }
 
-  history.listen(location => {
+  history.listen(({ location }) => {
     const nextMatch = match(patterns, location);
     if (
       nextMatch &&

client/package.json

@@ -12,73 +12,78 @@
     "iOS >= 10.3"
   ],
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
-    "@babel/plugin-transform-react-inline-elements": "^7.0.0",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "^8.0.6",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-export-default-from": "^7.8.3",
+    "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-react-constant-elements": "^7.9.0",
+    "@babel/plugin-transform-react-inline-elements": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.5.0",
+    "babel-loader": "^8.1.0",
     "brotli": "^1.3.1",
-    "css-loader": "^2.1.1",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.5.3",
     "cssnano": "^4.1.10",
-    "del": "^4.1.1",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-import-resolver-webpack": "^0.11.1",
-    "eslint-loader": "^2.1.2",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0",
+    "del": "^5.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-webpack": "^0.12.1",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "express": "^4.17.1",
-    "express-http-proxy": "^1.5.1",
+    "express-http-proxy": "^1.6.0",
     "gulp": "4.0.2",
     "gulp-util": "^3.0.8",
-    "jest": "^24.8.0",
-    "mini-css-extract-plugin": "^0.7.0",
-    "postcss-flexbugs-fixes": "^4.1.0",
+    "jest": "^25.5.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.6.0",
-    "prettier": "1.18.2",
-    "react-test-renderer": "16.8.6",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.3.0",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "2.0.5",
+    "react-test-renderer": "16.13.1",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^2.3.6",
     "through2": "^3.0.1",
-    "webpack": "^4.33.0",
-    "webpack-dev-middleware": "^3.7.0",
+    "webpack": "^4.43.0",
+    "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-plugin-hash-output": "^3.2.1",
-    "workbox-webpack-plugin": "^4.3.1"
+    "workbox-webpack-plugin": "^5.1.3"
   },
   "dependencies": {
-    "autolinker": "^3.1.0",
+    "autolinker": "^3.14.1",
     "backo": "^1.1.0",
     "classnames": "^2.2.6",
     "fontfaceobserver": "^2.0.9",
-    "formik": "^1.5.7",
-    "history": "4.5.1",
-    "hsluv": "^0.0.3",
-    "immer": "^3.1.3",
-    "js-cookie": "^2.1.4",
-    "lodash": "^4.17.11",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-hot-loader": "^4.9.0",
+    "formik": "^2.1.4",
+    "history": "^5.0.0-beta.8",
+    "hsluv": "^0.1.0",
+    "immer": "^6.0.3",
+    "js-cookie": "^2.2.1",
+    "lodash": "^4.17.15",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-hot-loader": "^4.12.20",
     "react-icons": "^3.7.0",
-    "react-modal": "^3.8.1",
-    "react-redux": "^7.0.3",
+    "react-modal": "^3.11.2",
+    "react-redux": "^7.2.0",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.2",
-    "redux": "^4.0.1",
+    "react-window": "^1.8.5",
+    "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "url-pattern": "^1.0.3"
+    "url-pattern": "^1.0.3",
+    "workbox-core": "^5.1.3",
+    "workbox-precaching": "^5.1.3",
+    "workbox-routing": "^5.1.3"
   },
   "scripts": {
     "prettier": "prettier --write {.*,*.js,css/*.css,**/*.test.js}",
@@ -96,6 +101,9 @@
       "^containers(.*)$": "<rootDir>/js/containers$1",
       "^state(.*)$": "<rootDir>/js/state$1",
       "^utils(.*)$": "<rootDir>/js/utils$1"
-    }
+    },
+    "transformIgnorePatterns": [
+      "node_modules/?!(history)"
+    ]
   }
 }

client/webpack.config.prod.js

@@ -5,6 +5,7 @@ var cssnano = require('cssnano');
 var TerserPlugin = require('terser-webpack-plugin');
 var { InjectManifest } = require('workbox-webpack-plugin');
 var HashOutputPlugin = require('webpack-plugin-hash-output');
+var CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   mode: 'production',
@@ -80,16 +81,21 @@ module.exports = {
       chunkFilename: '[name].[contenthash].css'
     }),
     new HashOutputPlugin(),
+    new CopyPlugin(['public']),
     new InjectManifest({
       swSrc: './js/sw.js',
-      importWorkboxFrom: 'local',
-      globDirectory: './public',
-      globPatterns: ['*', 'font/*.woff2'],
+      additionalManifestEntries: [
+        {
+          url: '/',
+          revision: '__INDEX_REVISON__'
+        }
+      ],
       exclude: [
         /\.map$/,
         /^manifest.*\.js(?:on)?$/,
         /^boot.*\.js$/,
-        /^runtime.*\.js$/
+        /^runtime.*\.js$/,
+        /\.txt$/
       ]
     })
   ],
@@ -98,9 +104,7 @@ module.exports = {
       new TerserPlugin({
         terserOptions: {
           safari10: true
-        },
-        cache: true,
-        parallel: true
+        }
       })
     ],
     splitChunks: {

server/index.go

@@ -28,7 +28,6 @@ const indexTemplate = `
   <script src="{{.}}" defer></script>
   {{end}}
 
-  <link rel="preload" href="/font/fontello.woff2?48901973" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/font/RobotoMono-Regular.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/font/Montserrat-Regular.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/font/Montserrat-Bold.woff2" as="font" type="font/woff2" crossorigin>

server/serve_files.go

@@ -155,12 +155,7 @@ func (d *Dispatch) initFileServer() {
 		hash.Write(indexPage)
 		indexHash := base64.StdEncoding.EncodeToString(hash.Sum(nil))
 
-		serviceWorker = append(serviceWorker, []byte(`
-workbox.precaching.precacheAndRoute([{
-	revision: '`+indexHash+`',
-	url: '/'
-}]);
-workbox.routing.registerNavigationRoute('/');`)...)
+		serviceWorker = bytes.Replace(serviceWorker, []byte("__INDEX_REVISON__"), []byte(indexHash), 1)
 
 		if cfg.HTTPS.HSTS.Enabled && cfg.HTTPS.Enabled {
 			hstsHeader = "max-age=" + cfg.HTTPS.HSTS.MaxAge