Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

Commit 40f8e09

Browse files
marclavalmarclaval
authored
feat: migrate to Angular 4.x (#105)
1 parent 7f23b84 commit 40f8e09

21 files changed

+316
-334
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ http://angular.github.io/react-native-renderer/
1313
### Preparing your environment
1414
* 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)
1515
* Clone this repository or a fork of it
16-
* Install Gulp, React Native CLI and Typings globally: `npm install -g gulp react-native-cli typings`
16+
* Install Gulp and React Native CLI globally: `npm install -g gulp react-native-cli`
1717
* Install local npm modules: `npm install`
1818

1919
### Running scripts

‎doc/parser.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ function visit(sourceFile) {
3535
return data;
3636

3737
function visitNode(node) {
38-
var commentRanges = ts.getJsDocComments(node, sourceFile);
39-
if (commentRanges) {
40-
commentRanges.forEach(function (commentRange) {
38+
var jsDocs = ts.getJSDocs(node);
39+
if (jsDocs) {
40+
jsDocs.forEach(function (jsDoc) {
4141
var content = sourceFile.text
42-
.substring(commentRange.pos + 3, commentRange.end - 2)
42+
.substring(jsDoc.pos + 3, jsDoc.end - 2)
4343
.replace(LEADING_STAR_REGEX, '')
4444
.trim();
4545
if (content) {

‎gulpfile.js

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
var fs = require('fs');
22

33
var gulp = require('gulp');
4-
const babel = require('gulp-babel');
54
var jade = require('gulp-jade');
65
var rename = require('gulp-rename');
76
var typescript = require('gulp-typescript');
@@ -34,20 +33,11 @@ var PATHS = {
3433
tmp: 'dist/tmp',
3534
publish: 'dist/publish',
3635
modules: [
36+
'node_modules/@angular/**/*',
3737
'node_modules/hammerjs/**/*',
3838
'node_modules/reflect-metadata/**/*',
3939
'node_modules/rxjs/**/*',
4040
'node_modules/zone.js/**/*'
41-
],
42-
es6Modules: [
43-
'node_modules/@angular/common/**/*.js', '!node_modules/@angular/common/bundles/*',
44-
'node_modules/@angular/compiler/**/*.js', '!node_modules/@angular/compiler/bundles/*',
45-
'node_modules/@angular/core/**/*.js', '!node_modules/@angular/core/bundles/*',
46-
'node_modules/@angular/http/**/*.js', '!node_modules/@angular/http/bundles/*',
47-
'node_modules/@angular/platform-browser/**/*.js', '!node_modules/@angular/platform-browser/bundles/*',
48-
'node_modules/@angular/platform-browser-dynamic/**/*.js', '!node_modules/@angular/platform-browser-dynamic/bundles/*',
49-
'node_modules/@angular/platform-server/**/*.js', '!node_modules/@angular/platform-server/bundles/*',
50-
'node_modules/@angular/router/**/*.js', '!node_modules/@angular/router/bundles/*',
5141
]
5242
};
5343

@@ -69,17 +59,10 @@ gulp.task('!postcreate', ['!create'], function() {
6959
.pipe(gulp.dest(PATHS.app + '/' + APP_NAME + '/android/app/src/main/'));
7060

7161
});
72-
gulp.task('!ng2commonjs', ['!postcreate'], function() {
73-
return gulp.src(PATHS.es6Modules, {base: 'node_modules'})
74-
.pipe(babel({
75-
presets: ['es2015']
76-
}))
62+
gulp.task('init', ['!postcreate'], function() {
63+
return gulp.src(PATHS.modules, { base: './node_modules/' })
7764
.pipe(gulp.dest(PATHS.app + '/' + APP_NAME + '/node_modules'));
7865
});
79-
gulp.task('init', ['!ng2commonjs'], function() {
80-
var copier = require('./tools/copy-dependencies');
81-
return copier.doCopy(PATHS.modules, PATHS.app + '/' + APP_NAME + '/node_modules');
82-
});
8366

8467
//--------------------------- JIT compilation---------------------------
8568
gulp.task('!assets', function () {

‎karma-test-shim.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,19 @@ System.config(
3737
},
3838
map: {
3939
// angular bundles
40+
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
41+
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
4042
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
4143
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
4244
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
4345
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
46+
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
4447
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
4548
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
4649
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
4750

4851
// angular testing umd bundles
52+
'@angular/animations/browser/testing': 'npm:@angular/animations/bundles/animations-browser-testing.umd.js',
4953
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
5054
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
5155
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
@@ -66,11 +70,15 @@ System.config(
6670

6771
System.import('@angular/core/testing')
6872
.then(function(coreTesting){
69-
return System.import('@angular/platform-browser-dynamic/testing')
70-
.then(function(browserTesting) {
73+
return Promise
74+
.all([
75+
System.import('@angular/platform-browser-dynamic/testing'),
76+
System.import('@angular/platform-browser/animations')
77+
])
78+
.then(function(mods) {
7179
coreTesting.TestBed.initTestEnvironment(
72-
browserTesting.BrowserDynamicTestingModule,
73-
browserTesting.platformBrowserDynamicTesting());
80+
[mods[0].BrowserDynamicTestingModule, mods[1].NoopAnimationsModule],
81+
mods[0].platformBrowserDynamicTesting());
7482
});
7583
})
7684
.then(function() {
@@ -80,4 +88,4 @@ System.import('@angular/core/testing')
8088
allSpecFiles.map(function (moduleName) {
8189
return System.import(moduleName);
8290
}));
83-
}).then(__karma__.start, __karma__.error);
91+
}).then(function() { __karma__.start(); }, function(error) { console.error(error); });

‎package.json

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
"version": "0.0.1-alpha.20",
44
"description": "A React Native renderer for Angular 2",
55
"scripts": {
6-
"test": "gulp test.browser/ci",
7-
"postinstall": "typings install"
6+
"test": "gulp test.browser/ci"
87
},
98
"repository": {
109
"type": "git",
@@ -25,45 +24,47 @@
2524
},
2625
"homepage": "https://github.com/angular/react-native-renderer/",
2726
"devDependencies": {
28-
"@angular/compiler-cli": "2.4.1",
29-
"babel-preset-es2015": "^6.14.0",
27+
"@angular/compiler-cli": "4.2.4",
3028
"del": "^1.2.0",
3129
"glob": "^4.0.6",
3230
"gulp": "^3.9.0",
33-
"gulp-babel": "^6.1.2",
3431
"gulp-filter": "^3.0.1",
3532
"gulp-jade": "^1.1.0",
3633
"gulp-rename": "^1.2.2",
3734
"gulp-strip-comments": "^2.2.1",
3835
"gulp-typescript": "^2.12.2",
3936
"gulp-watch": "~4.3.5",
40-
"jasmine": "2.4.1",
37+
"jasmine": "2.6.0",
4138
"jstransformer-marked": "^1.0.1",
4239
"karma": "^0.13.21",
4340
"karma-chrome-launcher": "^0.2.2",
4441
"karma-jasmine": "^0.3.6",
4542
"marked": "^0.3.5",
4643
"merge2": "1.0.2",
47-
"parse5": "1.5.0",
44+
"parse5": "3.0.2",
4845
"run-sequence": "~1.1.2",
49-
"systemjs": "^0.19.9",
50-
"systemjs-builder": "^0.15.14",
46+
"systemjs": "0.19.41",
47+
"systemjs-builder": "0.15.35",
5148
"through2": "~0.6.3",
52-
"typescript": "2.0.10"
49+
"typescript": "2.3.4"
5350
},
5451
"dependencies": {
55-
"@angular/common": "2.4.1",
56-
"@angular/compiler": "2.4.1",
57-
"@angular/core": "2.4.1",
58-
"@angular/http": "2.4.1",
59-
"@angular/platform-browser": "2.4.1",
60-
"@angular/platform-browser-dynamic": "2.4.1",
61-
"@angular/platform-server": "2.4.1",
62-
"@angular/router": "3.4.1",
63-
"hammerjs": "2.0.6",
52+
"@angular/animations": "4.2.4",
53+
"@angular/common": "4.2.4",
54+
"@angular/compiler": "4.2.4",
55+
"@angular/core": "4.2.4",
56+
"@angular/http": "4.2.4",
57+
"@angular/platform-browser": "4.2.4",
58+
"@angular/platform-browser-dynamic": "4.2.4",
59+
"@angular/platform-server": "4.2.4",
60+
"@angular/router": "4.2.4",
61+
"@types/jasmine": "^2.5.52",
62+
"@types/node": "^8.0.1",
63+
"@types/react-native": "^0.44.10",
64+
"hammerjs": "2.0.8",
6465
"react-native": "0.45.1",
65-
"reflect-metadata": "0.1.8",
66-
"rxjs": "5.0.1",
67-
"zone.js": "0.7.4"
66+
"reflect-metadata": "0.1.9",
67+
"rxjs": "5.4.1",
68+
"zone.js": "0.8.12"
6869
}
6970
}

‎sample/tsconfig.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
"index.android.ts",
1818
"index.ios.ts",
1919
"../../../node_modules/zone.js/dist/zone.js.d.ts",
20-
"../../../typings/globals/node/index.d.ts",
2120
"../../../fake-react-native.d.ts"
2221
],
2322

‎src/components/ios/navigator.ts

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
AfterViewInit, OnDestroy, ResolvedReflectiveProvider
1414
} from "@angular/core";
1515
import {LocationStrategy} from "@angular/common";
16-
import {Router, ActivatedRoute, RouterOutletMap, PRIMARY_OUTLET} from "@angular/router";
16+
import {Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET} from "@angular/router";
1717
import {HighLevelComponent, GENERIC_INPUTS, GENERIC_BINDINGS} from "../common/component";
1818
import {REACT_NATIVE_WRAPPER} from "./../../renderer/renderer";
1919
import {ReactNativeWrapper} from "../../wrapper/wrapper";
@@ -183,20 +183,18 @@ export class Navigator extends HighLevelComponent implements OnDestroy {
183183
private __wrapper: ReactNativeWrapper;
184184

185185
constructor(private router: Router, private zone: NgZone, private locationStrategy: LocationStrategy, private elementRef: ElementRef,
186-
private parentOutletMap: RouterOutletMap, @Inject(REACT_NATIVE_WRAPPER) wrapper: ReactNativeWrapper) {
186+
private parentContexts: ChildrenOutletContexts, @Inject(REACT_NATIVE_WRAPPER) wrapper: ReactNativeWrapper) {
187187
super(wrapper);
188188
this.__wrapper = wrapper;
189-
parentOutletMap.registerOutlet(PRIMARY_OUTLET, <any>this);
189+
parentContexts.onChildOutletCreated(PRIMARY_OUTLET, <any>this);
190190
this.setDefaultStyle({flex: 1});
191191
}
192192

193-
activate(activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver,
194-
loadedInjector: Injector, providers: ResolvedReflectiveProvider[],
195-
outletMap: RouterOutletMap): void {
193+
activateWith(activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver): void {
196194
if (this._stack.length == 0) {
197195
this._stack.push(activatedRoute);
198196
} else {
199-
var navigator: Node = this.elementRef.nativeElement.children[1];
197+
var navigator: Node = this.elementRef.nativeElement.children[0];
200198
setTimeout(()=> {
201199
this.__wrapper.requestNavigatorLock(navigator.nativeTag, (lockAcquired) => this._handleNavigation(lockAcquired, navigator, activatedRoute));
202200
}, 0)
@@ -205,7 +203,7 @@ export class Navigator extends HighLevelComponent implements OnDestroy {
205203

206204
deactivate(): void {}
207205

208-
ngOnDestroy(): void { this.parentOutletMap.removeOutlet(PRIMARY_OUTLET); }
206+
ngOnDestroy(): void { this.parentContexts.onChildOutletDestroyed(PRIMARY_OUTLET); }
209207

210208
_handleNavigation(lockAcquired: boolean, navigator: Node, activatedRoute: ActivatedRoute): void {
211209
this.zone.run(() => {

‎src/events/hammer.ts

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
declare var global: any;
2-
declare var require: any;
3-
4-
if (typeof global.window === "undefined") global.window = global;
5-
if (typeof global.document === "undefined") global.document = {createElement: () => {return {style: {}};}};
6-
var hammer = (typeof global.window.Hammer === "undefined") ? require('hammerjs') : global.window.Hammer;
1+
if (typeof global['window'] === "undefined") global['window'] = global;
2+
if (typeof global['document'] === "undefined") global['document'] = {createElement: () => {return {style: {}};}};
3+
var hammer = (typeof global['window'].Hammer === "undefined") ? require('hammerjs') : global['window'].Hammer;
74

85
var EVENT_RECOGNIZER_MAP: {[s: string]: string } = {
96
//doubletap
@@ -155,7 +152,7 @@ var NATIVE_INPUT_MAP: {[s: string]: any } = {
155152

156153
var NATIVE_TARGET_EVENTS = 'topTouchStart topTouchMove topTouchEnd topTouchCancel';
157154

158-
function NativeInput() {
155+
export function NativeInput() {
159156
this.evTarget = NATIVE_TARGET_EVENTS;
160157
this.targetIds = {};
161158

‎src/renderer/bootstrap_aot.ts

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,21 @@ import {ReactNativeWrapperImpl} from "./../wrapper/wrapper_impl";
66
//Dependencies
77
import "reflect-metadata";
88

9-
//Zone.js, patching RN's polyfill of XMLHttpRequest is needed to make it compatible with Zone.js
10-
var onreadystatechangeGetter = function() {return this._onreadystatechange;};
11-
var onreadystatechangeSetter = function(v: any) {this._onreadystatechange = v;};
12-
Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
13-
get: onreadystatechangeGetter,
14-
set: onreadystatechangeSetter,
15-
configurable: true
16-
});
9+
//Zone.js, working around some patches
10+
if (!global.hasOwnProperty) {
11+
global.hasOwnProperty = () => false;
12+
}
13+
var oldSend = XMLHttpRequest.prototype.send;
1714
require("zone.js/dist/zone.js");
18-
Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
19-
get: onreadystatechangeGetter,
20-
});
15+
require("zone.js/dist/long-stack-trace-zone.js")
16+
XMLHttpRequest.prototype.send = oldSend;
2117

2218
// Finally, define the bootstrap
23-
import {RootRenderer, NgZone, enableProdMode, NgModuleRef, Sanitizer, ErrorHandler} from "@angular/core";
19+
import {RendererFactory2, NgZone, enableProdMode, NgModuleRef, Sanitizer, ErrorHandler} from "@angular/core";
2420
import { platformBrowser } from '@angular/platform-browser';
25-
import {ElementSchemaRegistry} from "@angular/compiler";
21+
import {DomElementSchemaRegistry} from "@angular/compiler";
2622
import {
2723
ReactNativeRootRenderer,
28-
ReactNativeRootRenderer_,
2924
ReactNativeElementSchemaRegistry,
3025
ReactNativeSanitizer,
3126
REACT_NATIVE_WRAPPER
@@ -39,19 +34,19 @@ export function bootstrapReactNativeAOT(appName:string, factory: any, customProv
3934
[ReactNativeWrapperImpl],
4035
{provide: REACT_NATIVE_WRAPPER, useExisting: ReactNativeWrapperImpl},
4136
[ReactNativeElementSchemaRegistry],
42-
{provide: ElementSchemaRegistry, useExisting: ReactNativeElementSchemaRegistry},
37+
{provide: DomElementSchemaRegistry, useExisting: ReactNativeElementSchemaRegistry},
4338
ReactNativeSanitizer,
4439
{provide: Sanitizer, useExisting: ReactNativeSanitizer},
45-
{provide: ReactNativeRootRenderer, useClass: ReactNativeRootRenderer_},
46-
{provide: RootRenderer, useExisting: ReactNativeRootRenderer}
40+
[ReactNativeRootRenderer],
41+
{provide: RendererFactory2, useExisting: ReactNativeRootRenderer}
4742
].concat(customProviders || [])).
4843
bootstrapModuleFactory(factory).
4944
then((ngModuleRef: NgModuleRef<any>) => {
5045
var zone: NgZone = ngModuleRef.injector.get(NgZone);
51-
var rootRenderer = ngModuleRef.injector.get(RootRenderer);
52-
rootRenderer.zone = zone;
53-
rootRenderer.executeCommands();
54-
zone.onStable.subscribe(() => { rootRenderer.executeCommands(); });
46+
var rendererFactory = ngModuleRef.injector.get(RendererFactory2);
47+
rendererFactory.zone = zone;
48+
rendererFactory.executeCommands();
49+
zone.onStable.subscribe(() => { rendererFactory.executeCommands(); });
5550
ngModuleRef.injector.get(ReactNativeWrapperImpl).patchReactNativeWithZone(zone);
5651
});
5752
});

‎src/renderer/bootstrap_jit.ts

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,20 @@ import {ReactNativeWrapperImpl} from "./../wrapper/wrapper_impl";
66
//Dependencies
77
import "reflect-metadata";
88

9-
//Zone.js, patching RN's polyfill of XMLHttpRequest is needed to make it compatible with Zone.js
10-
var onreadystatechangeGetter = function() {return this._onreadystatechange;};
11-
var onreadystatechangeSetter = function(v: any) {this._onreadystatechange = v;};
12-
Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
13-
get: onreadystatechangeGetter,
14-
set: onreadystatechangeSetter,
15-
configurable: true
16-
});
9+
//Zone.js, working around some patches
10+
if (!global.hasOwnProperty) {
11+
global.hasOwnProperty = () => false;
12+
}
13+
var oldSend = XMLHttpRequest.prototype.send;
1714
require("zone.js/dist/zone.js");
18-
Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
19-
get: onreadystatechangeGetter,
20-
});
15+
XMLHttpRequest.prototype.send = oldSend;
2116

2217
// Finally, define the bootstrap
23-
import {RootRenderer, NgZone, enableProdMode, NgModuleRef, Sanitizer, ErrorHandler} from "@angular/core";
18+
import {RendererFactory2, NgZone, enableProdMode, NgModuleRef, Sanitizer, ErrorHandler} from "@angular/core";
2419
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
25-
import {ElementSchemaRegistry} from "@angular/compiler";
20+
import {DomElementSchemaRegistry} from "@angular/compiler";
2621
import {
2722
ReactNativeRootRenderer,
28-
ReactNativeRootRenderer_,
2923
ReactNativeElementSchemaRegistry,
3024
ReactNativeSanitizer,
3125
REACT_NATIVE_WRAPPER
@@ -39,19 +33,19 @@ export function bootstrapReactNativeJIT(appName:string, module: any, customProvi
3933
[ReactNativeWrapperImpl],
4034
{provide: REACT_NATIVE_WRAPPER, useExisting: ReactNativeWrapperImpl},
4135
[ReactNativeElementSchemaRegistry],
42-
{provide: ElementSchemaRegistry, useExisting: ReactNativeElementSchemaRegistry},
36+
{provide: DomElementSchemaRegistry, useExisting: ReactNativeElementSchemaRegistry},
4337
ReactNativeSanitizer,
4438
{provide: Sanitizer, useExisting: ReactNativeSanitizer},
45-
{provide: ReactNativeRootRenderer, useClass: ReactNativeRootRenderer_},
46-
{provide: RootRenderer, useExisting: ReactNativeRootRenderer}
39+
[ReactNativeRootRenderer],
40+
{provide: RendererFactory2, useExisting: ReactNativeRootRenderer}
4741
].concat(customProviders || [])).
4842
bootstrapModule(module).
4943
then((ngModuleRef: NgModuleRef<any>) => {
5044
var zone: NgZone = ngModuleRef.injector.get(NgZone);
51-
var rootRenderer = ngModuleRef.injector.get(RootRenderer);
52-
rootRenderer.zone = zone;
53-
rootRenderer.executeCommands();
54-
zone.onStable.subscribe(() => { rootRenderer.executeCommands(); });
45+
var rendererFactory = ngModuleRef.injector.get(RendererFactory2);
46+
rendererFactory.zone = zone;
47+
rendererFactory.executeCommands();
48+
zone.onStable.subscribe(() => { rendererFactory.executeCommands(); });
5549
ngModuleRef.injector.get(ReactNativeWrapperImpl).patchReactNativeWithZone(zone);
5650
});
5751
});

0 commit comments

Comments
 (0)