common-ui: Reimplement isomorphic-dompurifyon my own to ditch `requ…

…ire()` statement
somnisomni · Dec 17, 2024 · 58766d9 · 58766d9
1 parent 08576bb
commit 58766d9
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 21 deletions.
diff --git a/packages/CommonUI/package.json b/packages/CommonUI/package.json
@@ -26,6 +26,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/clone-deep": "^4.0.4",
     "@types/node": "^20.17.10",
+    "@types/jsdom": "^21.1.7",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.17.0",
@@ -51,7 +52,7 @@
   "dependencies": {
     "clone-deep": "^4.0.1",
     "dompurify": "^3.2.3",
-    "isomorphic-dompurify": "^2.19.0",
+    "jsdom": "^25.0.1",
     "marked": "^15.0.4"
   }
 }
diff --git a/packages/CommonUI/src/components/global/MarkdownRenderer.vue b/packages/CommonUI/src/components/global/MarkdownRenderer.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
 import { marked, Renderer } from "marked";
 import { Component, Prop, toNative, Vue } from "vue-facing-decorator";
-import DOMPurify from "isomorphic-dompurify";
+import { resolveDOMPurify } from "@/plugins/isomorphic-dompurify";
 
 function createMarkedCustomRenderer(): Renderer {
   const renderer = new Renderer();
@@ -25,9 +25,10 @@ export class MarkdownRenderer extends Vue {
   @Prop({ type: String, required: true }) declare readonly source: string;
 
   markedRenderer = createMarkedCustomRenderer();
+  dompurify = resolveDOMPurify().dompurify;
 
   get compiled() {
-    return DOMPurify.sanitize(
+    return this.dompurify.sanitize(
       marked.parse(this.source, {
         gfm: true,
         async: false,

diff --git a/packages/CommonUI/src/plugins/isomorphic-dompurify.ts b/packages/CommonUI/src/plugins/isomorphic-dompurify.ts
@@ -0,0 +1,15 @@
+// reference: https://github.com/kkomelin/isomorphic-dompurify/blob/master/src/index.js
+// Rewritten in ESM because of `require()` statements, which causes several errors
+
+import DOMPurify, { type WindowLike } from "dompurify";
+import { JSDOM } from "jsdom";
+
+export function resolveDOMPurify(): { dompurify: typeof DOMPurify, window: WindowLike } {
+  const isClientSide = typeof window !== "undefined" && !!window;
+  const windowLike: WindowLike = isClientSide ? window : new JSDOM("<!DOCTYPE html>").window;
+
+  return {
+    dompurify: DOMPurify(windowLike),
+    window: windowLike,
+  };
+}
diff --git a/packages/CommonUI/vite.config.mts b/packages/CommonUI/vite.config.mts
@@ -33,7 +33,7 @@ export default defineConfig({
     },
     rollupOptions: {
       treeshake: "recommended",
-      external: ["vue", /^vuetify(\/.*)?$/, "vue-facing-decorator", /^@?myboothmanager(\/.*)?$/, "dompurify", "isomorphic-dompurify"],
+      external: ["vue", /^vuetify(\/.*)?$/, "vue-facing-decorator", /^@?myboothmanager(\/.*)?$/, "dompurify", "jsdom", "marked"],
       output: {
         globals: {
           "vue": "Vue",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml