refactor(animations): support browser animation rendering (#14578)

modules/@angular/core/src/animation_next/animation_metadata_wrapped.ts

@@ -0,0 +1,150 @@
+/**
+ * @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 {AnimateTimings, AnimationMetadataType, animate as _animate, group as _group, keyframes as _keyframes, sequence as _sequence, state as _state, style as _style, transition as _transition, trigger as _trigger} from './dsl';
+
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export const AUTO_STYLE = '*';
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationMetadata { type: AnimationMetadataType; }
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationTriggerMetadata {
+  name: string;
+  definitions: AnimationMetadata[];
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationStateMetadata extends AnimationMetadata {
+  name: string;
+  styles: AnimationStyleMetadata;
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationTransitionMetadata extends AnimationMetadata {
+  expr: string|((fromState: string, toState: string) => boolean);
+  animation: AnimationMetadata;
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
+  steps: AnimationStyleMetadata[];
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationStyleMetadata extends AnimationMetadata {
+  styles: {[key: string]: string | number}[];
+  offset: number;
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationAnimateMetadata extends AnimationMetadata {
+  timings: string|number|AnimateTimings;
+  styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata;
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationSequenceMetadata extends AnimationMetadata { steps: AnimationMetadata[]; }
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export interface AnimationGroupMetadata extends AnimationMetadata { steps: AnimationMetadata[]; }
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata {
+  return _trigger(name, definitions);
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export function animate(
+    timings: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata =
+                                  null): AnimationAnimateMetadata {
+  return _animate(timings, styles);
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export function group(steps: AnimationMetadata[]): AnimationGroupMetadata {
+  return _group(steps);
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export function sequence(steps: AnimationMetadata[]): AnimationSequenceMetadata {
+  return _sequence(steps);
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export function style(
+    tokens: {[key: string]: string | number} |
+    Array<{[key: string]: string | number}>): AnimationStyleMetadata {
+  return _style(tokens);
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export function state(name: string, styles: AnimationStyleMetadata): AnimationStateMetadata {
+  return _state(name, styles);
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {
+  return _keyframes(steps);
+}
+
+/**
+ * @deprecated This symbol has moved. Please Import from @angular/animations instead!
+ */
+export function transition(
+    stateChangeExpr: string | ((fromState: string, toState: string) => boolean),
+    steps: AnimationMetadata | AnimationMetadata[]): AnimationTransitionMetadata {
+  return _transition(stateChangeExpr, steps);
+}
+
+/**
+ * @deprecated This has been renamed to `AnimationEvent`. Please import it from @angular/animations.
+ */
+export interface AnimationTransitionEvent {
+  fromState: string;
+  toState: string;
+  totalTime: number;
+  phaseName: string;
+  element: any;
+  triggerName: string;
+}

modules/@angular/core/src/animation_next/dsl.ts

@@ -0,0 +1 @@
+../../../animations/src/animation_metadata.ts

modules/@angular/core/src/core.ts

@@ -32,11 +32,14 @@ export {Type} from './type';
 export {EventEmitter} from './facade/async';
 export {ErrorHandler} from './error_handler';
 export * from './core_private_export';
-export * from './animation/metadata';
-export {AnimationTransitionEvent} from './animation/animation_transition_event';
 export {AnimationPlayer} from './animation/animation_player';
 export {AnimationStyles} from './animation/animation_styles';
 export {AnimationKeyframe} from './animation/animation_keyframe';
 export {Sanitizer, SecurityContext} from './security';
-export {TransitionFactory, TransitionInstruction, Trigger} from './triggers';
 export * from './codegen_private_exports';
+
+// TODO (matsko|tbosch): comment-out the two lines below, and enable the 3rd line when the view
+// engine goes live!
+export {AnimationTransitionEvent} from './animation/animation_transition_event';
+export * from './animation/metadata';
+// export * from './animation_next/animation_metadata_wrapped';

modules/@angular/core/src/core_private_export.ts

@@ -35,6 +35,5 @@ export {ReflectionCapabilities as ɵReflectionCapabilities} from './reflection/r
 export {ReflectorReader as ɵReflectorReader} from './reflection/reflector_reader';
 export {GetterFn as ɵGetterFn, MethodFn as ɵMethodFn, SetterFn as ɵSetterFn} from './reflection/types';
 export {DirectRenderer as ɵDirectRenderer, RenderDebugInfo as ɵRenderDebugInfo} from './render/api';
-export {TransitionEngine as ɵTransitionEngine} from './transition/transition_engine';
 export {makeDecorator as ɵmakeDecorator} from './util/decorators';
 export {isObservable as ɵisObservable, isPromise as ɵisPromise} from './util/lang';

modules/@angular/core/src/linker/view_utils.ts

@@ -40,7 +40,7 @@ let nextRenderComponentTypeId = 0;
 
 export function createRenderComponentType(
     templateUrl: string, slotCount: number, encapsulation: ViewEncapsulation,
-    styles: Array<string|any[]>, animations: {[key: string]: Function}): RenderComponentType {
+    styles: Array<string|any[]>, animations: any): RenderComponentType {
   return new RenderComponentType(
       `${nextRenderComponentTypeId++}`, templateUrl, slotCount, encapsulation, styles, animations);
 }

modules/@angular/core/src/platform_core_providers.ts

@@ -12,7 +12,6 @@ import {Provider} from './di';
 import {Reflector, reflector} from './reflection/reflection';
 import {ReflectorReader} from './reflection/reflector_reader';
 import {TestabilityRegistry} from './testability/testability';
-import {NoOpTransitionEngine, TransitionEngine} from './transition/transition_engine';
 
 function _reflector(): Reflector {
   return reflector;
@@ -23,7 +22,6 @@ const _CORE_PLATFORM_PROVIDERS: Provider[] = [
   {provide: PlatformRef, useExisting: PlatformRef_},
   {provide: Reflector, useFactory: _reflector, deps: []},
   {provide: ReflectorReader, useExisting: Reflector},
-  {provide: TransitionEngine, useClass: NoOpTransitionEngine},
   TestabilityRegistry,
   Console,
 ];

modules/@angular/core/src/render/api.ts

@@ -20,7 +20,7 @@ export class RenderComponentType {
   constructor(
       public id: string, public templateUrl: string, public slotCount: number,
       public encapsulation: ViewEncapsulation, public styles: Array<string|any[]>,
-      public animations: {[key: string]: Function}) {}
+      public animations: any) {}
 }
 
 export abstract class RenderDebugInfo {
@@ -91,6 +91,8 @@ export abstract class Renderer {
       previousPlayers?: AnimationPlayer[]): AnimationPlayer;
 }
 
+export const RendererV2Interceptor = new InjectionToken<RendererV2[]>('RendererV2Interceptor');
+
 /**
  * Injectable service that provides a low-level interface for modifying the UI.
  *

modules/@angular/core/src/transition/transition_engine.ts

@@ -1,41 +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 {AnimationPlayer, NoOpAnimationPlayer} from '../animation/animation_player';
-import {TransitionInstruction} from '../triggers';
-
-
-/**
- * @experimental Transition support is experimental.
- */
-export abstract class TransitionEngine {
-  abstract insertNode(container: any, element: any): void;
-  abstract removeNode(element: any): void;
-  abstract process(element: any, instructions: TransitionInstruction[]): AnimationPlayer;
-  abstract triggerAnimations(): void;
-}
-
-/**
- * @experimental Transition support is experimental.
- */
-export class NoOpTransitionEngine extends TransitionEngine {
-  constructor() { super(); }
-
-  insertNode(container: any, element: any): void { container.appendChild(element); }
-
-  removeNode(element: any): void { remove(element); }
-
-  process(element: any, instructions: TransitionInstruction[]): AnimationPlayer {
-    return new NoOpAnimationPlayer();
-  }
-
-  triggerAnimations(): void {}
-}
-
-function remove(element: any) {
-  element.parentNode.removeChild(element);
-}

modules/@angular/core/src/triggers.ts

@@ -1,27 +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
- */
-
-/**
- * @experimental View triggers are experimental
- */
-export interface Trigger {
-  name: string;
-  transitionFactories: TransitionFactory[];
-}
-
-/**
- * @experimental View triggers are experimental
- */
-export interface TransitionFactory {
-  match(currentState: any, nextState: any): TransitionInstruction;
-}
-
-/**
- * @experimental View triggers are experimental
- */
-export interface TransitionInstruction {}

modules/@angular/core/src/view/services.ts

@@ -229,7 +229,7 @@ function debugCheckFn(
 
 function normalizeDebugBindingName(name: string) {
   // Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsers
-  name = camelCaseToDashCase(name.replace(/\$/g, '_'));
+  name = camelCaseToDashCase(name.replace(/[$@]/g, '_'));
   return `ng-reflect-${name}`;
 }