fix(core): host bindings and host listeners for animations

Host bindings / listeners for animation properties should use
the renderer of the component view.

Author: tbosch

modules/@angular/compiler/src/view_compiler_next/view_compiler.ts

@@ -7,9 +7,10 @@
  */
 
 import {isDevMode} from '../application_ref';
+import {RendererTypeV2, RendererV2} from '../render/api';
 import {SecurityContext} from '../security';
 
-import {BindingDef, BindingType, DebugContext, DisposableFn, ElementData, ElementHandleEventFn, ElementOutputDef, NodeData, NodeDef, NodeFlags, NodeType, QueryValueType, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, asElementData} from './types';
+import {BindingDef, BindingType, DebugContext, DisposableFn, ElementData, ElementHandleEventFn, NodeData, NodeDef, NodeFlags, NodeType, OutputDef, OutputType, QueryValueType, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, asElementData, asProviderData} from './types';
 import {checkAndUpdateBinding, dispatchEvent, elementEventFullName, filterQueryId, getParentRenderElement, resolveViewDefinition, sliceErrorStack, splitMatchedQueriesDsl, splitNamespace} from './util';
 
 const NOOP: any = () => {};
@@ -34,20 +35,20 @@ export function anchorDef(
     parent: undefined,
     renderParent: undefined,
     bindingIndex: undefined,
-    disposableIndex: undefined,
+    outputIndex: undefined,
     // regular values
     flags,
     childFlags: 0,
     childMatchedQueries: 0, matchedQueries, matchedQueryIds, references, ngContentIndex, childCount,
     bindings: [],
-    disposableCount: 0,
+    outputs: [],
     element: {
       ns: undefined,
       name: undefined,
-      attrs: undefined,
-      outputs: [], template, source,
-      // will bet set by the view definition
-      component: undefined,
+      attrs: undefined, template, source,
+      componentProvider: undefined,
+      componentView: undefined,
+      componentRendererType: undefined,
       publicProviders: undefined,
       allProviders: undefined, handleEvent
     },
@@ -65,8 +66,13 @@ export function elementDef(
     fixedAttrs: [string, string][] = [],
     bindings?:
         ([BindingType.ElementClass, string] | [BindingType.ElementStyle, string, string] |
-         [BindingType.ElementAttribute | BindingType.ElementProperty, string, SecurityContext])[],
-    outputs?: (string | [string, string])[], handleEvent?: ElementHandleEventFn): NodeDef {
+         [
+           BindingType.ElementAttribute | BindingType.ElementProperty |
+               BindingType.ComponentHostProperty,
+           string, SecurityContext
+         ])[],
+    outputs?: ([string, string])[], handleEvent?: ElementHandleEventFn,
+    componentView?: () => ViewDefinition, componentRendererType?: RendererTypeV2): NodeDef {
   if (!handleEvent) {
     handleEvent = NOOP;
   }
@@ -93,29 +99,35 @@ export function elementDef(
         break;
       case BindingType.ElementAttribute:
       case BindingType.ElementProperty:
+      case BindingType.ComponentHostProperty:
         securityContext = <SecurityContext>entry[2];
         break;
     }
     bindingDefs[i] = {type: bindingType, ns, name, nonMinifiedName: name, securityContext, suffix};
   }
   outputs = outputs || [];
-  const outputDefs: ElementOutputDef[] = new Array(outputs.length);
+  const outputDefs: OutputDef[] = new Array(outputs.length);
   for (let i = 0; i < outputs.length; i++) {
-    const output = outputs[i];
-    let target: string;
-    let eventName: string;
-    if (Array.isArray(output)) {
-      [target, eventName] = output;
-    } else {
-      eventName = output;
-    }
-    outputDefs[i] = {eventName: eventName, target: target};
+    const [target, eventName] = outputs[i];
+    outputDefs[i] = {
+      type: OutputType.ElementOutput,
+      target: <any>target, eventName,
+      propName: undefined
+    };
   }
   fixedAttrs = fixedAttrs || [];
   const attrs = <[string, string, string][]>fixedAttrs.map(([namespaceAndName, value]) => {
     const [ns, name] = splitNamespace(namespaceAndName);
     return [ns, name, value];
   });
