From 95a7a30c4157693251dcd57361d687bab3b43344 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Thu, 2 Jun 2022 00:04:21 -0700
Subject: [PATCH] Convert two messages to composition API, downgrade
 textcomplete to fix mobile, re-add an env var to webpack

---
 client/components/MessageTypes/error.vue      | 40 ++++++++++---------
 .../MessageTypes/monospace_block.vue          | 14 ++++---
 client/js/autocompletion.ts                   |  6 +--
 package.json                                  |  2 +-
 src/plugins/dev-server.ts                     |  2 -
 webpack.config.ts                             |  2 +
 yarn.lock                                     |  8 ++--
 7 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/client/components/MessageTypes/error.vue b/client/components/MessageTypes/error.vue
index a7d4bafe..24e09d45 100644
--- a/client/components/MessageTypes/error.vue
+++ b/client/components/MessageTypes/error.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import ParsedMessage from "../ParsedMessage.vue";
-import {defineComponent, PropType} from "vue";
+import {computed, defineComponent, PropType} from "vue";
 import {ClientNetwork, ClientMessage} from "../../js/types";
 
 export default defineComponent({
@@ -24,43 +24,47 @@ export default defineComponent({
 			required: true,
 		},
 	},
-	computed: {
-		errorMessage() {
-			switch (this.message.error) {
+	setup(props) {
+		const errorMessage = computed(() => {
+			switch (props.message.error) {
 				case "bad_channel_key":
-					return `Cannot join ${this.message.channel} - Bad channel key.`;
+					return `Cannot join ${props.message.channel} - Bad channel key.`;
 				case "banned_from_channel":
-					return `Cannot join ${this.message.channel} - You have been banned from the channel.`;
+					return `Cannot join ${props.message.channel} - You have been banned from the channel.`;
 				case "cannot_send_to_channel":
-					return `Cannot send to channel ${this.message.channel}`;
+					return `Cannot send to channel ${props.message.channel}`;
 				case "channel_is_full":
-					return `Cannot join ${this.message.channel} - Channel is full.`;
+					return `Cannot join ${props.message.channel} - Channel is full.`;
 				case "chanop_privs_needed":
 					return "Cannot perform action: You're not a channel operator.";
 				case "invite_only_channel":
-					return `Cannot join ${this.message.channel} - Channel is invite only.`;
+					return `Cannot join ${props.message.channel} - Channel is invite only.`;
 				case "no_such_nick":
-					return `User ${this.message.nick} hasn't logged in or does not exist.`;
+					return `User ${props.message.nick} hasn't logged in or does not exist.`;
 				case "not_on_channel":
 					return "Cannot perform action: You're not on the channel.";
 				case "password_mismatch":
 					return "Password mismatch.";
 				case "too_many_channels":
-					return `Cannot join ${this.message.channel} - You've already reached the maximum number of channels allowed.`;
+					return `Cannot join ${props.message.channel} - You've already reached the maximum number of channels allowed.`;
 				case "unknown_command":
-					return `Unknown command: ${this.message.command}`;
+					return `Unknown command: ${props.message.command}`;
 				case "user_not_in_channel":
-					return `User ${this.message.nick} is not on the channel.`;
+					return `User ${props.message.nick} is not on the channel.`;
 				case "user_on_channel":
-					return `User ${this.message.nick} is already on the channel.`;
+					return `User ${props.message.nick} is already on the channel.`;
 				default:
-					if (this.message.reason) {
-						return `${this.message.reason} (${this.message.error})`;
+					if (props.message.reason) {
+						return `${props.message.reason} (${props.message.error})`;
 					}
 
-					return this.message.error;
+					return props.message.error;
 			}
-		},
+		});
+
+		return {
+			errorMessage,
+		};
 	},
 });
 </script>
diff --git a/client/components/MessageTypes/monospace_block.vue b/client/components/MessageTypes/monospace_block.vue
index 953f977f..a1d29b1a 100644
--- a/client/components/MessageTypes/monospace_block.vue
+++ b/client/components/MessageTypes/monospace_block.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from "vue";
+import {computed, defineComponent, PropType} from "vue";
 import {ClientNetwork, ClientMessage} from "../../js/types";
 import ParsedMessage from "../ParsedMessage.vue";
 
@@ -24,9 +24,9 @@ export default defineComponent({
 			required: true,
 		},
 	},
-	computed: {
-		cleanText() {
-			let lines = this.message.text.split("\n");
+	setup(props) {
+		const cleanText = computed(() => {
+			let lines = props.message.text.split("\n");
 
 			// If all non-empty lines of the MOTD start with a hyphen (which is common
 			// across MOTDs), remove all the leading hyphens.
@@ -39,7 +39,11 @@ export default defineComponent({
 				.map((line) => line.replace(/\s*$/, ""))
 				.join("\n")
 				.replace(/^[\r\n]+|[\r\n]+$/g, "");
-		},
+		});
+
+		return {
+			cleanText,
+		};
 	},
 });
 </script>
diff --git a/client/js/autocompletion.ts b/client/js/autocompletion.ts
index bf184498..660df578 100644
--- a/client/js/autocompletion.ts
+++ b/client/js/autocompletion.ts
@@ -1,8 +1,8 @@
 import constants from "./constants";
 
 import Mousetrap from "mousetrap";
-import {Textcomplete} from "@textcomplete/core/dist/Textcomplete";
-import {TextareaEditor} from "@textcomplete/textarea/dist/TextareaEditor";
+import {Strategy, Textcomplete} from "@textcomplete/core";
+import {TextareaEditor} from "@textcomplete/textarea";
 
 import fuzzy from "fuzzy";
 
@@ -25,7 +25,7 @@ const emojiStrategy = {
 		return `<span class="emoji">${String(emojiMap[original])}</span> ${string}`;
 	},
 	replace([, original]) {
-		return "$1" + String(emojiMap[original]);
+		return String(emojiMap[original]);
 	},
 	index: 2,
 };
diff --git a/package.json b/package.json
index c7bf30a4..a0b0a8dc 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "@babel/preset-typescript": "7.16.7",
     "@fortawesome/fontawesome-free": "5.15.4",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
-    "@textcomplete/core": "0.1.11",
+    "@textcomplete/core": "0.1.10",
     "@textcomplete/textarea": "0.1.10",
     "@types/bcryptjs": "2.4.2",
     "@types/chai": "4.3.1",
diff --git a/src/plugins/dev-server.ts b/src/plugins/dev-server.ts
index e9e55981..5c2456c5 100644
--- a/src/plugins/dev-server.ts
+++ b/src/plugins/dev-server.ts
@@ -26,8 +26,6 @@ export default (app: express.Application) => {
 		"webpack-hot-middleware/client?path=storage/__webpack_hmr"
 	);
 
-	webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-
 	const compiler = webpack(webpackConfig);
 
 	app.use(
diff --git a/webpack.config.ts b/webpack.config.ts
index e54c1ea2..36f561dd 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -95,6 +95,8 @@ const config: webpack.Configuration = {
 		new VueLoaderPlugin(),
 		new webpack.DefinePlugin({
 			__VUE_PROD_DEVTOOLS__: false,
+			// TODO; we should be able to eventually set this to false once vue-draggable-next updates
+			__VUE_OPTIONS_API__: true,
 		}),
 		new MiniCssExtractPlugin({
 			filename: "css/style.css",
diff --git a/yarn.lock b/yarn.lock
index 31ecbd20..0c26f7e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1422,10 +1422,10 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@textcomplete/core@0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@textcomplete/core/-/core-0.1.11.tgz#93d0a76cbb205567e70da5a29331ad5e7b108c4c"
-  integrity sha512-zNp6oWpy1fw+/ayviQxKhRLv8FuCgyTfZlFHTavtgr5tDz13mD2lbHYKPpYdftAKfu5oMeImpbmyuYwXV4uq/A==
+"@textcomplete/core@0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@textcomplete/core/-/core-0.1.10.tgz#80211c20f28a378cc9ee8b6633ddf2034785d8c3"
+  integrity sha512-+T7dOElhJivE7+V0JUeDK5TdHUU8Sbuhvnp8VmtHimLaTruv5FJS1dgSjAqGlRcMw9AX459JY9JCbkX9ezGh2g==
   dependencies:
     eventemitter3 "^4.0.4"