[WPI] feat(xp): share mobile and client code

.gitignore

@@ -26,7 +26,6 @@ build/Release
 # Commenting this out is preferred by some people, see
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
 node_modules
-platforms
 
 # Users Environment Variables
 .lock-wscript
@@ -36,3 +35,8 @@ platforms
 
 # Optional REPL history
 .node_repl_history
+
+# mobile
+/mobile/hooks/
+/mobile/platforms
+/mobile/node_modules

mobile/app/bootstrap.tns.ts

@@ -0,0 +1,6 @@
+// this import should be first in order to load some required settings (like globals and reflect-metadata)
+import { nativeScriptBootstrap } from "nativescript-angular/application";
+import { NS_ROUTER_PROVIDERS } from "nativescript-angular/router";
+import { NSAppComponent } from "./page/components/microsb";
+
+nativeScriptBootstrap(NSAppComponent, [NS_ROUTER_PROVIDERS]);

mobile/app/package.json

@@ -3,7 +3,7 @@
 		"id": "org.nativescript.helloworldng"
 	},
 	"name": "tns-template-hello-world-ng",
-	"main": "main.js",
+	"main": "bootstrap.tns.js",
 	"version": "2.0.3",
 	"author": "Telerik <support@telerik.com>",
 	"description": "Nativescript Angular Hello World template",

mobile/app/page/components/microsb/index.ts

