Removed NgElement (#962)

* Removed NgElement

* fix: TestProject does not compile

Author: Alexander Vakrilov

nativescript-angular/element-registry.ts

@@ -2,36 +2,35 @@ import { View } from "tns-core-modules/ui/core/view";
 import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
 
 export type NgView = (View & ViewExtensions);
-export type NgElement = NgView | InvisibleNode;
 
 export interface ViewExtensions {
     meta: ViewClassMeta;
     nodeType: number;
     nodeName: string;
     templateParent: NgView;
-    nextSibling: NgElement;
-    firstChild: NgElement;
-    lastChild: NgElement;
+    nextSibling: NgView;
+    firstChild: NgView;
+    lastChild: NgView;
     ngCssClasses: Map<string, boolean>;
 }
 
 export interface ElementReference {
-    previous: NgElement;
-    next: NgElement;
+    previous: NgView;
+    next: NgView;
 }
 
 export interface ViewClass {
     new (): View;
 }
 
-export abstract class InvisibleNode extends View implements ViewExtensions {
+export abstract class InvisibleNode extends View implements NgView {
     meta: { skipAddToDom: boolean };
     nodeType: number;
     nodeName: string;
     templateParent: NgView;
-    nextSibling: NgElement;
-    firstChild: NgElement;
-    lastChild: NgElement;
+    nextSibling: NgView;
+    firstChild: NgView;
+    lastChild: NgView;
     ngCssClasses: Map<string, boolean>;
 
     constructor() {

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, NgElement, InvisibleNode, ElementReference, isDetachedElement } from "./element-registry";
+import { NgView, InvisibleNode, ElementReference, isDetachedElement } from "./element-registry";
 import { rendererLog as traceLog } from "./trace";
 
 // CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application.
@@ -76,7 +76,7 @@ export class NativeScriptRenderer extends Renderer2 {
     data: { [key: string]: any } = Object.create(null);
 
     constructor(
-        private rootView: NgElement,
+        private rootView: NgView,
         private zone: NgZone,
         private viewUtil: ViewUtil
     ) {
@@ -85,20 +85,20 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    appendChild(parent: NgElement, newChild: NgElement): void {
+    appendChild(parent: NgView, newChild: NgView): void {
         traceLog(`NativeScriptRenderer.appendChild child: ${newChild} parent: ${parent}`);
         this.viewUtil.insertChild(parent, newChild);
     }
 
     @profile
-    insertBefore(parent: NgElement, newChild: NgElement, { previous, next }: ElementReference): void {
+    insertBefore(parent: NgView, newChild: NgView, { previous, next }: ElementReference): void {
         traceLog(`NativeScriptRenderer.insertBefore child: ${newChild} ` +
         `parent: ${parent} previous: ${previous} next: ${next}`);
         this.viewUtil.insertChild(parent, newChild, previous, next);
     }
 
     @profile
-    removeChild(parent: any, oldChild: NgElement): void {
+    removeChild(parent: any, oldChild: NgView): void {
         traceLog(`NativeScriptRenderer.removeChild child: ${oldChild} parent: ${parent}`);
         this.viewUtil.removeChild(parent, oldChild);
     }
@@ -116,7 +116,7 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    nextSibling(node: NgElement): ElementReference {
+    nextSibling(node: NgView): ElementReference {
         traceLog(`NativeScriptRenderer.nextSibling of ${node} is ${node.nextSibling}`);
 
         let next = node.nextSibling;
@@ -137,7 +137,7 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    createElement(name: any, _namespace: string): NgElement {
+    createElement(name: any, _namespace: string): NgView {
         traceLog(`NativeScriptRenderer.createElement: ${name}`);
         return this.viewUtil.createView(name);
     }
@@ -155,7 +155,7 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    projectNodes(parentElement: NgElement, nodes: NgElement[]): void {
+    projectNodes(parentElement: NgView, nodes: NgView[]): void {
         traceLog("NativeScriptRenderer.projectNodes");
         nodes.forEach((node) => this.viewUtil.insertChild(parentElement, node));
     }
@@ -168,13 +168,13 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    setAttribute(view: NgElement, name: string, value: string, namespace?: string) {
+    setAttribute(view: NgView, name: string, value: string, namespace?: string) {
         traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}, namespace: ${namespace}`);
         return this.viewUtil.setProperty(view, name, value, namespace);
     }
 
     @profile
-    removeAttribute(_el: NgElement, _name: string): void {
+    removeAttribute(_el: NgView, _name: string): void {
         traceLog(`NativeScriptRenderer.removeAttribute ${_el}: ${_name}`);
     }
 
@@ -185,33 +185,33 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    addClass(view: NgElement, name: string): void {
+    addClass(view: NgView, name: string): void {
         traceLog(`NativeScriptRenderer.addClass ${name}`);
         this.viewUtil.addClass(view, name);
     }
 
     @profile
-    removeClass(view: NgElement, name: string): void {
+    removeClass(view: NgView, name: string): void {
         traceLog(`NativeScriptRenderer.removeClass ${name}`);
         this.viewUtil.removeClass(view, name);
     }
 
     @profile
-    setStyle(view: NgElement, styleName: string, value: any, _flags?: RendererStyleFlags2): void {
+    setStyle(view: NgView, styleName: string, value: any, _flags?: RendererStyleFlags2): void {
         traceLog(`NativeScriptRenderer.setStyle: ${styleName} = ${value}`);
         this.viewUtil.setStyle(view, styleName, value);
     }
 
     @profile
-    removeStyle(view: NgElement, styleName: string, _flags?: RendererStyleFlags2): void {
+    removeStyle(view: NgView, styleName: string, _flags?: RendererStyleFlags2): void {
         traceLog("NativeScriptRenderer.removeStyle: ${styleName}");
         this.viewUtil.removeStyle(view, styleName);
     }
 
     // Used only in debug mode to serialize property changes to comment nodes,
     // such as <template> placeholders.
     @profile
-    setBindingDebugInfo(renderElement: NgElement, propertyName: string, propertyValue: string): void {
+    setBindingDebugInfo(renderElement: NgView, propertyName: string, propertyValue: string): void {
         traceLog("NativeScriptRenderer.setBindingDebugInfo: " + renderElement + ", " +
             propertyName + " = " + propertyValue);
     }
@@ -222,7 +222,7 @@ export class NativeScriptRenderer extends Renderer2 {
     }
 
     @profile
-    invokeElementMethod(_renderElement: NgElement, methodName: string, args: Array<any>) {
+    invokeElementMethod(_renderElement: NgView, methodName: string, args: Array<any>) {
         traceLog("NativeScriptRenderer.invokeElementMethod " + methodName + " " + args);
     }
 
@@ -272,15 +272,15 @@ class EmulatedRenderer extends NativeScriptRenderer {
         this.addStyles(component.styles, componentId);
     }
 
-    applyToHost(view: NgElement) {
+    applyToHost(view: NgView) {
         super.setAttribute(view, this.hostAttr, "");
     }
 
-    appendChild(parent: any, newChild: NgElement): void {
+    appendChild(parent: any, newChild: NgView): void {
         super.appendChild(parent, newChild);
     }
 
-    createElement(parent: any, name: string): NgElement {
+    createElement(parent: any, name: string): NgView {
         const view = super.createElement(parent, name);
 
         // Set an attribute to the view to scope component-specific css.

nativescript-angular/view-util.ts

@@ -6,7 +6,6 @@ import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
 import {
     CommentNode,
     InvisibleNode,
-    NgElement,
     NgView,
     TextNode,
     ViewExtensions,
@@ -55,9 +54,9 @@ export class ViewUtil {
 
     public insertChild(
         parent: NgView,
-        child: NgElement,
-        previous: NgElement = parent.lastChild,
-        next?: NgElement
+        child: NgView,
+        previous: NgView = parent.lastChild,
+        next?: NgView
     ) {
         if (!parent) {
             return;
@@ -75,10 +74,10 @@ export class ViewUtil {
     }
 
     private addToQueue(
-        parent: NgElement,
-        child: NgElement,
-        previous: NgElement,
-        next: NgElement
+        parent: NgView,
+        child: NgView,
+        previous: NgView,
+        next: NgView
     ): void {
         if (previous) {
             previous.nextSibling = child;
@@ -93,7 +92,7 @@ export class ViewUtil {
         }
     }
 
-    private appendToQueue(parent: NgElement, view: NgElement) {
+    private appendToQueue(parent: NgView, view: NgView) {
         traceLog(`ViewUtil.appendToQueue parent: ${parent} view: ${view}`);
         if (parent.lastChild) {
             parent.lastChild.nextSibling = view;
@@ -131,7 +130,7 @@ export class ViewUtil {
         }
     }
 
-    public removeChild(parent: NgView, child: NgElement) {
+    public removeChild(parent: NgView, child: NgView) {
         if (!parent) {
             return;
         }
@@ -183,7 +182,8 @@ export class ViewUtil {
         }
     }
 
-    private findPreviousElement(parent: NgLayoutBase, child: NgView, elementIndex: number): NgElement {
+    // NOTE: This one is O(n) - use carefully
+    private findPreviousElement(parent: NgLayoutBase, child: NgView, elementIndex: number): NgView {
         const previousVisual = this.getPreviousVisualElement(parent, elementIndex);
         let previous = previousVisual || parent.firstChild;
 
@@ -197,12 +197,13 @@ export class ViewUtil {
         return previous;
     }
 
-    private getPreviousVisualElement(parent: NgLayoutBase, elementIndex: number): NgElement {
+    private getPreviousVisualElement(parent: NgLayoutBase, elementIndex: number): NgView {
         if (elementIndex > 0) {
-            return parent.getChildAt(elementIndex - 1) as NgElement;
+            return parent.getChildAt(elementIndex - 1) as NgView;
         }
     }
 
+    // NOTE: This one is O(n) - use carefully
     public getChildIndex(parent: any, child: NgView) {
         if (isLayout(parent)) {
             return parent.getChildIndex(child);

tests/app/tests/ns-location-strategy.ts

@@ -19,7 +19,7 @@ class FakeFrame extends View implements Frame {
         }
     }
 
-    navigate(entry: NavigationEntry) { }
+    navigate(entry: any) { }
 
     constructor(private backCB?: () => void) {
         super();

tests/app/tests/property-sets.ts

@@ -6,20 +6,19 @@ import {
     NgView,
     ViewExtensions,
     ViewClassMeta,
-    NgElement,
 } from "nativescript-angular/element-registry";
 import {Red} from "color/known-colors";
 import {device, platformNames} from "platform";
 import {createDevice} from "./test-utils";
 
-class TestView extends View implements ViewExtensions {
+class TestView extends View implements NgView {
     public meta: ViewClassMeta = { skipAddToDom: false };
     public nodeType: number = 1;
     public nodeName: string = "TestView";
     public templateParent: NgView = null;
-    public nextSibling: NgElement;
-    public firstChild: NgElement;
-    public lastChild: NgElement;
+    public nextSibling: NgView;
+    public firstChild: NgView;
+    public lastChild: NgView;
     public ngCssClasses: Map<string, boolean> = new Map<string, boolean>();
 
     public stringValue: string = "";