Improve lib performance

README.md

@@ -15,7 +15,7 @@ The iframe in which the gist embed is rendered, will automatically adjust it's s
 Install required peer dependencies:
 
 ```bash
-  npm install iframe-resizer dompurify
+  npm install iframe-resizer
 ```
 
 Install the library:

package.json

@@ -18,7 +18,6 @@
     "@angular/platform-browser": "^15.1.0",
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
-    "dompurify": "^2.4.3",
     "iframe-resizer": "^4.3.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -28,7 +27,6 @@
     "@angular-devkit/build-angular": "^15.1.3",
     "@angular/cli": "~15.1.3",
     "@angular/compiler-cli": "^15.1.0",
-    "@types/dompurify": "^2.4.0",
     "@types/iframe-resizer": "^3.5.9",
     "@types/jasmine": "~4.3.0",
     "jasmine-core": "~4.5.0",

projects/ngx-gist/package.json

@@ -24,7 +24,6 @@
   "peerDependencies": {
     "@angular/common": "^15.1.0",
     "@angular/core": "^15.1.0",
-    "dompurify": "^2.4.3",
     "iframe-resizer": "^4.3.3"
   },
   "dependencies": {

projects/ngx-gist/src/lib/ngx-gist.component.ts

@@ -6,18 +6,19 @@
  * found in the LICENSE file at the root of this project.
  */
 
+import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
+  Inject,
   Input,
+  NgZone,
   Renderer2,
   ViewChild,
 } from '@angular/core';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 
-import * as DOMPurify from 'dompurify';
-
 import {NgxIFrameResizerDirective} from './ngx-gist-iframe-resizer.directive';
 
 const IFRAME_RESIZER_CONTENT_WINDOW_CDN_URL =
@@ -88,23 +89,30 @@ export class NgxGistComponent {
    */
   srcdoc?: SafeHtml;
 
-  constructor(private sanitizer: DomSanitizer, private renderer2: Renderer2) {}
+  constructor(
+    private sanitizer: DomSanitizer,
+    private renderer2: Renderer2,
+    private ngZone: NgZone,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
 
   ngOnInit(): void {
-    this.initializeIFrame();
+    // Run outside of Angular zone to prevent change detection from running
+    this.ngZone.runOutsideAngular(() => {
+      this.initializeIFrame();
+    });
   }
 
   private initializeIFrame() {
     // Set unique id for iframe
     this.renderer2.setAttribute(this.iframe.nativeElement, 'id', `gist-${this.gistId}`);
 
-    const content = ``;
-    const sanitized = DOMPurify.sanitize(content, {FORBID_TAGS: ['script'], RETURN_DOM: true});
-
-    this.renderer2.appendChild(sanitized, this.createIframeResizerContentWindowScripts());
-    this.renderer2.appendChild(sanitized, this.createGistScript());
+    const template = this.document.createRange().createContextualFragment('');
+    this.renderer2.appendChild(template, this.createIframeResizerContentWindowScripts());
+    this.renderer2.appendChild(template, this.createGistScript());
+    const serializedHTML = new XMLSerializer().serializeToString(template);
 
-    this.srcdoc = this.sanitizer.bypassSecurityTrustHtml(sanitized.outerHTML);
+    this.srcdoc = this.sanitizer.bypassSecurityTrustHtml(serializedHTML);
 
     // Attach target="_blank" to links in iframe.
     // This is needed because the iframe prevents opening links in a new tab.

yarn.lock

@@ -1537,13 +1537,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/dompurify@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.4.0.tgz#fd9706392a88e0e0e6d367f3588482d817df0ab9"
-  integrity sha512-IDBwO5IZhrKvHFUl+clZxgf3hn2b/lU6H1KaBShPkQyGJUQ0xwebezIPSuiyGwfz1UzJWQl4M7BDxtHtCCPlTg==
-  dependencies:
-    "@types/trusted-types" "*"
-
 "@types/eslint-scope@^3.7.3":
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@@ -1668,11 +1661,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/trusted-types@*":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
-  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
-
 "@types/ws@^8.5.1":
   version "8.5.4"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
@@ -2742,11 +2730,6 @@ domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-dompurify@^2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.3.tgz#f4133af0e6a50297fc8874e2eaedc13a3c308c03"
-  integrity sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ==
-
 domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"