Version 3.0.0-beta.1

README.md

@@ -4,8 +4,8 @@
 [![Build Status](https://travis-ci.com/LeSuisse/vue-dompurify-html.svg?branch=master)](https://travis-ci.com/LeSuisse/vue-dompurify-html)
 [![Code Coverage](https://codecov.io/gh/LeSuisse/vue-dompurify-html/branch/master/graph/badge.svg)](https://codecov.io/gh/LeSuisse/vue-dompurify-html)
 
-⚠️ This branch is meant to be used with [vue-next](https://github.com/vuejs/vue-next). If you are looking for the stable
-version, go to [master branch](https://github.com/LeSuisse/vue-dompurify-html/tree/master).
+⚠️ This branch is meant to be used with [Vue 3](https://github.com/vuejs/vue-next). If you are looking for a version compatible with Vue 2,
+go to [master branch](https://github.com/LeSuisse/vue-dompurify-html/tree/master).
 
 A "safe" replacement for the `v-html` directive. The HTML code is
 sanitized with [DOMPurify](https://github.com/cure53/DOMPurify) before being interpreted.

dist/vue-dompurify-html.es.js

@@ -1 +1,37 @@
-import n from"dompurify";var o={install(o,t={}){o.directive("dompurify-html",function(o={}){const t=n();!function(n,o){const t=n.hooks;let i;for(i in t)o.addHook(i,t[i])}(o,t);const i=function(n,i){const e=i.arg,r=o.namedConfigurations;r&&void 0!==r[e]?n.innerHTML=t.sanitize(i.value,r[e]):n.innerHTML=t.sanitize(i.value,o.default)};return{mounted:i,updated:i}}(t))}};export default o;
+import dompurify from "dompurify";
+function setUpHooks(config, dompurifyInstance) {
+  var _a;
+  const hooks = (_a = config.hooks) != null ? _a : {};
+  let hookName;
+  for (hookName in hooks) {
+    const hook = hooks[hookName];
+    if (hook !== void 0) {
+      dompurifyInstance.addHook(hookName, hook);
+    }
+  }
+}
+function buildDirective(config = {}) {
+  const dompurifyInstance = dompurify();
+  setUpHooks(config, dompurifyInstance);
+  const updateComponent = function(el, binding) {
+    var _a, _b;
+    const arg = binding.arg;
+    const namedConfigurations = config.namedConfigurations;
+    const defaultConfig = (_a = config.default) != null ? _a : {};
+    if (namedConfigurations && arg !== void 0) {
+      el.innerHTML = dompurifyInstance.sanitize(binding.value, (_b = namedConfigurations[arg]) != null ? _b : defaultConfig);
+      return;
+    }
+    el.innerHTML = dompurifyInstance.sanitize(binding.value, defaultConfig);
+  };
+  return {
+    mounted: updateComponent,
+    updated: updateComponent
+  };
+}
+var index = {
+  install(app, config = {}) {
+    app.directive("dompurify-html", buildDirective(config));
+  }
+};
+export { index as default };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-dompurify-html",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-beta.1",
   "description": "Safe replacement for the v-html directive",
   "license": "MIT",
   "author": "Thomas Gerbet",
@@ -19,7 +19,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/LeSuisse/vue-dompurify-html.git"
+    "url": "https://github.com/LeSuisse/vue-dompurify-html.git"
   },
   "bugs": {
     "url": "https://github.com/LeSuisse/vue-dompurify-html/issues"

types/dompurify-html.d.ts

@@ -1,31 +1,37 @@
 import { ObjectDirective } from '@vue/runtime-core';
 import { HookEvent, HookName, SanitizeAttributeHookEvent, SanitizeElementHookEvent } from 'dompurify';
 export interface MinimalDOMPurifyConfig {
-    ADD_ATTR?: string[];
-    ADD_DATA_URI_TAGS?: string[];
-    ADD_TAGS?: string[];
-    ALLOW_DATA_ATTR?: boolean;
-    ALLOWED_ATTR?: string[];
-    ALLOWED_TAGS?: string[];
-    FORBID_ATTR?: string[];
-    FORBID_TAGS?: string[];
-    ALLOWED_URI_REGEXP?: RegExp;
-    ALLOW_UNKNOWN_PROTOCOLS?: boolean;
+    ADD_ATTR?: string[] | undefined;
+    ADD_DATA_URI_TAGS?: string[] | undefined;
+    ADD_TAGS?: string[] | undefined;
+    ALLOW_DATA_ATTR?: boolean | undefined;
+    ALLOWED_ATTR?: string[] | undefined;
+    ALLOWED_TAGS?: string[] | undefined;
+    FORBID_ATTR?: string[] | undefined;
+    FORBID_CONTENTS?: string[] | undefined;
+    FORBID_TAGS?: string[] | undefined;
+    ALLOWED_URI_REGEXP?: RegExp | undefined;
+    ALLOW_UNKNOWN_PROTOCOLS?: boolean | undefined;
     USE_PROFILES?: false | {
-        mathMl?: boolean;
-        svg?: boolean;
-        svgFilters?: boolean;
-        html?: boolean;
+        mathMl?: boolean | undefined;
+        svg?: boolean | undefined;
+        svgFilters?: boolean | undefined;
+        html?: boolean | undefined;
+    } | undefined;
+    CUSTOM_ELEMENT_HANDLING?: {
+        tagNameCheck?: RegExp | ((tagName: string) => boolean) | null | undefined;
+        attributeNameCheck?: RegExp | ((lcName: string) => boolean) | null | undefined;
+        allowCustomizedBuiltInElements?: boolean | undefined;
     };
 }
 export interface DirectiveConfig {
-    default?: MinimalDOMPurifyConfig;
-    namedConfigurations?: Record<string, MinimalDOMPurifyConfig>;
+    default?: MinimalDOMPurifyConfig | undefined;
+    namedConfigurations?: Record<string, MinimalDOMPurifyConfig> | undefined;
     hooks?: {
-        uponSanitizeElement?: (currentNode: Element, data: SanitizeElementHookEvent, config: MinimalDOMPurifyConfig) => void;
-        uponSanitizeAttribute?: (currentNode: Element, data: SanitizeAttributeHookEvent, config: MinimalDOMPurifyConfig) => void;
+        uponSanitizeElement?: ((currentNode: Element, data: SanitizeElementHookEvent, config: MinimalDOMPurifyConfig) => void) | undefined;
+        uponSanitizeAttribute?: ((currentNode: Element, data: SanitizeAttributeHookEvent, config: MinimalDOMPurifyConfig) => void) | undefined;
     } & {
-        [H in HookName]?: (currentNode: Element, data: HookEvent, config: MinimalDOMPurifyConfig) => void;
+        [H in HookName]?: ((currentNode: Element, data: HookEvent, config: MinimalDOMPurifyConfig) => void) | undefined;
     };
 }
 export declare function buildDirective(config?: DirectiveConfig): ObjectDirective<HTMLElement>;