From bd6393b5712eac2d5ff58d1ca3a5ec9a5e2da21e Mon Sep 17 00:00:00 2001
From: striky <info@striky.sk>
Date: Wed, 31 May 2023 14:41:04 +0200
Subject: [PATCH] Bugfix - ReferenceError: document is not defined + fixed
 accessing to `document` via `Inject`

---
 lib/src/utils/offscreen-fragment.component.ts | 15 +++++++-----
 .../utils/transport-container.component.ts    | 23 +++++++++++--------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/lib/src/utils/offscreen-fragment.component.ts b/lib/src/utils/offscreen-fragment.component.ts
index 19116d6..382d67d 100644
--- a/lib/src/utils/offscreen-fragment.component.ts
+++ b/lib/src/utils/offscreen-fragment.component.ts
@@ -3,10 +3,9 @@ import {
   ViewEncapsulation,
   AfterViewInit,
   OnDestroy,
-  ElementRef
+  ElementRef, Inject
 } from '@angular/core';
-
-const dummyContainer = document.createDocumentFragment()
+import { DOCUMENT } from '@angular/common';
 
 @Component({
   selector: 'offscreen-fragment',
@@ -14,15 +13,19 @@ const dummyContainer = document.createDocumentFragment()
   encapsulation: ViewEncapsulation.None
 })
 export class OffscreenFragmentComponent implements AfterViewInit, OnDestroy {
-  constructor(private element: ElementRef) {
+
+  private dummyContainer!: DocumentFragment;
+
+  constructor(private element: ElementRef, @Inject(DOCUMENT) private document: Document) {
+    this.dummyContainer = this.document.createDocumentFragment();
   }
 
   ngAfterViewInit() {
-    dummyContainer.appendChild(this.element.nativeElement)
+    this.dummyContainer.appendChild(this.element.nativeElement)
   }
 
   // invoked BEFORE component removed from DOM
   ngOnDestroy() {
-    dummyContainer.removeChild(this.element.nativeElement)
+    this.dummyContainer.removeChild(this.element.nativeElement)
   }
 }
diff --git a/lib/src/utils/transport-container.component.ts b/lib/src/utils/transport-container.component.ts
index 197fb83..0c43b30 100644
--- a/lib/src/utils/transport-container.component.ts
+++ b/lib/src/utils/transport-container.component.ts
@@ -8,10 +8,9 @@ import {
   OnChanges,
   AfterViewInit,
   OnDestroy,
-  SimpleChanges
+  SimpleChanges, Inject
 } from '@angular/core';
-
-const dummyContainer = document.createDocumentFragment();
+import { DOCUMENT } from '@angular/common';
 
 @Component({
   selector: 'transport-container',
@@ -30,10 +29,16 @@ export class TransportContainerComponent implements OnChanges, AfterViewInit, On
 
   @ViewChild('rootEl') rootElRef?: ElementRef;
 
+  private dummyContainer!: DocumentFragment;
+
+  constructor(@Inject(DOCUMENT) private document: Document) {
+    this.dummyContainer = this.document.createDocumentFragment();
+  }
+
   ngAfterViewInit() {
     const rootEl: Element = this.rootElRef?.nativeElement; // assumed defined
 
-    replaceEl(rootEl, this.inPlaceOf);
+    replaceEl(rootEl, this.inPlaceOf, this.dummyContainer);
     applyElAttrs(rootEl, undefined, this.elAttrs);
 
     // insurance for if Preact recreates and reroots inPlaceOf element
@@ -50,8 +55,8 @@ export class TransportContainerComponent implements OnChanges, AfterViewInit, On
     if (rootEl) {
       // If the ContentContainer's tagName changed, it will create a new DOM element in its
       // original place. Detect this and re-replace.
-      if (this.inPlaceOf.parentNode !== dummyContainer) {
-        replaceEl(rootEl, this.inPlaceOf);
+      if (this.inPlaceOf.parentNode !== this.dummyContainer) {
+        replaceEl(rootEl, this.inPlaceOf, this.dummyContainer);
         applyElAttrs(rootEl, undefined, this.elAttrs);
         this.reportEl(rootEl as HTMLElement);
       } else {
@@ -67,15 +72,15 @@ export class TransportContainerComponent implements OnChanges, AfterViewInit, On
   // invoked BEFORE component removed from DOM
   ngOnDestroy() {
     // protect against Preact recreating and rerooting inPlaceOf element
-    if (this.inPlaceOf.parentNode === dummyContainer) {
-      dummyContainer.removeChild(this.inPlaceOf);
+    if (this.inPlaceOf.parentNode === this.dummyContainer) {
+      this.dummyContainer.removeChild(this.inPlaceOf);
     }
 
     this.reportEl(null);
   }
 }
 
-function replaceEl(subject: Element, inPlaceOf: Element): void {
+function replaceEl(subject: Element, inPlaceOf: Element, dummyContainer: DocumentFragment): void {
   inPlaceOf.parentNode?.insertBefore(subject, inPlaceOf.nextSibling);
   dummyContainer.appendChild(inPlaceOf);
 }