refactor(animations): introduce @angular/animation module

Author: matsko

build.sh

@@ -13,6 +13,7 @@ PACKAGES=(core
   platform-server
   platform-webworker
   platform-webworker-dynamic
+  animation
   http
   upgrade
   router

modules/@angular/animation/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @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
+ */
+
+/**
+ * @module
+ * @description
+ * Entry point for all public APIs of the animation package.
+ */
+export * from './src/animation';

modules/@angular/animation/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@angular/animation",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - animation integration with web-animations",
+  "main": "bundles/animation.umd.js",
+  "module": "index.js",
+  "typings": "index.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  }
+}

modules/@angular/animation/rollup-testing.config.js

@@ -0,0 +1,20 @@
+/**
+ * @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
+ */
+
+export default {
+  entry: '../../../dist/packages-dist/animation/testing/index.js',
+  dest: '../../../dist/packages-dist/animation/bundles/animation-testing.umd.js',
+  format: 'umd',
+  moduleName: 'ng.animation.testing',
+  globals: {
+    '@angular/core': 'ng.core',
+    '@angular/animation': 'ng.animation',
+    'rxjs/Observable': 'Rx',
+    'rxjs/Subject': 'Rx'
+  }
+};

modules/@angular/animation/rollup.config.js

@@ -0,0 +1,19 @@
+/**
+ * @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
+ */
+
+export default {
+  entry: '../../../dist/packages-dist/animation/index.js',
+  dest: '../../../dist/packages-dist/animation/bundles/animation.umd.js',
+  format: 'umd',
+  moduleName: 'ng.animation',
+  globals: {
+    '@angular/core': 'ng.core',
+    'rxjs/Observable': 'Rx',
+    'rxjs/Subject': 'Rx',
+  }
+};

modules/@angular/animation/src/animation.ts

@@ -0,0 +1,11 @@
+/**
+ * @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
+ */
+export {AnimationModule} from './animation_module';
+export {Animation} from './dsl/animation';
+export {AUTO_STYLE, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, animate, group, keyframes, sequence, state, style, transition} from './dsl/animation_metadata';
+export {AnimationTrigger, trigger} from './dsl/animation_trigger';

modules/@angular/animation/src/animation_module.ts

@@ -0,0 +1,36 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {AnimationStyleNormalizer} from './dsl/style_normalization/animation_style_normalizer';
+import {WebAnimationsStyleNormalizer} from './dsl/style_normalization/web_animations_style_normalizer';
+import {AnimationDriver, NoOpAnimationDriver} from './engine/animation_driver';
+import {DomAnimationTransitionEngine} from './engine/dom_animation_transition_engine';
+import {WebAnimationsDriver, supportsWebAnimations} from './engine/web_animations/web_animations_driver';
+import {TransitionEngine} from './private_import_core';
+
+export function resolveDefaultAnimationDriver(): AnimationDriver {
+  if (supportsWebAnimations()) {
+    return new WebAnimationsDriver();
+  }
+  return new NoOpAnimationDriver();
+}
+
+/**
+ * The module that includes all animation code such as `style()`, `animate()`, `trigger()`, etc...
+ *
+ * @experimental
+ */
+@NgModule({
+  providers: [
+    {provide: AnimationDriver, useFactory: resolveDefaultAnimationDriver},
+    {provide: AnimationStyleNormalizer, useClass: WebAnimationsStyleNormalizer},
+    {provide: TransitionEngine, useClass: DomAnimationTransitionEngine}
+  ]
+})
+export class AnimationModule {
+}

modules/@angular/animation/src/common/style_data.ts

@@ -0,0 +1,8 @@
+/**
+ * @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
+ */
+export interface StyleData { [key: string]: string|number; }

modules/@angular/animation/src/common/util.ts

