feat(ssr): implement SSR feature

examples/nuxt3/app.vue

@@ -2,6 +2,8 @@
     <h1>Global directive</h1>
     <div v-dompurify-html="rawHtml">Expect text with color</div>
     <div v-dompurify-html:plaintext="rawHtml">Expect only plaintext</div>
+    <div v-dompurify-html="ssrHtml" />
+    <div v-dompurify-html:plaintext="ssrHtml" />
     <h1>Directive local to a component</h1>
     <div v-clean-html="rawHtml">Expect text with color</div>
 </template>
@@ -12,5 +14,7 @@ import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
 
 const rawHtml = ref('<span style="color: red">Hello!</span><img src=a onerror="alert(1)">');
 
+const ssrHtml = useState(() => '<span style="color: red">Hello SSR!</span><img src=a onerror="alert(1)">');
+
 const vCleanHtml = buildVueDompurifyHTMLDirective();
 </script>

examples/nuxt3/nuxt.config.ts

@@ -1,3 +1,4 @@
 export default defineNuxtConfig({
     devtools: { enabled: true },
+    compatibilityDate: '2025-01-10',
 });

packages/vue-dompurify-html/dist/vue-dompurify-html.mjs

@@ -1,50 +1,50 @@
-import l from "dompurify";
-function m(t, e) {
-  const o = t.hooks ?? {};
-  let n;
-  for (n in o) {
-    const u = o[n];
-    u !== void 0 && e.addHook(n, u);
+import c from "isomorphic-dompurify";
+function f(n, r) {
+  const t = n.hooks ?? {};
+  let o;
+  for (o in t) {
+    const e = t[o];
+    e !== void 0 && r.addHook(o, e);
   }
 }
-function c() {
-  return l();
+function d() {
+  return c();
 }
-function p(t = {}, e = c) {
-  const o = e();
-  m(t, o);
-  const n = function(u, i) {
-    const r = i.value;
-    if (i.oldValue === r)
-      return;
-    const a = `${r}`, s = i.arg, d = t.namedConfigurations, f = t.default ?? {};
-    if (d && s !== void 0) {
-      u.innerHTML = o.sanitize(
-        a,
-        d[s] ?? f
-      );
-      return;
-    }
-    u.innerHTML = o.sanitize(
-      a,
-      f
-    );
+function a(n, r = {}, t) {
+  const o = n.value;
+  if (n.oldValue === o)
+    return;
+  const e = `${o}`, i = n.arg, u = r.namedConfigurations, s = r.default ?? {};
+  return u && i !== void 0 ? t.sanitize(
+    e,
+    u[i] ?? s
+  ) : t.sanitize(e, s);
+}
+function l(n = {}, r = d) {
+  const t = r();
+  f(n, t);
+  const o = function(e, i) {
+    const u = a(i, n, t);
+    u !== void 0 && (e.innerHTML = u);
   };
   return {
-    mounted: n,
-    updated: n
+    mounted: o,
+    updated: o,
+    getSSRProps: (e) => ({
+      innerHTML: a(e, n, c)
+    })
   };
 }
-const k = {
-  install(t, e = {}, o = c) {
-    t.directive(
+const p = {
+  install(n, r = {}, t = d) {
+    n.directive(
       "dompurify-html",
-      p(e, o)
+      l(r, t)
     );
   }
 };
 export {
-  p as buildVueDompurifyHTMLDirective,
-  k as default,
-  k as vueDompurifyHTMLPlugin
+  l as buildVueDompurifyHTMLDirective,
+  p as default,
+  p as vueDompurifyHTMLPlugin
 };

packages/vue-dompurify-html/package.json

@@ -45,7 +45,7 @@
         "test-mutation": "stryker run"
     },
     "dependencies": {
-        "dompurify": "^3.2.1"
+        "isomorphic-dompurify": "^2.20.0"
     },
     "peerDependencies": {
         "vue": "^3.0.0"

packages/vue-dompurify-html/src/dompurify-html.ts

@@ -1,11 +1,11 @@
 import type { DirectiveHook, ObjectDirective, DirectiveBinding } from 'vue';
-import dompurify from 'dompurify';
+import dompurify from 'isomorphic-dompurify';
 import type {
     DOMPurify,
     UponSanitizeElementHookEvent,
     UponSanitizeAttributeHookEvent,
     HookName,
-} from 'dompurify';
+} from 'isomorphic-dompurify';
 
 type MinimalDOMPurifyInstance = Pick<DOMPurify, 'sanitize' | 'addHook'>;
 export type DOMPurifyInstanceBuilder = () => MinimalDOMPurifyInstance;
@@ -112,9 +112,37 @@ function setUpHooks(
 }
 
 export function defaultDOMPurifyInstanceBuilder(): MinimalDOMPurifyInstance {
+    // @ts-expect-error This expression is not callable. Type 'typeof _default' has no call signatures.
     return dompurify();
 }
 
+function _getInnerHTML(
+    binding: DirectiveBinding<HTMLElement>,
+    config: DirectiveConfig = {},
+    dompurifyInstance: MinimalDOMPurifyInstance,
+): string | undefined {
+    const current_value = binding.value;
+    if (binding.oldValue === current_value) {
+        return;
+    }
+
+    const current_value_string = `${current_value}`;
+    const arg = binding.arg;
+    const namedConfigurations = config.namedConfigurations;
+    const defaultConfig = config.default ?? {};
+
+    // Returned named config
+    if (namedConfigurations && arg !== undefined) {
+        return dompurifyInstance.sanitize(
+            current_value_string,
+            namedConfigurations[arg] ?? defaultConfig,
+        );
+    }
+
+    // Returned default config
+    return dompurifyInstance.sanitize(current_value_string, defaultConfig);
+}
+
 export function buildDirective(
     config: DirectiveConfig = {},
     buildDOMPurifyInstance: DOMPurifyInstanceBuilder = defaultDOMPurifyInstanceBuilder,
@@ -127,29 +155,22 @@ export function buildDirective(
         el: HTMLElement,
         binding: DirectiveBinding<HTMLElement>,
     ): void {
-        const current_value = binding.value;
-        if (binding.oldValue === current_value) {
-            return;
-        }
-        const current_value_string = `${current_value}`;
-        const arg = binding.arg;
-        const namedConfigurations = config.namedConfigurations;
-        const defaultConfig = config.default ?? {};
-        if (namedConfigurations && arg !== undefined) {
-            el.innerHTML = dompurifyInstance.sanitize(
-                current_value_string,
-                namedConfigurations[arg] ?? defaultConfig,
-            );
-            return;
+        const innerHTML = _getInnerHTML(binding, config, dompurifyInstance);
+
+        if (innerHTML !== undefined) {
+            el.innerHTML = innerHTML;
         }
-        el.innerHTML = dompurifyInstance.sanitize(
-            current_value_string,
-            defaultConfig,
-        );
     };
 
     return {
         mounted: updateComponent,
         updated: updateComponent,
+        getSSRProps: (binding) => {
+            const innerHTML = _getInnerHTML(binding, config, dompurify);
+
+            return {
+                innerHTML,
+            };
+        },
     };
 }

packages/vue-dompurify-html/test/index.spec.ts

@@ -3,7 +3,7 @@ import { createApp } from 'vue';
 import type { DOMPurifyInstanceBuilder } from '../src';
 import VueDOMPurifyHTML from '../src';
 import { buildVueDompurifyHTMLDirective } from '../src';
-import type { DOMPurify } from 'dompurify';
+import type { DOMPurify } from 'isomorphic-dompurify';
 
 describe('VueDOMPurifyHTML Plugin Install', (): void => {
     it('can be installed', (): void => {

packages/vue-dompurify-html/test/vue-dompurify-html.spec.ts

@@ -3,11 +3,13 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { mount } from '@vue/test-utils';
 import type { DOMPurifyInstanceBuilder } from '../src/dompurify-html';
 import { buildDirective } from '../src/dompurify-html';
-import type { DOMPurify } from 'dompurify';
-import { sanitize, addHook } from 'dompurify';
+import type { DOMPurify } from 'isomorphic-dompurify';
+import { sanitize, addHook } from 'isomorphic-dompurify';
 
-vi.mock('dompurify', async () => {
-    const actual: { default: DOMPurify } = await vi.importActual('dompurify');
+vi.mock('isomorphic-dompurify', async () => {
+    const actual: { default: DOMPurify } = await vi.importActual(
+        'isomorphic-dompurify',
+    );
     const spy = {
         ...actual,
         sanitize: vi.fn(actual.default.sanitize),

packages/vue-dompurify-html/types/dompurify-html.d.ts

@@ -1,5 +1,5 @@
 import type { ObjectDirective } from 'vue';
-import type { DOMPurify, UponSanitizeElementHookEvent, UponSanitizeAttributeHookEvent } from 'dompurify';
+import type { DOMPurify, UponSanitizeElementHookEvent, UponSanitizeAttributeHookEvent } from 'isomorphic-dompurify';
 type MinimalDOMPurifyInstance = Pick<DOMPurify, 'sanitize' | 'addHook'>;
 export type DOMPurifyInstanceBuilder = () => MinimalDOMPurifyInstance;
 export interface MinimalDOMPurifyConfig {

packages/vue-dompurify-html/vite.config.mts

@@ -7,7 +7,7 @@ export default defineConfig({
             name: 'VueDOMPurifyHTML',
         },
         rollupOptions: {
-            external: ['dompurify'],
+            external: ['isomorphic-dompurify'],
             output: {
                 globals: {
                     dompurify: 'DOMPurify',