fix(renderer): attach CommentNodes to visual tree

fixes #872

Author: sis0k0

Diff for: nativescript-angular/directives/list-view-comp.ts

@@ -25,7 +25,7 @@ import { ObservableArray } from "tns-core-modules/data/observable-array";
 import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
 import { profile } from "tns-core-modules/profiling";
 
-import { CommentNode } from "../element-registry";
+import { InvisibleNode } from "../element-registry";
 import { isListLikeIterable } from "../collection-facade";
 import { listViewLog, listViewError } from "../trace";
 
@@ -217,7 +217,7 @@ export class ListViewComponent implements DoCheck, OnDestroy, AfterContentInit {
 }
 
 function getSingleViewRecursive(nodes: Array<any>, nestLevel: number): View {
-    const actualNodes = nodes.filter(node => !(node instanceof CommentNode));
+    const actualNodes = nodes.filter(node => !(node instanceof InvisibleNode));
 
     if (actualNodes.length === 0) {
         throw new Error(`No suitable views found in list template! ` +

Diff for: nativescript-angular/directives/tab-view.ts

@@ -9,7 +9,7 @@ import {
 } from "@angular/core";
 import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view";
 
-import { CommentNode } from "../element-registry";
+import { InvisibleNode } from "../element-registry";
 import { rendererLog } from "../trace";
 import { isBlank } from "../lang-facade";
 
@@ -105,7 +105,7 @@ export class TabViewItemDirective implements OnInit {
         const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
         // Filter out text nodes and comments
         const realViews = viewRef.rootNodes.filter(node =>
-                            !(node instanceof CommentNode));
+                            !(node instanceof InvisibleNode));
 
         if (realViews.length > 0) {
             this.item.view = realViews[0];

Diff for: nativescript-angular/element-registry.ts

@@ -1,7 +1,7 @@
 import { View } from "tns-core-modules/ui/core/view";
 
 export type NgView = (View & ViewExtensions);
-export type NgElement = NgView | CommentNode;
+export type NgElement = NgView | InvisibleNode;
 
 export interface ViewExtensions {
     nodeType: number;
@@ -15,12 +15,55 @@ export interface ViewClass {
     new (): View;
 }
 
-// used for creating comments and text nodes in the renderer
-export class CommentNode {
-    meta: { skipAddToDom: true };
+export abstract class InvisibleNode extends View implements ViewExtensions {
+    meta: { skipAddToDom: boolean };
     templateParent: NgView;
+    nodeType: number;
+    nodeName: string;
+    ngCssClasses: Map<string, boolean>;
+
+    constructor() {
+        super();
+
+        this.nodeType = 1;
+        this.nodeName = getClassName(this);
+    }
+
+    toString() {
+        return `${this.nodeName}(${this.id})`;
+    }
 }
 
+export class CommentNode extends InvisibleNode {
+    protected static id = 0;
+
+    constructor() {
+        super();
+
+        this.meta = {
+            skipAddToDom: false,
+        };
+        this.id = CommentNode.id.toString();
+        CommentNode.id += 1;
+    }
+}
+
+export class TextNode extends InvisibleNode {
+    protected static id = 0;
+
+    constructor() {
+        super();
+
+        this.meta = {
+            skipAddToDom: true,
+        };
+        this.id = TextNode.id.toString();
+        TextNode.id += 1;
+    }
+}
+
+const getClassName = instance => instance.constructor.name;
+
 export interface ViewClassMeta {
     skipAddToDom?: boolean;
     insertChild?: (parent: NgView, child: NgView, atIndex: number) => void;

Diff for: nativescript-angular/renderer.ts

@@ -13,7 +13,7 @@ import { profile } from "tns-core-modules/profiling";
 import { APP_ROOT_VIEW, DEVICE, getRootPage } from "./platform-providers";
 import { isBlank } from "./lang-facade";
 import { ViewUtil } from "./view-util";
-import { NgView, CommentNode } from "./element-registry";
+import { NgView, InvisibleNode } from "./element-registry";
 import { rendererLog as traceLog } from "./trace";
 
 // CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application.
@@ -120,7 +120,7 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    createComment(_value: any): CommentNode {
+    createComment(_value: any): InvisibleNode {
         traceLog(`NativeScriptRenderer.createComment ${_value}`);
         return this.viewUtil.createComment();
     }
@@ -132,7 +132,7 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    createText(_value: string): CommentNode {
+    createText(_value: string): InvisibleNode {
         traceLog(`NativeScriptRenderer.createText ${_value}`);
         return this.viewUtil.createText();
     }

Diff for: nativescript-angular/view-util.ts

@@ -5,8 +5,10 @@ import { ContentView } from "tns-core-modules/ui/content-view";
 import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
 import {
     CommentNode,
+    InvisibleNode,
     NgElement,
     NgView,
+    TextNode,
     ViewExtensions,
     getViewClass,
     getViewMeta,
@@ -52,9 +54,8 @@ export class ViewUtil {
     }
 
     public insertChild(parent: any, child: NgElement, atIndex: number = -1) {
-        if (child instanceof CommentNode) {
+        if (child instanceof InvisibleNode) {
             child.templateParent = parent;
-            return;
         }
 
         if (!parent || isDetachedElement(child)) {
@@ -79,16 +80,11 @@ export class ViewUtil {
             parent.content = child;
         } else if (parent && parent._addChildFromBuilder) {
             parent._addChildFromBuilder(child.nodeName, child);
-        } else {
-            // throw new Error("Parent can"t contain children: " + parent.nodeName + ", " + parent);
         }
     }
 
     public removeChild(parent: any, child: NgElement) {
-        if (!parent ||
-            child instanceof CommentNode ||
-            isDetachedElement(child)) {
-
+        if (!parent || isDetachedElement(child)) {
             return;
         }
 
@@ -102,8 +98,6 @@ export class ViewUtil {
             }
         } else if (isView(parent)) {
             parent._removeView(child);
-        } else {
-            // throw new Error("Unknown parent type: " + parent);
         }
     }
 
@@ -112,17 +106,15 @@ export class ViewUtil {
             return parent.getChildIndex(child);
         } else if (isContentView(parent)) {
             return child === parent.content ? 0 : -1;
-        } else {
-            // throw new Error("Parent can"t contain children: " + parent);
         }
     }
 
-    public createComment(): CommentNode {
+    public createComment(): InvisibleNode {
         return new CommentNode();
     }
 
-    public createText(): CommentNode {
-        return new CommentNode();
+    public createText(): InvisibleNode {
+        return new TextNode();
     }
 
     public createView(name: string): NgView {