iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ivy): render flags support in host bindings function (FW-649) (#27204) 

PR Close #27204
This commit is contained in:
Andrew Kushnir 2018-11-20 15:20:19 -08:00 committed by Misko Hevery
parent bf71b107b3
commit dc300c5c41
21 changed files with 334 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts
View File

@ -145,8 +145,10 @@ describe('compiler compliance: bindings', () => {
type: HostBindingDir, type: HostBindingDir,
selectors: [["", "hostBindingDir", ""]], selectors: [["", "hostBindingDir", ""]],
factory: function HostBindingDir_Factory(t) { return new (t || HostBindingDir)(); }, factory: function HostBindingDir_Factory(t) { return new (t || HostBindingDir)(); },
hostBindings: function HostBindingDir_HostBindings(dirIndex, elIndex) { hostBindings: function HostBindingDir_HostBindings(rf, ctx, elIndex) {
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind($r3$.ɵload(dirIndex).dirId)); if (rf & 2) {
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind(ctx.dirId));
}
}, },
hostVars: 1 hostVars: 1
}); });
@ -188,8 +190,10 @@ describe('compiler compliance: bindings', () => {
type: HostBindingComp, type: HostBindingComp,
selectors: [["host-binding-comp"]], selectors: [["host-binding-comp"]],
factory: function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); }, factory: function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); },
hostBindings: function HostBindingComp_HostBindings(dirIndex, elIndex) { hostBindings: function HostBindingComp_HostBindings(rf, ctx, elIndex) {
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind($r3$.ɵpureFunction1(1, $ff$, $r3$.ɵload(dirIndex).id))); if (rf & 2) {
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind($r3$.ɵpureFunction1(1, $ff$, ctx.id)));
}
}, },
hostVars: 3, hostVars: 3,
consts: 0, consts: 0,
@ -232,8 +236,10 @@ describe('compiler compliance: bindings', () => {
type: HostAttributeDir, type: HostAttributeDir,
selectors: [["", "hostAttributeDir", ""]], selectors: [["", "hostAttributeDir", ""]],
factory: function HostAttributeDir_Factory(t) { return new (t || HostAttributeDir)(); }, factory: function HostAttributeDir_Factory(t) { return new (t || HostAttributeDir)(); },
hostBindings: function HostAttributeDir_HostBindings(dirIndex, elIndex) { hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
$r3$.ɵelementAttribute(elIndex, "required", $r3$.ɵbind($r3$.ɵload(dirIndex).required)); if (rf & 2) {
$r3$.ɵelementAttribute(elIndex, "required", $r3$.ɵbind(ctx.required));
}
}, },
hostVars: 1 hostVars: 1
}); });

64
packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
View File

