refactor: create Android and iOS specific NgModule (#85)

Author: marclaval

doc/pages/bootstrap.jade

@@ -15,11 +15,11 @@ block content
         bootstrapReactNative('myApp', MyAppModule);
         ```
 
-        The main module must import the `ReactNativeModule`:
+        The main module must import `ReactNativeAndroidModule` or `ReactNativeiOSModule` depending on the platform targetted:
          ```
          @NgModule({
            declarations: [...],
-           imports: [ReactNativeModule, CommonModule],
+           imports: [ReactNativeAndroidModule, CommonModule],
            bootstrap: [...]
          })
          export class MyAppModule {}

doc/pages/http.jade

@@ -16,7 +16,7 @@ block content
         ```
         @NgModule({
           declarations: [...],
-          imports: [ReactNativeModule, CommonModule, ReactNativeHttpModule],
+          imports: [ReactNativeAndroidModule, CommonModule, ReactNativeHttpModule],
           bootstrap: [...]
         })
         export class MyAppModule {}

doc/pages/router.jade

@@ -21,7 +21,7 @@ block content
 
         @NgModule({
           declarations: [Example, CompA, CompB, ...],
-          imports: [ReactNativeModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
+          imports: [ReactNativeAndroidModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
           bootstrap: [Example]
         })
         export class MyAppModule {}

doc/parser.js

@@ -137,7 +137,9 @@ function getFiles(dir, files_){
     if (fs.statSync(name).isDirectory()){
       getFiles(name, files_);
     } else {
-      files_.push(name);
+      if (name.indexOf('/_') == -1 && name.indexOf('module') == -1) {
+        files_.push(name);
+      }
     }
   }
   return files_;

gulpfile.js

@@ -29,7 +29,14 @@ var PATHS = {
   tmp: 'dist/tmp',
   publish: 'dist/publish',
   modules: [
-    'node_modules/@angular/**/*',
+    'node_modules/@angular/common/**/*',
+    'node_modules/@angular/compiler/**/*',
+    'node_modules/@angular/core/**/*',
+    'node_modules/@angular/http/**/*',
+    'node_modules/@angular/platform-browser/**/*',
+    'node_modules/@angular/platform-browser-dynamic/**/*',
+    'node_modules/@angular/platform-server/**/*',
+    'node_modules/@angular/router/**/*',
     'node_modules/hammerjs/**/*',
     'node_modules/reflect-metadata/**/*',
     'node_modules/rxjs/**/*',
@@ -53,7 +60,7 @@ gulp.task('!postcreate', ['!create'], function() {
     .pipe(gulp.dest(PATHS.app + '/' + APP_NAME + '/android/app/src/main/'));
 
 });
-gulp.task('init', ['!postcreate'], function() {
+gulp.task('init', function() {
   var copier = require('./tools/copy-dependencies');
   return copier.doCopy(PATHS.modules, PATHS.app + '/' + APP_NAME + '/node_modules');
 });
@@ -259,7 +266,7 @@ gulp.task('clean.code', function (done) {
 });
 
 function ts2js(path, dest, toSystem, withDeclaration) {
-  var tsResult = gulp.src(path.concat(['typings/index.d.ts', 'src/angular2-react-native.d.ts']), {base: './'})
+  var tsResult = gulp.src(path.concat(['typings/index.d.ts', 'src/angular2-react-native.d.ts', 'src/angular2-react-native-android.d.ts', 'src/angular2-react-native-ios.d.ts']), {base: './'})
     .pipe(typescript({
       noImplicitAny: true,
       module: toSystem ? 'system' : 'commonjs',
@@ -337,6 +344,8 @@ function customReporter() {
       if (error.relativeFilename && error.message.indexOf(`Module '"react-native"' has no exported member`) == -1 &&
         error.message.indexOf(`Module ''angular2-react-native'' has no exported member`) == -1 &&
         error.message.indexOf(`src\\angular2-react-native.d.ts`) == -1 &&
+        error.message.indexOf(`src\\angular2-react-native-android.d.ts`) == -1 &&
+        error.message.indexOf(`src\\angular2-react-native-ios.d.ts`) == -1 &&
         error.message.indexOf(`does not exist on type 'Global'.`) == -1) {
         console.error(error.message);
       }

sample/samples/android/kitchensink.ts

@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
 import {Router, NavigationEnd} from '@angular/router';
 import {LocationStrategy} from '@angular/common';
 import {StyleSheet, BackAndroid, Alert, NativeModules, processColor} from 'react-native';
-import {DrawerLayout, Toolbar} from 'angular2-react-native';
+import {DrawerLayout, Toolbar} from 'angular2-react-native/android';
 
 import {TodoMVC} from "./../common/todomvc";
 

sample/samples/android/module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Routes} from '@angular/router';
-import {ReactNativeModule, ReactNativeRouterModule, ReactNativeHttpModule} from 'angular2-react-native';
+import {ReactNativeAndroidModule, ReactNativeRouterModule, ReactNativeHttpModule} from 'angular2-react-native';
 import {KitchenSinkApp}   from './kitchensink';
 
 import {HelloApp} from "./hello";
@@ -26,7 +26,7 @@ const appRoutes: Routes = [
 
 @NgModule({
   declarations: [KitchenSinkApp, HelloApp, TodoMVC, TodoItem, GesturesApp, WidgetsList, WebViewApp, APIsList, HttpApp, AnimationApp, Ball],
-  imports: [ReactNativeModule, ReactNativeHttpModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
+  imports: [ReactNativeAndroidModule, ReactNativeHttpModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
   bootstrap: [KitchenSinkApp]
 })
 export class KitchenSinkModule {}

sample/samples/common/animation.ts

@@ -1,6 +1,5 @@
 import {Component, Input, Output, ElementRef, EventEmitter, ViewChildren, QueryList} from '@angular/core';
 import {StyleSheet} from 'react-native';
-import {TodoMVC} from "./todomvc";
 
 @Component({
   selector: 'ball',

sample/samples/common/http.ts

@@ -2,7 +2,8 @@ import {Component, ViewChild} from '@angular/core';
 import {Http} from '@angular/http';
 import 'rxjs/add/operator/map';
 
-import {TextInput} from 'angular2-react-native';
+import {TextInput as TextInputAndroid} from 'angular2-react-native/android';
+import {TextInput as TextInputIOS} from 'angular2-react-native/ios';
 
 @Component({
   selector: 'http-app',
@@ -13,7 +14,8 @@ import {TextInput} from 'angular2-react-native';
 `
 })
 export class HttpApp {
-  @ViewChild(TextInput) textInput: TextInput;
+  @ViewChild(TextInputAndroid) textInputAndroid: TextInputAndroid;
+  @ViewChild(TextInputIOS) textInputIOS: TextInputIOS;
   pages: Array<any> = [];
   constructor(private http: Http) {}
 
@@ -28,7 +30,8 @@ export class HttpApp {
             this.pages.push(raw[key].title);
           }
         });
