@angular/compiler - npm Package Compare versions

Comparing version 2.2.0-beta.1 to 2.2.0-rc.0

bundles/compiler-testing.umd.js

 /**
- * @license Angular v2.2.0-beta.1
+ * @license Angular v0.0.0-PLACEHOLDER
  * (c) 2010-2016 Google, Inc. https://angular.io/
@@ -531,2 +531,2 @@ * License: MIT
 
-}));
+}));

package.json

 {
   "name": "@angular/compiler",
-  "version": "2.2.0-beta.1",
+  "version": "2.2.0-rc.0",
   "description": "Angular - the compiler library",
@@ -11,3 +11,3 @@ "main": "bundles/compiler.umd.js",
   "peerDependencies": {
-    "@angular/core": "2.2.0-beta.1"
+    "@angular/core": "2.2.0-rc.0"
   },
@@ -14,0 +14,0 @@ "repository": {

src/compile_metadata.d.ts

@@ -82,7 +82,5 @@ /**
     isValue: boolean;
-    query: CompileQueryMetadata;
-    viewQuery: CompileQueryMetadata;
     token: CompileTokenMetadata;
     value: any;
-    constructor({isAttribute, isSelf, isHost, isSkipSelf, isOptional, isValue, query, viewQuery, token, value}?: {
+    constructor({isAttribute, isSelf, isHost, isSkipSelf, isOptional, isValue, token, value}?: {
         isAttribute?: boolean;
@@ -89,0 +87,0 @@ isSelf?: boolean;

src/compile_metadata.js

@@ -146,3 +146,3 @@ /**
     function CompileDiDependencyMetadata(_a) {
-        var _b = _a === void 0 ? {} : _a, isAttribute = _b.isAttribute, isSelf = _b.isSelf, isHost = _b.isHost, isSkipSelf = _b.isSkipSelf, isOptional = _b.isOptional, isValue = _b.isValue, query = _b.query, viewQuery = _b.viewQuery, token = _b.token, value = _b.value;
+        var _b = _a === void 0 ? {} : _a, isAttribute = _b.isAttribute, isSelf = _b.isSelf, isHost = _b.isHost, isSkipSelf = _b.isSkipSelf, isOptional = _b.isOptional, isValue = _b.isValue, token = _b.token, value = _b.value;
         this.isAttribute = !!isAttribute;
@@ -154,4 +154,2 @@ this.isSelf = !!isSelf;
         this.isValue = !!isValue;
-        this.query = query;
-        this.viewQuery = viewQuery;
         this.token = token;
@@ -158,0 +156,0 @@ this.value = value;

src/compile_metadata.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"isStaticSymbol":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":598,"character":9},"right":"object"},"right":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"value"},"right":null}},"right":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"value"},"index":"name"}},"right":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"value"},"index":"filePath"}}}}}
+{"__symbolic":"module","version":1,"metadata":{"isStaticSymbol":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":592,"character":9},"right":"object"},"right":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"value"},"right":null}},"right":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"value"},"index":"name"}},"right":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"value"},"index":"filePath"}}}}}

src/compiler_util/expression_converter.d.ts

@@ -31,4 +31,4 @@ /**
     stmts: o.Statement[];
-    preventDefault: o.Expression;
-    constructor(stmts: o.Statement[], preventDefault: o.Expression);
+    preventDefault: o.ReadVarExpr;
+    constructor(stmts: o.Statement[], preventDefault: o.ReadVarExpr);
 }
@@ -35,0 +35,0 @@ /**

src/compiler_util/render_util.d.ts

 import * as o from '../output/output_ast';
 import { BoundElementPropertyAst } from '../template_parser/template_ast';
 export declare function writeToRenderer(view: o.Expression, boundProp: BoundElementPropertyAst, renderElement: o.Expression, renderValue: o.Expression, logBindingUpdate: boolean, securityContextExpression?: o.Expression): o.Statement[];
+export declare function triggerAnimation(view: o.Expression, componentView: o.Expression, boundProp: BoundElementPropertyAst, eventListener: o.Expression, renderElement: o.Expression, renderValue: o.Expression, lastRenderValue: o.Expression): {
+    updateStmts: o.Statement[];
+    detachStmts: o.Statement[];
+};

src/compiler_util/render_util.js

@@ -5,3 +5,4 @@ import { SecurityContext } from '@angular/core';
 import * as o from '../output/output_ast';
-import { PropertyBindingType } from '../template_parser/template_ast';
+import { EMPTY_STATE as EMPTY_ANIMATION_STATE } from '../private_import_core';
+import { BoundEventAst, PropertyBindingType } from '../template_parser/template_ast';
 import { createEnumExpression } from './identifier_util';
@@ -65,2 +66,34 @@ export function writeToRenderer(view, boundProp, renderElement, renderValue, logBindingUpdate, securityContextExpression) {
 }
+export function triggerAnimation(view, componentView, boundProp, eventListener, renderElement, renderValue, lastRenderValue) {
+    var detachStmts = [];
+    var updateStmts = [];
+    var animationName = boundProp.name;
+    var animationFnExpr = componentView.prop('componentType').prop('animations').key(o.literal(animationName));
+    // it's important to normalize the void value as `void` explicitly
+    // so that the styles data can be obtained from the stringmap
+    var emptyStateValue = o.literal(EMPTY_ANIMATION_STATE);
+    var unitializedValue = o.importExpr(resolveIdentifier(Identifiers.UNINITIALIZED));
+    var animationTransitionVar = o.variable('animationTransition_' + animationName);
+    updateStmts.push(animationTransitionVar
+        .set(animationFnExpr.callFn([
+        view, renderElement,
+        lastRenderValue.equals(unitializedValue).conditional(emptyStateValue, lastRenderValue),
+        renderValue.equals(unitializedValue).conditional(emptyStateValue, renderValue)
+    ]))
+        .toDeclStmt());
+    detachStmts.push(animationTransitionVar
+        .set(animationFnExpr.callFn([view, renderElement, lastRenderValue, emptyStateValue]))
+        .toDeclStmt());
+    var registerStmts = [
+        animationTransitionVar
+            .callMethod('onStart', [eventListener.callMethod(o.BuiltinMethod.Bind, [view, o.literal(BoundEventAst.calcFullName(animationName, null, 'start'))])])
+            .toStmt(),
+        animationTransitionVar
+            .callMethod('onDone', [eventListener.callMethod(o.BuiltinMethod.Bind, [view, o.literal(BoundEventAst.calcFullName(animationName, null, 'done'))])])
+            .toStmt(),
+    ];
+    updateStmts.push.apply(updateStmts, registerStmts);
+    detachStmts.push.apply(detachStmts, registerStmts);
+    return { updateStmts: updateStmts, detachStmts: detachStmts };
+}
 //# sourceMappingURL=render_util.js.map

src/directive_wrapper_compiler.d.ts

@@ -7,2 +7,3 @@ import { CompileDirectiveMetadata, CompileIdentifierMetadata } from './compile_metadata';
 import { ElementSchemaRegistry } from './schema/element_schema_registry';
+import { BoundElementPropertyAst, BoundEventAst } from './template_parser/template_ast';
 export declare class DirectiveWrapperCompileResult {
@@ -30,1 +31,11 @@ statements: o.Statement[];
 }
+export declare class DirectiveWrapperExpressions {
+    static create(dir: CompileIdentifierMetadata, depsExpr: o.Expression[]): o.Expression;
+    static context(dirWrapper: o.Expression): o.ReadPropExpr;
+    static ngDoCheck(dirWrapper: o.Expression, view: o.Expression, renderElement: o.Expression, throwOnChange: o.Expression): o.Expression;
+    static checkHost(hostProps: BoundElementPropertyAst[], dirWrapper: o.Expression, view: o.Expression, componentView: o.Expression, renderElement: o.Expression, throwOnChange: o.Expression, runtimeSecurityContexts: o.Expression[]): o.Statement[];
+    static ngOnDetach(hostProps: BoundElementPropertyAst[], dirWrapper: o.Expression, view: o.Expression, componentView: o.Expression, renderEl: o.Expression): o.Statement[];
+    static ngOnDestroy(dir: CompileDirectiveMetadata, dirWrapper: o.Expression): o.Statement[];
+    static subscribe(dirMeta: CompileDirectiveMetadata, hostProps: BoundElementPropertyAst[], usedEvents: string[], dirWrapper: o.Expression, view: o.Expression, eventListener: o.Expression): o.Statement[];
+    static handleEvent(hostEvents: BoundEventAst[], dirWrapper: o.Expression, eventName: o.Expression, event: o.Expression): o.Expression;
+}

src/directive_wrapper_compiler.js

@@ -10,4 +10,4 @@ /**
 import { createCheckBindingField, createCheckBindingStmt } from './compiler_util/binding_util';
-import { convertPropertyBinding } from './compiler_util/expression_converter';
-import { writeToRenderer } from './compiler_util/render_util';
+import { EventHandlerVars, convertActionBinding, convertPropertyBinding } from './compiler_util/expression_converter';
+import { triggerAnimation, writeToRenderer } from './compiler_util/render_util';
 import { CompilerConfig } from './config';
@@ -31,4 +31,5 @@ import { Parser } from './expression_parser/parser';
 var CONTEXT_FIELD_NAME = 'context';
-var CHANGES_FIELD_NAME = 'changes';
-var CHANGED_FIELD_NAME = 'changed';
+var CHANGES_FIELD_NAME = '_changes';
+var CHANGED_FIELD_NAME = '_changed';
+var EVENT_HANDLER_FIELD_NAME = '_eventHandler';
 var CURR_VALUE_VAR = o.variable('currValue');
@@ -38,3 +39,5 @@ var THROW_ON_CHANGE_VAR = o.variable('throwOnChange');
 var VIEW_VAR = o.variable('view');
+var COMPONENT_VIEW_VAR = o.variable('componentView');
 var RENDER_EL_VAR = o.variable('el');
+var EVENT_NAME_VAR = o.variable('eventName');
 var RESET_CHANGES_STMT = o.THIS_EXPR.prop(CHANGES_FIELD_NAME).set(o.literalMap([])).toStmt();
@@ -58,2 +61,4 @@ /**
     DirectiveWrapperCompiler.prototype.compile = function (dirMeta) {
+        var hostParseResult = parseHostBindings(dirMeta, this._exprParser, this._schemaRegistry);
+        reportParseErrors(hostParseResult.errors, this._console);
         var builder = new DirectiveWrapperBuilder(this.compilerConfig, dirMeta);
@@ -63,11 +68,6 @@ Object.keys(dirMeta.inputs).forEach(function (inputFieldName) {
         });
-        addDetectChangesInInputPropsMethod(builder);
-        var hostParseResult = parseHostBindings(dirMeta, this._exprParser, this._schemaRegistry);
-        reportParseErrors(hostParseResult.errors, this._console);
-        // host properties are change detected by the DirectiveWrappers,
-        // except for the animation properties as they need close integration with animation events
-        // and DirectiveWrappers don't support
-        // event listeners right now.
-        addDetectChangesInHostPropsMethod(hostParseResult.hostProps.filter(function (hostProp) { return !hostProp.isAnimation; }), builder);
-        // TODO(tbosch): implement hostListeners via DirectiveWrapper as well!
+        addNgDoCheckMethod(builder);
+        addCheckHostMethod(hostParseResult.hostProps, builder);
+        addHandleEventMethod(hostParseResult.hostListeners, builder);
+        addSubscribeMethod(dirMeta, builder);
         var classStmt = builder.build();
@@ -96,2 +96,4 @@ return new DirectiveWrapperCompileResult([classStmt], classStmt.name);
         this.ctorStmts = [];
+        this.detachStmts = [];
+        this.destroyStmts = [];
         var dirLifecycleHooks = dirMeta.type.lifecycleHooks;
@@ -103,2 +105,6 @@ this.genChanges = dirLifecycleHooks.indexOf(LifecycleHooks.OnChanges) !== -1 ||
         this.ngDoCheck = dirLifecycleHooks.indexOf(LifecycleHooks.DoCheck) !== -1;
+        this.ngOnDestroy = dirLifecycleHooks.indexOf(LifecycleHooks.OnDestroy) !== -1;
+        if (this.ngOnDestroy) {
+            this.destroyStmts.push(o.THIS_EXPR.prop(CONTEXT_FIELD_NAME).callMethod('ngOnDestroy', []).toStmt());
+        }
     }
@@ -110,9 +116,18 @@ DirectiveWrapperBuilder.prototype.build = function () {
         }
+        var methods = [
+            new o.ClassMethod('ngOnDetach', [
+                new o.FnParam(VIEW_VAR.name, o.importType(resolveIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
+                new o.FnParam(COMPONENT_VIEW_VAR.name, o.importType(resolveIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
+                new o.FnParam(RENDER_EL_VAR.name, o.DYNAMIC_TYPE),
+            ], this.detachStmts),
+            new o.ClassMethod('ngOnDestroy', [], this.destroyStmts),
+        ];
         var fields = [
+            new o.ClassField(EVENT_HANDLER_FIELD_NAME, o.FUNCTION_TYPE, [o.StmtModifier.Private]),
             new o.ClassField(CONTEXT_FIELD_NAME, o.importType(this.dirMeta.type)),
-            new o.ClassField(CHANGED_FIELD_NAME, o.BOOL_TYPE),
+            new o.ClassField(CHANGED_FIELD_NAME, o.BOOL_TYPE, [o.StmtModifier.Private]),
         ];
         var ctorStmts = [o.THIS_EXPR.prop(CHANGED_FIELD_NAME).set(o.literal(false)).toStmt()];
         if (this.genChanges) {
-            fields.push(new o.ClassField(CHANGES_FIELD_NAME, new o.MapType(o.DYNAMIC_TYPE)));
+            fields.push(new o.ClassField(CHANGES_FIELD_NAME, new o.MapType(o.DYNAMIC_TYPE), [o.StmtModifier.Private]));
             ctorStmts.push(RESET_CHANGES_STMT);
@@ -127,3 +142,3 @@ }
             ctorParams: dirDepParamNames.map(function (paramName) { return new o.FnParam(paramName, o.DYNAMIC_TYPE); }),
-            builders: [{ fields: fields, ctorStmts: ctorStmts }, this]
+            builders: [{ fields: fields, ctorStmts: ctorStmts, methods: methods }, this]
         });
@@ -133,3 +148,3 @@ };
 }());
-function addDetectChangesInInputPropsMethod(builder) {
+function addNgDoCheckMethod(builder) {
     var changedVar = o.variable('changed');
@@ -166,3 +181,3 @@ var stmts = [
     stmts.push(new o.ReturnStatement(changedVar));
-    builder.methods.push(new o.ClassMethod('detectChangesInInputProps', [
+    builder.methods.push(new o.ClassMethod('ngDoCheck', [
         new o.FnParam(VIEW_VAR.name, o.importType(resolveIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
@@ -193,10 +208,11 @@ new o.FnParam(RENDER_EL_VAR.name, o.DYNAMIC_TYPE),
 }
-function addDetectChangesInHostPropsMethod(hostProps, builder) {
+function addCheckHostMethod(hostProps, builder) {
     var stmts = [];
     var methodParams = [
         new o.FnParam(VIEW_VAR.name, o.importType(resolveIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
+        new o.FnParam(COMPONENT_VIEW_VAR.name, o.importType(resolveIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
         new o.FnParam(RENDER_EL_VAR.name, o.DYNAMIC_TYPE),
         new o.FnParam(THROW_ON_CHANGE_VAR.name, o.BOOL_TYPE),
     ];
-    hostProps.forEach(function (hostProp) {
+    hostProps.forEach(function (hostProp, hostPropIdx) {
         var field = createCheckBindingField(builder);
@@ -212,6 +228,63 @@ var evalResult = convertPropertyBinding(builder, null, o.THIS_EXPR.prop(CONTEXT_FIELD_NAME), hostProp.value, field.bindingId);
         }
-        stmts.push.apply(stmts, createCheckBindingStmt(evalResult, field.expression, THROW_ON_CHANGE_VAR, writeToRenderer(VIEW_VAR, hostProp, RENDER_EL_VAR, evalResult.currValExpr, builder.compilerConfig.logBindingUpdate, securityContextExpr)));
+        var checkBindingStmts;
+        if (hostProp.isAnimation) {
+            var _a = triggerAnimation(VIEW_VAR, COMPONENT_VIEW_VAR, hostProp, o.THIS_EXPR.prop(EVENT_HANDLER_FIELD_NAME)
+                .or(o.importExpr(resolveIdentifier(Identifiers.noop))), RENDER_EL_VAR, evalResult.currValExpr, field.expression), updateStmts = _a.updateStmts, detachStmts = _a.detachStmts;
+            checkBindingStmts = updateStmts;
+            (_b = builder.detachStmts).push.apply(_b, detachStmts);
+        }
+        else {
+            checkBindingStmts = writeToRenderer(VIEW_VAR, hostProp, RENDER_EL_VAR, evalResult.currValExpr, builder.compilerConfig.logBindingUpdate, securityContextExpr);
+        }
+        stmts.push.apply(stmts, createCheckBindingStmt(evalResult, field.expression, THROW_ON_CHANGE_VAR, checkBindingStmts));
+        var _b;
     });
-    builder.methods.push(new o.ClassMethod('detectChangesInHostProps', methodParams, stmts));
+    builder.methods.push(new o.ClassMethod('checkHost', methodParams, stmts));
 }
+function addHandleEventMethod(hostListeners, builder) {
+    var resultVar = o.variable("result");
+    var actionStmts = [resultVar.set(o.literal(true)).toDeclStmt(o.BOOL_TYPE)];
+    hostListeners.forEach(function (hostListener, eventIdx) {
+        var evalResult = convertActionBinding(builder, null, o.THIS_EXPR.prop(CONTEXT_FIELD_NAME), hostListener.handler, "sub_" + eventIdx);
+        var trueStmts = evalResult.stmts;
+        if (evalResult.preventDefault) {
+            trueStmts.push(resultVar.set(evalResult.preventDefault.and(resultVar)).toStmt());
+        }
+        // TODO(tbosch): convert this into a `switch` once our OutputAst supports it.
+        actionStmts.push(new o.IfStmt(EVENT_NAME_VAR.equals(o.literal(hostListener.fullName)), trueStmts));
+    });
+    actionStmts.push(new o.ReturnStatement(resultVar));
+    builder.methods.push(new o.ClassMethod('handleEvent', [
+        new o.FnParam(EVENT_NAME_VAR.name, o.STRING_TYPE),
+        new o.FnParam(EventHandlerVars.event.name, o.DYNAMIC_TYPE)
+    ], actionStmts, o.BOOL_TYPE));
+}
+function addSubscribeMethod(dirMeta, builder) {
+    var methodParams = [
+        new o.FnParam(VIEW_VAR.name, o.importType(resolveIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
+        new o.FnParam(EVENT_HANDLER_FIELD_NAME, o.DYNAMIC_TYPE)
+    ];
+    var stmts = [
+        o.THIS_EXPR.prop(EVENT_HANDLER_FIELD_NAME).set(o.variable(EVENT_HANDLER_FIELD_NAME)).toStmt()
+    ];
+    Object.keys(dirMeta.outputs).forEach(function (emitterPropName, emitterIdx) {
+        var eventName = dirMeta.outputs[emitterPropName];
+        var paramName = "emit" + emitterIdx;
+        methodParams.push(new o.FnParam(paramName, o.BOOL_TYPE));
+        var subscriptionFieldName = "subscription" + emitterIdx;
+        builder.fields.push(new o.ClassField(subscriptionFieldName, o.DYNAMIC_TYPE));
+        stmts.push(new o.IfStmt(o.variable(paramName), [
+            o.THIS_EXPR.prop(subscriptionFieldName)
+                .set(o.THIS_EXPR.prop(CONTEXT_FIELD_NAME)
+                .prop(emitterPropName)
+                .callMethod(o.BuiltinMethod.SubscribeObservable, [o.variable(EVENT_HANDLER_FIELD_NAME)
+                    .callMethod(o.BuiltinMethod.Bind, [VIEW_VAR, o.literal(eventName)])]))
+                .toStmt()
+        ]));
+        builder.destroyStmts.push(o.THIS_EXPR.prop(subscriptionFieldName)
+            .and(o.THIS_EXPR.prop(subscriptionFieldName).callMethod('unsubscribe', []))
+            .toStmt());
+    });
+    builder.methods.push(new o.ClassMethod('subscribe', methodParams, stmts));
+}
 var ParseResult = (function () {
@@ -247,2 +320,75 @@ function ParseResult(hostProps, hostListeners, errors) {
 }
+export var DirectiveWrapperExpressions = (function () {
+    function DirectiveWrapperExpressions() {
+    }
+    DirectiveWrapperExpressions.create = function (dir, depsExpr) {
+        return o.importExpr(dir).instantiate(depsExpr, o.importType(dir));
+    };
+    DirectiveWrapperExpressions.context = function (dirWrapper) {
+        return dirWrapper.prop(CONTEXT_FIELD_NAME);
+    };
+    DirectiveWrapperExpressions.ngDoCheck = function (dirWrapper, view, renderElement, throwOnChange) {
+        return dirWrapper.callMethod('ngDoCheck', [view, renderElement, throwOnChange]);
+    };
+    DirectiveWrapperExpressions.checkHost = function (hostProps, dirWrapper, view, componentView, renderElement, throwOnChange, runtimeSecurityContexts) {
+        if (hostProps.length) {
+            return [dirWrapper
+                    .callMethod('checkHost', [view, componentView, renderElement, throwOnChange].concat(runtimeSecurityContexts))
+                    .toStmt()];
+        }
+        else {
+            return [];
+        }
+    };
+    DirectiveWrapperExpressions.ngOnDetach = function (hostProps, dirWrapper, view, componentView, renderEl) {
+        if (hostProps.some(function (prop) { return prop.isAnimation; })) {
+            return [dirWrapper
+                    .callMethod('ngOnDetach', [
+                    view,
+                    componentView,
+                    renderEl,
+                ])
+                    .toStmt()];
+        }
+        else {
+            return [];
+        }
+    };
+    DirectiveWrapperExpressions.ngOnDestroy = function (dir, dirWrapper) {
+        if (dir.type.lifecycleHooks.indexOf(LifecycleHooks.OnDestroy) !== -1 ||
+            Object.keys(dir.outputs).length > 0) {
+            return [dirWrapper.callMethod('ngOnDestroy', []).toStmt()];
+        }
+        else {
+            return [];
+        }
+    };
+    DirectiveWrapperExpressions.subscribe = function (dirMeta, hostProps, usedEvents, dirWrapper, view, eventListener) {
+        var needsSubscribe = false;
+        var eventFlags = [];
+        Object.keys(dirMeta.outputs).forEach(function (propName) {
+            var eventName = dirMeta.outputs[propName];
+            var eventUsed = usedEvents.indexOf(eventName) > -1;
+            needsSubscribe = needsSubscribe || eventUsed;
+            eventFlags.push(o.literal(eventUsed));
+        });
+        hostProps.forEach(function (hostProp) {
+            if (hostProp.isAnimation && usedEvents.length > 0) {
+                needsSubscribe = true;
+            }
+        });
+        if (needsSubscribe) {
+            return [
+                dirWrapper.callMethod('subscribe', [view, eventListener].concat(eventFlags)).toStmt()
+            ];
+        }
+        else {
+            return [];
+        }
+    };
+    DirectiveWrapperExpressions.handleEvent = function (hostEvents, dirWrapper, eventName, event) {
+        return dirWrapper.callMethod('handleEvent', [eventName, event]);
+    };
+    return DirectiveWrapperExpressions;
+}());
 //# sourceMappingURL=directive_wrapper_compiler.js.map

src/directive_wrapper_compiler.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"DirectiveWrapperCompiler":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./config","name":"CompilerConfig"},{"__symbolic":"reference","module":"./expression_parser/parser","name":"Parser"},{"__symbolic":"reference","module":"./schema/element_schema_registry","name":"ElementSchemaRegistry"},{"__symbolic":"reference","module":"./private_import_core","name":"Console"}]}],"compile":[{"__symbolic":"method"}]},"statics":{"dirWrapperClassName":{"__symbolic":"function","parameters":["id"],"value":{"__symbolic":"error","message":"Expression form not supported","line":52,"character":69}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"DirectiveWrapperCompiler":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./config","name":"CompilerConfig"},{"__symbolic":"reference","module":"./expression_parser/parser","name":"Parser"},{"__symbolic":"reference","module":"./schema/element_schema_registry","name":"ElementSchemaRegistry"},{"__symbolic":"reference","module":"./private_import_core","name":"Console"}]}],"compile":[{"__symbolic":"method"}]},"statics":{"dirWrapperClassName":{"__symbolic":"function","parameters":["id"],"value":{"__symbolic":"error","message":"Expression form not supported","line":55,"character":69}}}}}}

src/identifiers.d.ts

@@ -38,3 +38,2 @@ import { CompileIdentifierMetadata, CompileTokenMetadata } from './compile_metadata';
     static checkBinding: IdentifierSpec;
-    static flattenNestedViewRenderNodes: IdentifierSpec;
     static devModeEqual: IdentifierSpec;
@@ -68,2 +67,4 @@ static interpolate: IdentifierSpec;
     static InlineArrayDynamic: IdentifierSpec;
+    static subscribeToRenderElement: IdentifierSpec;
+    static noop: IdentifierSpec;
 }
@@ -70,0 +71,0 @@ export declare function assetUrl(pkg: string, path?: string, type?: string): string;

src/identifiers.js

@@ -152,7 +152,2 @@ /**
     };
-    Identifiers.flattenNestedViewRenderNodes = {
-        name: 'flattenNestedViewRenderNodes',
-        moduleUrl: VIEW_UTILS_MODULE_URL,
-        runtime: view_utils.flattenNestedViewRenderNodes
-    };
     Identifiers.devModeEqual = { name: 'devModeEqual', moduleUrl: CD_MODULE_URL, runtime: devModeEqual };
@@ -301,2 +296,8 @@ Identifiers.interpolate = {
     };
+    Identifiers.subscribeToRenderElement = {
+        name: 'subscribeToRenderElement',
+        moduleUrl: VIEW_UTILS_MODULE_URL,
+        runtime: view_utils.subscribeToRenderElement
+    };
+    Identifiers.noop = { name: 'noop', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: view_utils.noop };
     return Identifiers;
@@ -303,0 +304,0 @@ }());

src/metadata_resolver.js

@@ -13,3 +13,3 @@ /**
 };
-import { AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationStateDeclarationMetadata, AnimationStateTransitionMetadata, AnimationStyleMetadata, AnimationWithStepsMetadata, Attribute, Component, Host, Inject, Injectable, Optional, Query, Self, SkipSelf, Type, resolveForwardRef } from '@angular/core';
+import { AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationStateDeclarationMetadata, AnimationStateTransitionMetadata, AnimationStyleMetadata, AnimationWithStepsMetadata, Attribute, Component, Host, Inject, Injectable, Optional, Self, SkipSelf, Type, resolveForwardRef } from '@angular/core';
 import { assertArrayOfStrings, assertInterpolationSymbols } from './assertions';
@@ -148,3 +148,3 @@ import * as cpl from './compile_metadata';
                     entryComponentMetadata =
-                        flattenArray(dirMeta.entryComponents)
+                        flattenAndDedupeArray(dirMeta.entryComponents)
                             .map(function (type) { return _this.getTypeMetadata(type, staticTypeModuleUrl(type)); })
@@ -214,3 +214,3 @@ .concat(entryComponentMetadata);
             if (meta.imports) {
-                flattenArray(meta.imports).forEach(function (importedType) {
+                flattenAndDedupeArray(meta.imports).forEach(function (importedType) {
                     var importedModuleType;
@@ -240,3 +240,3 @@ if (isValidType(importedType)) {
             if (meta.exports) {
-                flattenArray(meta.exports).forEach(function (exportedType) {
+                flattenAndDedupeArray(meta.exports).forEach(function (exportedType) {
                     if (!isValidType(exportedType)) {
@@ -266,3 +266,3 @@ throw new Error("Unexpected value '" + stringify(exportedType) + "' exported by the module '" + stringify(moduleType) + "'");
             if (meta.declarations) {
-                flattenArray(meta.declarations).forEach(function (declaredType) {
+                flattenAndDedupeArray(meta.declarations).forEach(function (declaredType) {
                     if (!isValidType(declaredType)) {
@@ -290,7 +290,7 @@ throw new Error("Unexpected value '" + stringify(declaredType) + "' declared by the module '" + stringify(moduleType) + "'");
             if (meta.entryComponents) {
-                entryComponents_1.push.apply(entryComponents_1, flattenArray(meta.entryComponents)
+                entryComponents_1.push.apply(entryComponents_1, flattenAndDedupeArray(meta.entryComponents)
                     .map(function (type) { return _this.getTypeMetadata(type, staticTypeModuleUrl(type)); }));
             }
             if (meta.bootstrap) {
-                var typeMetadata = flattenArray(meta.bootstrap).map(function (type) {
+                var typeMetadata = flattenAndDedupeArray(meta.bootstrap).map(function (type) {
                     if (!isValidType(type)) {
@@ -305,3 +305,3 @@ throw new Error("Unexpected value '" + stringify(type) + "' used in the bootstrap property of module '" + stringify(moduleType) + "'");
             if (meta.schemas) {
-                schemas.push.apply(schemas, flattenArray(meta.schemas));
+                schemas.push.apply(schemas, flattenAndDedupeArray(meta.schemas));
             }
@@ -449,4 +449,2 @@ (_a = transitiveModule_1.entryComponents).push.apply(_a, entryComponents_1);
             var isOptional = false;
-            var query = null;
-            var viewQuery = null;
             var token = null;
@@ -471,10 +469,2 @@ if (Array.isArray(param)) {
                     }
-                    else if (paramEntry instanceof Query) {
-                        if (paramEntry.isViewQuery) {
-                            viewQuery = paramEntry;
-                        }
-                        else {
-                            query = paramEntry;
-                        }
-                    }
                     else if (paramEntry instanceof Inject) {
@@ -501,4 +491,2 @@ token = paramEntry.token;
                 isOptional: isOptional,
-                query: query ? _this.getQueryMetadata(query, null, typeOrFunc) : null,
-                viewQuery: viewQuery ? _this.getQueryMetadata(viewQuery, null, typeOrFunc) : null,
                 token: _this.getTokenMetadata(token)
@@ -694,2 +682,11 @@ });
 }
+function dedupeArray(array) {
+    if (array) {
+        return Array.from(new Set(array));
+    }
+    return [];
+}
+function flattenAndDedupeArray(tree) {
+    return dedupeArray(flattenArray(tree));
+}
 function isValidType(value) {
@@ -696,0 +693,0 @@ return cpl.isStaticSymbol(value) || (value instanceof Type);

src/output/output_interpreter.js

@@ -155,3 +155,3 @@ /**
                 case o.BuiltinMethod.ConcatArray:
-                    result = receiver.concat(args[0]);
+                    result = receiver.concat.apply(receiver, args);
                     break;
@@ -162,3 +162,3 @@ case o.BuiltinMethod.SubscribeObservable:
                 case o.BuiltinMethod.Bind:
-                    result = receiver.bind(args[0]);
+                    result = receiver.bind.apply(receiver, args);
                     break;
@@ -165,0 +165,0 @@ default:

src/provider_analyzer.js

@@ -195,5 +195,2 @@ /**
         }
-        if (isPresent(dep.query) || isPresent(dep.viewQuery)) {
-            return dep;
-        }
         if (isPresent(dep.token)) {
@@ -457,7 +454,2 @@ // access builtints
     }
-    component.type.diDeps.forEach(function (dep) {
-        if (isPresent(dep.viewQuery)) {
-            _addQueryToTokenMap(viewQueries, dep.viewQuery);
-        }
-    });
     return viewQueries;
@@ -471,7 +463,2 @@ }
         }
-        directive.type.diDeps.forEach(function (dep) {
-            if (isPresent(dep.query)) {
-                _addQueryToTokenMap(contentQueries, dep.query);
-            }
-        });
     });
@@ -478,0 +465,0 @@ return contentQueries;

src/template_parser/template_ast.d.ts

@@ -82,2 +82,3 @@ /**
     sourceSpan: ParseSourceSpan;
+    static calcFullName(name: string, target: string, phase: string): string;
     constructor(name: string, target: string, phase: string, handler: AST, sourceSpan: ParseSourceSpan);
@@ -84,0 +85,0 @@ visit(visitor: TemplateAstVisitor, context: any): any;

src/template_parser/template_ast.js

@@ -82,2 +82,13 @@ /**
     }
+    BoundEventAst.calcFullName = function (name, target, phase) {
+        if (target) {
+            return target + ":" + name;
+        }
+        else if (phase) {
+            return "@" + name + "." + phase;
+        }
+        else {
+            return name;
+        }
+    };
     BoundEventAst.prototype.visit = function (visitor, context) {
@@ -87,10 +98,3 @@ return visitor.visitEvent(this, context);
     Object.defineProperty(BoundEventAst.prototype, "fullName", {
-        get: function () {
-            if (this.target) {
-                return this.target + ":" + this.name;
-            }
-            else {
-                return this.name;
-            }
-        },
+        get: function () { return BoundEventAst.calcFullName(this.name, this.target, this.phase); },
         enumerable: true,
@@ -97,0 +101,0 @@ configurable: true

src/template_parser/template_parser.js

@@ -510,3 +510,5 @@ /**
         if (componentTypeNames.length > 1) {
-            this._reportError("More than one component: " + componentTypeNames.join(','), sourceSpan);
+            this._reportError("More than one component matched on this element.\n" +
+                "Make sure that only one component's selector can match a given element.\n" +
+                ("Conflicting components: " + componentTypeNames.join(',')), sourceSpan);
         }
@@ -513,0 +515,0 @@ };

src/template_parser/template_parser.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"TEMPLATE_TRANSFORMS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"OpaqueToken"},"arguments":["TemplateTransforms"]},"TemplateParser":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"TEMPLATE_TRANSFORMS"}]}]],"parameters":[{"__symbolic":"reference","module":"../expression_parser/parser","name":"Parser"},{"__symbolic":"reference","module":"../schema/element_schema_registry","name":"ElementSchemaRegistry"},{"__symbolic":"reference","module":"../i18n/i18n_html_parser","name":"I18NHtmlParser"},{"__symbolic":"reference","module":"../private_import_core","name":"Console"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./template_ast","name":"TemplateAstVisitor"}]}]}],"parse":[{"__symbolic":"method"}],"tryParse":[{"__symbolic":"method"}],"tryParseHtml":[{"__symbolic":"method"}],"expandHtml":[{"__symbolic":"method"}],"getInterpolationConfig":[{"__symbolic":"method"}],"_assertNoReferenceDuplicationOnTemplate":[{"__symbolic":"method"}]}},"splitClasses":{"__symbolic":"function","parameters":["classAttrValue"],"value":{"__symbolic":"error","message":"Expression form not supported","line":769,"character":37}}}}
+{"__symbolic":"module","version":1,"metadata":{"TEMPLATE_TRANSFORMS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"OpaqueToken"},"arguments":["TemplateTransforms"]},"TemplateParser":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"TEMPLATE_TRANSFORMS"}]}]],"parameters":[{"__symbolic":"reference","module":"../expression_parser/parser","name":"Parser"},{"__symbolic":"reference","module":"../schema/element_schema_registry","name":"ElementSchemaRegistry"},{"__symbolic":"reference","module":"../i18n/i18n_html_parser","name":"I18NHtmlParser"},{"__symbolic":"reference","module":"../private_import_core","name":"Console"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./template_ast","name":"TemplateAstVisitor"}]}]}],"parse":[{"__symbolic":"method"}],"tryParse":[{"__symbolic":"method"}],"tryParseHtml":[{"__symbolic":"method"}],"expandHtml":[{"__symbolic":"method"}],"getInterpolationConfig":[{"__symbolic":"method"}],"_assertNoReferenceDuplicationOnTemplate":[{"__symbolic":"method"}]}},"splitClasses":{"__symbolic":"function","parameters":["classAttrValue"],"value":{"__symbolic":"error","message":"Expression form not supported","line":773,"character":37}}}}

src/view_compiler/compile_element.d.ts

@@ -11,3 +11,3 @@ /**
 import { ProviderAst, ReferenceAst, TemplateAst } from '../template_parser/template_ast';
-import { CompileView } from './compile_view';
+import { CompileView, CompileViewRootNode } from './compile_view';
 import { ComponentFactoryDependency, DirectiveWrapperDependency, ViewFactoryDependency } from './deps';
@@ -41,4 +41,3 @@ export declare class CompileNode {
     private _queries;
-    private _componentConstructorViewQueryLists;
-    contentNodesByNgContentIndex: Array<o.Expression>[];
+    contentNodesByNgContentIndex: Array<CompileViewRootNode>[];
     embeddedView: CompileView;
@@ -55,3 +54,3 @@ referenceTokens: {
     afterChildren(childNodeCount: number): void;
-    addContentNode(ngContentIndex: number, nodeExpr: o.Expression): void;
+    addContentNode(ngContentIndex: number, nodeExpr: CompileViewRootNode): void;
     getComponent(): o.Expression;
@@ -58,0 +57,0 @@ getProviderTokens(): o.Expression[];

src/view_compiler/compile_element.js

@@ -15,3 +15,3 @@ /**
 import { createDiTokenExpression } from '../compiler_util/identifier_util';
-import { DirectiveWrapperCompiler } from '../directive_wrapper_compiler';
+import { DirectiveWrapperCompiler, DirectiveWrapperExpressions } from '../directive_wrapper_compiler';
 import { MapWrapper } from '../facade/collection';
@@ -56,3 +56,2 @@ import { isPresent } from '../facade/lang';
         this._queries = new Map();
-        this._componentConstructorViewQueryLists = [];
         this.contentNodesByNgContentIndex = null;
@@ -90,2 +89,5 @@ this.referenceTokens = {};
         this.instances.set(resolveIdentifierToken(Identifiers.AppElement).reference, this.appElement);
+        if (this.hasViewContainer) {
+            this.view.viewContainerAppElements.push(this.appElement);
+        }
     };
@@ -164,4 +166,3 @@ CompileElement.prototype._createComponentFactoryResolver = function () {
                         _this._targetDependencies.push(new DirectiveWrapperDependency(provider.useClass, directiveWrapperIdentifier));
-                        return o.importExpr(directiveWrapperIdentifier)
-                            .instantiate(depsExpr, o.importType(directiveWrapperIdentifier));
+                        return DirectiveWrapperExpressions.create(directiveWrapperIdentifier, depsExpr);
                     }
@@ -181,3 +182,3 @@ else {
                 _this.directiveWrapperInstance.set(resolvedProvider.token.reference, instance);
-                _this.instances.set(resolvedProvider.token.reference, instance.prop('context'));
+                _this.instances.set(resolvedProvider.token.reference, DirectiveWrapperExpressions.context(instance));
             }
@@ -232,9 +233,4 @@ else {
         if (isPresent(this.component)) {
-            var componentConstructorViewQueryList = isPresent(this.component) ?
-                o.literalArr(this._componentConstructorViewQueryLists) :
-                o.NULL_EXPR;
             var compExpr = isPresent(this.getComponent()) ? this.getComponent() : o.NULL_EXPR;
-            this.view.createMethod.addStmt(this.appElement
-                .callMethod('initComponent', [compExpr, componentConstructorViewQueryList, this._compViewExpr])
-                .toStmt());
+            this.view.createMethod.addStmt(this.appElement.callMethod('initComponent', [compExpr, this._compViewExpr]).toStmt());
         }
@@ -301,11 +297,2 @@ };
         var result = null;
-        // constructor content query
-        if (!result && isPresent(dep.query)) {
-            result = this._addQuery(dep.query, null).queryList;
-        }
-        // constructor view query
-        if (!result && isPresent(dep.viewQuery)) {
-            result = createQueryList(dep.viewQuery, null, "_viewQuery_" + dep.viewQuery.selectors[0].name + "_" + this.nodeIndex + "_" + this._componentConstructorViewQueryLists.length, this.view);
-            this._componentConstructorViewQueryLists.push(result);
-        }
         if (isPresent(dep.token)) {
@@ -312,0 +299,0 @@ // access builtins with special visibility

src/view_compiler/compile_view.d.ts

@@ -18,2 +18,13 @@ /**
 import { CompileQuery } from './compile_query';
+export declare enum CompileViewRootNodeType {
+    Node = 0,
+    ViewContainer = 1,
+    NgContent = 2,
+}
+export declare class CompileViewRootNode {
+    type: CompileViewRootNodeType;
+    expr: o.Expression;
+    ngContentIndex: number;
+    constructor(type: CompileViewRootNodeType, expr: o.Expression, ngContentIndex?: number);
+}
 export declare class CompileView implements NameResolver {
@@ -30,4 +41,7 @@ component: CompileDirectiveMetadata;
     viewQueries: Map<any, CompileQuery[]>;
+    viewChildren: o.Expression[];
     nodes: CompileNode[];
-    rootNodesOrAppElements: o.Expression[];
+    rootNodes: CompileViewRootNode[];
+    lastRenderNode: o.Expression;
+    viewContainerAppElements: o.Expression[];
     createMethod: CompileMethod;
@@ -50,3 +64,2 @@ animationBindingsMethod: CompileMethod;
     disposables: o.Expression[];
-    subscriptions: o.Expression[];
     componentView: CompileView;
@@ -53,0 +66,0 @@ purePipes: Map<string, CompilePipe>;

src/view_compiler/compile_view.js

@@ -18,2 +18,16 @@ /**
 import { getPropertyInView, getViewFactoryName } from './util';
+export var CompileViewRootNodeType;
+(function (CompileViewRootNodeType) {
+    CompileViewRootNodeType[CompileViewRootNodeType["Node"] = 0] = "Node";
+    CompileViewRootNodeType[CompileViewRootNodeType["ViewContainer"] = 1] = "ViewContainer";
+    CompileViewRootNodeType[CompileViewRootNodeType["NgContent"] = 2] = "NgContent";
+})(CompileViewRootNodeType || (CompileViewRootNodeType = {}));
+export var CompileViewRootNode = (function () {
+    function CompileViewRootNode(type, expr, ngContentIndex) {
+        this.type = type;
+        this.expr = expr;
+        this.ngContentIndex = ngContentIndex;
+    }
+    return CompileViewRootNode;
+}());
 export var CompileView = (function () {
@@ -30,5 +44,7 @@ function CompileView(component, genConfig, pipeMetas, styles, animations, viewIndex, declarationElement, templateVariableBindings) {
         this.templateVariableBindings = templateVariableBindings;
+        this.viewChildren = [];
         this.nodes = [];
-        // root nodes or AppElements for ViewContainers
-        this.rootNodesOrAppElements = [];
+        this.rootNodes = [];
+        this.lastRenderNode = o.NULL_EXPR;
+        this.viewContainerAppElements = [];
         this.methods = [];
@@ -39,3 +55,2 @@ this.ctorStmts = [];
         this.disposables = [];
-        this.subscriptions = [];
         this.purePipes = new Map();
@@ -80,12 +95,2 @@ this.pipes = [];
             });
-            var constructorViewQueryCount = 0;
-            this.component.type.diDeps.forEach(function (dep) {
-                if (isPresent(dep.viewQuery)) {
-                    var queryList = o.THIS_EXPR.prop('declarationAppElement')
-                        .prop('componentConstructorViewQueries')
-                        .key(o.literal(constructorViewQueryCount++));
-                    var query = new CompileQuery(dep.viewQuery, queryList, null, _this);
-                    addQueryToTokenMap(viewQueries, query);
-                }
-            });
         }
@@ -92,0 +97,0 @@ this.viewQueries = viewQueries;

src/view_compiler/constants.d.ts

@@ -30,3 +30,2 @@ /**
     static renderer: o.ReadPropExpr;
-    static projectableNodes: o.ReadPropExpr;
     static viewUtils: o.ReadPropExpr;
@@ -33,0 +32,0 @@ }

src/view_compiler/constants.js

@@ -9,7 +9,4 @@ /**
 import { createEnumExpression } from '../compiler_util/identifier_util';
-import { Identifiers, resolveEnumIdentifier } from '../identifiers';
+import { Identifiers } from '../identifiers';
 import * as o from '../output/output_ast';
-function _enumExpression(classIdentifier, name) {
-    return o.importExpr(resolveEnumIdentifier(classIdentifier, name));
-}
 export var ViewTypeEnum = (function () {
@@ -59,3 +56,2 @@ function ViewTypeEnum() {
     ViewProperties.renderer = o.THIS_EXPR.prop('renderer');
-    ViewProperties.projectableNodes = o.THIS_EXPR.prop('projectableNodes');
     ViewProperties.viewUtils = o.THIS_EXPR.prop('viewUtils');
@@ -62,0 +58,0 @@ return ViewProperties;

src/view_compiler/event_binder.d.ts

@@ -1,34 +0,3 @@
-/**
- * @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 { CompileDirectiveMetadata } from '../compile_metadata';
-import * as o from '../output/output_ast';
 import { BoundEventAst, DirectiveAst } from '../template_parser/template_ast';
 import { CompileElement } from './compile_element';
-export declare class CompileEventListener {
-    compileElement: CompileElement;
-    eventTarget: string;
-    eventName: string;
-    eventPhase: string;
-    private _method;
-    private _hasComponentHostListener;
-    private _methodName;
-    private _eventParam;
-    private _actionResultExprs;
-    static getOrCreate(compileElement: CompileElement, eventTarget: string, eventName: string, eventPhase: string, targetEventListeners: CompileEventListener[]): CompileEventListener;
-    methodName: string;
-    isAnimation: boolean;
-    constructor(compileElement: CompileElement, eventTarget: string, eventName: string, eventPhase: string, listenerIndex: number);
-    addAction(hostEvent: BoundEventAst, directive: CompileDirectiveMetadata, directiveInstance: o.Expression): void;
-    finishMethod(): void;
-    listenToRenderer(): void;
-    listenToAnimation(animationTransitionVar: o.ReadVarExpr): o.Statement;
-    listenToDirective(directiveInstance: o.Expression, observablePropName: string): void;
-}
-export declare function collectEventListeners(hostEvents: BoundEventAst[], dirs: DirectiveAst[], compileElement: CompileElement): CompileEventListener[];
-export declare function bindDirectiveOutputs(directiveAst: DirectiveAst, directiveInstance: o.Expression, eventListeners: CompileEventListener[]): void;
-export declare function bindRenderOutputs(eventListeners: CompileEventListener[]): void;
+export declare function bindOutputs(boundEvents: BoundEventAst[], directives: DirectiveAst[], compileElement: CompileElement, bindToRenderer: boolean): boolean;

src/view_compiler/event_binder.js

@@ -9,140 +9,92 @@ /**
 import { EventHandlerVars, convertActionBinding } from '../compiler_util/expression_converter';
-import { isPresent } from '../facade/lang';
-import { identifierToken } from '../identifiers';
+import { createInlineArray } from '../compiler_util/identifier_util';
+import { DirectiveWrapperExpressions } from '../directive_wrapper_compiler';
+import { MapWrapper } from '../facade/collection';
+import { Identifiers, resolveIdentifier } from '../identifiers';
 import * as o from '../output/output_ast';
 import { CompileMethod } from './compile_method';
-import { ViewProperties } from './constants';
-export var CompileEventListener = (function () {
-    function CompileEventListener(compileElement, eventTarget, eventName, eventPhase, listenerIndex) {
-        this.compileElement = compileElement;
-        this.eventTarget = eventTarget;
-        this.eventName = eventName;
-        this.eventPhase = eventPhase;
-        this._hasComponentHostListener = false;
-        this._actionResultExprs = [];
-        this._method = new CompileMethod(compileElement.view);
-        this._methodName =
-            "_handle_" + sanitizeEventName(eventName) + "_" + compileElement.nodeIndex + "_" + listenerIndex;
-        this._eventParam = new o.FnParam(EventHandlerVars.event.name, o.importType(this.compileElement.view.genConfig.renderTypes.renderEvent));
+import { getHandleEventMethodName } from './util';
+export function bindOutputs(boundEvents, directives, compileElement, bindToRenderer) {
+    var usedEvents = collectEvents(boundEvents, directives);
+    if (!usedEvents.size) {
+        return false;
     }
-    CompileEventListener.getOrCreate = function (compileElement, eventTarget, eventName, eventPhase, targetEventListeners) {
-        var listener = targetEventListeners.find(function (listener) { return listener.eventTarget == eventTarget && listener.eventName == eventName &&
-            listener.eventPhase == eventPhase; });
-        if (!listener) {
-            listener = new CompileEventListener(compileElement, eventTarget, eventName, eventPhase, targetEventListeners.length);
-            targetEventListeners.push(listener);
-        }
-        return listener;
-    };
-    Object.defineProperty(CompileEventListener.prototype, "methodName", {
-        get: function () { return this._methodName; },
-        enumerable: true,
-        configurable: true
+    if (bindToRenderer) {
+        subscribeToRenderEvents(usedEvents, compileElement);
+    }
+    subscribeToDirectiveEvents(usedEvents, directives, compileElement);
+    generateHandleEventMethod(boundEvents, directives, compileElement);
+    return true;
+}
+function collectEvents(boundEvents, directives) {
+    var usedEvents = new Map();
+    boundEvents.forEach(function (event) { usedEvents.set(event.fullName, event); });
+    directives.forEach(function (dirAst) {
+        dirAst.hostEvents.forEach(function (event) { usedEvents.set(event.fullName, event); });
     });
-    Object.defineProperty(CompileEventListener.prototype, "isAnimation", {
-        get: function () { return !!this.eventPhase; },
-        enumerable: true,
-        configurable: true
-    });
-    CompileEventListener.prototype.addAction = function (hostEvent, directive, directiveInstance) {
-        if (isPresent(directive) && directive.isComponent) {
-            this._hasComponentHostListener = true;
+    return usedEvents;
+}
+function subscribeToRenderEvents(usedEvents, compileElement) {
+    var eventAndTargetExprs = [];
+    usedEvents.forEach(function (event) {
+        if (!event.phase) {
+            eventAndTargetExprs.push(o.literal(event.name), o.literal(event.target));
         }
-        this._method.resetDebugInfo(this.compileElement.nodeIndex, hostEvent);
-        var context = directiveInstance || this.compileElement.view.componentContext;
-        var view = this.compileElement.view;
-        var evalResult = convertActionBinding(view, directive ? null : view, context, hostEvent.handler, this.compileElement.nodeIndex + "_" + this._actionResultExprs.length);
-        if (evalResult.preventDefault) {
-            this._actionResultExprs.push(evalResult.preventDefault);
-        }
-        this._method.addStmts(evalResult.stmts);
-    };
-    CompileEventListener.prototype.finishMethod = function () {
-        var markPathToRootStart = this._hasComponentHostListener ?
-            this.compileElement.appElement.prop('componentView') :
-            o.THIS_EXPR;
-        var resultExpr = o.literal(true);
-        this._actionResultExprs.forEach(function (expr) { resultExpr = resultExpr.and(expr); });
-        var stmts = [markPathToRootStart.callMethod('markPathToRootAsCheckOnce', []).toStmt()]
-            .concat(this._method.finish())
-            .concat([new o.ReturnStatement(resultExpr)]);
-        // private is fine here as no child view will reference the event handler...
-        this.compileElement.view.methods.push(new o.ClassMethod(this._methodName, [this._eventParam], stmts, o.BOOL_TYPE, [o.StmtModifier.Private]));
-    };
-    CompileEventListener.prototype.listenToRenderer = function () {
-        var listenExpr;
-        var eventListener = o.THIS_EXPR.callMethod('eventHandler', [o.THIS_EXPR.prop(this._methodName).callMethod(o.BuiltinMethod.Bind, [o.THIS_EXPR])]);
-        if (isPresent(this.eventTarget)) {
-            listenExpr = ViewProperties.renderer.callMethod('listenGlobal', [o.literal(this.eventTarget), o.literal(this.eventName), eventListener]);
-        }
-        else {
-            listenExpr = ViewProperties.renderer.callMethod('listen', [this.compileElement.renderNode, o.literal(this.eventName), eventListener]);
-        }
-        var disposable = o.variable("disposable_" + this.compileElement.view.disposables.length);
-        this.compileElement.view.disposables.push(disposable);
-        // private is fine here as no child view will reference the event handler...
-        this.compileElement.view.createMethod.addStmt(disposable.set(listenExpr).toDeclStmt(o.FUNCTION_TYPE, [o.StmtModifier.Private]));
-    };
-    CompileEventListener.prototype.listenToAnimation = function (animationTransitionVar) {
-        var callbackMethod = this.eventPhase == 'start' ? 'onStart' : 'onDone';
-        return animationTransitionVar
-            .callMethod(callbackMethod, [o.THIS_EXPR.prop(this.methodName).callMethod(o.BuiltinMethod.Bind, [o.THIS_EXPR])])
-            .toStmt();
-    };
-    CompileEventListener.prototype.listenToDirective = function (directiveInstance, observablePropName) {
-        var subscription = o.variable("subscription_" + this.compileElement.view.subscriptions.length);
-        this.compileElement.view.subscriptions.push(subscription);
-        var eventListener = o.THIS_EXPR.callMethod('eventHandler', [o.THIS_EXPR.prop(this._methodName).callMethod(o.BuiltinMethod.Bind, [o.THIS_EXPR])]);
-        this.compileElement.view.createMethod.addStmt(subscription
-            .set(directiveInstance.prop(observablePropName)
-            .callMethod(o.BuiltinMethod.SubscribeObservable, [eventListener]))
-            .toDeclStmt(null, [o.StmtModifier.Final]));
-    };
-    return CompileEventListener;
-}());
-export function collectEventListeners(hostEvents, dirs, compileElement) {
-    var eventListeners = [];
-    hostEvents.forEach(function (hostEvent) {
-        var listener = CompileEventListener.getOrCreate(compileElement, hostEvent.target, hostEvent.name, hostEvent.phase, eventListeners);
-        listener.addAction(hostEvent, null, null);
     });
-    dirs.forEach(function (directiveAst) {
-        var directiveInstance = compileElement.instances.get(identifierToken(directiveAst.directive.type).reference);
-        directiveAst.hostEvents.forEach(function (hostEvent) {
-            var listener = CompileEventListener.getOrCreate(compileElement, hostEvent.target, hostEvent.name, hostEvent.phase, eventListeners);
-            listener.addAction(hostEvent, directiveAst.directive, directiveInstance);
-        });
-    });
-    eventListeners.forEach(function (listener) { return listener.finishMethod(); });
-    return eventListeners;
+    if (eventAndTargetExprs.length) {
+        var disposableVar = o.variable("disposable_" + compileElement.view.disposables.length);
+        compileElement.view.disposables.push(disposableVar);
+        compileElement.view.createMethod.addStmt(disposableVar
+            .set(o.importExpr(resolveIdentifier(Identifiers.subscribeToRenderElement)).callFn([
+            o.THIS_EXPR, compileElement.renderNode, createInlineArray(eventAndTargetExprs),
+            handleEventExpr(compileElement)
+        ]))
+            .toDeclStmt(o.FUNCTION_TYPE, [o.StmtModifier.Private]));
+    }
 }
-export function bindDirectiveOutputs(directiveAst, directiveInstance, eventListeners) {
-    Object.keys(directiveAst.directive.outputs).forEach(function (observablePropName) {
-        var eventName = directiveAst.directive.outputs[observablePropName];
-        eventListeners.filter(function (listener) { return listener.eventName == eventName; }).forEach(function (listener) {
-            listener.listenToDirective(directiveInstance, observablePropName);
-        });
+function subscribeToDirectiveEvents(usedEvents, directives, compileElement) {
+    var usedEventNames = MapWrapper.keys(usedEvents);
+    directives.forEach(function (dirAst) {
+        var dirWrapper = compileElement.directiveWrapperInstance.get(dirAst.directive.type.reference);
+        compileElement.view.createMethod.addStmts(DirectiveWrapperExpressions.subscribe(dirAst.directive, dirAst.hostProperties, usedEventNames, dirWrapper, o.THIS_EXPR, handleEventExpr(compileElement)));
     });
 }
-export function bindRenderOutputs(eventListeners) {
-    eventListeners.forEach(function (listener) {
-        // the animation listeners are handled within property_binder.ts to
-        // allow them to be placed next to the animation factory statements
-        if (!listener.isAnimation) {
-            listener.listenToRenderer();
+function generateHandleEventMethod(boundEvents, directives, compileElement) {
+    var hasComponentHostListener = directives.some(function (dirAst) { return dirAst.hostEvents.some(function (event) { return dirAst.directive.isComponent; }); });
+    var markPathToRootStart = hasComponentHostListener ? compileElement.appElement.prop('componentView') : o.THIS_EXPR;
+    var handleEventStmts = new CompileMethod(compileElement.view);
+    handleEventStmts.resetDebugInfo(compileElement.nodeIndex, compileElement.sourceAst);
+    handleEventStmts.push(markPathToRootStart.callMethod('markPathToRootAsCheckOnce', []).toStmt());
+    var eventNameVar = o.variable('eventName');
+    var resultVar = o.variable('result');
+    handleEventStmts.push(resultVar.set(o.literal(true)).toDeclStmt(o.BOOL_TYPE));
+    directives.forEach(function (dirAst, dirIdx) {
+        var dirWrapper = compileElement.directiveWrapperInstance.get(dirAst.directive.type.reference);
+        if (dirAst.hostEvents.length > 0) {
+            handleEventStmts.push(resultVar
+                .set(DirectiveWrapperExpressions
+                .handleEvent(dirAst.hostEvents, dirWrapper, eventNameVar, EventHandlerVars.event)
+                .and(resultVar))
+                .toStmt());
         }
     });
+    boundEvents.forEach(function (renderEvent, renderEventIdx) {
+        var evalResult = convertActionBinding(compileElement.view, compileElement.view, compileElement.view.componentContext, renderEvent.handler, "sub_" + renderEventIdx);
+        var trueStmts = evalResult.stmts;
+        if (evalResult.preventDefault) {
+            trueStmts.push(resultVar.set(evalResult.preventDefault.and(resultVar)).toStmt());
+        }
+        // TODO(tbosch): convert this into a `switch` once our OutputAst supports it.
+        handleEventStmts.push(new o.IfStmt(eventNameVar.equals(o.literal(renderEvent.fullName)), trueStmts));
+    });
+    handleEventStmts.push(new o.ReturnStatement(resultVar));
+    compileElement.view.methods.push(new o.ClassMethod(getHandleEventMethodName(compileElement.nodeIndex), [
+        new o.FnParam(eventNameVar.name, o.STRING_TYPE),
+        new o.FnParam(EventHandlerVars.event.name, o.DYNAMIC_TYPE)
+    ], handleEventStmts.finish(), o.BOOL_TYPE));
 }
-function convertStmtIntoExpression(stmt) {
-    if (stmt instanceof o.ExpressionStatement) {
-        return stmt.expr;
-    }
-    else if (stmt instanceof o.ReturnStatement) {
-        return stmt.value;
-    }
-    return null;
+function handleEventExpr(compileElement) {
+    var handleEventMethodName = getHandleEventMethodName(compileElement.nodeIndex);
+    return o.THIS_EXPR.callMethod('eventHandler', [o.THIS_EXPR.prop(handleEventMethodName)]);
 }
-function sanitizeEventName(name) {
-    return name.replace(/[^a-zA-Z_]/g, '_');
-}
 //# sourceMappingURL=event_binder.js.map

src/view_compiler/lifecycle_binder.d.ts

@@ -10,3 +10,3 @@ /**
 import * as o from '../output/output_ast';
-import { ProviderAst } from '../template_parser/template_ast';
+import { DirectiveAst, ProviderAst } from '../template_parser/template_ast';
 import { CompileElement } from './compile_element';
@@ -16,3 +16,4 @@ import { CompileView } from './compile_view';
 export declare function bindDirectiveAfterViewLifecycleCallbacks(directiveMeta: CompileDirectiveMetadata, directiveInstance: o.Expression, compileElement: CompileElement): void;
+export declare function bindDirectiveWrapperLifecycleCallbacks(dir: DirectiveAst, directiveWrapperIntance: o.Expression, compileElement: CompileElement): void;
 export declare function bindInjectableDestroyLifecycleCallbacks(provider: ProviderAst, providerInstance: o.Expression, compileElement: CompileElement): void;
 export declare function bindPipeDestroyLifecycleCallbacks(pipeMeta: CompilePipeMetadata, pipeInstance: o.Expression, view: CompileView): void;

src/view_compiler/lifecycle_binder.js

@@ -8,4 +8,6 @@ /**
  */
