feat: update to Angular 5 animations and add support for AnimationBuilder (#1114)

* wip: all styles are valid

* refactor: use the transition animation engine from angular

* refactor: provide a mocked document object with body (wip)

* refactor: use property names list from CssAnimationProperty for
validation

* fix: include "transform" in valid animation property names

* refactor: remove old private imports

* refactor: unify parentNode access

The logic for setting/getting template parent is delegated to the ViewBase class.

* refactor: remove NativeScriptAnimationEngine

* chore(ng-sample): update deps

* fix: ignore setting property of 'null' objects

* refactor: provide fake document object when bootstrapping the app

* feat: provide support for AnimationBuilder

* refactor: provide fake polyfill for global.document

* chore: unpin rxjs versions

* test: fix mocks

* docs(Animations): add comment for using fake body object in Driver

Author: sis0k0

e2e/router/package.json

@@ -25,7 +25,7 @@
     "nativescript-angular": "file:../../nativescript-angular",
     "nativescript-intl": "^3.0.0",
     "reflect-metadata": "~0.1.8",
-    "rxjs": "5.5.2",
+    "rxjs": "^5.5.4",
     "tns-core-modules": "next",
     "zone.js": "^0.8.4"
   },

nativescript-angular/animations/animation-driver.ts

@@ -1,7 +1,9 @@
 import { AnimationPlayer } from "@angular/animations";
 import { AnimationDriver } from "@angular/animations/browser";
-import { ProxyViewContainer } from "tns-core-modules/ui/proxy-view-container";
+import { createSelector, SelectorCore } from "tns-core-modules/ui/styling/css-selector";
+import { CssAnimationProperty } from "tns-core-modules/ui/core/properties";
 import { eachDescendant } from "tns-core-modules/ui/core/view";
+import { ProxyViewContainer } from "tns-core-modules/ui/proxy-view-container";
 
 import { NativeScriptAnimationPlayer } from "./animation-player";
 import {
@@ -11,7 +13,6 @@ import {
 import { NgView, InvisibleNode } from "../element-registry";
 import { animationsLog as traceLog } from "../trace";
 
-import { createSelector, SelectorCore } from "tns-core-modules/ui/styling/css-selector";
 
 interface ViewMatchResult {
     found: boolean;
@@ -68,8 +69,14 @@ class Selector {
 }
 
 export class NativeScriptAnimationDriver implements AnimationDriver {
-    validateStyleProperty(prop: string): boolean {
-        throw new Error("Not implemented!");
+    private static validProperties = [
+        ...CssAnimationProperty._getPropertyNames(),
+        "transform",
+    ];
+
+    validateStyleProperty(property: string): boolean {
+        traceLog(`CssAnimationProperty.validateStyleProperty: ${property}`);
+        return NativeScriptAnimationDriver.validProperties.indexOf(property) !== -1;
     }
 
     matchesElement(element: NgView, rawSelector: string): boolean {
@@ -89,6 +96,11 @@ export class NativeScriptAnimationDriver implements AnimationDriver {
             `element1: ${elm1}, element2: ${elm2}`
         );
 
+        // Checking if the parent is our fake body object
+        if (elm1["isOverride"]) {
+            return true;
+        }
+
         const params: ViewMatchParams = { originalView: elm2 };
         const result: ViewMatchResult = this.visitDescendants(elm1, viewMatches, params);
 

nativescript-angular/animations/animation-engine.ts

@@ -6,20 +6,20 @@ import {
     AnimationDriver,
     ɵAnimationStyleNormalizer as AnimationStyleNormalizer,
     ɵWebAnimationsStyleNormalizer as WebAnimationsStyleNormalizer,
+    ɵAnimationEngine as AnimationEngine,
 } from "@angular/animations/browser";
 
 import {
     ɵAnimationRendererFactory as AnimationRendererFactory,
     ɵBrowserAnimationBuilder as BrowserAnimationBuilder,
 } from "@angular/platform-browser/animations";
 
-import { NativeScriptAnimationEngine } from "./animation-engine";
-import { NativeScriptAnimationDriver } from "./animation-driver";
 import { NativeScriptModule } from "../nativescript.module";
 import { NativeScriptRendererFactory } from "../renderer";
+import { NativeScriptAnimationDriver } from "./animation-driver";
 
 @Injectable()
-export class InjectableAnimationEngine extends NativeScriptAnimationEngine {
+export class InjectableAnimationEngine extends AnimationEngine {
     constructor(driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
         super(driver, normalizer);
     }
@@ -30,7 +30,7 @@ export function instantiateSupportedAnimationDriver() {
 }
 
 export function instantiateRendererFactory(
-        renderer: NativeScriptRendererFactory, engine: NativeScriptAnimationEngine, zone: NgZone) {
+        renderer: NativeScriptRendererFactory, engine: AnimationEngine, zone: NgZone) {
     return new AnimationRendererFactory(renderer, engine, zone);
 }
 
@@ -39,14 +39,14 @@ export function instantiateDefaultStyleNormalizer() {
 }
 
 export const NATIVESCRIPT_ANIMATIONS_PROVIDERS: Provider[] = [
-    {provide: AnimationBuilder, useClass: BrowserAnimationBuilder},
     {provide: AnimationDriver, useFactory: instantiateSupportedAnimationDriver},
+    {provide: AnimationBuilder, useClass: BrowserAnimationBuilder},
     {provide: AnimationStyleNormalizer, useFactory: instantiateDefaultStyleNormalizer},
-    {provide: NativeScriptAnimationEngine, useClass: InjectableAnimationEngine},
+    {provide: AnimationEngine, useClass: InjectableAnimationEngine},
     {
         provide: RendererFactory2,
         useFactory: instantiateRendererFactory,
-        deps: [NativeScriptRendererFactory, NativeScriptAnimationEngine, NgZone]
+        deps: [NativeScriptRendererFactory, AnimationEngine, NgZone]
     }
 ];