fix(renderer): implement createComment and createText methods using

Placeholders. - createComment - create new element "Comment" using ui/placeholder and attach it. These comments are used as anchors (nextSibling) for structural directives such as *ngIf and *ngFor. - createText - create new element "DetachedText" using ui/placeholder and don't attach it.
NativeScript · Mar 16, 2017 · c0ec870 · c0ec870
1 parent b397602
commit c0ec870
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 39 deletions.
diff --git a/nativescript-angular/element-registry.ts b/nativescript-angular/element-registry.ts
@@ -2,7 +2,7 @@ import { View } from "ui/core/view";
 
 export type ViewResolver = () => ViewClass;
 export type NgView = View & ViewExtensions;
-export const TEMPLATE = "template";
+export const TEMPLATE = "ng-template";
 
 export interface ViewClassMeta {
     skipAddToDom?: boolean;
@@ -117,3 +117,10 @@ registerElement("Span", () => require("text/span").Span);
 
 registerElement("DetachedContainer", () => require("ui/proxy-view-container").ProxyViewContainer,
     { skipAddToDom: true });
+
+registerElement("DetachedText", () => require("ui/placeholder").Placeholder,
+    { skipAddToDom: true });
+
+registerElement("Comment", () => require("ui/placeholder").Placeholder,
+    { skipAddToDom: false });
+
diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts
@@ -119,6 +119,21 @@ export class NativeScriptRenderer extends RendererV2 {
         return this.viewUtil.nextSiblingIndex(node);
     }
 
+    createComment(_value: any) {
+        traceLog(`NativeScriptRenderer.createComment ${_value}`);
+        return this.viewUtil.createComment();
+    }
+
+    createElement(name: any, _namespace: string): NgView {
+        traceLog(`NativeScriptRenderer.createElement: ${name}`);
+        return this.viewUtil.createView(name);
+    }
+
+    createText(_value: string) {
+        traceLog(`NativeScriptRenderer.createText ${_value}`);
+        return this.viewUtil.createText();
+    }
+
     createViewRoot(hostElement: NgView): NgView {
         traceLog(`NativeScriptRenderer.createViewRoot ${hostElement.nodeName}`);
         return hostElement;
@@ -134,11 +149,6 @@ export class NativeScriptRenderer extends RendererV2 {
         // Seems to be called on component dispose only (router outlet)
         // TODO: handle this when we resolve routing and navigation.
     }
-
-    createComment(_value: any) {
-        traceLog(`NativeScriptRenderer.createComment ${_value}`);
-    }
-
     setAttribute(view: NgView, name: string, value: string) {
         traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`);
         return this.setProperty(view, name, value);
@@ -192,16 +202,6 @@ export class NativeScriptRenderer extends RendererV2 {
         traceLog("NativeScriptRenderer.setValue");
     }
 
-    createElement(name: any, _namespace: string): NgView {
-        traceLog(`NativeScriptRenderer.createElement: ${name}`);
-        return this.viewUtil.createView(name);
-    }
-
-    createText(_value: string) {
-        traceLog("NativeScriptRenderer.createText");
-        return this.viewUtil.createText();
-    }
-
     listen(renderElement: any, eventName: string, callback: (event: any) => boolean):
         () => void {
         traceLog("NativeScriptRenderer.listen: " + eventName);

diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts
@@ -56,7 +56,7 @@ export class ViewUtil {
     }
 
     public insertChild(parent: any, child: NgView, atIndex: number = -1) {
-        if (!parent || child.meta.skipAddToDom || isPlaceholder(child) === true) {
+        if (!parent || child.meta.skipAddToDom) {
             return;
         }
 
@@ -123,8 +123,24 @@ export class ViewUtil {
         }
     }
 
+    public createComment(): NgView {
+        const commentView = this.createView("Comment");
+        commentView.nodeName = "#comment";
+        commentView.visibility = "collapse";
+
+        return commentView;
+    }
+
+    public createText(): NgView {
+        const detachedText = this.createView("DetachedText");
+        detachedText.nodeName = "#text";
+        detachedText.visibility = "collapse";
+
+        return detachedText;
+    }
+
     public createView(name: string): NgView {
-        traceLog("Creating view:" + name);
+        traceLog(`Creating view: ${name}`);
 
         if (!isKnownView(name)) {
             name = "ProxyViewContainer";
@@ -137,14 +153,6 @@ export class ViewUtil {
         return view;
     }
 
-    public createText(): NgView {
-        const text = <NgView>new Placeholder();
-        text.nodeName = "#text";
-        text.visibility = "collapse";
-        text.meta = getViewMeta("Placeholder");
-        return text;
-    }
-
     private isXMLAttribute(name: string): boolean {
         return XML_ATTRIBUTES.indexOf(name) !== -1;
     }
@@ -204,23 +212,22 @@ export class ViewUtil {
     // returns -1 if the node has no parent or next sibling
     public nextSiblingIndex(node: NgView): number {
         const parent = node.parent;
-
         if (!parent) {
             return -1;
-        } else {
-            let index = 0;
-            let found = false;
-            parent.eachChild(child => {
-                if (child === node) {
-                    found = true;
-                }
+        }
 
-                index += 1;
-                return !found;
-            });
+        let index = 0;
+        let found = false;
+        parent.eachChild(child => {
+            if (child === node) {
+                found = true;
+            }
 
-            return found ? index : -1;
-        }
+            index += 1;
+            return !found;
+        });
+
+        return found ? index : -1;
     }
 
     private setPropertyInternal(view: NgView, attributeName: string, value: any): void {