refactor(renderer): create DetachedElements instead for comments and

text nodes

Author: sis0k0

Diff for: nativescript-angular/directives/action-bar.ts

@@ -7,7 +7,7 @@ import { registerElement, ViewClassMeta, NgView } from "../element-registry";
 
 const actionBarMeta: ViewClassMeta = {
     skipAddToDom: true,
-    insertChild: (parent: NgView, child: NgView, atIndex: number) => {
+    insertChild: (parent: NgView, child: NgView) => {
         const bar = <ActionBar>(<any>parent);
         const childView = <any>child;
 
@@ -17,8 +17,6 @@ const actionBarMeta: ViewClassMeta = {
         } else if (child instanceof ActionItem) {
             bar.actionItems.addItem(childView);
             childView.parent = bar;
-        } else if (child.nodeName === "#comment") {
-            bar._addView(childView, atIndex);
         } else if (child instanceof View) {
             bar.titleView = childView;
         }

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

@@ -1,29 +1,31 @@
 import {
+    AfterContentInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
+    ContentChild,
     Directive,
-    Input,
     DoCheck,
-    OnDestroy,
-    AfterContentInit,
     ElementRef,
-    ViewContainerRef,
-    TemplateRef,
-    ContentChild,
     EmbeddedViewRef,
-    IterableDiffers,
-    IterableDiffer,
-    ChangeDetectorRef,
     EventEmitter,
-    ViewChild,
-    Output,
     Host,
-    ChangeDetectionStrategy
+    Input,
+    IterableDiffer,
+    IterableDiffers,
+    OnDestroy,
+    Output,
+    TemplateRef,
+    ViewChild,
+    ViewContainerRef,
 } from "@angular/core";
-import { isListLikeIterable } from "../collection-facade";
 import { ListView, ItemEventData } from "tns-core-modules/ui/list-view";
 import { View, KeyedTemplate } from "tns-core-modules/ui/core/view";
 import { ObservableArray } from "tns-core-modules/data/observable-array";
 import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
+
+import { DetachedElement } from "../element-registry";
+import { isListLikeIterable } from "../collection-facade";
 import { listViewLog, listViewError } from "../trace";
 
 const NG_VIEW = "_ngViewRef";
@@ -212,23 +214,27 @@ export class ListViewComponent implements DoCheck, OnDestroy, AfterContentInit {
 }
 
 function getSingleViewRecursive(nodes: Array<any>, nestLevel: number): View {
-    const actualNodes = nodes.filter((n) => !!n && n.nodeName !== "#text");
+    const actualNodes = nodes.filter(node => !(node instanceof DetachedElement));
 
     if (actualNodes.length === 0) {
-        throw new Error("No suitable views found in list template! Nesting level: " + nestLevel);
+        throw new Error(`No suitable views found in list template! ` +
+            `Nesting level: ${nestLevel}`);
     } else if (actualNodes.length > 1) {
-        throw new Error("More than one view found in list template! Nesting level: " + nestLevel);
-    } else {
-        if (actualNodes[0]) {
-            let parentLayout = actualNodes[0].parent;
-            if (parentLayout instanceof LayoutBase) {
-                parentLayout.removeChild(actualNodes[0]);
-            }
-            return actualNodes[0];
-        } else {
-            return getSingleViewRecursive(actualNodes[0].children, nestLevel + 1);
-        }
+        throw new Error(`More than one view found in list template!` +
+            `Nesting level: ${nestLevel}`);
+    }
+
+    const rootLayout = actualNodes[0];
+    if (!rootLayout) {
+        return getSingleViewRecursive(rootLayout.children, nestLevel + 1);
+    }
+
+    let parentLayout = rootLayout.parent;
+    if (parentLayout instanceof LayoutBase) {
+        parentLayout.removeChild(rootLayout);
     }
+
+    return rootLayout;
 }
 
 export interface ComponentView {

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

@@ -1,5 +1,15 @@
-import { ElementRef, Directive, Input, TemplateRef, ViewContainerRef, OnInit, AfterViewInit } from "@angular/core";
+import {
+    AfterViewInit,
+    Directive,
+    ElementRef,
+    Input,
+    OnInit,
+    TemplateRef,
+    ViewContainerRef,
+} from "@angular/core";
 import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view";
+
+import { DetachedElement } from "../element-registry";
 import { convertToInt } from "../common/utils";
 import { rendererLog } from "../trace";
 import { isBlank } from "../lang-facade";
@@ -94,9 +104,9 @@ export class TabViewItemDirective implements OnInit {
         }
 
         const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-        // Filter out text nodes, etc
-        const realViews = viewRef.rootNodes.filter((node) =>
-                            node.nodeName && node.nodeName !== "#text");
+        // Filter out text nodes and comments
+        const realViews = viewRef.rootNodes.filter(node =>
+                            !(node instanceof DetachedElement));
 
         if (realViews.length > 0) {
             this.item.view = realViews[0];

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

@@ -1,7 +1,8 @@
 import { View } from "tns-core-modules/ui/core/view";
 
 export type ViewResolver = () => ViewClass;
-export type NgView = View & ViewExtensions;
+export type NgView = (View & ViewExtensions);
+export type NgElement = NgView | DetachedElement;
 export interface ViewClassMeta {
     skipAddToDom?: boolean;
     insertChild?: (parent: NgView, child: NgView, atIndex: number) => void;
@@ -20,6 +21,11 @@ export interface ViewClass {
     new (): View;
 }
 
+export class DetachedElement {
+    templateParent: NgView;
+    meta: { skipAddToDom: true };
+}
+
 const defaultViewMeta: ViewClassMeta = {
     skipAddToDom: false,
 };
@@ -110,10 +116,3 @@ registerElement("Span", () => require("tns-core-modules/text/span").Span);
 
 registerElement("DetachedContainer", () => require("tns-core-modules/ui/proxy-view-container").ProxyViewContainer,
     { skipAddToDom: true });
-
-registerElement("DetachedText", () => require("ui/placeholder").Placeholder,
-    { skipAddToDom: true });
-
-registerElement("Comment", () => require("ui/placeholder").Placeholder,
-    { skipAddToDom: true });
-

Diff for: nativescript-angular/renderer.ts

@@ -12,7 +12,7 @@ import { topmost } from "tns-core-modules/ui/frame";
 import { APP_ROOT_VIEW, DEVICE, getRootPage } from "./platform-providers";
 import { isBlank } from "./lang-facade";
 import { ViewUtil } from "./view-util";
-import { NgView } from "./element-registry";
+import { NgView, DetachedElement } from "./element-registry";
 import { rendererLog as traceLog } from "./trace";
 
 // CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application.
@@ -111,7 +111,7 @@ export class NativeScriptRenderer extends Renderer2 {
         return this.viewUtil.nextSiblingIndex(node);
     }
 
-    createComment(_value: any) {
+    createComment(_value: any): DetachedElement {
         traceLog(`NativeScriptRenderer.createComment ${_value}`);
         return this.viewUtil.createComment();
     }
@@ -121,7 +121,7 @@ export class NativeScriptRenderer extends Renderer2 {
         return this.viewUtil.createView(name);
     }
 
-    createText(_value: string) {
+    createText(_value: string): DetachedElement {
         traceLog(`NativeScriptRenderer.createText ${_value}`);
         return this.viewUtil.createText();
     }

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

@@ -8,6 +8,8 @@ import {
     getViewMeta,
     isKnownView,
     ViewExtensions,
+    DetachedElement,
+    NgElement,
     NgView,
 } from "./element-registry";
 import { platformNames, Device } from "tns-core-modules/platform";
@@ -47,21 +49,21 @@ export class ViewUtil {
         this.isAndroid = device.os === platformNames.android;
     }
 
-    public insertChild(parent: any, child: NgView, atIndex: number = -1) {
-        if (!parent) {
+    public insertChild(parent: any, child: NgElement, atIndex: number = -1) {
+        if (child instanceof DetachedElement) {
+            child.templateParent = parent;
             return;
         }
 
-        if (child.meta.skipAddToDom) {
-            child.templateParent = parent;
+        if (!parent || child.meta.skipAddToDom) {
             return;
         }
 
         if (parent.meta && parent.meta.insertChild) {
             parent.meta.insertChild(parent, child, atIndex);
         } else if (isLayout(parent)) {
             if (child.parent === parent) {
-                let index = (<LayoutBase>parent).getChildIndex(child);
+                const index = (<LayoutBase>parent).getChildIndex(child);
                 if (index !== -1) {
                     parent.removeChild(child);
                 }
@@ -72,21 +74,16 @@ export class ViewUtil {
                 parent.addChild(child);
             }
         } else if (isContentView(parent)) {
-            // Explicit handling of template anchors inside ContentView
-            if (child.nodeName === "#comment") {
-                parent._addView(child, atIndex);
-            } else {
-                parent.content = child;
-            }
+            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: NgView) {
-        if (!parent || child.meta.skipAddToDom) {
+    public removeChild(parent: any, child: NgElement) {
+        if (!parent || child instanceof DetachedElement || child.meta.skipAddToDom) {
             return;
         }
 
@@ -98,11 +95,6 @@ export class ViewUtil {
             if (parent.content === child) {
                 parent.content = null;
             }
-
-            // Explicit handling of template anchors inside ContentView
-            if (child.nodeName === "#comment") {
-                parent._removeView(child);
-            }
         } else if (isView(parent)) {
             parent._removeView(child);
         } else {
@@ -120,20 +112,12 @@ export class ViewUtil {
         }
     }
 
-    public createComment(): NgView {
-        const commentView = this.createView("Comment");
-        commentView.nodeName = "#comment";
-        commentView.visibility = "collapse";
-
-        return commentView;
+    public createComment(): DetachedElement {
+        return new DetachedElement();
     }
 
-    public createText(): NgView {
-        const detachedText = this.createView("DetachedText");
-        detachedText.nodeName = "#text";
-        detachedText.visibility = "collapse";
-
-        return detachedText;
+    public createText(): DetachedElement {
+        return new DetachedElement();
     }
 
     public createView(name: string): NgView {
@@ -142,6 +126,7 @@ export class ViewUtil {
         if (!isKnownView(name)) {
             name = "ProxyViewContainer";
         }
+
         const viewClass = getViewClass(name);
         let view = <NgView>new viewClass();
         view.nodeName = name;