diff --git a/client/components/Message.vue b/client/components/Message.vue
index e931ac46..263f381a 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -14,9 +14,7 @@
[{{ message.command }}]
-
- {{ param }}
-
+ {{ message.params.join(" ") }}
***
diff --git a/client/components/ParsedMessage.vue b/client/components/ParsedMessage.vue
index 842cbb34..84fa1b26 100644
--- a/client/components/ParsedMessage.vue
+++ b/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
);
},
};
diff --git a/client/js/helpers/parse.js b/client/js/helpers/parse.js
index 0ea4df2c..82645f0a 100644
--- a/client/js/helpers/parse.js
+++ b/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,
+ }
);
}