feat: RendererV2 integration (#14469)

modules/@angular/core/src/debug/debug_node.ts

@@ -85,16 +85,26 @@ export class DebugElement extends DebugNode {
   insertChildrenAfter(child: DebugNode, newChildren: DebugNode[]) {
     const siblingIndex = this.childNodes.indexOf(child);
     if (siblingIndex !== -1) {
-      const previousChildren = this.childNodes.slice(0, siblingIndex + 1);
-      const nextChildren = this.childNodes.slice(siblingIndex + 1);
-      this.childNodes = previousChildren.concat(newChildren, nextChildren);
-      for (let i = 0; i < newChildren.length; ++i) {
-        const newChild = newChildren[i];
-        if (newChild.parent) {
-          newChild.parent.removeChild(newChild);
+      this.childNodes.splice(siblingIndex + 1, 0, ...newChildren);
+      newChildren.forEach(c => {
+        if (c.parent) {
+          c.parent.removeChild(c);
         }
-        newChild.parent = this;
+        c.parent = this;
+      });
+    }
+  }
+
+  insertBefore(refChild: DebugNode, newChild: DebugNode): void {
+    const refIndex = this.childNodes.indexOf(refChild);
+    if (refIndex === -1) {
+      this.addChild(newChild);
+    } else {
+      if (newChild.parent) {
+        newChild.parent.removeChild(newChild);
       }
+      newChild.parent = this;
+      this.childNodes.splice(refIndex, 0, newChild);
     }
   }
 

modules/@angular/core/src/debug/debug_renderer.ts

@@ -10,7 +10,7 @@ import {AnimationKeyframe} from '../animation/animation_keyframe';
 import {AnimationPlayer} from '../animation/animation_player';
 import {AnimationStyles} from '../animation/animation_styles';
 import {isPresent} from '../facade/lang';
-import {RenderComponentType, RenderDebugInfo, Renderer, RootRenderer} from '../render/api';
+import {RenderComponentType, RenderDebugInfo, Renderer, RendererV2, RootRenderer} from '../render/api';
 
 import {DebugElement, DebugNode, EventListener, getDebugNode, indexDebugNode, removeDebugNodeFromIndex} from './debug_node';
 
@@ -22,7 +22,7 @@ export class DebugDomRootRenderer implements RootRenderer {
   }
 }
 
-export class DebugDomRenderer {
+export class DebugDomRenderer implements Renderer {
   constructor(private _delegate: Renderer) {}
 
   selectRootElement(selectorOrNode: string|any, debugInfo?: RenderDebugInfo): any {
@@ -81,7 +81,7 @@ export class DebugDomRenderer {
   detachView(viewRootNodes: any[]) {
     viewRootNodes.forEach((node) => {
       const debugNode = getDebugNode(node);
-      if (isPresent(debugNode) && isPresent(debugNode.parent)) {
+      if (debugNode && debugNode.parent) {
         debugNode.parent.removeChild(debugNode);
       }
     });
@@ -156,3 +156,151 @@ export class DebugDomRenderer {
         element, startingStyles, keyframes, duration, delay, easing, previousPlayers);
   }
 }
+
+export class DebugDomRendererV2 implements RendererV2 {
+  constructor(private _delegate: RendererV2) {}
+
+  createElement(name: string, namespace?: string, debugInfo?: any): any {
+    const el = this._delegate.createElement(name, namespace, debugInfo);
+    const debugEl = new DebugElement(el, null, debugInfo);
+    debugEl.name = name;
+    indexDebugNode(debugEl);
+    return el;
+  }
+
+  createComment(value: string, debugInfo?: any): any {
+    const comment = this._delegate.createComment(value, debugInfo);
+    const debugEl = new DebugNode(comment, null, debugInfo);
+    indexDebugNode(debugEl);
+    return comment;
+  }
+
+  createText(value: string, debugInfo?: any): any {
+    const text = this._delegate.createText(value, debugInfo);
+    const debugEl = new DebugNode(text, null, debugInfo);
+    indexDebugNode(debugEl);
+    return text;
+  }
+
+  appendChild(parent: any, newChild: any): void {
+    const debugEl = getDebugNode(parent);
+    const debugChildEl = getDebugNode(newChild);
+    if (debugEl && debugChildEl && debugEl instanceof DebugElement) {
+      debugEl.addChild(debugChildEl);
+    }
+    this._delegate.appendChild(parent, newChild);
+  }
+
+  insertBefore(parent: any, newChild: any, refChild: any): void {
+    const debugEl = getDebugNode(parent);
+    const debugChildEl = getDebugNode(newChild);
+    const debugRefEl = getDebugNode(refChild);
+    if (debugEl && debugChildEl && debugEl instanceof DebugElement) {
+      debugEl.insertBefore(debugRefEl, debugChildEl);
+    }
+
+    this._delegate.insertBefore(parent, newChild, refChild);
+  }
+
+  removeChild(parent: any, oldChild: any): void {
+    const debugEl = getDebugNode(parent);
+    const debugChildEl = getDebugNode(oldChild);
+    if (debugEl && debugChildEl && debugEl instanceof DebugElement) {
+      debugEl.removeChild(debugChildEl);
+    }
+    this._delegate.removeChild(parent, oldChild);
+  }
+
+  selectRootElement(selectorOrNode: string|any, debugInfo?: any): any {
+    const el = this._delegate.selectRootElement(selectorOrNode, debugInfo);
+    const debugEl = new DebugElement(el, null, debugInfo);
+    indexDebugNode(debugEl);
+    return el;
+  }
+
+  parentNode(node: any): any { return this._delegate.parentNode(node); }
+
+  nextSibling(node: any): any { return this._delegate.nextSibling(node); }
+
+  setAttribute(el: any, name: string, value: string, namespace?: string): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      const fullName = namespace ? namespace + ':' + name : name;
+      debugEl.attributes[fullName] = value;
+    }
+    this._delegate.setAttribute(el, name, value, namespace);
+  }
+
+  removeAttribute(el: any, name: string, namespace?: string): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      const fullName = namespace ? namespace + ':' + name : name;
+      debugEl.attributes[fullName] = null;
+    }
+    this._delegate.removeAttribute(el, name, namespace);
+  }
+
+  setBindingDebugInfo(el: any, propertyName: string, propertyValue: string): void {
+    this._delegate.setBindingDebugInfo(el, propertyName, propertyValue);
+  }
+
+  removeBindingDebugInfo(el: any, propertyName: string): void {
+    this._delegate.removeBindingDebugInfo(el, propertyName);
+  }
+
+  addClass(el: any, name: string): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.classes[name] = true;
+    }
+    this._delegate.addClass(el, name);
+  }
+
+  removeClass(el: any, name: string): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.classes[name] = false;
+    }
+    this._delegate.removeClass(el, name);
+  }
+
+  setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
+      void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.styles[style] = value;
+    }
+    this._delegate.setStyle(el, style, value, hasVendorPrefix, hasImportant);
+  }
+
+  removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.styles[style] = null;
+    }
+    this._delegate.removeStyle(el, style, hasVendorPrefix);
+  }
+
+  setProperty(el: any, name: string, value: any): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.properties[name] = value;
+    }
+    this._delegate.setProperty(el, name, value);
+  }
+
+  setText(node: any, value: string): void { this._delegate.setText(node, value); }
+
+  listen(
+      target: 'document'|'windows'|'body'|any, eventName: string,
+      callback: (event: any) => boolean): () => void {
+    if (typeof target !== 'string') {
+      const debugEl = getDebugNode(target);
+      if (debugEl) {
+        debugEl.listeners.push(new EventListener(eventName, callback));
+      }
+    }
+
+    return this._delegate.listen(target, eventName, callback);
+  }
+}