-      this.textInput.blurTextInput();
+      if (this.textInputAndroid) this.textInputAndroid.blurTextInput();
+      if (this.textInputIOS) this.textInputIOS.blurTextInput();
     }
 
   }

sample/samples/common/todomvc.ts

@@ -1,6 +1,7 @@
 import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';
 import {StyleSheet, AsyncStorage} from 'react-native';
-import {TextInput} from 'angular2-react-native';
+import {TextInput as TextInputAndroid} from 'angular2-react-native/android';
+import {TextInput as TextInputIOS} from 'angular2-react-native/ios';
 
 class Palette {
   static background: string = '#005eb8';
@@ -31,7 +32,8 @@ class Todo {
 `
 })
 export class TodoItem {
-  @ViewChild(TextInput) textInput: TextInput;
+  @ViewChild(TextInputAndroid) textInputAndroid: TextInputAndroid;
+  @ViewChild(TextInputIOS) textInputIOS: TextInputIOS;
   styles: any;
   @Input() item: Todo;
   @Output() toggled: EventEmitter<number> = new EventEmitter();
@@ -55,7 +57,8 @@ export class TodoItem {
   }
 
   stopEdit(text: string) {
-    this.textInput.blurTextInput();
+    if (this.textInputAndroid) this.textInputAndroid.blurTextInput();
+    if (this.textInputIOS) this.textInputIOS.blurTextInput();
     if (text && text.length > 0) {
       this.item.value = text;
     }
@@ -147,7 +150,8 @@ export class TodoItem {
 `
 })
 export class TodoMVC {
-  @ViewChild(TextInput) textInput: TextInput;
+  @ViewChild(TextInputAndroid) textInputAndroid: TextInputAndroid;
+  @ViewChild(TextInputIOS) textInputIOS: TextInputIOS;
   styles: any;
   todos: Array<Todo> = [];
   filteredTodos: Array<Todo> = [];
@@ -165,8 +169,14 @@ export class TodoMVC {
       this.leftCount++;
     }
     this.filterTodos();
-    this.textInput.value = '';
-    this.textInput.blurTextInput();
+    if (this.textInputAndroid) {
+      this.textInputAndroid.value = '';
+      this.textInputAndroid.blurTextInput();
+    }
+    if (this.textInputIOS) {
+      this.textInputIOS.value = '';
+      this.textInputIOS.blurTextInput();
+    }
   }
 
   deleteTodo(todo: Todo) {

sample/samples/common/webview.ts

@@ -1,6 +1,7 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {StyleSheet} from 'react-native';
-import {WebView} from 'angular2-react-native';
+import {WebView as WebViewAndroid} from 'angular2-react-native/android';
+import {WebView as WebViewIOS} from 'angular2-react-native/ios';
 
 @Component({
   selector: 'webview-app',
@@ -19,7 +20,8 @@ import {WebView} from 'angular2-react-native';
 `
 })
 export class WebViewApp {
-  @ViewChild(WebView) webView: WebView;
+  @ViewChild(WebViewAndroid) webViewAndroid: WebViewAndroid;
+  @ViewChild(WebViewIOS) webViewIOS: WebViewIOS;
   styles: any;
   _el : any = null;
   constructor(el: ElementRef) {
@@ -40,11 +42,13 @@ export class WebViewApp {
   }
 
   goBack() {
-    this.webView.goBack();
+    if (this.webViewAndroid) this.webViewAndroid.goBack();
+    if (this.webViewIOS) this.webViewIOS.goBack();
   }
 
   goForward() {
-    this.webView.goForward();
+    if (this.webViewAndroid) this.webViewAndroid.goForward();
+    if (this.webViewIOS) this.webViewIOS.goForward();
   }
 }
 

sample/samples/ios/kitchensink.ts

@@ -1,6 +1,6 @@
 import {Component, ViewChild} from '@angular/core';
 import {ActionSheetIOS} from 'react-native';
-import {Navigator} from 'angular2-react-native';
+import {Navigator} from 'angular2-react-native/ios';
 import {TodoMVC} from "../common/todomvc";
 
 @Component({

sample/samples/ios/module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Routes} from '@angular/router';
-import {ReactNativeModule, ReactNativeRouterModule, ReactNativeHttpModule} from 'angular2-react-native';
+import {ReactNativeiOSModule, ReactNativeRouterModule, ReactNativeHttpModule} from 'angular2-react-native';
 import {KitchenSinkApp}   from './kitchensink';
 
 import {HelloApp} from "./hello";
@@ -26,7 +26,7 @@ const appRoutes: Routes = [
 
 @NgModule({
   declarations: [KitchenSinkApp, HelloApp, TodoMVC, TodoItem, GesturesApp, WidgetsList, WebViewApp, APIsApp, HttpApp, AnimationApp, Ball],
-  imports: [ReactNativeModule, ReactNativeHttpModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
+  imports: [ReactNativeiOSModule, ReactNativeHttpModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
   bootstrap: [KitchenSinkApp]
 })
 export class KitchenSinkModule {}

src/android.ts

@@ -0,0 +1,20 @@
+export {ActivityIndicator} from './components/android/_activity_indicator';
+export {Image} from './components/android/_image';
+export {Picker} from './components/android/_picker';
+export {RefreshControl} from './components/android/_refresh_control';
+export {ScrollView} from './components/android/_scrollview';
+export {Slider} from './components/android/_slider';
+export {Switch} from './components/android/_switch';
+export {Text} from './components/android/_text';
+export {TextInput} from './components/android/_textinput';
+export {View} from './components/android/_view';
+export {WebView} from './components/android/_webview';
+
+export {DrawerLayout} from './components/android/drawer_layout';
+export {PagerLayout} from './components/android/pager_layout';
+export {ProgressBar} from './components/android/progress_bar';
+export {Toolbar} from './components/android/toolbar';
+
+
+
+

src/angular2-react-native-android.d.ts

@@ -0,0 +1,5 @@
+declare module 'angular2-react-native/android' {
+
+  export * from './android';
+}
+

src/angular2-react-native-ios.d.ts

@@ -0,0 +1,5 @@
+declare module 'angular2-react-native/ios' {
+
+  export * from './ios';
+}
+

src/angular2-react-native.d.ts

@@ -2,3 +2,4 @@ declare module 'angular2-react-native' {
 
   export * from './index';
 }
+

src/components/android/_activity_indicator.ts

@@ -0,0 +1 @@
+export * from './../common/activity_indicator';

src/components/android/_image.ts

@@ -0,0 +1 @@
+export * from './../common/image';

src/components/android/_picker.ts

@@ -0,0 +1 @@
+export * from './../common/picker';

src/components/android/_refresh_control.ts

@@ -0,0 +1 @@
+export * from './../common/refresh_control';

src/components/android/_scrollview.ts

@@ -0,0 +1 @@
+export * from './../common/scrollview';

src/components/android/_slider.ts

@@ -0,0 +1 @@
+export * from './../common/slider';

src/components/android/_switch.ts

@@ -0,0 +1 @@
+export * from './../common/switch';

src/components/android/_text.ts

@@ -0,0 +1 @@
+export * from './../common/text';

src/components/android/_textinput.ts

@@ -0,0 +1 @@
+export * from './../common/textinput';

src/components/android/_view.ts

@@ -0,0 +1 @@
+export * from './../common/view';

src/components/android/_webview.ts

@@ -0,0 +1 @@
+export * from './../common/webview';

src/components/android/drawer_layout.ts

@@ -1,5 +1,5 @@
 import {Component, Inject, ElementRef, Output, EventEmitter} from "@angular/core";
-import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "./../component";
+import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "../common/component";
 import {Node} from "../../renderer/node";
 import {REACT_NATIVE_WRAPPER} from "./../../renderer/renderer";
 import {ReactNativeWrapper} from "../../wrapper/wrapper";

src/components/android/pager_layout.ts

@@ -1,5 +1,5 @@
 import {Component, Inject, ElementRef, Output, EventEmitter, OnInit} from "@angular/core";
-import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "./../component";
+import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "../common/component";
 import {Node} from "../../renderer/node";
 import {REACT_NATIVE_WRAPPER} from "./../../renderer/renderer";
 import {ReactNativeWrapper} from "../../wrapper/wrapper";

src/components/android/progress_bar.ts

@@ -1,5 +1,5 @@
 import {Component, Inject} from "@angular/core";
-import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "./../component";
+import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "../common/component";
 import {REACT_NATIVE_WRAPPER} from "./../../renderer/renderer";
 import {ReactNativeWrapper} from "../../wrapper/wrapper";
 

src/components/android/toolbar.ts

@@ -1,5 +1,5 @@
 import {Component, Inject, Output, EventEmitter} from "@angular/core";
-import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "./../component";
+import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "../common/component";
 import {REACT_NATIVE_WRAPPER} from "./../../renderer/renderer";
 import {ReactNativeWrapper} from "../../wrapper/wrapper";
 

src/components/activity_indicator.ts renamed to src/components/common/activity_indicator.ts

@@ -1,7 +1,7 @@
 import {Component, Inject} from "@angular/core";
 import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "./component";
-import {REACT_NATIVE_WRAPPER} from "../renderer/renderer";
-import {ReactNativeWrapper, isAndroid} from "../wrapper/wrapper";
+import {REACT_NATIVE_WRAPPER} from "../../renderer/renderer";
+import {ReactNativeWrapper, isAndroid} from "../../wrapper/wrapper";
 
 /**
  * A component for displaying an activity indicator.

src/components/component.ts renamed to src/components/common/component.ts

@@ -1,4 +1,4 @@
-import {ReactNativeWrapper, isAndroid} from "./../wrapper/wrapper";
+import {ReactNativeWrapper, isAndroid} from "../../wrapper/wrapper";
 
 var ANDROID_INPUTS: Array<string> = ['collapsable', 'accessibilityLiveRegion', 'accessibilityComponentType',
   'importantForAccessibility', 'needsOffscreenAlphaCompositing', 'renderToHardwareTextureAndroid ', 'nativeBackgroundAndroid'];

src/components/image.ts renamed to src/components/common/image.ts

@@ -1,7 +1,7 @@
 import {Component, Inject, Output, EventEmitter} from "@angular/core";
 import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "./component";
-import {REACT_NATIVE_WRAPPER} from "./../renderer/renderer";
-import {ReactNativeWrapper, isAndroid} from "../wrapper/wrapper";
+import {REACT_NATIVE_WRAPPER} from "../../renderer/renderer";
+import {ReactNativeWrapper, isAndroid} from "../../wrapper/wrapper";
 
 var ANDROID_INPUTS: Array<string> = ['fadeDuration', 'loadingIndicatorSrc', 'progressiveRenderingEnabled', 'shouldNotifyLoadEvents'];
 var IOS_INPUTS: Array<string> = ['blurRadius', 'capInsets', 'defaultSource'];