+  // This is needed as the jit compiler always uses an empty hash as default RendererTypeV2,
+  // which is not filled for host views.
+  if (componentRendererType && componentRendererType.encapsulation == null) {
+    componentRendererType = null;
+  }
+  if (componentView) {
+    flags |= NodeFlags.HasComponent;
+  }
   return {
     type: NodeType.Element,
     // will bet set by the view definition
@@ -124,21 +136,21 @@ export function elementDef(
     parent: undefined,
     renderParent: undefined,
     bindingIndex: undefined,
-    disposableIndex: undefined,
+    outputIndex: undefined,
     // regular values
     flags,
     childFlags: 0,
     childMatchedQueries: 0, matchedQueries, matchedQueryIds, references, ngContentIndex, childCount,
     bindings: bindingDefs,
-    disposableCount: outputDefs.length,
+    outputs: outputDefs,
     element: {
       ns,
       name,
       attrs,
-      outputs: outputDefs, source,
+      source,
       template: undefined,
       // will bet set by the view definition
-      component: undefined,
+      componentProvider: undefined, componentView, componentRendererType,
       publicProviders: undefined,
       allProviders: undefined, handleEvent,
     },
@@ -174,21 +186,24 @@ export function createElement(view: ViewData, renderHost: any, def: NodeDef): El
       renderer.setAttribute(el, name, value, ns);
     }
   }
