Use es6 import syntax

client/components/App.vue

@@ -11,9 +11,9 @@
 </template>
 
 <script>
-const throttle = require("lodash/throttle");
-const constants = require("../js/constants");
-const storage = require("../js/localStorage");
+import throttle from "lodash/throttle";
+import constants from "../js/constants";
+import storage from "../js/localStorage";
 
 import Sidebar from "./Sidebar.vue";
 import ImageViewer from "./ImageViewer.vue";

client/components/Channel.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-const roundBadgeNumber = require("../js/helpers/roundBadgeNumber");
+import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
 import ChannelWrapper from "./ChannelWrapper.vue";
 
 export default {

client/components/ChatInput.vue

@@ -48,12 +48,12 @@
 </template>
 
 <script>
+import Mousetrap from "mousetrap";
+import {wrapCursor} from "undate";
 import autocompletion from "../js/autocompletion";
-const commands = require("../js/commands/index");
-const socket = require("../js/socket");
-const upload = require("../js/upload");
-const Mousetrap = require("mousetrap");
-const {wrapCursor} = require("undate");
+import commands from "../js/commands/index";
+import socket from "../js/socket";
+import upload from "../js/upload";
 
 const formattingHotkeys = {
 	"mod+k": "\x03",

client/components/ChatUserList.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script>
-const fuzzy = require("fuzzy");
+import {filter as fuzzyFilter} from "fuzzy";
 import Username from "./Username.vue";
 import UsernameFiltered from "./UsernameFiltered.vue";
 import {generateUserContextMenu} from "../js/helpers/contextMenu.js";
@@ -85,7 +85,7 @@ export default {
 		// filteredUsers is computed, to avoid unnecessary filtering
 		// as it is shared between filtering and keybindings.
 		filteredUsers() {
-			return fuzzy.filter(this.userSearchInput, this.channel.users, {
+			return fuzzyFilter(this.userSearchInput, this.channel.users, {
 				pre: "<b>",
 				post: "</b>",
 				extract: (u) => u.nick,

client/components/ContextMenu.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-const Mousetrap = require("mousetrap");
+import Mousetrap from "mousetrap";
 
 export default {
 	name: "ContextMenu",

client/components/InlineChannel.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-const socket = require("../js/socket");
+import socket from "../js/socket";
 
 export default {
 	name: "InlineChannel",

client/components/LinkPreview.vue

@@ -107,7 +107,7 @@
 </template>
 
 <script>
-const friendlysize = require("../js/helpers/friendlysize");
+import friendlysize from "../js/helpers/friendlysize";
 
 export default {
 	name: "LinkPreview",

client/components/LinkPreviewFileSize.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-const constants = require("../js/constants");
+import constants from "../js/constants";
 
 export default {
 	name: "LinkPreviewFileSize",

client/components/Message.vue

@@ -75,8 +75,7 @@ import LinkPreview from "./LinkPreview.vue";
 import ParsedMessage from "./ParsedMessage.vue";
 import MessageTypes from "./MessageTypes";
 import {generateUserContextMenu} from "../js/helpers/contextMenu.js";
-
-const constants = require("../js/constants");
+import constants from "../js/constants";
 
 MessageTypes.ParsedMessage = ParsedMessage;
 MessageTypes.LinkPreview = LinkPreview;

client/components/MessageCondensed.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-const constants = require("../js/constants");
+import constants from "../js/constants";
 import Message from "./Message.vue";
 
 export default {

client/components/MessageList.vue

@@ -56,8 +56,8 @@
 <script>
 require("intersection-observer");
 
-const constants = require("../js/constants");
-const clipboard = require("../js/clipboard");
+import constants from "../js/constants";
+import clipboard from "../js/clipboard";
 import socket from "../js/socket";
 import Message from "./Message.vue";
 import MessageCondensed from "./MessageCondensed.vue";

client/components/MessageTypes/index.js

@@ -6,7 +6,7 @@
 // Second argument says it's recursive, third makes sure we only load templates.
 const requireViews = require.context(".", false, /\.vue$/);
 
-module.exports = requireViews.keys().reduce((acc, path) => {
+export default requireViews.keys().reduce((acc, path) => {
 	acc["message-" + path.substring(2, path.length - 4)] = requireViews(path).default;
 
 	return acc;

client/components/NetworkLobby.vue

@@ -47,10 +47,10 @@
 </template>
 
 <script>
-const roundBadgeNumber = require("../js/helpers/roundBadgeNumber");
+import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
 import ChannelWrapper from "./ChannelWrapper.vue";
 import socket from "../js/socket";
-const storage = require("../js/localStorage");
+import storage from "../js/localStorage";
 
 export default {
 	name: "Channel",

client/components/ParsedMessage.vue

@@ -1,5 +1,5 @@
 <script>
-const parse = require("../js/helpers/parse");
+import parse from "../js/helpers/parse";
 
 export default {
 	name: "ParsedMessage",

client/components/Session.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script>
-const Auth = require("../js/auth");
-const socket = require("../js/socket");
+import Auth from "../js/auth";
+import socket from "../js/socket";
 
 export default {
 	name: "Session",

client/components/Username.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-const colorClass = require("../js/helpers/colorClass");
+import colorClass from "../js/helpers/colorClass";
 
 export default {
 	name: "Username",

client/components/UsernameFiltered.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-const colorClass = require("../js/helpers/colorClass");
+import colorClass from "../js/helpers/colorClass";
 
 export default {
 	name: "UsernameFiltered",

client/components/VersionChecker.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-const socket = require("../js/socket");
+import socket from "../js/socket";
 
 export default {
 	name: "VersionChecker",

client/components/Windows/Connect.vue

@@ -3,8 +3,7 @@
 </template>
 
 <script>
-const socket = require("../../js/socket");
-
+import socket from "../../js/socket";
 import NetworkForm from "../NetworkForm.vue";
 
 export default {

client/components/Windows/NetworkEdit.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-const socket = require("../../js/socket");
+import socket from "../../js/socket";
 import NetworkForm from "../NetworkForm.vue";
 
 export default {

client/components/Windows/SignIn.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script>
-const storage = require("../../js/localStorage");
+import storage from "../../js/localStorage";
 import socket from "../../js/socket";
 import RevealPassword from "../RevealPassword.vue";
 

client/js/auth.js

@@ -1,11 +1,11 @@
 "use strict";
 
-const localStorage = require("./localStorage");
-const location = require("./location");
+import storage from "./localStorage";
+import location from "./location";
 
-module.exports = class Auth {
+export default class Auth {
 	static signout() {
-		localStorage.clear();
+		storage.clear();
 		location.reload();
 	}
-};
+}

client/js/autocompletion.js

@@ -1,11 +1,12 @@
 "use strict";
 
-const fuzzy = require("fuzzy");
-const Mousetrap = require("mousetrap");
-const {Textcomplete, Textarea} = require("textcomplete");
-const emojiMap = require("./helpers/simplemap.json");
-const constants = require("./constants");
-const store = require("./store").default;
+import Mousetrap from "mousetrap";
+import {Textcomplete, Textarea} from "textcomplete";
+import fuzzy from "fuzzy";
+
+import emojiMap from "./helpers/simplemap.json";
+import constants from "./constants";
+import store from "./store";
 
 export default enableAutocomplete;
 

client/js/clipboard.js

@@ -1,6 +1,6 @@
 "use strict";
 
-module.exports = function(chat) {
+export default function(chat) {
 	// Disable in Firefox as it already copies flex text correctly
 	if (typeof window.InstallTrigger !== "undefined") {
 		return;
@@ -28,4 +28,4 @@ module.exports = function(chat) {
 		selection.removeAllRanges();
 		selection.addRange(range);
 	}, 0);
-};
+}

client/js/commands/collapse.js

@@ -1,9 +1,9 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
-exports.input = function() {
+function input() {
 	const messageIds = [];
 
 	for (const message of store.state.activeChannel.channel.messages) {
@@ -31,4 +31,6 @@ exports.input = function() {
 	}
 
 	return true;
-};
+}
+
+export default {input};

client/js/commands/expand.js

@@ -1,9 +1,9 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
-exports.input = function() {
+function input() {
 	const messageIds = [];
 
 	for (const message of store.state.activeChannel.channel.messages) {
@@ -31,4 +31,6 @@ exports.input = function() {
 	}
 
 	return true;
-};
+}
+
+export default {input};

client/js/commands/index.js

@@ -8,14 +8,14 @@
 // Second argument says it's recursive, third makes sure we only load javascript.
 const commands = require.context("./", true, /\.js$/);
 
-module.exports = commands.keys().reduce((acc, path) => {
+export default commands.keys().reduce((acc, path) => {
 	const command = path.substring(2, path.length - 3);
 
 	if (command === "index") {
 		return acc;
 	}
 
-	acc[command] = commands(path);
+	acc[command] = commands(path).default;
 
 	return acc;
 }, {});

client/js/commands/join.js

@@ -1,10 +1,10 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
-const {switchToChannel} = require("../router");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
-exports.input = function(args) {
+function input(args) {
 	if (args.length > 0) {
 		let channels = args[0];
 
@@ -44,4 +44,6 @@ exports.input = function(args) {
 
 		return true;
 	}
-};
+}
+
+export default {input};

client/js/constants.js

@@ -29,7 +29,7 @@ const timeFormats = {
 
 const sizeUnits = ["B", "KiB", "MiB", "GiB", "TiB"];
 
-module.exports = {
+export default {
 	colorCodeMap,
 	commands: [],
 	condensedTypes,

client/js/helpers/colorClass.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // Generates a string from "color-1" to "color-32" based on an input string
-module.exports = function(str) {
+export default (str) => {
 	let hash = 0;
 
 	for (let i = 0; i < str.length; i++) {

client/js/helpers/contextMenu.js

@@ -1,4 +1,5 @@
 "use strict";
+
 import socket from "../socket";
 
 export function generateChannelContextMenu($root, channel, network) {

client/js/helpers/friendlysize.js

@@ -2,7 +2,7 @@
 
 const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
-module.exports = function(size) {
+export default (size) => {
 	// Loosely inspired from https://stackoverflow.com/a/18650828/1935861
 	const i = size > 0 ? Math.floor(Math.log(size) / Math.log(1024)) : 0;
 	const fixedSize = parseFloat((size / Math.pow(1024, i)).toFixed(1));

client/js/helpers/ircmessageparser/anyIntersection.js

@@ -11,4 +11,4 @@ function anyIntersection(a, b) {
 	);
 }
 
-module.exports = anyIntersection;
+export default anyIntersection;

client/js/helpers/ircmessageparser/fill.js

@@ -32,4 +32,4 @@ function fill(existingEntries, text) {
 	return result;
 }
 
-module.exports = fill;
+export default fill;

client/js/helpers/ircmessageparser/findChannels.js

@@ -3,7 +3,7 @@
 // Escapes the RegExp special characters "^", "$", "", ".", "*", "+", "?", "(",
 // ")", "[", "]", "{", "}", and "|" in string.
 // See https://lodash.com/docs/#escapeRegExp
-const escapeRegExp = require("lodash/escapeRegExp");
+import escapeRegExp from "lodash/escapeRegExp";
 
 // Given an array of channel prefixes (such as "#" and "&") and an array of user
 // modes (such as "@" and "+"), this function extracts channels and nicks from a
@@ -40,4 +40,4 @@ function findChannels(text, channelPrefixes, userModes) {
 	return result;
 }
 
-module.exports = findChannels;
+export default findChannels;

client/js/helpers/ircmessageparser/findEmoji.js

@@ -17,4 +17,4 @@ function findEmoji(text) {
 	return result;
 }
 
-module.exports = findEmoji;
+export default findEmoji;

client/js/helpers/ircmessageparser/findNames.js

@@ -25,4 +25,4 @@ function findNames(text, users) {
 	return result;
 }
 
-module.exports = findNames;
+export default findNames;

client/js/helpers/ircmessageparser/merge.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const anyIntersection = require("./anyIntersection");
-const fill = require("./fill");
+import anyIntersection from "./anyIntersection";
+import fill from "./fill";
 
 // Merge text part information within a styling fragment
 function assign(textPart, fragment) {
@@ -51,4 +51,4 @@ function merge(textParts, styleFragments, cleanText) {
 	});
 }
 
-module.exports = merge;
+export default merge;

client/js/helpers/ircmessageparser/parseStyle.js

@@ -234,4 +234,4 @@ function prepare(text) {
 	);
 }
 
-module.exports = prepare;
+export default prepare;

client/js/helpers/localetime.js

@@ -2,6 +2,4 @@
 
 import dayjs from "dayjs";
 
-export const localetime = function(time) {
-	return dayjs(time).format("D MMMM YYYY, HH:mm:ss");
-};
+export default (time) => dayjs(time).format("D MMMM YYYY, HH:mm:ss");

client/js/helpers/parse.js

@@ -1,19 +1,20 @@
 "use strict";
 
-const parseStyle = require("./ircmessageparser/parseStyle");
-const findChannels = require("./ircmessageparser/findChannels");
-const findLinks = require("./ircmessageparser/findLinks");
-const findEmoji = require("./ircmessageparser/findEmoji");
-const findNames = require("./ircmessageparser/findNames");
-const merge = require("./ircmessageparser/merge");
-const colorClass = require("./colorClass");
-const emojiMap = require("./fullnamemap.json");
-const LinkPreviewToggle = require("../../components/LinkPreviewToggle.vue").default;
-const LinkPreviewFileSize = require("../../components/LinkPreviewFileSize.vue").default;
-const InlineChannel = require("../../components/InlineChannel.vue").default;
+import parseStyle from "./ircmessageparser/parseStyle";
+import findChannels from "./ircmessageparser/findChannels";
+import findLinks from "./ircmessageparser/findLinks";
+import findEmoji from "./ircmessageparser/findEmoji";
+import findNames from "./ircmessageparser/findNames";
+import merge from "./ircmessageparser/merge";
+import colorClass from "./colorClass";
+import emojiMap from "./fullnamemap.json";
+import LinkPreviewToggle from "../../components/LinkPreviewToggle.vue";
+import LinkPreviewFileSize from "../../components/LinkPreviewFileSize.vue";
+import InlineChannel from "../../components/InlineChannel.vue";
+import store from "../store";
+import {generateUserContextMenu} from "./contextMenu";
+
 const emojiModifiersRegex = /[\u{1f3fb}-\u{1f3ff}]/gu;
-const store = require("../store").default;
-const {generateUserContextMenu} = require("./contextMenu");
 
 // Create an HTML `span` with styling information for a given fragment
 function createFragment(fragment, createElement) {
@@ -71,13 +72,7 @@ function createFragment(fragment, createElement) {
 
 // Transform an IRC message potentially filled with styling control codes, URLs,
 // nicknames, and channels into a string of HTML elements to display on the client.
-module.exports = function parse(
-	createElement,
-	text,
-	message = undefined,
-	network = undefined,
-	$root
-) {
+function parse(createElement, text, message = undefined, network = undefined, $root) {
 	// Extract the styling information and get the plain text version from it
 	const styleFragments = parseStyle(text);
 	const cleanText = styleFragments.map((fragment) => fragment.text).join("");
@@ -220,4 +215,6 @@ module.exports = function parse(
 
 		return fragments;
 	});
-};
+}
+
+export default parse;

client/js/helpers/roundBadgeNumber.js

@@ -1,6 +1,6 @@
 "use strict";
 
-module.exports = function(count) {
+export default (count) => {
 	if (count < 1000) {
 		return count.toString();
 	}

client/js/keybinds.js

@@ -1,9 +1,10 @@
 "use strict";
 
+import Mousetrap from "mousetrap";
+
 const $ = require("jquery");
-const Mousetrap = require("mousetrap");
-const store = require("./store").default;
-const {switchToChannel} = require("./router");
+import store from "./store";
+import {switchToChannel} from "./router";
 
 // Switch to the next/previous window in the channel list.
 Mousetrap.bind(["alt+up", "alt+down"], function(e, keys) {

client/js/localStorage.js

@@ -10,7 +10,7 @@
 // https://github.com/thelounge/thelounge/issues/2699
 // https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document
 
-module.exports = {
+export default {
 	set(key, value) {
 		try {
 			window.localStorage.setItem(key, value);

client/js/location.js

@@ -2,7 +2,7 @@
 
 // This is a thin wrapper around `window.location`, in order to contain the
 // side-effects. Do not add logic to it as it cannot be tested, only mocked.
-module.exports = {
+export default {
 	reload() {
 		window.location.reload();
 	},

client/js/router.js

@@ -1,19 +1,19 @@
 "use strict";
 
-const Vue = require("vue").default;
-const VueRouter = require("vue-router").default;
+import Vue from "vue";
+import VueRouter from "vue-router";
+
 Vue.use(VueRouter);
 
-const store = require("./store").default;
-
-const SignIn = require("../components/Windows/SignIn.vue").default;
-const Connect = require("../components/Windows/Connect.vue").default;
-const Settings = require("../components/Windows/Settings.vue").default;
-const Help = require("../components/Windows/Help.vue").default;
-const Changelog = require("../components/Windows/Changelog.vue").default;
-const NetworkEdit = require("../components/Windows/NetworkEdit.vue").default;
-const RoutedChat = require("../components/RoutedChat.vue").default;
-const constants = require("./constants");
+import SignIn from "../components/Windows/SignIn.vue";
+import Connect from "../components/Windows/Connect.vue";
+import Settings from "../components/Windows/Settings.vue";
+import Help from "../components/Windows/Help.vue";
+import Changelog from "../components/Windows/Changelog.vue";
+import NetworkEdit from "../components/Windows/NetworkEdit.vue";
+import RoutedChat from "../components/RoutedChat.vue";
+import constants from "./constants";
+import store from "./store";
 
 const router = new VueRouter({
 	routes: [
@@ -127,9 +127,8 @@ function navigate(routeName, params = {}) {
 	router.push({name: routeName, params}).catch(() => {});
 }
 
-module.exports = {
-	initialize,
-	router,
-	navigate,
-	switchToChannel: (channel) => navigate("RoutedChat", {id: channel.id}),
-};
+function switchToChannel(channel) {
+	return navigate("RoutedChat", {id: channel.id});
+}
+
+export {initialize, router, navigate, switchToChannel};

client/js/settings.js

@@ -1,4 +1,4 @@
-const socket = require("./socket");
+import socket from "./socket";
 
 const defaultSettingConfig = {
 	apply() {},

client/js/socket-events/auth.js

@@ -1,9 +1,10 @@
 "use strict";
 
-const socket = require("../socket");
-const storage = require("../localStorage");
-const {router, navigate} = require("../router");
-const store = require("../store").default;
+import socket from "../socket";
+import storage from "../localStorage";
+import {router, navigate} from "../router";
+import store from "../store";
+import location from "../location";
 let lastServerHash = null;
 
 socket.on("auth:success", function() {

client/js/socket-events/changelog.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("changelog", function(data) {
 	store.commit("versionData", data);

client/js/socket-events/commands.js

@@ -1,5 +1,5 @@
-const constants = require("../constants");
-const socket = require("../socket");
+import constants from "../constants";
+import socket from "../socket";
 
 socket.on("commands", function(commands) {
 	if (commands) {

client/js/socket-events/configuration.js

@@ -1,9 +1,9 @@
 "use strict";
 
-const socket = require("../socket");
-const upload = require("../upload");
-const store = require("../store").default;
-const router = require("../router");
+import socket from "../socket";
+import upload from "../upload";
+import store from "../store";
+import {initialize as routerInitialize} from "../router";
 
 socket.once("configuration", function(data) {
 	store.commit("serverConfiguration", data);
@@ -17,7 +17,7 @@ socket.once("configuration", function(data) {
 		upload.initialize();
 	}
 
-	router.initialize();
+	routerInitialize();
 
 	// If localStorage contains a theme that does not exist on this server, switch
 	// back to its default theme.

client/js/socket-events/connection.js

@@ -1,5 +1,5 @@
-const store = require("../store").default;
-const socket = require("../socket");
+import store from "../store";
+import socket from "../socket";
 
 socket.on("disconnect", handleDisconnect);
 socket.on("connect_error", handleDisconnect);

client/js/socket-events/index.js

@@ -1,25 +1,25 @@
 "use strict";
 
-require("./connection");
-require("./auth");
-require("./commands");
-require("./init");
-require("./join");
-require("./more");
-require("./msg");
-require("./msg_preview");
-require("./msg_special");
-require("./names");
-require("./network");
-require("./nick");
-require("./open");
-require("./part");
-require("./quit");
-require("./sync_sort");
-require("./topic");
-require("./users");
-require("./sign_out");
-require("./sessions_list");
-require("./configuration");
-require("./changelog");
-require("./setting");
+import "./connection";
+import "./auth";
+import "./commands";
+import "./init";
+import "./join";
+import "./more";
+import "./msg";
+import "./msg_preview";
+import "./msg_special";
+import "./names";
+import "./network";
+import "./nick";
+import "./open";
+import "./part";
+import "./quit";
+import "./sync_sort";
+import "./topic";
+import "./users";
+import "./sign_out";
+import "./sessions_list";
+import "./configuration";
+import "./changelog";
+import "./setting";

client/js/socket-events/init.js

@@ -1,9 +1,9 @@
 "use strict";
 
-const socket = require("../socket");
-const storage = require("../localStorage");
-const {router, switchToChannel, navigate} = require("../router");
-const store = require("../store").default;
+import socket from "../socket";
+import storage from "../localStorage";
+import {router, switchToChannel, navigate} from "../router";
+import store from "../store";
 
 socket.on("init", function(data) {
 	store.commit("networks", mergeNetworkData(data.networks));

client/js/socket-events/join.js

@@ -1,8 +1,8 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
-const {switchToChannel} = require("../router");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 socket.on("join", function(data) {
 	store.getters.initChannel(data.chan);

client/js/socket-events/more.js

@@ -2,8 +2,8 @@
 
 import Vue from "vue";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("more", function(data) {
 	const channel = store.getters.findChannel(data.chan);

client/js/socket-events/msg.js

@@ -1,10 +1,9 @@
 "use strict";
 
-const socket = require("../socket");
-const cleanIrcMessage = require("../helpers/ircmessageparser/cleanIrcMessage");
-const webpush = require("../webpush");
-const store = require("../store").default;
-const {switchToChannel} = require("../router");
+import socket from "../socket";
+import cleanIrcMessage from "../helpers/ircmessageparser/cleanIrcMessage";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 let pop;
 
@@ -129,7 +128,7 @@ function notifyMessage(targetId, channel, activeChannel, msg) {
 				const timestamp = Date.parse(msg.time);
 
 				try {
-					if (webpush.hasServiceWorker) {
+					if (store.state.hasServiceWorker) {
 						navigator.serviceWorker.ready.then((registration) => {
 							registration.active.postMessage({
 								type: "notification",

client/js/socket-events/msg_preview.js

@@ -2,8 +2,8 @@
 
 import Vue from "vue";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("msg:preview", function(data) {
 	const {channel} = store.getters.findChannel(data.chan);

client/js/socket-events/msg_special.js

@@ -1,8 +1,8 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
-const {switchToChannel} = require("../router");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 socket.on("msg:special", function(data) {
 	const channel = store.getters.findChannel(data.chan);

client/js/socket-events/names.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("names", function(data) {
 	const channel = store.getters.findChannel(data.id);

client/js/socket-events/network.js

@@ -2,9 +2,9 @@
 
 import Vue from "vue";
 
-const socket = require("../socket");
-const store = require("../store").default;
-const {switchToChannel} = require("../router");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 socket.on("network", function(data) {
 	const network = data.networks[0];

client/js/socket-events/nick.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("nick", function(data) {
 	const network = store.getters.findNetwork(data.network);

client/js/socket-events/open.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 // Sync unread badge and marker when other clients open a channel
 socket.on("open", function(id) {

client/js/socket-events/part.js

@@ -1,8 +1,8 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
-const {switchToChannel} = require("../router");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 socket.on("part", function(data) {
 	// When parting from the active channel/query, jump to the network's lobby

client/js/socket-events/quit.js

@@ -1,8 +1,8 @@
 "use strict";
 
-const socket = require("../socket");
-const {switchToChannel, navigate} = require("../router");
-const store = require("../store").default;
+import socket from "../socket";
+import {switchToChannel, navigate} from "../router";
+import store from "../store";
 
 socket.on("quit", function(data) {
 	// If we're in a channel, and it's on the network that is being removed,

client/js/socket-events/sessions_list.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("sessions:list", function(data) {
 	data.sort((a, b) => b.lastUse - a.lastUse);

client/js/socket-events/setting.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("setting:new", function(data) {
 	const name = data.name;

client/js/socket-events/sign_out.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const Auth = require("../auth");
+import socket from "../socket";
+import Auth from "../auth";
 
 socket.on("sign-out", function() {
 	Auth.signout();

client/js/socket-events/sync_sort.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("sync_sort", function(data) {
 	const order = data.order;

client/js/socket-events/topic.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("topic", function(data) {
 	const channel = store.getters.findChannel(data.chan);

client/js/socket-events/users.js

@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const store = require("../store").default;
+import socket from "../socket";
+import store from "../store";
 
 socket.on("users", function(data) {
 	if (store.state.activeChannel && store.state.activeChannel.channel.id === data.chan) {

client/js/socket.js

@@ -1,6 +1,6 @@
 "use strict";
 
-const io = require("socket.io-client");
+import io from "socket.io-client";
 
 const socket = io({
 	transports: JSON.parse(document.body.dataset.transports),
@@ -9,4 +9,4 @@ const socket = io({
 	reconnection: !document.body.classList.contains("public"),
 });
 
-module.exports = socket;
+export default socket;

client/js/store-settings.js

@@ -1,5 +1,5 @@
-const storage = require("./localStorage");
-const socket = require("./socket");
+import storage from "./localStorage";
+import socket from "./socket";
 import {config, createState} from "./settings";
 
 export function createSettingsStore(store) {

client/js/store.js

@@ -1,8 +1,8 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import {createSettingsStore} from "./store-settings";
+import storage from "./localStorage";
 
-const storage = require("./localStorage");
 const appName = document.title;
 
 Vue.use(Vuex);
@@ -26,6 +26,7 @@ const store = new Vuex.Store({
 		isAutoCompleting: false,
 		isConnected: false,
 		networks: [],
+		hasServiceWorker: false,
 		pushNotificationState: "unsupported",
 		serverConfiguration: null,
 		sessions: [],
@@ -67,6 +68,9 @@ const store = new Vuex.Store({
 		sortNetworks(state, sortFn) {
 			state.networks.sort(sortFn);
 		},
+		hasServiceWorker(state) {
+			state.hasServiceWorker = true;
+		},
 		pushNotificationState(state, pushNotificationState) {
 			state.pushNotificationState = pushNotificationState;
 		},

client/js/upload.js

@@ -1,8 +1,9 @@
 "use strict";
 
-const socket = require("./socket");
-const updateCursor = require("undate").update;
-const store = require("./store").default;
+import {update as updateCursor} from "undate";
+
+import socket from "./socket";
+import store from "./store";
 
 class Uploader {
 	init() {
@@ -219,7 +220,7 @@ class Uploader {
 
 const instance = new Uploader();
 
-module.exports = {
+export default {
 	abort: () => instance.abort(),
 	initialize: () => instance.init(),
 	mounted: () => instance.mounted(),

client/js/vue.js

@@ -1,20 +1,19 @@
 "use strict";
 
-const Vue = require("vue").default;
-
-const store = require("./store").default;
-const App = require("../components/App.vue").default;
-const {localetime} = require("./helpers/localetime");
-const storage = require("./localStorage");
-const {router, navigate} = require("./router");
-const constants = require("./constants");
-const socket = require("./socket");
+import Vue from "vue";
+import store from "./store";
+import App from "../components/App.vue";
+import localetime from "./helpers/localetime";
+import storage from "./localStorage";
+import {router, navigate} from "./router";
+import constants from "./constants";
+import socket from "./socket";
 
 Vue.filter("localetime", localetime);
 
-require("./socket-events");
-require("./webpush");
-require("./keybinds");
+import "./socket-events";
+import "./webpush";
+import "./keybinds";
 
 const favicon = document.getElementById("favicon");
 const faviconNormal = favicon.getAttribute("href");

client/js/webpush.js

@@ -1,8 +1,10 @@
 "use strict";
 
-const socket = require("./socket");
-const store = require("./store").default;
-const {switchToChannel} = require("./router");
+import socket from "./socket";
+import store from "./store";
+import {switchToChannel} from "./router";
+
+export default {togglePushSubscription};
 
 if ("serviceWorker" in navigator) {
 	navigator.serviceWorker.addEventListener("message", (event) => {
@@ -17,8 +19,6 @@ if ("serviceWorker" in navigator) {
 	});
 }
 
-module.exports.hasServiceWorker = false;
-
 socket.once("push:issubscribed", function(hasSubscriptionOnServer) {
 	if (!isAllowedServiceWorkersHost()) {
 		store.commit("pushNotificationState", "nohttps");
@@ -32,7 +32,7 @@ socket.once("push:issubscribed", function(hasSubscriptionOnServer) {
 	navigator.serviceWorker
 		.register("service-worker.js")
 		.then((registration) => {
-			module.exports.hasServiceWorker = true;
+			store.commit("hasServiceWorker");
 
 			if (!registration.pushManager) {
 				return;
@@ -62,7 +62,7 @@ socket.once("push:issubscribed", function(hasSubscriptionOnServer) {
 		});
 });
 
-module.exports.togglePushSubscription = () => {
+function togglePushSubscription() {
 	store.commit("pushNotificationState", "loading");
 
 	navigator.serviceWorker.ready
@@ -94,7 +94,7 @@ module.exports.togglePushSubscription = () => {
 			store.commit("pushNotificationState", "unsupported");
 			console.error(err); // eslint-disable-line no-console
 		});
-};
+}
 
 function isAllowedServiceWorkersHost() {
 	return (