Replace 'sanitize-html' with lightweight 'dompurify', cleanup

package.json

@@ -24,13 +24,19 @@
   "scripts": {
     "build": "tsc --project src/tsconfig.json",
     "build:watch": "tsc --watch --project src/tsconfig.json",
-    "bundle": "esbuild src/index.ts --bundle --format=esm --platform=browser --target=esnext --outfile=dist/comments-element-bundle.js --legal-comments=none",
+    "bundle": "esbuild src/index.ts --bundle --format=esm --platform=browser --target=esnext --outfile=dist/bundle/comments-element-esm.js --legal-comments=none",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest"
   },
   "files": [
-    "dist/index.d.ts",
-    "src/index.ts",
-    "dist/index.js.map"
+    "dist/*.js",
+    "dist/*.ts",
+    "dist/*.map",
+    "dist/css",
+    "dist/options",
+    "dist/subcomponent",
+    "dist/bundle",
+    "src/",
+    "tsconfig-template.json"
   ],
   "homepage": "https://adanski.github.io/ax-comments/",
   "keywords": [
@@ -51,12 +57,12 @@
   "dependencies": {
     "@textcomplete/core": "~0.1.12",
     "@textcomplete/textarea": "~0.1.12",
-    "sanitize-html": "~2.7.3"
+    "dompurify": "~2.4.3"
   },
   "devDependencies": {
     "@types/node": "~16.18.10",
     "@jest/globals": "~29.3.1",
-    "@types/sanitize-html": "~2.6.2",
+    "@types/dompurify": "~2.4.0",
     "typescript": "~4.8.4",
     "tslib": "~2.4.1",
     "jest": "~29.3.1",

src/comments-element.ts

@@ -1,5 +1,5 @@
 import {WebComponent} from './web-component.js';
-import {isMobileBrowser, isNil} from './util.js';
+import {isMobileBrowser, isNil, noop} from './util.js';
 import {getDefaultOptions} from './default-options-factory.js';
 import {CommentTransformer} from './comment-transformer.js';
 import {EVENT_HANDLERS_MAP} from './events.js';
@@ -171,7 +171,7 @@ export class CommentsElement extends HTMLElement implements WebComponent {
             // Render
             this.#render();
         };
-        const error: () => void = () => {};
+        const error: () => void = noop;
 
         this.#options.getComments(success, error);
     }

src/default-options-factory.ts

@@ -1,4 +1,5 @@
 import {CommentsOptions, SortKey, STYLE_SHEET} from './api.js';
+import {noop} from './util.js';
 
 export function getDefaultOptions(): Required<CommentsOptions> {
     return {
@@ -62,9 +63,9 @@ export function getDefaultOptions(): Required<CommentsOptions> {
         }),
         upvoteComment: (comment, success, error) => success(comment),
         validateAttachments: (attachments, accept) => accept(attachments),
-        hashtagClicked: (hashtag) => {},
-        pingClicked: (userId) => {},
-        refresh: () => {},
+        hashtagClicked: noop,
+        pingClicked: noop,
+        refresh: noop,
 
         // Formatters
         timeFormatter: getDefaultTimeFormatter(),

src/subcomponent/button-element.ts

@@ -7,15 +7,15 @@ import {getHostContainer} from '../html-util.js';
 import {CommentTransformer} from '../comment-transformer.js';
 import {CommentModelEnriched} from '../comments-by-id.js';
 import {ErrorFct, SuccessFct} from '../options/callbacks.js';
-import {isNil} from '../util.js';
+import {isNil, noop} from '../util.js';
 
 @RegisterCustomElement('ax-button', {extends: 'button'})
 export class ButtonElement extends HTMLButtonElement implements WebComponent {
 
     set inline(value: boolean) {
         if (value) this.classList.add('inline-button');
     }
-    onInitialized: (button: ButtonElement) => void = () => {};
+    onInitialized: (button: ButtonElement) => void = noop;
 
     #initialized: boolean = false;
     #options!: Required<CommentsOptions>;

src/subcomponent/comment-content-formatter.ts

@@ -4,7 +4,7 @@ import {OptionsProvider, ServiceProvider} from '../provider.js';
 import {Functionalities} from '../options/functionalities.js';
 import {CommentModelEnriched} from '../comments-by-id.js';
 import {Callbacks} from '../options/callbacks.js';
-import sanitize from 'sanitize-html';
+import DOMPurify from 'dompurify';
 
 export class CommentContentFormatter {
 
@@ -20,7 +20,7 @@ export class CommentContentFormatter {
     }
 
     getFormattedCommentContent(commentModel: CommentModelEnriched, replaceNewLines?: boolean): HTMLElement {
-        let html: string = this.escape(sanitize(commentModel.content));
+        let html: string = this.escape(DOMPurify.sanitize(commentModel.content));
         html = this.linkify(html);
         html = this.highlightTags(commentModel, html);
         if (replaceNewLines) {

src/subcomponent/commenting-field-element.ts

@@ -4,7 +4,7 @@ import {Textcomplete} from '@textcomplete/core';
 import {TagFactory} from './tag-factory.js';
 import {TextareaElement} from './textarea-element.js';
 import {CommentModel, CommentsOptions} from '../api.js';
-import {areArraysEqual, isStringEmpty} from '../util.js';
+import {areArraysEqual, isStringEmpty, noop} from '../util.js';
 import {CommentModelEnriched} from '../comments-by-id.js';
 import {CommentViewModelProvider, OptionsProvider, ServiceProvider} from '../provider.js';
 import {CommentViewModel} from '../comment-view-model.js';
@@ -26,7 +26,7 @@ export class CommentingFieldElement extends HTMLElement implements WebComponent
     parentId: string | null = null;
     existingCommentId: string | null = null;
     isMain: boolean = false;
-    onClosed: () => void = () => {};
+    onClosed: () => void = noop;
 
     #textcomplete: Textcomplete | undefined;
 

src/subcomponent/navigation-element.ts

@@ -3,12 +3,13 @@ import {OptionsProvider} from '../provider.js';
 import {RegisterCustomElement} from '../register-custom-element.js';
 import {WebComponent} from '../web-component.js';
 import {getHostContainer, toggleElementVisibility} from '../html-util.js';
+import {noop} from '../util.js';
 
 @RegisterCustomElement('ax-navigation')
 export class NavigationElement extends HTMLElement implements WebComponent {
 
     sortKey: SortKey = SortKey.NEWEST;
-    onSortKeyChanged: (sortKey: SortKey) => void = () => {};
+    onSortKeyChanged: (sortKey: SortKey) => void = noop;
 
     #options!: Required<CommentsOptions>;
 

src/util.ts

@@ -24,6 +24,10 @@ export function areArraysEqual(first: any[], second: any[]): boolean {
     }
 }
 
+export function noop(): void {
+    //
+}
+
 /**
  * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_tablet_or_desktop
  */

test/comments-element.spec.ts

@@ -774,7 +774,7 @@ describe('CommentsElement', () => {
         const textarea: TextareaElement = editField.querySelector('.textarea')!;
 
         // Edit the comment
-        const modifiedContent = '<br />appended content with new line';
+        const modifiedContent = '<br>appended content with new line';
         textarea.value += modifiedContent;
         textarea.dispatchEvent(new InputEvent('input'));
 

test/fake/polyfill-fake.js

@@ -1,13 +1,15 @@
+import {noop} from "../../src/util.js";
+
 // As JSDom does not implement the whole specification we need to provide fake polyfills
 
 // https://github.com/ionic-team/stencil/issues/2277#issuecomment-680737430
 if (typeof CSSStyleSheet.prototype.replaceSync !== 'function'
     || typeof CSSStyleSheet.prototype.replace !== 'function') {
-    CSSStyleSheet.prototype.replaceSync = () => {};
-    CSSStyleSheet.prototype.replace = () => {};
+    CSSStyleSheet.prototype.replaceSync = noop;
+    CSSStyleSheet.prototype.replace = () => Promise.resolve();
 }
 
 // https://github.com/jsdom/jsdom/issues/1695
 if (typeof Element.prototype.scrollIntoView !== 'function') {
-    Element.prototype.scrollIntoView = () => {};
+    Element.prototype.scrollIntoView = noop;
 }