feat(renderer): upgrade to Angular-rc.1

- Use RendererFactoryV2 instead of RootRenderer
(NativeScriptRendererFactory)
- Use RendererV2 for NativeScriptRenderer

Author: sis0k0

nativescript-angular/nativescript.module.ts

@@ -6,14 +6,14 @@ import "./polyfills/array";
 import "./polyfills/console";
 
 import { CommonModule } from "@angular/common";
-import { NativeScriptRootRenderer, NativeScriptRenderer } from "./renderer";
+import { NativeScriptRendererFactory } from "./renderer";
 import { DetachedLoader } from "./common/detached-loader";
 import { ModalDialogHost, ModalDialogService } from "./directives/dialogs";
 import {
     ApplicationModule,
     ErrorHandler,
-    Renderer,
-    RootRenderer,
+    // RendererV2,
+    RendererFactoryV2,
     NgModule, NO_ERRORS_SCHEMA,
 } from "@angular/core";
 import {
@@ -39,10 +39,10 @@ export function errorHandlerFactory() {
         defaultPageProvider,
         defaultDeviceProvider,
 
-        NativeScriptRootRenderer,
-        { provide: RootRenderer, useClass: NativeScriptRootRenderer },
-        NativeScriptRenderer,
-        { provide: Renderer, useClass: NativeScriptRenderer },
+        NativeScriptRendererFactory,
+        { provide: RendererFactoryV2, useClass: NativeScriptRendererFactory },
+        // NativeScriptRenderer,
+        // { provide: RendererV2, useClass: NativeScriptRenderer },
         ModalDialogService
     ],
     entryComponents: [

nativescript-angular/package.json

@@ -16,8 +16,8 @@
   "scripts": {
     "tslint": "tslint --project tsconfig.json --config tslint.json",
     "postinstall": "node postinstall.js",
-    "ngc": "ngc -p tsconfig.json",
     "tsc": "tsc -p tsconfig.json",
+    "ngc": "ngc -p tsconfig.json",
     "prepublish": "npm run tsc && npm run ngc"
   },
   "bin": {

nativescript-angular/renderer.ts

@@ -1,120 +1,128 @@
 import {
     Inject, Injectable, Optional, NgZone,
-    Renderer, RootRenderer, RenderComponentType, AnimationPlayer,
-    ɵAnimationStyles, ɵAnimationKeyframe,
+    RendererV2, RendererFactoryV2, RendererTypeV2,
+    // ViewEncapsulation
+    // ɵAnimationStyles, ɵAnimationKeyframe,
 } from "@angular/core";
+
+import { escapeRegexSymbols } from "tns-core-modules/utils/utils";
+import { Device } from "tns-core-modules/platform";
+import { View } from "ui/core/view";
+import { addCss } from "application";
+import { topmost } from "ui/frame";
+
 import { APP_ROOT_VIEW, DEVICE } from "./platform-providers";
 import { isBlank } from "./lang-facade";
-import { View } from "tns-core-modules/ui/core/view";
-import { addCss } from "tns-core-modules/application";
-import { topmost } from "tns-core-modules/ui/frame";
-import { Page } from "tns-core-modules/ui/page";
 import { ViewUtil } from "./view-util";
 import { NgView } from "./element-registry";
 import { rendererLog as traceLog } from "./trace";
 import { escapeRegexSymbols } from "tns-core-modules/utils/utils";
 import { Device } from "tns-core-modules/platform";
 import { getRootPage } from "./platform-providers";
 
-import { NativeScriptAnimationDriver } from "./animation-driver";
-
-// CONTENT_ATTR not exported from dom_renderer - we need it for styles application.
+// CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application.
 export const COMPONENT_VARIABLE = "%COMP%";
 export const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
 
-
 @Injectable()
-export class NativeScriptRootRenderer implements RootRenderer {
-    private _viewUtil: ViewUtil;
-    private _animationDriver: NativeScriptAnimationDriver;
-
-    protected get animationDriver(): NativeScriptAnimationDriver {
-        if (!this._animationDriver) {
-            this._animationDriver = new NativeScriptAnimationDriver();
-        }
-        return this._animationDriver;
-    }
+export class NativeScriptRendererFactory implements RendererFactoryV2 {
+    private componentRenderers = new Map<string, NativeScriptRenderer>();
+    private viewUtil: ViewUtil;
+    private defaultRenderer: NativeScriptRenderer;
+    private rootNgView: NgView;
 
     constructor(
-        @Optional() @Inject(APP_ROOT_VIEW) private _rootView: View,
+        @Optional() @Inject(APP_ROOT_VIEW) rootView: View,
         @Inject(DEVICE) device: Device,
-        private _zone: NgZone
+        zone: NgZone
     ) {
-        this._viewUtil = new ViewUtil(device);
+        this.viewUtil = new ViewUtil(device);
+        this.setRootNgView(rootView);
+        this.defaultRenderer = new NativeScriptRenderer(this.rootNgView, zone, this.viewUtil);
     }
 
-    private _registeredComponents = new Map<string, NativeScriptRenderer>();
-
-    public get rootView(): View {
-        if (!this._rootView) {
-            this._rootView = getRootPage() || topmost().currentPage;
+    private setRootNgView(rootView: any) {
+        if (!rootView) {
+            rootView = getRootPage() || topmost().currentPage;
         }
-        return this._rootView;
-    }
-
-    public get page(): Page {
-        return <Page>this.rootView.page;
+        rootView.nodeName = "NONE";
+        this.rootNgView = rootView;
     }
 
-    public get viewUtil(): ViewUtil {
-        return this._viewUtil;
-    }
+    createRenderer(element: any, type: RendererTypeV2): NativeScriptRenderer {
+        if (!element || !type) {
+            return this.defaultRenderer;
+        }
 
-    renderComponent(componentProto: RenderComponentType): Renderer {
-        let renderer = this._registeredComponents.get(componentProto.id);
+        let renderer: NativeScriptRenderer = this.componentRenderers.get(type.id);
         if (isBlank(renderer)) {
-            renderer = new NativeScriptRenderer(this, componentProto,
-                this.animationDriver, this._zone);
-            this._registeredComponents.set(componentProto.id, renderer);
+            renderer = this.defaultRenderer;
+
+            let stylesLength = type.styles.length;
+            for (let i = 0; i < stylesLength; i++) {
+                console.log(type.styles[i]);
+                // this.hasComponentStyles = true;
+                let cssString = type.styles[i] + "";
+                const realCSS = this.replaceNgAttribute(cssString, type.id);
+                addCss(realCSS);
+            }
+            this.componentRenderers.set(type.id, renderer);
         }
-        return renderer;
+
+       return renderer;
     }
-}
 
-@Injectable()
-export class NativeScriptRenderer extends Renderer {
-    private componentProtoId: string;
-    private hasComponentStyles: boolean;
+    private attrReplacer = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g");
+    private attrSanitizer = /-/g;
+
 
-    private get viewUtil(): ViewUtil {
-        return this.rootRenderer.viewUtil;
+    private replaceNgAttribute(input: string, componentId: string): string {
+        return input.replace(this.attrReplacer,
+            "_ng_content_" + componentId.replace(this.attrSanitizer, "_"));
     }
+}
 
-    constructor(
-        private rootRenderer: NativeScriptRootRenderer,
-        private componentProto: RenderComponentType,
-        private animationDriver: NativeScriptAnimationDriver,
-        private zone: NgZone) {
+export class NativeScriptRenderer extends RendererV2 {
+    data: {[key: string]: any} = Object.create(null);
 
+    constructor(
+        private rootView: NgView,
+        private zone: NgZone,
+        private viewUtil: ViewUtil
+    ) {
         super();
-        let stylesLength = this.componentProto.styles.length;
-        this.componentProtoId = this.componentProto.id;
-        for (let i = 0; i < stylesLength; i++) {
-            this.hasComponentStyles = true;
-            let cssString = this.componentProto.styles[i] + "";
-            const realCSS = this.replaceNgAttribute(cssString, this.componentProtoId);
-            addCss(realCSS);
-        }
         traceLog("NativeScriptRenderer created");
     }
 
-    private attrReplacer = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g");
-    private attrSanitizer = /-/g;
+    appendChild(parent: any, newChild: any): void {
+        traceLog(`NativeScriptRenderer.appendChild child: ${newChild} parent: ${parent}`);
+        this.viewUtil.insertChild(parent, newChild);
+    }
 
-    private replaceNgAttribute(input: string, componentId: string): string {
-        return input.replace(this.attrReplacer,
-            "_ng_content_" + componentId.replace(this.attrSanitizer, "_"));
+
+    insertBefore(parent: any, newChild: any, refChild: any): void {
+        traceLog(`NativeScriptRenderer.insertBefore child: ${newChild} parent: ${parent}`);
+        if (parent) {
+            parent.insertBefore(newChild, refChild);
+        }
     }
 
-    renderComponent(componentProto: RenderComponentType): Renderer {
-        return this.rootRenderer.renderComponent(componentProto);
+    removeChild(parent: any, oldChild: NgView): void {
+        traceLog(`NativeScriptRenderer.removeChild child: ${oldChild} parent: ${parent}`);
+        this.viewUtil.removeChild(parent, oldChild);
     }
 
     selectRootElement(selector: string): NgView {
         traceLog("selectRootElement: " + selector);
-        const rootView = <NgView><any>this.rootRenderer.rootView;
-        rootView.nodeName = "ROOT";
-        return rootView;
+        return this.rootView;
+    }
+
+    parentNode(node: NgView): NgView {
+        return node.templateParent;
+    }
+
+    nextSibling(_node: NgView): void {
+        traceLog(`NativeScriptRenderer.nextSibling ${_node}`);
     }
 
     createViewRoot(hostElement: NgView): NgView {
@@ -129,55 +137,48 @@ export class NativeScriptRenderer extends Renderer {
         });
     }
 
-    attachViewAfter(anchorNode: NgView, viewRootNodes: NgView[]) {
-        traceLog("NativeScriptRenderer.attachViewAfter: " + anchorNode.nodeName + " " + anchorNode);
-        const parent = (<NgView>anchorNode.parent || anchorNode.templateParent);
-        const insertPosition = this.viewUtil.getChildIndex(parent, anchorNode);
+    destroy() {
+        traceLog("NativeScriptRenderer.destroy");
+        // Seems to be called on component dispose only (router outlet)
+        // TODO: handle this when we resolve routing and navigation.
+    }
 
-        viewRootNodes.forEach((node, index) => {
-            const childIndex = insertPosition + index + 1;
-            this.viewUtil.insertChild(parent, node, childIndex);
-        });
+    createComment(_value: any) {
+        traceLog(`NativeScriptRenderer.createComment ${_value}`);
     }
 
-    detachView(viewRootNodes: NgView[]) {
-        traceLog("NativeScriptRenderer.detachView");
-        for (let i = 0; i < viewRootNodes.length; i++) {
-            let node = viewRootNodes[i];
-            this.viewUtil.removeChild(<NgView>node.parent, node);
-        }
+    setAttribute(view: NgView, name: string, value: string) {
+        traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`);
+        return this.setProperty(view, name, value);
     }
 
-    public destroyView(_hostElement: NgView, _viewAllNodes: NgView[]) {
-        traceLog("NativeScriptRenderer.destroyView");
-        // Seems to be called on component dispose only (router outlet)
-        // TODO: handle this when we resolve routing and navigation.
+    removeAttribute(_el: NgView, _name: string): void {
+        traceLog(`NativeScriptRenderer.removeAttribute ${_el}: ${_name}`);
     }
 
-    setElementProperty(renderElement: NgView, propertyName: string, propertyValue: any) {
-        traceLog("NativeScriptRenderer.setElementProperty " + renderElement + ": " +
-            propertyName + " = " + propertyValue);
-        this.viewUtil.setProperty(renderElement, propertyName, propertyValue);
+    setProperty(view: any, name: string, value: any) {
+        traceLog(`NativeScriptRenderer.setProperty ${view} : ${name} = ${value}`);
+        this.viewUtil.setProperty(view, name, value);
     }
 
-    setElementAttribute(renderElement: NgView, attributeName: string, attributeValue: string) {
-        traceLog("NativeScriptRenderer.setElementAttribute " + renderElement + ": " +
-            attributeName + " = " + attributeValue);
-        return this.setElementProperty(renderElement, attributeName, attributeValue);
+    addClass(view: NgView, name: string): void {
+        traceLog(`NativeScriptRenderer.addClass ${name}`);
+        this.viewUtil.addClass(view, name);
     }
 
-    setElementClass(renderElement: NgView, className: string, isAdd: boolean): void {
-        traceLog("NativeScriptRenderer.setElementClass " + className + " - " + isAdd);
+    removeClass(view: NgView, name: string): void {
+        traceLog(`NativeScriptRenderer.removeClass ${name}`);
+        this.viewUtil.removeClass(view, name);
+    }
 
-        if (isAdd) {
-            this.viewUtil.addClass(renderElement, className);
-        } else {
-            this.viewUtil.removeClass(renderElement, className);
-        }
+    setStyle(view: NgView, styleName: string, value: any, _hasVendorPrefix?: boolean, _hasImportant?: boolean): void {
+        traceLog(`NativeScriptRenderer.setStyle: ${styleName} = ${value}`);
+        this.viewUtil.setStyle(view, styleName, value);
     }
 
-    setElementStyle(renderElement: NgView, styleName: string, styleValue: string): void {
-        this.viewUtil.setStyleProperty(renderElement, styleName, styleValue);
+    removeStyle(view: NgView, styleName: string, _hasVendorPrefix?: boolean): void {
+        traceLog("NativeScriptRenderer.removeStyle: ${styleName}");
+        this.viewUtil.removeStyle(view, styleName);
     }
 
     // Used only in debug mode to serialize property changes to comment nodes,
@@ -195,34 +196,32 @@ export class NativeScriptRenderer extends Renderer {
         traceLog("NativeScriptRenderer.invokeElementMethod " + methodName + " " + args);
     }
 
-    setText(_renderNode: any, _text: string) {
-        traceLog("NativeScriptRenderer.setText");
+    setValue(_renderNode: any, _value: string) {
+        traceLog("NativeScriptRenderer.setValue");
     }
 
-    public createTemplateAnchor(parentElement: NgView): NgView {
-        traceLog("NativeScriptRenderer.createTemplateAnchor");
-        return this.viewUtil.createTemplateAnchor(parentElement);
-    }
+    createElement(name: any, _namespace: string): NgView {
+        traceLog(`NativeScriptRenderer.createElement: ${name}`);
 
-    public createElement(parentElement: NgView, name: string): NgView {
-        traceLog("NativeScriptRenderer.createElement: " + name + " parent: " +
-            parentElement + ", " + (parentElement ? parentElement.nodeName : "null"));
-        return this.viewUtil.createView(name, parentElement, (view) => {
+        return this.viewUtil.createView(name, view => {
+            console.log(view);
             // Set an attribute to the view to scope component-specific css.
             // The property name is pre-generated by Angular.
-            if (this.hasComponentStyles) {
-                const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR, this.componentProtoId);
-                view[cssAttribute] = true;
-            }
+
+            // if (this.hasComponentStyles) {
+            //     const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR, this.componentProtoId);
+            //     view[cssAttribute] = true;
+            // }
         });
     }
 
-    public createText(_parentElement: NgView, _value: string): NgView {
+    createText(_value: string): NgView {
         traceLog("NativeScriptRenderer.createText");
         return this.viewUtil.createText();
     }
 
-    public listen(renderElement: NgView, eventName: string, callback: Function): Function {
+    listen(renderElement: any, eventName: string, callback: (event: any) => boolean):
+        () => void {
         traceLog("NativeScriptRenderer.listen: " + eventName);
         // Explicitly wrap in zone
         let zonedCallback = (...args) => {
@@ -238,21 +237,5 @@ export class NativeScriptRenderer extends Renderer {
         }
         return () => renderElement.off(eventName, zonedCallback);
     }
-
-    public listenGlobal(_target: string, _eventName: string, _callback: Function): Function {
-        throw new Error("NativeScriptRenderer.listenGlobal() - Not implemented.");
-    }
-
-    public animate(
-        element: any,
-        startingStyles: ɵAnimationStyles,
-        keyframes: ɵAnimationKeyframe[],
-        duration: number,
-        delay: number,
-        easing: string
-    ): AnimationPlayer {
-        let player = this.animationDriver.animate(
-            element, startingStyles, keyframes, duration, delay, easing);
-        return player;
-    }
 }
+