feat: RendererV2 integration (angular#14469)

Author: vicb

modules/@angular/common/test/directives/ng_class_spec.ts

@@ -15,7 +15,7 @@ export function main() {
 
     function detectChangesAndExpectClassName(classes: string): void {
       fixture.detectChanges();
-      expect(fixture.debugElement.children[0].nativeElement.className).toEqual(classes);
+      expect(fixture.debugElement.children[0].nativeElement.className.trim()).toEqual(classes);
     }
 
     function getComponent(): TestComponent { return fixture.debugElement.componentInstance; }

modules/@angular/compiler/src/view_compiler_next/view_compiler.ts

@@ -107,7 +107,8 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
     }
 
     templateVisitAll(this, astNodes, {elementDepth});
-    if (astNodes.length === 0 || (this.parent && hasViewContainer(astNodes[astNodes.length - 1]))) {
+    if (astNodes.length === 0 ||
+        (this.parent && needsAdditionalRootNode(astNodes[astNodes.length - 1]))) {
       // if the view is empty, or an embedded view has a view container as last root nde,
       // create an additional root node.
       this.nodeDefs.push(o.importExpr(createIdentifier(Identifiers.anchorDef)).callFn([
@@ -752,13 +753,16 @@ function depDef(dep: CompileDiDependencyMetadata): o.Expression {
   return flags === viewEngine.DepFlags.None ? expr : o.literalArr([o.literal(flags), expr]);
 }
 
-function hasViewContainer(ast: TemplateAst): boolean {
+function needsAdditionalRootNode(ast: TemplateAst): boolean {
   if (ast instanceof EmbeddedTemplateAst) {
     return ast.hasViewContainer;
-  } else if (ast instanceof ElementAst) {
+  }
+
+  if (ast instanceof ElementAst) {
     return ast.hasViewContainer;
   }
-  return false;
+
+  return ast instanceof NgContentAst;
 }
 
 function calcQueryId(queryId: QueryId): string {

modules/@angular/core/src/core_private_export.ts

@@ -92,6 +92,8 @@ export const __core_private__: {
   makeDecorator: typeof decorators.makeDecorator,
   DebugDomRootRenderer: typeof debug.DebugDomRootRenderer,
   _DebugDomRootRenderer: debug.DebugDomRootRenderer,
+  DebugDomRendererV2: typeof debug.DebugDomRendererV2,
+  _DebugDomRendererV2: debug.DebugDomRendererV2,
   Console: typeof console.Console,
   _Console: console.Console,
   reflector: typeof reflection.reflector,
@@ -101,9 +103,6 @@ export const __core_private__: {
   _NoOpAnimationPlayer: NoOpAnimationPlayer_,
   AnimationPlayer: typeof AnimationPlayer_,
   _AnimationPlayer: AnimationPlayer_,
-
-
-
   AnimationSequencePlayer: typeof AnimationSequencePlayer_,
   _AnimationSequencePlayer: AnimationSequencePlayer_,
   AnimationGroupPlayer: typeof AnimationGroupPlayer_,
@@ -157,6 +156,7 @@ export const __core_private__: {
   ReflectionCapabilities: reflection_capabilities.ReflectionCapabilities,
   makeDecorator: decorators.makeDecorator,
   DebugDomRootRenderer: debug.DebugDomRootRenderer,
+  DebugDomRendererV2: debug.DebugDomRendererV2,
   Console: console.Console,
   reflector: reflection.reflector,
   Reflector: reflection.Reflector,

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);
+  }
+}

modules/@angular/core/src/errors.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Type} from './type';
 import {DebugContext} from './view';
 
 export const ERROR_TYPE = 'ngType';

modules/@angular/core/src/linker/view_container.ts

@@ -80,8 +80,8 @@ export class ViewContainer {
     return result;
   }
 
-  moveView(view: AppView<any>, currentIndex: number) {
-    const previousIndex = this.nestedViews.indexOf(view);
+  moveView(view: AppView<any>, toIndex: number) {
+    const fromIndex = this.nestedViews.indexOf(view);
     if (view.type === ViewType.COMPONENT) {
       throw new Error(`Component views can't be moved!`);
     }
@@ -90,9 +90,9 @@ export class ViewContainer {
       nestedViews = [];
       this.nestedViews = nestedViews;
     }
-    nestedViews.splice(previousIndex, 1);
-    nestedViews.splice(currentIndex, 0, view);
-    const prevView = currentIndex > 0 ? nestedViews[currentIndex - 1] : null;
+    nestedViews.splice(fromIndex, 1);
+    nestedViews.splice(toIndex, 0, view);
+    const prevView = toIndex > 0 ? nestedViews[toIndex - 1] : null;
     view.moveAfter(this, prevView);
   }
 

modules/@angular/core/src/linker/view_container_ref.ts

@@ -7,7 +7,6 @@
  */
 
 import {Injector} from '../di/injector';
-import {isPresent} from '../facade/lang';
 import {WtfScopeFn, wtfCreateScope, wtfLeave} from '../profile/profile';
 
 import {ComponentFactory, ComponentRef} from './component_factory';
@@ -133,7 +132,7 @@ export class ViewContainerRef_ implements ViewContainerRef {
   get(index: number): ViewRef { return this._element.nestedViews[index].ref; }
   get length(): number {
     const views = this._element.nestedViews;
-    return isPresent(views) ? views.length : 0;
+    return views ? views.length : 0;
   }
 
   get element(): ElementRef { return this._element.elementRef; }

modules/@angular/core/src/render.ts

@@ -7,4 +7,4 @@
  */
 
 // Public API for render
-export {RenderComponentType, Renderer, RootRenderer} from './render/api';
+export {RENDERER_V2_DIRECT, RenderComponentType, Renderer, RendererV2, RootRenderer} from './render/api';