@@ -0,0 +1,73 @@
+/**
+ * @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 {AnimationStyles} from '@angular/core';
+import {AnimateTimings} from './../dsl/animation_metadata';
+import {StyleData} from './style_data';
+
+export const ONE_SECOND = 1000;
+
+export function parseTimeExpression(exp: string | number, errors: string[]): AnimateTimings {
+  const regex = /^([\.\d]+)(m?s)(?:\s+([\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
+  let duration: number;
+  let delay: number = 0;
+  let easing: string = null;
+  if (typeof exp === 'string') {
+    const matches = exp.match(regex);
+    if (matches === null) {
+      errors.push(`The provided timing value "${exp}" is invalid.`);
+      return {duration: 0, delay: 0, easing: null};
+    }
+
+    let durationMatch = parseFloat(matches[1]);
+    const durationUnit = matches[2];
+    if (durationUnit == 's') {
+      durationMatch *= ONE_SECOND;
+    }
+    duration = Math.floor(durationMatch);
+
+    const delayMatch = matches[3];
+    const delayUnit = matches[4];
+    if (delayMatch != null) {
+      let delayVal: number = parseFloat(delayMatch);
+      if (delayUnit != null && delayUnit == 's') {
+        delayVal *= ONE_SECOND;
+      }
+      delay = Math.floor(delayVal);
+    }
+
+    const easingVal = matches[5];
+    if (easingVal) {
+      easing = easingVal;
+    }
+  } else {
+    duration = <number>exp;
+  }
+
+  return {duration, delay, easing};
+}
+
+export function normalizeStyles(styles: AnimationStyles): StyleData {
+  const normalizedStyles: StyleData = {};
+  styles.styles.forEach((styleMap: any) => copyStyles(styleMap, false, normalizedStyles));
+  return normalizedStyles;
+}
+
+export function copyStyles(
+    styles: StyleData, readPrototype: boolean, destination: StyleData = {}): StyleData {
+  if (readPrototype) {
+    // we make use of a for-in loop so that the
+    // prototypically inherited properties are
+    // revealed from the backFill map
+    for (let prop in styles) {
+      destination[prop] = styles[prop];
+    }
+  } else {
+    Object.keys(styles).forEach(prop => destination[prop] = styles[prop]);
+  }
+  return destination;
+}

modules/@angular/animation/src/dsl/animation.ts

@@ -0,0 +1,59 @@
+/**
+ * @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 {AnimationPlayer, AnimationStyles, Injector} from '@angular/core';
+import {StyleData} from '../common/style_data';
+import {normalizeStyles} from '../common/util';
+import {AnimationDriver} from '../engine/animation_driver';
+import {DomAnimationTransitionEngine} from '../engine/dom_animation_transition_engine';
+import {AnimationMetadata, sequence} from './animation_metadata';
+import {AnimationTimelineInstruction} from './animation_timeline_instruction';
+import {buildAnimationKeyframes} from './animation_timeline_visitor';
+import {validateAnimationSequence} from './animation_validator_visitor';
+import {AnimationStyleNormalizer} from './style_normalization/animation_style_normalizer';
+
+/**
+ * @experimental Animation support is experimental.
+ */
+export class Animation {
+  private _animationAst: AnimationMetadata;
+  constructor(input: AnimationMetadata|AnimationMetadata[]) {
+    const ast =
+        Array.isArray(input) ? sequence(<AnimationMetadata[]>input) : <AnimationMetadata>input;
+    const errors = validateAnimationSequence(ast);
+    if (errors.length) {
+      const errorMessage = `animation validation failed:\n${errors.join("\n")}`;
+      throw new Error(errorMessage);
+    }
+    this._animationAst = ast;
+  }
+
+  buildTimelines(startingStyles: StyleData|StyleData[], destinationStyles: StyleData|StyleData[]):
+      AnimationTimelineInstruction[] {
+    const start = Array.isArray(startingStyles) ?
+        normalizeStyles(new AnimationStyles(<StyleData[]>startingStyles)) :
+        <StyleData>startingStyles;
+    const dest = Array.isArray(destinationStyles) ?
+        normalizeStyles(new AnimationStyles(<StyleData[]>destinationStyles)) :
+        <StyleData>destinationStyles;
+    return buildAnimationKeyframes(this._animationAst, start, dest);
+  }
+
+  // this is only used for development demo purposes for now
+  private create(
+      injector: Injector, element: any, startingStyles: StyleData = {},
+      destinationStyles: StyleData = {}): AnimationPlayer {
+    const instructions = this.buildTimelines(startingStyles, destinationStyles);
+
+    // note the code below is only here to make the tests happy (once the new renderer is
+    // within core then the code below will interact with Renderer.transition(...))
+    const driver: AnimationDriver = injector.get(AnimationDriver);
+    const normalizer: AnimationStyleNormalizer = injector.get(AnimationStyleNormalizer);
+    const engine = new DomAnimationTransitionEngine(driver, normalizer);
+    return engine.process(element, instructions);
+  }
+}

modules/@angular/animation/src/dsl/animation_dsl_visitor.ts

@@ -0,0 +1,40 @@
+/**
+ * @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 * as meta from './animation_metadata';
+
+export interface AnimationDslVisitor {
+  visitState(ast: meta.AnimationStateMetadata, context: any): any;
+  visitTransition(ast: meta.AnimationTransitionMetadata, context: any): any;
+  visitSequence(ast: meta.AnimationSequenceMetadata, context: any): any;
+  visitGroup(ast: meta.AnimationGroupMetadata, context: any): any;
+  visitAnimate(ast: meta.AnimationAnimateMetadata, context: any): any;
+  visitStyle(ast: meta.AnimationStyleMetadata, context: any): any;
+  visitKeyframeSequence(ast: meta.AnimationKeyframesSequenceMetadata, context: any): any;
+}
+
+export function visitAnimationNode(
+    visitor: AnimationDslVisitor, node: meta.AnimationMetadata, context: any) {
+  switch (node.type) {
+    case meta.AnimationMetadataType.State:
+      return visitor.visitState(<meta.AnimationStateMetadata>node, context);
+    case meta.AnimationMetadataType.Transition:
+      return visitor.visitTransition(<meta.AnimationTransitionMetadata>node, context);
+    case meta.AnimationMetadataType.Sequence:
+      return visitor.visitSequence(<meta.AnimationSequenceMetadata>node, context);
+    case meta.AnimationMetadataType.Group:
+      return visitor.visitGroup(<meta.AnimationGroupMetadata>node, context);
+    case meta.AnimationMetadataType.Animate:
+      return visitor.visitAnimate(<meta.AnimationAnimateMetadata>node, context);
+    case meta.AnimationMetadataType.KeyframeSequence:
+      return visitor.visitKeyframeSequence(<meta.AnimationKeyframesSequenceMetadata>node, context);
+    case meta.AnimationMetadataType.Style:
+      return visitor.visitStyle(<meta.AnimationStyleMetadata>node, context);
+    default:
+      throw new Error(`Unable to resolve animation metadata node #${node.type}`);
+  }
+}