refactor(core): view engine - move handleEvent function from view to element

Some versions of TypeScript are super slow to compile functions that
contain a lot of `if` conditions in them. Splitting the handle event
expressions per element is similar to what we did in the old codegen.
This commit is contained in:
Tobias Bosch 2017-02-20 12:15:03 -08:00 committed by Igor Minar
parent 58ba4f0409
commit 32012a1ffb
16 changed files with 187 additions and 183 deletions

View File

@ -82,13 +82,6 @@ interface UpdateExpression {
expressions: {context: o.Expression, value: AST}[];
}
interface HandleEventExpression {
nodeIndex: number;
context: o.Expression;
eventName: string;
expression: AST;
}
const VIEW_VAR = o.variable('view');
const CHECK_VAR = o.variable('check');
const COMP_VAR = o.variable('comp');
@ -97,20 +90,25 @@ const EVENT_NAME_VAR = o.variable('eventName');
const ALLOW_DEFAULT_VAR = o.variable(`allowDefault`);
class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverterFactory {
private nodeDefs: o.Expression[] = [];
private compType: o.Type;
private nodeDefs: (() => o.Expression)[] = [];
private purePipeNodeIndices: {[pipeName: string]: number} = {};
private refNodeIndices: {[refName: string]: number} = {};
private variables: VariableAst[] = [];
private children: ViewBuilder[] = [];
private updateDirectivesExpressions: UpdateExpression[] = [];
private updateRendererExpressions: UpdateExpression[] = [];
private handleEventExpressions: HandleEventExpression[] = [];
constructor(
private parent: ViewBuilder, private component: CompileDirectiveMetadata,
private embeddedViewIndex: number, private usedPipes: CompilePipeSummary[],
private staticQueryIds: Map<TemplateAst, StaticAndDynamicQueryIds>,
private viewBuilderFactory: ViewBuilderFactory) {}
private viewBuilderFactory: ViewBuilderFactory) {
// TODO(tbosch): The old view compiler used to use an `any` type
// for the context in any embedded view. We keep this behaivor for now
// to be able to introduce the new view compiler without too many errors.
this.compType = this.embeddedViewIndex > 0 ? o.DYNAMIC_TYPE : o.importType(this.component.type);
}
get viewName(): string {
return viewClassName(this.component.type.reference, this.embeddedViewIndex);
@ -140,7 +138,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
} else {
flags |= viewEngine.NodeFlags.HasDynamicQuery;
}
this.nodeDefs.push(o.importExpr(createIdentifier(Identifiers.queryDef)).callFn([
this.nodeDefs.push(() => o.importExpr(createIdentifier(Identifiers.queryDef)).callFn([
o.literal(flags), o.literal(queryId),
new o.LiteralMapExpr([new o.LiteralMapEntry(query.propertyName, o.literal(bindingType))])
]));
@ -151,59 +149,18 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
(this.parent && needsAdditionalRootNode(astNodes[astNodes.length - 1]))) {
// if the view is empty, or an embedded view has a view container as last root nde,
// create an additional root node.
this.nodeDefs.push(o.importExpr(createIdentifier(Identifiers.anchorDef)).callFn([
this.nodeDefs.push(() => o.importExpr(createIdentifier(Identifiers.anchorDef)).callFn([
o.literal(viewEngine.NodeFlags.None), o.NULL_EXPR, o.NULL_EXPR, o.literal(0)
]));
}
}
build(targetStatements: o.Statement[] = []): o.Statement[] {
// TODO(tbosch): The old view compiler used to use an `any` type
// for the context in any embedded view. We keep this behaivor for now
// to be able to introduce the new view compiler without too many errors.
const compType =
this.embeddedViewIndex > 0 ? o.DYNAMIC_TYPE : o.importType(this.component.type);
this.children.forEach((child) => child.build(targetStatements));
const updateDirectivesFn = this._createUpdateFn(this.updateDirectivesExpressions, compType);
const updateRendererFn = this._createUpdateFn(this.updateRendererExpressions, compType);
const updateDirectivesFn = this._createUpdateFn(this.updateDirectivesExpressions);
const updateRendererFn = this._createUpdateFn(this.updateRendererExpressions);
const handleEventStmts: o.Statement[] = [];
let handleEventBindingCount = 0;
this.handleEventExpressions.forEach(({expression, context, nodeIndex, eventName}) => {
const bindingId = `${handleEventBindingCount++}`;
const nameResolver = context === COMP_VAR ? this : null;
const {stmts, allowDefault} =
convertActionBinding(nameResolver, context, expression, bindingId);
const trueStmts = stmts;
if (allowDefault) {
trueStmts.push(ALLOW_DEFAULT_VAR.set(allowDefault.and(ALLOW_DEFAULT_VAR)).toStmt());
}
handleEventStmts.push(new o.IfStmt(
o.literal(nodeIndex)
.identical(NODE_INDEX_VAR)
.and(o.literal(eventName).identical(EVENT_NAME_VAR)),
trueStmts));
});
let handleEventFn: o.Expression;
if (handleEventStmts.length > 0) {
const preStmts: o.Statement[] =
[ALLOW_DEFAULT_VAR.set(o.literal(true)).toDeclStmt(o.BOOL_TYPE)];
if (!this.component.isHost) {
preStmts.push(COMP_VAR.set(VIEW_VAR.prop('component')).toDeclStmt(compType));
}
handleEventFn = o.fn(
[
new o.FnParam(VIEW_VAR.name, o.INFERRED_TYPE),
new o.FnParam(NODE_INDEX_VAR.name, o.INFERRED_TYPE),
new o.FnParam(EVENT_NAME_VAR.name, o.INFERRED_TYPE),
new o.FnParam(EventHandlerVars.event.name, o.INFERRED_TYPE)
],
[...preStmts, ...handleEventStmts, new o.ReturnStatement(ALLOW_DEFAULT_VAR)],
o.INFERRED_TYPE);
} else {
handleEventFn = o.NULL_EXPR;
}
let viewFlags = viewEngine.ViewFlags.None;
if (!this.parent && this.component.changeDetection === ChangeDetectionStrategy.OnPush) {
@ -212,8 +169,10 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
const viewFactory = new o.DeclareFunctionStmt(
this.viewName, [],
[new o.ReturnStatement(o.importExpr(createIdentifier(Identifiers.viewDef)).callFn([
o.literal(viewFlags), o.literalArr(this.nodeDefs), updateDirectivesFn, updateRendererFn,
handleEventFn
o.literal(viewFlags),
o.literalArr(this.nodeDefs.map(nd => nd())),
updateDirectivesFn,
updateRendererFn,
]))],
o.importType(createIdentifier(Identifiers.ViewDefinition)));
@ -221,7 +180,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
return targetStatements;
}
private _createUpdateFn(expressions: UpdateExpression[], compType: o.Type): o.Expression {
private _createUpdateFn(expressions: UpdateExpression[]): o.Expression {
const updateStmts: o.Statement[] = [];
let updateBindingCount = 0;
expressions.forEach(({expressions, nodeIndex}) => {
@ -239,7 +198,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
if (updateStmts.length > 0) {
const preStmts: o.Statement[] = [];
if (!this.component.isHost) {
preStmts.push(COMP_VAR.set(VIEW_VAR.prop('component')).toDeclStmt(compType));
preStmts.push(COMP_VAR.set(VIEW_VAR.prop('component')).toDeclStmt(this.compType));
}
updateFn = o.fn(
[
@ -255,14 +214,14 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
visitNgContent(ast: NgContentAst, context: any): any {
// ngContentDef(ngContentIndex: number, index: number): NodeDef;
this.nodeDefs.push(o.importExpr(createIdentifier(Identifiers.ngContentDef)).callFn([
this.nodeDefs.push(() => o.importExpr(createIdentifier(Identifiers.ngContentDef)).callFn([
o.literal(ast.ngContentIndex), o.literal(ast.index)
]));
}
visitText(ast: TextAst, context: any): any {
// textDef(ngContentIndex: number, constants: string[]): NodeDef;
this.nodeDefs.push(o.importExpr(createIdentifier(Identifiers.textDef)).callFn([
this.nodeDefs.push(() => o.importExpr(createIdentifier(Identifiers.textDef)).callFn([
o.literal(ast.ngContentIndex), o.literalArr([o.literal(ast.value)])
]));
}
@ -280,7 +239,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
this.updateRendererExpressions);
// textDef(ngContentIndex: number, constants: string[]): NodeDef;
this.nodeDefs[nodeIndex] = o.importExpr(createIdentifier(Identifiers.textDef)).callFn([
this.nodeDefs[nodeIndex] = () => o.importExpr(createIdentifier(Identifiers.textDef)).callFn([
o.literal(ast.ngContentIndex), o.literalArr(inter.strings.map(s => o.literal(s)))
]);
}
@ -290,7 +249,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
// reserve the space in the nodeDefs array
this.nodeDefs.push(null);
const {flags, queryMatchesExpr} = this._visitElementOrTemplate(nodeIndex, ast);
const {flags, queryMatchesExpr, hostEvents} = this._visitElementOrTemplate(nodeIndex, ast);
const childVisitor = this.viewBuilderFactory(this);
this.children.push(childVisitor);
@ -300,11 +259,17 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
// anchorDef(
// flags: NodeFlags, matchedQueries: [string, QueryValueType][], ngContentIndex: number,
// childCount: number, templateFactory?: ViewDefinitionFactory): NodeDef;
this.nodeDefs[nodeIndex] = o.importExpr(createIdentifier(Identifiers.anchorDef)).callFn([
o.literal(flags), queryMatchesExpr, o.literal(ast.ngContentIndex), o.literal(childCount),
o.variable(childVisitor.viewName)
// childCount: number, handleEventFn?: ElementHandleEventFn, templateFactory?:
// ViewDefinitionFactory): NodeDef;
const nodeDef = () => o.importExpr(createIdentifier(Identifiers.anchorDef)).callFn([
o.literal(flags),
queryMatchesExpr,
o.literal(ast.ngContentIndex),
o.literal(childCount),
this._createElementHandleEventFn(nodeIndex, hostEvents),
o.variable(childVisitor.viewName),
]);
this.nodeDefs[nodeIndex] = nodeDef;
}
visitElement(ast: ElementAst, context: any): any {
@ -318,7 +283,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
elName = null;
}
let {flags, usedEvents, queryMatchesExpr, hostBindings} =
let {flags, usedEvents, queryMatchesExpr, hostBindings, hostEvents} =
this._visitElementOrTemplate(nodeIndex, ast);
let inputDefs: o.Expression[] = [];
@ -349,13 +314,16 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
// ([BindingType.ElementClass, string] | [BindingType.ElementStyle, string, string] |
// [BindingType.ElementAttribute | BindingType.ElementProperty, string,
// SecurityContext])[],
// outputs?: (string | [string, string])[]): NodeDef;
this.nodeDefs[nodeIndex] = o.importExpr(createIdentifier(Identifiers.elementDef)).callFn([
// outputs?: (string | [string, string])[], eventHandlerFn: ElementHandleEventFn): NodeDef;
const nodeDef = () => o.importExpr(createIdentifier(Identifiers.elementDef)).callFn([
o.literal(flags), queryMatchesExpr, o.literal(ast.ngContentIndex), o.literal(childCount),
o.literal(elName), elName ? fixedAttrsDef(ast) : o.NULL_EXPR,
inputDefs.length ? o.literalArr(inputDefs) : o.NULL_EXPR,
outputDefs.length ? o.literalArr(outputDefs) : o.NULL_EXPR
outputDefs.length ? o.literalArr(outputDefs) : o.NULL_EXPR,
this._createElementHandleEventFn(nodeIndex, hostEvents)
]);
this.nodeDefs[nodeIndex] = nodeDef;
}
private _visitElementOrTemplate(nodeIndex: number, ast: {
@ -370,6 +338,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
usedEvents: [string, string][],
queryMatchesExpr: o.Expression,
hostBindings: {value: AST, context: o.Expression}[],
hostEvents: {context: o.Expression, eventAst: BoundEventAst}[],
} {
let flags = viewEngine.NodeFlags.None;
if (ast.hasViewContainer) {
@ -441,18 +410,13 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
});
ast.outputs.forEach(
(outputAst) => { hostEvents.push({context: COMP_VAR, eventAst: outputAst}); });
hostEvents.forEach((hostEvent) => {
this._addHandleEventExpression(
nodeIndex, hostEvent.context,
viewEngine.elementEventFullName(hostEvent.eventAst.target, hostEvent.eventAst.name),
hostEvent.eventAst.handler);
});
return {
flags,
usedEvents: Array.from(usedEvents.values()),
queryMatchesExpr: queryMatchExprs.length ? o.literalArr(queryMatchExprs) : o.NULL_EXPR,
hostBindings,
hostEvents
};
}
@ -477,7 +441,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
}
const bindingType =
query.first ? viewEngine.QueryBindingType.First : viewEngine.QueryBindingType.All;
this.nodeDefs.push(o.importExpr(createIdentifier(Identifiers.queryDef)).callFn([
this.nodeDefs.push(() => o.importExpr(createIdentifier(Identifiers.queryDef)).callFn([
o.literal(flags), o.literal(queryId),
new o.LiteralMapExpr([new o.LiteralMapEntry(query.propertyName, o.literal(bindingType))])
]));
@ -548,7 +512,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
// any,
// deps: ([DepFlags, any] | any)[], props?: {[name: string]: [number, string]},
// outputs?: {[name: string]: string}, component?: () => ViewDefinition): NodeDef;
const nodeDef = o.importExpr(createIdentifier(Identifiers.directiveDef)).callFn([
const nodeDef = () => o.importExpr(createIdentifier(Identifiers.directiveDef)).callFn([
o.literal(flags), queryMatchExprs.length ? o.literalArr(queryMatchExprs) : o.NULL_EXPR,
o.literal(childCount), providerExpr, depsExpr,
inputDefs.length ? new o.LiteralMapExpr(inputDefs) : o.NULL_EXPR,
@ -571,7 +535,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
// flags: NodeFlags, matchedQueries: [string, QueryValueType][], type: ProviderType, token:
// any,
// value: any, deps: ([DepFlags, any] | any)[]): NodeDef;
const nodeDef = o.importExpr(createIdentifier(Identifiers.providerDef)).callFn([
const nodeDef = () => o.importExpr(createIdentifier(Identifiers.providerDef)).callFn([
o.literal(flags), queryMatchExprs.length ? o.literalArr(queryMatchExprs) : o.NULL_EXPR,
o.literal(providerType), tokenExpr(providerAst.token), providerExpr, depsExpr
]);
@ -645,7 +609,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
const nodeIndex = this.nodeDefs.length;
// pureArrayDef(argCount: number): NodeDef;
const nodeDef =
const nodeDef = () =>
o.importExpr(createIdentifier(Identifiers.pureArrayDef)).callFn([o.literal(argCount)]);
this.nodeDefs.push(nodeDef);
@ -659,8 +623,9 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
const nodeIndex = this.nodeDefs.length;
// function pureObjectDef(propertyNames: string[]): NodeDef
const nodeDef = o.importExpr(createIdentifier(Identifiers.pureObjectDef)).callFn([o.literalArr(
keys.map(key => o.literal(key)))]);
const nodeDef = () =>
o.importExpr(createIdentifier(Identifiers.pureObjectDef)).callFn([o.literalArr(
keys.map(key => o.literal(key)))]);
this.nodeDefs.push(nodeDef);
return (args: o.Expression[]) => callCheckStmt(nodeIndex, args);
@ -670,7 +635,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
if (pipe.pure) {
const nodeIndex = this.nodeDefs.length;
// function purePipeDef(argCount: number): NodeDef;
const nodeDef =
const nodeDef = () =>
o.importExpr(createIdentifier(Identifiers.purePipeDef)).callFn([o.literal(argCount)]);
this.nodeDefs.push(nodeDef);
@ -716,7 +681,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
const depExprs = pipe.type.diDeps.map(depDef);
// function pipeDef(
// flags: NodeFlags, ctor: any, deps: ([DepFlags, any] | any)[]): NodeDef
const nodeDef = o.importExpr(createIdentifier(Identifiers.pipeDef)).callFn([
const nodeDef = () => o.importExpr(createIdentifier(Identifiers.pipeDef)).callFn([
o.literal(flags), o.importExpr(pipe.type), o.literalArr(depExprs)
]);
this.nodeDefs.push(nodeDef);
@ -736,12 +701,44 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver, BuiltinConverter
target.push({nodeIndex, expressions: transformedExpressions});
}
private _addHandleEventExpression(
nodeIndex: number, context: o.Expression, eventName: string, expression: AST) {
if (expression instanceof ASTWithSource) {
expression = expression.ast;
private _createElementHandleEventFn(
nodeIndex: number, handlers: {context: o.Expression, eventAst: BoundEventAst}[]) {
const handleEventStmts: o.Statement[] = [];
let handleEventBindingCount = 0;
handlers.forEach(({context, eventAst}) => {
const bindingId = `${handleEventBindingCount++}`;
const nameResolver = context === COMP_VAR ? this : null;
const expression =
eventAst.handler instanceof ASTWithSource ? eventAst.handler.ast : eventAst.handler;
const {stmts, allowDefault} =
convertActionBinding(nameResolver, context, expression, bindingId);
const trueStmts = stmts;
if (allowDefault) {
trueStmts.push(ALLOW_DEFAULT_VAR.set(allowDefault.and(ALLOW_DEFAULT_VAR)).toStmt());
}
const fullEventName = viewEngine.elementEventFullName(eventAst.target, eventAst.name);
handleEventStmts.push(
new o.IfStmt(o.literal(fullEventName).identical(EVENT_NAME_VAR), trueStmts));
});
let handleEventFn: o.Expression;
if (handleEventStmts.length > 0) {
const preStmts: o.Statement[] =
[ALLOW_DEFAULT_VAR.set(o.literal(true)).toDeclStmt(o.BOOL_TYPE)];
if (!this.component.isHost) {
preStmts.push(COMP_VAR.set(VIEW_VAR.prop('component')).toDeclStmt(this.compType));
}
handleEventFn = o.fn(
[
new o.FnParam(VIEW_VAR.name, o.INFERRED_TYPE),
new o.FnParam(EVENT_NAME_VAR.name, o.INFERRED_TYPE),
new o.FnParam(EventHandlerVars.event.name, o.INFERRED_TYPE)
],
[...preStmts, ...handleEventStmts, new o.ReturnStatement(ALLOW_DEFAULT_VAR)],
o.INFERRED_TYPE);
} else {
handleEventFn = o.NULL_EXPR;
}
this.handleEventExpressions.push({nodeIndex, context, eventName, expression});
return handleEventFn;
}
visitDirective(ast: DirectiveAst, context: {usedEvents: Set<string>}): any {}

View File

@ -9,12 +9,18 @@
import {isDevMode} from '../application_ref';
import {SecurityContext} from '../security';
import {BindingDef, BindingType, DebugContext, DisposableFn, ElementData, ElementOutputDef, NodeData, NodeDef, NodeFlags, NodeType, QueryValueType, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, asElementData} from './types';
import {BindingDef, BindingType, DebugContext, DisposableFn, ElementData, ElementHandleEventFn, ElementOutputDef, NodeData, NodeDef, NodeFlags, NodeType, QueryValueType, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, asElementData} from './types';
import {checkAndUpdateBinding, dispatchEvent, elementEventFullName, filterQueryId, getParentRenderElement, resolveViewDefinition, sliceErrorStack, splitMatchedQueriesDsl, splitNamespace} from './util';
const NOOP: any = () => {};
export function anchorDef(
flags: NodeFlags, matchedQueriesDsl: [string | number, QueryValueType][],
ngContentIndex: number, childCount: number, templateFactory?: ViewDefinitionFactory): NodeDef {
ngContentIndex: number, childCount: number, handleEvent?: ElementHandleEventFn,
templateFactory?: ViewDefinitionFactory): NodeDef {
if (!handleEvent) {
handleEvent = NOOP;
}
const {matchedQueries, references, matchedQueryIds} = splitMatchedQueriesDsl(matchedQueriesDsl);
// skip the call to sliceErrorStack itself + the call to this function.
const source = isDevMode() ? sliceErrorStack(2, 3) : '';
@ -43,7 +49,7 @@ export function anchorDef(
// will bet set by the view definition
component: undefined,
publicProviders: undefined,
allProviders: undefined,
allProviders: undefined, handleEvent
},
provider: undefined,
text: undefined,
@ -60,7 +66,10 @@ export function elementDef(
bindings?:
([BindingType.ElementClass, string] | [BindingType.ElementStyle, string, string] |
[BindingType.ElementAttribute | BindingType.ElementProperty, string, SecurityContext])[],
outputs?: (string | [string, string])[]): NodeDef {
outputs?: (string | [string, string])[], handleEvent?: ElementHandleEventFn): NodeDef {
if (!handleEvent) {
handleEvent = NOOP;
}
// skip the call to sliceErrorStack itself + the call to this function.
const source = isDevMode() ? sliceErrorStack(2, 3) : '';
const {matchedQueries, references, matchedQueryIds} = splitMatchedQueriesDsl(matchedQueriesDsl);
@ -131,7 +140,7 @@ export function elementDef(
// will bet set by the view definition
component: undefined,
publicProviders: undefined,
allProviders: undefined,
allProviders: undefined, handleEvent,
},
provider: undefined,
text: undefined,

View File

@ -205,6 +205,7 @@ export interface ElementDef {
*/
allProviders: {[tokenKey: string]: NodeDef};
source: string;
handleEvent: ElementHandleEventFn;
}
export interface ElementOutputDef {
@ -212,6 +213,8 @@ export interface ElementOutputDef {
eventName: string;
}
export type ElementHandleEventFn = (view: ViewData, eventName: string, event: any) => boolean;
export interface ProviderDef {
type: ProviderType;
token: any;

View File

@ -23,7 +23,7 @@ const NOOP = (): any => undefined;
export function viewDef(
flags: ViewFlags, nodes: NodeDef[], updateDirectives?: ViewUpdateFn,
updateRenderer?: ViewUpdateFn, handleEvent?: ViewHandleEventFn): ViewDefinition {
updateRenderer?: ViewUpdateFn): ViewDefinition {
// clone nodes and set auto calculated values
if (nodes.length === 0) {
throw new Error(`Illegal State: Views without nodes are not allowed!`);
@ -131,6 +131,8 @@ export function viewDef(
}
currentParent = newParent;
}
const handleEvent: ViewHandleEventFn = (view, nodeIndex, eventName, event) =>
nodes[nodeIndex].element.handleEvent(view, eventName, event);
return {
nodeFlags: viewNodeFlags,
nodeMatchedQueries: viewMatchedQueries, flags,
@ -143,6 +145,8 @@ export function viewDef(
};
}
function calculateReverseChildIndex(
currentParent: NodeDef, i: number, childCount: number, nodeCount: number) {
// Notes about reverse child order:

View File

@ -15,9 +15,9 @@ import {createRootView, isBrowser} from './helper';
export function main() {
describe(`View Anchor`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn): ViewDefinition {
return viewDef(ViewFlags.None, nodes, updateDirectives, updateRenderer, handleEvent);
nodes: NodeDef[], updateDirectives?: ViewUpdateFn,
updateRenderer?: ViewUpdateFn): ViewDefinition {
return viewDef(ViewFlags.None, nodes, updateDirectives, updateRenderer);
}
function createAndGetRootNodes(

View File

@ -16,8 +16,8 @@ export function main() {
describe(`Component Views`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function createAndGetRootNodes(viewDef: ViewDefinition): {rootNodes: any[], view: ViewData} {
@ -191,7 +191,7 @@ export function main() {
[
elementDef(NodeFlags.None, null, null, 0, 'span', null, null, ['click']),
],
update, null, null, ViewFlags.OnPush)),
update, null, ViewFlags.OnPush)),
],
(check, view) => { check(view, 1, ArgumentType.Inline, compInputValue); }));

View File

@ -17,8 +17,8 @@ export function main() {
describe(`View Elements`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function createAndGetRootNodes(
@ -189,18 +189,16 @@ export function main() {
const handleEventSpy = jasmine.createSpy('handleEvent');
const removeListenerSpy =
spyOn(HTMLElement.prototype, 'removeEventListener').and.callThrough();
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef(
[elementDef(NodeFlags.None, null, null, 0, 'button', null, null, ['click'])], null,
null, handleEventSpy));
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
NodeFlags.None, null, null, 0, 'button', null, null, ['click'], handleEventSpy)]));
rootNodes[0].click();
expect(handleEventSpy).toHaveBeenCalled();
let handleEventArgs = handleEventSpy.calls.mostRecent().args;
expect(handleEventArgs[0]).toBe(view);
expect(handleEventArgs[1]).toBe(0);
expect(handleEventArgs[2]).toBe('click');
expect(handleEventArgs[3]).toBeTruthy();
expect(handleEventArgs[1]).toBe('click');
expect(handleEventArgs[2]).toBeTruthy();
Services.destroyView(view);
@ -211,11 +209,9 @@ export function main() {
const handleEventSpy = jasmine.createSpy('handleEvent');
const addListenerSpy = spyOn(window, 'addEventListener');
const removeListenerSpy = spyOn(window, 'removeEventListener');
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef(
[elementDef(
NodeFlags.None, null, null, 0, 'button', null, null,
[['window', 'windowClick']])],
null, null, handleEventSpy));
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
NodeFlags.None, null, null, 0, 'button', null, null, [['window', 'windowClick']],
handleEventSpy)]));
expect(addListenerSpy).toHaveBeenCalled();
expect(addListenerSpy.calls.mostRecent().args[0]).toBe('windowClick');
@ -224,9 +220,8 @@ export function main() {
expect(handleEventSpy).toHaveBeenCalled();
const handleEventArgs = handleEventSpy.calls.mostRecent().args;
expect(handleEventArgs[0]).toBe(view);
expect(handleEventArgs[1]).toBe(0);
expect(handleEventArgs[2]).toBe('window:windowClick');
expect(handleEventArgs[3]).toBeTruthy();
expect(handleEventArgs[1]).toBe('window:windowClick');
expect(handleEventArgs[2]).toBeTruthy();
Services.destroyView(view);
@ -237,11 +232,9 @@ export function main() {
const handleEventSpy = jasmine.createSpy('handleEvent');
const addListenerSpy = spyOn(document, 'addEventListener');
const removeListenerSpy = spyOn(document, 'removeEventListener');
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef(
[elementDef(
NodeFlags.None, null, null, 0, 'button', null, null,
[['document', 'documentClick']])],
null, null, handleEventSpy));
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
NodeFlags.None, null, null, 0, 'button', null, null, [['document', 'documentClick']],
handleEventSpy)]));
expect(addListenerSpy).toHaveBeenCalled();
expect(addListenerSpy.calls.mostRecent().args[0]).toBe('documentClick');
@ -250,9 +243,8 @@ export function main() {
expect(handleEventSpy).toHaveBeenCalled();
const handleEventArgs = handleEventSpy.calls.mostRecent().args;
expect(handleEventArgs[0]).toBe(view);
expect(handleEventArgs[1]).toBe(0);
expect(handleEventArgs[2]).toBe('document:documentClick');
expect(handleEventArgs[3]).toBeTruthy();
expect(handleEventArgs[1]).toBe('document:documentClick');
expect(handleEventArgs[2]).toBeTruthy();
Services.destroyView(view);
@ -263,12 +255,12 @@ export function main() {
let eventHandlerResult: any;
let preventDefaultSpy: jasmine.Spy;
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef(
[elementDef(NodeFlags.None, null, null, 0, 'button', null, null, ['click'])], null,
null, (view, index, eventName, event) => {
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
NodeFlags.None, null, null, 0, 'button', null, null, ['click'],
(view, eventName, event) => {
preventDefaultSpy = spyOn(event, 'preventDefault').and.callThrough();
return eventHandlerResult;
}));
})]));
eventHandlerResult = undefined;
rootNodes[0].click();
@ -290,8 +282,9 @@ export function main() {
it('should report debug info on event errors', () => {
const addListenerSpy = spyOn(HTMLElement.prototype, 'addEventListener').and.callThrough();
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef(
[elementDef(NodeFlags.None, null, null, 0, 'button', null, null, ['click'])], null,
null, () => { throw new Error('Test'); }));
[elementDef(NodeFlags.None, null, null, 0, 'button', null, null, ['click'], () => {
throw new Error('Test');
})]));
let err: any;
try {

View File

@ -17,8 +17,8 @@ export function main() {
describe(`Embedded Views`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function embeddedViewDef(nodes: NodeDef[], update?: ViewUpdateFn): ViewDefinitionFactory {
@ -40,7 +40,7 @@ export function main() {
compViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
anchorDef(
NodeFlags.HasEmbeddedViews, null, null, 0,
NodeFlags.HasEmbeddedViews, null, null, 0, null,
embeddedViewDef([elementDef(NodeFlags.None, null, null, 0, 'span')])),
]),
parentContext);
@ -54,10 +54,10 @@ export function main() {
it('should attach and detach embedded views', () => {
const {view: parentView, rootNodes} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 2, 'div'),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 0, 'span', [['name', 'child0']])
])),
anchorDef(NodeFlags.None, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.None, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 0, 'span', [['name', 'child1']])
]))
]));
@ -84,10 +84,10 @@ export function main() {
it('should move embedded views', () => {
const {view: parentView, rootNodes} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 2, 'div'),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 0, 'span', [['name', 'child0']])
])),
anchorDef(NodeFlags.None, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.None, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 0, 'span', [['name', 'child1']])
]))
]));
@ -111,7 +111,7 @@ export function main() {
it('should include embedded views in root nodes', () => {
const {view: parentView} = createAndGetRootNodes(compViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 0, 'span', [['name', 'child0']])
])),
elementDef(NodeFlags.None, null, null, 0, 'span', [['name', 'after']])
@ -136,7 +136,7 @@ export function main() {
const {view: parentView, rootNodes} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
anchorDef(
NodeFlags.HasEmbeddedViews, null, null, 0,
NodeFlags.HasEmbeddedViews, null, null, 0, null,
embeddedViewDef(
[elementDef(
NodeFlags.None, null, null, 0, 'span', null,
@ -172,7 +172,7 @@ export function main() {
const {view: parentView} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 1, 'span'),
directiveDef(NodeFlags.OnDestroy, null, 0, ChildProvider, [])
]))

View File

@ -16,8 +16,8 @@ export function main() {
describe(`View NgContent`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function embeddedViewDef(nodes: NodeDef[], update?: ViewUpdateFn): ViewDefinitionFactory {
@ -85,8 +85,8 @@ export function main() {
const {view, rootNodes} = createAndGetRootNodes(compViewDef(hostElDef(
[
anchorDef(
NodeFlags.HasEmbeddedViews, null, 0, 1, embeddedViewDef([textDef(null, ['a'])])),
anchorDef(NodeFlags.HasEmbeddedViews, null, 0, 1, null, embeddedViewDef([textDef(
null, ['a'])])),
directiveDef(
NodeFlags.None, null, 0, CreateViewService, [TemplateRef, ViewContainerRef])
],
@ -103,7 +103,7 @@ export function main() {
it('should include projected nodes when attaching / detaching embedded views', () => {
const {view, rootNodes} = createAndGetRootNodes(compViewDef(hostElDef([textDef(0, ['a'])], [
elementDef(NodeFlags.None, null, null, 1, 'div'),
anchorDef(NodeFlags.HasEmbeddedViews, null, 0, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, 0, 0, null, embeddedViewDef([
ngContentDef(null, 0),
// The anchor would be added by the compiler after the ngContent
anchorDef(NodeFlags.None, null, null, 0),

View File

@ -18,8 +18,8 @@ export function main() {
describe(`View Providers`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function embeddedViewDef(nodes: NodeDef[], update?: ViewUpdateFn): ViewDefinitionFactory {
@ -238,8 +238,8 @@ export function main() {
it('should inject TemplateRef', () => {
createAndGetRootNodes(compViewDef([
anchorDef(NodeFlags.None, null, null, 1, embeddedViewDef([anchorDef(
NodeFlags.None, null, null, 0)])),
anchorDef(NodeFlags.None, null, null, 1, null, embeddedViewDef([anchorDef(
NodeFlags.None, null, null, 0)])),
directiveDef(NodeFlags.None, null, 0, SomeService, [TemplateRef])
]));
@ -365,16 +365,14 @@ export function main() {
const handleEvent = jasmine.createSpy('handleEvent');
const subscribe = spyOn(emitter, 'subscribe').and.callThrough();
const {view, rootNodes} = createAndGetRootNodes(compViewDef(
[
elementDef(NodeFlags.None, null, null, 1, 'span'),
directiveDef(
NodeFlags.None, null, 0, SomeService, [], null, {emitter: 'someEventName'})
],
null, null, handleEvent));
const {view, rootNodes} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 1, 'span', null, null, null, handleEvent),
directiveDef(
NodeFlags.None, null, 0, SomeService, [], null, {emitter: 'someEventName'})
]));
emitter.emit('someEventInstance');
expect(handleEvent).toHaveBeenCalledWith(view, 0, 'someEventName', 'someEventInstance');
expect(handleEvent).toHaveBeenCalledWith(view, 'someEventName', 'someEventInstance');
Services.destroyView(view);
expect(unsubscribeSpy).toHaveBeenCalled();
@ -387,13 +385,13 @@ export function main() {
emitter = emitter;
}
const {view, rootNodes} = createAndGetRootNodes(compViewDef(
[
elementDef(NodeFlags.None, null, null, 1, 'span'),
directiveDef(
NodeFlags.None, null, 0, SomeService, [], null, {emitter: 'someEventName'})
],
null, null, () => { throw new Error('Test'); }));
const {view, rootNodes} = createAndGetRootNodes(compViewDef([
elementDef(
NodeFlags.None, null, null, 1, 'span', null, null, null,
() => { throw new Error('Test'); }),
directiveDef(
NodeFlags.None, null, 0, SomeService, [], null, {emitter: 'someEventName'})
]));
let err: any;
try {

View File

@ -16,8 +16,8 @@ export function main() {
describe(`View Pure Expressions`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function createAndGetRootNodes(viewDef: ViewDefinition): {rootNodes: any[], view: ViewData} {

View File

@ -18,8 +18,8 @@ export function main() {
describe(`Query Views`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function embeddedViewDef(nodes: NodeDef[], update?: ViewUpdateFn): ViewDefinitionFactory {
@ -145,7 +145,7 @@ export function main() {
const {view} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 5, 'div'),
...contentQueryProviders(),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 2, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 2, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
aServiceProvider(),
])),
@ -171,7 +171,7 @@ export function main() {
const {view} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 3, 'div'),
...contentQueryProviders(),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
aServiceProvider(),
])),
@ -200,7 +200,7 @@ export function main() {
const {view} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 3, 'div'),
...contentQueryProviders(),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
aServiceProvider(),
])),
@ -227,7 +227,7 @@ export function main() {
const {view} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
...viewQueryProviders([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
aServiceProvider(),
])),
@ -328,7 +328,7 @@ export function main() {
const {view} = createAndGetRootNodes(compViewDef([
anchorDef(
NodeFlags.None, [[someQueryId, QueryValueType.TemplateRef]], null, 2,
NodeFlags.None, [[someQueryId, QueryValueType.TemplateRef]], null, 2, null,
embeddedViewDef([anchorDef(NodeFlags.None, null, null, 0)])),
directiveDef(NodeFlags.None, null, 1, QueryService, []),
queryDef(
@ -367,7 +367,7 @@ export function main() {
const {view} = createAndGetRootNodes(compViewDef([
elementDef(NodeFlags.None, null, null, 3, 'div'),
...contentQueryProviders(),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, embeddedViewDef([
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 0, null, embeddedViewDef([
elementDef(NodeFlags.None, null, null, 1, 'div'),
aServiceProvider(),
])),

View File

@ -17,8 +17,8 @@ export function main() {
describe('View Services', () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function createAndGetRootNodes(

View File

@ -17,8 +17,8 @@ export function main() {
describe(`View Text`, () => {
function compViewDef(
nodes: NodeDef[], updateDirectives?: ViewUpdateFn, updateRenderer?: ViewUpdateFn,
handleEvent?: ViewHandleEventFn, viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer, handleEvent);
viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
return viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
}
function createAndGetRootNodes(

View File

@ -232,7 +232,7 @@ export function main() {
const vd = viewDef(ViewFlags.None, [
elementDef(NodeFlags.None, null, null, 1, 'span'),
anchorDef(
NodeFlags.None, null, null, 0,
NodeFlags.None, null, null, 0, null,
() => viewDef(
ViewFlags.None,
[

View File

@ -67,10 +67,10 @@ function TreeComponent_0(): ViewDefinition {
NodeFlags.None, null, null, 1, 'span', null,
[[BindingType.ElementStyle, 'backgroundColor', null]]),
textDef(null, [' ', ' ']),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 1, TreeComponent_1),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 1, null, TreeComponent_1),
directiveDef(
NodeFlags.None, null, 0, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 1, TreeComponent_2),
anchorDef(NodeFlags.HasEmbeddedViews, null, null, 1, null, TreeComponent_2),
directiveDef(
NodeFlags.None, null, 0, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
],