Tree shake DomPurify.

src/components/CollapsableText.vue

@@ -1,8 +1,8 @@
 <template>
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-if="text" class="whitespace-pre-wrap py-2 mx-1">
-        <span v-if="showFullText" v-html="purifyHTML(rewriteDescription(text))" />
-        <span v-else v-html="purifyHTML(rewriteDescription(text.slice(0, 100)))" />
+        <span v-if="showFullText" v-html="fullText()" />
+        <span v-else v-html="colapsedText()" />
         <span v-if="text.length > 100 && !showFullText">...</span>
         <button
             v-if="text.length > 100"
@@ -15,6 +15,8 @@
 </template>
 
 <script>
+import { purifyHTML, rewriteDescription } from "@/utils/HtmlUtils";
+
 export default {
     props: {
         text: String,
@@ -24,5 +26,13 @@ export default {
             showFullText: false,
         };
     },
+    methods: {
+        fullText() {
+            return purifyHTML(rewriteDescription(this.text));
+        },
+        colapsedText() {
+            return purifyHTML(rewriteDescription(this.text.slice(0, 100)));
+        },
+    },
 };
 </script>

src/components/CommentItem.vue

@@ -28,7 +28,7 @@
                 </div>
                 <div class="comment-meta text-sm mb-1.5" v-text="comment.commentedTime" />
             </div>
-            <div class="whitespace-pre-wrap" v-html="purifyHTML(comment.commentText)" />
+            <div class="whitespace-pre-wrap" v-html="purifiedText" />
             <div class="comment-footer mt-1 flex items-center">
                 <div class="i-fa6-solid:thumbs-up" />
                 <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
@@ -60,6 +60,8 @@
 </template>
 
 <script>
+import { purifyHTML } from "@/utils/HtmlUtils";
+
 export default {
     props: {
         comment: {
@@ -79,6 +81,11 @@ export default {
             nextpage: null,
         };
     },
+    computed: {
+        purifiedText() {
+            return purifyHTML(this.comment.commentText);
+        },
+    },
     methods: {
         async loadReplies() {
             if (!this.showingReplies && this.loadingReplies) {

src/components/WatchVideo.vue

@@ -158,7 +158,7 @@
             </span>
 
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-show="showDesc" class="break-words description" v-html="purifyHTML(video.description)" />
+            <div v-show="showDesc" class="break-words description" v-html="purifiedDescription" />
             <template v-if="showDesc">
                 <div
                     v-if="sponsors && sponsors.segments"
@@ -248,6 +248,7 @@ import WatchOnButton from "./WatchOnButton.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import ToastComponent from "./ToastComponent.vue";
 import { parseTimeParam } from "@/utils/Misc";
+import { purifyHTML, rewriteDescription } from "@/utils/HtmlUtils";
 
 export default {
     name: "App",
@@ -315,6 +316,9 @@ export default {
         defaultCounter(_this) {
             return _this.getPreferenceNumber("autoPlayNextCountdown", 5);
         },
+        purifiedDescription() {
+            return purifyHTML(this.video.description);
+        },
     },
     mounted() {
         // check screen size
@@ -451,7 +455,7 @@ export default {
                                 elem.outerHTML = elem.getAttribute("href");
                         });
                         xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
-                        this.video.description = this.rewriteDescription(xmlDoc.querySelector("body").innerHTML);
+                        this.video.description = rewriteDescription(xmlDoc.querySelector("body").innerHTML);
                         this.updateWatched(this.video.relatedStreams);
 
                         this.fetchDeArrowContent(this.video.relatedStreams);