From 0dc383940f997a413210acd944c03ebe60e4854f Mon Sep 17 00:00:00 2001 From: geminiyellow Date: Wed, 15 Jun 2016 16:24:17 +0900 Subject: [PATCH] feat(mobile): init mobile route --- .gitignore | 6 +- mobile/app/app.component.ts | 29 -------- mobile/app/app.css | 19 ----- mobile/app/bootstrap.tns.ts | 6 ++ mobile/app/main.ts | 5 -- mobile/app/package.json | 2 +- mobile/app/page/components/microsb/index.ts | 10 +++ mobile/package.json | 6 +- .../components/about/about.tns.css | 0 .../components/about/about.tns.html | 4 ++ .../javascripts/components/about/about.tns.ts | 12 ++++ .../javascripts/components/home/home.tns.css | 0 .../javascripts/components/home/home.tns.html | 4 ++ .../javascripts/components/home/home.tns.ts | 11 +++ .../components/microsb/microsb.tns.css | 19 +++++ .../components/microsb/microsb.tns.html | 9 +++ .../components/microsb/microsb.tns.ts | 32 +++++++++ .../core/decorators/base.component.ts | 7 ++ .../javascripts/core/decorators/index.ts | 2 + .../core/decorators/route.component.ts | 10 +++ .../javascripts/core/decorators/utils.ts | 69 +++++++++++++++++++ node/client/javascripts/core/index.ts | 2 + .../core/services/config.service.ts | 60 ++++++++++++++++ .../client/javascripts/core/services/index.ts | 2 + .../core/services/viewbrocker.service.ts | 14 ++++ 25 files changed, 282 insertions(+), 58 deletions(-) delete mode 100644 mobile/app/app.component.ts delete mode 100644 mobile/app/app.css create mode 100644 mobile/app/bootstrap.tns.ts delete mode 100644 mobile/app/main.ts create mode 100644 mobile/app/page/components/microsb/index.ts create mode 100644 node/client/javascripts/components/about/about.tns.css create mode 100644 node/client/javascripts/components/about/about.tns.html create mode 100644 node/client/javascripts/components/about/about.tns.ts create mode 100644 node/client/javascripts/components/home/home.tns.css create mode 100644 node/client/javascripts/components/home/home.tns.html create mode 100644 node/client/javascripts/components/home/home.tns.ts create mode 100644 node/client/javascripts/components/microsb/microsb.tns.css create mode 100644 node/client/javascripts/components/microsb/microsb.tns.html create mode 100644 node/client/javascripts/components/microsb/microsb.tns.ts create mode 100644 node/client/javascripts/core/decorators/base.component.ts create mode 100644 node/client/javascripts/core/decorators/index.ts create mode 100644 node/client/javascripts/core/decorators/route.component.ts create mode 100644 node/client/javascripts/core/decorators/utils.ts create mode 100644 node/client/javascripts/core/index.ts create mode 100644 node/client/javascripts/core/services/config.service.ts create mode 100644 node/client/javascripts/core/services/index.ts create mode 100644 node/client/javascripts/core/services/viewbrocker.service.ts diff --git a/.gitignore b/.gitignore index 206ecf8..89ddaf0 100644 --- a/.gitignore +++ b/.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 diff --git a/mobile/app/app.component.ts b/mobile/app/app.component.ts deleted file mode 100644 index 51d1599..0000000 --- a/mobile/app/app.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {Component} from "@angular/core"; - -@Component({ - selector: "my-app", - template: ` - - - - - - - -`, -}) -export class AppComponent { - 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--; - } -} diff --git a/mobile/app/app.css b/mobile/app/app.css deleted file mode 100644 index 06d6dc1..0000000 --- a/mobile/app/app.css +++ /dev/null @@ -1,19 +0,0 @@ -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; -} diff --git a/mobile/app/bootstrap.tns.ts b/mobile/app/bootstrap.tns.ts new file mode 100644 index 0000000..0f3e4ad --- /dev/null +++ b/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]); diff --git a/mobile/app/main.ts b/mobile/app/main.ts deleted file mode 100644 index 9fa201b..0000000 --- a/mobile/app/main.ts +++ /dev/null @@ -1,5 +0,0 @@ -// this import should be first in order to load some required settings (like globals and reflect-metadata) -import {nativeScriptBootstrap} from "nativescript-angular/application"; -import {AppComponent} from "./app.component"; - -nativeScriptBootstrap(AppComponent); \ No newline at end of file diff --git a/mobile/app/package.json b/mobile/app/package.json index d7c5704..e83eb83 100644 --- a/mobile/app/package.json +++ b/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 ", "description": "Nativescript Angular Hello World template", diff --git a/mobile/app/page/components/microsb/index.ts b/mobile/app/page/components/microsb/index.ts new file mode 100644 index 0000000..e825e07 --- /dev/null +++ b/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'; diff --git a/mobile/package.json b/mobile/package.json index 3f799fa..3601d3b 100644 --- a/mobile/package.json +++ b/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": { diff --git a/node/client/javascripts/components/about/about.tns.css b/node/client/javascripts/components/about/about.tns.css new file mode 100644 index 0000000..e69de29 diff --git a/node/client/javascripts/components/about/about.tns.html b/node/client/javascripts/components/about/about.tns.html new file mode 100644 index 0000000..f478880 --- /dev/null +++ b/node/client/javascripts/components/about/about.tns.html @@ -0,0 +1,4 @@ + + + + diff --git a/node/client/javascripts/components/about/about.tns.ts b/node/client/javascripts/components/about/about.tns.ts new file mode 100644 index 0000000..79267c4 --- /dev/null +++ b/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 { + +} diff --git a/node/client/javascripts/components/home/home.tns.css b/node/client/javascripts/components/home/home.tns.css new file mode 100644 index 0000000..e69de29 diff --git a/node/client/javascripts/components/home/home.tns.html b/node/client/javascripts/components/home/home.tns.html new file mode 100644 index 0000000..665120e --- /dev/null +++ b/node/client/javascripts/components/home/home.tns.html @@ -0,0 +1,4 @@ + + + + diff --git a/node/client/javascripts/components/home/home.tns.ts b/node/client/javascripts/components/home/home.tns.ts new file mode 100644 index 0000000..91b608c --- /dev/null +++ b/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 { +} diff --git a/node/client/javascripts/components/microsb/microsb.tns.css b/node/client/javascripts/components/microsb/microsb.tns.css new file mode 100644 index 0000000..442759a --- /dev/null +++ b/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; +} diff --git a/node/client/javascripts/components/microsb/microsb.tns.html b/node/client/javascripts/components/microsb/microsb.tns.html new file mode 100644 index 0000000..f35b3da --- /dev/null +++ b/node/client/javascripts/components/microsb/microsb.tns.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/node/client/javascripts/components/microsb/microsb.tns.ts b/node/client/javascripts/components/microsb/microsb.tns.ts new file mode 100644 index 0000000..e1700d0 --- /dev/null +++ b/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--; + } +} diff --git a/node/client/javascripts/core/decorators/base.component.ts b/node/client/javascripts/core/decorators/base.component.ts new file mode 100644 index 0000000..8cd6272 --- /dev/null +++ b/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); + }; +} diff --git a/node/client/javascripts/core/decorators/index.ts b/node/client/javascripts/core/decorators/index.ts new file mode 100644 index 0000000..8ae5599 --- /dev/null +++ b/node/client/javascripts/core/decorators/index.ts @@ -0,0 +1,2 @@ +export * from './base.component'; +export * from './route.component'; diff --git a/node/client/javascripts/core/decorators/route.component.ts b/node/client/javascripts/core/decorators/route.component.ts new file mode 100644 index 0000000..e15ad30 --- /dev/null +++ b/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 + }); + }; +} diff --git a/node/client/javascripts/core/decorators/utils.ts b/node/client/javascripts/core/decorators/utils.ts new file mode 100644 index 0000000..8d685fc --- /dev/null +++ b/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; + } +} diff --git a/node/client/javascripts/core/index.ts b/node/client/javascripts/core/index.ts new file mode 100644 index 0000000..69d1dd3 --- /dev/null +++ b/node/client/javascripts/core/index.ts @@ -0,0 +1,2 @@ +export * from './decorators'; +export * from './services'; diff --git a/node/client/javascripts/core/services/config.service.ts b/node/client/javascripts/core/services/config.service.ts new file mode 100644 index 0000000..9ff7406 --- /dev/null +++ b/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 = 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); + } +} diff --git a/node/client/javascripts/core/services/index.ts b/node/client/javascripts/core/services/index.ts new file mode 100644 index 0000000..de42297 --- /dev/null +++ b/node/client/javascripts/core/services/index.ts @@ -0,0 +1,2 @@ +export * from './config.service'; +export * from './viewbrocker.service'; diff --git a/node/client/javascripts/core/services/viewbrocker.service.ts b/node/client/javascripts/core/services/viewbrocker.service.ts new file mode 100644 index 0000000..c12c942 --- /dev/null +++ b/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; + } + } +}