-  if (elDef.outputs.length) {
-    for (let i = 0; i < elDef.outputs.length; i++) {
-      const output = elDef.outputs[i];
-      const handleEventClosure = renderEventHandlerClosure(
-          view, def.index, elementEventFullName(output.target, output.eventName));
-      const disposable =
-          <any>renderer.listen(output.target || el, output.eventName, handleEventClosure);
-      view.disposables[def.disposableIndex + i] = disposable;
+  return el;
+}
+
+export function listenToElementOutputs(view: ViewData, compView: ViewData, def: NodeDef, el: any) {
+  for (let i = 0; i < def.outputs.length; i++) {
+    const output = def.outputs[i];
+    const handleEventClosure = renderEventHandlerClosure(
+        view, def.index, elementEventFullName(output.target, output.eventName));
+    let listenTarget = output.target;
+    let listenerView = view;
+    if (output.target === 'component') {
+      listenTarget = null;
+      listenerView = compView;
     }
+    const disposable =
+        <any>listenerView.renderer.listen(listenTarget || el, output.eventName, handleEventClosure);
+    view.disposables[def.outputIndex + i] = disposable;
   }
-  return {
-    renderElement: el,
-    embeddedViews: (def.flags & NodeFlags.HasEmbeddedViews) ? [] : undefined,
-    projectedViews: undefined
-  };
 }
 
 function renderEventHandlerClosure(view: ViewData, index: number, eventName: string) {
@@ -223,7 +238,8 @@ function checkAndUpdateElementValue(view: ViewData, def: NodeDef, bindingIdx: nu
     return;
   }
   const binding = def.bindings[bindingIdx];
-  const renderNode = asElementData(view, def.index).renderElement;
+  const elData = asElementData(view, def.index);
+  const renderNode = elData.renderElement;
   const name = binding.name;
   switch (binding.type) {
     case BindingType.ElementAttribute:
@@ -238,6 +254,9 @@ function checkAndUpdateElementValue(view: ViewData, def: NodeDef, bindingIdx: nu
     case BindingType.ElementProperty:
       setElementProperty(view, binding, renderNode, name, value);
       break;
+    case BindingType.ComponentHostProperty:
+      setElementProperty(elData.componentView, binding, renderNode, name, value);
+      break;
   }
 }
 

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

@@ -18,7 +18,7 @@ export function ngContentDef(ngContentIndex: number, index: number): NodeDef {
     parent: undefined,
     renderParent: undefined,
     bindingIndex: undefined,
-    disposableIndex: undefined,
+    outputIndex: undefined,
     // regular values
     flags: 0,
     childFlags: 0,
@@ -28,7 +28,7 @@ export function ngContentDef(ngContentIndex: number, index: number): NodeDef {
     references: {}, ngContentIndex,
     childCount: 0,
     bindings: [],
-    disposableCount: 0,
+    outputs: [],
     element: undefined,
     provider: undefined,
     text: undefined,

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

@@ -15,7 +15,7 @@ import {ViewEncapsulation} from '../metadata/view';
 import {Renderer as RendererV1, RendererFactoryV2, RendererTypeV2, RendererV2} from '../render/api';
 
 import {createChangeDetectorRef, createInjector, createRendererV1, createTemplateRef, createViewContainerRef} from './refs';
-import {BindingDef, BindingType, DepDef, DepFlags, DirectiveOutputDef, DisposableFn, NodeData, NodeDef, NodeFlags, NodeType, ProviderData, ProviderType, QueryBindingType, QueryDef, QueryValueType, RootData, Services, ViewData, ViewDefinition, ViewFlags, ViewState, asElementData, asProviderData} from './types';
+import {BindingDef, BindingType, DepDef, DepFlags, DisposableFn, NodeData, NodeDef, NodeFlags, NodeType, OutputDef, OutputType, ProviderData, ProviderType, QueryBindingType, QueryDef, QueryValueType, RootData, Services, ViewData, ViewDefinition, ViewFlags, ViewState, asElementData, asProviderData} from './types';
 import {checkAndUpdateBinding, dispatchEvent, filterQueryId, isComponentView, splitMatchedQueriesDsl, tokenKey, viewParentEl} from './util';
 
 const RendererV1TokenKey = tokenKey(RendererV1);
@@ -31,8 +31,7 @@ const NOT_CREATED = new Object();
 export function directiveDef(
     flags: NodeFlags, matchedQueries: [string | number, QueryValueType][], childCount: number,
     ctor: any, deps: ([DepFlags, any] | any)[], props?: {[name: string]: [number, string]},
-    outputs?: {[name: string]: string}, component?: () => ViewDefinition,
-    rendererType?: RendererTypeV2): NodeDef {
+    outputs?: {[name: string]: string}): NodeDef {
   const bindings: BindingDef[] = [];
   if (props) {
     for (let prop in props) {
@@ -46,15 +45,16 @@ export function directiveDef(
       };
     }
   }
-  const outputDefs: DirectiveOutputDef[] = [];
+  const outputDefs: OutputDef[] = [];
   if (outputs) {
     for (let propName in outputs) {
-      outputDefs.push({propName, eventName: outputs[propName]});
+      outputDefs.push(
+          {type: OutputType.DirectiveOutput, propName, target: null, eventName: outputs[propName]});
     }
   }
   return _def(
       NodeType.Directive, flags, matchedQueries, childCount, ProviderType.Class, ctor, ctor, deps,
-      bindings, outputDefs, component, rendererType);
+      bindings, outputDefs);
 }
 
 export function pipeDef(flags: NodeFlags, ctor: any, deps: ([DepFlags, any] | any)[]): NodeDef {
@@ -70,14 +70,8 @@ export function providerDef(
 export function _def(
     type: NodeType, flags: NodeFlags, matchedQueriesDsl: [string | number, QueryValueType][],
     childCount: number, providerType: ProviderType, token: any, value: any,
-    deps: ([DepFlags, any] | any)[], bindings?: BindingDef[], outputs?: DirectiveOutputDef[],
-    component?: () => ViewDefinition, rendererType?: RendererTypeV2): NodeDef {
+    deps: ([DepFlags, any] | any)[], bindings?: BindingDef[], outputs?: OutputDef[]): NodeDef {
   const {matchedQueries, references, matchedQueryIds} = splitMatchedQueriesDsl(matchedQueriesDsl);
-  // This is needed as the jit compiler always uses an empty hash as default RendererTypeV2,
-  // which is not filled for host views.
-  if (rendererType && rendererType.encapsulation == null) {
-    rendererType = null;
-  }
   if (!outputs) {
     outputs = [];
   }
@@ -96,9 +90,6 @@ export function _def(
     }
     return {flags, token, tokenKey: tokenKey(token)};
   });
-  if (component) {
-    flags = flags | NodeFlags.HasComponent;
-  }
 
   return {
     type,
@@ -108,20 +99,14 @@ export function _def(
     parent: undefined,
     renderParent: undefined,
     bindingIndex: undefined,
-    disposableIndex: undefined,
+    outputIndex: undefined,
     // regular values
     flags,
     childFlags: 0,
     childMatchedQueries: 0, matchedQueries, matchedQueryIds, references,
-    ngContentIndex: undefined, childCount, bindings,
-    disposableCount: outputs.length,
+    ngContentIndex: undefined, childCount, bindings, outputs,
     element: undefined,
-    provider: {
-      type: providerType,
-      token,
-      tokenKey: tokenKey(token), value,
-      deps: depDefs, outputs, component, rendererType
-    },
+    provider: {type: providerType, token, tokenKey: tokenKey(token), value, deps: depDefs},
     text: undefined,
     pureExpression: undefined,
     query: undefined,
@@ -149,17 +134,17 @@ export function createPipeInstance(view: ViewData, def: NodeDef): any {
 
 export function createDirectiveInstance(view: ViewData, def: NodeDef): any {
   // components can see other private services, other directives can't.
-  const allowPrivateServices = (def.flags & NodeFlags.HasComponent) > 0;
+  const allowPrivateServices = (def.flags & NodeFlags.IsComponent) > 0;
   const providerDef = def.provider;
   // directives are always eager and classes!
   const instance =
       createClass(view, def.parent, allowPrivateServices, def.provider.value, def.provider.deps);
-  if (providerDef.outputs.length) {
-    for (let i = 0; i < providerDef.outputs.length; i++) {
-      const output = providerDef.outputs[i];
+  if (def.outputs.length) {
+    for (let i = 0; i < def.outputs.length; i++) {
+      const output = def.outputs[i];
       const subscription = instance[output.propName].subscribe(
           eventHandlerClosure(view, def.parent.index, output.eventName));
-      view.disposables[def.disposableIndex + i] = subscription.unsubscribe.bind(subscription);
+      view.disposables[def.outputIndex + i] = subscription.unsubscribe.bind(subscription);
     }
   }
   return instance;
@@ -371,7 +356,7 @@ export function resolveDep(
 function findCompView(view: ViewData, elDef: NodeDef, allowPrivateServices: boolean) {
   let compView: ViewData;
   if (allowPrivateServices) {
-    compView = asProviderData(view, elDef.element.component.index).componentView;
+    compView = asElementData(view, elDef.index).componentView;
   } else {
     compView = view;
     while (compView.parent && !isComponentView(compView)) {
@@ -396,8 +381,8 @@ function checkAndUpdateProp(
     changed = checkAndUpdateBinding(view, def, bindingIdx, value);
   }
   if (changed) {
-    if (def.flags & NodeFlags.HasComponent) {
-      const compView = providerData.componentView;
+    if (def.flags & NodeFlags.IsComponent) {
+      const compView = asElementData(view, def.parent.index).componentView;
       if (compView.def.flags & ViewFlags.OnPush) {
         compView.state |= ViewState.ChecksEnabled;
       }

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

@@ -43,7 +43,7 @@ function _pureExpressionDef(type: PureExpressionType, propertyNames: string[]):
     parent: undefined,
     renderParent: undefined,
     bindingIndex: undefined,
-    disposableIndex: undefined,
+    outputIndex: undefined,
     // regular values
     flags: 0,
     childFlags: 0,
@@ -53,7 +53,7 @@ function _pureExpressionDef(type: PureExpressionType, propertyNames: string[]):
     references: {},
     ngContentIndex: undefined,
     childCount: 0, bindings,
-    disposableCount: 0,
+    outputs: [],
     element: undefined,
     provider: undefined,
     text: undefined,

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

@@ -31,7 +31,7 @@ export function queryDef(
     parent: undefined,
     renderParent: undefined,
     bindingIndex: undefined,
-    disposableIndex: undefined,
+    outputIndex: undefined,
     // regular values
     flags,
     childFlags: 0,
@@ -42,7 +42,7 @@ export function queryDef(
     references: {},
     childCount: 0,
     bindings: [],
-    disposableCount: 0,
+    outputs: [],
     element: undefined,
     provider: undefined,
     text: undefined,

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

@@ -42,7 +42,7 @@ class ComponentFactory_ extends ComponentFactory<any> {
       injector: Injector, projectableNodes: any[][] = null,
       rootSelectorOrNode: string|any = null): ComponentRef<any> {
     const viewDef = resolveViewDefinition(this._viewClass);
-    const componentNodeIndex = viewDef.nodes[0].element.component.index;
+    const componentNodeIndex = viewDef.nodes[0].element.componentProvider.index;
     const view = Services.createRootView(
         injector, projectableNodes || [], rootSelectorOrNode, viewDef, EMPTY_CONTEXT);
     const component = asProviderData(view, componentNodeIndex).instance;
@@ -255,7 +255,7 @@ export function createInjector(view: ViewData, elDef: NodeDef): Injector {
 class Injector_ implements Injector {
   constructor(private view: ViewData, private elDef: NodeDef) {}
   get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
-    const allowPrivateServices = !!this.elDef.element.component;
+    const allowPrivateServices = (this.elDef.flags & NodeFlags.HasComponent) !== 0;
     return Services.resolveDep(
         this.view, this.elDef, allowPrivateServices,
         {flags: DepFlags.None, token, tokenKey: tokenKey(token)}, notFoundValue);