Move view component resolution to element-registry.

Expose an API to register other components.

Author: hdeshev

src/nativescript-angular/element-registry.d.ts

@@ -0,0 +1,16 @@
+declare module "nativescript-angular/element-registry" {
+    import {View} from 'ui/core/view';
+
+    export interface TypeId {
+        moduleName: string;
+        className: string;
+    }
+
+    export interface ViewClass {
+        new(): View
+    }
+
+    export function registerElement(elementName: string, typeId: TypeId): void;
+    export function isKnownView(elementName: string): boolean;
+    export function getViewClass(elementName: string): ViewClass;
+}

src/nativescript-angular/element-registry.ts

@@ -0,0 +1,44 @@
+import {View} from 'ui/core/view';
+import {TypeId, ViewClass} from 'nativescript-angular/element-registry';
+
+var elementMap: Map<string, TypeId> = new Map<string, TypeId>();
+
+export function registerElement(elementName: string, typeId: TypeId): void {
+    if (elementMap.has(elementName)) {
+        throw new Error(`Element for ${elementName} already registered.`);
+    } else {
+        elementMap.set(elementName, typeId);
+        elementMap.set(elementName.toLowerCase(), typeId);
+    }
+}
+
+export function getViewClass(elementName: string): ViewClass {
+    console.log('getViewClass: ' + elementName);
+    let typeId = elementMap.get(elementName) ||
+                    elementMap.get(elementName.toLowerCase());
+    if (!typeId) {
+        throw new TypeError(`No known component for element ${elementName}.`);
+    }
+    try {
+        let module = require(typeId.moduleName);
+        return module[typeId.className];
+    } catch (e) {
+        throw new TypeError(`Could not load type: ${typeId.moduleName}.${typeId.className}.
+
+${e}`);
+    }
+}
+
+export function isKnownView(elementName: string): boolean {
+    return elementMap.has(elementName) ||
+            elementMap.has(elementName.toLowerCase());
+}
+
+//Register default NativeScript components
+registerElement("Button", {className: "Button", moduleName: "ui/button"});
+registerElement("Label", {className: "Label", moduleName: "ui/label"});
+registerElement("TextField", {className: "TextField", moduleName: "ui/text-field"});
+registerElement("TextView", {className: "TextView", moduleName: "ui/text-view"});
+registerElement("Switch", {className: "Switch", moduleName: "ui/switch"});
+registerElement("StackLayout", {className: "StackLayout", moduleName: "ui/layouts/stack-layout"});
+registerElement("DockLayout", {className: "DockLayout", moduleName: "ui/layouts/dock-layout"});

src/nativescript-angular/view_node.ts

@@ -14,27 +14,11 @@ import {LayoutBase} from 'ui/layouts/layout-base';
 import gestures = require("ui/gestures");
 import {NativeScriptView} from 'nativescript-angular/renderer';
 import {AST} from 'angular2/src/change_detection/parser/ast';
-
-interface ViewClass {
-    new(): View
-}
+import {ViewClass, getViewClass, isKnownView} from 'nativescript-angular/element-registry';
 
 type EventHandler = (args: EventData) => void;
 
 export class ViewNode {
-    //TODO: move element registration and imports to a new module
-    private static allowedElements: Map<string, ViewClass> = new Map<string, ViewClass>([
-        ["button", Button],
-        ["stacklayout", StackLayout],
-        ["docklayout", DockLayout],
-        ["textfield", TextField],
-        ["textview", TextView],
-        ["label", Label],
-        ["switch", Switch],
-        ["template", ContentView],
-    ]);
-
-
     private eventListeners: Map<string, EventHandler> = new Map<string, EventHandler>();
 
     public nativeView: View;
@@ -106,20 +90,16 @@ export class ViewNode {
         });
     }
 
-    private getViewClass(): ViewClass {
-        return ViewNode.allowedElements.get(this.viewName);
-    }
-
     private createUI(attachAtIndex: number) {
-        if (!ViewNode.allowedElements.has(this.viewName))
+        if (!isKnownView(this.viewName))
             return;
 
         console.log('createUI: ' + this.viewName +
             ', attachAt: ' + attachAtIndex +
             ', parent: ' + this.parentNode.viewName +
             ', parent UI ' + (<any>this.parentNativeView.constructor).name);
 
-        let viewClass = this.getViewClass();
+        let viewClass = getViewClass(this.viewName);
         if (!this.nativeView) {
             this.nativeView = new viewClass();
         } else {