feat: migrate to Angular 4.x (#105)

Author: marclaval

README.md

@@ -13,7 +13,7 @@ http://angular.github.io/react-native-renderer/
 ### Preparing your environment
 * Set up React Native for iOS and/or Android following [Getting started](https://facebook.github.io/react-native/docs/getting-started.html) and [Android setup](https://facebook.github.io/react-native/docs/android-setup.htmlt)
 * Clone this repository or a fork of it
-* Install Gulp, React Native CLI  and Typings globally: `npm install -g gulp react-native-cli typings`
+* Install Gulp and React Native CLI globally: `npm install -g gulp react-native-cli`
 * Install local npm modules: `npm install`
 
 ### Running scripts

doc/parser.js

@@ -35,11 +35,11 @@ function visit(sourceFile) {
  return data;
 
  function visitNode(node) {
- var commentRanges = ts.getJsDocComments(node, sourceFile);
- if (commentRanges) {
- commentRanges.forEach(function (commentRange) {
+ var jsDocs = ts.getJSDocs(node);
+ if (jsDocs) {
+ jsDocs.forEach(function (jsDoc) {
  var content = sourceFile.text
- .substring(commentRange.pos + 3, commentRange.end - 2)
+ .substring(jsDoc.pos + 3, jsDoc.end - 2)
  .replace(LEADING_STAR_REGEX, '')
  .trim();
  if (content) {

gulpfile.js

@@ -1,7 +1,6 @@
 var fs = require('fs');
 
 var gulp = require('gulp');
-const babel = require('gulp-babel');
 var jade = require('gulp-jade');
 var rename = require('gulp-rename');
 var typescript = require('gulp-typescript');
@@ -34,20 +33,11 @@ var PATHS = {
  tmp: 'dist/tmp',
  publish: 'dist/publish',
  modules: [
+ 'node_modules/@angular/**/*',
  'node_modules/hammerjs/**/*',
  'node_modules/reflect-metadata/**/*',
  'node_modules/rxjs/**/*',
  'node_modules/zone.js/**/*'
- ],
- es6Modules: [
- 'node_modules/@angular/common/**/*.js', '!node_modules/@angular/common/bundles/*',
- 'node_modules/@angular/compiler/**/*.js', '!node_modules/@angular/compiler/bundles/*',
- 'node_modules/@angular/core/**/*.js', '!node_modules/@angular/core/bundles/*',
- 'node_modules/@angular/http/**/*.js', '!node_modules/@angular/http/bundles/*',
- 'node_modules/@angular/platform-browser/**/*.js', '!node_modules/@angular/platform-browser/bundles/*',
- 'node_modules/@angular/platform-browser-dynamic/**/*.js', '!node_modules/@angular/platform-browser-dynamic/bundles/*',
- 'node_modules/@angular/platform-server/**/*.js', '!node_modules/@angular/platform-server/bundles/*',
- 'node_modules/@angular/router/**/*.js', '!node_modules/@angular/router/bundles/*',
  ]
 };
 
@@ -69,17 +59,10 @@ gulp.task('!postcreate', ['!create'], function() {
  .pipe(gulp.dest(PATHS.app + '/' + APP_NAME + '/android/app/src/main/'));
 
 });
-gulp.task('!ng2commonjs', ['!postcreate'], function() {
- return gulp.src(PATHS.es6Modules, {base: 'node_modules'})
- .pipe(babel({
- presets: ['es2015']
- }))
+gulp.task('init', ['!postcreate'], function() {
+ return gulp.src(PATHS.modules, { base: './node_modules/' })
  .pipe(gulp.dest(PATHS.app + '/' + APP_NAME + '/node_modules'));
 });
-gulp.task('init', ['!ng2commonjs'], function() {
- var copier = require('./tools/copy-dependencies');
- return copier.doCopy(PATHS.modules, PATHS.app + '/' + APP_NAME + '/node_modules');
-});
 
 //--------------------------- JIT compilation---------------------------
 gulp.task('!assets', function () {

karma-test-shim.js

@@ -37,15 +37,19 @@ System.config(
  },
  map: {
  // angular bundles
+ '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
+ '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+ '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
 
  // angular testing umd bundles
+ '@angular/animations/browser/testing': 'npm:@angular/animations/bundles/animations-browser-testing.umd.js',
  '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
  '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
  '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
@@ -66,11 +70,15 @@ System.config(
 
 System.import('@angular/core/testing')
  .then(function(coreTesting){
- return System.import('@angular/platform-browser-dynamic/testing')
- .then(function(browserTesting) {
+ return Promise
+ .all([
+ System.import('@angular/platform-browser-dynamic/testing'),
+ System.import('@angular/platform-browser/animations')
+ ])
+ .then(function(mods) {
  coreTesting.TestBed.initTestEnvironment(
- browserTesting.BrowserDynamicTestingModule,
- browserTesting.platformBrowserDynamicTesting());
+ [mods[0].BrowserDynamicTestingModule, mods[1].NoopAnimationsModule],
+ mods[0].platformBrowserDynamicTesting());
  });
  })
 .then(function() {
@@ -80,4 +88,4 @@ System.import('@angular/core/testing')
  allSpecFiles.map(function (moduleName) {
  return System.import(moduleName);
  }));
-}).then(__karma__.start, __karma__.error);
+}).then(function() { __karma__.start(); }, function(error) { console.error(error); });

package.json

@@ -3,8 +3,7 @@
  "version": "0.0.1-alpha.20",
  "description": "A React Native renderer for Angular 2",
  "scripts": {
- "test": "gulp test.browser/ci",
- "postinstall": "typings install"
+ "test": "gulp test.browser/ci"
  },
  "repository": {
  "type": "git",
@@ -25,45 +24,47 @@
  },
  "homepage": "https://github.com/angular/react-native-renderer/",
  "devDependencies": {
- "@angular/compiler-cli": "2.4.1",
- "babel-preset-es2015": "^6.14.0",
+ "@angular/compiler-cli": "4.2.4",
  "del": "^1.2.0",
  "glob": "^4.0.6",
  "gulp": "^3.9.0",
- "gulp-babel": "^6.1.2",
  "gulp-filter": "^3.0.1",
  "gulp-jade": "^1.1.0",
  "gulp-rename": "^1.2.2",
  "gulp-strip-comments": "^2.2.1",
  "gulp-typescript": "^2.12.2",
  "gulp-watch": "~4.3.5",
- "jasmine": "2.4.1",
+ "jasmine": "2.6.0",
  "jstransformer-marked": "^1.0.1",
  "karma": "^0.13.21",
  "karma-chrome-launcher": "^0.2.2",
  "karma-jasmine": "^0.3.6",
  "marked": "^0.3.5",
  "merge2": "1.0.2",
- "parse5": "1.5.0",
+ "parse5": "3.0.2",
  "run-sequence": "~1.1.2",
- "systemjs": "^0.19.9",
- "systemjs-builder": "^0.15.14",
+ "systemjs": "0.19.41",
+ "systemjs-builder": "0.15.35",
  "through2": "~0.6.3",
- "typescript": "2.0.10"
+ "typescript": "2.3.4"
  },
  "dependencies": {
- "@angular/common": "2.4.1",
- "@angular/compiler": "2.4.1",
- "@angular/core": "2.4.1",
- "@angular/http": "2.4.1",
- "@angular/platform-browser": "2.4.1",
- "@angular/platform-browser-dynamic": "2.4.1",
- "@angular/platform-server": "2.4.1",
- "@angular/router": "3.4.1",
- "hammerjs": "2.0.6",
+ "@angular/animations": "4.2.4",
+ "@angular/common": "4.2.4",
+ "@angular/compiler": "4.2.4",
+ "@angular/core": "4.2.4",
+ "@angular/http": "4.2.4",
+ "@angular/platform-browser": "4.2.4",
+ "@angular/platform-browser-dynamic": "4.2.4",
+ "@angular/platform-server": "4.2.4",
+ "@angular/router": "4.2.4",
+ "@types/jasmine": "^2.5.52",
+ "@types/node": "^8.0.1",
+ "@types/react-native": "^0.44.10",
+ "hammerjs": "2.0.8",
  "react-native": "0.45.1",
- "reflect-metadata": "0.1.8",
- "rxjs": "5.0.1",
- "zone.js": "0.7.4"
+ "reflect-metadata": "0.1.9",
+ "rxjs": "5.4.1",
+ "zone.js": "0.8.12"
  }
 }

sample/tsconfig.json

@@ -17,7 +17,6 @@
  "index.android.ts",
  "index.ios.ts",
  "../../../node_modules/zone.js/dist/zone.js.d.ts",
- "../../../typings/globals/node/index.d.ts",
  "../../../fake-react-native.d.ts"
 ],
 

src/components/ios/navigator.ts

@@ -13,7 +13,7 @@ import {
  AfterViewInit, OnDestroy, ResolvedReflectiveProvider
 } from "@angular/core";
 import {LocationStrategy} from "@angular/common";
-import {Router, ActivatedRoute, RouterOutletMap, PRIMARY_OUTLET} from "@angular/router";
+import {Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET} from "@angular/router";
 import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "../common/component";
 import {REACT_NATIVE_WRAPPER} from "./../../renderer/renderer";
 import {ReactNativeWrapper} from "../../wrapper/wrapper";
@@ -183,20 +183,18 @@ export class Navigator extends HighLevelComponent implements OnDestroy {
  private __wrapper: ReactNativeWrapper;
 
  constructor(private router: Router, private zone: NgZone, private locationStrategy: LocationStrategy, private elementRef: ElementRef,
- private parentOutletMap: RouterOutletMap, @Inject(REACT_NATIVE_WRAPPER) wrapper: ReactNativeWrapper) {
+ private parentContexts: ChildrenOutletContexts, @Inject(REACT_NATIVE_WRAPPER) wrapper: ReactNativeWrapper) {
  super(wrapper);
  this.__wrapper = wrapper;
- parentOutletMap.registerOutlet(PRIMARY_OUTLET, <any>this);
+ parentContexts.onChildOutletCreated(PRIMARY_OUTLET, <any>this);
  this.setDefaultStyle({flex: 1});
  }
 
- activate(activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver,
- loadedInjector: Injector, providers: ResolvedReflectiveProvider[],
- outletMap: RouterOutletMap): void {
+ activateWith(activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver): void {
  if (this._stack.length == 0) {
  this._stack.push(activatedRoute);
  } else {
- var navigator: Node = this.elementRef.nativeElement.children[1];
+ var navigator: Node = this.elementRef.nativeElement.children[0];
  setTimeout(()=> {
  this.__wrapper.requestNavigatorLock(navigator.nativeTag, (lockAcquired) => this._handleNavigation(lockAcquired, navigator, activatedRoute));
  }, 0)
@@ -205,7 +203,7 @@ export class Navigator extends HighLevelComponent implements OnDestroy {
 
  deactivate(): void {}
 
- ngOnDestroy(): void { this.parentOutletMap.removeOutlet(PRIMARY_OUTLET); }
+ ngOnDestroy(): void { this.parentContexts.onChildOutletDestroyed(PRIMARY_OUTLET); }
 
  _handleNavigation(lockAcquired: boolean, navigator: Node, activatedRoute: ActivatedRoute): void {
  this.zone.run(() => {

src/events/hammer.ts

@@ -1,9 +1,6 @@
-declare var global: any;
-declare var require: any;
-
-if (typeof global.window === "undefined") global.window = global;
-if (typeof global.document === "undefined") global.document = {createElement: () => {return {style: {}};}};
-var hammer = (typeof global.window.Hammer === "undefined") ? require('hammerjs') : global.window.Hammer;
+if (typeof global['window'] === "undefined") global['window'] = global;
+if (typeof global['document'] === "undefined") global['document'] = {createElement: () => {return {style: {}};}};
+var hammer = (typeof global['window'].Hammer === "undefined") ? require('hammerjs') : global['window'].Hammer;
 
 var EVENT_RECOGNIZER_MAP: {[s: string]: string } = {
  //doubletap
@@ -155,7 +152,7 @@ var NATIVE_INPUT_MAP: {[s: string]: any } = {
 
 var NATIVE_TARGET_EVENTS = 'topTouchStart topTouchMove topTouchEnd topTouchCancel';
 
-function NativeInput() {
+export function NativeInput() {
  this.evTarget = NATIVE_TARGET_EVENTS;
  this.targetIds = {};
 

src/renderer/bootstrap_aot.ts

@@ -6,26 +6,21 @@ import {ReactNativeWrapperImpl} from "./../wrapper/wrapper_impl";
 //Dependencies
 import "reflect-metadata";
 
-//Zone.js, patching RN's polyfill of XMLHttpRequest is needed to make it compatible with Zone.js
-var onreadystatechangeGetter = function() {return this._onreadystatechange;};
-var onreadystatechangeSetter = function(v: any) {this._onreadystatechange = v;};
-Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
- get: onreadystatechangeGetter,
- set: onreadystatechangeSetter,
- configurable: true
-});
+//Zone.js, working around some patches
+if (!global.hasOwnProperty) {
+ global.hasOwnProperty = () => false;
+}
+var oldSend = XMLHttpRequest.prototype.send;
 require("zone.js/dist/zone.js");
-Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
- get: onreadystatechangeGetter,
-});
+require("zone.js/dist/long-stack-trace-zone.js")
+XMLHttpRequest.prototype.send = oldSend;
 
 // Finally, define the bootstrap
-import {RootRenderer, NgZone, enableProdMode, NgModuleRef, Sanitizer, ErrorHandler} from "@angular/core";
+import {RendererFactory2, NgZone, enableProdMode, NgModuleRef, Sanitizer, ErrorHandler} from "@angular/core";
 import { platformBrowser } from '@angular/platform-browser';
-import {ElementSchemaRegistry} from "@angular/compiler";
+import {DomElementSchemaRegistry} from "@angular/compiler";
 import {
  ReactNativeRootRenderer,
- ReactNativeRootRenderer_,
  ReactNativeElementSchemaRegistry,
  ReactNativeSanitizer,
  REACT_NATIVE_WRAPPER
@@ -39,19 +34,19 @@ export function bootstrapReactNativeAOT(appName:string, factory: any, customProv
  [ReactNativeWrapperImpl],
  {provide: REACT_NATIVE_WRAPPER, useExisting: ReactNativeWrapperImpl},
  [ReactNativeElementSchemaRegistry],
- {provide: ElementSchemaRegistry, useExisting: ReactNativeElementSchemaRegistry},
+ {provide: DomElementSchemaRegistry, useExisting: ReactNativeElementSchemaRegistry},
  ReactNativeSanitizer,
  {provide: Sanitizer, useExisting: ReactNativeSanitizer},
- {provide: ReactNativeRootRenderer, useClass: ReactNativeRootRenderer_},
- {provide: RootRenderer, useExisting: ReactNativeRootRenderer}
+ [ReactNativeRootRenderer],
+ {provide: RendererFactory2, useExisting: ReactNativeRootRenderer}
  ].concat(customProviders || [])).
  bootstrapModuleFactory(factory).
  then((ngModuleRef: NgModuleRef<any>) => {
  var zone: NgZone = ngModuleRef.injector.get(NgZone);
- var rootRenderer = ngModuleRef.injector.get(RootRenderer);
- rootRenderer.zone = zone;
- rootRenderer.executeCommands();
- zone.onStable.subscribe(() => { rootRenderer.executeCommands(); });
+ var rendererFactory = ngModuleRef.injector.get(RendererFactory2);
+ rendererFactory.zone = zone;
+ rendererFactory.executeCommands();
+ zone.onStable.subscribe(() => { rendererFactory.executeCommands(); });
  ngModuleRef.injector.get(ReactNativeWrapperImpl).patchReactNativeWithZone(zone);
  });
  });

src/renderer/bootstrap_jit.ts

@@ -6,26 +6,20 @@ import {ReactNativeWrapperImpl} from "./../wrapper/wrapper_impl";
 //Dependencies
 import "reflect-metadata";
 
-//Zone.js, patching RN's polyfill of XMLHttpRequest is needed to make it compatible with Zone.js
-var onreadystatechangeGetter = function() {return this._onreadystatechange;};
-var onreadystatechangeSetter = function(v: any) {this._onreadystatechange = v;};
-Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
- get: onreadystatechangeGetter,
- set: onreadystatechangeSetter,
- configurable: true
-});
+//Zone.js, working around some patches
+if (!global.hasOwnProperty) {
+ global.hasOwnProperty = () => false;
+}
+var oldSend = XMLHttpRequest.prototype.send;
 require("zone.js/dist/zone.js");
-Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
- get: onreadystatechangeGetter,
-});
+XMLHttpRequest.prototype.send = oldSend;
 
 // Finally, define the bootstrap
-import {RootRenderer, NgZone, enableProdMode, NgModuleRef, Sanitizer, ErrorHandler} from "@angular/core";
+import {RendererFactory2, NgZone, enableProdMode, NgModuleRef, Sanitizer, ErrorHandler} from "@angular/core";
 import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
-import {ElementSchemaRegistry} from "@angular/compiler";
+import {DomElementSchemaRegistry} from "@angular/compiler";
 import {
  ReactNativeRootRenderer,
- ReactNativeRootRenderer_,
  ReactNativeElementSchemaRegistry,
  ReactNativeSanitizer,
  REACT_NATIVE_WRAPPER
@@ -39,19 +33,19 @@ export function bootstrapReactNativeJIT(appName:string, module: any, customProvi
  [ReactNativeWrapperImpl],
  {provide: REACT_NATIVE_WRAPPER, useExisting: ReactNativeWrapperImpl},
  [ReactNativeElementSchemaRegistry],
- {provide: ElementSchemaRegistry, useExisting: ReactNativeElementSchemaRegistry},
+ {provide: DomElementSchemaRegistry, useExisting: ReactNativeElementSchemaRegistry},
  ReactNativeSanitizer,
  {provide: Sanitizer, useExisting: ReactNativeSanitizer},
- {provide: ReactNativeRootRenderer, useClass: ReactNativeRootRenderer_},
- {provide: RootRenderer, useExisting: ReactNativeRootRenderer}
+ [ReactNativeRootRenderer],
+ {provide: RendererFactory2, useExisting: ReactNativeRootRenderer}
  ].concat(customProviders || [])).
  bootstrapModule(module).
  then((ngModuleRef: NgModuleRef<any>) => {
  var zone: NgZone = ngModuleRef.injector.get(NgZone);
- var rootRenderer = ngModuleRef.injector.get(RootRenderer);
- rootRenderer.zone = zone;
- rootRenderer.executeCommands();
- zone.onStable.subscribe(() => { rootRenderer.executeCommands(); });
+ var rendererFactory = ngModuleRef.injector.get(RendererFactory2);
+ rendererFactory.zone = zone;
+ rendererFactory.executeCommands();
+ zone.onStable.subscribe(() => { rendererFactory.executeCommands(); });
  ngModuleRef.injector.get(ReactNativeWrapperImpl).patchReactNativeWithZone(zone);
  });
  });