Fix up ParsedMessage for vue 3

client/components/Message.vue

@@ -14,9 +14,7 @@
 		</span>
 		<template v-if="message.type === 'unhandled'">
 			<span class="from">[{{ message.command }}]</span>
-			<span class="content">
-				<span v-for="(param, id) in message.params" :key="id">{{ param }} </span>
-			</span>
+			<span class="content">{{ message.params.join(" ") }}</span>
 		</template>
 		<template v-else-if="isAction()">
 			<span class="from"><span class="only-copy">*** </span></span>

client/components/ParsedMessage.vue

@@ -9,14 +9,11 @@ export default {
 		message: Object,
 		network: Object,
 	},
-	render(createElement, context) {
+	render(context) {
 		return parse(
-			createElement,
-			typeof context.props.text !== "undefined"
-				? context.props.text
-				: context.props.message.text,
-			context.props.message,
-			context.props.network
+			typeof context.text !== "undefined" ? context.text : context.message.text,
+			context.message,
+			context.network
 		);
 	},
 };

client/js/helpers/parse.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import {h as createElement} from "vue";
 import parseStyle from "./ircmessageparser/parseStyle";
 import findChannels from "./ircmessageparser/findChannels";
 import {findLinks} from "./ircmessageparser/findLinks";
@@ -15,7 +16,7 @@ import Username from "../../components/Username.vue";
 const emojiModifiersRegex = /[\u{1f3fb}-\u{1f3ff}]|\u{fe0f}/gu;
 
 // Create an HTML `span` with styling information for a given fragment
-function createFragment(fragment, createElement) {
+function createFragment(fragment) {
 	const classes = [];
 
 	if (fragment.bold) {
@@ -70,7 +71,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.
-function parse(createElement, text, message = undefined, network = undefined) {
+function parse(text, message = undefined, network = undefined) {
 	// Extract the styling information and get the plain text version from it
 	const styleFragments = parseStyle(text);
 	const cleanText = styleFragments.map((fragment) => fragment.text).join("");
@@ -90,9 +91,7 @@ function parse(createElement, text, message = undefined, network = undefined) {
 	// Merge the styling information with the channels / URLs / nicks / text objects and
 	// generate HTML strings with the resulting fragments
 	return merge(parts, styleFragments, cleanText).map((textPart) => {
-		const fragments = textPart.fragments.map((fragment) =>
-			createFragment(fragment, createElement)
-		);
+		const fragments = textPart.fragments.map((fragment) => createFragment(fragment));
 
 		// Wrap these potentially styled fragments with links and channel buttons
 		if (textPart.link) {
@@ -103,12 +102,10 @@ function parse(createElement, text, message = undefined, network = undefined) {
 			const link = createElement(
 				"a",
 				{
-					attrs: {
-						href: textPart.link,
-						dir: preview ? null : "auto",
-						target: "_blank",
-						rel: "noopener",
-					},
+					href: textPart.link,
+					dir: preview ? null : "auto",
+					target: "_blank",
+					rel: "noopener",
 				},
 				fragments
 			);
@@ -122,18 +119,14 @@ function parse(createElement, text, message = undefined, network = undefined) {
 			if (preview.size > 0) {
 				linkEls.push(
 					createElement(LinkPreviewFileSize, {
-						props: {
-							size: preview.size,
-						},
+						size: preview.size,
 					})
 				);
 			}
 
 			linkEls.push(
 				createElement(LinkPreviewToggle, {
-					props: {
-						link: preview,
-					},
+					link: preview,
 				})
 			);
 
@@ -142,9 +135,7 @@ function parse(createElement, text, message = undefined, network = undefined) {
 			return createElement(
 				"span",
 				{
-					attrs: {
-						dir: "auto",
-					},
+					dir: "auto",
 				},
 				linkEls
 			);
@@ -152,11 +143,11 @@ function parse(createElement, text, message = undefined, network = undefined) {
 			return createElement(
 				InlineChannel,
 				{
-					props: {
-						channel: textPart.channel,
-					},
+					channel: textPart.channel,
 				},
-				fragments
+				{
+					default: () => fragments,
+				}
 			);
 		} else if (textPart.emoji) {
 			const emojiWithoutModifiers = textPart.emoji.replace(emojiModifiersRegex, "");
@@ -168,11 +159,9 @@ function parse(createElement, text, message = undefined, network = undefined) {
 				"span",
 				{
 					class: ["emoji"],
-					attrs: {
-						role: "img",
-						"aria-label": title,
-						title: title,
-					},
+					role: "img",
+					"aria-label": title,
+					title: title,
 				},
 				fragments
 			);
@@ -180,16 +169,14 @@ function parse(createElement, text, message = undefined, network = undefined) {
 			return createElement(
 				Username,
 				{
-					props: {
-						user: {
-							nick: textPart.nick,
-						},
-					},
-					attrs: {
-						dir: "auto",
+					user: {
+						nick: textPart.nick,
 					},
+					dir: "auto",
 				},
-				fragments
+				{
+					default: () => fragments,
+				}
 			);
 		}