@ -771,12 +771,16 @@ describe('compiler compliance: styling', () => {
const _c0 = ["foo", "baz", ${InitialStylingFlags.VALUES_MODE}, "foo", true, "baz", true]; const _c0 = ["foo", "baz", ${InitialStylingFlags.VALUES_MODE}, "foo", true, "baz", true];
const _c1 = ["width", "height", "color", ${InitialStylingFlags.VALUES_MODE}, "width", "200px", "height", "500px"]; const _c1 = ["width", "height", "color", ${InitialStylingFlags.VALUES_MODE}, "width", "200px", "height", "500px"];
… …
hostBindings: function MyComponent_HostBindings(dirIndex, elIndex) { hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
$r3$.ɵelementStyling(_c0, _c1, $r3$.ɵdefaultStyleSanitizer, dirIndex); if (rf & 1) {
$r3$.ɵelementStylingMap(elIndex, $r3$.ɵload(dirIndex).myClass, $r3$.ɵload(dirIndex).myStyle, dirIndex); $r3$.ɵelementStyling(_c0, _c1, $r3$.ɵdefaultStyleSanitizer, ctx);
$r3$.ɵelementStyleProp(elIndex, 2, $r3$.ɵload(dirIndex).myColorProp, null, dirIndex); }
$r3$.ɵelementClassProp(elIndex, 0, $r3$.ɵload(dirIndex).myFooClass, dirIndex); if (rf & 2) {
$r3$.ɵelementStylingApply(elIndex, dirIndex); $r3$.ɵelementStylingMap(elIndex, ctx.myClass, ctx.myStyle, ctx);
$r3$.ɵelementStyleProp(elIndex, 2, ctx.myColorProp, null, ctx);
$r3$.ɵelementClassProp(elIndex, 0, ctx.myFooClass, ctx);
$r3$.ɵelementStylingApply(elIndex, ctx);
}
} }
`; `;
@ -825,14 +829,18 @@ describe('compiler compliance: styling', () => {
const _c0 = ["bar", "foo"]; const _c0 = ["bar", "foo"];
const _c1 = ["height", "width"]; const _c1 = ["height", "width"];
… …
hostBindings: function MyComponent_HostBindings(dirIndex, elIndex) { hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
$r3$.ɵelementStyling(_c0, _c1, $r3$.ɵdefaultStyleSanitizer, dirIndex); if (rf & 1) {
$r3$.ɵelementStylingMap(elIndex, $r3$.ɵload(dirIndex).myClasses, $r3$.ɵload(dirIndex).myStyle, dirIndex); $r3$.ɵelementStyling(_c0, _c1, $r3$.ɵdefaultStyleSanitizer, ctx);
$r3$.ɵelementStyleProp(elIndex, 0, $r3$.ɵload(dirIndex).myHeightProp, "pt", dirIndex); }
$r3$.ɵelementStyleProp(elIndex, 1, $r3$.ɵload(dirIndex).myWidthProp, null, dirIndex); if (rf & 2) {
$r3$.ɵelementClassProp(elIndex, 0, $r3$.ɵload(dirIndex).myBarClass, dirIndex); $r3$.ɵelementStylingMap(elIndex, ctx.myClasses, ctx.myStyle, ctx);
$r3$.ɵelementClassProp(elIndex, 1, $r3$.ɵload(dirIndex).myFooClass, dirIndex); $r3$.ɵelementStyleProp(elIndex, 0, ctx.myHeightProp, "pt", ctx);
$r3$.ɵelementStylingApply(elIndex, dirIndex); $r3$.ɵelementStyleProp(elIndex, 1, ctx.myWidthProp, null, ctx);
$r3$.ɵelementClassProp(elIndex, 0, ctx.myBarClass, ctx);
$r3$.ɵelementClassProp(elIndex, 1, ctx.myFooClass, ctx);
$r3$.ɵelementStylingApply(elIndex, ctx);
}
} }
`; `;
@ -886,18 +894,26 @@ describe('compiler compliance: styling', () => {
const _c2 = ["bar"]; const _c2 = ["bar"];
const _c3 = ["height"]; const _c3 = ["height"];
… …
function WidthDirective_HostBindings(dirIndex, elIndex) { function WidthDirective_HostBindings(rf, ctx, elIndex) {
$r3$.ɵelementStyling(_c0, _c1, null, dirIndex); if (rf & 1) {
$r3$.ɵelementStyleProp(elIndex, 0, $r3$.ɵload(dirIndex).myWidth, null, dirIndex); $r3$.ɵelementStyling(_c0, _c1, null, ctx);
$r3$.ɵelementClassProp(elIndex, 0, $r3$.ɵload(dirIndex).myFooClass, dirIndex); }
$r3$.ɵelementStylingApply(elIndex, dirIndex); if (rf & 2) {
$r3$.ɵelementStyleProp(elIndex, 0, ctx.myWidth, null, ctx);
$r3$.ɵelementClassProp(elIndex, 0, ctx.myFooClass, ctx);
$r3$.ɵelementStylingApply(elIndex, ctx);
}
} }
… …
function HeightDirective_HostBindings(dirIndex, elIndex) { function HeightDirective_HostBindings(rf, ctx, elIndex) {
$r3$.ɵelementStyling(_c2, _c3, null, dirIndex); if (rf & 1) {
$r3$.ɵelementStyleProp(elIndex, 0, $r3$.ɵload(dirIndex).myHeight, null, dirIndex); $r3$.ɵelementStyling(_c2, _c3, null, ctx);
$r3$.ɵelementClassProp(elIndex, 0, $r3$.ɵload(dirIndex).myBarClass, dirIndex); }
$r3$.ɵelementStylingApply(elIndex, dirIndex); if (rf & 2) {
$r3$.ɵelementStyleProp(elIndex, 0, ctx.myHeight, null, ctx);
$r3$.ɵelementClassProp(elIndex, 0, ctx.myBarClass, ctx);
$r3$.ɵelementStylingApply(elIndex, ctx);
}
} }
… …
`; `;

86
packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
View File

@ -8,6 +8,8 @@
import {NgtscTestEnvironment} from './env'; import {NgtscTestEnvironment} from './env';
const trim = (input: string): string => input.replace(/\s+/g, ' ').trim();
describe('ngtsc behavioral tests', () => { describe('ngtsc behavioral tests', () => {
if (!NgtscTestEnvironment.supported) { if (!NgtscTestEnvironment.supported) {
// These tests should be excluded from the non-Bazel build. // These tests should be excluded from the non-Bazel build.
@ -449,6 +451,37 @@ describe('ngtsc behavioral tests', () => {
expect(jsContents).toContain(`i0.ɵquery(null, ViewContainerRef, true)`); expect(jsContents).toContain(`i0.ɵquery(null, ViewContainerRef, true)`);
}); });
it('should generate host listeners for components', () => {
env.tsconfig();
env.write(`test.ts`, `
import {Component, HostListener} from '@angular/core';
@Component({
selector: 'test',
template: 'Test'
})
class FooCmp {
@HostListener('document:click', ['$event.target'])
onClick(eventTarget: HTMLElement): void {}
@HostListener('window:scroll')
onScroll(event: any): void {}
}
`);
env.driveMain();
const jsContents = env.getContents('test.js');
const hostBindingsFn = `
hostBindings: function FooCmp_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
i0.ɵlistener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event.target); });
i0.ɵlistener("scroll", function FooCmp_scroll_HostBindingHandler($event) { return ctx.onScroll(); });
}
}
`;
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
});
it('should generate host bindings for directives', () => { it('should generate host bindings for directives', () => {
env.tsconfig(); env.tsconfig();
env.write(`test.ts`, ` env.write(`test.ts`, `
@ -476,39 +509,33 @@ describe('ngtsc behavioral tests', () => {
env.driveMain(); env.driveMain();
const jsContents = env.getContents('test.js'); const jsContents = env.getContents('test.js');
expect(jsContents) const hostBindingsFn = `
.toContain(`i0.ɵelementAttribute(elIndex, "hello", i0.ɵbind(i0.ɵload(dirIndex).foo));`); hostBindings: function FooCmp_HostBindings(rf, ctx, elIndex) {
expect(jsContents) if (rf & 1) {
.toContain(`i0.ɵelementProperty(elIndex, "prop", i0.ɵbind(i0.ɵload(dirIndex).bar));`); i0.ɵlistener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); });
expect(jsContents) i0.ɵlistener("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
.toContain('i0.ɵelementClassProp(elIndex, 0, i0.ɵload(dirIndex).someClass, dirIndex)'); i0.ɵelementStyling(_c0, null, null, ctx);
}
const factoryDef = ` if (rf & 2) {
factory: function FooCmp_Factory(t) { i0.ɵelementAttribute(elIndex, "hello", i0.ɵbind(ctx.foo));
var f = new (t || FooCmp)(); i0.ɵelementProperty(elIndex, "prop", i0.ɵbind(ctx.bar));
i0.ɵlistener("click", function FooCmp_click_HostBindingHandler($event) { i0.ɵelementClassProp(elIndex, 0, ctx.someClass, ctx);
return f.onClick($event); i0.ɵelementStylingApply(elIndex, ctx);
}); }
i0.ɵlistener("change", function FooCmp_change_HostBindingHandler($event) {
return f.onChange(f.arg1, f.arg2, f.arg3);
});
return f;
} }
`; `;
expect(jsContents).toContain(factoryDef.replace(/\s+/g, ' ').trim()); expect(trim(jsContents)).toContain(trim(hostBindingsFn));
}); });
it('should generate host listeners for directives with base factories', () => { it('should generate host listeners for directives within hostBindings section', () => {
env.tsconfig(); env.tsconfig();
env.write(`test.ts`, ` env.write(`test.ts`, `
import {Directive, HostListener} from '@angular/core'; import {Directive, HostListener} from '@angular/core';
class Base {}
@Directive({ @Directive({
selector: '[test]', selector: '[test]',
}) })
class Dir extends Base { class Dir {
@HostListener('change', ['arg']) @HostListener('change', ['arg'])
onChange(event: any, arg: any): void {} onChange(event: any, arg: any): void {}
} }
@ -516,17 +543,14 @@ describe('ngtsc behavioral tests', () => {
env.driveMain(); env.driveMain();
const jsContents = env.getContents('test.js'); const jsContents = env.getContents('test.js');
const factoryDef = ` const hostBindingsFn = `
factory: function Dir_Factory(t) { hostBindings: function Dir_HostBindings(rf, ctx, elIndex) {
var f = ɵDir_BaseFactory((t || Dir)); if (rf & 1) {
i0.ɵlistener("change", function Dir_change_HostBindingHandler($event) { i0.ɵlistener("change", function Dir_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg); });
return f.onChange(f.arg); }
});
return f;
} }
`; `;
expect(jsContents).toContain(factoryDef.replace(/\s+/g, ' ').trim()); expect(trim(jsContents)).toContain(trim(hostBindingsFn));
expect(jsContents).toContain('var ɵDir_BaseFactory = i0.ɵgetInheritedFactory(Dir)');
}); });
it('should correctly recognize local symbols', () => { it('should correctly recognize local symbols', () => {

1
packages/compiler/src/injectable_compiler_2.ts
View File

@ -42,7 +42,6 @@ export function compileInjectable(meta: R3InjectableMetadata): InjectableDef {
type: meta.type, type: meta.type,
deps: meta.ctorDeps, deps: meta.ctorDeps,
injectFn: Identifiers.inject, injectFn: Identifiers.inject,
extraStatementFn: null,
}; };
if (meta.useClass !== undefined) { if (meta.useClass !== undefined) {

17
packages/compiler/src/render3/r3_factory.ts
View File

@ -49,11 +49,6 @@ export interface R3ConstructorFactoryMetadata {
* function could be different, and other options control how it will be invoked. * function could be different, and other options control how it will be invoked.
*/ */
injectFn: o.ExternalReference; injectFn: o.ExternalReference;
/**
* Function that allows extra statements to be inserted into factory function.
*/
extraStatementFn: ((instance: o.Expression) => o.Statement[])|null;
} }
export enum R3FactoryDelegateType { export enum R3FactoryDelegateType {
@ -208,22 +203,10 @@ export function compileFactoryFunction(meta: R3FactoryMetadata):
} else if (isExpressionFactoryMetadata(meta)) { } else if (isExpressionFactoryMetadata(meta)) {
// TODO(alxhub): decide whether to lower the value here or in the caller // TODO(alxhub): decide whether to lower the value here or in the caller
retExpr = makeConditionalFactory(meta.expression); retExpr = makeConditionalFactory(meta.expression);
} else if (meta.extraStatementFn) {
// if extraStatementsFn is specified and the 'makeConditionalFactory' function
// was not invoked, we need to create a reference to the instance, so we can
// pass it as an argument to the 'extraStatementFn' function while calling it
const variable = o.variable('f');
body.push(variable.set(ctorExpr).toDeclStmt());
retExpr = variable;
} else { } else {
retExpr = ctorExpr; retExpr = ctorExpr;
} }
if (meta.extraStatementFn) {
const extraStmts = meta.extraStatementFn(retExpr);
body.push(...extraStmts);
}
return { return {
factory: o.fn( factory: o.fn(
[new o.FnParam('t', o.DYNAMIC_TYPE)], [...body, new o.ReturnStatement(retExpr)], [new o.FnParam('t', o.DYNAMIC_TYPE)], [...body, new o.ReturnStatement(retExpr)],

1
packages/compiler/src/render3/r3_module_compiler.ts
View File

@ -101,7 +101,6 @@ export function compileInjector(meta: R3InjectorMetadata): R3InjectorDef {
type: meta.type, type: meta.type,
deps: meta.deps, deps: meta.deps,
injectFn: R3.inject, injectFn: R3.inject,
extraStatementFn: null,
}); });
const expression = o.importExpr(R3.defineInjector).callFn([mapToMapExpression({ const expression = o.importExpr(R3.defineInjector).callFn([mapToMapExpression({
factory: result.factory, factory: result.factory,

1
packages/compiler/src/render3/r3_pipe_compiler.ts
View File

@ -43,7 +43,6 @@ export function compilePipeFromMetadata(metadata: R3PipeMetadata) {
type: metadata.type, type: metadata.type,
deps: metadata.deps, deps: metadata.deps,
injectFn: R3.directiveInject, injectFn: R3.directiveInject,
extraStatementFn: null,
}); });
definitionMapValues.push({key: 'factory', value: templateFactory.factory, quoted: false}); definitionMapValues.push({key: 'factory', value: templateFactory.factory, quoted: false});

81
packages/compiler/src/render3/view/compiler.ts
View File

@ -55,7 +55,6 @@ function baseDirectiveFields(
type: meta.type, type: meta.type,
deps: meta.deps, deps: meta.deps,
injectFn: R3.directiveInject, injectFn: R3.directiveInject,
extraStatementFn: createFactoryExtraStatementsFn(meta, bindingParser)
}); });
definitionMap.set('factory', result.factory); definitionMap.set('factory', result.factory);
@ -67,8 +66,8 @@ function baseDirectiveFields(
let hostVars = Object.keys(meta.host.properties).length; let hostVars = Object.keys(meta.host.properties).length;
const elVarExp = o.variable('elIndex'); const elVarExp = o.variable('elIndex');
const dirVarExp = o.variable('dirIndex'); const contextVarExp = o.variable(CONTEXT_NAME);
const styleBuilder = new StylingBuilder(elVarExp, dirVarExp); const styleBuilder = new StylingBuilder(elVarExp, contextVarExp);
const allOtherAttributes: any = {}; const allOtherAttributes: any = {};
const attrNames = Object.getOwnPropertyNames(meta.host.attributes); const attrNames = Object.getOwnPropertyNames(meta.host.attributes);
@ -93,15 +92,15 @@ function baseDirectiveFields(
// e.g. `attributes: ['role', 'listbox']` // e.g. `attributes: ['role', 'listbox']`
definitionMap.set('attributes', createHostAttributesArray(allOtherAttributes)); definitionMap.set('attributes', createHostAttributesArray(allOtherAttributes));
// e.g. `hostBindings: (dirIndex, elIndex) => { ... } // e.g. `hostBindings: (rf, ctx, elIndex) => { ... }
definitionMap.set( definitionMap.set(
'hostBindings', 'hostBindings', createHostBindingsFunction(
createHostBindingsFunction( meta, elVarExp, contextVarExp, styleBuilder, bindingParser, constantPool,
meta, elVarExp, dirVarExp, styleBuilder, bindingParser, constantPool, (slots: number) => { (slots: number) => {
const originalSlots = hostVars; const originalSlots = hostVars;
hostVars += slots; hostVars += slots;
return originalSlots; return originalSlots;
})); }));
if (hostVars) { if (hostVars) {
// e.g. `hostVars: 2 // e.g. `hostVars: 2
@ -643,18 +642,26 @@ function createViewQueriesFunction(
// Return a host binding function or null if one is not necessary. // Return a host binding function or null if one is not necessary.
function createHostBindingsFunction( function createHostBindingsFunction(
meta: R3DirectiveMetadata, elVarExp: o.ReadVarExpr, dirVarExp: o.ReadVarExpr, meta: R3DirectiveMetadata, elVarExp: o.ReadVarExpr, bindingContext: o.ReadVarExpr,
styleBuilder: StylingBuilder, bindingParser: BindingParser, constantPool: ConstantPool, styleBuilder: StylingBuilder, bindingParser: BindingParser, constantPool: ConstantPool,
allocatePureFunctionSlots: (slots: number) => number): o.Expression|null { allocatePureFunctionSlots: (slots: number) => number): o.Expression|null {
const statements: o.Statement[] = []; const createStatements: o.Statement[] = [];
const updateStatements: o.Statement[] = [];
const hostBindingSourceSpan = meta.typeSourceSpan; const hostBindingSourceSpan = meta.typeSourceSpan;
const directiveSummary = metadataAsSummary(meta); const directiveSummary = metadataAsSummary(meta);
// Calculate host event bindings
const eventBindings =
bindingParser.createDirectiveHostEventAsts(directiveSummary, hostBindingSourceSpan);
if (eventBindings && eventBindings.length) {
const listeners = createHostListeners(bindingContext, eventBindings, meta);
createStatements.push(...listeners);
}
// Calculate the host property bindings // Calculate the host property bindings
const bindings = bindingParser.createBoundHostProperties(directiveSummary, hostBindingSourceSpan); const bindings = bindingParser.createBoundHostProperties(directiveSummary, hostBindingSourceSpan);
const bindingContext = o.importExpr(R3.load).callFn([dirVarExp]);
const bindingFn = (implicit: any, value: AST) => { const bindingFn = (implicit: any, value: AST) => {
return convertPropertyBinding( return convertPropertyBinding(
@ -683,14 +690,14 @@ function createHostBindingsFunction(
const {bindingName, instruction} = getBindingNameAndInstruction(name); const {bindingName, instruction} = getBindingNameAndInstruction(name);
statements.push(...bindingExpr.stmts); updateStatements.push(...bindingExpr.stmts);
statements.push(o.importExpr(instruction) updateStatements.push(o.importExpr(instruction)
.callFn([ .callFn([
elVarExp, elVarExp,
o.literal(bindingName), o.literal(bindingName),
o.importExpr(R3.bind).callFn([bindingExpr.currValExpr]), o.importExpr(R3.bind).callFn([bindingExpr.currValExpr]),
]) ])
.toStmt()); .toStmt());
} }
} }
@ -698,24 +705,31 @@ function createHostBindingsFunction(
const createInstruction = styleBuilder.buildCreateLevelInstruction(null, constantPool); const createInstruction = styleBuilder.buildCreateLevelInstruction(null, constantPool);
if (createInstruction) { if (createInstruction) {
const createStmt = createStylingStmt(createInstruction, bindingContext, bindingFn); const createStmt = createStylingStmt(createInstruction, bindingContext, bindingFn);
statements.push(createStmt); createStatements.push(createStmt);
} }
styleBuilder.buildUpdateLevelInstructions(valueConverter).forEach(instruction => { styleBuilder.buildUpdateLevelInstructions(valueConverter).forEach(instruction => {
const updateStmt = createStylingStmt(instruction, bindingContext, bindingFn); const updateStmt = createStylingStmt(instruction, bindingContext, bindingFn);
statements.push(updateStmt); updateStatements.push(updateStmt);
}); });
} }
} }
if (statements.length > 0) { if (createStatements.length > 0 || updateStatements.length > 0) {
const typeName = meta.name; const hostBindingsFnName = meta.name ? `${meta.name}_HostBindings` : null;
const statements: o.Statement[] = [];
if (createStatements.length > 0) {
statements.push(renderFlagCheckIfStmt(core.RenderFlags.Create, createStatements));
}
if (updateStatements.length > 0) {
statements.push(renderFlagCheckIfStmt(core.RenderFlags.Update, updateStatements));
}
return o.fn( return o.fn(
[ [
new o.FnParam(dirVarExp.name !, o.NUMBER_TYPE), new o.FnParam(RENDER_FLAGS, o.NUMBER_TYPE), new o.FnParam(CONTEXT_NAME, null),
new o.FnParam(elVarExp.name !, o.NUMBER_TYPE), new o.FnParam(elVarExp.name !, o.NUMBER_TYPE)
], ],
statements, o.INFERRED_TYPE, null, typeName ? `${typeName}_HostBindings` : null); statements, o.INFERRED_TYPE, null, hostBindingsFnName);
} }
return null; return null;
@ -745,15 +759,6 @@ function getBindingNameAndInstruction(bindingName: string):
return {bindingName, instruction}; return {bindingName, instruction};
} }
function createFactoryExtraStatementsFn(meta: R3DirectiveMetadata, bindingParser: BindingParser):
((instance: o.Expression) => o.Statement[])|null {
const eventBindings =
bindingParser.createDirectiveHostEventAsts(metadataAsSummary(meta), meta.typeSourceSpan);
return eventBindings && eventBindings.length ?
(instance: o.Expression) => createHostListeners(instance, eventBindings, meta) :
null;
}
function createHostListeners( function createHostListeners(
bindingContext: o.Expression, eventBindings: ParsedEvent[], bindingContext: o.Expression, eventBindings: ParsedEvent[],
meta: R3DirectiveMetadata): o.Statement[] { meta: R3DirectiveMetadata): o.Statement[] {

27
packages/compiler/src/render3/view/styling.ts
View File

@ -80,8 +80,7 @@ export class StylingBuilder {
private _useDefaultSanitizer = false; private _useDefaultSanitizer = false;
private _applyFnRequired = false; private _applyFnRequired = false;
constructor( constructor(private _elementIndexExpr: o.Expression, private _directiveExpr: o.Expression|null) {}
private _elementIndexExpr: o.Expression, private _directiveIndexExpr: o.Expression|null) {}
registerBoundInput(input: t.BoundAttribute): boolean { registerBoundInput(input: t.BoundAttribute): boolean {
// [attr.style] or [attr.class] are skipped in the code below, // [attr.style] or [attr.class] are skipped in the code below,
@ -217,15 +216,15 @@ export class StylingBuilder {
// can be processed during runtime. These initial styles values are bound to // can be processed during runtime. These initial styles values are bound to
// a constant because the inital style values do not change (since they're static). // a constant because the inital style values do not change (since they're static).
params.push(constantPool.getConstLiteral(initialStyles, true)); params.push(constantPool.getConstLiteral(initialStyles, true));
} else if (useSanitizer || this._directiveIndexExpr) { } else if (useSanitizer || this._directiveExpr) {
// no point in having an extra `null` value unless there are follow-up params // no point in having an extra `null` value unless there are follow-up params
params.push(o.NULL_EXPR); params.push(o.NULL_EXPR);
} }
if (useSanitizer || this._directiveIndexExpr) { if (useSanitizer || this._directiveExpr) {
params.push(useSanitizer ? o.importExpr(R3.defaultStyleSanitizer) : o.NULL_EXPR); params.push(useSanitizer ? o.importExpr(R3.defaultStyleSanitizer) : o.NULL_EXPR);
if (this._directiveIndexExpr) { if (this._directiveExpr) {
params.push(this._directiveIndexExpr); params.push(this._directiveExpr);
} }
} }
@ -260,12 +259,12 @@ export class StylingBuilder {
if (mapBasedStyleValue) { if (mapBasedStyleValue) {
params.push(convertFn(mapBasedStyleValue)); params.push(convertFn(mapBasedStyleValue));
} else if (this._directiveIndexExpr) { } else if (this._directiveExpr) {
params.push(o.NULL_EXPR); params.push(o.NULL_EXPR);
} }
if (this._directiveIndexExpr) { if (this._directiveExpr) {
params.push(this._directiveIndexExpr); params.push(this._directiveExpr);
} }
return params; return params;
@ -289,13 +288,13 @@ export class StylingBuilder {
if (allowUnits) { if (allowUnits) {
if (input.unit) { if (input.unit) {
params.push(o.literal(input.unit)); params.push(o.literal(input.unit));
} else if (this._directiveIndexExpr) { } else if (this._directiveExpr) {
params.push(o.NULL_EXPR); params.push(o.NULL_EXPR);
} }
} }
if (this._directiveIndexExpr) { if (this._directiveExpr) {
params.push(this._directiveIndexExpr); params.push(this._directiveExpr);
} }
return params; return params;
} }
@ -325,8 +324,8 @@ export class StylingBuilder {
reference: R3.elementStylingApply, reference: R3.elementStylingApply,
buildParams: () => { buildParams: () => {
const params: o.Expression[] = [this._elementIndexExpr]; const params: o.Expression[] = [this._elementIndexExpr];
if (this._directiveIndexExpr) { if (this._directiveExpr) {
params.push(this._directiveIndexExpr); params.push(this._directiveExpr);
} }
return params; return params;
} }

6
packages/core/src/render3/definition.ts
View File

@ -16,7 +16,7 @@ import {Mutable, Type} from '../type';
import {noSideEffects} from '../util'; import {noSideEffects} from '../util';
import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields'; import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields';
import {BaseDef, ComponentDef, ComponentDefFeature, ComponentQuery, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, PipeDef, PipeType, PipeTypesOrFactory} from './interfaces/definition'; import {BaseDef, ComponentDef, ComponentDefFeature, ComponentQuery, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, HostBindingsFunction, PipeDef, PipeType, PipeTypesOrFactory} from './interfaces/definition';
import {CssSelectorList, SelectorFlags} from './interfaces/projection'; import {CssSelectorList, SelectorFlags} from './interfaces/projection';
export const EMPTY: {} = {}; export const EMPTY: {} = {};
@ -149,7 +149,7 @@ export function defineComponent<T>(componentDefinition: {
/** /**
* Function executed by the parent template to allow child directive to apply host bindings. * Function executed by the parent template to allow child directive to apply host bindings.
*/ */
hostBindings?: (directiveIndex: number, elementIndex: number) => void; hostBindings?: HostBindingsFunction<T>;
/** /**
* Function to create instances of content queries associated with a given directive. * Function to create instances of content queries associated with a given directive.
@ -597,7 +597,7 @@ export const defineDirective = defineComponent as any as<T>(directiveDefinition:
/** /**
* Function executed by the parent template to allow child directive to apply host bindings. * Function executed by the parent template to allow child directive to apply host bindings.
*/ */
hostBindings?: (directiveIndex: number, elementIndex: number) => void; hostBindings?: HostBindingsFunction<T>;
/** /**
* Function to create instances of content queries associated with a given directive. * Function to create instances of content queries associated with a given directive.

6
packages/core/src/render3/features/inherit_definition_feature.ts
View File

@ -72,9 +72,9 @@ export function InheritDefinitionFeature(definition: DirectiveDef<any>| Componen
const superHostBindings = superDef.hostBindings; const superHostBindings = superDef.hostBindings;
if (superHostBindings) { if (superHostBindings) {
if (prevHostBindings) { if (prevHostBindings) {
definition.hostBindings = (directiveIndex: number, elementIndex: number) => { definition.hostBindings = (rf: RenderFlags, ctx: any, elementIndex: number) => {
superHostBindings(directiveIndex, elementIndex); superHostBindings(rf, ctx, elementIndex);
prevHostBindings(directiveIndex, elementIndex); prevHostBindings(rf, ctx, elementIndex);
}; };
(definition as any).hostVars += superDef.hostVars; (definition as any).hostVars += superDef.hostVars;
} else { } else {

80
packages/core/src/render3/instructions.ts
View File

@ -124,15 +124,9 @@ export function setHostBindings(tView: TView, viewData: LViewData): void {
} else { } else {
// If it's not a number, it's a host binding function that needs to be executed. // If it's not a number, it's a host binding function that needs to be executed.
viewData[BINDING_INDEX] = bindingRootIndex; viewData[BINDING_INDEX] = bindingRootIndex;
// We must subtract the header offset because the load() instruction instruction(
// expects a raw, unadjusted index. RenderFlags.Update, readElementValue(viewData[currentDirectiveIndex]),
// <HACK(misko)>: set the `previousOrParentTNode` so that hostBindings functions can currentElementIndex);
// correctly retrieve it. This should be removed once we call the hostBindings function
// inline as part of the `RenderFlags.Create` because in that case the value will already be
// correctly set.
setPreviousOrParentTNode(getTView().data[currentElementIndex + HEADER_OFFSET] as TNode);
// </HACK>
instruction(currentDirectiveIndex - HEADER_OFFSET, currentElementIndex);
currentDirectiveIndex++; currentDirectiveIndex++;
} }
} }
@ -1077,14 +1071,13 @@ function generatePropertyAliases(
* @param classIndex Index of class to toggle. Because it is going to DOM, this is not subject to * @param classIndex Index of class to toggle. Because it is going to DOM, this is not subject to
* renaming as part of minification. * renaming as part of minification.
* @param value A value indicating if a given class should be added or removed. * @param value A value indicating if a given class should be added or removed.
* @param directiveIndex the index for the directive that is attempting to change styling. * @param directive the ref to the directive that is attempting to change styling.
*/ */
export function elementClassProp( export function elementClassProp(
index: number, classIndex: number, value: boolean | PlayerFactory, index: number, classIndex: number, value: boolean | PlayerFactory, directive?: {}): void {
directiveIndex?: number): void { if (directive != undefined) {
if (directiveIndex != undefined) {
return hackImplementationOfElementClassProp( return hackImplementationOfElementClassProp(
index, classIndex, value, directiveIndex); // proper supported in next PR index, classIndex, value, directive); // proper supported in next PR
} }
const val = const val =
(value instanceof BoundPlayerFactory) ? (value as BoundPlayerFactory<boolean>) : (!!value); (value instanceof BoundPlayerFactory) ? (value as BoundPlayerFactory<boolean>) : (!!value);
@ -1118,17 +1111,17 @@ export function elementClassProp(
* values that are passed in here will be applied to the element (if matched). * values that are passed in here will be applied to the element (if matched).
* @param styleSanitizer An optional sanitizer function that will be used (if provided) * @param styleSanitizer An optional sanitizer function that will be used (if provided)
* to sanitize the any CSS property values that are applied to the element (during rendering). * to sanitize the any CSS property values that are applied to the element (during rendering).
* @param directiveIndex the index for the directive that is attempting to change styling. * @param directive the ref to the directive that is attempting to change styling.
*/ */
export function elementStyling( export function elementStyling(
classDeclarations?: (string | boolean | InitialStylingFlags)[] | null, classDeclarations?: (string | boolean | InitialStylingFlags)[] | null,
styleDeclarations?: (string | boolean | InitialStylingFlags)[] | null, styleDeclarations?: (string | boolean | InitialStylingFlags)[] | null,
styleSanitizer?: StyleSanitizeFn | null, directiveIndex?: number): void { styleSanitizer?: StyleSanitizeFn | null, directive?: {}): void {
if (directiveIndex !== undefined) { if (directive != undefined) {
getCreationMode() && getCreationMode() &&
hackImplementationOfElementStyling( hackImplementationOfElementStyling(
classDeclarations || null, styleDeclarations || null, styleSanitizer || null, classDeclarations || null, styleDeclarations || null, styleSanitizer || null,
directiveIndex); // supported in next PR directive); // supported in next PR
return; return;
} }
const tNode = getPreviousOrParentTNode(); const tNode = getPreviousOrParentTNode();
@ -1171,11 +1164,11 @@ export function elementStyling(
* (Note that this is not the element index, but rather an index value allocated * (Note that this is not the element index, but rather an index value allocated
* specifically for element styling--the index must be the next index after the element * specifically for element styling--the index must be the next index after the element
* index.) * index.)
* @param directiveIndex the index for the directive that is attempting to change styling. * @param directive the ref to the directive that is attempting to change styling.
*/ */
export function elementStylingApply(index: number, directiveIndex?: number): void { export function elementStylingApply(index: number, directive?: {}): void {
if (directiveIndex != undefined) { if (directive != undefined) {
return hackImplementationOfElementStylingApply(index, directiveIndex); // supported in next PR return hackImplementationOfElementStylingApply(index, directive); // supported in next PR
} }
const viewData = getViewData(); const viewData = getViewData();
const isFirstRender = (viewData[FLAGS] & LViewFlags.CreationMode) !== 0; const isFirstRender = (viewData[FLAGS] & LViewFlags.CreationMode) !== 0;
@ -1206,14 +1199,14 @@ export function elementStylingApply(index: number, directiveIndex?: number): voi
* @param suffix Optional suffix. Used with scalar values to add unit such as `px`. * @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
* Note that when a suffix is provided then the underlying sanitizer will * Note that when a suffix is provided then the underlying sanitizer will
* be ignored. * be ignored.
* @param directiveIndex the index for the directive that is attempting to change styling. * @param directive the ref to the directive that is attempting to change styling.
*/ */
export function elementStyleProp( export function elementStyleProp(
index: number, styleIndex: number, value: string | number | String | PlayerFactory | null, index: number, styleIndex: number, value: string | number | String | PlayerFactory | null,
suffix?: string, directiveIndex?: number): void { suffix?: string, directive?: {}): void {
if (directiveIndex != undefined) if (directive != undefined)
return hackImplementationOfElementStyleProp( return hackImplementationOfElementStyleProp(
index, styleIndex, value, suffix, directiveIndex); // supported in next PR index, styleIndex, value, suffix, directive); // supported in next PR
let valueToAdd: string|null = null; let valueToAdd: string|null = null;
if (value) { if (value) {
if (suffix) { if (suffix) {
@ -1251,14 +1244,14 @@ export function elementStyleProp(
* @param styles A key/value style map of the styles that will be applied to the given element. * @param styles A key/value style map of the styles that will be applied to the given element.
* Any missing styles (that have already been applied to the element beforehand) will be * Any missing styles (that have already been applied to the element beforehand) will be
* removed (unset) from the element's styling. * removed (unset) from the element's styling.
* @param directiveIndex the index for the directive that is attempting to change styling. * @param directive the ref to the directive that is attempting to change styling.
*/ */
export function elementStylingMap<T>( export function elementStylingMap<T>(
index: number, classes: {[key: string]: any} | string | NO_CHANGE | null, index: number, classes: {[key: string]: any} | string | NO_CHANGE | null,
styles?: {[styleName: string]: any} | NO_CHANGE | null, directiveIndex?: number): void { styles?: {[styleName: string]: any} | NO_CHANGE | null, directive?: {}): void {
if (directiveIndex != undefined) if (directive != undefined)
return hackImplementationOfElementStylingMap( return hackImplementationOfElementStylingMap(
index, classes, styles, directiveIndex); // supported in next PR index, classes, styles, directive); // supported in next PR
const viewData = getViewData(); const viewData = getViewData();
const tNode = getTNode(index, viewData); const tNode = getTNode(index, viewData);
const stylingContext = getStylingContext(index, viewData); const stylingContext = getStylingContext(index, viewData);
@ -1282,22 +1275,20 @@ interface HostStylingHack {
styleDeclarations: string[]; styleDeclarations: string[];
styleSanitizer: StyleSanitizeFn|null; styleSanitizer: StyleSanitizeFn|null;
} }
interface HostStylingHackMap { type HostStylingHackMap = Map<{}, HostStylingHack>;
[directiveIndex: number]: HostStylingHack;
}
function hackImplementationOfElementStyling( function hackImplementationOfElementStyling(
classDeclarations: (string | boolean | InitialStylingFlags)[] | null, classDeclarations: (string | boolean | InitialStylingFlags)[] | null,
styleDeclarations: (string | boolean | InitialStylingFlags)[] | null, styleDeclarations: (string | boolean | InitialStylingFlags)[] | null,
styleSanitizer: StyleSanitizeFn | null, directiveIndex: number): void { styleSanitizer: StyleSanitizeFn | null, directive: {}): void {
const node = getNativeByTNode(getPreviousOrParentTNode(), getViewData()); const node = getNativeByTNode(getPreviousOrParentTNode(), getViewData());
ngDevMode && assertDefined(node, 'expecting parent DOM node'); ngDevMode && assertDefined(node, 'expecting parent DOM node');
const hostStylingHackMap: HostStylingHackMap = const hostStylingHackMap: HostStylingHackMap =
((node as any).hostStylingHack || ((node as any).hostStylingHack = {})); ((node as any).hostStylingHack || ((node as any).hostStylingHack = new Map()));
hostStylingHackMap[directiveIndex] = { hostStylingHackMap.set(directive, {
classDeclarations: hackSquashDeclaration(classDeclarations), classDeclarations: hackSquashDeclaration(classDeclarations),
styleDeclarations: hackSquashDeclaration(styleDeclarations), styleSanitizer styleDeclarations: hackSquashDeclaration(styleDeclarations), styleSanitizer
}; });
} }
function hackSquashDeclaration(declarations: (string | boolean | InitialStylingFlags)[] | null): function hackSquashDeclaration(declarations: (string | boolean | InitialStylingFlags)[] | null):
@ -1307,11 +1298,10 @@ function hackSquashDeclaration(declarations: (string | boolean | InitialStylingF
} }
function hackImplementationOfElementClassProp( function hackImplementationOfElementClassProp(
index: number, classIndex: number, value: boolean | PlayerFactory, index: number, classIndex: number, value: boolean | PlayerFactory, directive: {}): void {
directiveIndex: number): void {
const node = getNativeByIndex(index, getViewData()); const node = getNativeByIndex(index, getViewData());
ngDevMode && assertDefined(node, 'could not locate node'); ngDevMode && assertDefined(node, 'could not locate node');
const hostStylingHack: HostStylingHack = (node as any).hostStylingHack[directiveIndex]; const hostStylingHack: HostStylingHack = (node as any).hostStylingHack.get(directive);
const className = hostStylingHack.classDeclarations[classIndex]; const className = hostStylingHack.classDeclarations[classIndex];
const renderer = getRenderer(); const renderer = getRenderer();
if (isProceduralRenderer(renderer)) { if (isProceduralRenderer(renderer)) {
@ -1322,19 +1312,19 @@ function hackImplementationOfElementClassProp(
} }
} }
function hackImplementationOfElementStylingApply(index: number, directiveIndex?: number): void { function hackImplementationOfElementStylingApply(index: number, directive?: {}): void {
// Do nothing because the hack implementation is eager. // Do nothing because the hack implementation is eager.
} }
function hackImplementationOfElementStyleProp( function hackImplementationOfElementStyleProp(
index: number, styleIndex: number, value: string | number | String | PlayerFactory | null, index: number, styleIndex: number, value: string | number | String | PlayerFactory | null,
suffix?: string, directiveIndex?: number): void { suffix?: string, directive?: {}): void {
throw new Error('unimplemented. Should not be needed by ViewEngine compatibility'); throw new Error('unimplemented. Should not be needed by ViewEngine compatibility');
} }
function hackImplementationOfElementStylingMap<T>( function hackImplementationOfElementStylingMap<T>(
index: number, classes: {[key: string]: any} | string | NO_CHANGE | null, index: number, classes: {[key: string]: any} | string | NO_CHANGE | null,
styles?: {[styleName: string]: any} | NO_CHANGE | null, directiveIndex?: number): void { styles?: {[styleName: string]: any} | NO_CHANGE | null, directive?: {}): void {
throw new Error('unimplemented. Should not be needed by ViewEngine compatibility'); throw new Error('unimplemented. Should not be needed by ViewEngine compatibility');
} }
@ -1531,6 +1521,10 @@ function postProcessBaseDirective<T>(
'directives should be created before any bindings'); 'directives should be created before any bindings');
ngDevMode && assertPreviousIsParent(); ngDevMode && assertPreviousIsParent();
if (def.hostBindings) {
def.hostBindings(RenderFlags.Create, directive, previousOrParentTNode.index);
}
attachPatchData(directive, viewData); attachPatchData(directive, viewData);
if (native) { if (native) {
attachPatchData(native, viewData); attachPatchData(native, viewData);

4
packages/core/src/render3/interfaces/definition.ts
View File

@ -145,7 +145,7 @@ export interface DirectiveDef<T> extends BaseDef<T> {
readonly hostVars: number; readonly hostVars: number;
/** Refreshes host bindings on the associated directive. */ /** Refreshes host bindings on the associated directive. */
hostBindings: HostBindingsFunction|null; hostBindings: HostBindingsFunction<T>|null;
/** /**
* Static attributes to set on host element. * Static attributes to set on host element.
@ -333,7 +333,7 @@ export type DirectiveTypeList =
(DirectiveDef<any>| ComponentDef<any>| (DirectiveDef<any>| ComponentDef<any>|
Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[]; Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
export type HostBindingsFunction = (directiveIndex: number, elementIndex: number) => void; export type HostBindingsFunction<T> = (rf: RenderFlags, ctx: T, elementIndex: number) => void;
/** /**
* Type used for PipeDefs on component definition. * Type used for PipeDefs on component definition.

2
packages/core/src/render3/interfaces/view.ts
View File

@ -342,7 +342,7 @@ export interface TView {
* *
* See VIEW_DATA.md for more information. * See VIEW_DATA.md for more information.
*/ */
expandoInstructions: (number|HostBindingsFunction)[]|null; expandoInstructions: (number|HostBindingsFunction<any>)[]|null;
/** /**
* Full registry of directives and components that may be found in this view. * Full registry of directives and components that may be found in this view.

14
packages/core/test/render3/Inherit_definition_feature_spec.ts
View File

@ -308,9 +308,10 @@ describe('InheritDefinitionFeature', () => {
static ngDirectiveDef = defineDirective({ static ngDirectiveDef = defineDirective({
type: SuperDirective, type: SuperDirective,
selectors: [['', 'superDir', '']], selectors: [['', 'superDir', '']],
hostBindings: (directiveIndex: number, elementIndex: number) => { hostBindings: (rf: RenderFlags, ctx: SuperDirective, elementIndex: number) => {
const instance = load(directiveIndex) as SuperDirective; if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'id', bind(instance.id)); elementProperty(elementIndex, 'id', bind(ctx.id));
}
}, },
hostVars: 1, hostVars: 1,
factory: () => new SuperDirective(), factory: () => new SuperDirective(),
@ -323,9 +324,10 @@ describe('InheritDefinitionFeature', () => {
static ngDirectiveDef = defineDirective({ static ngDirectiveDef = defineDirective({
type: SubDirective, type: SubDirective,
selectors: [['', 'subDir', '']], selectors: [['', 'subDir', '']],
hostBindings: (directiveIndex: number, elementIndex: number) => { hostBindings: (rf: RenderFlags, ctx: SubDirective, elementIndex: number) => {
const instance = load(directiveIndex) as SubDirective; if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'title', bind(instance.title)); elementProperty(elementIndex, 'title', bind(ctx.title));
}
}, },
hostVars: 1, hostVars: 1,
factory: () => subDir = new SubDirective(), factory: () => subDir = new SubDirective(),

6
packages/core/test/render3/di_spec.ts
View File

@ -655,8 +655,10 @@ describe('di', () => {
selectors: [['', 'hostBindingDir', '']], selectors: [['', 'hostBindingDir', '']],
factory: () => hostBindingDir = new HostBindingDir(), factory: () => hostBindingDir = new HostBindingDir(),
hostVars: 1, hostVars: 1,
hostBindings: (directiveIndex: number, elementIndex: number) => { hostBindings: (rf: RenderFlags, ctx: any, elementIndex: number) => {
elementProperty(elementIndex, 'id', bind(load<HostBindingDir>(directiveIndex).id)); if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'id', bind(ctx.id));
}
} }
}); });
} }

94
packages/core/test/render3/host_binding_spec.ts
View File

@ -50,8 +50,10 @@ describe('host bindings', () => {
selectors: [['', 'hostBindingDir', '']], selectors: [['', 'hostBindingDir', '']],
factory: () => hostBindingDir = new HostBindingDir(), factory: () => hostBindingDir = new HostBindingDir(),
hostVars: 1, hostVars: 1,
hostBindings: (directiveIndex: number, elementIndex: number) => { hostBindings: (rf: RenderFlags, ctx: any, elementIndex: number) => {
elementProperty(elementIndex, 'id', bind(load<HostBindingDir>(directiveIndex).id)); if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'id', bind(ctx.id));
}
} }
}); });
} }
@ -67,9 +69,10 @@ describe('host bindings', () => {
consts: 0, consts: 0,
vars: 0, vars: 0,
hostVars: 1, hostVars: 1,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
const ctx = load(dirIndex) as HostBindingComp; if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(ctx.id)); elementProperty(elIndex, 'id', bind(ctx.id));
}
}, },
template: (rf: RenderFlags, ctx: HostBindingComp) => {} template: (rf: RenderFlags, ctx: HostBindingComp) => {}
}); });
@ -87,8 +90,10 @@ describe('host bindings', () => {
selectors: [['', 'dir', '']], selectors: [['', 'dir', '']],
factory: () => directiveInstance = new Directive, factory: () => directiveInstance = new Directive,
hostVars: 1, hostVars: 1,
hostBindings: (directiveIndex: number, elementIndex: number) => { hostBindings: (rf: RenderFlags, ctx: any, elementIndex: number) => {
elementProperty(elementIndex, 'className', bind(load<Directive>(directiveIndex).klass)); if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'className', bind(ctx.klass));
}
} }
}); });
} }
@ -135,9 +140,10 @@ describe('host bindings', () => {
consts: 0, consts: 0,
vars: 0, vars: 0,
hostVars: 1, hostVars: 1,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: CompWithProviders, elIndex: number) => {
const instance = load(dirIndex) as CompWithProviders; if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(instance.id)); elementProperty(elIndex, 'id', bind(ctx.id));
}
}, },
template: (rf: RenderFlags, ctx: CompWithProviders) => {}, template: (rf: RenderFlags, ctx: CompWithProviders) => {},
features: [ProvidersFeature([[ServiceOne], [ServiceTwo]])] features: [ProvidersFeature([[ServiceOne], [ServiceTwo]])]
@ -168,9 +174,10 @@ describe('host bindings', () => {
consts: 0, consts: 0,
vars: 0, vars: 0,
hostVars: 1, hostVars: 1,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: HostTitleComp, elIndex: number) => {
const ctx = load(dirIndex) as HostTitleComp; if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'title', bind(ctx.title)); elementProperty(elIndex, 'title', bind(ctx.title));
}
}, },
template: (rf: RenderFlags, ctx: HostTitleComp) => {} template: (rf: RenderFlags, ctx: HostTitleComp) => {}
}); });
@ -248,9 +255,10 @@ describe('host bindings', () => {
vars: 0, vars: 0,
hostVars: 1, hostVars: 1,
features: [NgOnChangesFeature], features: [NgOnChangesFeature],
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: InitHookComp, elIndex: number) => {
const ctx = load(dirIndex) as InitHookComp; if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'title', bind(ctx.value)); elementProperty(elIndex, 'title', bind(ctx.value));
}
}, },
inputs: {inputValue: 'inputValue'} inputs: {inputValue: 'inputValue'}
}); });
@ -413,12 +421,14 @@ describe('host bindings', () => {
consts: 0, consts: 0,
vars: 0, vars: 0,
hostVars: 8, hostVars: 8,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
const ctx = load(dirIndex) as HostBindingComp;
// LViewData: [..., id, dir, title, ctx.id, pf1, ctx.title, ctx.otherTitle, pf2] // LViewData: [..., id, dir, title, ctx.id, pf1, ctx.title, ctx.otherTitle, pf2]
elementProperty(elIndex, 'id', bind(pureFunction1(3, ff, ctx.id))); if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'dir', bind(ctx.dir)); elementProperty(elIndex, 'id', bind(pureFunction1(3, ff, ctx.id)));
elementProperty(elIndex, 'title', bind(pureFunction2(5, ff2, ctx.title, ctx.otherTitle))); elementProperty(elIndex, 'dir', bind(ctx.dir));
elementProperty(
elIndex, 'title', bind(pureFunction2(5, ff2, ctx.title, ctx.otherTitle)));
}
}, },
template: (rf: RenderFlags, ctx: HostBindingComp) => {} template: (rf: RenderFlags, ctx: HostBindingComp) => {}
}); });
@ -487,10 +497,11 @@ describe('host bindings', () => {
consts: 0, consts: 0,
vars: 0, vars: 0,
hostVars: 3, hostVars: 3,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
// LViewData: [..., id, ctx.id, pf1] // LViewData: [..., id, ctx.id, pf1]
const ctx = load(dirIndex) as HostBindingComp; if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(pureFunction1(1, ff, ctx.id))); elementProperty(elIndex, 'id', bind(pureFunction1(1, ff, ctx.id)));
}
}, },
template: (rf: RenderFlags, ctx: HostBindingComp) => {} template: (rf: RenderFlags, ctx: HostBindingComp) => {}
}); });
@ -515,10 +526,11 @@ describe('host bindings', () => {
selectors: [['', 'hostDir', '']], selectors: [['', 'hostDir', '']],
factory: () => hostBindingDir = new HostBindingDir(), factory: () => hostBindingDir = new HostBindingDir(),
hostVars: 3, hostVars: 3,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: HostBindingDir, elIndex: number) => {
// LViewData [..., title, ctx.title, pf1] // LViewData [..., title, ctx.title, pf1]
const ctx = load(dirIndex) as HostBindingDir; if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'title', bind(pureFunction1(1, ff1, ctx.title))); elementProperty(elIndex, 'title', bind(pureFunction1(1, ff1, ctx.title)));
}
} }
}); });
} }
@ -576,14 +588,15 @@ describe('host bindings', () => {
consts: 0, consts: 0,
vars: 0, vars: 0,
hostVars: 6, hostVars: 6,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
// LViewData: [..., id, title, ctx.id, pf1, ctx.title, pf1] // LViewData: [..., id, title, ctx.id, pf1, ctx.title, pf1]
const ctx = load(dirIndex) as HostBindingComp; if (rf & RenderFlags.Update) {
elementProperty( elementProperty(
elIndex, 'id', bind(ctx.condition ? pureFunction1(2, ff, ctx.id) : 'green')); elIndex, 'id', bind(ctx.condition ? pureFunction1(2, ff, ctx.id) : 'green'));
elementProperty( elementProperty(
elIndex, 'title', elIndex, 'title',
bind(ctx.otherCondition ? pureFunction1(4, ff1, ctx.title) : 'other title')); bind(ctx.otherCondition ? pureFunction1(4, ff1, ctx.title) : 'other title'));
}
}, },
template: (rf: RenderFlags, ctx: HostBindingComp) => {} template: (rf: RenderFlags, ctx: HostBindingComp) => {}
}); });
@ -665,9 +678,10 @@ describe('host bindings', () => {
consts: 0, consts: 0,
vars: 0, vars: 0,
hostVars: 1, hostVars: 1,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: HostBindingWithContentChildren, elIndex: number) => {
elementProperty( if (rf & RenderFlags.Update) {
elIndex, 'id', bind(load<HostBindingWithContentChildren>(dirIndex).foos.length)); elementProperty(elIndex, 'id', bind(ctx.foos.length));
}
}, },
contentQueries: (dirIndex) => { registerContentQuery(query(null, ['foo']), dirIndex); }, contentQueries: (dirIndex) => { registerContentQuery(query(null, ['foo']), dirIndex); },
contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => { contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
@ -721,8 +735,10 @@ describe('host bindings', () => {
consts: 0, consts: 0,
vars: 0, vars: 0,
hostVars: 1, hostVars: 1,
hostBindings: (dirIndex: number, elIndex: number) => { hostBindings: (rf: RenderFlags, ctx: HostBindingWithContentHooks, elIndex: number) => {
elementProperty(elIndex, 'id', bind(load<HostBindingWithContentHooks>(dirIndex).myValue)); if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(ctx.myValue));
}
}, },
template: (rf: RenderFlags, cmp: HostBindingWithContentHooks) => {} template: (rf: RenderFlags, cmp: HostBindingWithContentHooks) => {}
}); });

16
packages/core/test/render3/integration_spec.ts
View File

@ -447,10 +447,11 @@ describe('render3 integration test', () => {
}, },
factory: () => cmptInstance = new TodoComponentHostBinding, factory: () => cmptInstance = new TodoComponentHostBinding,
hostVars: 1, hostVars: 1,
hostBindings: function(directiveIndex: number, elementIndex: number): void { hostBindings: function(rf: RenderFlags, ctx: any, elementIndex: number): void {
// host bindings if (rf & RenderFlags.Update) {
elementProperty( // host bindings
elementIndex, 'title', bind(load<TodoComponentHostBinding>(directiveIndex).title)); elementProperty(elementIndex, 'title', bind(ctx.title));
}
} }
}); });
} }
@ -1379,8 +1380,11 @@ describe('render3 integration test', () => {
return hostBindingDir = new HostBindingDir(); return hostBindingDir = new HostBindingDir();
}, },
hostVars: 1, hostVars: 1,
hostBindings: function HostBindingDir_HostBindings(dirIndex: number, elIndex: number) { hostBindings: function HostBindingDir_HostBindings(
elementAttribute(elIndex, 'aria-label', bind(load<HostBindingDir>(dirIndex).label)); rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Update) {
elementAttribute(elIndex, 'aria-label', bind(ctx.label));
}
} }
}); });
} }

2
packages/core/test/render3/ivy/jit_spec.ts
View File

@ -229,7 +229,7 @@ ivyEnabled && describe('render3 jit', () => {
const cmpDef = (Cmp as any).ngComponentDef as ComponentDef<Cmp>; const cmpDef = (Cmp as any).ngComponentDef as ComponentDef<Cmp>;
expect(cmpDef.hostBindings).toBeDefined(); expect(cmpDef.hostBindings).toBeDefined();
expect(cmpDef.hostBindings !.length).toBe(2); expect(cmpDef.hostBindings !.length).toBe(3);
}); });
it('should compile @Pipes without errors', () => { it('should compile @Pipes without errors', () => {

49
packages/core/test/render3/listeners_spec.ts
View File

@ -449,7 +449,42 @@ describe('event listeners', () => {
expect(comp.counters).toEqual([1, 1]); expect(comp.counters).toEqual([1, 1]);
}); });
it('should support host listeners', () => { it('should support host listeners on components', () => {
let events: string[] = [];
class MyComp {
/* @HostListener('click') */
onClick() { events.push('click!'); }
static ngComponentDef = defineComponent({
type: MyComp,
selectors: [['comp']],
consts: 1,
vars: 0,
template: function CompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'Some text');
}
},
factory: () => { return new MyComp(); },
hostBindings: function HostListenerDir_HostBindings(
rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Create) {
listener('click', function() { return ctx.onClick(); });
}
}
});
}
const fixture = new ComponentFixture(MyComp);
const host = fixture.hostElement;
host.click();
expect(events).toEqual(['click!']);
host.click();
expect(events).toEqual(['click!', 'click!']);
});
it('should support host listeners on directives', () => {
let events: string[] = []; let events: string[] = [];
class HostListenerDir { class HostListenerDir {
@ -459,11 +494,13 @@ describe('event listeners', () => {
static ngDirectiveDef = defineDirective({ static ngDirectiveDef = defineDirective({
type: HostListenerDir, type: HostListenerDir,
selectors: [['', 'hostListenerDir', '']], selectors: [['', 'hostListenerDir', '']],
factory: function HostListenerDir_Factory() { factory: function HostListenerDir_Factory() { return new HostListenerDir(); },
const $dir$ = new HostListenerDir(); hostBindings: function HostListenerDir_HostBindings(
listener('click', function() { return $dir$.onClick(); }); rf: RenderFlags, ctx: any, elIndex: number) {
return $dir$; if (rf & RenderFlags.Create) {
}, listener('click', function() { return ctx.onClick(); });
}
}
}); });
} }

7
packages/core/test/render3/view_container_ref_spec.ts
View File

@ -1828,9 +1828,10 @@ describe('ViewContainerRef', () => {
template: (rf: RenderFlags, cmp: HostBindingCmpt) => {}, template: (rf: RenderFlags, cmp: HostBindingCmpt) => {},
hostVars: 1, hostVars: 1,
attributes: ['id', 'attribute'], attributes: ['id', 'attribute'],
hostBindings: function(dirIndex, elIndex) { hostBindings: function(rf: RenderFlags, ctx: HostBindingCmpt, elIndex: number) {
const cmptInstance = load<HostBindingCmpt>(dirIndex); if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'title', bind(cmptInstance.title)); elementProperty(elIndex, 'title', bind(ctx.title));
}
}, },
}); });
} }