+import { DirectiveWrapperExpressions } from '../directive_wrapper_compiler';
 import * as o from '../output/output_ast';
 import { LifecycleHooks } from '../private_import_core';
+import { ProviderAstType } from '../template_parser/template_ast';
 import { DetectChangesVars } from './constants';
@@ -38,6 +40,12 @@ var STATE_IS_NEVER_CHECKED = o.THIS_EXPR.prop('numberOfChecks').identical(new o.LiteralExpr(0));
 }
+export function bindDirectiveWrapperLifecycleCallbacks(dir, directiveWrapperIntance, compileElement) {
+    compileElement.view.destroyMethod.addStmts(DirectiveWrapperExpressions.ngOnDestroy(dir.directive, directiveWrapperIntance));
+    compileElement.view.detachMethod.addStmts(DirectiveWrapperExpressions.ngOnDetach(dir.hostProperties, directiveWrapperIntance, o.THIS_EXPR, compileElement.component ? compileElement.appElement.prop('componentView') : o.THIS_EXPR, compileElement.renderNode));
+}
 export function bindInjectableDestroyLifecycleCallbacks(provider, providerInstance, compileElement) {
     var onDestroyMethod = compileElement.view.destroyMethod;
     onDestroyMethod.resetDebugInfo(compileElement.nodeIndex, compileElement.sourceAst);
-    if (provider.lifecycleHooks.indexOf(LifecycleHooks.OnDestroy) !== -1) {
+    if (provider.providerType !== ProviderAstType.Directive &&
+        provider.providerType !== ProviderAstType.Component &&
+        provider.lifecycleHooks.indexOf(LifecycleHooks.OnDestroy) !== -1) {
         onDestroyMethod.addStmt(providerInstance.callMethod('ngOnDestroy', []).toStmt());
@@ -44,0 +52,0 @@ }

src/view_compiler/property_binder.d.ts

@@ -6,6 +6,5 @@ import * as o from '../output/output_ast';
 import { CompileView } from './compile_view';
-import { CompileEventListener } from './event_binder';
 export declare function bindRenderText(boundText: BoundTextAst, compileNode: CompileNode, view: CompileView): void;
-export declare function bindRenderInputs(boundProps: BoundElementPropertyAst[], compileElement: CompileElement, eventListeners: CompileEventListener[]): void;
-export declare function bindDirectiveHostProps(directiveAst: DirectiveAst, directiveWrapperInstance: o.Expression, compileElement: CompileElement, eventListeners: CompileEventListener[], elementName: string, schemaRegistry: ElementSchemaRegistry): void;
+export declare function bindRenderInputs(boundProps: BoundElementPropertyAst[], hasEvents: boolean, compileElement: CompileElement): void;
+export declare function bindDirectiveHostProps(directiveAst: DirectiveAst, directiveWrapperInstance: o.Expression, compileElement: CompileElement, elementName: string, schemaRegistry: ElementSchemaRegistry): void;
 export declare function bindDirectiveInputs(directiveAst: DirectiveAst, directiveWrapperInstance: o.Expression, dirIndex: number, compileElement: CompileElement): void;

src/view_compiler/property_binder.js

@@ -11,8 +11,10 @@ /**
 import { createEnumExpression } from '../compiler_util/identifier_util';
-import { writeToRenderer } from '../compiler_util/render_util';
+import { triggerAnimation, writeToRenderer } from '../compiler_util/render_util';
+import { DirectiveWrapperExpressions } from '../directive_wrapper_compiler';
 import { Identifiers, resolveIdentifier } from '../identifiers';
 import * as o from '../output/output_ast';
-import { EMPTY_STATE as EMPTY_ANIMATION_STATE, isDefaultChangeDetectionStrategy } from '../private_import_core';
+import { isDefaultChangeDetectionStrategy } from '../private_import_core';
 import { PropertyBindingType } from '../template_parser/template_ast';
 import { DetectChangesVars } from './constants';
+import { getHandleEventMethodName } from './util';
 export function bindRenderText(boundText, compileNode, view) {
@@ -29,3 +31,3 @@ var valueField = createCheckBindingField(view);
 }
-function bindAndWriteToRenderer(boundProps, context, compileElement, isHostProp, eventListeners) {
+export function bindRenderInputs(boundProps, hasEvents, compileElement) {
     var view = compileElement.view;
@@ -36,4 +38,7 @@ var renderNode = compileElement.renderNode;
         view.detectChangesRenderPropertiesMethod.resetDebugInfo(compileElement.nodeIndex, boundProp);
-        var evalResult = convertPropertyBinding(view, isHostProp ? null : view, context, boundProp.value, bindingField.bindingId);
-        var updateStmts = [];
+        var evalResult = convertPropertyBinding(view, view, compileElement.view.componentContext, boundProp.value, bindingField.bindingId);
+        if (!evalResult) {
+            return;
+        }
+        var checkBindingStmts = [];
         var compileMethod = view.detectChangesRenderPropertiesMethod;
@@ -45,53 +50,20 @@ switch (boundProp.type) {
             case PropertyBindingType.Style:
-                updateStmts.push.apply(updateStmts, writeToRenderer(o.THIS_EXPR, boundProp, renderNode, evalResult.currValExpr, view.genConfig.logBindingUpdate));
+                checkBindingStmts.push.apply(checkBindingStmts, writeToRenderer(o.THIS_EXPR, boundProp, renderNode, evalResult.currValExpr, view.genConfig.logBindingUpdate));
                 break;
             case PropertyBindingType.Animation:
                 compileMethod = view.animationBindingsMethod;
-                var detachStmts_1 = [];
-                var animationName_1 = boundProp.name;
-                var targetViewExpr = isHostProp ? compileElement.appElement.prop('componentView') : o.THIS_EXPR;
-                var animationFnExpr = targetViewExpr.prop('componentType').prop('animations').key(o.literal(animationName_1));
-                // it's important to normalize the void value as `void` explicitly
-                // so that the styles data can be obtained from the stringmap
-                var emptyStateValue = o.literal(EMPTY_ANIMATION_STATE);
-                var unitializedValue = o.importExpr(resolveIdentifier(Identifiers.UNINITIALIZED));
-                var animationTransitionVar_1 = o.variable('animationTransition_' + animationName_1);
-                updateStmts.push(animationTransitionVar_1
-                    .set(animationFnExpr.callFn([
-                    o.THIS_EXPR, renderNode,
-                    bindingField.expression.equals(unitializedValue)
-                        .conditional(emptyStateValue, bindingField.expression),
-                    evalResult.currValExpr.equals(unitializedValue)
-                        .conditional(emptyStateValue, evalResult.currValExpr)
-                ]))
-                    .toDeclStmt());
-                detachStmts_1.push(animationTransitionVar_1
-                    .set(animationFnExpr.callFn([o.THIS_EXPR, renderNode, bindingField.expression, emptyStateValue]))
-                    .toDeclStmt());
-                eventListeners.forEach(function (listener) {
-                    if (listener.isAnimation && listener.eventName === animationName_1) {
-                        var animationStmt = listener.listenToAnimation(animationTransitionVar_1);
-                        updateStmts.push(animationStmt);
-                        detachStmts_1.push(animationStmt);
-                    }
-                });
-                view.detachMethod.addStmts(detachStmts_1);
+                var _a = triggerAnimation(o.THIS_EXPR, o.THIS_EXPR, boundProp, (hasEvents ? o.THIS_EXPR.prop(getHandleEventMethodName(compileElement.nodeIndex)) :
+                    o.importExpr(resolveIdentifier(Identifiers.noop)))
+                    .callMethod(o.BuiltinMethod.Bind, [o.THIS_EXPR]), compileElement.renderNode, evalResult.currValExpr, bindingField.expression), updateStmts = _a.updateStmts, detachStmts = _a.detachStmts;
+                checkBindingStmts.push.apply(checkBindingStmts, updateStmts);
+                view.detachMethod.addStmts(detachStmts);
                 break;
         }
-        compileMethod.addStmts(createCheckBindingStmt(evalResult, bindingField.expression, DetectChangesVars.throwOnChange, updateStmts));
+        compileMethod.addStmts(createCheckBindingStmt(evalResult, bindingField.expression, DetectChangesVars.throwOnChange, checkBindingStmts));
     });
 }
-export function bindRenderInputs(boundProps, compileElement, eventListeners) {
-    bindAndWriteToRenderer(boundProps, compileElement.view.componentContext, compileElement, false, eventListeners);
-}
-export function bindDirectiveHostProps(directiveAst, directiveWrapperInstance, compileElement, eventListeners, elementName, schemaRegistry) {
-    // host properties are change detected by the DirectiveWrappers,
-    // except for the animation properties as they need close integration with animation events
-    // and DirectiveWrappers don't support
-    // event listeners right now.
-    bindAndWriteToRenderer(directiveAst.hostProperties.filter(function (boundProp) { return boundProp.isAnimation; }), directiveWrapperInstance.prop('context'), compileElement, true, eventListeners);
-    var methodArgs = [o.THIS_EXPR, compileElement.renderNode, DetectChangesVars.throwOnChange];
+export function bindDirectiveHostProps(directiveAst, directiveWrapperInstance, compileElement, elementName, schemaRegistry) {
     // We need to provide the SecurityContext for properties that could need sanitization.
-    directiveAst.hostProperties.filter(function (boundProp) { return boundProp.needsRuntimeSecurityContext; })
-        .forEach(function (boundProp) {
+    var runtimeSecurityCtxExprs = directiveAst.hostProperties.filter(function (boundProp) { return boundProp.needsRuntimeSecurityContext; })
+        .map(function (boundProp) {
         var ctx;
@@ -108,5 +80,5 @@ switch (boundProp.type) {
         }
-        methodArgs.push(createEnumExpression(Identifiers.SecurityContext, ctx));
+        return createEnumExpression(Identifiers.SecurityContext, ctx);
     });
-    compileElement.view.detectChangesRenderPropertiesMethod.addStmt(directiveWrapperInstance.callMethod('detectChangesInHostProps', methodArgs).toStmt());
+    compileElement.view.detectChangesRenderPropertiesMethod.addStmts(DirectiveWrapperExpressions.checkHost(directiveAst.hostProperties, directiveWrapperInstance, o.THIS_EXPR, compileElement.component ? compileElement.appElement.prop('componentView') : o.THIS_EXPR, compileElement.renderNode, DetectChangesVars.throwOnChange, runtimeSecurityCtxExprs));
 }
@@ -135,3 +107,3 @@ export function bindDirectiveInputs(directiveAst, directiveWrapperInstance, dirIndex, compileElement) {
         !isDefaultChangeDetectionStrategy(directiveAst.directive.changeDetection);
-    var directiveDetectChangesExpr = directiveWrapperInstance.callMethod('detectChangesInInputProps', [o.THIS_EXPR, compileElement.renderNode, DetectChangesVars.throwOnChange]);
+    var directiveDetectChangesExpr = DirectiveWrapperExpressions.ngDoCheck(directiveWrapperInstance, o.THIS_EXPR, compileElement.renderNode, DetectChangesVars.throwOnChange);
     var directiveDetectChangesStmt = isOnPushComp ?
@@ -138,0 +110,0 @@ new o.IfStmt(directiveDetectChangesExpr, [compileElement.appElement.prop('componentView')

src/view_compiler/util.d.ts

@@ -14,2 +14,2 @@ /**
 export declare function getViewFactoryName(component: CompileDirectiveMetadata, embeddedTemplateIndex: number): string;
-export declare function createFlatArray(expressions: o.Expression[]): o.Expression;
+export declare function getHandleEventMethodName(elementIndex: number): string;

src/view_compiler/util.js

@@ -68,25 +68,5 @@ /**
 }
-export function createFlatArray(expressions) {
-    var lastNonArrayExpressions = [];
-    var result = o.literalArr([]);
-    for (var i = 0; i < expressions.length; i++) {
-        var expr = expressions[i];
-        if (expr.type instanceof o.ArrayType) {
-            if (lastNonArrayExpressions.length > 0) {
-                result =
-                    result.callMethod(o.BuiltinMethod.ConcatArray, [o.literalArr(lastNonArrayExpressions)]);
-                lastNonArrayExpressions = [];
-            }
-            result = result.callMethod(o.BuiltinMethod.ConcatArray, [expr]);
-        }
-        else {
-            lastNonArrayExpressions.push(expr);
-        }
-    }
-    if (lastNonArrayExpressions.length > 0) {
-        result =
-            result.callMethod(o.BuiltinMethod.ConcatArray, [o.literalArr(lastNonArrayExpressions)]);
-    }
-    return result;
+export function getHandleEventMethodName(elementIndex) {
+    return "handleEvent_" + elementIndex;
 }
 //# sourceMappingURL=util.js.map

src/view_compiler/util.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"getViewFactoryName":{"__symbolic":"function","parameters":["component","embeddedTemplateIndex"],"value":{"__symbolic":"error","message":"Expression form not supported","line":68,"character":9}}}}
+{"__symbolic":"module","version":1,"metadata":{"getViewFactoryName":{"__symbolic":"function","parameters":["component","embeddedTemplateIndex"],"value":{"__symbolic":"error","message":"Expression form not supported","line":68,"character":9}},"getHandleEventMethodName":{"__symbolic":"function","parameters":["elementIndex"],"value":{"__symbolic":"error","message":"Expression form not supported","line":72,"character":9}}}}

src/view_compiler/view_binder.js

@@ -9,4 +9,4 @@ /**
 import { templateVisitAll } from '../template_parser/template_ast';
-import { bindDirectiveOutputs, bindRenderOutputs, collectEventListeners } from './event_binder';
-import { bindDirectiveAfterContentLifecycleCallbacks, bindDirectiveAfterViewLifecycleCallbacks, bindInjectableDestroyLifecycleCallbacks, bindPipeDestroyLifecycleCallbacks } from './lifecycle_binder';
+import { bindOutputs } from './event_binder';
+import { bindDirectiveAfterContentLifecycleCallbacks, bindDirectiveAfterViewLifecycleCallbacks, bindDirectiveWrapperLifecycleCallbacks, bindInjectableDestroyLifecycleCallbacks, bindPipeDestroyLifecycleCallbacks } from './lifecycle_binder';
 import { bindDirectiveHostProps, bindDirectiveInputs, bindRenderInputs, bindRenderText } from './property_binder';
@@ -37,8 +37,4 @@ export function bindView(view, parsedTemplate, schemaRegistry) {
         var compileElement = this.view.nodes[this._nodeIndex++];
-        var eventListeners = [];
-        collectEventListeners(ast.outputs, ast.directives, compileElement).forEach(function (entry) {
-            eventListeners.push(entry);
-        });
-        bindRenderInputs(ast.inputs, compileElement, eventListeners);
-        bindRenderOutputs(eventListeners);
+        var hasEvents = bindOutputs(ast.outputs, ast.directives, compileElement, true);
+        bindRenderInputs(ast.inputs, hasEvents, compileElement);
         ast.directives.forEach(function (directiveAst, dirIndex) {
@@ -48,4 +44,3 @@ var directiveInstance = compileElement.instances.get(directiveAst.directive.type.reference);
             bindDirectiveInputs(directiveAst, directiveWrapperInstance, dirIndex, compileElement);
-            bindDirectiveHostProps(directiveAst, directiveWrapperInstance, compileElement, eventListeners, ast.name, _this._schemaRegistry);
-            bindDirectiveOutputs(directiveAst, directiveInstance, eventListeners);
+            bindDirectiveHostProps(directiveAst, directiveWrapperInstance, compileElement, ast.name, _this._schemaRegistry);
         });
@@ -57,4 +52,6 @@ templateVisitAll(this, ast.children, compileElement);
             var directiveInstance = compileElement.instances.get(directiveAst.directive.type.reference);
+            var directiveWrapperInstance = compileElement.directiveWrapperInstance.get(directiveAst.directive.type.reference);
             bindDirectiveAfterContentLifecycleCallbacks(directiveAst.directive, directiveInstance, compileElement);
             bindDirectiveAfterViewLifecycleCallbacks(directiveAst.directive, directiveInstance, compileElement);
+            bindDirectiveWrapperLifecycleCallbacks(directiveAst, directiveWrapperInstance, compileElement);
         });
@@ -69,3 +66,3 @@ ast.providers.forEach(function (providerAst) {
         var compileElement = this.view.nodes[this._nodeIndex++];
-        var eventListeners = collectEventListeners(ast.outputs, ast.directives, compileElement);
+        bindOutputs(ast.outputs, ast.directives, compileElement, false);
         ast.directives.forEach(function (directiveAst, dirIndex) {
@@ -75,5 +72,5 @@ var directiveInstance = compileElement.instances.get(directiveAst.directive.type.reference);
             bindDirectiveInputs(directiveAst, directiveWrapperInstance, dirIndex, compileElement);
-            bindDirectiveOutputs(directiveAst, directiveInstance, eventListeners);
             bindDirectiveAfterContentLifecycleCallbacks(directiveAst.directive, directiveInstance, compileElement);
             bindDirectiveAfterViewLifecycleCallbacks(directiveAst.directive, directiveInstance, compileElement);
+            bindDirectiveWrapperLifecycleCallbacks(directiveAst, directiveWrapperInstance, compileElement);
         });
@@ -80,0 +77,0 @@ ast.providers.forEach(function (providerAst) {

src/view_compiler/view_builder.js

@@ -19,6 +19,6 @@ /**
 import { CompileElement, CompileNode } from './compile_element';
-import { CompileView } from './compile_view';
+import { CompileView, CompileViewRootNode, CompileViewRootNodeType } from './compile_view';
 import { ChangeDetectorStatusEnum, DetectChangesVars, InjectMethodVars, ViewConstructorVars, ViewEncapsulationEnum, ViewProperties, ViewTypeEnum } from './constants';
 import { ViewFactoryDependency } from './deps';
-import { createFlatArray, getViewFactoryName } from './util';
+import { getViewFactoryName } from './util';
 var IMPLICIT_TEMPLATE_VAR = '\$implicit';
@@ -32,3 +32,7 @@ var CLASS_ATTR = 'class';
     var builderVisitor = new ViewBuilderVisitor(view, targetDependencies);
-    templateVisitAll(builderVisitor, template, view.declarationElement.isNull() ? view.declarationElement : view.declarationElement.parent);
+    var parentEl = view.declarationElement.isNull() ? view.declarationElement : view.declarationElement.parent;
+    templateVisitAll(builderVisitor, template, parentEl);
+    if (view.viewType === ViewType.EMBEDDED || view.viewType === ViewType.HOST) {
+        view.lastRenderNode = builderVisitor.getOrCreateLastRenderNode();
+    }
     return builderVisitor.nestedViewCount;
@@ -60,7 +64,7 @@ }
             if (this.view.viewType !== ViewType.COMPONENT) {
-                this.view.rootNodesOrAppElements.push(vcAppEl || node.renderNode);
+                this.view.rootNodes.push(new CompileViewRootNode(vcAppEl ? CompileViewRootNodeType.ViewContainer : CompileViewRootNodeType.Node, vcAppEl || node.renderNode));
             }
         }
         else if (isPresent(parent.component) && isPresent(ngContentIndex)) {
-            parent.addContentNode(ngContentIndex, vcAppEl || node.renderNode);
+            parent.addContentNode(ngContentIndex, new CompileViewRootNode(vcAppEl ? CompileViewRootNodeType.ViewContainer : CompileViewRootNodeType.Node, vcAppEl || node.renderNode));
         }
@@ -86,2 +90,15 @@ };
     };
+    ViewBuilderVisitor.prototype.getOrCreateLastRenderNode = function () {
+        var view = this.view;
+        if (view.rootNodes.length === 0 ||
+            view.rootNodes[view.rootNodes.length - 1].type !== CompileViewRootNodeType.Node) {
+            var fieldName = "_el_" + view.nodes.length;
+            view.fields.push(new o.ClassField(fieldName, o.importType(view.genConfig.renderTypes.renderElement)));
+            view.createMethod.addStmt(o.THIS_EXPR.prop(fieldName)
+                .set(ViewProperties.renderer.callMethod('createTemplateAnchor', [o.NULL_EXPR, o.NULL_EXPR]))
+                .toStmt());
+            view.rootNodes.push(new CompileViewRootNode(CompileViewRootNodeType.Node, o.THIS_EXPR.prop(fieldName)));
+        }
+        return view.rootNodes[view.rootNodes.length - 1].expr;
+    };
     ViewBuilderVisitor.prototype.visitBoundText = function (ast, parent) {
@@ -114,3 +131,2 @@ return this._visitText(ast, '', parent);
         var parentRenderNode = this._getParentRenderNode(parent);
-        var nodesExpression = ViewProperties.projectableNodes.key(o.literal(ast.index), new o.ArrayType(o.importType(this.view.genConfig.renderTypes.renderNode)));
         if (parentRenderNode !== o.NULL_EXPR) {
@@ -120,4 +136,3 @@ this.view.createMethod.addStmt(ViewProperties.renderer
                 parentRenderNode,
-                o.importExpr(resolveIdentifier(Identifiers.flattenNestedViewRenderNodes))
-                    .callFn([nodesExpression])
+                o.THIS_EXPR.callMethod('projectedNodes', [o.literal(ast.index)])
             ])
@@ -129,3 +144,3 @@ .toStmt());
                 // store root nodes only for embedded/host views
-                this.view.rootNodesOrAppElements.push(nodesExpression);
+                this.view.rootNodes.push(new CompileViewRootNode(CompileViewRootNodeType.NgContent, null, ast.index));
             }
@@ -135,3 +150,3 @@ }
             if (isPresent(parent.component) && isPresent(ast.ngContentIndex)) {
-                parent.addContentNode(ast.ngContentIndex, nodesExpression);
+                parent.addContentNode(ast.ngContentIndex, new CompileViewRootNode(CompileViewRootNodeType.NgContent, null, ast.index));
             }
@@ -178,3 +193,5 @@ }
             this.targetDependencies.push(new ViewFactoryDependency(component.type, nestedComponentIdentifier));
-            compViewExpr = o.variable("compView_" + nodeIndex); // fix highlighting: `
+            compViewExpr = o.THIS_EXPR.prop("compView_" + nodeIndex); // fix highlighting: `
+            this.view.fields.push(new o.ClassField(compViewExpr.name, o.importType(resolveIdentifier(Identifiers.AppView), [o.importType(component.type)])));
+            this.view.viewChildren.push(compViewExpr);
             compileElement.setComponentView(compViewExpr);
@@ -185,3 +202,3 @@ this.view.createMethod.addStmt(compViewExpr
             ]))
-                .toDeclStmt());
+                .toStmt());
         }
@@ -193,12 +210,3 @@ compileElement.beforeChildren();
         if (isPresent(compViewExpr)) {
-            var codeGenContentNodes;
-            if (this.view.component.type.isHost) {
-                codeGenContentNodes = ViewProperties.projectableNodes;
-            }
-            else {
-                codeGenContentNodes = o.literalArr(compileElement.contentNodesByNgContentIndex.map(function (nodes) { return createFlatArray(nodes); }));
-            }
-            this.view.createMethod.addStmt(compViewExpr
-                .callMethod('create', [compileElement.getComponent(), codeGenContentNodes, o.NULL_EXPR])
-                .toStmt());
+            this.view.createMethod.addStmt(compViewExpr.callMethod('create', [compileElement.getComponent(), o.NULL_EXPR]).toStmt());
         }
@@ -366,4 +374,5 @@ return null;
         new o.ClassMethod('dirtyParentQueriesInternal', [], view.dirtyParentQueriesMethod.finish()),
-        new o.ClassMethod('destroyInternal', [], view.destroyMethod.finish()),
-        new o.ClassMethod('detachInternal', [], view.detachMethod.finish())
+        new o.ClassMethod('destroyInternal', [], generateDestroyMethod(view)),
+        new o.ClassMethod('detachInternal', [], view.detachMethod.finish()),
+        generateVisitRootNodesMethod(view), generateVisitProjectableNodesMethod(view)
     ].filter(function (method) { return method.body.length > 0; });
@@ -380,2 +389,9 @@ var superClass = view.genConfig.genDebugInfo ? Identifiers.DebugAppView : Identifiers.AppView;
 }
+function generateDestroyMethod(view) {
+    var stmts = [];
+    view.viewContainerAppElements.forEach(function (appElement) { stmts.push(appElement.callMethod('destroyNestedViews', []).toStmt()); });
+    view.viewChildren.forEach(function (viewChild) { stmts.push(viewChild.callMethod('destroy', []).toStmt()); });
+    stmts.push.apply(stmts, view.destroyMethod.finish());
+    return stmts;
+}
 function createViewFactory(view, viewClass, renderCompTypeVar) {
@@ -438,5 +454,5 @@ var viewFactoryArgs = [
             .callMethod('init', [
-            createFlatArray(view.rootNodesOrAppElements),
-            o.literalArr(view.nodes.map(function (node) { return node.renderNode; })), o.literalArr(view.disposables),
-            o.literalArr(view.subscriptions)
+            view.lastRenderNode,
+            o.literalArr(view.nodes.map(function (node) { return node.renderNode; })),
+            view.disposables.length ? o.literalArr(view.disposables) : o.NULL_EXPR,
         ])
@@ -458,4 +474,6 @@ .toStmt(),
     stmts.push.apply(stmts, view.detectChangesInInputsMethod.finish());
-    stmts.push(o.THIS_EXPR.callMethod('detectContentChildrenChanges', [DetectChangesVars.throwOnChange])
-        .toStmt());
+    view.viewContainerAppElements.forEach(function (appElement) {
+        stmts.push(appElement.callMethod('detectChangesInNestedViews', [DetectChangesVars.throwOnChange])
+            .toStmt());
+    });
     var afterContentStmts = view.updateContentQueriesMethod.finish().concat(view.afterContentLifecycleCallbacksMethod.finish());
@@ -466,4 +484,5 @@ if (afterContentStmts.length > 0) {
     stmts.push.apply(stmts, view.detectChangesRenderPropertiesMethod.finish());
-    stmts.push(o.THIS_EXPR.callMethod('detectViewChildrenChanges', [DetectChangesVars.throwOnChange])
-        .toStmt());
+    view.viewChildren.forEach(function (viewChild) {
+        stmts.push(viewChild.callMethod('detectChanges', [DetectChangesVars.throwOnChange]).toStmt());
+    });
     var afterViewStmts = view.updateViewQueriesMethod.finish().concat(view.afterViewLifecycleCallbacksMethod.finish());
@@ -511,2 +530,47 @@ if (afterViewStmts.length > 0) {
 }
+function generateVisitRootNodesMethod(view) {
+    var cbVar = o.variable('cb');
+    var ctxVar = o.variable('ctx');
+    var stmts = generateVisitNodesStmts(view.rootNodes, cbVar, ctxVar);
+    return new o.ClassMethod('visitRootNodesInternal', [new o.FnParam(cbVar.name, o.DYNAMIC_TYPE), new o.FnParam(ctxVar.name, o.DYNAMIC_TYPE)], stmts);
+}
+function generateVisitProjectableNodesMethod(view) {
+    var nodeIndexVar = o.variable('nodeIndex');
+    var ngContentIndexVar = o.variable('ngContentIndex');
+    var cbVar = o.variable('cb');
+    var ctxVar = o.variable('ctx');
+    var stmts = [];
+    view.nodes.forEach(function (node) {
+        if (node instanceof CompileElement && node.component) {
+            node.contentNodesByNgContentIndex.forEach(function (projectedNodes, ngContentIndex) {
+                stmts.push(new o.IfStmt(nodeIndexVar.equals(o.literal(node.nodeIndex))
+                    .and(ngContentIndexVar.equals(o.literal(ngContentIndex))), generateVisitNodesStmts(projectedNodes, cbVar, ctxVar)));
+            });
+        }
+    });
+    return new o.ClassMethod('visitProjectableNodesInternal', [
+        new o.FnParam(nodeIndexVar.name, o.NUMBER_TYPE),
+        new o.FnParam(ngContentIndexVar.name, o.NUMBER_TYPE),
+        new o.FnParam(cbVar.name, o.DYNAMIC_TYPE), new o.FnParam(ctxVar.name, o.DYNAMIC_TYPE)
+    ], stmts);
+}
+function generateVisitNodesStmts(nodes, cb, ctx) {
+    var stmts = [];
+    nodes.forEach(function (node) {
+        switch (node.type) {
+            case CompileViewRootNodeType.Node:
+                stmts.push(cb.callFn([node.expr, ctx]).toStmt());
+                break;
+            case CompileViewRootNodeType.ViewContainer:
+                stmts.push(cb.callFn([node.expr.prop('nativeElement'), ctx]).toStmt());
+                stmts.push(node.expr.callMethod('visitNestedViewRootNodes', [cb, ctx]).toStmt());
+                break;
+            case CompileViewRootNodeType.NgContent:
+                stmts.push(o.THIS_EXPR.callMethod('visitProjectedNodes', [o.literal(node.ngContentIndex), cb, ctx])
+                    .toStmt());
+                break;
+        }
+    });
+    return stmts;
+}
 //# sourceMappingURL=view_builder.js.map

No alert changes

Improved metrics

Total package byte prevSize

4071301

increased by0.92%

Number of package files

366

increased by0.27%

Lines of code

44703

increased by0.44%

No dependency changes