refactor(ivy): move hostVars/hostAttrs from instruction to DirectiveDef (#34683)
This change moves information from instructions to declarative position: - `ɵɵallocHostVars(vars)` => `DirectiveDef.hostVars` - `ɵɵelementHostAttrs(attrs)` => `DirectiveDef.hostAttrs` When merging directives it is necessary to know about `hostVars` and `hostAttrs`. Before this change the information was stored in the `hostBindings` function. This was problematic, because in order to get to the information the `hostBindings` would have to be executed. In order for `hostBindings` to be executed the directives would have to be instantiated. This means that the directive instantiation would happen before we had knowledge about the `hostAttrs` and as a result the directive could observe in the constructor that not all of the `hostAttrs` have been applied. This further complicates the runtime as we have to apply `hostAttrs` in parts over many invocations. `ɵɵallocHostVars` was unnecessarily complicated because it would have to update the `LView` (and Blueprint) while existing directives are already executing. By moving it out of `hostBindings` function we can access it statically and we can create correct `LView` (and Blueprint) in a single pass. This change only changes how the instructions are generated, but does not change the runtime much. (We cheat by emulating the old behavior by calling `ɵɵallocHostVars` and `ɵɵelementHostAttrs`) Subsequent change will refactor the runtime to take advantage of the static information. PR Close #34683
This commit is contained in:
Miško Hevery
@ -216,7 +216,6 @@ runInEachFileSystem(() => {
|
||||
|
||||
const jsContents = fs.readFile(_(`/node_modules/test-package/index.js`));
|
||||
expect(jsContents).not.toMatch(/\bconst \w+\s*=/);
|
||||
expect(jsContents).toMatch(/\bvar _c0 =/);
|
||||
});
|
||||
|
||||
it('should add ɵfac but not duplicate ɵprov properties on injectables', () => {
|
||||
|
||||
@ -431,10 +431,8 @@ describe('compiler compliance', () => {
|
||||
const $_c1$ = function (a0, a1) { return { value: a0, params: a1 }; };
|
||||
const $_c2$ = function (a0, a1) { return { collapsedWidth: a0, expandedWidth: a1 }; };
|
||||
…
|
||||
hostVars: 14,
|
||||
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(14);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵupdateSyntheticHostBinding("@expansionHeight",
|
||||
$r3$.ɵɵpureFunction2(5, $_c1$, ctx.getExpandedState(),
|
||||
@ -3499,10 +3497,8 @@ describe('compiler compliance', () => {
|
||||
// ...
|
||||
BaseClass.ɵdir = $r3$.ɵɵdefineDirective({
|
||||
type: BaseClass,
|
||||
hostVars: 1,
|
||||
hostBindings: function BaseClass_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(1);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵattribute("tabindex", ctx.tabindex);
|
||||
}
|
||||
|
||||
@ -668,13 +668,11 @@ describe('compiler compliance: bindings', () => {
|
||||
};
|
||||
|
||||
const HostBindingDirDeclaration = `
|
||||
HostBindingDir.ɵdir = $r3$.ɵɵdefineDirective({
|
||||
type: HostBindingDir,
|
||||
selectors: [["", "hostBindingDir", ""]],
|
||||
HostBindingDir.ɵdir = $r3$.ɵɵdefineDirective({
|
||||
type: HostBindingDir,
|
||||
selectors: [["", "hostBindingDir", ""]],
|
||||
hostVars: 1,
|
||||
hostBindings: function HostBindingDir_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(1);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵhostProperty("id", ctx.dirId);
|
||||
}
|
||||
@ -717,10 +715,8 @@ describe('compiler compliance: bindings', () => {
|
||||
HostBindingComp.ɵcmp = $r3$.ɵɵdefineComponent({
|
||||
type: HostBindingComp,
|
||||
selectors: [["host-binding-comp"]],
|
||||
hostVars: 3,
|
||||
hostBindings: function HostBindingComp_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(3);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵhostProperty("id", $r3$.ɵɵpureFunction1(1, $ff$, ctx.id));
|
||||
}
|
||||
@ -764,10 +760,8 @@ describe('compiler compliance: bindings', () => {
|
||||
HostAttributeDir.ɵdir = $r3$.ɵɵdefineDirective({
|
||||
type: HostAttributeDir,
|
||||
selectors: [["", "hostAttributeDir", ""]],
|
||||
hostVars: 1,
|
||||
hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(1);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵattribute("required", ctx.required);
|
||||
}
|
||||
@ -803,16 +797,10 @@ describe('compiler compliance: bindings', () => {
|
||||
};
|
||||
|
||||
const HostAttributeDirDeclaration = `
|
||||
const $c0$ = ["aria-label", "label"];
|
||||
…
|
||||
HostAttributeDir.ɵdir = $r3$.ɵɵdefineDirective({
|
||||
type: HostAttributeDir,
|
||||
selectors: [["", "hostAttributeDir", ""]],
|
||||
hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵelementHostAttrs($c0$);
|
||||
}
|
||||
}
|
||||
hostAttrs: ["aria-label", "label"]
|
||||
});
|
||||
`;
|
||||
|
||||
@ -859,32 +847,20 @@ describe('compiler compliance: bindings', () => {
|
||||
};
|
||||
|
||||
const CompAndDirDeclaration = `
|
||||
const $c0$ = ["title", "hello there from component", ${AttributeMarker.Styles}, "opacity", "1"];
|
||||
const $c1$ = ["title", "hello there from directive", ${AttributeMarker.Classes}, "one", "two", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"];
|
||||
…
|
||||
HostAttributeComp.ɵcmp = $r3$.ɵɵdefineComponent({
|
||||
type: HostAttributeComp,
|
||||
selectors: [["my-host-attribute-component"]],
|
||||
hostBindings: function HostAttributeComp_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵelementHostAttrs($c0$);
|
||||
…
|
||||
}
|
||||
…
|
||||
}
|
||||
hostAttrs: ["title", "hello there from component", ${AttributeMarker.Styles}, "opacity", "1"],
|
||||
…
|
||||
HostAttributeDir.ɵdir = $r3$.ɵɵdefineDirective({
|
||||
type: HostAttributeDir,
|
||||
selectors: [["", "hostAttributeDir", ""]],
|
||||
hostAttrs: ["title", "hello there from directive", ${AttributeMarker.Classes}, "one", "two", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"],
|
||||
hostVars: 2,
|
||||
hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(2);
|
||||
$r3$.ɵɵelementHostAttrs($c1$);
|
||||
…
|
||||
}
|
||||
…
|
||||
}
|
||||
`;
|
||||
`;
|
||||
|
||||
const result = compile(files, angularFiles);
|
||||
const source = result.source;
|
||||
|
||||
@ -333,9 +333,9 @@ describe('compiler compliance: styling', () => {
|
||||
const template = `
|
||||
MyAnimDir.ɵdir = $r3$.ɵɵdefineDirective({
|
||||
…
|
||||
hostVars: 1,
|
||||
hostBindings: function MyAnimDir_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(1);
|
||||
$r3$.ɵɵcomponentHostSyntheticListener("@myAnim.start", function MyAnimDir_animation_myAnim_start_HostBindingHandler($event) { return ctx.onStart(); })("@myAnim.done", function MyAnimDir_animation_myAnim_done_HostBindingHandler($event) { return ctx.onDone(); });
|
||||
} if (rf & 2) {
|
||||
$r3$.ɵɵupdateSyntheticHostBinding("@myAnim", ctx.myAnimState);
|
||||
@ -1011,11 +1011,9 @@ describe('compiler compliance: styling', () => {
|
||||
};
|
||||
|
||||
const template = `
|
||||
hostAttrs: [${AttributeMarker.Classes}, "foo", "baz", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"],
|
||||
hostVars: 6,
|
||||
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(6);
|
||||
$r3$.ɵɵelementHostAttrs($e0_attrs$);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵstyleSanitizer($r3$.ɵɵdefaultStyleSanitizer);
|
||||
$r3$.ɵɵstyleMap(ctx.myStyle);
|
||||
@ -1070,10 +1068,8 @@ describe('compiler compliance: styling', () => {
|
||||
};
|
||||
|
||||
const template = `
|
||||
hostVars: 8,
|
||||
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(8);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵstyleSanitizer($r3$.ɵɵdefaultStyleSanitizer);
|
||||
$r3$.ɵɵstyleMap(ctx.myStyle);
|
||||
@ -1143,10 +1139,8 @@ describe('compiler compliance: styling', () => {
|
||||
`;
|
||||
|
||||
const hostBindings = `
|
||||
hostVars: 6,
|
||||
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(6);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵstyleSanitizer($r3$.ɵɵdefaultStyleSanitizer);
|
||||
$r3$.ɵɵstyleMap(ctx.myStyleExp);
|
||||
@ -1209,29 +1203,23 @@ describe('compiler compliance: styling', () => {
|
||||
// NOTE: IF YOU ARE CHANGING THIS COMPILER SPEC, YOU MAY NEED TO CHANGE THE DIRECTIVE
|
||||
// DEF THAT'S HARD-CODED IN `ng_class.ts`.
|
||||
const template = `
|
||||
function ClassDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(2);
|
||||
}
|
||||
hostVars: 2,
|
||||
hostBindings: function ClassDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵclassMap(ctx.myClassMap);
|
||||
}
|
||||
}
|
||||
…
|
||||
function WidthDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(2);
|
||||
}
|
||||
hostVars: 2,
|
||||
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵstyleProp("width", ctx.myWidth);
|
||||
$r3$.ɵɵclassProp("foo", ctx.myFooClass);
|
||||
}
|
||||
}
|
||||
…
|
||||
function HeightDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(2);
|
||||
}
|
||||
hostVars: 2,
|
||||
hostBindings: function HeightDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵstyleProp("height", ctx.myHeight);
|
||||
$r3$.ɵɵclassProp("bar", ctx.myBarClass);
|
||||
@ -1840,13 +1828,9 @@ describe('compiler compliance: styling', () => {
|
||||
};
|
||||
|
||||
const template = `
|
||||
const $_c0$ = ["title", "foo title", ${AttributeMarker.Classes}, "foo", "baz", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"];
|
||||
…
|
||||
hostAttrs: ["title", "foo title", ${AttributeMarker.Classes}, "foo", "baz", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"],
|
||||
hostVars: 6,
|
||||
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(6);
|
||||
$r3$.ɵɵelementHostAttrs($_c0$);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵhostProperty("id", ctx.id)("title", ctx.title);
|
||||
$r3$.ɵɵstyleSanitizer($r3$.ɵɵdefaultStyleSanitizer);
|
||||
@ -1885,10 +1869,8 @@ describe('compiler compliance: styling', () => {
|
||||
};
|
||||
|
||||
const template = `
|
||||
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵallocHostVars(4);
|
||||
}
|
||||
hostVars: 4,
|
||||
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵhostProperty("id", ctx.id)("title", ctx.title);
|
||||
$r3$.ɵɵstyleProp("width", ctx.myWidth);
|
||||
@ -2051,10 +2033,8 @@ describe('compiler compliance: styling', () => {
|
||||
};
|
||||
|
||||
const template = `
|
||||
hostVars: 9,
|
||||
hostBindings: function MyDir_HostBindings(rf, ctx, elIndex) {
|
||||
…
|
||||
$r3$.ɵɵallocHostVars(9);
|
||||
…
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵhostProperty("title", ctx.title);
|
||||
$r3$.ɵɵupdateSyntheticHostBinding("@anim",
|
||||
|
||||
@ -2340,9 +2340,9 @@ runInEachFileSystem(os => {
|
||||
env.driveMain();
|
||||
const jsContents = env.getContents('test.js');
|
||||
const hostBindingsFn = `
|
||||
hostVars: 3,
|
||||
hostBindings: function FooCmp_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
i0.ɵɵallocHostVars(3);
|
||||
i0.ɵɵlistener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); })("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.ɵɵresolveBody)("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
|
||||
}
|
||||
if (rf & 2) {
|
||||
@ -2376,7 +2376,7 @@ runInEachFileSystem(os => {
|
||||
`);
|
||||
env.driveMain();
|
||||
const jsContents = env.getContents('test.js');
|
||||
expect(jsContents).toContain('i0.ɵɵelementHostAttrs(["test", test])');
|
||||
expect(jsContents).toContain('hostAttrs: ["test", test]');
|
||||
});
|
||||
|
||||
it('should accept enum values as host bindings', () => {
|
||||
@ -4262,10 +4262,8 @@ runInEachFileSystem(os => {
|
||||
env.driveMain();
|
||||
const jsContents = env.getContents('test.js');
|
||||
const hostBindingsFn = `
|
||||
hostVars: 6,
|
||||
hostBindings: function UnsafeAttrsDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
i0.ɵɵallocHostVars(6);
|
||||
}
|
||||
if (rf & 2) {
|
||||
i0.ɵɵattribute("href", ctx.attrHref, i0.ɵɵsanitizeUrlOrResourceUrl)("src", ctx.attrSrc, i0.ɵɵsanitizeUrlOrResourceUrl)("action", ctx.attrAction, i0.ɵɵsanitizeUrl)("profile", ctx.attrProfile, i0.ɵɵsanitizeResourceUrl)("innerHTML", ctx.attrInnerHTML, i0.ɵɵsanitizeHtml)("title", ctx.attrSafeTitle);
|
||||
}
|
||||
@ -4312,10 +4310,8 @@ runInEachFileSystem(os => {
|
||||
env.driveMain();
|
||||
const jsContents = env.getContents('test.js');
|
||||
const hostBindingsFn = `
|
||||
hostVars: 6,
|
||||
hostBindings: function UnsafePropsDirective_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
i0.ɵɵallocHostVars(6);
|
||||
}
|
||||
if (rf & 2) {
|
||||
i0.ɵɵhostProperty("href", ctx.propHref, i0.ɵɵsanitizeUrlOrResourceUrl)("src", ctx.propSrc, i0.ɵɵsanitizeUrlOrResourceUrl)("action", ctx.propAction, i0.ɵɵsanitizeUrl)("profile", ctx.propProfile, i0.ɵɵsanitizeResourceUrl)("innerHTML", ctx.propInnerHTML, i0.ɵɵsanitizeHtml)("title", ctx.propSafeTitle);
|
||||
}
|
||||
@ -4347,10 +4343,8 @@ runInEachFileSystem(os => {
|
||||
env.driveMain();
|
||||
const jsContents = env.getContents('test.js');
|
||||
const hostBindingsFn = `
|
||||
hostVars: 6,
|
||||
hostBindings: function FooCmp_HostBindings(rf, ctx, elIndex) {
|
||||
if (rf & 1) {
|
||||
i0.ɵɵallocHostVars(6);
|
||||
}
|
||||
if (rf & 2) {
|
||||
i0.ɵɵhostProperty("src", ctx.srcProp)("href", ctx.hrefProp)("title", ctx.titleProp);
|
||||
i0.ɵɵattribute("src", ctx.srcAttr)("href", ctx.hrefAttr)("title", ctx.titleAttr);
|
||||
|
||||
Reference in New Issue
Block a user