From 500c2a32cf06568c8707ff8c1f07070ea84cc29c Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 9 Jan 2017 11:56:33 +0200 Subject: [PATCH 01/39] chore(ng): update to Angular 4.0.0-beta.1 --- nativescript-angular/package.json | 21 +++++++++++---------- ng-sample/package.json | 16 ++++++++-------- tests/npm-shrinkwrap.json | 5 ----- tests/package.json | 14 +++++++------- 4 files changed, 26 insertions(+), 30 deletions(-) diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 37aee05c0..a23b1b17f 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -24,22 +24,23 @@ "update-app-ng-deps": "./bin/update-app-ng-deps" }, "dependencies": { - "@angular/common": "~2.4.3", - "@angular/compiler": "~2.4.3", - "@angular/core": "~2.4.3", - "@angular/forms": "~2.4.3", - "@angular/http": "~2.4.3", - "@angular/platform-browser": "~2.4.3", - "@angular/router": "~3.4.3", "nativescript-intl": "~0.0.8", + "@angular/core": "4.0.0-beta.1", + "@angular/common": "4.0.0-beta.1", + "@angular/compiler": "4.0.0-beta.1", + "@angular/http": "4.0.0-beta.1", + "@angular/platform-browser": "4.0.0-beta.1", + "@angular/platform-browser-dynamic": "4.0.0-beta.1", + "@angular/forms": "4.0.0-beta.1", + "@angular/router": "4.0.0-beta.1", + "rxjs": "^5.0.1", + "reflect-metadata": "~0.1.8", "punycode": "1.3.2", "querystring": "0.2.0", - "reflect-metadata": "~0.1.8", - "rxjs": "~5.0.1", "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "~2.4.3", + "@angular/compiler-cli": "~4.0.0-beta.1", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", diff --git a/ng-sample/package.json b/ng-sample/package.json index 52bd39310..2cfe20551 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,14 +23,14 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "~2.4.3", - "@angular/compiler": "~2.4.3", - "@angular/core": "~2.4.3", - "@angular/forms": "~2.4.3", - "@angular/http": "~2.4.3", - "@angular/platform-browser": "~2.4.3", - "@angular/platform-browser-dynamic": "~2.4.3", - "@angular/router": "~3.4.3", + "@angular/common": "~4.0.0-beta.1", + "@angular/compiler": "~4.0.0-beta.1", + "@angular/core": "~4.0.0-beta.1", + "@angular/forms": "~4.0.0-beta.1", + "@angular/http": "~4.0.0-beta.1", + "@angular/platform-browser": "~4.0.0-beta.1", + "@angular/platform-browser-dynamic": "~4.0.0-beta.1", + "@angular/router": "~4.0.0-beta.1", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" diff --git a/tests/npm-shrinkwrap.json b/tests/npm-shrinkwrap.json index 2a69074f9..475faa66a 100644 --- a/tests/npm-shrinkwrap.json +++ b/tests/npm-shrinkwrap.json @@ -3784,11 +3784,6 @@ } } }, - "rxjs": { - "version": "5.0.3", - "from": "rxjs@>=5.0.1 <5.1.0", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.0.3.tgz" - }, "semver": { "version": "4.3.6", "from": "semver@>=4.3.3 <4.4.0", diff --git a/tests/package.json b/tests/package.json index 97e2f6153..7e03c16bc 100644 --- a/tests/package.json +++ b/tests/package.json @@ -26,13 +26,13 @@ ], "homepage": "http://nativescript.org", "dependencies": { - "@angular/common": "~2.4.3", - "@angular/compiler": "~2.4.3", - "@angular/core": "~2.4.3", - "@angular/http": "~2.4.3", - "@angular/platform-browser": "~2.4.3", - "@angular/platform-browser-dynamic": "~2.4.3", - "@angular/router": "~3.4.3", + "@angular/common": "~4.0.0-beta.1", + "@angular/compiler": "~4.0.0-beta.1", + "@angular/core": "~4.0.0-beta.1", + "@angular/http": "~4.0.0-beta.1", + "@angular/platform-browser": "~4.0.0-beta.1", + "@angular/platform-browser-dynamic": "~4.0.0-beta.1", + "@angular/router": "~4.0.0-beta.1", "nativescript-angular": "file:../nativescript-angular", "nativescript-unit-test-runner": "^0.3.4", "rxjs": "~5.0.1", From 404a9d2ca769d0577d4769443b31dcf52910655b Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 14 Feb 2017 13:56:33 +0200 Subject: [PATCH 02/39] chore(ng): update to Angular 4.0.0-beta.2 --- nativescript-angular/package.json | 18 +++++++++--------- ng-sample/package.json | 16 ++++++++-------- .../nativescript-angular-sync .js | 1 - 3 files changed, 17 insertions(+), 18 deletions(-) delete mode 100644 tests/hooks/before-livesync/nativescript-angular-sync .js diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index a23b1b17f..260ea60eb 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -25,14 +25,14 @@ }, "dependencies": { "nativescript-intl": "~0.0.8", - "@angular/core": "4.0.0-beta.1", - "@angular/common": "4.0.0-beta.1", - "@angular/compiler": "4.0.0-beta.1", - "@angular/http": "4.0.0-beta.1", - "@angular/platform-browser": "4.0.0-beta.1", - "@angular/platform-browser-dynamic": "4.0.0-beta.1", - "@angular/forms": "4.0.0-beta.1", - "@angular/router": "4.0.0-beta.1", + "@angular/core": "4.0.0-beta.2", + "@angular/common": "4.0.0-beta.2", + "@angular/compiler": "4.0.0-beta.2", + "@angular/http": "4.0.0-beta.2", + "@angular/platform-browser": "4.0.0-beta.2", + "@angular/platform-browser-dynamic": "4.0.0-beta.2", + "@angular/forms": "4.0.0-beta.2", + "@angular/router": "4.0.0-beta.2", "rxjs": "^5.0.1", "reflect-metadata": "~0.1.8", "punycode": "1.3.2", @@ -40,7 +40,7 @@ "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "~4.0.0-beta.1", + "@angular/compiler-cli": "~4.0.0-beta.2", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", diff --git a/ng-sample/package.json b/ng-sample/package.json index 2cfe20551..6f7b01e85 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,14 +23,14 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "~4.0.0-beta.1", - "@angular/compiler": "~4.0.0-beta.1", - "@angular/core": "~4.0.0-beta.1", - "@angular/forms": "~4.0.0-beta.1", - "@angular/http": "~4.0.0-beta.1", - "@angular/platform-browser": "~4.0.0-beta.1", - "@angular/platform-browser-dynamic": "~4.0.0-beta.1", - "@angular/router": "~4.0.0-beta.1", + "@angular/common": "~4.0.0-beta.2", + "@angular/compiler": "~4.0.0-beta.2", + "@angular/core": "~4.0.0-beta.2", + "@angular/forms": "~4.0.0-beta.2", + "@angular/http": "~4.0.0-beta.2", + "@angular/platform-browser": "~4.0.0-beta.2", + "@angular/platform-browser-dynamic": "~4.0.0-beta.2", + "@angular/router": "~4.0.0-beta.2", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" diff --git a/tests/hooks/before-livesync/nativescript-angular-sync .js b/tests/hooks/before-livesync/nativescript-angular-sync .js deleted file mode 100644 index 5a8510cb2..000000000 --- a/tests/hooks/before-livesync/nativescript-angular-sync .js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require("nativescript-angular/hooks/before-livesync"); From 4d30a7e24c7d56a4bc1dc34de4b2705891297366 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 14 Feb 2017 13:57:27 +0200 Subject: [PATCH 03/39] fix(page-router-outlet): manually run detect changes when navigating to new page --- .../common/detached-loader.ts | 3 +-- .../router/page-router-outlet.ts | 20 ++++++++++++++++++- tests/e2e-tests/lazy-load-routing.js | 2 +- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/nativescript-angular/common/detached-loader.ts b/nativescript-angular/common/detached-loader.ts index f5af4ff49..0fd458980 100644 --- a/nativescript-angular/common/detached-loader.ts +++ b/nativescript-angular/common/detached-loader.ts @@ -36,13 +36,12 @@ export class DetachedLoader { // tslint:disable-line:component-class-suffix // We are inside a promise here so no need for setTimeout - CD should trigger // after the promise. log("DetachedLoader.loadInLocation component loaded -> markForCheck"); - this.changeDetector.markForCheck(); return Promise.resolve(componentRef); } public detectChanges() { - this.changeDetector.markForCheck(); + this.changeDetector.detectChanges(); } // TODO: change this API -- async promises not needed here anymore. diff --git a/nativescript-angular/router/page-router-outlet.ts b/nativescript-angular/router/page-router-outlet.ts index c764f69c4..6027e8ab6 100644 --- a/nativescript-angular/router/page-router-outlet.ts +++ b/nativescript-angular/router/page-router-outlet.ts @@ -1,6 +1,7 @@ import { Attribute, ComponentFactory, ComponentRef, Directive, - ReflectiveInjector, ResolvedReflectiveProvider, ViewContainerRef, + ReflectiveInjector, ResolvedReflectiveProvider, + ViewRef, ViewContainerRef, Inject, ComponentFactoryResolver, Injector } from "@angular/core"; import { isPresent } from "../lang-facade"; @@ -61,6 +62,7 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix private viewUtil: ViewUtil; private refCache: RefCache = new RefCache(); private isInitialPage: boolean = true; + private previousPagesViews: Array = new Array(); private detachedLoaderFactory: ComponentFactory; private currentActivatedComp: ComponentRef; @@ -152,8 +154,16 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix this.currentActivatedRoute = activatedRoute; if (this.locationStrategy._isPageNavigatingBack()) { + if (this.previousPagesViews.length) { + this.containerRef.insert(this.previousPagesViews.pop()); + } + this.activateOnGoBack(activatedRoute, outletMap); } else { + if (this.containerRef.length) { + this.previousPagesViews.push(this.containerRef.detach()); + } + this.activateOnGoForward(activatedRoute, providers, outletMap, resolver, injector); } } @@ -176,6 +186,9 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix const inj = ReflectiveInjector.fromResolvedProviders(providers, injector); this.currentActivatedComp = this.containerRef.createComponent( factory, this.containerRef.length, inj, []); + + this.currentActivatedComp.changeDetectorRef.detectChanges(); + this.refCache.push(this.currentActivatedComp, pageRoute, outletMap, null); } else { @@ -194,7 +207,12 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix const loaderRef = this.containerRef.createComponent( this.detachedLoaderFactory, this.containerRef.length, childInjector, []); + loaderRef.changeDetectorRef.detectChanges(); + this.currentActivatedComp = loaderRef.instance.loadWithFactory(factory); + + this.currentActivatedComp.changeDetectorRef.detectChanges(); + this.loadComponentInPage(page, this.currentActivatedComp); this.refCache.push(this.currentActivatedComp, pageRoute, outletMap, loaderRef); } diff --git a/tests/e2e-tests/lazy-load-routing.js b/tests/e2e-tests/lazy-load-routing.js index bb28e3ec6..08eeebd32 100644 --- a/tests/e2e-tests/lazy-load-routing.js +++ b/tests/e2e-tests/lazy-load-routing.js @@ -61,6 +61,6 @@ describe("lazy load routing", function () { .should.eventually.exist .text().should.eventually.equal("Second: lazy-load") .elementByAccessibilityId("router-location-strategy-states-lazy-load") - .text().should.eventually.equal("/second/lazy-load") + .text().should.eventually.equal("/first/lazy-load,/second/lazy-load") }); }); From 4551c3cee881dc1b6c6a72f1296a35eaadcc1d1f Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Thu, 16 Feb 2017 10:29:36 +0200 Subject: [PATCH 04/39] chore(ng): update go Angular 4.0.0-beta.3 --- nativescript-angular/package.json | 18 +++++++++--------- ng-sample/package.json | 16 ++++++++-------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 260ea60eb..f2ec06988 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -25,14 +25,14 @@ }, "dependencies": { "nativescript-intl": "~0.0.8", - "@angular/core": "4.0.0-beta.2", - "@angular/common": "4.0.0-beta.2", - "@angular/compiler": "4.0.0-beta.2", - "@angular/http": "4.0.0-beta.2", - "@angular/platform-browser": "4.0.0-beta.2", - "@angular/platform-browser-dynamic": "4.0.0-beta.2", - "@angular/forms": "4.0.0-beta.2", - "@angular/router": "4.0.0-beta.2", + "@angular/core": "4.0.0-beta.3", + "@angular/common": "4.0.0-beta.3", + "@angular/compiler": "4.0.0-beta.3", + "@angular/http": "4.0.0-beta.3", + "@angular/platform-browser": "4.0.0-beta.3", + "@angular/platform-browser-dynamic": "4.0.0-beta.3", + "@angular/forms": "4.0.0-beta.3", + "@angular/router": "4.0.0-beta.3", "rxjs": "^5.0.1", "reflect-metadata": "~0.1.8", "punycode": "1.3.2", @@ -40,7 +40,7 @@ "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "~4.0.0-beta.2", + "@angular/compiler-cli": "~4.0.0-beta.3", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", diff --git a/ng-sample/package.json b/ng-sample/package.json index 6f7b01e85..8bf8561bb 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,14 +23,14 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "~4.0.0-beta.2", - "@angular/compiler": "~4.0.0-beta.2", - "@angular/core": "~4.0.0-beta.2", - "@angular/forms": "~4.0.0-beta.2", - "@angular/http": "~4.0.0-beta.2", - "@angular/platform-browser": "~4.0.0-beta.2", - "@angular/platform-browser-dynamic": "~4.0.0-beta.2", - "@angular/router": "~4.0.0-beta.2", + "@angular/common": "4.0.0-beta.3", + "@angular/compiler": "4.0.0-beta.3", + "@angular/core": "4.0.0-beta.3", + "@angular/forms": "4.0.0-beta.3", + "@angular/http": "4.0.0-beta.3", + "@angular/platform-browser": "4.0.0-beta.3", + "@angular/platform-browser-dynamic": "4.0.0-beta.3", + "@angular/router": "4.0.0-beta.3", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" From a9795ddbd74ff9061e6d8fb37ac64dceeded6843 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Thu, 16 Feb 2017 10:30:38 +0200 Subject: [PATCH 05/39] fix(list-view-comp): IterableDiffer is now parameterized on --- nativescript-angular/directives/list-view-comp.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nativescript-angular/directives/list-view-comp.ts b/nativescript-angular/directives/list-view-comp.ts index e3642c000..a865c0072 100644 --- a/nativescript-angular/directives/list-view-comp.ts +++ b/nativescript-angular/directives/list-view-comp.ts @@ -62,7 +62,7 @@ export class ListViewComponent implements DoCheck, OnDestroy, AfterContentInit { private listView: ListView; private _items: any; - private _differ: IterableDiffer; + private _differ: IterableDiffer; private _templateMap: Map; @ViewChild("loader", { read: ViewContainerRef }) loader: ViewContainerRef; From 3c7fc277fa8def6c3b57109ec0d0a5936d00fed1 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Thu, 16 Feb 2017 11:44:47 +0200 Subject: [PATCH 06/39] revert(page-router-outlet): stop detaching when navigating away from page --- nativescript-angular/common/detached-loader.ts | 2 +- nativescript-angular/router/page-router-outlet.ts | 14 +------------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/nativescript-angular/common/detached-loader.ts b/nativescript-angular/common/detached-loader.ts index 0fd458980..d4ae6a73f 100644 --- a/nativescript-angular/common/detached-loader.ts +++ b/nativescript-angular/common/detached-loader.ts @@ -41,7 +41,7 @@ export class DetachedLoader { // tslint:disable-line:component-class-suffix } public detectChanges() { - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } // TODO: change this API -- async promises not needed here anymore. diff --git a/nativescript-angular/router/page-router-outlet.ts b/nativescript-angular/router/page-router-outlet.ts index 6027e8ab6..b4b9a2797 100644 --- a/nativescript-angular/router/page-router-outlet.ts +++ b/nativescript-angular/router/page-router-outlet.ts @@ -1,7 +1,6 @@ import { Attribute, ComponentFactory, ComponentRef, Directive, - ReflectiveInjector, ResolvedReflectiveProvider, - ViewRef, ViewContainerRef, + ReflectiveInjector, ResolvedReflectiveProvider, ViewContainerRef, Inject, ComponentFactoryResolver, Injector } from "@angular/core"; import { isPresent } from "../lang-facade"; @@ -62,7 +61,6 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix private viewUtil: ViewUtil; private refCache: RefCache = new RefCache(); private isInitialPage: boolean = true; - private previousPagesViews: Array = new Array(); private detachedLoaderFactory: ComponentFactory; private currentActivatedComp: ComponentRef; @@ -154,16 +152,8 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix this.currentActivatedRoute = activatedRoute; if (this.locationStrategy._isPageNavigatingBack()) { - if (this.previousPagesViews.length) { - this.containerRef.insert(this.previousPagesViews.pop()); - } - this.activateOnGoBack(activatedRoute, outletMap); } else { - if (this.containerRef.length) { - this.previousPagesViews.push(this.containerRef.detach()); - } - this.activateOnGoForward(activatedRoute, providers, outletMap, resolver, injector); } } @@ -206,11 +196,9 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix [...providers, ...pageResolvedProvider], injector); const loaderRef = this.containerRef.createComponent( this.detachedLoaderFactory, this.containerRef.length, childInjector, []); - loaderRef.changeDetectorRef.detectChanges(); this.currentActivatedComp = loaderRef.instance.loadWithFactory(factory); - this.currentActivatedComp.changeDetectorRef.detectChanges(); this.loadComponentInPage(page, this.currentActivatedComp); From bcfda03bf3783592a9d4bc51ccb4d0ae13504e89 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Thu, 16 Feb 2017 17:23:28 +0200 Subject: [PATCH 07/39] chore(ng): update to Angular 4.0.0-beta.4 --- nativescript-angular/package.json | 18 +++++++++--------- ng-sample/package.json | 16 ++++++++-------- tests/package.json | 14 +++++++------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index f2ec06988..ab9a5010a 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -25,14 +25,14 @@ }, "dependencies": { "nativescript-intl": "~0.0.8", - "@angular/core": "4.0.0-beta.3", - "@angular/common": "4.0.0-beta.3", - "@angular/compiler": "4.0.0-beta.3", - "@angular/http": "4.0.0-beta.3", - "@angular/platform-browser": "4.0.0-beta.3", - "@angular/platform-browser-dynamic": "4.0.0-beta.3", - "@angular/forms": "4.0.0-beta.3", - "@angular/router": "4.0.0-beta.3", + "@angular/core": "4.0.0-beta.4", + "@angular/common": "4.0.0-beta.4", + "@angular/compiler": "4.0.0-beta.4", + "@angular/http": "4.0.0-beta.4", + "@angular/platform-browser": "4.0.0-beta.4", + "@angular/platform-browser-dynamic": "4.0.0-beta.4", + "@angular/forms": "4.0.0-beta.4", + "@angular/router": "4.0.0-beta.4", "rxjs": "^5.0.1", "reflect-metadata": "~0.1.8", "punycode": "1.3.2", @@ -40,7 +40,7 @@ "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "~4.0.0-beta.3", + "@angular/compiler-cli": "4.0.0-beta.4", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", diff --git a/ng-sample/package.json b/ng-sample/package.json index 8bf8561bb..b28fa7ae0 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,14 +23,14 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "4.0.0-beta.3", - "@angular/compiler": "4.0.0-beta.3", - "@angular/core": "4.0.0-beta.3", - "@angular/forms": "4.0.0-beta.3", - "@angular/http": "4.0.0-beta.3", - "@angular/platform-browser": "4.0.0-beta.3", - "@angular/platform-browser-dynamic": "4.0.0-beta.3", - "@angular/router": "4.0.0-beta.3", + "@angular/common": "4.0.0-beta.4", + "@angular/compiler": "4.0.0-beta.4", + "@angular/core": "4.0.0-beta.4", + "@angular/forms": "4.0.0-beta.4", + "@angular/http": "4.0.0-beta.4", + "@angular/platform-browser": "4.0.0-beta.4", + "@angular/platform-browser-dynamic": "4.0.0-beta.4", + "@angular/router": "4.0.0-beta.4", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" diff --git a/tests/package.json b/tests/package.json index 7e03c16bc..fbaa01709 100644 --- a/tests/package.json +++ b/tests/package.json @@ -26,13 +26,13 @@ ], "homepage": "http://nativescript.org", "dependencies": { - "@angular/common": "~4.0.0-beta.1", - "@angular/compiler": "~4.0.0-beta.1", - "@angular/core": "~4.0.0-beta.1", - "@angular/http": "~4.0.0-beta.1", - "@angular/platform-browser": "~4.0.0-beta.1", - "@angular/platform-browser-dynamic": "~4.0.0-beta.1", - "@angular/router": "~4.0.0-beta.1", + "@angular/common": "4.0.0-beta.4", + "@angular/compiler": "4.0.0-beta.4", + "@angular/core": "4.0.0-beta.4", + "@angular/http": "4.0.0-beta.4", + "@angular/platform-browser": "4.0.0-beta.4", + "@angular/platform-browser-dynamic": "4.0.0-beta.4", + "@angular/router": "4.0.0-beta.4", "nativescript-angular": "file:../nativescript-angular", "nativescript-unit-test-runner": "^0.3.4", "rxjs": "~5.0.1", From 1aee2827567586a716a18f70a8654541d6bd6901 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Thu, 16 Feb 2017 17:24:00 +0200 Subject: [PATCH 08/39] fix(platform): import InjectionToken and ViewEncapsulation instead of OpaqueToken COMPILER_OPTIONS is no longer of type OpaqueToken. It is now an InjectionToken parameterized with object with property of type ViewEncapsulation. Introduced by: https://github.com/mhevery/angular/blame/e8778e59231f1a0f37f0ea847a6256398386fa41/tools/public_api_guard/core/index.d.ts#L224-L229 --- nativescript-angular/platform.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/nativescript-angular/platform.ts b/nativescript-angular/platform.ts index 42cfd3984..3291e4519 100644 --- a/nativescript-angular/platform.ts +++ b/nativescript-angular/platform.ts @@ -16,15 +16,15 @@ import { import { COMPILER_OPTIONS, PlatformRef, - OpaqueToken, + InjectionToken, + ViewEncapsulation, createPlatformFactory } from "@angular/core"; -// Work around a TS bug requiring an import of OpaqueToken without using it +// Work around a TS bug requiring an imports of InjectionToken and ViewEncapsulation without using them if ((global).___TS_UNUSED) { - (() => { - return OpaqueToken; - })(); + (() => InjectionToken)(); + (() => ViewEncapsulation)(); } // Register DOM adapter, if possible. Dynamic platform only! From 0ed1bbc21959955e42662d0727be92a26505e597 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 20 Feb 2017 09:47:08 +0200 Subject: [PATCH 09/39] chore(ng): update to Angular 4.0.0-beta.7 --- nativescript-angular/package.json | 18 +++++++++--------- nativescript-angular/tsconfig.json | 12 ++++++++++-- ng-sample/package.json | 16 ++++++++-------- tests/package.json | 14 +++++++------- 4 files changed, 34 insertions(+), 26 deletions(-) diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index ab9a5010a..645deb99e 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -25,14 +25,14 @@ }, "dependencies": { "nativescript-intl": "~0.0.8", - "@angular/core": "4.0.0-beta.4", - "@angular/common": "4.0.0-beta.4", - "@angular/compiler": "4.0.0-beta.4", - "@angular/http": "4.0.0-beta.4", - "@angular/platform-browser": "4.0.0-beta.4", - "@angular/platform-browser-dynamic": "4.0.0-beta.4", - "@angular/forms": "4.0.0-beta.4", - "@angular/router": "4.0.0-beta.4", + "@angular/core": "4.0.0-beta.7", + "@angular/common": "4.0.0-beta.7", + "@angular/compiler": "4.0.0-beta.7", + "@angular/http": "4.0.0-beta.7", + "@angular/platform-browser": "4.0.0-beta.7", + "@angular/platform-browser-dynamic": "4.0.0-beta.7", + "@angular/forms": "4.0.0-beta.7", + "@angular/router": "4.0.0-beta.7", "rxjs": "^5.0.1", "reflect-metadata": "~0.1.8", "punycode": "1.3.2", @@ -40,7 +40,7 @@ "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "4.0.0-beta.4", + "@angular/compiler-cli": "4.0.0-beta.7", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", diff --git a/nativescript-angular/tsconfig.json b/nativescript-angular/tsconfig.json index fc85cc25c..60cf45c78 100644 --- a/nativescript-angular/tsconfig.json +++ b/nativescript-angular/tsconfig.json @@ -16,8 +16,16 @@ "noImplicitAny": false, "lib": [ "dom", - "es6" - ] + "es6", + "es2015.iterable" + ], + "baseUrl": ".", + "paths": { + "*": [ + "./node_modules/tns-core-modules/*", + "./node_modules/*" + ] + } }, "angularCompilerOptions": { "genDir": ".", diff --git a/ng-sample/package.json b/ng-sample/package.json index b28fa7ae0..4159bde86 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,14 +23,14 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "4.0.0-beta.4", - "@angular/compiler": "4.0.0-beta.4", - "@angular/core": "4.0.0-beta.4", - "@angular/forms": "4.0.0-beta.4", - "@angular/http": "4.0.0-beta.4", - "@angular/platform-browser": "4.0.0-beta.4", - "@angular/platform-browser-dynamic": "4.0.0-beta.4", - "@angular/router": "4.0.0-beta.4", + "@angular/common": "4.0.0-beta.7", + "@angular/compiler": "4.0.0-beta.7", + "@angular/core": "4.0.0-beta.7", + "@angular/forms": "4.0.0-beta.7", + "@angular/http": "4.0.0-beta.7", + "@angular/platform-browser": "4.0.0-beta.7", + "@angular/platform-browser-dynamic": "4.0.0-beta.7", + "@angular/router": "4.0.0-beta.7", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" diff --git a/tests/package.json b/tests/package.json index fbaa01709..eac392b2d 100644 --- a/tests/package.json +++ b/tests/package.json @@ -26,13 +26,13 @@ ], "homepage": "http://nativescript.org", "dependencies": { - "@angular/common": "4.0.0-beta.4", - "@angular/compiler": "4.0.0-beta.4", - "@angular/core": "4.0.0-beta.4", - "@angular/http": "4.0.0-beta.4", - "@angular/platform-browser": "4.0.0-beta.4", - "@angular/platform-browser-dynamic": "4.0.0-beta.4", - "@angular/router": "4.0.0-beta.4", + "@angular/common": "4.0.0-beta.7", + "@angular/compiler": "4.0.0-beta.7", + "@angular/core": "4.0.0-beta.7", + "@angular/http": "4.0.0-beta.7", + "@angular/platform-browser": "4.0.0-beta.7", + "@angular/platform-browser-dynamic": "4.0.0-beta.7", + "@angular/router": "4.0.0-beta.7", "nativescript-angular": "file:../nativescript-angular", "nativescript-unit-test-runner": "^0.3.4", "rxjs": "~5.0.1", From 911a663cc61261ba8f6d633533fba93f5d9f2f5f Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 21 Feb 2017 10:56:56 +0200 Subject: [PATCH 10/39] chore(ng): update to Angular 4.0.0-beta.8 --- nativescript-angular/package.json | 18 +++++++++--------- ng-sample/package.json | 16 ++++++++-------- tests/package.json | 14 +++++++------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 645deb99e..c5325d371 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -25,14 +25,14 @@ }, "dependencies": { "nativescript-intl": "~0.0.8", - "@angular/core": "4.0.0-beta.7", - "@angular/common": "4.0.0-beta.7", - "@angular/compiler": "4.0.0-beta.7", - "@angular/http": "4.0.0-beta.7", - "@angular/platform-browser": "4.0.0-beta.7", - "@angular/platform-browser-dynamic": "4.0.0-beta.7", - "@angular/forms": "4.0.0-beta.7", - "@angular/router": "4.0.0-beta.7", + "@angular/core": "4.0.0-beta.8", + "@angular/common": "4.0.0-beta.8", + "@angular/compiler": "4.0.0-beta.8", + "@angular/http": "4.0.0-beta.8", + "@angular/platform-browser": "4.0.0-beta.8", + "@angular/platform-browser-dynamic": "4.0.0-beta.8", + "@angular/forms": "4.0.0-beta.8", + "@angular/router": "4.0.0-beta.8", "rxjs": "^5.0.1", "reflect-metadata": "~0.1.8", "punycode": "1.3.2", @@ -40,7 +40,7 @@ "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "4.0.0-beta.7", + "@angular/compiler-cli": "4.0.0-beta.8", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", diff --git a/ng-sample/package.json b/ng-sample/package.json index 4159bde86..54c02b3a0 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,14 +23,14 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "4.0.0-beta.7", - "@angular/compiler": "4.0.0-beta.7", - "@angular/core": "4.0.0-beta.7", - "@angular/forms": "4.0.0-beta.7", - "@angular/http": "4.0.0-beta.7", - "@angular/platform-browser": "4.0.0-beta.7", - "@angular/platform-browser-dynamic": "4.0.0-beta.7", - "@angular/router": "4.0.0-beta.7", + "@angular/common": "4.0.0-beta.8", + "@angular/compiler": "4.0.0-beta.8", + "@angular/core": "4.0.0-beta.8", + "@angular/forms": "4.0.0-beta.8", + "@angular/http": "4.0.0-beta.8", + "@angular/platform-browser": "4.0.0-beta.8", + "@angular/platform-browser-dynamic": "4.0.0-beta.8", + "@angular/router": "4.0.0-beta.8", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" diff --git a/tests/package.json b/tests/package.json index eac392b2d..f195a77b0 100644 --- a/tests/package.json +++ b/tests/package.json @@ -26,13 +26,13 @@ ], "homepage": "http://nativescript.org", "dependencies": { - "@angular/common": "4.0.0-beta.7", - "@angular/compiler": "4.0.0-beta.7", - "@angular/core": "4.0.0-beta.7", - "@angular/http": "4.0.0-beta.7", - "@angular/platform-browser": "4.0.0-beta.7", - "@angular/platform-browser-dynamic": "4.0.0-beta.7", - "@angular/router": "4.0.0-beta.7", + "@angular/common": "4.0.0-beta.8", + "@angular/compiler": "4.0.0-beta.8", + "@angular/core": "4.0.0-beta.8", + "@angular/http": "4.0.0-beta.8", + "@angular/platform-browser": "4.0.0-beta.8", + "@angular/platform-browser-dynamic": "4.0.0-beta.8", + "@angular/router": "4.0.0-beta.8", "nativescript-angular": "file:../nativescript-angular", "nativescript-unit-test-runner": "^0.3.4", "rxjs": "~5.0.1", From 3031d2fc65566461ef851aac76aa1f139b9a7ecb Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 21 Feb 2017 11:01:05 +0200 Subject: [PATCH 11/39] fix(dom_adapter): update setTitle and getGlobalEventTarget to be compliant with Angular API Introduced by: https://github.com/angular/angular/commit/b4d444a0a7ee2c2b31b691d03b93368d1edd1572 --- nativescript-angular/dom-adapter.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/nativescript-angular/dom-adapter.ts b/nativescript-angular/dom-adapter.ts index 1427c8518..282620cc5 100644 --- a/nativescript-angular/dom-adapter.ts +++ b/nativescript-angular/dom-adapter.ts @@ -145,7 +145,7 @@ export class NativeScriptDomAdapter implements DomAdapter { defaultDoc(): HTMLDocument { throw new Error("Not implemented!") } getBoundingClientRect(_el: any /** TODO #9100 */): any /** TODO #9100 */ { throw new Error("Not implemented!") } getTitle(): string { throw new Error("Not implemented!") } - setTitle(_newTitle: string): any /** TODO #9100 */ { throw new Error("Not implemented!") } + setTitle(_doc: Document, _newTitle: string): any /** TODO #9100 */ { throw new Error("Not implemented!") } elementMatches(_n: any /** TODO #9100 */, _selector: string): boolean { throw new Error("Not implemented!") } isTemplateElement(_el: any): boolean { throw new Error("Not implemented!") } isTextNode(_node: any /** TODO #9100 */): boolean { throw new Error("Not implemented!") } @@ -161,7 +161,7 @@ export class NativeScriptDomAdapter implements DomAdapter { /** TODO #9100 */ { throw new Error("Not implemented!") } supportsDOMEvents(): boolean { throw new Error("Not implemented!") } supportsNativeShadowDOM(): boolean { throw new Error("Not implemented!") } - getGlobalEventTarget(_target: string): any { throw new Error("Not implemented!") } + getGlobalEventTarget(_doc: Document, _target: string): any { throw new Error("Not implemented!") } getHistory(): History { throw new Error("Not implemented!") } getLocation(): Location { throw new Error("Not implemented!") } getBaseHref(): string { throw new Error("Not implemented!") } From 2e45d76b3a60c5a952416d25f6fd637639be7a8d Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 21 Feb 2017 11:03:06 +0200 Subject: [PATCH 12/39] fix(animations): add onDestroy method to NativeScriptAnimationPlayer Needed in order to implement correctly the AnimationPlayer interface. Introduced by: https://github.com/angular/angular/pull/14351/commits/4577b7c2ad9b4655e621628cd8842bc624ae1ccf --- nativescript-angular/animation-player.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/nativescript-angular/animation-player.ts b/nativescript-angular/animation-player.ts index c03805c7e..6238d50ec 100644 --- a/nativescript-angular/animation-player.ts +++ b/nativescript-angular/animation-player.ts @@ -87,6 +87,7 @@ export class NativeScriptAnimationPlayer implements AnimationPlayer { onStart(fn: Function): void { this._startSubscriptions.push(fn); } onDone(fn: Function): void { this._doneSubscriptions.push(fn); } + onDestroy(fn: Function): void { this._doneSubscriptions.push(fn); } private _onStart() { if (!this._started) { From 83e629b2873af77f50c2487cb92dba206f46b5b9 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 21 Feb 2017 11:08:23 +0200 Subject: [PATCH 13/39] fix(platform): import MissingTranslationStrategy COMPILER_OPTIONS now has a property of type MissingTranslationStrategy, which needs to be imported. Introduced by: https://github.com/angular/angular/blame/master/tools/public_api_guard/core/index.d.ts#L257 --- nativescript-angular/platform.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/nativescript-angular/platform.ts b/nativescript-angular/platform.ts index 3291e4519..1c418e794 100644 --- a/nativescript-angular/platform.ts +++ b/nativescript-angular/platform.ts @@ -18,13 +18,17 @@ import { PlatformRef, InjectionToken, ViewEncapsulation, - createPlatformFactory + createPlatformFactory, + MissingTranslationStrategy } from "@angular/core"; -// Work around a TS bug requiring an imports of InjectionToken and ViewEncapsulation without using them +// Work around a TS bug requiring an imports of +// InjectionToken, ViewEncapsulation and MissingTranslationStrategy +// without using them if ((global).___TS_UNUSED) { (() => InjectionToken)(); (() => ViewEncapsulation)(); + (() => MissingTranslationStrategy)(); } // Register DOM adapter, if possible. Dynamic platform only! From 0d5a6e3efa2be40a45dc10bf71b0acfc016e6490 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 21 Feb 2017 11:19:16 +0200 Subject: [PATCH 14/39] chore(deps): update TypeScript to 2.2 and target internal-preview of tns-core-modules --- tests/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/package.json b/tests/package.json index f195a77b0..b6eac4fbd 100644 --- a/tests/package.json +++ b/tests/package.json @@ -33,7 +33,7 @@ "@angular/platform-browser": "4.0.0-beta.8", "@angular/platform-browser-dynamic": "4.0.0-beta.8", "@angular/router": "4.0.0-beta.8", - "nativescript-angular": "file:../nativescript-angular", + "nativescript-angular": "internal-preview", "nativescript-unit-test-runner": "^0.3.4", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" From 6dac9dd079bf5bb2ad8a1a0418d55d6e36631a2c Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 28 Feb 2017 15:00:32 +0200 Subject: [PATCH 15/39] chore(ng): update to Angular 4.0.0-rc.1 --- nativescript-angular/package.json | 18 +++++++++--------- ng-sample/package.json | 16 ++++++++-------- tests/package.json | 14 +++++++------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index c5325d371..3470d16e7 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -25,14 +25,14 @@ }, "dependencies": { "nativescript-intl": "~0.0.8", - "@angular/core": "4.0.0-beta.8", - "@angular/common": "4.0.0-beta.8", - "@angular/compiler": "4.0.0-beta.8", - "@angular/http": "4.0.0-beta.8", - "@angular/platform-browser": "4.0.0-beta.8", - "@angular/platform-browser-dynamic": "4.0.0-beta.8", - "@angular/forms": "4.0.0-beta.8", - "@angular/router": "4.0.0-beta.8", + "@angular/core": "4.0.0-rc.1", + "@angular/common": "4.0.0-rc.1", + "@angular/compiler": "4.0.0-rc.1", + "@angular/http": "4.0.0-rc.1", + "@angular/platform-browser": "4.0.0-rc.1", + "@angular/platform-browser-dynamic": "4.0.0-rc.1", + "@angular/forms": "4.0.0-rc.1", + "@angular/router": "4.0.0-rc.1", "rxjs": "^5.0.1", "reflect-metadata": "~0.1.8", "punycode": "1.3.2", @@ -40,7 +40,7 @@ "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "4.0.0-beta.8", + "@angular/compiler-cli": "4.0.0-rc.1", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", diff --git a/ng-sample/package.json b/ng-sample/package.json index 54c02b3a0..498ca11d4 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,14 +23,14 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "4.0.0-beta.8", - "@angular/compiler": "4.0.0-beta.8", - "@angular/core": "4.0.0-beta.8", - "@angular/forms": "4.0.0-beta.8", - "@angular/http": "4.0.0-beta.8", - "@angular/platform-browser": "4.0.0-beta.8", - "@angular/platform-browser-dynamic": "4.0.0-beta.8", - "@angular/router": "4.0.0-beta.8", + "@angular/common": "4.0.0-rc.1", + "@angular/compiler": "4.0.0-rc.1", + "@angular/core": "4.0.0-rc.1", + "@angular/forms": "4.0.0-rc.1", + "@angular/http": "4.0.0-rc.1", + "@angular/platform-browser": "4.0.0-rc.1", + "@angular/platform-browser-dynamic": "4.0.0-rc.1", + "@angular/router": "4.0.0-rc.1", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" diff --git a/tests/package.json b/tests/package.json index b6eac4fbd..90874b0af 100644 --- a/tests/package.json +++ b/tests/package.json @@ -26,13 +26,13 @@ ], "homepage": "http://nativescript.org", "dependencies": { - "@angular/common": "4.0.0-beta.8", - "@angular/compiler": "4.0.0-beta.8", - "@angular/core": "4.0.0-beta.8", - "@angular/http": "4.0.0-beta.8", - "@angular/platform-browser": "4.0.0-beta.8", - "@angular/platform-browser-dynamic": "4.0.0-beta.8", - "@angular/router": "4.0.0-beta.8", + "@angular/common": "4.0.0-rc.1", + "@angular/compiler": "4.0.0-rc.1", + "@angular/core": "4.0.0-rc.1", + "@angular/http": "4.0.0-rc.1", + "@angular/platform-browser": "4.0.0-rc.1", + "@angular/platform-browser-dynamic": "4.0.0-rc.1", + "@angular/router": "4.0.0-rc.1", "nativescript-angular": "internal-preview", "nativescript-unit-test-runner": "^0.3.4", "rxjs": "~5.0.1", From 0275a72a02bf99ac6735a0d88230dace73d98920 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 28 Feb 2017 15:02:52 +0200 Subject: [PATCH 16/39] =?UTF-8?q?refactor:=20rewrite=20private=20import=20?= =?UTF-8?q?using=20the=20=C9=B5=20prefix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nativescript-angular/animation-driver.ts | 9 ++--- nativescript-angular/animation-player.ts | 5 +-- nativescript-angular/dom-adapter.ts | 8 ++-- nativescript-angular/private_import_core.ts | 37 ------------------- .../private_import_platform-browser.ts | 14 ------- nativescript-angular/renderer.ts | 8 ++-- 6 files changed, 14 insertions(+), 67 deletions(-) delete mode 100644 nativescript-angular/private_import_core.ts delete mode 100644 nativescript-angular/private_import_platform-browser.ts diff --git a/nativescript-angular/animation-driver.ts b/nativescript-angular/animation-driver.ts index 3ad2be803..7010fe087 100644 --- a/nativescript-angular/animation-driver.ts +++ b/nativescript-angular/animation-driver.ts @@ -1,11 +1,10 @@ -import { AnimationPlayer } from "@angular/core"; -import { AnimationStyles, AnimationKeyframe } from "./private_import_core"; +import { AnimationPlayer, ɵAnimationStyles, ɵAnimationKeyframe } from "@angular/core"; import { NativeScriptAnimationPlayer } from "./animation-player"; import { View } from "tns-core-modules/ui/core/view"; export abstract class AnimationDriver { abstract animate( - element: any, startingStyles: AnimationStyles, keyframes: AnimationKeyframe[], + element: any, startingStyles: ɵAnimationStyles, keyframes: ɵAnimationKeyframe[], duration: number, delay: number, easing: string): AnimationPlayer; } @@ -18,8 +17,8 @@ export class NativeScriptAnimationDriver implements AnimationDriver { animate( element: any, - _startingStyles: AnimationStyles, - keyframes: AnimationKeyframe[], + _startingStyles: ɵAnimationStyles, + keyframes: ɵAnimationKeyframe[], duration: number, delay: number, easing: string diff --git a/nativescript-angular/animation-player.ts b/nativescript-angular/animation-player.ts index 6238d50ec..e3d51c954 100644 --- a/nativescript-angular/animation-player.ts +++ b/nativescript-angular/animation-player.ts @@ -1,5 +1,4 @@ -import { AnimationPlayer } from "@angular/core"; -import { AnimationKeyframe } from "./private_import_core"; +import { AnimationPlayer, ɵAnimationKeyframe } from "@angular/core"; import { KeyframeAnimation, KeyframeAnimationInfo, @@ -24,7 +23,7 @@ export class NativeScriptAnimationPlayer implements AnimationPlayer { constructor( element: Node, - keyframes: AnimationKeyframe[], + keyframes: ɵAnimationKeyframe[], duration: number, delay: number, easing: string diff --git a/nativescript-angular/dom-adapter.ts b/nativescript-angular/dom-adapter.ts index 282620cc5..e558c7832 100644 --- a/nativescript-angular/dom-adapter.ts +++ b/nativescript-angular/dom-adapter.ts @@ -1,17 +1,17 @@ /* tslint:disable */ import { Type } from "@angular/core"; -import { DomAdapter } from "./private_import_platform-browser"; +import { ɵDomAdapter } from "@angular/platform-browser"; import { rendererLog } from "./trace"; import { print } from "./lang-facade"; -export class NativeScriptDomAdapter implements DomAdapter { +export class NativeScriptDomAdapter implements ɵDomAdapter { static makeCurrent() { // Don't register when bundling (likely AoT setup). if (!global.TNS_WEBPACK) { try { - const privateAPI = global.require("@angular/platform-browser").__platform_browser_private__; - const setRootDomAdapter = privateAPI.setRootDomAdapter; + const privateAPI = global.require("@angular/platform-browser"); + const setRootDomAdapter = privateAPI.ɵsetRootDomAdapter; rendererLog("Setting root DOM adapter..."); setRootDomAdapter(new NativeScriptDomAdapter()); diff --git a/nativescript-angular/private_import_core.ts b/nativescript-angular/private_import_core.ts deleted file mode 100644 index 58e80a668..000000000 --- a/nativescript-angular/private_import_core.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { __core_private__ as r } from "@angular/core"; - -export type RenderDebugInfo = typeof r._RenderDebugInfo; -export let RenderDebugInfo: typeof r.RenderDebugInfo = r.RenderDebugInfo; - -export let ReflectionCapabilities: typeof r.ReflectionCapabilities = r.ReflectionCapabilities; - -export type DebugDomRootRenderer = typeof r._DebugDomRootRenderer; -export let DebugDomRootRenderer: typeof r.DebugDomRootRenderer = r.DebugDomRootRenderer; -export let reflector: typeof r.reflector = r.reflector; - -export type NoOpAnimationPlayer = typeof r._NoOpAnimationPlayer; -export let NoOpAnimationPlayer: typeof r.NoOpAnimationPlayer = r.NoOpAnimationPlayer; -export type AnimationPlayer = typeof r._AnimationPlayer; -export let AnimationPlayer: typeof r.AnimationPlayer = r.AnimationPlayer; -export type AnimationSequencePlayer = typeof r._AnimationSequencePlayer; -export let AnimationSequencePlayer: typeof r.AnimationSequencePlayer = r.AnimationSequencePlayer; -export type AnimationGroupPlayer = typeof r._AnimationGroupPlayer; -export let AnimationGroupPlayer: typeof r.AnimationGroupPlayer = r.AnimationGroupPlayer; -export type AnimationKeyframe = typeof r._AnimationKeyframe; -export let AnimationKeyframe: typeof r.AnimationKeyframe = r.AnimationKeyframe; -export type AnimationStyles = typeof r._AnimationStyles; -export let AnimationStyles: typeof r.AnimationStyles = r.AnimationStyles; -export let prepareFinalAnimationStyles: typeof r.prepareFinalAnimationStyles = - r.prepareFinalAnimationStyles; -export let balanceAnimationKeyframes: typeof r.balanceAnimationKeyframes = - r.balanceAnimationKeyframes; -export let clearStyles: typeof r.clearStyles = r.clearStyles; -export let collectAndResolveStyles: typeof r.collectAndResolveStyles = r.collectAndResolveStyles; diff --git a/nativescript-angular/private_import_platform-browser.ts b/nativescript-angular/private_import_platform-browser.ts deleted file mode 100644 index a9ab67f25..000000000 --- a/nativescript-angular/private_import_platform-browser.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { __platform_browser_private__ as _ } from "@angular/platform-browser"; - -export type DomAdapter = typeof _._DomAdapter; -export let DomAdapter: typeof _.DomAdapter = _.DomAdapter; -export let setRootDomAdapter: typeof _.setRootDomAdapter = _.setRootDomAdapter; -export let getDOM: typeof _.getDOM = _.getDOM; diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index eef9fb3d5..bc06d5646 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -1,8 +1,8 @@ import { Inject, Injectable, Optional, NgZone, - Renderer, RootRenderer, RenderComponentType, AnimationPlayer + Renderer, RootRenderer, RenderComponentType, AnimationPlayer, + ɵAnimationStyles, ɵAnimationKeyframe, } from "@angular/core"; -import { AnimationStyles, AnimationKeyframe } from "./private_import_core"; import { APP_ROOT_VIEW, DEVICE } from "./platform-providers"; import { isBlank } from "./lang-facade"; import { View } from "tns-core-modules/ui/core/view"; @@ -245,8 +245,8 @@ export class NativeScriptRenderer extends Renderer { public animate( element: any, - startingStyles: AnimationStyles, - keyframes: AnimationKeyframe[], + startingStyles: ɵAnimationStyles, + keyframes: ɵAnimationKeyframe[], duration: number, delay: number, easing: string From c2c56b34181ba6bb56c3339948f62818b5560220 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 6 Mar 2017 19:41:06 +0200 Subject: [PATCH 17/39] feat(renderer): upgrade to Angular-rc.1 - Use RendererFactoryV2 instead of RootRenderer (NativeScriptRendererFactory) - Use RendererV2 for NativeScriptRenderer --- nativescript-angular/nativescript.module.ts | 14 +- nativescript-angular/package.json | 2 +- nativescript-angular/renderer.ts | 263 +++++++++----------- nativescript-angular/tsconfig.json | 8 +- nativescript-angular/view-util.ts | 67 ++--- tests/app/main.ts | 6 +- tests/app/single-page-main.component.ts | 8 + tests/app/tests/style-properties.ts | 28 +-- tests/references.d.ts | 1 - tests/tsconfig.json | 7 +- 10 files changed, 179 insertions(+), 225 deletions(-) delete mode 100644 tests/references.d.ts diff --git a/nativescript-angular/nativescript.module.ts b/nativescript-angular/nativescript.module.ts index 6c84cafaa..b2c245e1f 100644 --- a/nativescript-angular/nativescript.module.ts +++ b/nativescript-angular/nativescript.module.ts @@ -6,14 +6,14 @@ import "./polyfills/array"; import "./polyfills/console"; import { CommonModule } from "@angular/common"; -import { NativeScriptRootRenderer, NativeScriptRenderer } from "./renderer"; +import { NativeScriptRendererFactory } from "./renderer"; import { DetachedLoader } from "./common/detached-loader"; import { ModalDialogHost, ModalDialogService } from "./directives/dialogs"; import { ApplicationModule, ErrorHandler, - Renderer, - RootRenderer, + // RendererV2, + RendererFactoryV2, NgModule, NO_ERRORS_SCHEMA, } from "@angular/core"; import { @@ -39,10 +39,10 @@ export function errorHandlerFactory() { defaultPageProvider, defaultDeviceProvider, - NativeScriptRootRenderer, - { provide: RootRenderer, useClass: NativeScriptRootRenderer }, - NativeScriptRenderer, - { provide: Renderer, useClass: NativeScriptRenderer }, + NativeScriptRendererFactory, + { provide: RendererFactoryV2, useClass: NativeScriptRendererFactory }, + // NativeScriptRenderer, + // { provide: RendererV2, useClass: NativeScriptRenderer }, ModalDialogService ], entryComponents: [ diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 3470d16e7..2441499d2 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -16,8 +16,8 @@ "scripts": { "tslint": "tslint --project tsconfig.json --config tslint.json", "postinstall": "node postinstall.js", - "ngc": "ngc -p tsconfig.json", "tsc": "tsc -p tsconfig.json", + "ngc": "ngc -p tsconfig.json", "prepublish": "npm run tsc && npm run ngc" }, "bin": { diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index bc06d5646..65394cf28 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -1,14 +1,18 @@ import { Inject, Injectable, Optional, NgZone, - Renderer, RootRenderer, RenderComponentType, AnimationPlayer, - ɵAnimationStyles, ɵAnimationKeyframe, + RendererV2, RendererFactoryV2, RendererTypeV2, + // ViewEncapsulation + // ɵAnimationStyles, ɵAnimationKeyframe, } from "@angular/core"; + +import { escapeRegexSymbols } from "tns-core-modules/utils/utils"; +import { Device } from "tns-core-modules/platform"; +import { View } from "ui/core/view"; +import { addCss } from "application"; +import { topmost } from "ui/frame"; + import { APP_ROOT_VIEW, DEVICE } from "./platform-providers"; import { isBlank } from "./lang-facade"; -import { View } from "tns-core-modules/ui/core/view"; -import { addCss } from "tns-core-modules/application"; -import { topmost } from "tns-core-modules/ui/frame"; -import { Page } from "tns-core-modules/ui/page"; import { ViewUtil } from "./view-util"; import { NgView } from "./element-registry"; import { rendererLog as traceLog } from "./trace"; @@ -16,105 +20,109 @@ import { escapeRegexSymbols } from "tns-core-modules/utils/utils"; import { Device } from "tns-core-modules/platform"; import { getRootPage } from "./platform-providers"; -import { NativeScriptAnimationDriver } from "./animation-driver"; - -// CONTENT_ATTR not exported from dom_renderer - we need it for styles application. +// CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application. export const COMPONENT_VARIABLE = "%COMP%"; export const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`; - @Injectable() -export class NativeScriptRootRenderer implements RootRenderer { - private _viewUtil: ViewUtil; - private _animationDriver: NativeScriptAnimationDriver; - - protected get animationDriver(): NativeScriptAnimationDriver { - if (!this._animationDriver) { - this._animationDriver = new NativeScriptAnimationDriver(); - } - return this._animationDriver; - } +export class NativeScriptRendererFactory implements RendererFactoryV2 { + private componentRenderers = new Map(); + private viewUtil: ViewUtil; + private defaultRenderer: NativeScriptRenderer; + private rootNgView: NgView; constructor( - @Optional() @Inject(APP_ROOT_VIEW) private _rootView: View, + @Optional() @Inject(APP_ROOT_VIEW) rootView: View, @Inject(DEVICE) device: Device, - private _zone: NgZone + zone: NgZone ) { - this._viewUtil = new ViewUtil(device); + this.viewUtil = new ViewUtil(device); + this.setRootNgView(rootView); + this.defaultRenderer = new NativeScriptRenderer(this.rootNgView, zone, this.viewUtil); } - private _registeredComponents = new Map(); - - public get rootView(): View { - if (!this._rootView) { - this._rootView = getRootPage() || topmost().currentPage; + private setRootNgView(rootView: any) { + if (!rootView) { + rootView = getRootPage() || topmost().currentPage; } - return this._rootView; - } - - public get page(): Page { - return this.rootView.page; + rootView.nodeName = "NONE"; + this.rootNgView = rootView; } - public get viewUtil(): ViewUtil { - return this._viewUtil; - } + createRenderer(element: any, type: RendererTypeV2): NativeScriptRenderer { + if (!element || !type) { + return this.defaultRenderer; + } - renderComponent(componentProto: RenderComponentType): Renderer { - let renderer = this._registeredComponents.get(componentProto.id); + let renderer: NativeScriptRenderer = this.componentRenderers.get(type.id); if (isBlank(renderer)) { - renderer = new NativeScriptRenderer(this, componentProto, - this.animationDriver, this._zone); - this._registeredComponents.set(componentProto.id, renderer); + renderer = this.defaultRenderer; + + let stylesLength = type.styles.length; + for (let i = 0; i < stylesLength; i++) { + console.log(type.styles[i]); + // this.hasComponentStyles = true; + let cssString = type.styles[i] + ""; + const realCSS = this.replaceNgAttribute(cssString, type.id); + addCss(realCSS); + } + this.componentRenderers.set(type.id, renderer); } - return renderer; + + return renderer; } -} -@Injectable() -export class NativeScriptRenderer extends Renderer { - private componentProtoId: string; - private hasComponentStyles: boolean; + private attrReplacer = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g"); + private attrSanitizer = /-/g; + - private get viewUtil(): ViewUtil { - return this.rootRenderer.viewUtil; + private replaceNgAttribute(input: string, componentId: string): string { + return input.replace(this.attrReplacer, + "_ng_content_" + componentId.replace(this.attrSanitizer, "_")); } +} - constructor( - private rootRenderer: NativeScriptRootRenderer, - private componentProto: RenderComponentType, - private animationDriver: NativeScriptAnimationDriver, - private zone: NgZone) { +export class NativeScriptRenderer extends RendererV2 { + data: {[key: string]: any} = Object.create(null); + constructor( + private rootView: NgView, + private zone: NgZone, + private viewUtil: ViewUtil + ) { super(); - let stylesLength = this.componentProto.styles.length; - this.componentProtoId = this.componentProto.id; - for (let i = 0; i < stylesLength; i++) { - this.hasComponentStyles = true; - let cssString = this.componentProto.styles[i] + ""; - const realCSS = this.replaceNgAttribute(cssString, this.componentProtoId); - addCss(realCSS); - } traceLog("NativeScriptRenderer created"); } - private attrReplacer = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g"); - private attrSanitizer = /-/g; + appendChild(parent: any, newChild: any): void { + traceLog(`NativeScriptRenderer.appendChild child: ${newChild} parent: ${parent}`); + this.viewUtil.insertChild(parent, newChild); + } - private replaceNgAttribute(input: string, componentId: string): string { - return input.replace(this.attrReplacer, - "_ng_content_" + componentId.replace(this.attrSanitizer, "_")); + + insertBefore(parent: any, newChild: any, refChild: any): void { + traceLog(`NativeScriptRenderer.insertBefore child: ${newChild} parent: ${parent}`); + if (parent) { + parent.insertBefore(newChild, refChild); + } } - renderComponent(componentProto: RenderComponentType): Renderer { - return this.rootRenderer.renderComponent(componentProto); + removeChild(parent: any, oldChild: NgView): void { + traceLog(`NativeScriptRenderer.removeChild child: ${oldChild} parent: ${parent}`); + this.viewUtil.removeChild(parent, oldChild); } selectRootElement(selector: string): NgView { traceLog("selectRootElement: " + selector); - const rootView = this.rootRenderer.rootView; - rootView.nodeName = "ROOT"; - return rootView; + return this.rootView; + } + + parentNode(node: NgView): NgView { + return node.templateParent; + } + + nextSibling(_node: NgView): void { + traceLog(`NativeScriptRenderer.nextSibling ${_node}`); } createViewRoot(hostElement: NgView): NgView { @@ -129,55 +137,48 @@ export class NativeScriptRenderer extends Renderer { }); } - attachViewAfter(anchorNode: NgView, viewRootNodes: NgView[]) { - traceLog("NativeScriptRenderer.attachViewAfter: " + anchorNode.nodeName + " " + anchorNode); - const parent = (anchorNode.parent || anchorNode.templateParent); - const insertPosition = this.viewUtil.getChildIndex(parent, anchorNode); + destroy() { + traceLog("NativeScriptRenderer.destroy"); + // Seems to be called on component dispose only (router outlet) + // TODO: handle this when we resolve routing and navigation. + } - viewRootNodes.forEach((node, index) => { - const childIndex = insertPosition + index + 1; - this.viewUtil.insertChild(parent, node, childIndex); - }); + createComment(_value: any) { + traceLog(`NativeScriptRenderer.createComment ${_value}`); } - detachView(viewRootNodes: NgView[]) { - traceLog("NativeScriptRenderer.detachView"); - for (let i = 0; i < viewRootNodes.length; i++) { - let node = viewRootNodes[i]; - this.viewUtil.removeChild(node.parent, node); - } + setAttribute(view: NgView, name: string, value: string) { + traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`); + return this.setProperty(view, name, value); } - public destroyView(_hostElement: NgView, _viewAllNodes: NgView[]) { - traceLog("NativeScriptRenderer.destroyView"); - // Seems to be called on component dispose only (router outlet) - // TODO: handle this when we resolve routing and navigation. + removeAttribute(_el: NgView, _name: string): void { + traceLog(`NativeScriptRenderer.removeAttribute ${_el}: ${_name}`); } - setElementProperty(renderElement: NgView, propertyName: string, propertyValue: any) { - traceLog("NativeScriptRenderer.setElementProperty " + renderElement + ": " + - propertyName + " = " + propertyValue); - this.viewUtil.setProperty(renderElement, propertyName, propertyValue); + setProperty(view: any, name: string, value: any) { + traceLog(`NativeScriptRenderer.setProperty ${view} : ${name} = ${value}`); + this.viewUtil.setProperty(view, name, value); } - setElementAttribute(renderElement: NgView, attributeName: string, attributeValue: string) { - traceLog("NativeScriptRenderer.setElementAttribute " + renderElement + ": " + - attributeName + " = " + attributeValue); - return this.setElementProperty(renderElement, attributeName, attributeValue); + addClass(view: NgView, name: string): void { + traceLog(`NativeScriptRenderer.addClass ${name}`); + this.viewUtil.addClass(view, name); } - setElementClass(renderElement: NgView, className: string, isAdd: boolean): void { - traceLog("NativeScriptRenderer.setElementClass " + className + " - " + isAdd); + removeClass(view: NgView, name: string): void { + traceLog(`NativeScriptRenderer.removeClass ${name}`); + this.viewUtil.removeClass(view, name); + } - if (isAdd) { - this.viewUtil.addClass(renderElement, className); - } else { - this.viewUtil.removeClass(renderElement, className); - } + setStyle(view: NgView, styleName: string, value: any, _hasVendorPrefix?: boolean, _hasImportant?: boolean): void { + traceLog(`NativeScriptRenderer.setStyle: ${styleName} = ${value}`); + this.viewUtil.setStyle(view, styleName, value); } - setElementStyle(renderElement: NgView, styleName: string, styleValue: string): void { - this.viewUtil.setStyleProperty(renderElement, styleName, styleValue); + removeStyle(view: NgView, styleName: string, _hasVendorPrefix?: boolean): void { + traceLog("NativeScriptRenderer.removeStyle: ${styleName}"); + this.viewUtil.removeStyle(view, styleName); } // Used only in debug mode to serialize property changes to comment nodes, @@ -195,34 +196,32 @@ export class NativeScriptRenderer extends Renderer { traceLog("NativeScriptRenderer.invokeElementMethod " + methodName + " " + args); } - setText(_renderNode: any, _text: string) { - traceLog("NativeScriptRenderer.setText"); + setValue(_renderNode: any, _value: string) { + traceLog("NativeScriptRenderer.setValue"); } - public createTemplateAnchor(parentElement: NgView): NgView { - traceLog("NativeScriptRenderer.createTemplateAnchor"); - return this.viewUtil.createTemplateAnchor(parentElement); - } + createElement(name: any, _namespace: string): NgView { + traceLog(`NativeScriptRenderer.createElement: ${name}`); - public createElement(parentElement: NgView, name: string): NgView { - traceLog("NativeScriptRenderer.createElement: " + name + " parent: " + - parentElement + ", " + (parentElement ? parentElement.nodeName : "null")); - return this.viewUtil.createView(name, parentElement, (view) => { + return this.viewUtil.createView(name, view => { + console.log(view); // Set an attribute to the view to scope component-specific css. // The property name is pre-generated by Angular. - if (this.hasComponentStyles) { - const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR, this.componentProtoId); - view[cssAttribute] = true; - } + + // if (this.hasComponentStyles) { + // const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR, this.componentProtoId); + // view[cssAttribute] = true; + // } }); } - public createText(_parentElement: NgView, _value: string): NgView { + createText(_value: string): NgView { traceLog("NativeScriptRenderer.createText"); return this.viewUtil.createText(); } - public listen(renderElement: NgView, eventName: string, callback: Function): Function { + listen(renderElement: any, eventName: string, callback: (event: any) => boolean): + () => void { traceLog("NativeScriptRenderer.listen: " + eventName); // Explicitly wrap in zone let zonedCallback = (...args) => { @@ -238,21 +237,5 @@ export class NativeScriptRenderer extends Renderer { } return () => renderElement.off(eventName, zonedCallback); } - - public listenGlobal(_target: string, _eventName: string, _callback: Function): Function { - throw new Error("NativeScriptRenderer.listenGlobal() - Not implemented."); - } - - public animate( - element: any, - startingStyles: ɵAnimationStyles, - keyframes: ɵAnimationKeyframe[], - duration: number, - delay: number, - easing: string - ): AnimationPlayer { - let player = this.animationDriver.animate( - element, startingStyles, keyframes, duration, delay, easing); - return player; - } } + diff --git a/nativescript-angular/tsconfig.json b/nativescript-angular/tsconfig.json index 60cf45c78..17fd0ba01 100644 --- a/nativescript-angular/tsconfig.json +++ b/nativescript-angular/tsconfig.json @@ -21,10 +21,10 @@ ], "baseUrl": ".", "paths": { - "*": [ - "./node_modules/tns-core-modules/*", - "./node_modules/*" - ] + "*": [ + "./node_modules/tns-core-modules/*", + "./node_modules/*" + ] } }, "angularCompilerOptions": { diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index e9804df05..cb1399895 100644 --- a/nativescript-angular/view-util.ts +++ b/nativescript-angular/view-util.ts @@ -4,13 +4,11 @@ import { Placeholder } from "tns-core-modules/ui/placeholder"; import { ContentView } from "tns-core-modules/ui/content-view"; import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base"; import { - ViewClass, getViewClass, getViewMeta, isKnownView, ViewExtensions, NgView, - TEMPLATE } from "./element-registry"; import { platformNames, Device } from "tns-core-modules/platform"; import { rendererLog as traceLog } from "./trace"; @@ -48,13 +46,13 @@ export class ViewUtil { this.isAndroid = device.os === platformNames.android; } - public insertChild(parent: any, child: NgView, atIndex = -1) { + public insertChild(parent: any, child: NgView, atIndex: number = -1) { if (!parent || child.meta.skipAddToDom) { return; } if (parent.meta && parent.meta.insertChild) { - parent.meta.insertChild(parent, child, atIndex); + parent.meta.insertChild(parent, child, atIndex); } else if (isLayout(parent)) { if (child.parent === parent) { let index = (parent).getChildIndex(child); @@ -116,31 +114,22 @@ export class ViewUtil { } } - private createAndAttach( - name: string, - viewClass: ViewClass, - parent: NgView, - beforeAttach?: BeforeAttachAction - ): NgView { - const view = new viewClass(); + public createView(name: string, beforeAttach?: BeforeAttachAction): NgView { + traceLog("Creating view:" + name); + + if (!isKnownView(name)) { + name = "ProxyViewContainer"; + } + const viewClass = getViewClass(name); + let view = new viewClass(); view.nodeName = name; view.meta = getViewMeta(name); + if (beforeAttach) { beforeAttach(view); } - if (parent) { - this.insertChild(parent, view); - } - return view; - } - public createView(name: string, parent: NgView, beforeAttach?: BeforeAttachAction): NgView { - if (isKnownView(name)) { - const viewClass = getViewClass(name); - return this.createAndAttach(name, viewClass, parent, beforeAttach); - } else { - return this.createViewContainer(parent, beforeAttach); - } + return view; } public createText(): NgView { @@ -151,23 +140,6 @@ export class ViewUtil { return text; } - public createViewContainer(parentElement: NgView, beforeAttach: BeforeAttachAction) { - traceLog("Creating view container in:" + parentElement); - - const layout = this.createView("ProxyViewContainer", parentElement, beforeAttach); - layout.nodeName = "ProxyViewContainer"; - return layout; - } - - public createTemplateAnchor(parentElement: NgView) { - const viewClass = getViewClass(TEMPLATE); - const anchor = this.createAndAttach(TEMPLATE, viewClass, parentElement); - anchor.templateParent = parentElement; - anchor.visibility = "collapse"; - traceLog("Created templateAnchor: " + anchor); - return anchor; - } - private isXMLAttribute(name: string): boolean { switch (name) { case "style": return true; @@ -308,16 +280,11 @@ export class ViewUtil { view.className = classValue; } - public setStyleProperty(view: NgView, styleName: string, styleValue: string): void { - traceLog("setStyleProperty: " + styleName + " = " + styleValue); - - let name = styleName; - let resolvedValue = styleValue; // this.resolveCssValue(styleValue); + public setStyle(view: NgView, styleName: string, value: any) { + view.style[styleName] = value; + } - if (resolvedValue !== null) { - view.style[name] = resolvedValue; - } else { - view.style[name] = unsetValue; - } + public removeStyle(view: NgView, styleName: string) { + view.style[styleName] = unsetValue; } } diff --git a/tests/app/main.ts b/tests/app/main.ts index 1e56c11d1..819d7f03d 100644 --- a/tests/app/main.ts +++ b/tests/app/main.ts @@ -30,9 +30,9 @@ import { rendererTraceCategory, routerTraceCategory } from "nativescript-angular import { BehaviorSubject } from "rxjs/BehaviorSubject"; import trace = require("trace"); -// trace.setCategories(rendererTraceCategory + "," + routerTraceCategory); -trace.setCategories(routerTraceCategory); -trace.enable(); +trace.setCategories(rendererTraceCategory + "," + routerTraceCategory); +// trace.setCategories(routerTraceCategory); +// trace.enable(); // nativeScriptBootstrap(GestureComponent); // nativeScriptBootstrap(LayoutsComponent); diff --git a/tests/app/single-page-main.component.ts b/tests/app/single-page-main.component.ts index 33d518729..788f055b6 100644 --- a/tests/app/single-page-main.component.ts +++ b/tests/app/single-page-main.component.ts @@ -7,6 +7,14 @@ import {SecondComponent} from "./second.component"; @Component({ selector: "single-page-main", template: ` + + + + + + + + ` diff --git a/tests/app/tests/style-properties.ts b/tests/app/tests/style-properties.ts index d2a526ef3..19cf62e30 100644 --- a/tests/app/tests/style-properties.ts +++ b/tests/app/tests/style-properties.ts @@ -2,10 +2,10 @@ import {assert} from "./test-config"; import {TextField} from "ui/text-field"; import {Red, Lime} from "color/known-colors"; -import {NativeScriptRenderer, NativeScriptRootRenderer} from "nativescript-angular/renderer"; +import { NativeScriptRendererFactory, NativeScriptRenderer } from "nativescript-angular/renderer"; import {NativeScriptAnimationDriver} from "nativescript-angular/animation-driver"; import {device} from "platform"; -import { ViewEncapsulation, RenderComponentType } from "@angular/core"; +import { ViewEncapsulation, RendererTypeV2, RendererV2 } from "@angular/core"; import {NgView} from "nativescript-angular/view-util"; describe("Setting style properties", () => { @@ -13,31 +13,29 @@ describe("Setting style properties", () => { let element: NgView = null; beforeEach(() => { - const rootRenderer = new NativeScriptRootRenderer(null, device, null); - const componentType = new RenderComponentType( - "id", - "templateUrl", - 0, - ViewEncapsulation.None, - [], - {} - ); - renderer = new NativeScriptRenderer(rootRenderer, componentType, null, null); + const rendererFactory = new NativeScriptRendererFactory(null, device, null); + renderer = rendererFactory.createRenderer(null, { + id: "id", + encapsulation: ViewEncapsulation.None, + styles: [], + data: {} + }); + element = new TextField(); }); it("resolves hyphenated CSS names", () => { - renderer.setElementStyle(element, "background-color", "red"); + renderer.setStyle(element, "background-color", "red"); assert.equal(Red, element.style.backgroundColor.hex); }); it("resolves camel-cased JavaScript names", () => { - renderer.setElementStyle(element, "backgroundColor", "lime"); + renderer.setStyle(element, "backgroundColor", "lime"); assert.equal(Lime, element.style.backgroundColor.hex); }); it("resolves CSS shorthand properties", () => { - renderer.setElementStyle(element, "font", "12"); + renderer.setStyle(element, "font", "12"); assert.equal(12, element.style.fontSize); }); }) diff --git a/tests/references.d.ts b/tests/references.d.ts deleted file mode 100644 index 8f857a9d3..000000000 --- a/tests/references.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// Needed for autocompletion and compilation. diff --git a/tests/tsconfig.json b/tests/tsconfig.json index 1b964e752..94468956a 100644 --- a/tests/tsconfig.json +++ b/tests/tsconfig.json @@ -2,9 +2,7 @@ "compilerOptions": { "module": "commonjs", "target": "es5", - "inlineSourceMap": true, "experimentalDecorators": true, - "removeComments": false, "emitDecoratorMetadata": true, "noEmitHelpers": true, "noEmitOnError": true, @@ -23,6 +21,7 @@ }, "exclude": [ "node_modules", - "platforms" + "platforms", + "**/*.aot" ] -} \ No newline at end of file +} From b7f5da224af304cb7cc6aff6a29dbdca8a1165c4 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Wed, 8 Mar 2017 19:52:19 +0200 Subject: [PATCH 18/39] feat(renderer): use EmulatedRenderer to scope component styles --- nativescript-angular/renderer.ts | 133 ++++++++++++++++++++---------- nativescript-angular/view-util.ts | 15 +--- 2 files changed, 92 insertions(+), 56 deletions(-) diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 65394cf28..339fd4d13 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -1,8 +1,7 @@ import { Inject, Injectable, Optional, NgZone, RendererV2, RendererFactoryV2, RendererTypeV2, - // ViewEncapsulation - // ɵAnimationStyles, ɵAnimationKeyframe, + ViewEncapsulation, } from "@angular/core"; import { escapeRegexSymbols } from "tns-core-modules/utils/utils"; @@ -21,8 +20,12 @@ import { Device } from "tns-core-modules/platform"; import { getRootPage } from "./platform-providers"; // CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application. +const COMPONENT_REGEX = /%COMP%/g; export const COMPONENT_VARIABLE = "%COMP%"; +export const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`; export const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`; +const ATTR_REPLACER = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g"); +const ATTR_SANITIZER = /-/g; @Injectable() export class NativeScriptRendererFactory implements RendererFactoryV2 { @@ -34,7 +37,7 @@ export class NativeScriptRendererFactory implements RendererFactoryV2 { constructor( @Optional() @Inject(APP_ROOT_VIEW) rootView: View, @Inject(DEVICE) device: Device, - zone: NgZone + private zone: NgZone ) { this.viewUtil = new ViewUtil(device); this.setRootNgView(rootView); @@ -55,30 +58,19 @@ export class NativeScriptRendererFactory implements RendererFactoryV2 { } let renderer: NativeScriptRenderer = this.componentRenderers.get(type.id); - if (isBlank(renderer)) { - renderer = this.defaultRenderer; - - let stylesLength = type.styles.length; - for (let i = 0; i < stylesLength; i++) { - console.log(type.styles[i]); - // this.hasComponentStyles = true; - let cssString = type.styles[i] + ""; - const realCSS = this.replaceNgAttribute(cssString, type.id); - addCss(realCSS); - } - this.componentRenderers.set(type.id, renderer); + if (!isBlank(renderer)) { + return renderer; } - return renderer; - } - - private attrReplacer = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g"); - private attrSanitizer = /-/g; - + if (type.encapsulation === ViewEncapsulation.Emulated) { + renderer = new EmulatedRenderer(type, this.rootNgView, this.zone, this.viewUtil); + (renderer).applyToHost(element); + } else { + renderer = this.defaultRenderer; + } - private replaceNgAttribute(input: string, componentId: string): string { - return input.replace(this.attrReplacer, - "_ng_content_" + componentId.replace(this.attrSanitizer, "_")); + this.componentRenderers.set(type.id, renderer); + return renderer; } } @@ -94,16 +86,21 @@ export class NativeScriptRenderer extends RendererV2 { traceLog("NativeScriptRenderer created"); } - appendChild(parent: any, newChild: any): void { + appendChild(parent: any, newChild: NgView): void { traceLog(`NativeScriptRenderer.appendChild child: ${newChild} parent: ${parent}`); + console.log(typeof parent) + console.log("appending child") + console.log(newChild.id) this.viewUtil.insertChild(parent, newChild); } - insertBefore(parent: any, newChild: any, refChild: any): void { + insertBefore(parent: any, newChild: any, _refChild: any): void { traceLog(`NativeScriptRenderer.insertBefore child: ${newChild} parent: ${parent}`); if (parent) { - parent.insertBefore(newChild, refChild); + // Temporary solution until we implement nextSibling method + this.appendChild(parent, newChild); + // parent.insertBefore(newChild, refChild); } } @@ -117,8 +114,8 @@ export class NativeScriptRenderer extends RendererV2 { return this.rootView; } - parentNode(node: NgView): NgView { - return node.templateParent; + parentNode(node: NgView): any { + return node.parent; } nextSibling(_node: NgView): void { @@ -126,15 +123,13 @@ export class NativeScriptRenderer extends RendererV2 { } createViewRoot(hostElement: NgView): NgView { - traceLog("CREATE VIEW ROOT: " + hostElement.nodeName); + traceLog(`NativeScriptRenderer.createViewRoot ${hostElement.nodeName}`) return hostElement; } projectNodes(parentElement: NgView, nodes: NgView[]): void { traceLog("NativeScriptRenderer.projectNodes"); - nodes.forEach((node) => { - this.viewUtil.insertChild(parentElement, node); - }); + nodes.forEach((node) => this.viewUtil.insertChild(parentElement, node)); } destroy() { @@ -202,17 +197,7 @@ export class NativeScriptRenderer extends RendererV2 { createElement(name: any, _namespace: string): NgView { traceLog(`NativeScriptRenderer.createElement: ${name}`); - - return this.viewUtil.createView(name, view => { - console.log(view); - // Set an attribute to the view to scope component-specific css. - // The property name is pre-generated by Angular. - - // if (this.hasComponentStyles) { - // const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR, this.componentProtoId); - // view[cssAttribute] = true; - // } - }); + return this.viewUtil.createView(name) } createText(_value: string): NgView { @@ -239,3 +224,63 @@ export class NativeScriptRenderer extends RendererV2 { } } +class EmulatedRenderer extends NativeScriptRenderer { + private contentAttr: string; + private hostAttr: string; + + constructor( + private component: RendererTypeV2, + rootView: NgView, + zone: NgZone, + viewUtil: ViewUtil, + ) { + super(rootView, zone, viewUtil); + + this.addStyles(); + this.contentAttr = shimContentAttribute(component.id); + this.hostAttr = shimHostAttribute(component.id); + } + + applyToHost(view: NgView) { + super.setAttribute(view, this.hostAttr, ""); + } + + appendChild(parent: any, newChild: NgView): void { + // Set an attribute to the view to scope component-specific css. + // The property name is pre-generated by Angular. + const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR); + newChild[cssAttribute] = true; + + super.appendChild(parent, newChild); + } + + createElement(parent: any, name: string): NgView { + const view = super.createElement(parent, name); + super.setAttribute(view, this.contentAttr, ""); + + return view; + } + + private addStyles() { + this.component.styles + .map(s => s.toString()) + .map(s => this.replaceNgAttribute(s)) + .forEach(addCss); + } + + private replaceNgAttribute(input: string): string { + return input.replace(ATTR_REPLACER , `_ng_content_${this.componentId}`); + } + + private get componentId(): string { + return this.component.id.replace(ATTR_SANITIZER , "_"); + } +} + +function shimContentAttribute(componentShortId: string): string { + return CONTENT_ATTR.replace(COMPONENT_REGEX, componentShortId); +} + +function shimHostAttribute(componentShortId: string): string { + return HOST_ATTR.replace(COMPONENT_REGEX, componentShortId); +} diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index cb1399895..275a076ca 100644 --- a/nativescript-angular/view-util.ts +++ b/nativescript-angular/view-util.ts @@ -15,6 +15,7 @@ import { rendererLog as traceLog } from "./trace"; const IOS_PREFX: string = ":ios:"; const ANDROID_PREFX: string = ":android:"; +const XML_ATTRIBUTES = Object.freeze([ "style", "row", "columns", "fontAttributes"]); const whiteSpaceSplitter = /\s+/; export type ViewExtensions = ViewExtensions; @@ -114,7 +115,7 @@ export class ViewUtil { } } - public createView(name: string, beforeAttach?: BeforeAttachAction): NgView { + public createView(name: string): NgView { traceLog("Creating view:" + name); if (!isKnownView(name)) { @@ -125,10 +126,6 @@ export class ViewUtil { view.nodeName = name; view.meta = getViewMeta(name); - if (beforeAttach) { - beforeAttach(view); - } - return view; } @@ -141,13 +138,7 @@ export class ViewUtil { } private isXMLAttribute(name: string): boolean { - switch (name) { - case "style": return true; - case "rows": return true; - case "columns": return true; - case "fontAttributes": return true; - default: return false; - } + return XML_ATTRIBUTES.indexOf(name) !== -1; } private platformFilter(attribute: string): string { From 809bf105ff1a398ce8594b17dbf7ca986a7b0c2c Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Thu, 9 Mar 2017 16:29:18 +0200 Subject: [PATCH 19/39] feat(renderer): implement simple nextSibling method using parent's _subViews --- nativescript-angular/renderer.ts | 27 +++++++++++++-------------- nativescript-angular/view-util.ts | 14 +++++++++++++- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 339fd4d13..11671315a 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -75,7 +75,7 @@ export class NativeScriptRendererFactory implements RendererFactoryV2 { } export class NativeScriptRenderer extends RendererV2 { - data: {[key: string]: any} = Object.create(null); + data: { [key: string]: any } = Object.create(null); constructor( private rootView: NgView, @@ -88,25 +88,23 @@ export class NativeScriptRenderer extends RendererV2 { appendChild(parent: any, newChild: NgView): void { traceLog(`NativeScriptRenderer.appendChild child: ${newChild} parent: ${parent}`); - console.log(typeof parent) - console.log("appending child") - console.log(newChild.id) this.viewUtil.insertChild(parent, newChild); } - - insertBefore(parent: any, newChild: any, _refChild: any): void { + insertBefore(parent: NgView, newChild: NgView, refChildIndex: number): void { traceLog(`NativeScriptRenderer.insertBefore child: ${newChild} parent: ${parent}`); + if (parent) { - // Temporary solution until we implement nextSibling method - this.appendChild(parent, newChild); - // parent.insertBefore(newChild, refChild); + this.viewUtil.insertChild(parent, newChild, refChildIndex); } } removeChild(parent: any, oldChild: NgView): void { traceLog(`NativeScriptRenderer.removeChild child: ${oldChild} parent: ${parent}`); - this.viewUtil.removeChild(parent, oldChild); + + if (parent) { + this.viewUtil.removeChild(parent, oldChild); + } } selectRootElement(selector: string): NgView { @@ -118,12 +116,13 @@ export class NativeScriptRenderer extends RendererV2 { return node.parent; } - nextSibling(_node: NgView): void { - traceLog(`NativeScriptRenderer.nextSibling ${_node}`); + nextSibling(node: NgView): number { + traceLog(`NativeScriptRenderer.nextSibling ${node}`); + return this.viewUtil.nextSibling(node); } createViewRoot(hostElement: NgView): NgView { - traceLog(`NativeScriptRenderer.createViewRoot ${hostElement.nodeName}`) + traceLog(`NativeScriptRenderer.createViewRoot ${hostElement.nodeName}`); return hostElement; } @@ -197,7 +196,7 @@ export class NativeScriptRenderer extends RendererV2 { createElement(name: any, _namespace: string): NgView { traceLog(`NativeScriptRenderer.createElement: ${name}`); - return this.viewUtil.createView(name) + return this.viewUtil.createView(name); } createText(_value: string): NgView { diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index 275a076ca..c01aa81c2 100644 --- a/nativescript-angular/view-util.ts +++ b/nativescript-angular/view-util.ts @@ -53,7 +53,7 @@ export class ViewUtil { } if (parent.meta && parent.meta.insertChild) { - parent.meta.insertChild(parent, child, atIndex); + parent.meta.insertChild(parent, child, atIndex); } else if (isLayout(parent)) { if (child.parent === parent) { let index = (parent).getChildIndex(child); @@ -192,6 +192,18 @@ export class ViewUtil { } } + // finds the node in the parent's views and returns the next index + // returns -1 if the node has no parent or next sibling + public nextSibling(node: NgView): number { + const parent = node.parent; + if (!parent || typeof (parent)._subViews === "undefined") { + return -1; + } else { + const index = (parent)._subViews.indexOf(node); + return index === -1 ? index : index + 1; + } + } + private setPropertyInternal(view: NgView, attributeName: string, value: any): void { traceLog("Setting attribute: " + attributeName); From 96275099404fde45b30f97bd25bc20efd492a922 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Thu, 9 Mar 2017 18:29:59 +0200 Subject: [PATCH 20/39] fix(renderer): stop inserting Placeholders children --- nativescript-angular/renderer.ts | 7 +++++-- nativescript-angular/view-util.ts | 7 ++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 11671315a..e2258a334 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -88,7 +88,10 @@ export class NativeScriptRenderer extends RendererV2 { appendChild(parent: any, newChild: NgView): void { traceLog(`NativeScriptRenderer.appendChild child: ${newChild} parent: ${parent}`); - this.viewUtil.insertChild(parent, newChild); + + if (parent) { + this.viewUtil.insertChild(parent, newChild); + } } insertBefore(parent: NgView, newChild: NgView, refChildIndex: number): void { @@ -199,7 +202,7 @@ export class NativeScriptRenderer extends RendererV2 { return this.viewUtil.createView(name); } - createText(_value: string): NgView { + createText(_value: string) { traceLog("NativeScriptRenderer.createText"); return this.viewUtil.createText(); } diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index c01aa81c2..8d51c8403 100644 --- a/nativescript-angular/view-util.ts +++ b/nativescript-angular/view-util.ts @@ -22,6 +22,7 @@ export type ViewExtensions = ViewExtensions; export type NgView = NgView; export type NgLayoutBase = LayoutBase & ViewExtensions; export type NgContentView = ContentView & ViewExtensions; +export type NgPlaceholder = Placeholder & ViewExtensions; export type BeforeAttachAction = (view: View) => void; export function isView(view: any): view is NgView { @@ -36,6 +37,10 @@ export function isContentView(view: any): view is NgContentView { return view instanceof ContentView; } +export function isPlaceholder(view: any): view is NgPlaceholder { + return view instanceof Placeholder; +} + const propertyMaps: Map> = new Map>(); export class ViewUtil { @@ -48,7 +53,7 @@ export class ViewUtil { } public insertChild(parent: any, child: NgView, atIndex: number = -1) { - if (!parent || child.meta.skipAddToDom) { + if (!parent || child.meta.skipAddToDom || isPlaceholder(child) === true) { return; } From 333d3ac89e0f6a26675df35a43a623f6c04b5839 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Fri, 10 Mar 2017 14:02:32 +0200 Subject: [PATCH 21/39] fix(renderer): use eachChild method of parent for nextSibling() --- nativescript-angular/renderer.ts | 2 +- nativescript-angular/view-util.ts | 19 +++++++++++++++---- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index e2258a334..53a5cfa3f 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -121,7 +121,7 @@ export class NativeScriptRenderer extends RendererV2 { nextSibling(node: NgView): number { traceLog(`NativeScriptRenderer.nextSibling ${node}`); - return this.viewUtil.nextSibling(node); + return this.viewUtil.nextSiblingIndex(node); } createViewRoot(hostElement: NgView): NgView { diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index 8d51c8403..0d81ac2d0 100644 --- a/nativescript-angular/view-util.ts +++ b/nativescript-angular/view-util.ts @@ -199,13 +199,24 @@ export class ViewUtil { // finds the node in the parent's views and returns the next index // returns -1 if the node has no parent or next sibling - public nextSibling(node: NgView): number { + public nextSiblingIndex(node: NgView): number { const parent = node.parent; - if (!parent || typeof (parent)._subViews === "undefined") { + + if (!parent) { return -1; } else { - const index = (parent)._subViews.indexOf(node); - return index === -1 ? index : index + 1; + let index = 0; + let found = false; + parent.eachChild(child => { + if (child === node) { + found = true; + } + + index += 1; + return !found; + }); + + return found ? index : -1; } } From 5d8a3a349bbe879b62629251a443932723c46e9f Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Fri, 10 Mar 2017 17:22:31 +0200 Subject: [PATCH 22/39] fix(renderer): implement createComment and createText methods using Placeholders. - createComment - create new element "Comment" using ui/placeholder and attach it. These comments are used as anchors (nextSibling) for structural directives such as *ngIf and *ngFor. - createText - create new element "DetachedText" using ui/placeholder and don't attach it. --- nativescript-angular/element-registry.ts | 9 +++- nativescript-angular/renderer.ts | 30 +++++++------- nativescript-angular/view-util.ts | 53 ++++++++++++++---------- 3 files changed, 53 insertions(+), 39 deletions(-) diff --git a/nativescript-angular/element-registry.ts b/nativescript-angular/element-registry.ts index 8686a4bea..814baecd9 100644 --- a/nativescript-angular/element-registry.ts +++ b/nativescript-angular/element-registry.ts @@ -2,7 +2,7 @@ import { View } from "tns-core-modules/ui/core/view"; export type ViewResolver = () => ViewClass; export type NgView = View & ViewExtensions; -export const TEMPLATE = "template"; +export const TEMPLATE = "ng-template"; export interface ViewClassMeta { skipAddToDom?: boolean; @@ -117,3 +117,10 @@ registerElement("Span", () => require("tns-core-modules/text/span").Span); registerElement("DetachedContainer", () => require("tns-core-modules/ui/proxy-view-container").ProxyViewContainer, { skipAddToDom: true }); + +registerElement("DetachedText", () => require("ui/placeholder").Placeholder, + { skipAddToDom: true }); + +registerElement("Comment", () => require("ui/placeholder").Placeholder, + { skipAddToDom: false }); + diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 53a5cfa3f..8df9fdd84 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -124,6 +124,21 @@ export class NativeScriptRenderer extends RendererV2 { return this.viewUtil.nextSiblingIndex(node); } + createComment(_value: any) { + traceLog(`NativeScriptRenderer.createComment ${_value}`); + return this.viewUtil.createComment(); + } + + createElement(name: any, _namespace: string): NgView { + traceLog(`NativeScriptRenderer.createElement: ${name}`); + return this.viewUtil.createView(name); + } + + createText(_value: string) { + traceLog(`NativeScriptRenderer.createText ${_value}`); + return this.viewUtil.createText(); + } + createViewRoot(hostElement: NgView): NgView { traceLog(`NativeScriptRenderer.createViewRoot ${hostElement.nodeName}`); return hostElement; @@ -139,11 +154,6 @@ export class NativeScriptRenderer extends RendererV2 { // Seems to be called on component dispose only (router outlet) // TODO: handle this when we resolve routing and navigation. } - - createComment(_value: any) { - traceLog(`NativeScriptRenderer.createComment ${_value}`); - } - setAttribute(view: NgView, name: string, value: string) { traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`); return this.setProperty(view, name, value); @@ -197,16 +207,6 @@ export class NativeScriptRenderer extends RendererV2 { traceLog("NativeScriptRenderer.setValue"); } - createElement(name: any, _namespace: string): NgView { - traceLog(`NativeScriptRenderer.createElement: ${name}`); - return this.viewUtil.createView(name); - } - - createText(_value: string) { - traceLog("NativeScriptRenderer.createText"); - return this.viewUtil.createText(); - } - listen(renderElement: any, eventName: string, callback: (event: any) => boolean): () => void { traceLog("NativeScriptRenderer.listen: " + eventName); diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index 0d81ac2d0..f6fb12e4a 100644 --- a/nativescript-angular/view-util.ts +++ b/nativescript-angular/view-util.ts @@ -53,7 +53,7 @@ export class ViewUtil { } public insertChild(parent: any, child: NgView, atIndex: number = -1) { - if (!parent || child.meta.skipAddToDom || isPlaceholder(child) === true) { + if (!parent || child.meta.skipAddToDom) { return; } @@ -120,8 +120,24 @@ export class ViewUtil { } } + public createComment(): NgView { + const commentView = this.createView("Comment"); + commentView.nodeName = "#comment"; + commentView.visibility = "collapse"; + + return commentView; + } + + public createText(): NgView { + const detachedText = this.createView("DetachedText"); + detachedText.nodeName = "#text"; + detachedText.visibility = "collapse"; + + return detachedText; + } + public createView(name: string): NgView { - traceLog("Creating view:" + name); + traceLog(`Creating view: ${name}`); if (!isKnownView(name)) { name = "ProxyViewContainer"; @@ -134,14 +150,6 @@ export class ViewUtil { return view; } - public createText(): NgView { - const text = new Placeholder(); - text.nodeName = "#text"; - text.visibility = "collapse"; - text.meta = getViewMeta("Placeholder"); - return text; - } - private isXMLAttribute(name: string): boolean { return XML_ATTRIBUTES.indexOf(name) !== -1; } @@ -201,23 +209,22 @@ export class ViewUtil { // returns -1 if the node has no parent or next sibling public nextSiblingIndex(node: NgView): number { const parent = node.parent; - if (!parent) { return -1; - } else { - let index = 0; - let found = false; - parent.eachChild(child => { - if (child === node) { - found = true; - } + } + + let index = 0; + let found = false; + parent.eachChild(child => { + if (child === node) { + found = true; + } - index += 1; - return !found; - }); + index += 1; + return !found; + }); - return found ? index : -1; - } + return found ? index : -1; } private setPropertyInternal(view: NgView, attributeName: string, value: any): void { From 27e09957e0ddc0304ca771dc68f481ac1a8881bf Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 13 Mar 2017 11:31:25 +0200 Subject: [PATCH 23/39] refactor(animations): remove old animations player/driver --- nativescript-angular/animation-driver.ts | 28 -- nativescript-angular/animation-player.ts | 288 -------------------- nativescript-angular/index.ts | 1 - nativescript-angular/nativescript.module.ts | 8 +- nativescript-angular/package.json | 19 +- nativescript-angular/renderer.ts | 10 +- ng-sample/package.json | 16 +- tests/app/tests/style-properties.ts | 3 +- tests/package.json | 14 +- 9 files changed, 33 insertions(+), 354 deletions(-) delete mode 100644 nativescript-angular/animation-driver.ts delete mode 100644 nativescript-angular/animation-player.ts diff --git a/nativescript-angular/animation-driver.ts b/nativescript-angular/animation-driver.ts deleted file mode 100644 index 7010fe087..000000000 --- a/nativescript-angular/animation-driver.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { AnimationPlayer, ɵAnimationStyles, ɵAnimationKeyframe } from "@angular/core"; -import { NativeScriptAnimationPlayer } from "./animation-player"; -import { View } from "tns-core-modules/ui/core/view"; - -export abstract class AnimationDriver { - abstract animate( - element: any, startingStyles: ɵAnimationStyles, keyframes: ɵAnimationKeyframe[], - duration: number, delay: number, easing: string): AnimationPlayer; -} - -export class NativeScriptAnimationDriver implements AnimationDriver { - - computeStyle(element: any, prop: string): string { - const view = element; - return view.style[`css-${prop}`]; - } - - animate( - element: any, - _startingStyles: ɵAnimationStyles, - keyframes: ɵAnimationKeyframe[], - duration: number, - delay: number, - easing: string - ): AnimationPlayer { - return new NativeScriptAnimationPlayer(element, keyframes, duration, delay, easing); - } -} diff --git a/nativescript-angular/animation-player.ts b/nativescript-angular/animation-player.ts deleted file mode 100644 index e3d51c954..000000000 --- a/nativescript-angular/animation-player.ts +++ /dev/null @@ -1,288 +0,0 @@ -import { AnimationPlayer, ɵAnimationKeyframe } from "@angular/core"; -import { - KeyframeAnimation, - KeyframeAnimationInfo, - KeyframeInfo, - KeyframeDeclaration -} from "tns-core-modules/ui/animation/keyframe-animation"; -import { View } from "tns-core-modules/ui/core/view"; -import { AnimationCurve } from "tns-core-modules/ui/enums"; -import { isString } from "tns-core-modules/utils/types"; -import { CssAnimationProperty } from "tns-core-modules/ui/core/properties"; - -export class NativeScriptAnimationPlayer implements AnimationPlayer { - - public parentPlayer: AnimationPlayer; - - private _startSubscriptions: Function[] = []; - private _doneSubscriptions: Function[] = []; - private _finished = false; - private _started = false; - private animation: KeyframeAnimation; - private target: View; - - constructor( - element: Node, - keyframes: ɵAnimationKeyframe[], - duration: number, - delay: number, - easing: string - ) { - - this.parentPlayer = null; - - if (duration === 0) { - duration = 0.01; - } - - if (!(element instanceof View)) { - throw new Error("NativeScript: Can animate only Views!"); - } - - this.target = element; - - let keyframeAnimationInfo = new KeyframeAnimationInfo(); - keyframeAnimationInfo.duration = duration; - keyframeAnimationInfo.delay = delay; - keyframeAnimationInfo.iterations = 1; - keyframeAnimationInfo.curve = easing ? - NativeScriptAnimationPlayer.animationTimingFunctionConverter(easing) : - AnimationCurve.ease; - keyframeAnimationInfo.keyframes = new Array(); - keyframeAnimationInfo.isForwards = true; - - for (let keyframe of keyframes) { - let keyframeInfo = {}; - keyframeInfo.duration = keyframe.offset; - keyframeInfo.declarations = new Array(); - for (let style of keyframe.styles.styles) { - for (let substyle in style) { - let value = style[substyle]; - - let property = CssAnimationProperty._getByCssName(substyle); - if (property) { - if (typeof value === "string" && property._valueConverter) { - value = property._valueConverter(value); - } - keyframeInfo.declarations.push({ property: property.name, value: value }); - } else if (typeof value === "string" && substyle === "transform") { - NativeScriptAnimationPlayer.parseTransform(value, keyframeInfo); - } - } - } - keyframeAnimationInfo.keyframes.push(keyframeInfo); - } - - this.animation = KeyframeAnimation.keyframeAnimationFromInfo(keyframeAnimationInfo); - } - - init(): void { - } - - hasStarted(): boolean { - return this._started; - } - - - onStart(fn: Function): void { this._startSubscriptions.push(fn); } - onDone(fn: Function): void { this._doneSubscriptions.push(fn); } - onDestroy(fn: Function): void { this._doneSubscriptions.push(fn); } - - private _onStart() { - if (!this._started) { - this._started = true; - this._startSubscriptions.forEach(fn => fn()); - this._startSubscriptions = []; - } - } - - private _onFinish() { - if (!this._finished) { - this._finished = true; - this._started = false; - this._doneSubscriptions.forEach(fn => fn()); - this._doneSubscriptions = []; - } - } - - play(): void { - if (this.animation) { - this._onStart(); - this.animation.play(this.target) - .then(() => { this._onFinish(); }) - .catch((_e) => { }); - } - } - - pause(): void { - throw new Error("AnimationPlayer.pause method is not supported!"); - } - - finish(): void { - throw new Error("AnimationPlayer.finish method is not supported!"); - } - - reset(): void { - if (this.animation && this.animation.isPlaying) { - this.animation.cancel(); - } - } - - restart(): void { - this.reset(); - this.play(); - } - - destroy(): void { - this.reset(); - this._onFinish(); - } - - setPosition(_p: any): void { - throw new Error("AnimationPlayer.setPosition method is not supported!"); - } - - getPosition(): number { - return 0; - } - - static animationTimingFunctionConverter(value): any { - switch (value) { - case "ease": - return AnimationCurve.ease; - case "linear": - return AnimationCurve.linear; - case "ease-in": - return AnimationCurve.easeIn; - case "ease-out": - return AnimationCurve.easeOut; - case "ease-in-out": - return AnimationCurve.easeInOut; - case "spring": - return AnimationCurve.spring; - default: - if (value.indexOf("cubic-bezier(") === 0) { - let bezierArr = value.substring(13).split(/[,]+/); - if (bezierArr.length !== 4) { - throw new Error("Invalid value for animation: " + value); - } - return AnimationCurve.cubicBezier( - NativeScriptAnimationPlayer.bezieArgumentConverter(bezierArr[0]), - NativeScriptAnimationPlayer.bezieArgumentConverter(bezierArr[1]), - NativeScriptAnimationPlayer.bezieArgumentConverter(bezierArr[2]), - NativeScriptAnimationPlayer.bezieArgumentConverter(bezierArr[3])); - } else { - throw new Error("Invalid value for animation: " + value); - } - } - } - - static bezieArgumentConverter(value): number { - let result = parseFloat(value); - result = Math.max(0.0, result); - result = Math.min(1.0, result); - return result; - } - - static transformConverter(value: any): Object { - if (value === "none") { - let operations = {}; - operations[value] = value; - return operations; - } else if (isString(value)) { - let operations = {}; - let operator = ""; - let pos = 0; - while (pos < value.length) { - if (value[pos] === " " || value[pos] === ",") { - pos++; - } else if (value[pos] === "(") { - let start = pos + 1; - while (pos < value.length && value[pos] !== ")") { - pos++; - } - let operand = value.substring(start, pos); - operations[operator] = operand.trim(); - operator = ""; - pos++; - } else { - operator += value[pos++]; - } - } - return operations; - } else { - return undefined; - } - } - - static parseTransform(value: string, animationInfo: KeyframeInfo) { - let newTransform = NativeScriptAnimationPlayer.transformConverter(value); - let values = undefined; - for (let transform in newTransform) { - switch (transform) { - case "scaleX": - animationInfo.declarations.push({ - property: "scale", - value: { x: parseFloat(newTransform[transform]), y: 1 } - }); - break; - case "scaleY": - animationInfo.declarations.push({ - property: "scale", - value: { x: 1, y: parseFloat(newTransform[transform]) } - }); - break; - case "scale": - case "scale3d": - values = newTransform[transform].split(","); - if (values.length === 2 || values.length === 3) { - animationInfo.declarations.push({ - property: "scale", - value: { x: parseFloat(values[0]), y: parseFloat(values[1]) } - }); - } - break; - case "translateX": - animationInfo.declarations.push({ - property: "translate", - value: { x: parseFloat(newTransform[transform]), y: 0 } - }); - break; - case "translateY": - animationInfo.declarations.push({ - property: "translate", - value: { x: 0, y: parseFloat(newTransform[transform]) } - }); - break; - case "translate": - case "translate3d": - values = newTransform[transform].split(","); - if (values.length === 2 || values.length === 3) { - animationInfo.declarations.push({ - property: "translate", - value: { - x: parseFloat(values[0]), - y: parseFloat(values[1]) - } - }); - } - break; - case "rotate": - let text = newTransform[transform]; - let val = parseFloat(text); - if (text.slice(-3) === "rad") { - val = val * (180.0 / Math.PI); - } - animationInfo.declarations.push({ property: "rotate", value: val }); - break; - case "none": - animationInfo.declarations.push({ property: "scale", value: { x: 1, y: 1 } }); - animationInfo.declarations.push({ property: "translate", value: { x: 0, y: 0 } }); - animationInfo.declarations.push({ property: "rotate", value: 0 }); - break; - default: - throw new Error("Unsupported transform: " + transform); - } - } - } -} diff --git a/nativescript-angular/index.ts b/nativescript-angular/index.ts index f8c21ffb6..74963bb2e 100644 --- a/nativescript-angular/index.ts +++ b/nativescript-angular/index.ts @@ -14,7 +14,6 @@ export * from "./file-system/ns-file-system"; export * from "./modal-dialog"; export * from "./renderer"; export * from "./view-util"; -export * from "./animation-driver"; export * from "./resource-loader"; export { ViewResolver, diff --git a/nativescript-angular/nativescript.module.ts b/nativescript-angular/nativescript.module.ts index b2c245e1f..729e2a254 100644 --- a/nativescript-angular/nativescript.module.ts +++ b/nativescript-angular/nativescript.module.ts @@ -12,8 +12,7 @@ import { ModalDialogHost, ModalDialogService } from "./directives/dialogs"; import { ApplicationModule, ErrorHandler, - // RendererV2, - RendererFactoryV2, + RendererFactory2, NgModule, NO_ERRORS_SCHEMA, } from "@angular/core"; import { @@ -38,11 +37,8 @@ export function errorHandlerFactory() { defaultFrameProvider, defaultPageProvider, defaultDeviceProvider, - NativeScriptRendererFactory, - { provide: RendererFactoryV2, useClass: NativeScriptRendererFactory }, - // NativeScriptRenderer, - // { provide: RendererV2, useClass: NativeScriptRenderer }, + { provide: RendererFactory2, useClass: NativeScriptRendererFactory }, ModalDialogService ], entryComponents: [ diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 2441499d2..7ef7b3e42 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -25,14 +25,15 @@ }, "dependencies": { "nativescript-intl": "~0.0.8", - "@angular/core": "4.0.0-rc.1", - "@angular/common": "4.0.0-rc.1", - "@angular/compiler": "4.0.0-rc.1", - "@angular/http": "4.0.0-rc.1", - "@angular/platform-browser": "4.0.0-rc.1", - "@angular/platform-browser-dynamic": "4.0.0-rc.1", - "@angular/forms": "4.0.0-rc.1", - "@angular/router": "4.0.0-rc.1", + "@angular/animations": "4.0.0-rc.3", + "@angular/core": "4.0.0-rc.3", + "@angular/common": "4.0.0-rc.3", + "@angular/compiler": "4.0.0-rc.3", + "@angular/http": "4.0.0-rc.3", + "@angular/platform-browser": "4.0.0-rc.3", + "@angular/platform-browser-dynamic": "4.0.0-rc.3", + "@angular/forms": "4.0.0-rc.3", + "@angular/router": "4.0.0-rc.3", "rxjs": "^5.0.1", "reflect-metadata": "~0.1.8", "punycode": "1.3.2", @@ -40,7 +41,7 @@ "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "4.0.0-rc.1", + "@angular/compiler-cli": "4.0.0-rc.3", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 8df9fdd84..44ebdb986 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -1,6 +1,6 @@ import { Inject, Injectable, Optional, NgZone, - RendererV2, RendererFactoryV2, RendererTypeV2, + Renderer2, RendererFactory2, RendererType2, ViewEncapsulation, } from "@angular/core"; @@ -28,7 +28,7 @@ const ATTR_REPLACER = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g"); const ATTR_SANITIZER = /-/g; @Injectable() -export class NativeScriptRendererFactory implements RendererFactoryV2 { +export class NativeScriptRendererFactory implements RendererFactory2 { private componentRenderers = new Map(); private viewUtil: ViewUtil; private defaultRenderer: NativeScriptRenderer; @@ -52,7 +52,7 @@ export class NativeScriptRendererFactory implements RendererFactoryV2 { this.rootNgView = rootView; } - createRenderer(element: any, type: RendererTypeV2): NativeScriptRenderer { + createRenderer(element: any, type: RendererType2): NativeScriptRenderer { if (!element || !type) { return this.defaultRenderer; } @@ -74,7 +74,7 @@ export class NativeScriptRendererFactory implements RendererFactoryV2 { } } -export class NativeScriptRenderer extends RendererV2 { +export class NativeScriptRenderer extends Renderer2 { data: { [key: string]: any } = Object.create(null); constructor( @@ -231,7 +231,7 @@ class EmulatedRenderer extends NativeScriptRenderer { private hostAttr: string; constructor( - private component: RendererTypeV2, + private component: RendererType2, rootView: NgView, zone: NgZone, viewUtil: ViewUtil, diff --git a/ng-sample/package.json b/ng-sample/package.json index 498ca11d4..ceff974d9 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,14 +23,14 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "4.0.0-rc.1", - "@angular/compiler": "4.0.0-rc.1", - "@angular/core": "4.0.0-rc.1", - "@angular/forms": "4.0.0-rc.1", - "@angular/http": "4.0.0-rc.1", - "@angular/platform-browser": "4.0.0-rc.1", - "@angular/platform-browser-dynamic": "4.0.0-rc.1", - "@angular/router": "4.0.0-rc.1", + "@angular/common": "4.0.0-rc.3", + "@angular/compiler": "4.0.0-rc.3", + "@angular/core": "4.0.0-rc.3", + "@angular/forms": "4.0.0-rc.3", + "@angular/http": "4.0.0-rc.3", + "@angular/platform-browser": "4.0.0-rc.3", + "@angular/platform-browser-dynamic": "4.0.0-rc.3", + "@angular/router": "4.0.0-rc.3", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", "tns-core-modules": "internal-preview" diff --git a/tests/app/tests/style-properties.ts b/tests/app/tests/style-properties.ts index 19cf62e30..51ecd4d9f 100644 --- a/tests/app/tests/style-properties.ts +++ b/tests/app/tests/style-properties.ts @@ -3,9 +3,8 @@ import {assert} from "./test-config"; import {TextField} from "ui/text-field"; import {Red, Lime} from "color/known-colors"; import { NativeScriptRendererFactory, NativeScriptRenderer } from "nativescript-angular/renderer"; -import {NativeScriptAnimationDriver} from "nativescript-angular/animation-driver"; import {device} from "platform"; -import { ViewEncapsulation, RendererTypeV2, RendererV2 } from "@angular/core"; +import { ViewEncapsulation, RendererType2, Renderer2 } from "@angular/core"; import {NgView} from "nativescript-angular/view-util"; describe("Setting style properties", () => { diff --git a/tests/package.json b/tests/package.json index 90874b0af..f65d641aa 100644 --- a/tests/package.json +++ b/tests/package.json @@ -26,13 +26,13 @@ ], "homepage": "http://nativescript.org", "dependencies": { - "@angular/common": "4.0.0-rc.1", - "@angular/compiler": "4.0.0-rc.1", - "@angular/core": "4.0.0-rc.1", - "@angular/http": "4.0.0-rc.1", - "@angular/platform-browser": "4.0.0-rc.1", - "@angular/platform-browser-dynamic": "4.0.0-rc.1", - "@angular/router": "4.0.0-rc.1", + "@angular/common": "4.0.0-rc.3", + "@angular/compiler": "4.0.0-rc.3", + "@angular/core": "4.0.0-rc.3", + "@angular/http": "4.0.0-rc.3", + "@angular/platform-browser": "4.0.0-rc.3", + "@angular/platform-browser-dynamic": "4.0.0-rc.3", + "@angular/router": "4.0.0-rc.3", "nativescript-angular": "internal-preview", "nativescript-unit-test-runner": "^0.3.4", "rxjs": "~5.0.1", From 9672335c4bf1195c6ff01bf1b426f5c903036932 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 13 Mar 2017 13:58:48 +0200 Subject: [PATCH 24/39] fix(ns-http): make defaultOptions of type RequestOptions --- nativescript-angular/http/ns-http.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/nativescript-angular/http/ns-http.ts b/nativescript-angular/http/ns-http.ts index 70c9d3de4..6b6fff33e 100644 --- a/nativescript-angular/http/ns-http.ts +++ b/nativescript-angular/http/ns-http.ts @@ -2,6 +2,7 @@ import { Injectable } from "@angular/core"; import { Http, ConnectionBackend, + RequestOptions, RequestOptionsArgs, ResponseOptions, ResponseType, @@ -19,7 +20,7 @@ export class NSXSRFStrategy { @Injectable() export class NSHttp extends Http { - constructor(backend: ConnectionBackend, defaultOptions: any, private nsFileSystem: NSFileSystem) { + constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private nsFileSystem: NSFileSystem) { super(backend, defaultOptions); } From 955b4d40f7e14c3c2b7076adaef40f9ccea07ec3 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 13 Mar 2017 15:04:08 +0200 Subject: [PATCH 25/39] fix(renderer): remove unnecessary exported function --- nativescript-angular/view-util.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index f6fb12e4a..16b58b062 100644 --- a/nativescript-angular/view-util.ts +++ b/nativescript-angular/view-util.ts @@ -37,10 +37,6 @@ export function isContentView(view: any): view is NgContentView { return view instanceof ContentView; } -export function isPlaceholder(view: any): view is NgPlaceholder { - return view instanceof Placeholder; -} - const propertyMaps: Map> = new Map>(); export class ViewUtil { From 4ceed1a8a471e38315935755a14bf0592b4a0e5a Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 13 Mar 2017 16:22:31 +0200 Subject: [PATCH 26/39] refactor(renderer): xmlAttributes check --- nativescript-angular/renderer.ts | 6 +++--- nativescript-angular/view-util.ts | 8 ++------ 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 44ebdb986..fcac59bbb 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -6,9 +6,9 @@ import { import { escapeRegexSymbols } from "tns-core-modules/utils/utils"; import { Device } from "tns-core-modules/platform"; -import { View } from "ui/core/view"; -import { addCss } from "application"; -import { topmost } from "ui/frame"; +import { View } from "tns-core-modules/ui/core/view"; +import { addCss } from "tns-core-modules/application"; +import { topmost } from "tns-core-modules/ui/frame"; import { APP_ROOT_VIEW, DEVICE } from "./platform-providers"; import { isBlank } from "./lang-facade"; diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index 16b58b062..fdc622bbc 100644 --- a/nativescript-angular/view-util.ts +++ b/nativescript-angular/view-util.ts @@ -15,7 +15,7 @@ import { rendererLog as traceLog } from "./trace"; const IOS_PREFX: string = ":ios:"; const ANDROID_PREFX: string = ":android:"; -const XML_ATTRIBUTES = Object.freeze([ "style", "row", "columns", "fontAttributes"]); +const XML_ATTRIBUTES = Object.freeze(["style", "rows", "columns", "fontAttributes"]); const whiteSpaceSplitter = /\s+/; export type ViewExtensions = ViewExtensions; @@ -146,10 +146,6 @@ export class ViewUtil { return view; } - private isXMLAttribute(name: string): boolean { - return XML_ATTRIBUTES.indexOf(name) !== -1; - } - private platformFilter(attribute: string): string { let lowered = attribute.toLowerCase(); if (lowered.indexOf(IOS_PREFX) === 0) { @@ -230,7 +226,7 @@ export class ViewUtil { if (attributeName === "class") { this.setClasses(view, value); - } else if (this.isXMLAttribute(attributeName)) { + } else if (XML_ATTRIBUTES.indexOf(attributeName) !== -1) { view._applyXmlAttribute(attributeName, value); } else if (propMap.has(attributeName)) { // We have a lower-upper case mapped property. From 8f8c6eb52303e7fd5901b3a898682e9321e101cd Mon Sep 17 00:00:00 2001 From: Stanimira Vlaeva Date: Mon, 20 Mar 2017 15:16:25 +0200 Subject: [PATCH 27/39] feat(animations): introduce NativeScriptAnimationsModule (#704) BREAKING CHANGE: To use animations, you need to import the NativeScriptAnimationsModule from "nativescript-angular/animations" in your root NgModule. --- nativescript-angular/animations.ts | 52 +++++++ .../animations/animation-driver.ts | 32 ++++ .../animations/animation-engine.ts | 143 ++++++++++++++++++ .../animations/animation-player.ts | 108 +++++++++++++ nativescript-angular/animations/dom-utils.ts | 77 ++++++++++ nativescript-angular/animations/utils.ts | 139 +++++++++++++++++ nativescript-angular/dom-adapter.ts | 1 + nativescript-angular/package.json | 22 +-- nativescript-angular/postinstall.js | 12 ++ nativescript-angular/renderer.ts | 6 +- .../router/page-router-outlet.ts | 56 ++++--- ng-sample/app/app.ts | 28 ++-- .../animation/animation-keyframes-test.ts | 2 +- ng-sample/package.json | 21 +-- tests/package.json | 18 +-- 15 files changed, 646 insertions(+), 71 deletions(-) create mode 100644 nativescript-angular/animations.ts create mode 100644 nativescript-angular/animations/animation-driver.ts create mode 100644 nativescript-angular/animations/animation-engine.ts create mode 100644 nativescript-angular/animations/animation-player.ts create mode 100644 nativescript-angular/animations/dom-utils.ts create mode 100644 nativescript-angular/animations/utils.ts diff --git a/nativescript-angular/animations.ts b/nativescript-angular/animations.ts new file mode 100644 index 000000000..30b32f3d6 --- /dev/null +++ b/nativescript-angular/animations.ts @@ -0,0 +1,52 @@ +import { NgModule, Injectable, NgZone, Provider, RendererFactory2 } from "@angular/core"; + +import { + AnimationDriver, + ɵAnimationEngine as AnimationEngine, + ɵAnimationStyleNormalizer as AnimationStyleNormalizer, + ɵWebAnimationsStyleNormalizer as WebAnimationsStyleNormalizer +} from "@angular/animations/browser"; + +import { ɵAnimationRendererFactory as AnimationRendererFactory } from "@angular/platform-browser/animations"; + +import { NativeScriptAnimationEngine } from "./animations/animation-engine"; +import { NativeScriptAnimationDriver } from "./animations/animation-driver"; +import { NativeScriptModule } from "./nativescript.module"; +import { NativeScriptRendererFactory } from "./renderer"; + +@Injectable() +export class InjectableAnimationEngine extends NativeScriptAnimationEngine { + constructor(driver: AnimationDriver, normalizer: AnimationStyleNormalizer) { + super(driver, normalizer); + } +} + +export function instantiateSupportedAnimationDriver() { + return new NativeScriptAnimationDriver(); +} + +export function instantiateRendererFactory( + renderer: NativeScriptRendererFactory, engine: AnimationEngine, zone: NgZone) { + return new AnimationRendererFactory(renderer, engine, zone); +} + +export function instanciateDefaultStyleNormalizer() { + return new WebAnimationsStyleNormalizer(); +} + +export const NATIVESCRIPT_ANIMATIONS_PROVIDERS: Provider[] = [ + {provide: AnimationDriver, useFactory: instantiateSupportedAnimationDriver}, + {provide: AnimationStyleNormalizer, useFactory: instanciateDefaultStyleNormalizer}, + {provide: AnimationEngine, useClass: InjectableAnimationEngine}, { + provide: RendererFactory2, + useFactory: instantiateRendererFactory, + deps: [NativeScriptRendererFactory, AnimationEngine, NgZone] + } +]; + +@NgModule({ + imports: [NativeScriptModule], + providers: NATIVESCRIPT_ANIMATIONS_PROVIDERS, +}) +export class NativeScriptAnimationsModule { +} diff --git a/nativescript-angular/animations/animation-driver.ts b/nativescript-angular/animations/animation-driver.ts new file mode 100644 index 000000000..d1dd2b032 --- /dev/null +++ b/nativescript-angular/animations/animation-driver.ts @@ -0,0 +1,32 @@ +import { AnimationPlayer } from "@angular/animations"; +import { NgView } from "../element-registry"; + +import { NativeScriptAnimationPlayer } from "./animation-player"; +import { Keyframe } from "./utils"; + +export abstract class AnimationDriver { + abstract animate( + element: any, + keyframes: Keyframe[], + duration: number, + delay: number, + easing: string + ): AnimationPlayer; +} + +export class NativeScriptAnimationDriver implements AnimationDriver { + computeStyle(element: NgView, prop: string): string { + return element.style[`css-${prop}`]; + } + + animate( + element: NgView, + keyframes: Keyframe[], + duration: number, + delay: number, + easing: string + ): AnimationPlayer { + return new NativeScriptAnimationPlayer( + element, keyframes, duration, delay, easing); + } +} diff --git a/nativescript-angular/animations/animation-engine.ts b/nativescript-angular/animations/animation-engine.ts new file mode 100644 index 000000000..f9fab7b44 --- /dev/null +++ b/nativescript-angular/animations/animation-engine.ts @@ -0,0 +1,143 @@ +import { ɵDomAnimationEngine as DomAnimationEngine } from "@angular/animations/browser"; +import { AnimationEvent, AnimationPlayer } from "@angular/animations"; + +import { NgView } from "../element-registry"; +import { + copyArray, + cssClasses, + deleteFromArrayMap, + eraseStylesOverride, + getOrSetAsInMap, + makeAnimationEvent, + optimizeGroupPlayer, + setStyles, +} from "./dom-utils"; + +const MARKED_FOR_ANIMATION = "ng-animate"; + +interface QueuedAnimationTransitionTuple { + element: NgView; + player: AnimationPlayer; + triggerName: string; + event: AnimationEvent; +} + +// we are extending Angular's animation engine and +// overriding a few methods that work on the DOM +export class NativeScriptAnimationEngine extends DomAnimationEngine { + // this method is almost completely copied from + // the original animation engine, just replaced + // a few method invocations with overriden ones + animateTransition(element: NgView, instruction: any): AnimationPlayer { + const triggerName = instruction.triggerName; + + let previousPlayers: AnimationPlayer[]; + if (instruction.isRemovalTransition) { + previousPlayers = this._onRemovalTransitionOverride(element); + } else { + previousPlayers = []; + const existingTransitions = this._getTransitionAnimation(element); + const existingPlayer = existingTransitions ? existingTransitions[triggerName] : null; + if (existingPlayer) { + previousPlayers.push(existingPlayer); + } + } + + // it's important to do this step before destroying the players + // so that the onDone callback below won"t fire before this + eraseStylesOverride(element, instruction.fromStyles); + + // we first run this so that the previous animation player + // data can be passed into the successive animation players + let totalTime = 0; + const players = instruction.timelines.map(timelineInstruction => { + totalTime = Math.max(totalTime, timelineInstruction.totalTime); + return (this)._buildPlayer(element, timelineInstruction, previousPlayers); + }); + + previousPlayers.forEach(previousPlayer => previousPlayer.destroy()); + const player = optimizeGroupPlayer(players); + player.onDone(() => { + player.destroy(); + const elmTransitionMap = this._getTransitionAnimation(element); + if (elmTransitionMap) { + delete elmTransitionMap[triggerName]; + if (Object.keys(elmTransitionMap).length === 0) { + (this)._activeTransitionAnimations.delete(element); + } + } + deleteFromArrayMap((this)._activeElementAnimations, element, player); + setStyles(element, instruction.toStyles); + }); + + const elmTransitionMap = getOrSetAsInMap((this)._activeTransitionAnimations, element, {}); + elmTransitionMap[triggerName] = player; + + this._queuePlayerOverride( + element, triggerName, player, + makeAnimationEvent( + element, triggerName, instruction.fromState, instruction.toState, + null, // this will be filled in during event creation + totalTime)); + + return player; + } + + // overriden to use eachChild method of View + // instead of DOM querySelectorAll + private _onRemovalTransitionOverride(element: NgView): AnimationPlayer[] { + // when a parent animation is set to trigger a removal we want to + // find all of the children that are currently animating and clear + // them out by destroying each of them. + let elms = []; + element.eachChild(child => { + if (cssClasses(child).get(MARKED_FOR_ANIMATION)) { + elms.push(child); + } + + return true; + }); + + for (let i = 0; i < elms.length; i++) { + const elm = elms[i]; + const activePlayers = this._getElementAnimation(elm); + if (activePlayers) { + activePlayers.forEach(player => player.destroy()); + } + + const activeTransitions = this._getTransitionAnimation(elm); + if (activeTransitions) { + Object.keys(activeTransitions).forEach(triggerName => { + const player = activeTransitions[triggerName]; + if (player) { + player.destroy(); + } + }); + } + } + + // we make a copy of the array because the actual source array is modified + // each time a player is finished/destroyed (the forEach loop would fail otherwise) + return copyArray(this._getElementAnimation(element)); + } + + // overriden to use cssClasses method to access native element's styles + // instead of DOM element's classList + private _queuePlayerOverride( + element: NgView, triggerName: string, player: AnimationPlayer, event: AnimationEvent) { + const tuple = { element, player, triggerName, event }; + (this)._queuedTransitionAnimations.push(tuple); + player.init(); + + cssClasses(element).set(MARKED_FOR_ANIMATION, true); + player.onDone(() => cssClasses(element).set(MARKED_FOR_ANIMATION, false)); + } + + private _getElementAnimation(element: NgView) { + return (this)._activeElementAnimations.get(element); + } + + private _getTransitionAnimation(element: NgView) { + return (this)._activeTransitionAnimations.get(element); + } +} diff --git a/nativescript-angular/animations/animation-player.ts b/nativescript-angular/animations/animation-player.ts new file mode 100644 index 000000000..fcc60d8f1 --- /dev/null +++ b/nativescript-angular/animations/animation-player.ts @@ -0,0 +1,108 @@ +import { AnimationPlayer } from "@angular/animations"; +import { + KeyframeAnimation, + KeyframeAnimationInfo, +} from "tns-core-modules/ui/animation/keyframe-animation"; + +import { NgView } from "../element-registry"; +import { Keyframe, getAnimationCurve, parseAnimationKeyframe } from "./utils"; + +export class NativeScriptAnimationPlayer implements AnimationPlayer { + public parentPlayer: AnimationPlayer = null; + + private _startSubscriptions: Function[] = []; + private _doneSubscriptions: Function[] = []; + private _finished = false; + private _started = false; + private animation: KeyframeAnimation; + + constructor( + private target: NgView, + keyframes: Keyframe[], + duration: number, + delay: number, + easing: string + ) { + this.initKeyframeAnimation(keyframes, duration, delay, easing); + } + + init(): void { + } + + hasStarted(): boolean { + return this._started; + } + + onStart(fn: Function): void { this._startSubscriptions.push(fn); } + onDone(fn: Function): void { this._doneSubscriptions.push(fn); } + onDestroy(fn: Function): void { this._doneSubscriptions.push(fn); } + + play(): void { + if (!this.animation) { + return; + } + + if (!this._started) { + this._started = true; + this._startSubscriptions.forEach(fn => fn()); + this._startSubscriptions = []; + } + + this.animation.play(this.target) + .then(() => this.onFinish()) + .catch((_e) => { }); + } + + pause(): void { + throw new Error("AnimationPlayer.pause method is not supported!"); + } + + finish(): void { + throw new Error("AnimationPlayer.finish method is not supported!"); + } + + reset(): void { + if (this.animation && this.animation.isPlaying) { + this.animation.cancel(); + } + } + + restart(): void { + this.reset(); + this.play(); + } + + destroy(): void { + this.reset(); + this.onFinish(); + } + + setPosition(_p: any): void { + throw new Error("AnimationPlayer.setPosition method is not supported!"); + } + + getPosition(): number { + return 0; + } + + private initKeyframeAnimation(keyframes: Keyframe[], duration: number, delay: number, easing: string) { + let info = new KeyframeAnimationInfo(); + info.isForwards = true; + info.iterations = 1; + info.duration = duration === 0 ? 0.01 : duration; + info.delay = delay; + info.curve = getAnimationCurve(easing); + info.keyframes = keyframes.map(parseAnimationKeyframe); + + this.animation = KeyframeAnimation.keyframeAnimationFromInfo(info); + } + + private onFinish() { + if (!this._finished) { + this._finished = true; + this._started = false; + this._doneSubscriptions.forEach(fn => fn()); + this._doneSubscriptions = []; + } + } +} diff --git a/nativescript-angular/animations/dom-utils.ts b/nativescript-angular/animations/dom-utils.ts new file mode 100644 index 000000000..00584f70e --- /dev/null +++ b/nativescript-angular/animations/dom-utils.ts @@ -0,0 +1,77 @@ +import { + AnimationEvent, + AnimationPlayer, + NoopAnimationPlayer, + ɵAnimationGroupPlayer, + ɵStyleData, +} from "@angular/animations"; +import { unsetValue } from "tns-core-modules/ui/core/view"; + +import { NgView } from "../element-registry"; + +// overriden to use the default 'unsetValue' +// instead of empty string '' +export function eraseStylesOverride(element: NgView, styles: ɵStyleData) { + if (element["style"]) { + Object.keys(styles).forEach(prop => { + element.style[prop] = unsetValue; + }); + } +} + +export function cssClasses(element: NgView) { + if (!element.ngCssClasses) { + element.ngCssClasses = new Map(); + } + return element.ngCssClasses; +} + +// The following functions are from +// the original DomAnimationEngine +export function getOrSetAsInMap(map: Map, key: any, defaultValue: any) { + let value = map.get(key); + if (!value) { + map.set(key, value = defaultValue); + } + return value; +} + +export function deleteFromArrayMap(map: Map, key: any, value: any) { + let arr = map.get(key); + if (arr) { + const index = arr.indexOf(value); + if (index >= 0) { + arr.splice(index, 1); + if (arr.length === 0) { + map.delete(key); + } + } + } +} + +export function optimizeGroupPlayer(players: AnimationPlayer[]): AnimationPlayer { + switch (players.length) { + case 0: + return new NoopAnimationPlayer(); + case 1: + return players[0]; + default: + return new ɵAnimationGroupPlayer(players); + } +} + +export function copyArray(source: any[]): any[] { + return source ? source.splice(0) : []; +} + +export function makeAnimationEvent( + element: NgView, triggerName: string, fromState: string, toState: string, phaseName: string, + totalTime: number): AnimationEvent { + return {element, triggerName, fromState, toState, phaseName, totalTime}; +} + +export function setStyles(element: NgView, styles: ɵStyleData) { + if (element["style"]) { + Object.keys(styles).forEach(prop => element.style[prop] = styles[prop]); + } +} diff --git a/nativescript-angular/animations/utils.ts b/nativescript-angular/animations/utils.ts new file mode 100644 index 000000000..05833e3a3 --- /dev/null +++ b/nativescript-angular/animations/utils.ts @@ -0,0 +1,139 @@ +import { + KeyframeDeclaration, + KeyframeInfo, +} from "tns-core-modules/ui/animation/keyframe-animation"; +import { CssAnimationProperty } from "tns-core-modules/ui/core/properties"; +import { AnimationCurve } from "tns-core-modules/ui/enums"; + +export interface Keyframe { + [key: string]: string | number; +} + +interface Transformation { + property: string; + value: number | { x: number, y: number }; +} + +const TRANSFORM_MATCHER = new RegExp(/(.+)\((.+)\)/); +const TRANSFORM_SPLITTER = new RegExp(/[\s,]+/); + +const STYLE_TRANSFORMATION_MAP = Object.freeze({ + "scale": value => ({ property: "scale", value }), + "scale3d": value => ({ property: "scale", value }), + "scaleX": value => ({ property: "scale", value: { x: value, y: 1 } }), + "scaleY": value => ({ property: "scale", value: { x: 1, y: value } }), + + "translate": value => ({ property: "translate", value }), + "translate3d": value => ({ property: "translate", value }), + "translateX": value => ({ property: "translate", value: { x: value, y: 0 } }), + "translateY": value => ({ property: "translate", value: { x: 0, y: value } }), + + "rotate": value => ({ property: "rotate", value }), + + "none": _value => [ + { property: "scale", value: { x: 1, y: 1 } }, + { property: "translate", value: { x: 0, y: 0 } }, + { property: "rotate", value: 0 }, + ], +}); + +const STYLE_CURVE_MAP = Object.freeze({ + "ease": AnimationCurve.ease, + "linear": AnimationCurve.linear, + "ease-in": AnimationCurve.easeIn, + "ease-out": AnimationCurve.easeOut, + "ease-in-out": AnimationCurve.easeInOut, + "spring": AnimationCurve.spring, +}); + +export function getAnimationCurve(value: string): any { + if (!value) { + return AnimationCurve.ease; + } + + const curve = STYLE_CURVE_MAP[value]; + if (curve) { + return curve; + } + + const [, property = "", pointsString = ""] = TRANSFORM_MATCHER.exec(value) || []; + const coords = pointsString.split(TRANSFORM_SPLITTER).map(stringToBezieCoords); + + if (property !== "cubic-bezier" || coords.length !== 4) { + throw new Error(`Invalid value for animation: ${value}`); + } else { + return (AnimationCurve).cubicBezier(...coords); + } +} + +export function parseAnimationKeyframe(styles: Keyframe) { + let keyframeInfo = {}; + keyframeInfo.duration = styles.offset; + keyframeInfo.declarations = Object.keys(styles).reduce((declarations, prop) => { + let value = styles[prop]; + + const property = CssAnimationProperty._getByCssName(prop); + if (property) { + if (typeof value === "string" && property._valueConverter) { + value = property._valueConverter(value); + } + declarations.push({ property: property.name, value }); + } else if (typeof value === "string" && prop === "transform") { + declarations.push(...parseTransformation(value)); + } + + return declarations; + }, new Array()); + + return keyframeInfo; +} + +function stringToBezieCoords(value: string): number { + let result = parseFloat(value); + if (result < 0) { + return 0; + } else if (result > 1) { + return 1; + } + + return result; +} + +function parseTransformation(styleString: string): KeyframeDeclaration[] { + return parseStyle(styleString) + .reduce((transformations, style) => { + const transform = STYLE_TRANSFORMATION_MAP[style.property](style.value); + + if (Array.isArray(transform)) { + transformations.push(...transform); + } else if (typeof transform !== "undefined") { + transformations.push(transform); + } + + return transformations; + }, new Array()); +} + +function parseStyle(text: string): Transformation[] { + return text.split(TRANSFORM_SPLITTER).map(stringToTransformation).filter(t => !!t); +} + +function stringToTransformation(text: string): Transformation { + const [, property = "", stringValue = ""] = TRANSFORM_MATCHER.exec(text) || []; + if (!property) { + return; + } + + const [x, y] = stringValue.split(",").map(parseFloat); + if (x && y) { + return { property, value: {x, y} }; + } else { + let value: number = x; + + if (stringValue.slice(-3) === "rad") { + value *= 180.0 / Math.PI; + } + + return { property, value }; + } +} diff --git a/nativescript-angular/dom-adapter.ts b/nativescript-angular/dom-adapter.ts index e558c7832..119e41d91 100644 --- a/nativescript-angular/dom-adapter.ts +++ b/nativescript-angular/dom-adapter.ts @@ -49,6 +49,7 @@ export class NativeScriptDomAdapter implements ɵDomAdapter { getProperty(_el: Element, _name: string): any { throw new Error("Not implemented!") } invoke(_el: Element, _methodName: string, _args: any[]): any { throw new Error("Not implemented!") } + contains(_nodeA: any, _nodeB: any): any /** TODO #9100 */ { throw new Error("Not implemented!") } parse(_templateHtml: string): any /** TODO #9100 */ { throw new Error("Not implemented!") } query(_selector: string): any { throw new Error("Not implemented!") } querySelector(_el: any /** TODO #9100 */, _selector: string): HTMLElement { throw new Error("Not implemented!") } diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 7ef7b3e42..28f05e3e9 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -25,15 +25,14 @@ }, "dependencies": { "nativescript-intl": "~0.0.8", - "@angular/animations": "4.0.0-rc.3", - "@angular/core": "4.0.0-rc.3", - "@angular/common": "4.0.0-rc.3", - "@angular/compiler": "4.0.0-rc.3", - "@angular/http": "4.0.0-rc.3", - "@angular/platform-browser": "4.0.0-rc.3", - "@angular/platform-browser-dynamic": "4.0.0-rc.3", - "@angular/forms": "4.0.0-rc.3", - "@angular/router": "4.0.0-rc.3", + "@angular/core": "4.0.0-rc.5", + "@angular/common": "4.0.0-rc.5", + "@angular/compiler": "4.0.0-rc.5", + "@angular/http": "4.0.0-rc.5", + "@angular/platform-browser": "4.0.0-rc.5", + "@angular/platform-browser-dynamic": "4.0.0-rc.5", + "@angular/forms": "4.0.0-rc.5", + "@angular/router": "4.0.0-rc.5", "rxjs": "^5.0.1", "reflect-metadata": "~0.1.8", "punycode": "1.3.2", @@ -41,12 +40,13 @@ "url": "0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "4.0.0-rc.3", + "@angular/animations": "4.0.0-rc.5", + "@angular/compiler-cli": "4.0.0-rc.5", "codelyzer": "~2.0.0", "tns-core-modules": "internal-preview", "tslint": "~4.4.0", "typescript": "~2.2.1", - "zone.js": "^0.7.2" + "zone.js": "^0.8.2" }, "nativescript": {} } diff --git a/nativescript-angular/postinstall.js b/nativescript-angular/postinstall.js index c0eb367da..28b8ea45f 100644 --- a/nativescript-angular/postinstall.js +++ b/nativescript-angular/postinstall.js @@ -1,9 +1,21 @@ var fs = require("fs"); var os = require("os"); +var path = require("path"); var hookHelper = require("./hooks/hook-helper"); var projectDir = hookHelper.findProjectDir(); if (projectDir) { + var bundlePath = path.join(projectDir, "node_modules/@angular/animations/browser/package.json"); + + try { + var content = require(bundlePath); + content.main = "../bundles/animations-browser.umd.js"; + console.log(content) + fs.writeFileSync(bundlePath, JSON.stringify(content), "utf8"); + } catch(e) { + console.error(e.message); + } + var hooksDir = hookHelper.getHooksDir(), beforeLivesyncHookDir = hookHelper.getBeforeLivesyncHookDir(), content = 'module.exports = require("nativescript-angular/hooks/before-livesync");'; diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index fcac59bbb..96a186835 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -1,7 +1,7 @@ import { Inject, Injectable, Optional, NgZone, Renderer2, RendererFactory2, RendererType2, - ViewEncapsulation, + RendererStyleFlags2, ViewEncapsulation, } from "@angular/core"; import { escapeRegexSymbols } from "tns-core-modules/utils/utils"; @@ -178,12 +178,12 @@ export class NativeScriptRenderer extends Renderer2 { this.viewUtil.removeClass(view, name); } - setStyle(view: NgView, styleName: string, value: any, _hasVendorPrefix?: boolean, _hasImportant?: boolean): void { + setStyle(view: NgView, styleName: string, value: any, _flags?: RendererStyleFlags2): void { traceLog(`NativeScriptRenderer.setStyle: ${styleName} = ${value}`); this.viewUtil.setStyle(view, styleName, value); } - removeStyle(view: NgView, styleName: string, _hasVendorPrefix?: boolean): void { + removeStyle(view: NgView, styleName: string, _flags?: RendererStyleFlags2): void { traceLog("NativeScriptRenderer.removeStyle: ${styleName}"); this.viewUtil.removeStyle(view, styleName); } diff --git a/nativescript-angular/router/page-router-outlet.ts b/nativescript-angular/router/page-router-outlet.ts index b4b9a2797..1208dd214 100644 --- a/nativescript-angular/router/page-router-outlet.ts +++ b/nativescript-angular/router/page-router-outlet.ts @@ -1,6 +1,6 @@ import { Attribute, ComponentFactory, ComponentRef, Directive, - ReflectiveInjector, ResolvedReflectiveProvider, ViewContainerRef, + ViewContainerRef, Inject, ComponentFactoryResolver, Injector } from "@angular/core"; import { isPresent } from "../lang-facade"; @@ -68,7 +68,9 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix public outletMap: RouterOutletMap; - get locationInjector(): Injector { return this.containerRef.injector; } + /** @deprecated from Angular since v4 */ + get locationInjector(): Injector { return this.location.injector; } + /** @deprecated from Angular since v4 */ get locationFactoryResolver(): ComponentFactoryResolver { return this.resolver; } get isActivated(): boolean { @@ -92,7 +94,7 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix constructor( parentOutletMap: RouterOutletMap, - private containerRef: ViewContainerRef, + private location: ViewContainerRef, @Attribute("name") name: string, private locationStrategy: NSLocationStrategy, private componentFactoryResolver: ComponentFactoryResolver, @@ -145,37 +147,35 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix * Called by the Router to instantiate a new component during the commit phase of a navigation. * This method in turn is responsible for calling the `routerOnActivate` hook of its child. */ - activate( - activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver, injector: Injector, - providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap): void { + activateWith( + activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null, + outletMap: RouterOutletMap): void { this.outletMap = outletMap; this.currentActivatedRoute = activatedRoute; + resolver = resolver || this.resolver; + if (this.locationStrategy._isPageNavigatingBack()) { this.activateOnGoBack(activatedRoute, outletMap); } else { - this.activateOnGoForward(activatedRoute, providers, outletMap, resolver, injector); + this.activateOnGoForward(activatedRoute, outletMap, resolver); } } private activateOnGoForward( activatedRoute: ActivatedRoute, - providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap, - loadedResolver: ComponentFactoryResolver, - injector: Injector): void { + loadedResolver: ComponentFactoryResolver): void { const factory = this.getComponentFactory(activatedRoute, loadedResolver); const pageRoute = new PageRoute(activatedRoute); - providers = [...providers, ...ReflectiveInjector.resolve( - [{ provide: PageRoute, useValue: pageRoute }])]; + const inj = new OutletInjector(activatedRoute, outletMap, this.location.injector); if (this.isInitialPage) { log("PageRouterOutlet.activate() initial page - just load component"); this.isInitialPage = false; - const inj = ReflectiveInjector.fromResolvedProviders(providers, injector); - this.currentActivatedComp = this.containerRef.createComponent( - factory, this.containerRef.length, inj, []); + this.currentActivatedComp = this.location.createComponent( + factory, this.location.length, inj, []); this.currentActivatedComp.changeDetectorRef.detectChanges(); @@ -189,13 +189,8 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix isNavigation: true, componentType: factory.componentType }); - const pageResolvedProvider = ReflectiveInjector.resolve([ - { provide: Page, useValue: page } - ]); - const childInjector = ReflectiveInjector.fromResolvedProviders( - [...providers, ...pageResolvedProvider], injector); - const loaderRef = this.containerRef.createComponent( - this.detachedLoaderFactory, this.containerRef.length, childInjector, []); + const loaderRef = this.location.createComponent( + this.detachedLoaderFactory, this.location.length, inj, []); loaderRef.changeDetectorRef.detectChanges(); this.currentActivatedComp = loaderRef.instance.loadWithFactory(factory); @@ -275,6 +270,23 @@ export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix } } +class OutletInjector implements Injector { + constructor( + private route: ActivatedRoute, private map: RouterOutletMap, private parent: Injector) { } + + get(token: any, notFoundValue?: any): any { + if (token === ActivatedRoute) { + return this.route; + } + + if (token === RouterOutletMap) { + return this.map; + } + + return this.parent.get(token, notFoundValue); + } +} + function log(msg: string) { routerLog(msg); } diff --git a/ng-sample/app/app.ts b/ng-sample/app/app.ts index 0772c7ced..63ec4e6cb 100644 --- a/ng-sample/app/app.ts +++ b/ng-sample/app/app.ts @@ -1,13 +1,6 @@ -//import "globals"; -// import "./modules"; -//global.registerModule("./main-page", function () { return require("./main-page"); }); - -//import * as profiling from "./profiling"; -//profiling.start("application-start"); - -// "nativescript-angular/application" import should be first in order to load some required settings (like globals and reflect-metadata) import { NativeScriptModule } from "nativescript-angular/nativescript.module"; import { platformNativeScriptDynamic } from "nativescript-angular/platform"; +import { NativeScriptAnimationsModule } from "nativescript-angular/animations"; import { onAfterLivesync, onBeforeLivesync } from "nativescript-angular/platform-common"; import { NgModule } from "@angular/core"; import { Router } from "@angular/router"; @@ -70,7 +63,10 @@ import { AnimationStatesTest } from "./examples/animation/animation-states-test" class ExampleModule { } function makeExampleModule(componentType) { - let imports: any[] = [ExampleModule]; + let imports: any[] = [ + NativeScriptAnimationsModule, + ExampleModule, + ]; if (componentType.routes) { imports.push(NativeScriptRouterModule.forRoot(componentType.routes)) } @@ -83,20 +79,22 @@ function makeExampleModule(componentType) { entries = componentType.entries; } entries.push(componentType); + let providers = []; if (componentType.providers) { - providers = componentType.providers; + providers = [componentType.providers]; } + @NgModule({ bootstrap: [componentType], - imports: imports, + imports, entryComponents: entries, declarations: [ ...entries, ...exports, ], - providers: providers, - exports: exports, + providers, + exports, }) class ExampleModuleForComponent { } @@ -112,7 +110,7 @@ const customPageFactoryProvider = { } }; -platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest)); +// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest)); // platformNativeScriptDynamic(undefined, [customPageFactoryProvider]).bootstrapModule(makeExampleModule(RendererTest)); // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(TabViewTest)); // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(Benchmark)); @@ -135,7 +133,7 @@ platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest)); // animations // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesTest)); // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationNgClassTest)); -// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest)); +platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest)); // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationEnterLeaveTest)); //Livesync test diff --git a/ng-sample/app/examples/animation/animation-keyframes-test.ts b/ng-sample/app/examples/animation/animation-keyframes-test.ts index f4c5a48ca..b9da4a5f0 100644 --- a/ng-sample/app/examples/animation/animation-keyframes-test.ts +++ b/ng-sample/app/examples/animation/animation-keyframes-test.ts @@ -12,7 +12,7 @@ import {Component, trigger, style, animate, state, transition, keyframes } from state('inactive', style({ transform: 'translateX(0)', opacity: 0.2 })), transition('inactive => active', [ animate(300, keyframes([ - style({opacity: 0.2, transform: 'translateX(-100)', offset: 0}), + style({opacity: 0.2, transform: 'translateX(-100),translateY(100)', offset: 0}), style({opacity: 1, transform: 'translateX(15)', offset: 0.3}), style({opacity: 1, transform: 'translateX(0)', offset: 1.0}) ])) diff --git a/ng-sample/package.json b/ng-sample/package.json index ceff974d9..0c0385fc3 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,20 +23,21 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "@angular/common": "4.0.0-rc.3", - "@angular/compiler": "4.0.0-rc.3", - "@angular/core": "4.0.0-rc.3", - "@angular/forms": "4.0.0-rc.3", - "@angular/http": "4.0.0-rc.3", - "@angular/platform-browser": "4.0.0-rc.3", - "@angular/platform-browser-dynamic": "4.0.0-rc.3", - "@angular/router": "4.0.0-rc.3", + "@angular/animations": "4.0.0-rc.5", + "@angular/common": "4.0.0-rc.5", + "@angular/compiler": "4.0.0-rc.5", + "@angular/core": "4.0.0-rc.5", + "@angular/forms": "4.0.0-rc.5", + "@angular/http": "4.0.0-rc.5", + "@angular/platform-browser": "4.0.0-rc.5", + "@angular/platform-browser-dynamic": "4.0.0-rc.5", + "@angular/router": "4.0.0-rc.5", "nativescript-angular": "file:../nativescript-angular", "rxjs": "~5.0.1", - "tns-core-modules": "internal-preview" + "tns-core-modules": "internal-preview", + "zone.js": "~0.8.2" }, "devDependencies": { - "zone.js": "~0.7.2", "babel-traverse": "6.9.0", "babel-types": "6.10.0", "babylon": "6.8.1", diff --git a/tests/package.json b/tests/package.json index f65d641aa..8258c4c40 100644 --- a/tests/package.json +++ b/tests/package.json @@ -26,16 +26,17 @@ ], "homepage": "http://nativescript.org", "dependencies": { - "@angular/common": "4.0.0-rc.3", - "@angular/compiler": "4.0.0-rc.3", - "@angular/core": "4.0.0-rc.3", - "@angular/http": "4.0.0-rc.3", - "@angular/platform-browser": "4.0.0-rc.3", - "@angular/platform-browser-dynamic": "4.0.0-rc.3", - "@angular/router": "4.0.0-rc.3", + "@angular/common": "4.0.0-rc.5", + "@angular/compiler": "4.0.0-rc.5", + "@angular/core": "4.0.0-rc.5", + "@angular/http": "4.0.0-rc.5", + "@angular/platform-browser": "4.0.0-rc.5", + "@angular/platform-browser-dynamic": "4.0.0-rc.5", + "@angular/router": "4.0.0-rc.5", "nativescript-angular": "internal-preview", "nativescript-unit-test-runner": "^0.3.4", "rxjs": "~5.0.1", + "zone.js": "^0.8.2", "tns-core-modules": "internal-preview" }, "devDependencies": { @@ -58,8 +59,7 @@ "socket.io": "1.4.8", "socket.io-client": "1.4.8", "typescript": "~2.2.0", - "wd": "0.4.0", - "zone.js": "^0.7.2" + "wd": "0.4.0" }, "scripts": { "updateTests": "grunt updateTests", From 5ba634b3d313a23f34e111e8a38b21238532a86c Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 21 Mar 2017 11:11:03 +0200 Subject: [PATCH 28/39] refactor: lint test apps --- nativescript-angular/package.json | 4 +- nativescript-angular/renderer.ts | 5 +- ng-sample/app/app.ts | 12 +- .../examples/action-bar/action-bar-test.ts | 17 ++- .../animation/animation-enter-leave-test.ts | 30 ++--- .../animation/animation-keyframes-test.ts | 28 ++--- .../animation/animation-ngclass-test.ts | 7 +- .../animation/animation-states-test.ts | 16 +-- ng-sample/app/examples/http/http-test.ts | 20 +-- ng-sample/app/examples/image/image-test.ts | 26 ++-- ng-sample/app/examples/list/data.service.ts | 11 +- .../app/examples/list/list-test-async.ts | 16 ++- ng-sample/app/examples/list/list-test.ts | 20 +-- .../app/examples/list/template-selector.ts | 19 +-- .../livesync-test/livesync-test-app.ts | 2 +- ng-sample/app/examples/modal/modal-content.ts | 6 +- ng-sample/app/examples/modal/modal-test.ts | 8 +- .../platform-directives-test.ts | 5 +- ng-sample/app/examples/renderer-test.ts | 12 +- .../app/examples/router/clear-history-test.ts | 16 ++- ng-sample/app/examples/router/login-test.ts | 22 ++-- .../router/page-router-outlet-nested-test.ts | 22 ++-- .../router/page-router-outlet-test.ts | 10 +- .../app/examples/router/router-outlet-test.ts | 12 +- .../app/examples/tab-view/tab-view-test.ts | 15 +-- ng-sample/app/performance/benchmark.ts | 52 ++++---- ng-sample/app/performance/profiling.ts | 20 ++- ng-sample/app/starter.ts | 9 +- ng-sample/package.json | 20 +-- ng-sample/tslint.json | 117 ++++++++++++++++++ tests/app/first.component.ts | 4 +- tests/app/lazy-loaded.module.ts | 4 +- tests/app/main.ts | 20 +-- tests/app/multi-page-main.component.ts | 4 +- tests/app/second.component.ts | 4 +- tests/app/single-page-main.component.ts | 4 +- tests/app/snippets/gestures.component.ts | 30 ++--- tests/app/snippets/icon-font.component.ts | 8 +- tests/app/snippets/layouts.component.ts | 16 +-- .../list-view/template-selector.component.ts | 11 +- tests/app/snippets/navigation/page-outlet.ts | 9 +- tests/app/snippets/navigation/route-params.ts | 9 +- .../snippets/navigation/router-extensions.ts | 8 +- .../app/snippets/navigation/router-outlet.ts | 10 +- tests/app/tests/detached-loader-tests.ts | 26 ++-- tests/app/tests/http.ts | 39 +++--- tests/app/tests/list-view-tests.ts | 10 +- tests/app/tests/mocks/ns-file-system.mock.ts | 13 +- tests/app/tests/modal-dialog.ts | 8 +- tests/app/tests/ns-location-strategy.ts | 9 +- tests/app/tests/platform-filter-components.ts | 20 ++- tests/app/tests/property-sets.ts | 29 ++--- tests/app/tests/renderer-tests.ts | 36 ++++-- tests/app/tests/snippets.ts | 37 ++++-- tests/app/tests/style-properties.ts | 4 +- tests/app/tests/test-app.ts | 30 +++-- tests/app/tests/test-config.ts | 4 +- tests/app/tests/test-utils.ts | 11 +- tests/app/tests/third-party-view.ts | 2 +- tests/app/tests/third-party.ts | 28 +++-- tests/app/tests/value-accessor-tests.ts | 48 +++---- tests/app/tests/xhr-paths.ts | 12 +- tests/package.json | 4 +- tests/tslint.json | 117 ++++++++++++++++++ 64 files changed, 771 insertions(+), 436 deletions(-) create mode 100644 ng-sample/tslint.json create mode 100644 tests/tslint.json diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 28f05e3e9..074563ce3 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -42,9 +42,9 @@ "devDependencies": { "@angular/animations": "4.0.0-rc.5", "@angular/compiler-cli": "4.0.0-rc.5", - "codelyzer": "~2.0.0", + "codelyzer": "~3.0.0-beta.4", "tns-core-modules": "internal-preview", - "tslint": "~4.4.0", + "tslint": "~4.5.0", "typescript": "~2.2.1", "zone.js": "^0.8.2" }, diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 96a186835..b9bce61bc 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -10,14 +10,11 @@ import { View } from "tns-core-modules/ui/core/view"; import { addCss } from "tns-core-modules/application"; import { topmost } from "tns-core-modules/ui/frame"; -import { APP_ROOT_VIEW, DEVICE } from "./platform-providers"; +import { APP_ROOT_VIEW, DEVICE, getRootPage } from "./platform-providers"; import { isBlank } from "./lang-facade"; import { ViewUtil } from "./view-util"; import { NgView } from "./element-registry"; import { rendererLog as traceLog } from "./trace"; -import { escapeRegexSymbols } from "tns-core-modules/utils/utils"; -import { Device } from "tns-core-modules/platform"; -import { getRootPage } from "./platform-providers"; // CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application. const COMPONENT_REGEX = /%COMP%/g; diff --git a/ng-sample/app/app.ts b/ng-sample/app/app.ts index 63ec4e6cb..3f803858a 100644 --- a/ng-sample/app/app.ts +++ b/ng-sample/app/app.ts @@ -68,7 +68,7 @@ function makeExampleModule(componentType) { ExampleModule, ]; if (componentType.routes) { - imports.push(NativeScriptRouterModule.forRoot(componentType.routes)) + imports.push(NativeScriptRouterModule.forRoot(componentType.routes)); } let exports: any[] = []; if (componentType.exports) { @@ -133,11 +133,11 @@ const customPageFactoryProvider = { // animations // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesTest)); // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationNgClassTest)); -platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest)); -// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationEnterLeaveTest)); +// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest)); +platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationEnterLeaveTest)); -//Livesync test -var cachedUrl: string; +// Livesync test +let cachedUrl: string; onBeforeLivesync.subscribe((moduleRef) => { console.log("------- onBeforeLivesync"); if (moduleRef) { @@ -156,5 +156,5 @@ onAfterLivesync.subscribe((moduleRef) => { } }); -//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LivesyncApp)); +// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LivesyncApp)); console.log("APP RESTART"); diff --git a/ng-sample/app/examples/action-bar/action-bar-test.ts b/ng-sample/app/examples/action-bar/action-bar-test.ts index a4e23ed4e..2186e2427 100644 --- a/ng-sample/app/examples/action-bar/action-bar-test.ts +++ b/ng-sample/app/examples/action-bar/action-bar-test.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { Page} from "ui/page"; +import { Component } from "@angular/core"; +import { Page } from "ui/page"; @Component({ selector: "first", @@ -29,7 +29,6 @@ class FirstComponent { @Component({ selector: "nested-component", template: ` - @@ -70,7 +69,7 @@ class SecondComponent { } @Component({ - selector: 'action-bar-test', + selector: "action-bar-test", template: ` @@ -79,14 +78,12 @@ class SecondComponent { }) export class ActionBarTest { static routes = [ - { path: '', component: FirstComponent }, - { path: 'second', component: SecondComponent }, - ] + { path: "", component: FirstComponent }, + { path: "second", component: SecondComponent }, + ]; static entries = [ FirstComponent, SecondComponent, - ] + ]; } - - diff --git a/ng-sample/app/examples/animation/animation-enter-leave-test.ts b/ng-sample/app/examples/animation/animation-enter-leave-test.ts index ce527cac9..307534574 100644 --- a/ng-sample/app/examples/animation/animation-enter-leave-test.ts +++ b/ng-sample/app/examples/animation/animation-enter-leave-test.ts @@ -1,39 +1,39 @@ -import {Component, trigger, style, animate, state, transition } from '@angular/core'; +import {Component, trigger, style, animate, state, transition } from "@angular/core"; @Component({ - selector: 'animation-enter-leave', - templateUrl: './examples/animation/animation-enter-leave-test.html', - styleUrls: [ './examples/animation/animation-enter-leave-test.css' ], + selector: "animation-enter-leave", + templateUrl: "./examples/animation/animation-enter-leave-test.html", + styleUrls: [ "./examples/animation/animation-enter-leave-test.css" ], animations: [ - trigger('state', [ - state('in', style({ 'background-color': 'red', 'opacity': 1 })), - state('void', style({ 'background-color': 'white', 'opacity': 0 })), - transition('void => *', [ animate('600ms ease-out') ]), - transition('* => void', [ animate('600ms ease-out')]) + trigger("state", [ + state("in", style({ "background-color": "red", "opacity": 1 })), + state("void", style({ "background-color": "white", "opacity": 0 })), + transition("void => *", [ animate("600ms ease-out") ]), + transition("* => void", [ animate("600ms ease-out")]) ]) ] }) export class AnimationEnterLeaveTest { - + public items: Array; constructor() { this.items = []; - for (var i = 0; i < 3; i++) { + for (let i = 0; i < 3; i++) { this.items.push("Item " + i); } } - + onAddTap() { this.items.push("Item " + (this.items.length + 1)); } - + onRemoveAllTap() { this.items = []; } - + onItemTap(event) { - var index = this.items.indexOf(event.object.text); + let index = this.items.indexOf(event.object.text); this.items.splice(index, 1); } } diff --git a/ng-sample/app/examples/animation/animation-keyframes-test.ts b/ng-sample/app/examples/animation/animation-keyframes-test.ts index b9da4a5f0..dd5d6ace7 100644 --- a/ng-sample/app/examples/animation/animation-keyframes-test.ts +++ b/ng-sample/app/examples/animation/animation-keyframes-test.ts @@ -1,34 +1,34 @@ -import {Component, trigger, style, animate, state, transition, keyframes } from '@angular/core'; +import {Component, trigger, style, animate, state, transition, keyframes } from "@angular/core"; @Component({ - selector: 'animation-states', + selector: "animation-states", template: ` `, animations: [ - trigger('state', [ - state('active', style({ transform: 'translateX(0)', opacity: 1 })), - state('inactive', style({ transform: 'translateX(0)', opacity: 0.2 })), - transition('inactive => active', [ + trigger("state", [ + state("active", style({ transform: "translateX(0)", opacity: 1 })), + state("inactive", style({ transform: "translateX(0)", opacity: 0.2 })), + transition("inactive => active", [ animate(300, keyframes([ - style({opacity: 0.2, transform: 'translateX(-100),translateY(100)', offset: 0}), - style({opacity: 1, transform: 'translateX(15)', offset: 0.3}), - style({opacity: 1, transform: 'translateX(0)', offset: 1.0}) + style({opacity: 0.2, transform: "translateX(-100),translateY(100)", offset: 0}), + style({opacity: 1, transform: "translateX(15)", offset: 0.3}), + style({opacity: 1, transform: "translateX(0)", offset: 1.0}) ])) ]), - transition('active => inactive', [ + transition("active => inactive", [ animate(300, keyframes([ - style({opacity: 1, transform: 'translateX(0)', offset: 0}), - style({opacity: 1, transform: 'translateX(-15)', offset: 0.7}), - style({opacity: 0.2, transform: 'translateX(100)', offset: 1.0}) + style({opacity: 1, transform: "translateX(0)", offset: 0}), + style({opacity: 1, transform: "translateX(-15)", offset: 0.7}), + style({opacity: 0.2, transform: "translateX(100)", offset: 1.0}) ])) ]) ]) ] }) export class AnimationKeyframesTest { - + isOn = false; onTap() { diff --git a/ng-sample/app/examples/animation/animation-ngclass-test.ts b/ng-sample/app/examples/animation/animation-ngclass-test.ts index 516dc34f0..c0d7b0ba7 100644 --- a/ng-sample/app/examples/animation/animation-ngclass-test.ts +++ b/ng-sample/app/examples/animation/animation-ngclass-test.ts @@ -13,11 +13,6 @@ export class AnimationNgClassTest { onTap() { this.isOn = !this.isOn; - if (this.isOn) { - this.text = "Toggled"; - } - else { - this.text = "Normal"; - } + this.text = this.isOn ? "Toggled" : "Normal"; } } diff --git a/ng-sample/app/examples/animation/animation-states-test.ts b/ng-sample/app/examples/animation/animation-states-test.ts index b72ae4df9..ba6288ea5 100644 --- a/ng-sample/app/examples/animation/animation-states-test.ts +++ b/ng-sample/app/examples/animation/animation-states-test.ts @@ -1,22 +1,22 @@ -import {Component, trigger, style, animate, state, transition } from '@angular/core'; +import {Component, trigger, style, animate, state, transition } from "@angular/core"; @Component({ - selector: 'animation-states', + selector: "animation-states", template: ` `, animations: [ - trigger('state', [ - state('inactive', style({ 'background-color': 'red' })), - state('active', style({ 'background-color': 'green' })), - transition('inactive => active', [ animate('600ms ease-out') ]), - transition('active => inactive', [ animate('600ms ease-out') ]), + trigger("state", [ + state("inactive", style({ "background-color": "red" })), + state("active", style({ "background-color": "green" })), + transition("inactive => active", [ animate("600ms ease-out") ]), + transition("active => inactive", [ animate("600ms ease-out") ]), ]) ] }) export class AnimationStatesTest { - + isOn = false; onTap() { diff --git a/ng-sample/app/examples/http/http-test.ts b/ng-sample/app/examples/http/http-test.ts index c661a749b..ae2c4b8ca 100644 --- a/ng-sample/app/examples/http/http-test.ts +++ b/ng-sample/app/examples/http/http-test.ts @@ -1,15 +1,17 @@ -import {Component} from '@angular/core'; -import {Http} from '@angular/http'; -import 'rxjs/add/operator/map'; +import {Component} from "@angular/core"; +import {Http} from "@angular/http"; +import "rxjs/add/operator/map"; /* IMPORTANT -In order to test out the full image example, to fix the App Transport Security error in iOS 9, you will need to follow this after adding the iOS platform: +In order to test out the full image example, +to fix the App Transport Security error in iOS 9, +you will need to follow this after adding the iOS platform: https://blog.nraboy.com/2015/12/fix-ios-9-app-transport-security-issues-in-nativescript/ */ @Component({ - selector: 'http-test', + selector: "http-test", template: ` @@ -28,12 +30,12 @@ export class HttpTest { public title: string; public description: string; - constructor(private http: Http) { - + constructor(private http: Http) { + } - + public loadLocal() { - this.http.get('~/examples/http/data.json').map(res => res.json()).subscribe((response: any) => { + this.http.get("~/examples/http/data.json").map(res => res.json()).subscribe((response: any) => { let user = response.results[0]; this.title = user.title; this.description = user.description; diff --git a/ng-sample/app/examples/image/image-test.ts b/ng-sample/app/examples/image/image-test.ts index 6d21c9840..8df56a6e6 100644 --- a/ng-sample/app/examples/image/image-test.ts +++ b/ng-sample/app/examples/image/image-test.ts @@ -1,13 +1,15 @@ -import {Component} from '@angular/core'; +import { Component } from "@angular/core"; /* IMPORTANT -In order to test out the full image example, to fix the App Transport Security error in iOS 9, you will need to follow this after adding the iOS platform: +In order to test out the full image example, +to fix the App Transport Security error in iOS 9, +you will need to follow this after adding the iOS platform: https://blog.nraboy.com/2015/12/fix-ios-9-app-transport-security-issues-in-nativescript/ */ @Component({ - selector: 'image-test', + selector: "image-test", template: ` @@ -22,19 +24,19 @@ https://blog.nraboy.com/2015/12/fix-ios-9-app-transport-security-issues-in-nativ ` }) export class ImageTest { - + public currentImage: string; private images: Array = [ - 'res://300x300.jpg', - '~/examples/image/img/Default.png', - 'http://www.codeproject.com/KB/mobile/883465/NativeScript.png' + "res://300x300.jpg", + "~/examples/image/img/Default.png", + "http://www.codeproject.com/KB/mobile/883465/NativeScript.png" ]; private cnt: number = 0; - constructor() { + constructor() { this.currentImage = this.images[this.cnt]; } - + changeImage(direction: number) { if (direction > 0) { this.cnt++; @@ -50,12 +52,12 @@ export class ImageTest { } this.currentImage = this.images[this.cnt]; } - + addImage(e: any, name: string): void { - if (name.indexOf('http') === -1) { + if (name.indexOf("http") === -1) { alert(`Must be a valid url to an image starting with 'http'!`); } else { - this.images.push(name); + this.images.push(name); this.currentImage = this.images[this.images.length - 1]; } } diff --git a/ng-sample/app/examples/list/data.service.ts b/ng-sample/app/examples/list/data.service.ts index e7139138b..2aef70c26 100644 --- a/ng-sample/app/examples/list/data.service.ts +++ b/ng-sample/app/examples/list/data.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable } from "@angular/core"; import { BehaviorSubject } from "rxjs/BehaviorSubject"; export class DataItem { @@ -10,13 +10,13 @@ export class DataService { private _intervalId; private _counter = 0; private _currentItems: Array; - + public items$: BehaviorSubject>; constructor() { this._currentItems = []; - for (var i = 0; i < 3; i++) { - this.appendItem() + for (let i = 0; i < 3; i++) { + this.appendItem(); } this.items$ = new BehaviorSubject(this._currentItems); @@ -51,4 +51,5 @@ export class DataService { this._currentItems.push(new DataItem(this._counter, "data item " + this._counter)); this._counter++; } -} \ No newline at end of file +} + diff --git a/ng-sample/app/examples/list/list-test-async.ts b/ng-sample/app/examples/list/list-test-async.ts index 5b0b76bcf..146ee9cba 100644 --- a/ng-sample/app/examples/list/list-test-async.ts +++ b/ng-sample/app/examples/list/list-test-async.ts @@ -1,12 +1,12 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from "@angular/core"; import { DataItem, DataService } from "./data.service"; import { Observable } from "rxjs/Observable"; import { BehaviorSubject } from "rxjs/BehaviorSubject"; import "rxjs/add/operator/combineLatest"; @Component({ - selector: 'list-test-async', - styleUrls: ['examples/list/styles.css'], + selector: "list-test-async", + styleUrls: ["examples/list/styles.css"], providers: [DataService], changeDetection: ChangeDetectionStrategy.OnPush, template: ` @@ -29,7 +29,11 @@ import "rxjs/add/operator/combineLatest"; - + ` }) @@ -54,8 +58,8 @@ export class ListTestAsync { } @Component({ - selector: 'list-test-async-filter', - styleUrls: ['examples/list/styles.css'], + selector: "list-test-async-filter", + styleUrls: ["examples/list/styles.css"], providers: [DataService], changeDetection: ChangeDetectionStrategy.OnPush, template: ` diff --git a/ng-sample/app/examples/list/list-test.ts b/ng-sample/app/examples/list/list-test.ts index 1a08a1075..ccec8a964 100644 --- a/ng-sample/app/examples/list/list-test.ts +++ b/ng-sample/app/examples/list/list-test.ts @@ -1,14 +1,14 @@ -import {Component, Input, WrappedValue, ChangeDetectionStrategy, AfterViewChecked, DoCheck} from '@angular/core'; -import {Label} from 'ui/label'; -import {ObservableArray} from 'data/observable-array'; +import {Component, Input, WrappedValue, ChangeDetectionStrategy, AfterViewChecked, DoCheck} from "@angular/core"; +import {Label} from "ui/label"; +import {ObservableArray} from "data/observable-array"; class DataItem { constructor(public id: number, public name: string) { } } @Component({ - selector: 'item-component', - styleUrls: ['examples/list/styles.css'], + selector: "item-component", + styleUrls: ["examples/list/styles.css"], changeDetection: ChangeDetectionStrategy.OnPush, template: ` @@ -34,8 +34,8 @@ export class ItemComponent implements AfterViewChecked, DoCheck { } @Component({ - selector: 'list-test', - styleUrls: ['examples/list/styles.css'], + selector: "list-test", + styleUrls: ["examples/list/styles.css"], changeDetection: ChangeDetectionStrategy.OnPush, template: ` @@ -58,7 +58,7 @@ export class ItemComponent implements AfterViewChecked, DoCheck { // IN-PLACE TEMPLATE // @@ -70,7 +70,7 @@ export class ListTest { constructor() { this.myItems = []; this.counter = 0; - for (var i = 0; i < 100; i++) { + for (let i = 0; i < 100; i++) { this.myItems.push(new DataItem(i, "data item " + i)); this.counter = i; } @@ -87,5 +87,5 @@ export class ListTest { public static entries = [ ItemComponent - ] + ]; } diff --git a/ng-sample/app/examples/list/template-selector.ts b/ng-sample/app/examples/list/template-selector.ts index 1fce9e816..4557b7e9c 100644 --- a/ng-sample/app/examples/list/template-selector.ts +++ b/ng-sample/app/examples/list/template-selector.ts @@ -1,4 +1,4 @@ -import { Component, Input, ChangeDetectionStrategy, DoCheck } from '@angular/core'; +import { Component, Input, ChangeDetectionStrategy, DoCheck } from "@angular/core"; class DataItem { private static count = 0; @@ -9,8 +9,8 @@ class DataItem { } @Component({ - selector: 'item-component', - styleUrls: ['examples/list/styles.css'], + selector: "item-component", + styleUrls: ["examples/list/styles.css"], changeDetection: ChangeDetectionStrategy.OnPush, template: `` }) @@ -20,8 +20,8 @@ export class ItemComponent implements DoCheck { } @Component({ - selector: 'header-component', - styleUrls: ['examples/list/styles.css'], + selector: "header-component", + styleUrls: ["examples/list/styles.css"], changeDetection: ChangeDetectionStrategy.OnPush, template: `` }) @@ -31,14 +31,17 @@ export class HeaderComponent implements DoCheck { } @Component({ - selector: 'list-test', - styleUrls: ['examples/list/styles.css'], + selector: "list-test", + styleUrls: ["examples/list/styles.css"], changeDetection: ChangeDetectionStrategy.OnPush, template: ` - +