fix(api): use only Renderer2 instances (#391)

NgClass and NgStyle use Renderer1 instances; which has been deprecated. Instead use Renderer2 and a RendererAdapter. Thx @mhevery for his solution! Refs #386.
angular · Sep 7, 2017 · 816d85a · 816d85a
1 parent 6b457dc
commit 816d85a
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 6 deletions.
diff --git a/src/lib/api/core/renderer-adapter.ts b/src/lib/api/core/renderer-adapter.ts
@@ -0,0 +1,74 @@
+import {Renderer2, RendererStyleFlags2} from '@angular/core';
+
+/**
+ * Adapts the 'deprecated' Angular Renderer v1 API to use the new Renderer2 instance
+ * This is required for older versions of NgStyle and NgClass that require
+ * the v1 API (but should use the v2 instances)
+ */
+export class RendererAdapter {
+  constructor(private _renderer: Renderer2) { }
+
+  setElementClass(el: any, className: string, isAdd: boolean): void {
+    if (isAdd) {
+      this._renderer.addClass(el, className);
+    } else {
+      this._renderer.removeClass(el, className);
+    }
+  }
+
+  setElementStyle(el: any, styleName: string, styleValue: string): void {
+    if (styleValue) {
+      this._renderer.setStyle(el, styleName, styleValue);
+    } else {
+      this._renderer.removeStyle(el, styleName);
+    }
+  }
+
+  // new API is forwarded
+  addClass(el: any, name: string): void {
+    this._renderer.addClass(el, name);
+  }
+
+  removeClass(el: any, name: string): void {
+    this._renderer.removeClass(el, name);
+  }
+
+  setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void {
+    this._renderer.setStyle(el, style, value, flags);
+  }
+
+  removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void {
+    this._renderer.removeStyle(el, style, flags);
+  }
+
+  // ******************************************************************
+  // !! Renderer is an abstract class with abstract methods
+  //
+  // These are implementation of those methods... and do NOTHING since
+  // we only use setElementStyle() and setElementClass()
+  // ******************************************************************
+
+  /* tslint:disable */
+  animate()             : any  { throw _notImplemented('animate'); }
+  attachViewAfter()     : void { throw _notImplemented('attachViewAfter'); }
+  detachView()          : void { throw _notImplemented('detachView'); }
+  destroyView()         : void { throw _notImplemented('destroyView'); }
+  createElement()       : any  { throw _notImplemented('createElement'); }
+  createViewRoot()      : any  { throw _notImplemented('createViewRoot'); }
+  createTemplateAnchor(): any  { throw _notImplemented('createTemplateAnchor'); }
+  createText()          : any  { throw _notImplemented('createText'); }
+  invokeElementMethod() : void { throw _notImplemented('invokeElementMethod'); }
+  projectNodes()        : void { throw _notImplemented('projectNodes'); }
+  selectRootElement()   : any  { throw _notImplemented('selectRootElement'); }
+  setBindingDebugInfo() : void { throw _notImplemented('setBindingDebugInfo'); }
+  setElementProperty()  : void { throw _notImplemented('setElementProperty'); }
+  setElementAttribute() : void { throw _notImplemented('setElementAttribute'); }
+  setText()             : void { throw _notImplemented('setText'); }
+  listen()              : Function { throw _notImplemented('listen');  }
+  listenGlobal()        : Function { throw _notImplemented('listenGlobal');  }
+  /* tslint:enable */
+}
+
+function _notImplemented(methodName: string) {
+  return new Error(`The method RendererAdapter::${methodName}() has not been implemented`);
+}
diff --git a/src/lib/api/ext/class.ts b/src/lib/api/ext/class.ts
@@ -15,7 +15,6 @@ import {
   OnChanges,
   OnDestroy,
   Optional,
-  Renderer,
   Renderer2,
   SimpleChanges,
   Self
@@ -26,6 +25,7 @@ import {BaseFxDirective} from '../core/base';
 import {BaseFxDirectiveAdapter} from '../core/base-adapter';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
+import {RendererAdapter} from '../core/renderer-adapter';
 
 /** NgClass allowed inputs **/
 export type NgClassType = string | string[] | Set<string> | {[klass: string]: any};
@@ -115,7 +115,7 @@ export class ClassDirective extends BaseFxDirective
 
   /* tslint:enable */
   constructor(protected monitor: MediaMonitor,
-              _ngEl: ElementRef, _renderer: Renderer2, _oldRenderer: Renderer,
+              _ngEl: ElementRef, _renderer: Renderer2,
               _iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers,
               @Optional() @Self() private _ngClassInstance: NgClass) {
 
@@ -127,7 +127,8 @@ export class ClassDirective extends BaseFxDirective
     // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on
     // the same host element; since the responsive variations may be defined...
     if ( !this._ngClassInstance ) {
-      this._ngClassInstance = new NgClass(_iterableDiffers, _keyValueDiffers, _ngEl, _oldRenderer);
+      let adapter = new RendererAdapter(_renderer);
+      this._ngClassInstance = new NgClass(_iterableDiffers, _keyValueDiffers, _ngEl, <any> adapter);
     }
   }
 

diff --git a/src/lib/api/ext/style.ts b/src/lib/api/ext/style.ts
@@ -14,7 +14,6 @@ import {
   OnDestroy,
   OnChanges,
   Optional,
-  Renderer,
   Renderer2,
   SecurityContext,
   Self,
@@ -35,6 +34,7 @@ import {
   NgStyleSanitizer,
   ngStyleUtils as _
 } from '../../utils/style-transforms';
+import {RendererAdapter} from '../core/renderer-adapter';
 
 /**
  * Directive to add responsive support for ngStyle.
@@ -106,7 +106,7 @@ export class StyleDirective extends BaseFxDirective
   constructor(private monitor: MediaMonitor,
               protected _sanitizer: DomSanitizer,
               _ngEl: ElementRef, _renderer: Renderer2,
-              _differs: KeyValueDiffers, _oldRenderer: Renderer,
+              _differs: KeyValueDiffers,
               @Optional() @Self() private _ngStyleInstance: NgStyle) {
 
     super(monitor, _ngEl, _renderer);
@@ -118,7 +118,8 @@ export class StyleDirective extends BaseFxDirective
     // Create an instance NgStyle Directive instance only if `ngStyle=""` has NOT been defined on
     // the same host element; since the responsive versions may be defined...
     if ( !this._ngStyleInstance ) {
-      this._ngStyleInstance = new NgStyle(_differs, _ngEl, _oldRenderer);
+      let adapter = new RendererAdapter(_renderer);
+      this._ngStyleInstance = new NgStyle(_differs, _ngEl, <any> adapter);
     }
   }