feat: Removes Renderer2 to be compatible with ivy.

Closes #518 BREAKING CHANGE: Components that are using the outdated Renderer2, which is removed in this commit, do this by injecting it via DI in their constructor. When removing the renderer constructor param the api changes which leads to a breaking change.
dynatrace-oss · Feb 7, 2020 · 3b3f773 · 3b3f773
1 parent c7e1cd7
commit 3b3f773
Show file tree

Hide file tree

Showing 18 changed files with 94 additions and 179 deletions.
diff --git a/components/autocomplete/src/autocomplete-trigger.ts b/components/autocomplete/src/autocomplete-trigger.ts
@@ -43,7 +43,6 @@ import {
   OnDestroy,
   Optional,
   Provider,
-  Renderer2,
   forwardRef,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -253,11 +252,10 @@ export class DtAutocompleteTrigger<T>
   /** Old value of the native input. Used to work around issues with the `input` event on IE. */
   private _previousValue: string | number | null;
 
-  private _disposableFns: Array<() => void> = [];
+  private _destroy$ = new Subject<void>();
 
   constructor(
     private _element: ElementRef<HTMLInputElement>,
-    private _renderer: Renderer2,
     private _overlay: Overlay,
     private _changeDetectorRef: ChangeDetectorRef,
     private _viewportResizer: DtViewportResizer,
@@ -275,22 +273,23 @@ export class DtAutocompleteTrigger<T>
     // tslint:disable-next-line:strict-type-predicates
     if (typeof window !== 'undefined') {
       _zone.runOutsideAngular(() => {
-        this._disposableFns.push(
-          this._renderer.listen(window, 'blur', () => {
+        fromEvent(window, 'blur')
+          .pipe(takeUntil(this._destroy$))
+          .subscribe(() => {
             // If the user blurred the window while the autocomplete is focused, it means that it'll be
             // refocused when they come back. In this case we want to skip the first focus event, if the
             // pane was closed, in order to avoid reopening it unintentionally.
             this._canOpenOnNextFocus =
               document.activeElement !== this._element.nativeElement ||
               this.panelOpen;
-          }),
-        );
+          });
       });
     }
 
     if (this._viewportResizer) {
-      this._viewportSubscription = this._viewportResizer
+      this._viewportResizer
         .change()
+        .pipe(takeUntil(this._destroy$))
         .subscribe(() => {
           if (this.panelOpen && this._overlayRef) {
             this._overlayRef.updateSize({ maxWidth: this._getPanelWidth() });
@@ -300,9 +299,8 @@ export class DtAutocompleteTrigger<T>
   }
 
   ngOnDestroy(): void {
-    this._disposableFns.forEach(fn => {
-      fn();
-    });
+    this._destroy$.next();
+    this._destroy$.complete();
     this._viewportSubscription.unsubscribe();
     this._componentDestroyed = true;
     this._destroyPanel();

diff --git a/components/breadcrumbs/src/breadcrumbs-item.ts b/components/breadcrumbs/src/breadcrumbs-item.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 /**
  * A breadcrumbs item that can be used within the `<dt-breadcrumbs>`.
@@ -30,24 +30,17 @@ import { Directive, ElementRef, Renderer2 } from '@angular/core';
   },
 })
 export class DtBreadcrumbsItem2 {
-  constructor(
-    private readonly _elementRef: ElementRef<HTMLAnchorElement>,
-    private readonly _renderer: Renderer2,
-  ) {}
+  constructor(private readonly _elementRef: ElementRef<HTMLAnchorElement>) {}
 
   /** @internal */
   _setCurrent(current: boolean): void {
-    if (current) {
-      this._renderer.setAttribute(
-        this._elementRef.nativeElement,
-        'aria-current',
-        'page',
-      );
-    } else {
-      this._renderer.removeAttribute(
-        this._elementRef.nativeElement,
-        'aria-current',
-      );
+    const element: Element = this._elementRef.nativeElement;
+    if (element && element.setAttribute) {
+      if (current) {
+        element.setAttribute('aria-current', 'page');
+      } else {
+        element.removeAttribute('aria-current');
+      }
     }
   }
 }
diff --git a/components/button/src/button.ts b/components/button/src/button.ts
@@ -25,7 +25,6 @@ import {
   Input,
   OnDestroy,
   QueryList,
-  Renderer2,
   ViewEncapsulation,
 } from '@angular/core';
 import { NEVER, Subscription } from 'rxjs';
@@ -111,7 +110,6 @@ export class DtButton extends _DtButtonMixinBase
   constructor(
     elementRef: ElementRef,
     private _focusMonitor: FocusMonitor,
-    private _renderer: Renderer2,
     private _changeDetectorRef: ChangeDetectorRef,
   ) {
     super(elementRef);
@@ -153,7 +151,6 @@ export class DtButton extends _DtButtonMixinBase
       this._elementRef,
       `dt-button-${oldClass}`,
       `dt-button-${newClass}`,
-      this._renderer,
     );
   }
 }
@@ -185,10 +182,9 @@ export class DtAnchor extends DtButton {
   constructor(
     elementRef: ElementRef,
     focusMonitor: FocusMonitor,
-    renderer: Renderer2,
     changeDetectorRef: ChangeDetectorRef,
   ) {
-    super(elementRef, focusMonitor, renderer, changeDetectorRef);
+    super(elementRef, focusMonitor, changeDetectorRef);
   }
 
   /**

diff --git a/components/chart/src/range/range.ts b/components/chart/src/range/range.ts
@@ -31,7 +31,6 @@ import {
   OnDestroy,
   Output,
   QueryList,
-  Renderer2,
   TemplateRef,
   ViewChild,
   ViewChildren,
@@ -281,7 +280,6 @@ export class DtChartRange implements AfterViewInit, OnDestroy {
     public _viewContainerRef: ViewContainerRef,
     private _elementRef: ElementRef<HTMLElement>,
     private _changeDetectorRef: ChangeDetectorRef,
-    private _renderer: Renderer2,
   ) {}
 
   ngOnDestroy(): void {
@@ -544,37 +542,23 @@ export class DtChartRange implements AfterViewInit, OnDestroy {
     const displayValue = dtFormatDateRange(this.value[0], this.value[1]);
 
     if (this._rangeElementRef && this._rangeElementRef.first) {
-      this._renderer.setAttribute(
-        this._rangeElementRef.first.nativeElement,
-        'aria-valuenow',
-        `${this.value.join('-')}`,
-      );
-      this._renderer.setAttribute(
-        this._rangeElementRef.first.nativeElement,
-        'aria-valuetext',
-        displayValue,
-      );
+      const element: Element = this._rangeElementRef.first.nativeElement;
+      if (element && element.setAttribute) {
+        element.setAttribute('aria-valuenow', `${this.value.join('-')}`);
+        element.setAttribute('aria-valuetext', displayValue);
+      }
     }
   }
 
   /** Updates the selection area styling according to the actual range */
   private _reflectStyleToDom(): void {
     if (this._rangeElementRef && this._rangeElementRef.first) {
-      this._renderer.setStyle(
-        this._rangeElementRef.first.nativeElement,
-        'opacity',
-        `${+!this._rangeHidden}`,
-      );
-      this._renderer.setStyle(
-        this._rangeElementRef.first.nativeElement,
-        'left',
-        `${this._rangeArea.left}px`,
-      );
-      this._renderer.setStyle(
-        this._rangeElementRef.first.nativeElement,
-        'width',
-        `${this._rangeArea.width}px`,
-      );
+      const element: HTMLElement = this._rangeElementRef.first.nativeElement;
+      if (element && element.style) {
+        element.style.opacity = `${+!this._rangeHidden}`;
+        element.style.left = `${this._rangeArea.left}px`;
+        element.style.width = `${this._rangeArea.width}px`;
+      }
     }
   }
 }
diff --git a/components/chart/src/selection-area/selection-area.ts b/components/chart/src/selection-area/selection-area.ts
@@ -35,7 +35,6 @@ import {
   NgZone,
   OnDestroy,
   Optional,
-  Renderer2,
   SkipSelf,
   TemplateRef,
   ViewChild,
@@ -181,7 +180,6 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
     @SkipSelf() private _chart: DtChart,
     private _elementRef: ElementRef<HTMLElement>,
     private _focusTrapFactory: FocusTrapFactory,
-    private _renderer: Renderer2,
     private _overlay: Overlay,
     private _zone: NgZone,
     private _viewportRuler: ViewportRuler,
@@ -969,8 +967,10 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
 
   /** Function that toggles the visibility of the hairline (line that follows the mouses) */
   private _toggleHairline(show: boolean): void {
-    const display = show ? 'inherit' : 'none';
-    this._renderer.setStyle(this._hairline.nativeElement, 'display', display);
+    const element: HTMLElement = this._hairline.nativeElement;
+    if (element && element.style) {
+      element.style.display = show ? 'inherit' : 'none';
+    }
   }
 
   /** Function that safely toggles the visible state of the range */
@@ -997,11 +997,10 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
 
   /** reflects the position of the timestamp to the element */
   private _reflectHairlinePositionToDom(x: number): void {
-    this._renderer.setStyle(
-      this._hairline.nativeElement,
-      'transform',
-      `translateX(${x}px)`,
-    );
+    const element: HTMLElement = this._hairline.nativeElement;
+    if (element && element.style) {
+      element.style.transform = `translateX(${x}px)`;
+    }
   }
 
   /** Set the position of the select-able area to the size of the Highcharts plot background */

diff --git a/components/chart/src/timestamp/timestamp.ts b/components/chart/src/timestamp/timestamp.ts
@@ -35,7 +35,6 @@ import {
   OnDestroy,
   Output,
   QueryList,
-  Renderer2,
   TemplateRef,
   ViewChild,
   ViewChildren,
@@ -208,7 +207,6 @@ export class DtChartTimestamp implements AfterViewInit, OnDestroy {
 
   constructor(
     public _viewContainerRef: ViewContainerRef,
-    private _renderer: Renderer2,
     private _changeDetectorRef: ChangeDetectorRef,
     private _elementRef: ElementRef<HTMLElement>,
   ) {}
@@ -334,11 +332,11 @@ export class DtChartTimestamp implements AfterViewInit, OnDestroy {
   /** Reflects the position of the timestamp to the element */
   private _reflectStyleToDom(): void {
     if (this._timestampElementRef && this._timestampElementRef.first) {
-      this._renderer.setStyle(
-        this._timestampElementRef.first.nativeElement,
-        'transform',
-        `translateX(${this._positionX}px)`,
-      );
+      const element: HTMLElement = this._timestampElementRef.first
+        .nativeElement;
+      if (element.style) {
+        element.style.transform = `translateX(${this._positionX}px)`;
+      }
     }
   }
 }
diff --git a/components/checkbox/src/checkbox.ts b/components/checkbox/src/checkbox.ts
@@ -31,7 +31,6 @@ import {
   OnInit,
   Output,
   Provider,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
   forwardRef,
@@ -247,7 +246,6 @@ export class DtCheckbox<T> extends _DtCheckboxMixinBase
     private _elementRef: ElementRef,
     private _focusMonitor: FocusMonitor,
     private _platform: Platform,
-    private _renderer: Renderer2,
     @Attribute('tabindex') tabIndex: string,
   ) {
     super();
@@ -264,7 +262,6 @@ export class DtCheckbox<T> extends _DtCheckboxMixinBase
       addCssClass(
         this._elementRef.nativeElement,
         'dt-checkbox-animation-fallback',
-        this._renderer,
       );
     }
   }

diff --git a/components/core/src/util/platform-util.ts b/components/core/src/util/platform-util.ts
@@ -15,7 +15,7 @@
  */
 
 import { coerceElement } from '@angular/cdk/coercion';
-import { ElementRef, Renderer2 } from '@angular/core';
+import { ElementRef } from '@angular/core';
 
 import { isNumber, isString } from './type-util';
 
@@ -28,14 +28,13 @@ export function replaceCssClass(
   elOrRef: any, // tslint:disable-line:no-any
   oldClass: string | null,
   newClass: string | null,
-  renderer?: Renderer2,
 ): void {
   const el = elOrRef.nativeElement || elOrRef;
   if (oldClass) {
-    removeCssClass(el, oldClass, renderer);
+    removeCssClass(el, oldClass);
   }
   if (newClass) {
-    addCssClass(el, newClass, renderer);
+    addCssClass(el, newClass);
   }
 }
 
@@ -51,32 +50,26 @@ export function toggleCssClass(
   // tslint:disable-next-line: no-any
   el: any,
   name: string,
-  renderer?: Renderer2,
 ): void {
   if (condition) {
-    addCssClass(el, name, renderer);
+    addCssClass(el, name);
   } else {
-    removeCssClass(el, name, renderer);
+    removeCssClass(el, name);
   }
 }
 
 // tslint:disable-next-line:no-any
-export function addCssClass(el: any, name: string, renderer?: Renderer2): void {
-  if (renderer) {
-    renderer.addClass(el, name);
-  } else {
+export function addCssClass(el: any, name: string): void {
+  if (el.classList) {
     el.classList.add(name);
   }
 }
 
 export function removeCssClass(
   el: any, // tslint:disable-line:no-any
   name: string,
-  renderer?: Renderer2,
 ): void {
-  if (renderer) {
-    renderer.removeClass(el, name);
-  } else {
+  if (el.classList) {
     el.classList.remove(name);
   }
 }