Code split the client, update dependencies

client/.babelrc.js

@@ -10,9 +10,10 @@ module.exports = {
     '@babel/preset-react'
   ],
   plugins: [
-    '@babel/plugin-proposal-class-properties',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-proposal-export-namespace-from'
+    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-syntax-dynamic-import'
   ],
   env: {
     development: {

client/.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["airbnb", "plugin:prettier/recommended"],
+  "extends": ["airbnb", "prettier", "prettier/react"],
   "parser": "babel-eslint",
   "env": {
     "browser": true
@@ -7,16 +7,14 @@
   "rules": {
     "consistent-return": 0,
     "jsx-a11y/click-events-have-key-events": 0,
-    "jsx-a11y/no-autofocus": 0,
     "jsx-a11y/no-noninteractive-element-interactions": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "no-console": 1,
     "no-param-reassign": 0,
     "no-plusplus": 0,
     "no-restricted-globals": 1,
+    "react/destructuring-assignment": 0,
     "react/jsx-filename-extension": 0,
-    "react/no-array-index-key": 0,
-    "react/prefer-stateless-function": 0,
     "react/prop-types": 0
   },
   "settings": {

client/gulpfile.js

@@ -66,7 +66,7 @@ function fonts() {
 
 function compress() {
   return gulp
-    .src(['dist/!(*.toml)'])
+    .src(['dist/!(*.toml|*.json)'])
     .pipe(brotli({ quality: 11 }))
     .pipe(gulp.dest('dist'));
 }

client/package.json

@@ -5,71 +5,75 @@
   "license": "MIT",
   "main": "index.js",
   "browserslist": [
-    ">0.4%",
+    "Edge >= 16",
-    "not op_mini all"
+    "Firefox >= 60",
+    "Chrome >= 61",
+    "Safari >= 10.1",
+    "iOS >= 10.3"
   ],
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@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.1.0",
     "@babel/preset-react": "^7.0.0",
-    "autoprefixer": "^9.1.5",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
     "brotli": "^1.3.1",
-    "css-loader": "^1.0.0",
+    "css-loader": "^1.0.1",
-    "cssnano": "^4.1.4",
+    "cssnano": "^4.1.7",
     "del": "^3.0.0",
-    "eslint": "^5.6.1",
+    "eslint": "^5.8.0",
-    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^3.1.0",
     "eslint-import-resolver-webpack": "^0.10.1",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
-    "express": "^4.14.1",
+    "express": "^4.16.4",
     "express-http-proxy": "^1.4.0",
     "gulp": "4.0.0",
     "gulp-util": "^3.0.8",
     "jest": "^23.6.0",
-    "mini-css-extract-plugin": "^0.4.3",
+    "mini-css-extract-plugin": "^0.4.4",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.3.0",
     "prettier": "1.14.3",
-    "style-loader": "^0.23.0",
+    "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^1.1.0",
     "through2": "^2.0.3",
-    "webpack": "^4.20.2",
+    "webpack": "^4.23.1",
     "webpack-dev-middleware": "^3.4.0",
-    "webpack-hot-middleware": "^2.24.2"
+    "webpack-hot-middleware": "^2.24.3",
+    "webpack-manifest-plugin": "^2.0.4"
   },
   "dependencies": {
-    "@sindresorhus/fnv1a": "^1.0.0",
     "autolinker": "^1.7.1",
     "backo": "^1.1.0",
     "classnames": "^2.2.6",
     "es6-promise": "^4.2.5",
     "fontfaceobserver": "^2.0.9",
-    "formik": "1.3.1",
+    "formik": "^1.3.1",
     "history": "4.5.1",
     "hsluv": "^0.0.3",
-    "immer": "^1.7.2",
+    "immer": "^1.7.3",
     "js-cookie": "^2.1.4",
     "lodash": "^4.17.11",
-    "react": "^16.5.2",
+    "react": "^16.7.0-alpha.0",
-    "react-dom": "^16.5.2",
+    "react-dom": "^16.7.0-alpha.0",
     "react-hot-loader": "^4.3.11",
-    "react-redux": "^5.0.2",
+    "react-redux": "^5.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.2.1",
+    "react-window": "^1.2.2",
-    "redux": "^4.0.0",
+    "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "url-pattern": "^1.0.3"

client/src/css/style.css

@@ -790,6 +790,15 @@ input.message-input-nick.invalid {
   text-align: center;
 }
 
+.suspense-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: 700 64px 'Montserrat', sans-serif;
+  height: 100%;
+  color: #ddd;
+}
+
 @media (max-width: 600px) {
   .app-info {
     font-size: 12px;

client/src/js/components/App.js

@@ -1,53 +1,55 @@
-import React, { Component } from 'react';
+import React, { Suspense, lazy } from 'react';
 import Route from 'containers/Route';
-import Chat from 'containers/Chat';
-import Connect from 'containers/Connect';
-import Settings from 'containers/Settings';
 import TabList from 'components/TabList';
 import classnames from 'classnames';
 
-export default class App extends Component {
+const Chat = lazy(() => import('containers/Chat'));
-  handleClick = () => {
+const Connect = lazy(() => import('containers/Connect'));
-    const { showTabList, hideMenu } = this.props;
+const Settings = lazy(() => import('containers/Settings'));
+
+const App = ({
+  connected,
+  tab,
+  channels,
+  servers,
+  privateChats,
+  showTabList,
+  select,
+  push,
+  hideMenu
+}) => {
+  const mainClass = classnames('main-container', {
+    'off-canvas': showTabList
+  });
+
+  const handleClick = () => {
     if (showTabList) {
       hideMenu();
     }
   };
 
-  render() {
+  return (
-    const {
+    <div className="wrap" onClick={handleClick}>
-      connected,
+      {!connected && (
-      tab,
+        <div className="app-info">
-      channels,
+          Connection lost, attempting to reconnect...
-      servers,
+        </div>
-      privateChats,
+      )}
-      showTabList,
+      <div className="app-container">
-      select,
+        <TabList
-      push
+          tab={tab}
-    } = this.props;
+          channels={channels}
-
+          servers={servers}
-    const mainClass = classnames('main-container', {
+          privateChats={privateChats}
-      'off-canvas': showTabList
+          showTabList={showTabList}
-    });
+          select={select}
-
+          push={push}
-    return (
+        />
-      <div className="wrap">
+        <div className={mainClass}>
-        {!connected && (
+          <Suspense
-          <div className="app-info">
+            maxDuration={1000}
-            Connection lost, attempting to reconnect...
+            fallback={<div className="suspense-fallback">...</div>}
-          </div>
+          >
-        )}
-        <div className="app-container" onClick={this.handleClick}>
-          <TabList
-            tab={tab}
-            channels={channels}
-            servers={servers}
-            privateChats={privateChats}
-            showTabList={showTabList}
-            select={select}
-            push={push}
-          />
-          <div className={mainClass}>
             <Route name="chat">
               <Chat />
             </Route>
@@ -57,9 +59,11 @@ export default class App extends Component {
             <Route name="settings">
               <Settings />
             </Route>
-          </div>
+          </Suspense>
         </div>
       </div>
-    );
+    </div>
-  }
+  );
-}
+};
+
+export default App;

client/src/js/components/TabList.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
+import Button from 'components/ui/Button';
 import TabListItem from './TabListItem';
 
 export default class TabList extends PureComponent {
@@ -70,7 +71,7 @@ export default class TabList extends PureComponent {
       <div className={className}>
         <div className="tab-container">{tabs}</div>
         <div className="side-buttons">
-          <button onClick={this.handleConnectClick}>+</button>
+          <Button onClick={this.handleConnectClick}>+</Button>
           <i className="icon-user" />
           <i className="icon-cog" onClick={this.handleSettingsClick} />
         </div>

client/src/js/components/TabListItem.js

@@ -1,26 +1,26 @@
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import classnames from 'classnames';
 
-export default class TabListItem extends PureComponent {
+const TabListItem = ({
-  handleClick = () => {
+  target,
-    const { server, target, onClick } = this.props;
+  content,
-    onClick(server, target);
+  server,
-  };
+  selected,
+  connected,
+  onClick
+}) => {
+  const className = classnames({
+    'tab-server': !target,
+    success: !target && connected,
+    error: !target && !connected,
+    selected
+  });
 
-  render() {
+  return (
-    const { target, content, selected, connected } = this.props;
+    <p className={className} onClick={() => onClick(server, target)}>
+      <span className="tab-content">{content}</span>
+    </p>
+  );
+};
 
-    const className = classnames({
+export default memo(TabListItem);
-      'tab-server': !target,
-      success: !target && connected,
-      error: !target && !connected,
-      selected
-    });
-
-    return (
-      <p className={className} onClick={this.handleClick}>
-        <span className="tab-content">{content}</span>
-      </p>
-    );
-  }
-}

client/src/js/components/pages/Chat/ChatTitle.js

@@ -1,75 +1,73 @@
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import Navicon from 'containers/Navicon';
 import Editable from 'components/ui/Editable';
 import { isValidServerName } from 'state/servers';
 import { isChannel, linkify } from 'utils';
 
-export default class ChatTitle extends PureComponent {
+const ChatTitle = ({
-  render() {
+  status,
-    const {
+  title,
-      status,
+  tab,
-      title,
+  channel,
-      tab,
+  onTitleChange,
-      channel,
+  onToggleSearch,
-      onTitleChange,
+  onToggleUserList,
-      onToggleSearch,
+  onCloseClick
-      onToggleUserList,
+}) => {
-      onCloseClick
+  let closeTitle;
-    } = this.props;
+  if (isChannel(tab)) {
+    closeTitle = 'Leave';
+  } else if (tab.name) {
+    closeTitle = 'Close';
+  } else {
+    closeTitle = 'Disconnect';
+  }
 
-    let closeTitle;
+  let serverError = null;
-    if (isChannel(tab)) {
+  if (!tab.name && status.error) {
-      closeTitle = 'Leave';
+    serverError = (
-    } else if (tab.name) {
+      <span className="chat-topic error">
-      closeTitle = 'Close';
+        Error:
-    } else {
+        {status.error}
-      closeTitle = 'Disconnect';
+      </span>
-    }
-
-    let serverError = null;
-    if (!tab.name && status.error) {
-      serverError = (
-        <span className="chat-topic error">
-          Error:
-          {status.error}
-        </span>
-      );
-    }
-
-    return (
-      <div>
-        <div className="chat-title-bar">
-          <Navicon />
-          <Editable
-            className="chat-title"
-            editable={!tab.name}
-            value={title}
-            validate={isValidServerName}
-            onChange={onTitleChange}
-          >
-            <span className="chat-title">{title}</span>
-          </Editable>
-          <div className="chat-topic-wrap">
-            <span className="chat-topic">
-              {channel && linkify(channel.topic)}
-            </span>
-            {serverError}
-          </div>
-          <i className="icon-search" title="Search" onClick={onToggleSearch} />
-          <i
-            className="icon-cancel button-leave"
-            title={closeTitle}
-            onClick={onCloseClick}
-          />
-          <i className="icon-user button-userlist" onClick={onToggleUserList} />
-        </div>
-        <div className="userlist-bar">
-          <i className="icon-user" />
-          <span className="chat-usercount">
-            {channel && channel.users.length}
-          </span>
-        </div>
-      </div>
     );
   }
-}
+
+  return (
+    <div>
+      <div className="chat-title-bar">
+        <Navicon />
+        <Editable
+          className="chat-title"
+          editable={!tab.name}
+          value={title}
+          validate={isValidServerName}
+          onChange={onTitleChange}
+        >
+          <span className="chat-title">{title}</span>
+        </Editable>
+        <div className="chat-topic-wrap">
+          <span className="chat-topic">
+            {channel && linkify(channel.topic)}
+          </span>
+          {serverError}
+        </div>
+        <i className="icon-search" title="Search" onClick={onToggleSearch} />
+        <i
+          className="icon-cancel button-leave"
+          title={closeTitle}
+          onClick={onCloseClick}
+        />
+        <i className="icon-user button-userlist" onClick={onToggleUserList} />
+      </div>
+      <div className="userlist-bar">
+        <i className="icon-user" />
+        <span className="chat-usercount">
+          {channel && channel.users.length}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ChatTitle);

client/src/js/components/pages/Chat/Message.js

@@ -1,43 +1,38 @@
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import classnames from 'classnames';
 import stringToRGB from 'utils/color';
 
-export default class Message extends PureComponent {
+const Message = ({ message, coloredNick, style, onNickClick }) => {
-  handleNickClick = () => this.props.onNickClick(this.props.message.from);
+  const className = classnames('message', {
+    [`message-${message.type}`]: message.type
+  });
 
-  render() {
+  style = {
-    const { message, coloredNick } = this.props;
+    ...style,
+    paddingLeft: `${window.messageIndent + 15}px`,
+    textIndent: `-${window.messageIndent}px`
+  };
 
-    const className = classnames('message', {
+  const senderStyle = {};
-      [`message-${message.type}`]: message.type
+  if (message.from && coloredNick) {
-    });
+    senderStyle.color = stringToRGB(message.from);
-
-    const style = {
-      paddingLeft: `${window.messageIndent + 15}px`,
-      textIndent: `-${window.messageIndent}px`,
-      ...this.props.style
-    };
-
-    const senderStyle = {};
-    if (message.from && coloredNick) {
-      senderStyle.color = stringToRGB(message.from);
-    }
-
-    return (
-      <p className={className} style={style}>
-        <span className="message-time">{message.time}</span>
-        {message.from && (
-          <span
-            className="message-sender"
-            style={senderStyle}
-            onClick={this.handleNickClick}
-          >
-            {' '}
-            {message.from}
-          </span>
-        )}{' '}
-        {message.content}
-      </p>
-    );
   }
-}
+
+  return (
+    <p className={className} style={style}>
+      <span className="message-time">{message.time}</span>{' '}
+      {message.from && (
+        <span
+          className="message-sender"
+          style={senderStyle}
+          onClick={() => onNickClick(message.from)}
+        >
+          {message.from}
+        </span>
+      )}
+      {` ${message.content}`}
+    </p>
+  );
+};
+
+export default memo(Message);

client/src/js/components/pages/Chat/MessageBox.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import debounce from 'lodash/debounce';
@@ -12,6 +12,15 @@ const fetchThreshold = 600;
 const scrollbackDebounce = 100;
 
 export default class MessageBox extends PureComponent {
+  list = createRef();
+  outer = createRef();
+
+  addMore = debounce(() => {
+    const { tab, onAddMore } = this.props;
+    this.ready = true;
+    onAddMore(tab.server, tab.name);
+  }, scrollbackDebounce);
+
   constructor(props) {
     super(props);
 
@@ -30,6 +39,23 @@ export default class MessageBox extends PureComponent {
     });
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.tab !== this.props.tab) {
+      this.loadScrollPos(true);
+    }
+
+    if (this.nextScrollTop > 0) {
+      this.list.current.scrollTo(this.nextScrollTop);
+      this.nextScrollTop = 0;
+    } else if (this.bottom) {
+      this.list.current.scrollToItem(this.props.messages.length + 1);
+    }
+  }
+
+  componentWillUnmount() {
+    this.saveScrollPos();
+  }
+
   getSnapshotBeforeUpdate(prevProps) {
     if (prevProps.messages !== this.props.messages) {
       this.list.current.resetAfterIndex(0);
@@ -64,23 +90,6 @@ export default class MessageBox extends PureComponent {
     return null;
   }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.tab !== this.props.tab) {
-      this.loadScrollPos(true);
-    }
-
-    if (this.nextScrollTop > 0) {
-      this.list.current.scrollTo(this.nextScrollTop);
-      this.nextScrollTop = 0;
-    } else if (this.bottom) {
-      this.list.current.scrollToItem(this.props.messages.length + 1);
-    }
-  }
-
-  componentWillUnmount() {
-    this.saveScrollPos();
-  }
-
   getRowHeight = index => {
     const { messages, hasMoreMessages } = this.props;
 
@@ -106,9 +115,6 @@ export default class MessageBox extends PureComponent {
     return messages[index - 1].id;
   };
 
-  list = React.createRef();
-  outer = React.createRef();
-
   updateScrollKey = () => {
     const { tab } = this.props;
     this.scrollKey = `msg:${tab.server}:${tab.name}`;
@@ -145,12 +151,6 @@ export default class MessageBox extends PureComponent {
     this.props.onFetchMore();
   };
 
-  addMore = debounce(() => {
-    const { tab, onAddMore } = this.props;
-    this.ready = true;
-    onAddMore(tab.server, tab.name);
-  }, scrollbackDebounce);
-
   handleScroll = ({ scrollOffset, scrollDirection }) => {
     if (
       !this.loading &&

client/src/js/components/pages/Chat/MessageInput.js

@@ -1,25 +1,24 @@
-import React, { PureComponent } from 'react';
+import React, { memo, useState } from 'react';
 import classnames from 'classnames';
 import Editable from 'components/ui/Editable';
 import { isValidNick } from 'utils';
 
-export default class MessageInput extends PureComponent {
+const MessageInput = ({
-  state = {
+  nick,
-    value: ''
+  currentHistoryEntry,
-  };
+  onNickChange,
-
+  onNickEditDone,
-  handleKey = e => {
+  tab,
-    const {
+  onCommand,
-      tab,
+  onMessage,
-      onCommand,
+  add,
-      onMessage,
+  reset,
-      add,
+  increment,
-      reset,
+  decrement
-      increment,
+}) => {
-      decrement,
+  const [value, setValue] = useState('');
-      currentHistoryEntry
-    } = this.props;
 
+  const handleKey = e => {
     if (e.key === 'Enter' && e.target.value) {
       if (e.target.value[0] === '/') {
         onCommand(e.target.value, tab.name, tab.server);
@@ -29,50 +28,41 @@ export default class MessageInput extends PureComponent {
 
       add(e.target.value);
       reset();
-      this.setState({ value: '' });
+      setValue('');
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
       increment();
     } else if (e.key === 'ArrowDown') {
       decrement();
     } else if (currentHistoryEntry) {
-      this.setState({ value: e.target.value });
+      setValue(e.target.value);
       reset();
     }
   };
 
-  handleChange = e => {
+  const handleChange = e => setValue(e.target.value);
-    this.setState({ value: e.target.value });
-  };
 
-  render() {
+  return (
-    const {
+    <div className="message-input-wrap">
-      nick,
+      <Editable
-      currentHistoryEntry,
+        className={classnames('message-input-nick', {
-      onNickChange,
+          invalid: !isValidNick(nick)
-      onNickEditDone
+        })}
-    } = this.props;
+        value={nick}
+        onBlur={onNickEditDone}
+        onChange={onNickChange}
+      >
+        <span className="message-input-nick">{nick}</span>
+      </Editable>
+      <input
+        className="message-input"
+        type="text"
+        value={currentHistoryEntry || value}
+        onKeyDown={handleKey}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
 
-    return (
+export default memo(MessageInput);
-      <div className="message-input-wrap">
-        <Editable
-          className={classnames('message-input-nick', {
-            invalid: !isValidNick(nick)
-          })}
-          value={nick}
-          onBlur={onNickEditDone}
-          onChange={onNickChange}
-        >
-          <span className="message-input-nick">{nick}</span>
-        </Editable>
-        <input
-          className="message-input"
-          type="text"
-          value={currentHistoryEntry || this.state.value}
-          onKeyDown={this.handleKey}
-          onChange={this.handleChange}
-        />
-      </div>
-    );
-  }
-}

client/src/js/components/pages/Chat/Search.js

@@ -1,42 +1,41 @@
-import React, { PureComponent } from 'react';
+import React, { memo, useRef, useEffect } from 'react';
 import SearchResult from './SearchResult';
 
-export default class Search extends PureComponent {
+const Search = ({ search, onSearch }) => {
-  componentDidUpdate(prevProps) {
+  const inputEl = useRef();
-    if (!prevProps.search.show && this.props.search.show) {
-      this.input.focus();
-    }
-  }
 
-  inputRef = el => {
+  useEffect(
-    this.input = el;
+    () => {
+      if (search.show) {
+        inputEl.current.focus();
+      }
+    },
+    [search.show]
+  );
+
+  const style = {
+    display: search.show ? 'block' : 'none'
   };
 
-  handleSearch = e => this.props.onSearch(e.target.value);
+  let i = 0;
+  const results = search.results.map(result => (
+    <SearchResult key={i++} result={result} />
+  ));
 
-  render() {
+  return (
-    const { search } = this.props;
+    <div className="search" style={style}>
-    const style = {
+      <div className="search-input-wrap">
-      display: search.show ? 'block' : 'none'
+        <i className="icon-search" />
-    };
+        <input
-
+          ref={inputEl}
-    const results = search.results.map(result => (
+          className="search-input"
-      <SearchResult key={result.id} result={result} />
+          type="text"
-    ));
+          onChange={e => onSearch(e.target.value)}
-
+        />
-    return (
-      <div className="search" style={style}>
-        <div className="search-input-wrap">
-          <i className="icon-search" />
-          <input
-            ref={this.inputRef}
-            className="search-input"
-            type="text"
-            onChange={this.handleSearch}
-          />
-        </div>
-        <div className="search-results">{results}</div>
       </div>
-    );
+      <div className="search-results">{results}</div>
-  }
+    </div>
-}
+  );
+};
+
+export default memo(Search);

client/src/js/components/pages/Chat/SearchResult.js

@@ -1,25 +1,24 @@
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { timestamp, linkify } from 'utils';
 
-export default class SearchResult extends PureComponent {
+const SearchResult = ({ result }) => {
-  render() {
+  const style = {
-    const { result } = this.props;
+    paddingLeft: `${window.messageIndent}px`,
-    const style = {
+    textIndent: `-${window.messageIndent}px`
-      paddingLeft: `${window.messageIndent}px`,
+  };
-      textIndent: `-${window.messageIndent}px`
-    };
 
-    return (
+  return (
-      <p className="search-result" style={style}>
+    <p className="search-result" style={style}>
-        <span className="message-time">
+      <span className="message-time">
-          {timestamp(new Date(result.time * 1000))}
+        {timestamp(new Date(result.time * 1000))}
-        </span>
+      </span>
-        <span>
+      <span>
-          {' '}
+        {' '}
-          <span className="message-sender">{result.from}</span>
+        <span className="message-sender">{result.from}</span>
-        </span>
+      </span>
-        <span> {linkify(result.content)}</span>
+      <span> {linkify(result.content)}</span>
-      </p>
+    </p>
-    );
+  );
-  }
+};
-}
+
+export default memo(SearchResult);

client/src/js/components/pages/Chat/UserList.js

@@ -1,10 +1,12 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classnames from 'classnames';
 import UserListItem from './UserListItem';
 
 export default class UserList extends PureComponent {
+  list = createRef();
+
   getSnapshotBeforeUpdate(prevProps) {
     if (this.list.current) {
       const { users } = this.props;
@@ -43,8 +45,6 @@ export default class UserList extends PureComponent {
     return index;
   };
 
-  list = React.createRef();
-
   renderUser = ({ index, style }) => {
     const { users, coloredNicks, onNickClick } = this.props;
 

client/src/js/components/pages/Chat/UserListItem.js

@@ -1,24 +1,19 @@
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import stringToRGB from 'utils/color';
 
-export default class UserListItem extends PureComponent {
+const UserListItem = ({ user, coloredNick, style, onClick }) => {
-  handleClick = () => this.props.onClick(this.props.user.nick);
+  if (coloredNick) {
-
+    style = {
-  render() {
+      ...style,
-    const { user, coloredNick } = this.props;
+      color: stringToRGB(user.nick)
-    let { style } = this.props;
+    };
-
-    if (coloredNick) {
-      style = {
-        color: stringToRGB(user.nick),
-        ...style
-      };
-    }
-
-    return (
-      <p style={style} onClick={this.handleClick}>
-        {user.renderName}
-      </p>
-    );
   }
-}
+
+  return (
+    <p style={style} onClick={() => onClick(user.nick)}>
+      {user.renderName}
+    </p>
+  );
+};
+
+export default memo(UserListItem);

client/src/js/components/pages/Connect.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { createSelector } from 'reselect';
 import { Form, withFormik } from 'formik';
 import Navicon from 'containers/Navicon';
+import Button from 'components/ui/Button';
 import Checkbox from 'components/ui/formik/Checkbox';
 import TextInput from 'components/ui/TextInput';
 import Error from 'components/ui/formik/Error';
@@ -27,7 +28,7 @@ class Connect extends Component {
   };
 
   handleShowClick = () => {
-    this.setState({ showOptionals: !this.state.showOptionals });
+    this.setState(prevState => ({ showOptionals: !prevState.showOptionals }));
   };
 
   renderOptionals = () => {
@@ -35,12 +36,9 @@ class Connect extends Component {
 
     return (
       <div>
-        {!hexIP && [
+        {!hexIP && <TextInput name="username" />}
-          <TextInput name="username" placeholder="Username" />,
+        <TextInput name="password" type="password" />
-          <Error name="username" />
+        <TextInput name="realname" />
-        ]}
-        <TextInput type="password" name="password" placeholder="Password" />
-        <TextInput name="realname" placeholder="Realname" />
       </div>
     );
   };
@@ -64,19 +62,18 @@ class Connect extends Component {
               ))}
             </div>
           )}
-          <TextInput name="nick" placeholder="Nick" />
+          <TextInput name="nick" />
-          <Error name="nick" />
+          <Button type="submit">Connect</Button>
-          <button>Connect</button>
         </Form>
       );
     } else {
       form = (
         <Form className="connect-form">
           <h1>Connect</h1>
-          <TextInput name="name" placeholder="Name" autoCapitalize="words" />
+          <TextInput name="name" autoCapitalize="words" />
           <div className="connect-form-address">
-            <TextInput name="host" placeholder="Host" />
+            <TextInput name="host" noError />
-            <TextInput name="port" type="number" placeholder="Port" />
+            <TextInput name="port" type="number" noError />
             <Checkbox
               name="tls"
               label="SSL"
@@ -86,13 +83,11 @@ class Connect extends Component {
           </div>
           <Error name="host" />
           <Error name="port" />
-          <TextInput name="nick" placeholder="Nick" />
+          <TextInput name="nick" />
-          <Error name="nick" />
+          <TextInput name="channels" />
-          <TextInput name="channels" placeholder="Channels" />
-          <Error name="channels" />
           {this.state.showOptionals && this.renderOptionals()}
           <i className="icon-ellipsis" onClick={this.handleShowClick} />
-          <button>Connect</button>
+          <Button type="submit">Connect</Button>
         </Form>
       );
     }

client/src/js/components/pages/Settings.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Navicon from 'containers/Navicon';
+import Button from 'components/ui/Button';
 import Checkbox from 'components/ui/Checkbox';
 import FileInput from 'components/ui/FileInput';
 
@@ -44,9 +45,13 @@ const Settings = ({
                 onChange={onKeyChange}
               />
             </div>
-            <button className="settings-button" onClick={uploadCert}>
+            <Button
+              type="submit"
+              className="settings-button"
+              onClick={uploadCert}
+            >
               {status}
-            </button>
+            </Button>
             {error ? <p className="error">{error}</p> : null}
           </div>
         </div>

client/src/js/components/ui/Button.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Button = ({ children, ...props }) => (
+  <button type="button" {...props}>
+    {children}
+  </button>
+);
+
+export default Button;

client/src/js/components/ui/Editable.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import { stringWidth } from 'utils';
 
 export default class Editable extends PureComponent {
@@ -6,26 +6,29 @@ export default class Editable extends PureComponent {
     editable: true
   };
 
+  inputEl = createRef();
+
   state = {
     editing: false
   };
 
-  componentWillReceiveProps(nextProps) {
-    if (this.state.editing && nextProps.value !== this.props.value) {
-      this.updateInputWidth(nextProps.value);
-    }
-  }
-
   componentDidUpdate(prevProps, prevState) {
     if (!prevState.editing && this.state.editing) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.updateInputWidth(this.props.value);
+      this.inputEl.current.focus();
+    }
+  }
+
+  getSnapshotBeforeUpdate(prevProps) {
+    if (this.state.editing && prevProps.value !== this.props.value) {
+      this.updateInputWidth(this.props.value);
     }
   }
 
   updateInputWidth = value => {
-    if (this.input) {
+    if (this.inputEl.current) {
-      const style = window.getComputedStyle(this.input);
+      const style = window.getComputedStyle(this.inputEl.current);
       const padding = parseInt(style.paddingRight, 10);
       // Make sure the width is at least 1px so the caret always shows
       const width =
@@ -75,10 +78,6 @@ export default class Editable extends PureComponent {
     e.target.value = val;
   };
 
-  inputRef = el => {
-    this.input = el;
-  };
-
   render() {
     const { children, className, value } = this.props;
 
@@ -90,8 +89,7 @@ export default class Editable extends PureComponent {
 
     return this.state.editing ? (
       <input
-        autoFocus
+        ref={this.inputEl}
-        ref={this.inputRef}
         className={className}
         type="text"
         value={value}

client/src/js/components/ui/FileInput.js

@@ -1,11 +1,14 @@
 import React, { PureComponent } from 'react';
+import Button from 'components/ui/Button';
 
 export default class FileInput extends PureComponent {
   static defaultProps = {
     type: 'text'
   };
 
-  componentWillMount() {
+  constructor(props) {
+    super(props);
+
     this.input = window.document.createElement('input');
     this.input.setAttribute('type', 'file');
 
@@ -37,9 +40,9 @@ export default class FileInput extends PureComponent {
 
   render() {
     return (
-      <button className="input-file" onClick={this.handleClick}>
+      <Button className="input-file" onClick={this.handleClick}>
         {this.props.name}
-      </button>
+      </Button>
     );
   }
 }

client/src/js/components/ui/TextInput.js

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
-import { Field } from 'formik';
+import { FastField } from 'formik';
 import classnames from 'classnames';
+import capitalize from 'lodash/capitalize';
+import Error from 'components/ui/formik/Error';
 
 export default class TextInput extends PureComponent {
   constructor(props) {
@@ -36,44 +38,49 @@ export default class TextInput extends PureComponent {
   };
 
   render() {
-    const { name, placeholder, ...props } = this.props;
+    const { name, label = capitalize(name), noError, ...props } = this.props;
 
     return (
-      <Field
+      <FastField
         name={name}
-        render={({ field, form }) => (
+        render={({ field, form }) => {
-          <div className="textinput">
+          return (
-            <input
+            <>
-              className={field.value && 'value'}
+              <div className="textinput">
-              type="text"
+                <input
-              name={name}
+                  className={field.value && 'value'}
-              autoCapitalize="off"
+                  type="text"
-              autoCorrect="off"
+                  name={name}
-              autoComplete="off"
+                  autoCapitalize="off"
-              spellCheck="false"
+                  autoCorrect="off"
-              ref={this.input}
+                  autoComplete="off"
-              onFocus={this.handleFocus}
+                  spellCheck="false"
-              {...field}
+                  ref={this.input}
-              {...props}
+                  onFocus={this.handleFocus}
-            />
+                  {...field}
-            <span
+                  {...props}
-              className={classnames('textinput-1', {
+                />
-                value: field.value,
+                <span
-                error: form.touched[name] && form.errors[name]
+                  className={classnames('textinput-1', {
-              })}
+                    value: field.value,
-            >
+                    error: form.touched[name] && form.errors[name]
-              {placeholder}
+                  })}
-            </span>
+                >
-            <span
+                  {label}
-              className={classnames('textinput-2', {
+                </span>
-                value: field.value,
+                <span
-                error: form.touched[name] && form.errors[name]
+                  className={classnames('textinput-2', {
-              })}
+                    value: field.value,
-            >
+                    error: form.touched[name] && form.errors[name]
-              {placeholder}
+                  })}
-            </span>
+                >
-          </div>
+                  {label}
-        )}
+                </span>
+              </div>
+              {!noError && <Error name={name} />}
+            </>
+          );
+        }}
       />
     );
   }

client/src/js/components/ui/formik/Checkbox.js

@@ -1,25 +1,27 @@
-import React from 'react';
+import React, { memo } from 'react';
-import { Field } from 'formik';
+import { FastField } from 'formik';
 import Checkbox from 'components/ui/Checkbox';
 
 const FormikCheckbox = ({ name, onChange, ...props }) => (
-  <Field
+  <FastField
     name={name}
-    render={({ field, form }) => (
+    render={({ field, form }) => {
-      <Checkbox
+      return (
-        name={name}
+        <Checkbox
-        checked={field.value}
+          name={name}
-        onChange={e => {
+          checked={field.value}
-          form.setFieldTouched(name, true);
+          onChange={e => {
-          field.onChange(e);
+            form.setFieldTouched(name, true);
-          if (onChange) {
+            field.onChange(e);
-            onChange(e);
+            if (onChange) {
-          }
+              onChange(e);
-        }}
+            }
-        {...props}
+          }}
-      />
+          {...props}
-    )}
+        />
+      );
+    }}
   />
 );
 
-export default FormikCheckbox;
+export default memo(FormikCheckbox);

client/src/js/index.js

@@ -1,5 +1,5 @@
-import 'es6-promise/auto';
+//import 'es6-promise/auto';
-import 'utils/ie11';
+//import 'utils/ie11';
 import React from 'react';
 import { render } from 'react-dom';
 

client/src/js/modules/socket.js

@@ -123,7 +123,7 @@ export default function handleSocket({
     connection_update({ server, errorType }) {
       if (
         errorType === 'verify' &&
-        confirm(
+        window.confirm(
           'The server is using a self-signed certificate, continue anyway?'
         )
       ) {

client/src/js/state/input.js

@@ -19,7 +19,7 @@ export const getCurrentInputHistoryEntry = state => {
 export default createReducer(initialState, {
   [actions.INPUT_HISTORY_ADD](state, { line }) {
     if (line.trim() && line !== state.history[0]) {
-      if (history.length === HISTORY_MAX_LENGTH) {
+      if (state.history.length === HISTORY_MAX_LENGTH) {
         state.history.pop();
       }
       state.history.unshift(line);

client/src/js/utils/color.js

@@ -1,6 +1,26 @@
-import fnv1a from '@sindresorhus/fnv1a';
+/* eslint-disable no-bitwise */
 import { hsluvToHex } from 'hsluv';
 
+//
+// github.com/sindresorhus/fnv1a
+//
+const OFFSET_BASIS_32 = 2166136261;
+
+const fnv1a = string => {
+  let hash = OFFSET_BASIS_32;
+
+  for (let i = 0; i < string.length; i++) {
+    hash ^= string.charCodeAt(i);
+
+    // 32-bit FNV prime: 2**24 + 2**8 + 0x93 = 16777619
+    // Using bitshift for accuracy and performance. Numbers in JS suck.
+    hash +=
+      (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+  }
+
+  return hash >>> 0;
+};
+
 const colors = [];
 
 for (let i = 0; i < 72; i++) {

client/src/js/utils/linkify.js

@@ -34,6 +34,7 @@ export default function linkify(text) {
           target="_blank"
           rel="noopener noreferrer"
           href={match.getAnchorHref()}
+          key={i}
         >
           {match.matchedText}
         </a>

client/webpack.config.dev.js

@@ -1,6 +1,6 @@
 var path = require('path');
 var webpack = require('webpack');
-var autoprefixer = require('autoprefixer');
+var postcssPresetEnv = require('postcss-preset-env');
 
 module.exports = {
   mode: 'development',
@@ -44,8 +44,10 @@ module.exports = {
             options: {
               plugins: [
                 require('postcss-flexbugs-fixes'),
-                autoprefixer({
+                postcssPresetEnv({
-                  flexbox: 'no-2009'
+                  autoprefixer: {
+                    flexbox: 'no-2009'
+                  }
                 })
               ]
             }

client/webpack.config.prod.js

@@ -1,14 +1,16 @@
 var path = require('path');
-var webpack = require('webpack');
 var MiniCssExtractPlugin = require('mini-css-extract-plugin');
-var autoprefixer = require('autoprefixer');
+var postcssPresetEnv = require('postcss-preset-env');
 var cssnano = require('cssnano');
+var TerserPlugin = require('terser-webpack-plugin');
+var ManifestPlugin = require('webpack-manifest-plugin');
 
 module.exports = {
   mode: 'production',
   entry: ['./src/js/index'],
   output: {
-    filename: 'bundle.js'
+    filename: '[name].[chunkhash:8].js',
+    chunkFilename: '[name].[chunkhash:8].js'
   },
   resolve: {
     alias: {
@@ -29,7 +31,11 @@ module.exports = {
           fix: true
         }
       },
-      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
       {
         test: /\.css$/,
         use: [
@@ -43,10 +49,13 @@ module.exports = {
           {
             loader: 'postcss-loader',
             options: {
+              ident: 'postcss',
               plugins: [
                 require('postcss-flexbugs-fixes'),
-                autoprefixer({
+                postcssPresetEnv({
-                  flexbox: 'no-2009'
+                  autoprefixer: {
+                    flexbox: 'no-2009'
+                  }
                 }),
                 cssnano({
                   discardUnused: {
@@ -62,17 +71,24 @@ module.exports = {
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'bundle.css'
+      filename: '[name].[contenthash:8].css',
+      chunkFilename: '[name].[contenthash:8].css'
+    }),
+    new ManifestPlugin({
+      fileName: 'asset-manifest.json'
     })
   ],
   optimization: {
+    minimizer: [new TerserPlugin()],
     splitChunks: {
+      chunks: 'all',
       cacheGroups: {
         styles: {
           test: /\.css$/,
           chunks: 'all'
         }
       }
-    }
+    },
+    runtimeChunk: true
   }
 };

go.mod

@@ -10,7 +10,7 @@ require (
 	github.com/boltdb/bolt v0.0.0-20180302180052-fd01fc79c553
 	github.com/couchbase/vellum v0.0.0-20180910213445-01d5c56e6095 // indirect
 	github.com/cznic/b v0.0.0-20180115125044-35e9bbe41f07 // indirect
-	github.com/cznic/mathutil v0.0.0-20180504122225-ca4c9f2c1369 // indirect
+	github.com/cznic/mathutil v0.0.0-20181021201202-eba54fb065b7 // indirect
 	github.com/cznic/strutil v0.0.0-20171016134553-529a34b1c186 // indirect
 	github.com/dsnet/compress v0.0.0-20171208185109-cc9eb1d7ad76
 	github.com/edsrzf/mmap-go v0.0.0-20170320065105-0bce6a688712 // indirect
@@ -21,7 +21,7 @@ require (
 	github.com/glycerine/go-unsnap-stream v0.0.0-20180323001048-9f0cb55181dd // indirect
 	github.com/glycerine/goconvey v0.0.0-20180728074245-46e3a41ad493 // indirect
 	github.com/golang/snappy v0.0.0-20180518054509-2e65f85255db // indirect
-	github.com/gopherjs/gopherjs v0.0.0-20181004151105-1babbf986f6f // indirect
+	github.com/gopherjs/gopherjs v0.0.0-20181103185306-d547d1d9531e // indirect
 	github.com/gorilla/websocket v1.4.0
 	github.com/inconshreveable/mousetrap v1.0.0 // indirect
 	github.com/jmhodges/levigo v0.0.0-20161115193449-c42d9e0ca023 // indirect
@@ -29,30 +29,30 @@ require (
 	github.com/jtolds/gls v4.2.1+incompatible // indirect
 	github.com/kjk/betterguid v0.0.0-20170621091430-c442874ba63a
 	github.com/kr/pretty v0.1.0 // indirect
+	github.com/kr/pty v1.1.3 // indirect
 	github.com/mailru/easyjson v0.0.0-20180823135443-60711f1a8329
-	github.com/miekg/dns v1.0.12 // indirect
+	github.com/miekg/dns v1.0.15 // indirect
 	github.com/mitchellh/go-homedir v1.0.0
 	github.com/mitchellh/mapstructure v1.1.2 // indirect
 	github.com/mschoch/smat v0.0.0-20160514031455-90eadee771ae // indirect
 	github.com/onsi/gomega v1.4.2 // indirect
 	github.com/philhofer/fwd v1.0.0 // indirect
-	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d // indirect
 	github.com/smartystreets/goconvey v0.0.0-20180222194500-ef6db91d284a // indirect
-	github.com/spf13/cast v1.2.0
+	github.com/spf13/cast v1.3.0
 	github.com/spf13/cobra v0.0.3
 	github.com/spf13/pflag v1.0.3 // indirect
 	github.com/spf13/viper v1.2.1
 	github.com/steveyen/gtreap v0.0.0-20150807155958-0abe01ef9be2 // indirect
 	github.com/stretchr/testify v1.2.2
-	github.com/syndtr/goleveldb v0.0.0-20180815032940-ae2bd5eed72d // indirect
+	github.com/syndtr/goleveldb v0.0.0-20181102132633-a4119e27a65d // indirect
-	github.com/tecbot/gorocksdb v0.0.0-20180907100951-214b6b7bc0f0 // indirect
+	github.com/tecbot/gorocksdb v0.0.0-20181010114359-8752a9433481 // indirect
 	github.com/tinylib/msgp v0.0.0-20180215042507-3b5c87ab5fb0 // indirect
 	github.com/willf/bitset v1.1.9 // indirect
-	github.com/xenolf/lego v1.0.1
+	github.com/xenolf/lego v1.1.0
-	golang.org/x/crypto v0.0.0-20181001203147-e3636079e1a4 // indirect
+	golang.org/x/crypto v0.0.0-20181030102418-4d3f4d9ffa16 // indirect
-	golang.org/x/net v0.0.0-20181005035420-146acd28ed58
+	golang.org/x/net v0.0.0-20181102091132-c10e9556a7bc
-	golang.org/x/sys v0.0.0-20181005133103-4497e2df6f9e // indirect
+	golang.org/x/sys v0.0.0-20181031143558-9b800f95dbbc // indirect
 	gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 // indirect
 	gopkg.in/square/go-jose.v2 v2.1.9 // indirect
 )

go.sum

@@ -18,6 +18,7 @@ github.com/cznic/b v0.0.0-20180115125044-35e9bbe41f07 h1:UHFGPvSxX4C4YBApSPvmUfL
 github.com/cznic/b v0.0.0-20180115125044-35e9bbe41f07/go.mod h1:URriBxXwVq5ijiJ12C7iIZqlA69nTlI+LgI6/pwftG8=
 github.com/cznic/mathutil v0.0.0-20180504122225-ca4c9f2c1369 h1:XNT/Zf5l++1Pyg08/HV04ppB0gKxAqtZQBRYiYrUuYk=
 github.com/cznic/mathutil v0.0.0-20180504122225-ca4c9f2c1369/go.mod h1:e6NPNENfs9mPDVNRekM7lKScauxd5kXTr1Mfyig6TDM=
+github.com/cznic/mathutil v0.0.0-20181021201202-eba54fb065b7/go.mod h1:e6NPNENfs9mPDVNRekM7lKScauxd5kXTr1Mfyig6TDM=
 github.com/cznic/strutil v0.0.0-20171016134553-529a34b1c186 h1:0rkFMAbn5KBKNpJyHQ6Prb95vIKanmAe62KxsrN+sqA=
 github.com/cznic/strutil v0.0.0-20171016134553-529a34b1c186/go.mod h1:AHHPPPXTw0h6pVabbcbyGRK1DckRn7r/STdZEeIDzZc=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
@@ -44,6 +45,8 @@ github.com/golang/snappy v0.0.0-20180518054509-2e65f85255db h1:woRePGFeVFfLKN/pO
 github.com/golang/snappy v0.0.0-20180518054509-2e65f85255db/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
 github.com/gopherjs/gopherjs v0.0.0-20181004151105-1babbf986f6f h1:JJ2EP5vV3LAD2U1CxQtD7PTOO15Y96kXmKDz7TjxGHs=
 github.com/gopherjs/gopherjs v0.0.0-20181004151105-1babbf986f6f/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
+github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
+github.com/gopherjs/gopherjs v0.0.0-20181103185306-d547d1d9531e/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
 github.com/gorilla/websocket v1.4.0 h1:WDFjx/TMzVgy9VdMMQi2K2Emtwi2QcUQsztZ/zLaH/Q=
 github.com/gorilla/websocket v1.4.0/go.mod h1:E7qHFY5m1UJ88s3WnNqhKjPHQ0heANvMoAMk2YaljkQ=
 github.com/hashicorp/hcl v1.0.0 h1:0Anlzjpi4vEasTeNFn2mLJgTSwt0+6sfsiTG8qcWGx4=
@@ -63,6 +66,7 @@ github.com/kjk/betterguid v0.0.0-20170621091430-c442874ba63a/go.mod h1:uxRAhHE1n
 github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
+github.com/kr/pty v1.1.3/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
 github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
 github.com/magiconair/properties v1.8.0 h1:LLgXmsheXeRoUOBOjtwPQCWIYqM/LU1ayDtDePerRcY=
@@ -71,6 +75,10 @@ github.com/mailru/easyjson v0.0.0-20180823135443-60711f1a8329 h1:2gxZ0XQIU/5z3Z3
 github.com/mailru/easyjson v0.0.0-20180823135443-60711f1a8329/go.mod h1:C1wdFJiN94OJF2b5HbByQZoLdCWB1Yqtg26g4irojpc=
 github.com/miekg/dns v1.0.12 h1:814rTNaw7Q7pGncpSEDT06YS8rdGmpUEnKgpQzctJsk=
 github.com/miekg/dns v1.0.12/go.mod h1:W1PPwlIAgtquWBMBEV9nkV9Cazfe8ScdGz/Lj7v3Nrg=
+github.com/miekg/dns v1.0.14 h1:9jZdLNd/P4+SfEJ0TNyxYpsK8N4GtfylBLqtbYN1sbA=
+github.com/miekg/dns v1.0.14/go.mod h1:W1PPwlIAgtquWBMBEV9nkV9Cazfe8ScdGz/Lj7v3Nrg=
+github.com/miekg/dns v1.0.15 h1:9+UupePBQCG6zf1q/bGmTO1vumoG13jsrbWOSX1W6Tw=
+github.com/miekg/dns v1.0.15/go.mod h1:W1PPwlIAgtquWBMBEV9nkV9Cazfe8ScdGz/Lj7v3Nrg=
 github.com/mitchellh/go-homedir v1.0.0 h1:vKb8ShqSby24Yrqr/yDYkuFz8d0WUjys40rvnGC8aR0=
 github.com/mitchellh/go-homedir v1.0.0/go.mod h1:SfyaCUpYCn1Vlf4IUYiD9fPX4A5wJrkLzIz1N1q0pr0=
 github.com/mitchellh/mapstructure v1.0.0 h1:vVpGvMXJPqSDh2VYHF7gsfQj8Ncx+Xw5Y1KHeTRY+7I=
@@ -97,6 +105,8 @@ github.com/spf13/afero v1.1.2 h1:m8/z1t7/fwjysjQRYbP0RD+bUIF/8tJwPdEZsI83ACI=
 github.com/spf13/afero v1.1.2/go.mod h1:j4pytiNVoe2o6bmDsKpLACNPDBIoEAkihy7loJ1B0CQ=
 github.com/spf13/cast v1.2.0 h1:HHl1DSRbEQN2i8tJmtS6ViPyHx35+p51amrdsiTCrkg=
 github.com/spf13/cast v1.2.0/go.mod h1:r2rcYCSwa1IExKTDiTfzaxqT2FNHs8hODu4LnUfgKEg=
+github.com/spf13/cast v1.3.0 h1:oget//CVOEoFewqQxwr0Ej5yjygnqGkvggSE/gB35Q8=
+github.com/spf13/cast v1.3.0/go.mod h1:Qx5cxh0v+4UWYiBimWS+eyWzqEqokIECu5etghLkUJE=
 github.com/spf13/cobra v0.0.3 h1:ZlrZ4XsMRm04Fr5pSFxBgfND2EBVa1nLpiy1stUsX/8=
 github.com/spf13/cobra v0.0.3/go.mod h1:1l0Ry5zgKvJasoi3XT1TypsSe7PqH0Sj9dhYf7v3XqQ=
 github.com/spf13/jwalterweatherman v1.0.0 h1:XHEdyB+EcvlqZamSM4ZOMGlc93t6AcsBEu9Gc1vn7yk=
@@ -113,25 +123,50 @@ github.com/stretchr/testify v1.2.2 h1:bSDNvY7ZPG5RlJ8otE/7V6gMiyenm9RtJ7IUVIAoJ1
 github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
 github.com/syndtr/goleveldb v0.0.0-20180815032940-ae2bd5eed72d h1:4J9HCZVpvDmj2tiKGSTUnb3Ok/9CEQb9oqu9LHKQQpc=
 github.com/syndtr/goleveldb v0.0.0-20180815032940-ae2bd5eed72d/go.mod h1:Z4AUp2Km+PwemOoO/VB5AOx9XSsIItzFjoJlOSiYmn0=
+github.com/syndtr/goleveldb v0.0.0-20181012014443-6b91fda63f2e/go.mod h1:Z4AUp2Km+PwemOoO/VB5AOx9XSsIItzFjoJlOSiYmn0=
+github.com/syndtr/goleveldb v0.0.0-20181102132633-a4119e27a65d/go.mod h1:Z4AUp2Km+PwemOoO/VB5AOx9XSsIItzFjoJlOSiYmn0=
 github.com/tecbot/gorocksdb v0.0.0-20180907100951-214b6b7bc0f0 h1:EEAoIgdGCLu3zSryPb/VFHaIGxDlgku3BflSZAtvJD0=
 github.com/tecbot/gorocksdb v0.0.0-20180907100951-214b6b7bc0f0/go.mod h1:ahpPrc7HpcfEWDQRZEmnXMzHY03mLDYMCxeDzy46i+8=
+github.com/tecbot/gorocksdb v0.0.0-20181010114359-8752a9433481/go.mod h1:ahpPrc7HpcfEWDQRZEmnXMzHY03mLDYMCxeDzy46i+8=
 github.com/tinylib/msgp v0.0.0-20180215042507-3b5c87ab5fb0 h1:uAwzi+JwkDdOtQZVqPYljFvJr7i43ZgUYXKypk9Eibk=
 github.com/tinylib/msgp v0.0.0-20180215042507-3b5c87ab5fb0/go.mod h1:+d+yLhGm8mzTaHzB+wgMYrodPfmZrzkirds8fDWklFE=
 github.com/willf/bitset v1.1.9 h1:GBtFynGY9ZWZmEC9sWuu41/7VBXPFCOAbCbqTflOg9c=
 github.com/willf/bitset v1.1.9/go.mod h1:RjeCKbqT1RxIR/KWY6phxZiaY1IyutSBfGjNPySAYV4=
 github.com/xenolf/lego v1.0.1 h1:Rr9iqO8MoNxY6OvqdIZTnNZ8bwt0RNz00nGXfoTq4Bc=
 github.com/xenolf/lego v1.0.1/go.mod h1:fwiGnfsIjG7OHPfOvgK7Y/Qo6+2Ox0iozjNTkZICKbY=
+github.com/xenolf/lego v1.1.0 h1:Ias1pE9hO98/fI23RLza0T3461YiM720d96oxTRPyuM=
+github.com/xenolf/lego v1.1.0/go.mod h1:fwiGnfsIjG7OHPfOvgK7Y/Qo6+2Ox0iozjNTkZICKbY=
 golang.org/x/crypto v0.0.0-20181001203147-e3636079e1a4 h1:Vk3wNqEZwyGyei9yq5ekj7frek2u7HUfffJ1/opblzc=
 golang.org/x/crypto v0.0.0-20181001203147-e3636079e1a4/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
+golang.org/x/crypto v0.0.0-20181025213731-e84da0312774 h1:a4tQYYYuK9QdeO/+kEvNYyuR21S+7ve5EANok6hABhI=
+golang.org/x/crypto v0.0.0-20181025213731-e84da0312774/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
+golang.org/x/crypto v0.0.0-20181029021203-45a5f77698d3 h1:KYQXGkl6vs02hK7pK4eIbw0NpNPedieTSTEiJ//bwGs=
+golang.org/x/crypto v0.0.0-20181029021203-45a5f77698d3/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
+golang.org/x/crypto v0.0.0-20181030102418-4d3f4d9ffa16 h1:y6ce7gCWtnH+m3dCjzQ1PCuwl28DDIc3VNnvY29DlIA=
+golang.org/x/crypto v0.0.0-20181030102418-4d3f4d9ffa16/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
 golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20181005035420-146acd28ed58 h1:otZG8yDCO4LVps5+9bxOeNiCvgmOyt96J3roHTYs7oE=
 golang.org/x/net v0.0.0-20181005035420-146acd28ed58/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20181023162649-9b4f9f5ad519 h1:x6rhz8Y9CjbgQkccRGmELH6K+LJj7tOoh3XWeC1yaQM=
+golang.org/x/net v0.0.0-20181023162649-9b4f9f5ad519/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20181029044818-c44066c5c816 h1:mVFkLpejdFLXVUv9E42f3XJVfMdqd0IVLVIVLjZWn5o=
+golang.org/x/net v0.0.0-20181029044818-c44066c5c816/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20181102050134-b7e296877c6e h1:lIf8v8wMiSq+MBwNne+ZEkKrswgZ2NzQ1oeBn8eCA4c=
+golang.org/x/net v0.0.0-20181102050134-b7e296877c6e/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20181102091132-c10e9556a7bc h1:ZMCWScCvS2fUVFw8LOpxyUUW5qiviqr4Dg5NdjLeiLU=
+golang.org/x/net v0.0.0-20181102091132-c10e9556a7bc/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f h1:wMNYb4v58l5UBM7MYRLPG6ZhfOqbKu7X5eyFl8ZhKvA=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.0.0-20180906133057-8cf3aee42992/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180909124046-d0be0721c37e/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20181005133103-4497e2df6f9e h1:EfdBzeKbFSvOjoIqSZcfS8wp0FBLokGBEs9lz1OtSg0=
 golang.org/x/sys v0.0.0-20181005133103-4497e2df6f9e/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20181026203630-95b1ffbd15a5 h1:x6r4Jo0KNzOOzYd8lbcRsqjuqEASK6ob3auvWYM4/8U=
+golang.org/x/sys v0.0.0-20181026203630-95b1ffbd15a5/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20181030150119-7e31e0c00fa0 h1:biUuj9O+0+XckRUCDzjoOGm6yFV5c0IHbm1ODP3e4Zw=
+golang.org/x/sys v0.0.0-20181030150119-7e31e0c00fa0/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20181031143558-9b800f95dbbc h1:SdCq5U4J+PpbSDIl9bM0V1e1Ug1jsnBkAFvTs1htn7U=
+golang.org/x/sys v0.0.0-20181031143558-9b800f95dbbc/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/text v0.3.0 h1:g61tztE5qeGQ89tm6NTjjM9VPIm088od1l6aSorWRWg=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=

server/index.egon

@@ -1,12 +1,14 @@
-<%! data *indexData, cssPath, jsPath string %>
+<%! data *indexData, cssPath string, inlineScript string, scripts []string %>
 
 <%% import "github.com/mailru/easyjson" %%>
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#222">
 
   <title>Dispatch</title>
 
@@ -16,12 +18,20 @@
   <link rel="preload" href="/font/Montserrat-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   <link rel="preload" href="/font/RobotoMono-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
 
+  <% if cssPath != "" { %>
   <link href="/<%== cssPath %>" rel="stylesheet">
+  <% } %>
   <link rel="icon" href="data:;base64,=">
+
+  <script><%== inlineScript %></script>
 </head>
+
 <body>
   <div id="root"></div>
   <script id="env" type="application/json"><% easyjson.MarshalToWriter(data, w) %></script>
-  <script src="/<%== jsPath %>"></script>
+  <% for _, script := range scripts { %>
+  <script src="/<%== script %>"></script>
+  <% } %>
 </body>
+
 </html>

server/index.egon.go

@@ -7,13 +7,23 @@ import (
 "github.com/mailru/easyjson"
 )
 
-func IndexTemplate(w io.Writer, data *indexData, cssPath, jsPath string) error {
+func IndexTemplate(w io.Writer, data *indexData, cssPath string, inlineScript string, scripts []string) error {
-io.WriteString(w, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>Dispatch</title><link rel=\"preload\" href=\"/font/fontello.woff2?48901973\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link rel=\"preload\" href=\"/font/RobotoMono-Regular.woff2\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link rel=\"preload\" href=\"/font/Montserrat-Regular.woff2\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link rel=\"preload\" href=\"/font/Montserrat-Bold.woff2\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link rel=\"preload\" href=\"/font/RobotoMono-Bold.woff2\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link href=\"/")
+io.WriteString(w, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"theme-color\" content=\"#222\"><title>Dispatch</title><link rel=\"preload\" href=\"/font/fontello.woff2?48901973\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link rel=\"preload\" href=\"/font/RobotoMono-Regular.woff2\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link rel=\"preload\" href=\"/font/Montserrat-Regular.woff2\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link rel=\"preload\" href=\"/font/Montserrat-Bold.woff2\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\"><link rel=\"preload\" href=\"/font/RobotoMono-Bold.woff2\" as=\"font\" type=\"font/woff2\" crossorigin=\"anonymous\">")
+ if cssPath != "" { 
+io.WriteString(w, "<link href=\"/")
 io.WriteString(w,  cssPath )
-io.WriteString(w, "\" rel=\"stylesheet\"><link rel=\"icon\" href=\"data:;base64,=\"></head><body><div id=\"root\"></div><script id=\"env\" type=\"application/json\">")
+io.WriteString(w, "\" rel=\"stylesheet\">")
+ } 
+io.WriteString(w, "<link rel=\"icon\" href=\"data:;base64,=\"><script>")
+io.WriteString(w,  inlineScript )
+io.WriteString(w, "</script></head><body><div id=\"root\"></div><script id=\"env\" type=\"application/json\">")
  easyjson.MarshalToWriter(data, w) 
-io.WriteString(w, "</script><script src=\"/")
+io.WriteString(w, "</script>")
-io.WriteString(w,  jsPath )
+ for _, script := range scripts { 
-io.WriteString(w, "\"></script></body></html>")
+io.WriteString(w, "<script src=\"/")
+io.WriteString(w,  script )
+io.WriteString(w, "\"></script>")
+ } 
+io.WriteString(w, "</body></html>")
 return nil
 }

server/serve_files.go

@@ -3,8 +3,9 @@ package server
 import (
 	"bytes"
 	"compress/gzip"
-	"crypto/md5"
+	"crypto/sha256"
 	"encoding/base64"
+	"encoding/json"
 	"io"
 	"io/ioutil"
 	"log"
@@ -16,9 +17,8 @@ import (
 	"time"
 
 	"github.com/dsnet/compress/brotli"
-	"github.com/spf13/viper"
-
 	"github.com/khlieng/dispatch/assets"
+	"github.com/spf13/viper"
 )
 
 const longCacheControl = "public, max-age=31536000, immutable"
@@ -34,25 +34,32 @@ type File struct {
 	Compressed   bool
 }
 
-var (
+type h2PushAsset struct {
-	files = []*File{
+	path string
-		&File{
+	hash string
-			Path:         "bundle.js",
+}
-			Asset:        "bundle.js.br",
+
-			ContentType:  "text/javascript",
+func newH2PushAsset(name string) h2PushAsset {
-			CacheControl: longCacheControl,
+	return h2PushAsset{
-			Compressed:   true,
+		path: "/" + name,
-		},
+		hash: strings.Split(name, ".")[1],
-		&File{
-			Path:         "bundle.css",
-			Asset:        "bundle.css.br",
-			ContentType:  "text/css",
-			CacheControl: longCacheControl,
-			Compressed:   true,
-		},
 	}
+}
+
+var (
+	files []*File
+
+	indexStylesheet    string
+	indexScripts       []string
+	inlineScript       string
+	inlineScriptSha256 string
+
+	h2PushAssets      []h2PushAsset
+	h2PushCookieValue string
 
 	contentTypes = map[string]string{
+		".js":    "text/javascript",
+		".css":   "text/css",
 		".woff2": "font/woff2",
 		".woff":  "application/font-woff",
 		".ttf":   "application/x-font-ttf",
@@ -63,47 +70,58 @@ var (
 )
 
 func (d *Dispatch) initFileServer() {
-	if !viper.GetBool("dev") {
+	if viper.GetBool("dev") {
-		data, err := assets.Asset(files[0].Asset)
+		indexScripts = []string{"bundle.js"}
+	} else {
+		data, err := assets.Asset("asset-manifest.json")
 		if err != nil {
 			log.Fatal(err)
 		}
 
-		hash := md5.Sum(data)
+		manifest := map[string]string{}
-		files[0].Hash = base64.RawURLEncoding.EncodeToString(hash[:])[:8]
+		err = json.Unmarshal(data, &manifest)
-		files[0].Path = "bundle." + files[0].Hash + ".js"
-
-		br, err := brotli.NewReader(bytes.NewReader(data), nil)
 		if err != nil {
 			log.Fatal(err)
 		}
 
-		buf := &bytes.Buffer{}
+		runtime, err := assets.Asset(manifest["runtime~main.js"] + ".br")
-		gzw, err := gzip.NewWriterLevel(buf, gzip.BestCompression)
 		if err != nil {
 			log.Fatal(err)
 		}
+		runtime = decompressAsset(runtime)
+		inlineScript = string(runtime)
 
-		io.Copy(gzw, br)
+		hash := sha256.New()
-		gzw.Close()
+		hash.Write(runtime)
-		files[0].GzipAsset = buf.Bytes()
+		inlineScriptSha256 = base64.StdEncoding.EncodeToString(hash.Sum(nil))
 
-		data, err = assets.Asset(files[1].Asset)
+		indexStylesheet = manifest["main.css"]
-		if err != nil {
+		indexScripts = []string{
-			log.Fatal(err)
+			manifest["vendors~main.js"],
+			manifest["main.js"],
 		}
 
-		hash = md5.Sum(data)
+		h2PushAssets = []h2PushAsset{
-		files[1].Hash = base64.RawURLEncoding.EncodeToString(hash[:])[:8]
+			newH2PushAsset(indexStylesheet),
-		files[1].Path = "bundle." + files[1].Hash + ".css"
+			newH2PushAsset(indexScripts[0]),
+			newH2PushAsset(indexScripts[1]),
+		}
 
-		br.Reset(bytes.NewReader(data))
+		for _, asset := range h2PushAssets {
-		buf = &bytes.Buffer{}
+			h2PushCookieValue += asset.hash
-		gzw.Reset(buf)
+		}
 
-		io.Copy(gzw, br)
+		for _, assetPath := range manifest {
-		gzw.Close()
+			file := &File{
-		files[1].GzipAsset = buf.Bytes()
+				Path:         assetPath,
+				Asset:        assetPath + ".br",
+				ContentType:  contentTypes[filepath.Ext(assetPath)],
+				CacheControl: longCacheControl,
+				Compressed:   true,
+			}
+
+			files = append(files, file)
+		}
 
 		fonts, err := assets.AssetDir("font")
 		if err != nil {
@@ -121,22 +139,18 @@ func (d *Dispatch) initFileServer() {
 				Compressed:   strings.HasSuffix(font, ".br"),
 			}
 
+			files = append(files, file)
+		}
+
+		for _, file := range files {
 			if file.Compressed {
-				data, err = assets.Asset(file.Asset)
+				data, err := assets.Asset(file.Asset)
 				if err != nil {
 					log.Fatal(err)
 				}
 
-				br.Reset(bytes.NewReader(data))
+				file.GzipAsset = gzipAsset(data)
-				buf = &bytes.Buffer{}
-				gzw.Reset(buf)
-
-				io.Copy(gzw, br)
-				gzw.Close()
-				file.GzipAsset = buf.Bytes()
 			}
-
-			files = append(files, file)
 		}
 
 		if viper.GetBool("https.hsts.enabled") && viper.GetBool("https.enabled") {
@@ -154,6 +168,34 @@ func (d *Dispatch) initFileServer() {
 	}
 }
 
+func decompressAsset(data []byte) []byte {
+	br, err := brotli.NewReader(bytes.NewReader(data), nil)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	buf := &bytes.Buffer{}
+	io.Copy(buf, br)
+	return buf.Bytes()
+}
+
+func gzipAsset(data []byte) []byte {
+	br, err := brotli.NewReader(bytes.NewReader(data), nil)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	buf := &bytes.Buffer{}
+	gzw, err := gzip.NewWriterLevel(buf, gzip.BestCompression)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	io.Copy(gzw, br)
+	gzw.Close()
+	return buf.Bytes()
+}
+
 func (d *Dispatch) serveFiles(w http.ResponseWriter, r *http.Request) {
 	if r.URL.Path == "/" {
 		d.serveIndex(w, r)
@@ -181,7 +223,7 @@ func (d *Dispatch) serveIndex(w http.ResponseWriter, r *http.Request) {
 			connectSrc = "ws://" + r.Host
 		}
 
-		w.Header().Set("Content-Security-Policy", "default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src data:; connect-src "+connectSrc)
+		w.Header().Set("Content-Security-Policy", "default-src 'none'; script-src 'self' 'sha256-"+inlineScriptSha256+"'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src data:; connect-src "+connectSrc)
 	}
 
 	w.Header().Set("Content-Type", "text/html")
@@ -200,22 +242,22 @@ func (d *Dispatch) serveIndex(w http.ResponseWriter, r *http.Request) {
 				"Accept-Encoding": r.Header["Accept-Encoding"],
 			},
 		}
-
 		cookie, err := r.Cookie("push")
 		if err != nil {
-			pusher.Push("/"+files[1].Path, options)
+			for _, asset := range h2PushAssets {
-			pusher.Push("/"+files[0].Path, options)
+				pusher.Push(asset.path, options)
+			}
+
 			setPushCookie(w, r)
 		} else {
 			pushed := false
 
-			if files[1].Hash != cookie.Value[8:] {
+			for i, asset := range h2PushAssets {
-				pusher.Push("/"+files[1].Path, options)
+				if len(cookie.Value) >= (i+1)*8 &&
-				pushed = true
+					asset.hash != cookie.Value[i*8:(i+1)*8] {
-			}
+					pusher.Push(asset.path, options)
-			if files[0].Hash != cookie.Value[:8] {
+					pushed = true
-				pusher.Push("/"+files[0].Path, options)
+				}
-				pushed = true
 			}
 
 			if pushed {
@@ -228,17 +270,17 @@ func (d *Dispatch) serveIndex(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Content-Encoding", "gzip")
 
 		gzw := gzip.NewWriter(w)
-		IndexTemplate(gzw, getIndexData(r, state), files[1].Path, files[0].Path)
+		IndexTemplate(gzw, getIndexData(r, state), indexStylesheet, inlineScript, indexScripts)
 		gzw.Close()
 	} else {
-		IndexTemplate(w, getIndexData(r, state), files[1].Path, files[0].Path)
+		IndexTemplate(w, getIndexData(r, state), indexStylesheet, inlineScript, indexScripts)
 	}
 }
 
 func setPushCookie(w http.ResponseWriter, r *http.Request) {
 	http.SetCookie(w, &http.Cookie{
 		Name:     "push",
-		Value:    files[0].Hash + files[1].Hash,
+		Value:    h2PushCookieValue,
 		Path:     "/",
 		Expires:  time.Now().AddDate(1, 0, 0),
 		HttpOnly: true,