Remove references to vue.js

client/components/InlineChannel.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+const socket = require("../js/socket");
+
 export default {
 	name: "InlineChannel",
 	props: {
@@ -18,8 +20,6 @@ export default {
 				this.$root.switchToChannel(existingChannel);
 			}
 
-			// TODO: Required here because it breaks tests
-			const socket = require("../js/socket");
 			socket.emit("input", {
 				target: this.$store.state.activeChannel.channel.id,
 				text: "/join " + this.channel,

client/js/socket-events/init.js

@@ -3,7 +3,6 @@
 const socket = require("../socket");
 const webpush = require("../webpush");
 const storage = require("../localStorage");
-const {initChannel} = require("../vue");
 const {router, switchToChannel, navigate} = require("../router");
 const store = require("../store").default;
 
@@ -60,7 +59,7 @@ function mergeNetworkData(newNetworks) {
 		if (!currentNetwork) {
 			network.isJoinChannelShown = false;
 			network.isCollapsed = collapsedNetworks.has(network.uuid);
-			network.channels.forEach(initChannel);
+			network.channels.forEach(store.getters.initChannel);
 
 			continue;
 		}
@@ -96,7 +95,7 @@ function mergeChannelData(oldChannels, newChannels) {
 
 		// This is a new channel that was joined while client was disconnected, initialize it
 		if (!currentChannel) {
-			initChannel(channel);
+			store.getters.initChannel(channel);
 
 			continue;
 		}

client/js/socket-events/join.js

@@ -1,12 +1,11 @@
 "use strict";
 
 const socket = require("../socket");
-const {initChannel} = require("../vue");
 const store = require("../store").default;
 const {switchToChannel} = require("../router");
 
 socket.on("join", function(data) {
-	initChannel(data.chan);
+	store.getters.initChannel(data.chan);
 
 	const network = store.getters.findNetwork(data.network);
 

client/js/socket-events/network.js

@@ -3,7 +3,6 @@
 import Vue from "vue";
 
 const socket = require("../socket");
-const {initChannel} = require("../vue");
 const store = require("../store").default;
 const {switchToChannel} = require("../router");
 
@@ -12,7 +11,7 @@ socket.on("network", function(data) {
 
 	network.isJoinChannelShown = false;
 	network.isCollapsed = false;
-	network.channels.forEach(initChannel);
+	network.channels.forEach(store.getters.initChannel);
 
 	store.commit("networks", [...store.state.networks, network]);
 	switchToChannel(network.channels[0]);

client/js/store.js

@@ -146,6 +146,24 @@ const store = new Vuex.Store({
 
 			return alertEventCount + channelname + appName;
 		},
+		initChannel: () => (channel) => {
+			// TODO: This should be a mutation
+			channel.pendingMessage = "";
+			channel.inputHistoryPosition = 0;
+			channel.inputHistory = [""];
+			channel.historyLoading = false;
+			channel.scrolledToBottom = true;
+			channel.editTopic = false;
+
+			channel.moreHistoryAvailable = channel.totalMessages > channel.messages.length;
+			delete channel.totalMessages;
+
+			if (channel.type === "channel") {
+				channel.usersOutdated = true;
+			}
+
+			return channel;
+		},
 	},
 });
 

client/js/vue.js

@@ -8,9 +8,15 @@ const localetime = require("./helpers/localetime");
 const storage = require("./localStorage");
 const {router, navigate} = require("./router");
 const constants = require("./constants");
+const socket = require("./socket");
 
 Vue.filter("localetime", localetime);
 
+require("./socket-events");
+require("./contextMenuFactory");
+require("./webpush");
+require("./keybinds");
+
 const favicon = document.getElementById("favicon");
 const faviconNormal = favicon.getAttribute("href");
 const faviconAlerted = favicon.dataset.other;
@@ -19,19 +25,7 @@ const vueApp = new Vue({
 	el: "#viewport",
 	router,
 	mounted() {
-		// TODO: Hackfix because socket-events require vueApp somewhere
-		// and that breaks due to cyclical depenency as by this point vue.js
-		// does not export anything yet.
-		setTimeout(() => {
-			const socket = require("./socket");
-
-			require("./socket-events");
-			require("./contextMenuFactory");
-			require("./webpush");
-			require("./keybinds");
-
-			socket.open();
-		}, 1);
+		socket.open();
 	},
 	methods: {
 		switchToChannel(channel) {
@@ -85,24 +79,3 @@ Vue.config.errorHandler = function(e) {
 	store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
 	console.error(e); // eslint-disable-line
 };
-
-function initChannel(channel) {
-	channel.pendingMessage = "";
-	channel.inputHistoryPosition = 0;
-	channel.inputHistory = [""];
-	channel.historyLoading = false;
-	channel.scrolledToBottom = true;
-	channel.editTopic = false;
-
-	channel.moreHistoryAvailable = channel.totalMessages > channel.messages.length;
-	delete channel.totalMessages;
-
-	if (channel.type === "channel") {
-		channel.usersOutdated = true;
-	}
-}
-
-module.exports = {
-	vueApp,
-	initChannel,
-};

webpack.config-test.js

@@ -1,5 +1,7 @@
 "use strict";
 
+const webpack = require("webpack");
+const path = require("path");
 const config = require("./webpack.config.js");
 
 config.target = "node";
@@ -17,4 +19,15 @@ for (const rule of config.module.rules) {
 // - https://github.com/webpack/webpack/issues/6727#issuecomment-372589122
 config.optimization.splitChunks = false;
 
+// "Fixes" Critical dependency: the request of a dependency is an expression
+config.plugins.push(new webpack.ContextReplacementPlugin(/vue-server-renderer$/));
+
+// Client tests that require Vue may end up requireing socket.io
+config.plugins.push(
+	new webpack.NormalModuleReplacementPlugin(
+		/js(\/|\\)socket\.js/,
+		path.resolve(__dirname, "scripts/noop.js")
+	)
+);
+
 module.exports = config;