@@ -0,0 +1,10 @@
+
+import { NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
+
+// config
+import {ConfigService} from '../../../javascripts/core/index';
+ConfigService.PLATFORM_TARGET = ConfigService.PLATFORMS.MOBILE_NATIVE;
+ConfigService.DEBUG.LEVEL_4 = true;
+ConfigService.ROUTER_DIRECTIVES = NS_ROUTER_DIRECTIVES;
+
+export * from '../../../javascripts/components/microsb/microsb.tns';

mobile/package.json

@@ -8,11 +8,11 @@
   },
   "nativescript": {
     "id": "org.nativescript.mobile",
-    "tns-ios": {
-      "version": "2.0.1"
-    },
     "tns-android": {
       "version": "2.0.0"
+    },
+    "tns-ios": {
+      "version": "2.0.1"
     }
   },
   "dependencies": {

node/client/javascripts/components/about/about.tns.html

@@ -0,0 +1,4 @@
+<StackLayout>
+  <Label text="About Works!"></Label>
+  <Button text="GO TO Home" [nsRouterLink]="['Home']" class="link"></Button>
+</StackLayout>

node/client/javascripts/components/about/about.tns.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router/ns-router";
+
+@Component({
+  selector: "about",
+  directives: [NS_ROUTER_DIRECTIVES],
+  templateUrl: 'javascripts/components/about/about.tns.html',
+  styleUrls: ['javascripts/components/about/about.tns.css']
+})
+export class About {
+
+}

node/client/javascripts/components/home/home.tns.html

@@ -0,0 +1,4 @@
+<StackLayout>
+  <Label text="Home Works!"></Label>
+  <Button text="GO TO About" [nsRouterLink]="['About']" class="link"></Button>
+</StackLayout>

node/client/javascripts/components/home/home.tns.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router/ns-router";
+
+@Component({
+  selector: "home",
+  directives: [NS_ROUTER_DIRECTIVES],
+  templateUrl: 'javascripts/components/home/home.tns.html',
+  styleUrls: ['javascripts/components/home/home.tns.css']
+})
+export class Home {
+}

node/client/javascripts/components/microsb/microsb.tns.css

@@ -0,0 +1,19 @@
+button, label, stack-layout {
+  horizontal-align: center;
+}
+
+button {
+  font-size: 36;
+}
+
+.title {
+  font-size: 30;
+  margin: 20;
+}
+
+.message {
+  font-size: 20;
+  color: #284848;
+  text-align: center;
+  margin: 0 20;
+}

node/client/javascripts/components/microsb/microsb.tns.html

@@ -0,0 +1,9 @@
+<StackLayout>
+  <Label text="Tap the button" class="title"></Label>
+
+  <Button text="TAP" (tap)="onTap()"></Button>
+
+  <Label [text]="message" class="message" textWrap="true"></Label>
+
+  <router-outlet></router-outlet>
+</StackLayout>

node/client/javascripts/components/microsb/microsb.tns.ts

@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
+import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
+
+import { Home } from "../home/home.tns";
+import { About } from "../about/about.tns";
+
+@Component({
+  selector: "microsb",
+  directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
+  templateUrl: 'javascripts/components/microsb/microsb.tns.html',
+  styleUrls: ['javascripts/components/microsb/microsb.tns.css']
+})
+@RouteConfig([
+  { path: '/home', name: 'Home', component: Home,  useAsDefault: true },
+  { path: '/about', name: 'About', component: About  },
+])
+export class NSAppComponent {
+  public counter: number = 16;
+
+  public get message(): string {
+    if (this.counter > 0) {
+      return this.counter + " taps left";
+    } else {
+      return "Hoorraaay! \nYou are ready to start building!";
+    }
+  }
+
+  public onTap() {
+    this.counter--;
+  }
+}

node/client/javascripts/core/decorators/base.component.ts

@@ -0,0 +1,7 @@
+import { DecoratorUtils } from "./utils";
+
+export function BaseComponent(metadata: any = {}) {
+  return function (cls: any) {
+    return DecoratorUtils.annotateComponent(cls, metadata);
+  };
+}

node/client/javascripts/core/decorators/index.ts

@@ -0,0 +1,2 @@
+export * from './base.component';
+export * from './route.component';

node/client/javascripts/core/decorators/route.component.ts

@@ -0,0 +1,10 @@
+import { ConfigService } from "../services/config.service";
+import { DecoratorUtils } from "./utils";
+
+export function RouteComponent(metadata: any = {}) {
+  return function (cls: any) {
+    return DecoratorUtils.annotateComponent(cls, metadata, {
+      directives: ConfigService.ROUTER_DIRECTIVES
+    });
+  };
+}

node/client/javascripts/core/decorators/utils.ts

@@ -0,0 +1,69 @@
+// angular
+import { Component, ChangeDetectionStrategy } from "@angular/core";
+import { ViewBrokerService } from "../index";
+
+// libs
+// import {TranslatePipe} from 'ng2-translate/ng2-translate';
+
+// app
+
+declare var Reflect: any;
+const _reflect: any = Reflect;
+
+export class DecoratorUtils {
+  public static getMetadata(metadata: any = {}, customDecoratorMetadata?: any) {
+
+    /**
+     * The following allows default component metadata to be configured
+     * For instance, here we make `TranslatePipe` available for all our components
+     */
+      // default directives
+    let DIRECTIVES: any[] = [];
+    // default pipes
+    // let PIPES: any[] = [TranslatePipe];
+    let PIPES: any[] = [];
+
+    // custom decorator options
+    if (customDecoratorMetadata) {
+      if (customDecoratorMetadata.directives) {
+        DIRECTIVES.push(...customDecoratorMetadata.directives);
+      }
+      if (customDecoratorMetadata.pipes) {
+        PIPES.push(...customDecoratorMetadata.pipes);
+      }
+    }
+
+    if (metadata.templateUrl) {
+      // correct view for platform target
+      metadata.templateUrl = ViewBrokerService.TEMPLATE_URL(metadata.templateUrl);
+    }
+
+    metadata.directives = metadata.directives ? metadata.directives.concat(DIRECTIVES) : DIRECTIVES;
+    metadata.pipes = metadata.pipes ? metadata.pipes.concat(PIPES) : PIPES;
+
+    if (metadata.changeDetection) {
+      metadata.changeDetection = metadata.changeDetection;
+    } else {
+      // default OnPush
+      metadata.changeDetection = ChangeDetectionStrategy.OnPush;
+    }
+
+    if (metadata.encapsulation) {
+      metadata.encapsulation = metadata.encapsulation;
+    }
+
+    // initialize anything
+    if (metadata.init) {
+      metadata.init();
+    }
+
+    return metadata;
+  }
+
+  public static annotateComponent(cls: any, metadata: any = {}, customDecoratorMetadata?: any) {
+    let annotations = _reflect.getMetadata('annotations', cls) || [];
+    annotations.push(new Component(DecoratorUtils.getMetadata(metadata, customDecoratorMetadata)));
+    _reflect.defineMetadata('annotations', annotations, cls);
+    return cls;
+  }
+}

node/client/javascripts/core/index.ts

@@ -0,0 +1,2 @@
+export * from './decorators';
+export * from './services';

node/client/javascripts/core/services/config.service.ts

@@ -0,0 +1,60 @@
+// angular
+import { ROUTER_DIRECTIVES } from "@angular/router-deprecated";
+
+interface IPlatforms {
+  WEB: string;
+  MOBILE_NATIVE: string;
+  MOBILE_HYBRID: string;
+  DESKTOP: string;
+}
+
+export class ConfigService {
+
+  public static DEBUG: any = {
+    LEVEL_1: false, // .info only
+    LEVEL_2: false, // .warn only
+    LEVEL_3: false, // .error only
+    LEVEL_4: false  // .log + all the above
+  };
+
+  // allows runtime config of platform specific router directives
+  public static ROUTER_DIRECTIVES: Array<any> = ROUTER_DIRECTIVES;
+
+  // supported platforms
+  public static PLATFORMS: IPlatforms = {
+    WEB: 'web',
+    MOBILE_NATIVE: 'mobile_native',
+    MOBILE_HYBRID: 'mobile_hybrid',
+    DESKTOP: 'desktop'
+  };
+
+  // current target (defaults to web)
+  public static PLATFORM_TARGET: string = ConfigService.PLATFORMS.WEB;
+
+  // convenient platform checks
+  public static IS_WEB(): boolean {
+    return ConfigService.PLATFORM_TARGET === ConfigService.PLATFORMS.WEB;
+  }
+
+  public static IS_MOBILE_NATIVE(): boolean {
+    return ConfigService.PLATFORM_TARGET === ConfigService.PLATFORMS.MOBILE_NATIVE;
+  }
+
+  public static IS_MOBILE_HYBRID(): boolean {
+    return ConfigService.PLATFORM_TARGET === ConfigService.PLATFORMS.MOBILE_HYBRID;
+  }
+
+  public static IS_DESKTOP(): boolean {
+    return ConfigService.PLATFORM_TARGET === ConfigService.PLATFORMS.DESKTOP;
+  }
+
+  // NOTE: if any level is on, debug mode is on
+  public static IS_DEBUG_MODE(): boolean {
+    return Object.keys(ConfigService.DEBUG).some(key => ConfigService.DEBUG[key]);
+  }
+
+  // reset debug defaults
+  public static RESET() {
+    Object.keys(ConfigService.DEBUG).forEach(key => ConfigService.DEBUG[key] = false);
+  }
+}

node/client/javascripts/core/services/index.ts

@@ -0,0 +1,2 @@
+export * from './config.service';
+export * from './viewbrocker.service';

node/client/javascripts/core/services/viewbrocker.service.ts

@@ -0,0 +1,14 @@
+import { ConfigService } from "./config.service";
+
+export class ViewBrokerService {
+
+  public static TEMPLATE_URL(path: string): string {
+    if (ConfigService.IS_MOBILE_NATIVE()) {
+      let paths = path.split('.');
+      paths.splice(-1);
+      return `${paths.join('.')}.tns.html`;
+    } else {
+      return path;
+    }
+  }
+}