From 60160e2b669938272fef8829f97763375a242283 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Sun, 23 Jun 2024 00:51:12 +0200
Subject: [PATCH] refactor(JSafeHtml): use createVNode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This allows us to directly insert the HTML without adding any extra DOM element

Sources:
* https://discord.com/channels/325477692906536972/568037134968160256/1254047268441690182
* https://discord.com/channels/325477692906536972/568037134968160256/1254210953415753738

createVnode is internally used by createStaticVNode:
https://github.com/vuejs/core/blob/edf263847eddc910f4d2de68287d84b8c66c3860/packages/runtime-core/src/vnode.ts#L742

However, it requires a 2nd parameter, which is the number of nodes we want to insert,
which is unknown/not trivial to calculate at runtime.
According to the comment in the function, that's only needed for hydration (SSR),
so it should be safe for us as we're SPA only.

Here's a playground:
https://play.vuejs.org/#__PROD__eNp9UsFu2zAM/RVBGFAH9Zxs3S6eHaAbCqw9dEUz7GRgVW06divLgkRnGQL/eym5dhyg6E0i3yMfyXfgl1pHuw54zBObm1ojs4CdXmeqbnRrkB2YrYSU7b97KEOWt43uEArWs9K0DTsj7tmEvdmIEn5iI1+T0XKKuCYEzFTeKotUp1MIhqWz6sFqkSnqfu0yOyGDYMHS9QiNKNLB+XnIPq1Wq8W3sVLl2qWTsFfSQ/K4/nA4ofbJ8nH9QC2S5TApzUgfhEZLgUA/xpLjBLEvvKRwspxheMjRUuey3kZPtlW0uINjZtwpqCWYXxprUpbxmPmMy/kRb3wMTQfhGM8ryJ/fiD/ZvYtl/M6ApWVAxqccCrMFHNJXm1vY03tKNm3RSUK/k7wH28rOaRxg3ztVkOwZzqu99iet1fa3vdojKDsO5YQ6ZO/xGafD/nhn9KPci+iL52Wqpy2eOGNmPynUNiUaVZmbcIMC65wMaIAO8ee2LSBk1YkNyRJEcAcvRQ7szrTaDjrcKWNm0dA4hCIFo3uO905ZoB0jHojeRVUwaxeMEmhfUNYKipB5RuTKL0IS+Qz/41mM9c6mmTqOWqsKTI2XiMZSx1JICx4Cez8nFRadnMmi5MyutLa/OzDuFLSxi+hrtPoopK5E9Jn3L3UsSes=

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
---
 frontend/src/components/lib/JSafeHtml.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/lib/JSafeHtml.vue b/frontend/src/components/lib/JSafeHtml.vue
index f493fdfb1ee..a3b7a0094ed 100644
--- a/frontend/src/components/lib/JSafeHtml.vue
+++ b/frontend/src/components/lib/JSafeHtml.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { h } from 'vue';
+import { Static, createVNode, h } from 'vue';
 import { sanitizeHtml } from '@/utils/html';
 
 interface Props {
@@ -7,7 +7,10 @@ interface Props {
   markdown?: boolean;
 }
 
-const JSafeHtml = (props: Props) => h('j-safe-html', { innerHTML: sanitizeHtml(props.html, props.markdown) });
+const JSafeHtml = (props: Props) => h(
+  createVNode(Static, undefined, sanitizeHtml(props.html, Boolean(props.markdown))),
+  { key: props.html }
+);
 
 JSafeHtml.inheritAttrs = false;