From f5b8dd90448293b695907f7a47a04d86f7a16ca5 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Mon, 23 Sep 2019 20:08:51 +0200 Subject: [PATCH] perf(ivy): move attributes array into component def (#32798) Currently Ivy stores the element attributes into an array above the component def and passes it into the relevant instructions, however the problem is that upon minification the array will get a unique name which won't compress very well. These changes move the attributes array into the component def and pass in the index into the instructions instead. Before: ``` const _c0 = ['foo', 'bar']; SomeComp.ngComponentDef = defineComponent({ template: function() { element(0, 'div', _c0); } }); ``` After: ``` SomeComp.ngComponentDef = defineComponent({ consts: [['foo', 'bar']], template: function() { element(0, 'div', 0); } }); ``` A couple of cases that this PR doesn't handle: * Template references are still in a separate array. * i18n attributes are still in a separate array. PR Close #32798 --- .../src/tree/render3_function/index.ts | 2 +- .../ngcc/test/rendering/renderer_spec.ts | 2 +- .../compliance/r3_compiler_compliance_spec.ts | 216 +++++++++------- .../r3_view_compiler_binding_spec.ts | 28 +- .../r3_view_compiler_directives_spec.ts | 231 ++++++++--------- .../compliance/r3_view_compiler_i18n_spec.ts | 243 +++++++++--------- .../r3_view_compiler_listener_spec.ts | 24 +- .../r3_view_compiler_providers_spec.ts | 2 +- .../r3_view_compiler_styling_spec.ts | 38 +-- .../r3_view_compiler_template_spec.ts | 62 ++--- .../test/ngtsc/template_mapping_spec.ts | 26 +- .../compiler/src/render3/view/compiler.ts | 10 +- .../compiler/src/render3/view/template.ts | 32 ++- packages/core/src/render3/VIEW_DATA.md | 16 +- packages/core/src/render3/component.ts | 2 +- packages/core/src/render3/component_ref.ts | 2 +- packages/core/src/render3/definition.ts | 9 +- .../src/render3/features/providers_feature.ts | 2 +- .../src/render3/instructions/container.ts | 17 +- .../core/src/render3/instructions/element.ts | 25 +- .../render3/instructions/element_container.ts | 21 +- .../src/render3/instructions/embedded_view.ts | 15 +- .../src/render3/instructions/lview_debug.ts | 3 +- .../core/src/render3/instructions/shared.ts | 17 +- .../core/src/render3/interfaces/definition.ts | 7 +- packages/core/src/render3/interfaces/view.ts | 10 +- packages/core/src/render3/pure_function.ts | 2 +- .../bundling/todo/bundle.golden_symbols.json | 60 ----- packages/core/test/render3/basic_perf.ts | 2 +- .../test/render3/change_detection_spec.ts | 12 +- .../core/test/render3/component_ref_spec.ts | 6 +- packages/core/test/render3/component_spec.ts | 31 +-- .../core/test/render3/control_flow_spec.ts | 8 +- packages/core/test/render3/di_spec.ts | 28 +- .../core/test/render3/instructions_spec.ts | 38 +-- .../core/test/render3/integration_spec.ts | 72 +++--- packages/core/test/render3/lifecycle_spec.ts | 4 +- packages/core/test/render3/listeners_spec.ts | 26 +- packages/core/test/render3/outputs_spec.ts | 9 +- .../render3/perf/element_text_create/index.ts | 4 +- .../core/test/render3/perf/listeners/index.ts | 26 +- packages/core/test/render3/perf/setup.ts | 12 +- .../perf/style_and_class_bindings/index.ts | 28 +- packages/core/test/render3/providers_spec.ts | 30 +-- .../core/test/render3/pure_function_spec.ts | 2 +- packages/core/test/render3/query_spec.ts | 228 +++++++++------- packages/core/test/render3/render_util.ts | 45 ++-- .../test/render3/renderer_factory_spec.ts | 6 +- .../test/render3/view_container_ref_spec.ts | 37 +-- packages/core/test/render3/view_utils_spec.ts | 2 +- packages/core/test/test_bed_spec.ts | 2 +- tools/public_api_guard/core/core.d.ts | 15 +- 52 files changed, 912 insertions(+), 885 deletions(-) diff --git a/modules/benchmarks/src/tree/render3_function/index.ts b/modules/benchmarks/src/tree/render3_function/index.ts index 77296b8512a96..999dcddf8eb9b 100644 --- a/modules/benchmarks/src/tree/render3_function/index.ts +++ b/modules/benchmarks/src/tree/render3_function/index.ts @@ -24,7 +24,7 @@ export class TreeFunction { static ngComponentDef = ɵɵdefineComponent({ type: TreeFunction, selectors: [['tree']], - consts: 5, + decls: 5, vars: 1, template: function(rf: ɵRenderFlags, ctx: TreeFunction) { // bit of a hack diff --git a/packages/compiler-cli/ngcc/test/rendering/renderer_spec.ts b/packages/compiler-cli/ngcc/test/rendering/renderer_spec.ts index 5bfac8a122e05..41514bcdc0175 100644 --- a/packages/compiler-cli/ngcc/test/rendering/renderer_spec.ts +++ b/packages/compiler-cli/ngcc/test/rendering/renderer_spec.ts @@ -189,7 +189,7 @@ runInEachFileSystem(() => { const addDefinitionsSpy = testFormatter.addDefinitions as jasmine.Spy; expect(addDefinitionsSpy.calls.first().args[2]) .toEqual(`A.ngFactoryDef = function A_Factory(t) { return new (t || A)(); }; -A.ngComponentDef = ɵngcc0.ɵɵdefineComponent({ type: A, selectors: [["a"]], consts: 1, vars: 1, template: function A_Template(rf, ctx) { if (rf & 1) { +A.ngComponentDef = ɵngcc0.ɵɵdefineComponent({ type: A, selectors: [["a"]], decls: 1, vars: 1, template: function A_Template(rf, ctx) { if (rf & 1) { ɵngcc0.ɵɵtext(0); } if (rf & 2) { ɵngcc0.ɵɵtextInterpolate(ctx.person.name); diff --git a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts index 0e14d8c6fd587..b7f5ee4468a5b 100644 --- a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts @@ -48,15 +48,14 @@ describe('compiler compliance', () => { // The template should look like this (where IDENT is a wild card for an identifier): const template = ` - const $c1$ = ["title", "Hello", ${AttributeMarker.Classes}, "my-app"]; - const $c2$ = ["cx", "20", "cy", "30", "r", "50"]; … + consts: [["title", "Hello", ${AttributeMarker.Classes}, "my-app"], ["cx", "20", "cy", "30", "r", "50"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $c1$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵnamespaceSVG(); $r3$.ɵɵelementStart(1, "svg"); - $r3$.ɵɵelement(2, "circle", $c2$); + $r3$.ɵɵelement(2, "circle", 1); $r3$.ɵɵelementEnd(); $r3$.ɵɵnamespaceHTML(); $r3$.ɵɵelementStart(3, "p"); @@ -98,11 +97,11 @@ describe('compiler compliance', () => { // The template should look like this (where IDENT is a wild card for an identifier): const template = ` - const $c1$ = ["title", "Hello", ${AttributeMarker.Classes}, "my-app"]; … + consts: [["title", "Hello", ${AttributeMarker.Classes}, "my-app"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $c1$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵnamespaceMathML(); $r3$.ɵɵelementStart(1, "math"); $r3$.ɵɵelement(2, "infinity"); @@ -146,11 +145,11 @@ describe('compiler compliance', () => { // The template should look like this (where IDENT is a wild card for an identifier): const template = ` - const $c1$ = ["title", "Hello", ${AttributeMarker.Classes}, "my-app"]; … + consts: [["title", "Hello", ${AttributeMarker.Classes}, "my-app"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $c1$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵtext(1, "Hello "); $r3$.ɵɵelementStart(2, "b"); $r3$.ɵɵtext(3, "World"); @@ -170,7 +169,7 @@ describe('compiler compliance', () => { // TODO(https://github.com/angular/angular/issues/24426): We need to support the parser actually // building the proper attributes based off of xmlns attributes. - xit('should support namspaced attributes', () => { + xit('should support namespaced attributes', () => { const files = { app: { 'spec.ts': ` @@ -194,11 +193,11 @@ describe('compiler compliance', () => { // The template should look like this (where IDENT is a wild card for an identifier): const template = ` - const $e0_attrs$ = ["class", "my-app", 0, "http://someuri/foo", "foo:bar", "baz", "title", "Hello", 0, "http://someuri/foo", "foo:qux", "quacks"]; … + consts: [["class", "my-app", 0, "http://someuri/foo", "foo:bar", "baz", "title", "Hello", 0, "http://someuri/foo", "foo:qux", "quacks"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $e0_attrs$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵtext(1, "Hello "); $r3$.ɵɵelementStart(2, "b"); $r3$.ɵɵtext(3, "World"); @@ -308,11 +307,11 @@ describe('compiler compliance', () => { const factory = 'MyComponent.ngFactoryDef = function MyComponent_Factory(t) { return new (t || MyComponent)(); }'; const template = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "id"]; … + consts: [[${AttributeMarker.Bindings}, "id"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $e0_attrs$); + $r3$.ɵɵelement(0, "div", 0); } if (rf & 2) { $r3$.ɵɵproperty("id", ctx.id); @@ -365,7 +364,7 @@ describe('compiler compliance', () => { const template = ` template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $e0_attrs$); + $r3$.ɵɵelement(0, "div", 0); $r3$.ɵɵpipe(1,"pipe"); } if (rf & 2) { @@ -479,7 +478,7 @@ describe('compiler compliance', () => { 'MyComponent.ngFactoryDef = function MyComponent_Factory(t) { return new (t || MyComponent)(); }'; const template = ` MyComponent.ngComponentDef = i0.ɵɵdefineComponent({type:MyComponent,selectors:[["my-component"]], - consts: 1, + decls: 1, vars: 2, template: function MyComponent_Template(rf,ctx){ if (rf & 1) { @@ -501,6 +500,45 @@ describe('compiler compliance', () => { expectEmit(result.source, template, 'Incorrect template'); }); + it('should de-duplicate attribute arrays', () => { + const files = { + app: { + 'spec.ts': ` + import {Component, NgModule} from '@angular/core'; + + @Component({ + selector: 'my-component', + template: \` +
+ + \` + }) + export class MyComponent { + } + + @NgModule({declarations: [MyComponent]}) + export class MyModule {} + ` + } + }; + + const template = ` + … + consts: [["title", "hi"]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "div", 0); + $r3$.ɵɵelement(1, "span", 0); + } + … + } + `; + + + const result = compile(files, angularFiles); + expectEmit(result.source, template, 'Incorrect template'); + }); + }); describe('components & directives', () => { @@ -530,7 +568,7 @@ describe('compiler compliance', () => { ChildComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: ChildComponent, selectors: [["child"]], - consts: 1, + decls: 1, vars: 0, template: function ChildComponent_Template(rf, ctx) { if (rf & 1) { @@ -556,16 +594,16 @@ describe('compiler compliance', () => { // MyComponent definition should be: const MyComponentDefinition = ` - const $c1$ = ["some-directive", ""]; … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 2, + decls: 2, vars: 0, + consts: [["some-directive", ""]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "child", $c1$); + $r3$.ɵɵelement(0, "child", 0); $r3$.ɵɵtext(1, "!"); } }, @@ -658,7 +696,7 @@ describe('compiler compliance', () => { EmptyOutletComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: EmptyOutletComponent, selectors: [["ng-component"]], - consts: 1, + decls: 1, vars: 0, template: function EmptyOutletComponent_Template(rf, ctx) { if (rf & 1) { @@ -707,7 +745,7 @@ describe('compiler compliance', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 0, + decls: 0, vars: 0, template: function MyComponent_Template(rf, ctx) {}, encapsulation: 2 @@ -761,7 +799,6 @@ describe('compiler compliance', () => { const MyComponentDefinition = ` const $c1$ = ["foo", ""]; - const $c2$ = [${AttributeMarker.Template}, "if"]; function MyComponent_li_2_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "li"); @@ -779,12 +816,13 @@ describe('compiler compliance', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 3, + decls: 3, vars: 0, + consts: [[${AttributeMarker.Template}, "if"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "ul", null, $c1$); - $r3$.ɵɵtemplate(2, MyComponent_li_2_Template, 2, 2, "li", $c2$); + $r3$.ɵɵtemplate(2, MyComponent_li_2_Template, 2, 2, "li", 0); $r3$.ɵɵelementEnd(); } }, @@ -840,17 +878,17 @@ describe('compiler compliance', () => { }; const MyAppDeclaration = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "names"]; const $e0_ff$ = function ($v$) { return ["Nancy", $v$]; }; … MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], - consts: 1, + decls: 1, vars: 3, + consts: [[${AttributeMarker.Bindings}, "names"]], template: function MyApp_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "my-comp", $e0_attrs$); + $r3$.ɵɵelement(0, "my-comp", 0); } if (rf & 2) { $r3$.ɵɵproperty("names", $r3$.ɵɵpureFunction1(1, $e0_ff$, ctx.customName)); @@ -919,7 +957,6 @@ describe('compiler compliance', () => { }; const MyAppDefinition = ` - const $e0_attr$ = [${AttributeMarker.Bindings}, "names"]; const $e0_ff$ = function ($v0$, $v1$, $v2$, $v3$, $v4$, $v5$, $v6$, $v7$, $v8$) { return ["start-", $v0$, $v1$, $v2$, $v3$, $v4$, "-middle-", $v5$, $v6$, $v7$, $v8$, "-end"]; } @@ -927,11 +964,12 @@ describe('compiler compliance', () => { MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], - consts: 1, + decls: 1, vars: 11, + consts: [[${AttributeMarker.Bindings}, "names"]], template: function MyApp_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "my-comp", $e0_attr$); + $r3$.ɵɵelement(0, "my-comp", 0); } if (rf & 2) { $r3$.ɵɵproperty("names", @@ -983,17 +1021,17 @@ describe('compiler compliance', () => { }; const MyAppDefinition = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "config"]; const $e0_ff$ = function ($v$) { return {"duration": 500, animation: $v$}; }; … MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], - consts: 1, + decls: 1, vars: 3, + consts: [[${AttributeMarker.Bindings}, "config"]], template: function MyApp_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "object-comp", $e0_attrs$); + $r3$.ɵɵelement(0, "object-comp", 0); } if (rf & 2) { $r3$.ɵɵproperty("config", $r3$.ɵɵpureFunction1(1, $e0_ff$, ctx.name)); @@ -1047,7 +1085,6 @@ describe('compiler compliance', () => { }; const MyAppDefinition = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "config"]; const $c0$ = {opacity: 0, duration: 0}; const $e0_ff$ = function ($v$) { return {opacity: 1, duration: $v$}; }; const $e0_ff_1$ = function ($v$) { return [$c0$, $v$]; }; @@ -1056,11 +1093,12 @@ describe('compiler compliance', () => { MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], - consts: 1, + decls: 1, vars: 8, + consts: [[${AttributeMarker.Bindings}, "config"]], template: function MyApp_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "nested-comp", $e0_attrs$); + $r3$.ɵɵelement(0, "nested-comp", 0); } if (rf & 2) { $r3$.ɵɵproperty( @@ -1117,7 +1155,7 @@ describe('compiler compliance', () => { type: SimpleComponent, selectors: [["simple"]], ngContentSelectors: $c0$, - consts: 2, + decls: 2, vars: 0, template: function SimpleComponent_Template(rf, ctx) { if (rf & 1) { @@ -1131,23 +1169,22 @@ describe('compiler compliance', () => { });`; const ComplexComponentDefinition = ` - const $c3$ = ["id","first"]; - const $c4$ = ["id","second"]; const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]]; … ComplexComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: ComplexComponent, selectors: [["complex"]], - ngContentSelectors: _c4, - consts: 4, + ngContentSelectors: $c2$, + decls: 4, vars: 0, + consts: [["id","first"], ["id","second"]], template: function ComplexComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵprojectionDef($c1$); - $r3$.ɵɵelementStart(0, "div", $c3$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵprojection(1); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(2, "div", $c4$); + $r3$.ɵɵelementStart(2, "div", 1); $r3$.ɵɵprojection(3, 1); $r3$.ɵɵelementEnd(); } @@ -1194,7 +1231,7 @@ describe('compiler compliance', () => { type: Cmp, selectors: [["ng-component"]], ngContentSelectors: $c1$, - consts: 3, + decls: 3, vars: 0, template: function Cmp_Template(rf, ctx) { if (rf & 1) { @@ -1239,18 +1276,14 @@ describe('compiler compliance', () => { } }; const output = ` - const $_c0$ = ["id", "second", ${AttributeMarker.Template}, "ngIf"]; - const $_c1$ = ["id", "third", ${AttributeMarker.Template}, "ngIf"]; - const $_c2$ = ["id", "second"]; function Cmp_div_0_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c2$); + $r3$.ɵɵelementStart(0, "div", 2); $r3$.ɵɵprojection(1); $r3$.ɵɵelementEnd(); } } - const $_c3$ = ["id", "third"]; function Cmp_div_1_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c3$); + $r3$.ɵɵelementStart(0, "div", 3); $r3$.ɵɵtext(1, " No ng-content, no instructions generated. "); $r3$.ɵɵelementEnd(); } @@ -1263,11 +1296,12 @@ describe('compiler compliance', () => { } const $_c4$ = [[["span", "title", "tofirst"]], "*"]; … + consts: [["id", "second", ${AttributeMarker.Template}, "ngIf"], ["id", "third", ${AttributeMarker.Template}, "ngIf"], ["id", "second"], ["id", "third"]], template: function Cmp_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵprojectionDef($_c4$); - $r3$.ɵɵtemplate(0, Cmp_div_0_Template, 2, 0, "div", $_c0$); - $r3$.ɵɵtemplate(1, Cmp_div_1_Template, 2, 0, "div", $_c1$); + $r3$.ɵɵtemplate(0, Cmp_div_0_Template, 2, 0, "div", 0); + $r3$.ɵɵtemplate(1, Cmp_div_1_Template, 2, 0, "div", 1); $r3$.ɵɵtemplate(2, Cmp_ng_template_2_Template, 2, 0, "ng-template"); } if (rf & 2) { @@ -1376,17 +1410,17 @@ describe('compiler compliance', () => { const SimpleComponentDefinition = ` const $_c0$ = [[["", "title", ""]]]; const $_c1$ = ["[title]"]; - const $_c2$ = ["ngProjectAs", "[title]", 5, ["", "title", ""]]; … MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], - consts: 2, + decls: 2, vars: 0, + consts: [["ngProjectAs", "[title]", 5, ["", "title", ""]]], template: function MyApp_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "simple"); - $r3$.ɵɵelement(1, "h1", $_c2$); + $r3$.ɵɵelement(1, "h1", 0); $r3$.ɵɵelementEnd(); } }, @@ -1428,17 +1462,17 @@ describe('compiler compliance', () => { const SimpleComponentDefinition = ` const $_c0$ = [[["", "title", ""]]]; const $_c1$ = ["[title]"]; - const $_c2$ = ["ngProjectAs", "[title],[header]", 5, ["", "title", ""]]; … MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], - consts: 2, + decls: 2, vars: 0, + consts: [["ngProjectAs", "[title],[header]", 5, ["", "title", ""]]], template: function MyApp_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "simple"); - $r3$.ɵɵelement(1, "h1", $_c2$); + $r3$.ɵɵelement(1, "h1", 0); $r3$.ɵɵelementEnd(); } }, @@ -1491,7 +1525,6 @@ describe('compiler compliance', () => { }; const ViewQueryComponentDefinition = ` - const $e0_attrs$ = ["someDir",""]; … ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: ViewQueryComponent, @@ -1507,11 +1540,12 @@ describe('compiler compliance', () => { $r3$.ɵɵqueryRefresh(($tmp$ = $r3$.ɵɵloadQuery())) && (ctx.someDirs = $tmp$); } }, - consts: 1, + decls: 1, vars: 0, + consts: [["someDir",""]], template: function ViewQueryComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $e0_attrs$); + $r3$.ɵɵelement(0, "div", 0); } }, directives: function () { return [SomeDirective]; }, @@ -1601,7 +1635,6 @@ describe('compiler compliance', () => { const ViewQueryComponentDefinition = ` const $refs$ = ["foo"]; - const $e0_attrs$ = ["someDir",""]; … ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: ViewQueryComponent, @@ -1617,11 +1650,12 @@ describe('compiler compliance', () => { $r3$.ɵɵqueryRefresh(($tmp$ = $r3$.ɵɵloadQuery())) && (ctx.foo = $tmp$.first); } }, - consts: 1, + decls: 1, vars: 0, + consts: [["someDir",""]], template: function ViewQueryComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $e0_attrs$); + $r3$.ɵɵelement(0, "div", 0); } }, directives: function () { return [SomeDirective]; }, @@ -1744,7 +1778,7 @@ describe('compiler compliance', () => { } }, ngContentSelectors: _c0, - consts: 2, + decls: 2, vars: 0, template: function ContentQueryComponent_Template(rf, ctx) { if (rf & 1) { @@ -1863,7 +1897,7 @@ describe('compiler compliance', () => { } }, ngContentSelectors: $_c1$, - consts: 2, + decls: 2, vars: 0, template: function ContentQueryComponent_Template(rf, ctx) { if (rf & 1) { @@ -2014,7 +2048,7 @@ describe('compiler compliance', () => { MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], - consts: 7, + decls: 7, vars: 20, template: function MyApp_Template(rf, ctx) { if (rf & 1) { @@ -2081,7 +2115,7 @@ describe('compiler compliance', () => { MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], - consts: 6, + decls: 6, vars: 27, template: function MyApp_Template(rf, ctx) { if (rf & 1) { @@ -2204,7 +2238,7 @@ describe('compiler compliance', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 3, + decls: 3, vars: 1, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2261,7 +2295,6 @@ describe('compiler compliance', () => { const MyComponentDefinition = ` const $c1$ = ["foo", ""]; - const $c2$ = [${AttributeMarker.Template}, "if"]; const $c3$ = ["baz", ""]; const $c4$ = ["bar", ""]; function MyComponent_div_3_span_2_Template(rf, ctx) { @@ -2284,7 +2317,7 @@ describe('compiler compliance', () => { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵtext(1); - $r3$.ɵɵtemplate(2, MyComponent_div_3_span_2_Template, 2, 3, "span", $c2$); + $r3$.ɵɵtemplate(2, MyComponent_div_3_span_2_Template, 2, 3, "span", 0); $r3$.ɵɵelement(3, "span", null, $c4$); $r3$.ɵɵelementEnd(); } @@ -2300,13 +2333,14 @@ describe('compiler compliance', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 6, + decls: 6, vars: 1, + consts: [[${AttributeMarker.Template}, "if"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelement(0, "div", null, $c1$); $r3$.ɵɵtext(2); - $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 5, 2, "div", $c2$); + $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 5, 2, "div", 0); $r3$.ɵɵelement(4, "div", null, $c3$); } if (rf & 2) { @@ -2349,9 +2383,7 @@ describe('compiler compliance', () => { }; const template = ` - const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"]; const $c1$ = ["foo", ""]; - const $c2$ = [${AttributeMarker.Template}, "ngIf"]; function MyComponent_div_0_span_3_Template(rf, ctx) { if (rf & 1) { @@ -2371,7 +2403,7 @@ describe('compiler compliance', () => { if (rf & 1) { $i0$.ɵɵelementStart(0, "div"); $i0$.ɵɵelement(1, "div", null, $c1$); - $i0$.ɵɵtemplate(3, MyComponent_div_0_span_3_Template, 2, 2, "span", $c2$); + $i0$.ɵɵtemplate(3, MyComponent_div_0_span_3_Template, 2, 2, "span", 1); $i0$.ɵɵelementEnd(); } if (rf & 2) { @@ -2382,9 +2414,10 @@ describe('compiler compliance', () => { } // ... + consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Template}, "ngIf"]], template:function MyComponent_Template(rf, ctx){ if (rf & 1) { - $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 1, "div", $c0$); + $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 1, "div", 0); } if (rf & 2) { $i0$.ɵɵproperty("ngForOf", ctx.items); @@ -2447,7 +2480,7 @@ describe('compiler compliance', () => { selectors: [["lifecycle-comp"]], inputs: {nameMin: ["name", "nameMin"]}, features: [$r3$.ɵɵNgOnChangesFeature()], - consts: 0, + decls: 0, vars: 0, template: function LifecycleComp_Template(rf, ctx) {}, encapsulation: 2 @@ -2457,12 +2490,13 @@ describe('compiler compliance', () => { SimpleLayout.ngComponentDef = $r3$.ɵɵdefineComponent({ type: SimpleLayout, selectors: [["simple-layout"]], - consts: 2, + decls: 2, vars: 2, + consts: [[3, "name"]], template: function SimpleLayout_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "lifecycle-comp", $e0_attrs$); - $r3$.ɵɵelement(1, "lifecycle-comp", $e1_attrs$); + $r3$.ɵɵelement(0, "lifecycle-comp", 0); + $r3$.ɵɵelement(1, "lifecycle-comp", 0); } if (rf & 2) { $r3$.ɵɵproperty("name", ctx.name1); @@ -2576,7 +2610,6 @@ describe('compiler compliance', () => { };`; const MyComponentDefinition = ` - const $t1_attrs$ = [${AttributeMarker.Template}, "for", "forOf"]; function MyComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵnamespaceSVG(); @@ -2589,13 +2622,14 @@ describe('compiler compliance', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 2, + decls: 2, vars: 1, + consts: [[${AttributeMarker.Template}, "for", "forOf"]], template: function MyComponent_Template(rf, ctx){ if (rf & 1) { $r3$.ɵɵnamespaceSVG(); $r3$.ɵɵelementStart(0,"svg"); - $r3$.ɵɵtemplate(1, MyComponent__svg_g_1_Template, 2, 0, "g", $t1_attrs$); + $r3$.ɵɵtemplate(1, MyComponent__svg_g_1_Template, 2, 0, "g", 0); $r3$.ɵɵelementEnd(); } if (rf & 2) { @@ -2658,7 +2692,6 @@ describe('compiler compliance', () => { `; const MyComponentDefinition = ` - const $t1_attrs$ = [${AttributeMarker.Template}, "for", "forOf"]; function MyComponent_li_1_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "li"); @@ -2675,12 +2708,13 @@ describe('compiler compliance', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 2, + decls: 2, vars: 1, + consts: [[${AttributeMarker.Template}, "for", "forOf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "ul"); - $r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 2, 1, "li", $t1_attrs$); + $r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 2, 1, "li", 0); $r3$.ɵɵelementEnd(); } if (rf & 2) { @@ -2740,7 +2774,6 @@ describe('compiler compliance', () => { }; const MyComponentDefinition = ` - const $t4_attrs$ = [${AttributeMarker.Template}, "for", "forOf"]; function MyComponent_li_1_li_4_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "li"); @@ -2762,7 +2795,7 @@ describe('compiler compliance', () => { $r3$.ɵɵtext(2); $r3$.ɵɵelementEnd(); $r3$.ɵɵelementStart(3, "ul"); - $r3$.ɵɵtemplate(4, MyComponent_li_1_li_4_Template, 2, 2, "li", $t4_attrs$); + $r3$.ɵɵtemplate(4, MyComponent_li_1_li_4_Template, 2, 2, "li", 0); $r3$.ɵɵelementEnd(); $r3$.ɵɵelementEnd(); } @@ -2779,12 +2812,13 @@ describe('compiler compliance', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 2, + decls: 2, vars: 1, + consts: [[${AttributeMarker.Template}, "for", "forOf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "ul"); - $r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 5, 2, "li", $c1$); + $r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 5, 2, "li", 0); $r3$.ɵɵelementEnd(); } if (rf & 2) { diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts index a18c85129c53b..0d573974ed5c0 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts @@ -74,11 +74,11 @@ describe('compiler compliance: bindings', () => { }; const template = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "title"]; … + consts: [[${AttributeMarker.Bindings}, "title"]], template:function MyComponent_Template(rf, $ctx$){ if (rf & 1) { - $i0$.ɵɵelement(0, "a", $e0_attrs$); + $i0$.ɵɵelement(0, "a", 0); } if (rf & 2) { $i0$.ɵɵproperty("title", $ctx$.title); @@ -108,11 +108,11 @@ describe('compiler compliance: bindings', () => { }; const template = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "title"]; … + consts: [[${AttributeMarker.Bindings}, "title"]], template:function MyComponent_Template(rf, $ctx$){ if (rf & 1) { - $i0$.ɵɵelement(0, "a", $e0_attrs$); + $i0$.ɵɵelement(0, "a", 0); } if (rf & 2) { $i0$.ɵɵpropertyInterpolate1("title", "Hello ", $ctx$.name, ""); @@ -162,13 +162,13 @@ describe('compiler compliance: bindings', () => { }; const template = ` - const $c0$ = [${AttributeMarker.Bindings}, "for"]; + consts: [[${AttributeMarker.Bindings}, "for"]] // ... function MyComponent_Template(rf, ctx) { if (rf & 1) { - $i0$.ɵɵelement(0, "label", _c0); + $i0$.ɵɵelement(0, "label", 0); } if (rf & 2) { $i0$.ɵɵproperty("for", ctx.forValue); @@ -640,7 +640,7 @@ describe('compiler compliance: bindings', () => { }; const template = ` - const $e0_attrs$ = ["target", "_blank", "aria-label", "link", ${AttributeMarker.Bindings}, "title", "id", "customEvent"]; + consts: [["target", "_blank", "aria-label", "link", ${AttributeMarker.Bindings}, "title", "id", "customEvent"]], … `; const result = compile(files, angularFiles); @@ -725,7 +725,7 @@ describe('compiler compliance: bindings', () => { $r3$.ɵɵhostProperty("id", $r3$.ɵɵpureFunction1(1, $ff$, ctx.id)); } }, - consts: 0, + decls: 0, vars: 0, template: function HostBindingComp_Template(rf, ctx) {}, encapsulation: 2 @@ -1251,12 +1251,12 @@ describe('compiler compliance: bindings', () => { `); const template = ` - const $_c0$ = ["id", "my-id"]; const $_c1$ = ["myRef", ""]; … + consts: [["id", "my-id"]], template:function MyComponent_Template(rf, $ctx$){ if (rf & 1) { - $i0$.ɵɵelementStart(0, "b", $_c0$, $_c1$); + $i0$.ɵɵelementStart(0, "b", 0, $_c1$); $i0$.ɵɵdisableBindings(); $i0$.ɵɵelementStart(2, "i"); $i0$.ɵɵtext(3, "Hello {{ name }}!"); @@ -1284,13 +1284,13 @@ describe('compiler compliance: bindings', () => { `); const template = ` - const $_c0$ = ["value", "one", "#myInput", ""]; … + consts: [["value", "one", "#myInput", ""]], template:function MyComponent_Template(rf, $ctx$){ if (rf & 1) { $i0$.ɵɵelementStart(0, "div"); $i0$.ɵɵdisableBindings(); - $i0$.ɵɵelement(1, "input", $_c0$); + $i0$.ɵɵelement(1, "input", 0); $i0$.ɵɵtext(2, " {{ myInput.value }} "); $i0$.ɵɵenableBindings(); $i0$.ɵɵelementEnd(); @@ -1308,13 +1308,13 @@ describe('compiler compliance: bindings', () => { `); const template = ` - const $_c0$ = ["[id]", "my-id", "(click)", "onclick"]; … + consts: [["[id]", "my-id", "(click)", "onclick"]], template:function MyComponent_Template(rf, $ctx$){ if (rf & 1) { $i0$.ɵɵelementStart(0, "div"); $i0$.ɵɵdisableBindings(); - $i0$.ɵɵelement(1, "div", $_c0$); + $i0$.ɵɵelement(1, "div", 0); $i0$.ɵɵenableBindings(); $i0$.ɵɵelementEnd(); } diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts index cf7b82b27d71e..21f68fafa333e 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts @@ -41,7 +41,7 @@ describe('compiler compliance: directives', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 1, + decls: 1, vars: 0, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -91,7 +91,7 @@ describe('compiler compliance: directives', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 1, + decls: 1, vars: 0, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -118,43 +118,42 @@ describe('compiler compliance: directives', () => { const files = { app: { 'spec.ts': ` - import {Component, Directive, Input, NgModule} from '@angular/core'; + import {Component, Directive, Input, NgModule} from '@angular/core'; - @Directive({selector: '[someDirective]'}) - export class SomeDirective { - @Input() someDirective; - } + @Directive({selector: '[someDirective]'}) + export class SomeDirective { + @Input() someDirective; + } - @Component({selector: 'my-component', template: '
'}) - export class MyComponent {} + @Component({selector: 'my-component', template: '
'}) + export class MyComponent {} - @NgModule({declarations: [SomeDirective, MyComponent]}) - export class MyModule{} - ` + @NgModule({declarations: [SomeDirective, MyComponent]}) + export class MyModule{} + ` } }; // MyComponent definition should be: const MyComponentDefinition = ` - … - const _c0 = [${AttributeMarker.Bindings}, "someDirective"]; - … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ - … - template: function MyComponent_Template(rf, ctx) { - if (rf & 1) { - $r3$.ɵɵelement(0, "div", _c0); - } - if (rf & 2) { - $r3$.ɵɵproperty("someDirective", true); - } - }, - … - directives: [SomeDirective], - encapsulation: 2 - }); - `; + … + MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + … + consts: [[${AttributeMarker.Bindings}, "someDirective"]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "div", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("someDirective", true); + } + }, + … + directives: [SomeDirective], + encapsulation: 2 + }); + `; const result = compile(files, angularFiles); const source = result.source; @@ -191,7 +190,6 @@ describe('compiler compliance: directives', () => { const MyComponentDefinition = ` … - const $_c0$ = ["directiveA", ""]; function MyComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵtext(0, "Some content"); @@ -200,9 +198,10 @@ describe('compiler compliance: directives', () => { … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ … + consts: [["directiveA", ""]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 1, 0, "ng-template", $_c0$); + $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 1, 0, "ng-template", 0); } }, … @@ -244,11 +243,9 @@ describe('compiler compliance: directives', () => { const MyComponentDefinition = ` … - const $_c0$ = ["directiveA", "", ${AttributeMarker.Template}, "ngIf"]; - const $_c1$ = ["directiveA", ""]; function MyComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementContainerStart(0, $_c1$); + $r3$.ɵɵelementContainerStart(0, 1); $r3$.ɵɵtext(1, "Some content"); $r3$.ɵɵelementContainerEnd(); } @@ -256,9 +253,10 @@ describe('compiler compliance: directives', () => { … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ … + consts: [["directiveA", "", ${AttributeMarker.Template}, "ngIf"], ["directiveA", ""]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_ng_container_0_Template, 2, 0, "ng-container", $_c0$); + $r3$.ɵɵtemplate(0, MyComponent_ng_container_0_Template, 2, 0, "ng-container", 0); } if (rf & 2) { $r3$.ɵɵproperty("ngIf", ctx.showing); @@ -279,43 +277,42 @@ describe('compiler compliance: directives', () => { const files = { app: { 'spec.ts': ` - import {Component, Directive, Input, NgModule} from '@angular/core'; + import {Component, Directive, Input, NgModule} from '@angular/core'; - @Directive({selector: '[someDirective]'}) - export class SomeDirective { - @Input() someDirective; - } + @Directive({selector: '[someDirective]'}) + export class SomeDirective { + @Input() someDirective; + } - @Component({selector: 'my-component', template: ''}) - export class MyComponent {} + @Component({selector: 'my-component', template: ''}) + export class MyComponent {} - @NgModule({declarations: [SomeDirective, MyComponent]}) - export class MyModule{} - ` + @NgModule({declarations: [SomeDirective, MyComponent]}) + export class MyModule{} + ` } }; // MyComponent definition should be: const MyComponentDefinition = ` - … - const $c0_a0$ = [${AttributeMarker.Bindings}, "someDirective"]; - … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ - … - template: function MyComponent_Template(rf, ctx) { - if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", $c0_a0$); - } - if (rf & 2) { - $r3$.ɵɵproperty("someDirective", true); - } - }, - … - directives: [SomeDirective], - encapsulation: 2 - }); - `; + … + MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + … + consts: [[${AttributeMarker.Bindings}, "someDirective"]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("someDirective", true); + } + }, + … + directives: [SomeDirective], + encapsulation: 2 + }); + `; const result = compile(files, angularFiles); const source = result.source; @@ -328,39 +325,38 @@ describe('compiler compliance: directives', () => { const files = { app: { 'spec.ts': ` - import {Component, Directive, Input, NgModule} from '@angular/core'; + import {Component, Directive, Input, NgModule} from '@angular/core'; - @Directive({selector: '[someDirective]'}) - export class SomeDirective { - @Input() someDirective; - } + @Directive({selector: '[someDirective]'}) + export class SomeDirective { + @Input() someDirective; + } - @Component({selector: 'my-component', template: '
'}) - export class MyComponent {} + @Component({selector: 'my-component', template: '
'}) + export class MyComponent {} - @NgModule({declarations: [SomeDirective, MyComponent]}) - export class MyModule{} - ` + @NgModule({declarations: [SomeDirective, MyComponent]}) + export class MyModule{} + ` } }; // MyComponent definition should be: const MyComponentDefinition = ` - … - const $c0_a0$ = [${AttributeMarker.Template}, "someDirective"]; - … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ - … - template: function MyComponent_Template(rf, ctx) { - if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", $c0_a0$); - } - }, - … - directives: [SomeDirective], - encapsulation: 2 - }); - `; + … + MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + … + consts: [[${AttributeMarker.Template}, "someDirective"]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", 0); + } + }, + … + directives: [SomeDirective], + encapsulation: 2 + }); + `; const result = compile(files, angularFiles); const source = result.source; @@ -374,44 +370,43 @@ describe('compiler compliance: directives', () => { const files = { app: { 'spec.ts': ` - import {Component, Directive, Output, EventEmitter, NgModule} from '@angular/core'; + import {Component, Directive, Output, EventEmitter, NgModule} from '@angular/core'; - @Directive({selector: '[someDirective]'}) - export class SomeDirective { - @Output() someDirective = new EventEmitter(); - } + @Directive({selector: '[someDirective]'}) + export class SomeDirective { + @Output() someDirective = new EventEmitter(); + } - @Component({selector: 'my-component', template: '
'}) - export class MyComponent { - noop() {} - } + @Component({selector: 'my-component', template: '
'}) + export class MyComponent { + noop() {} + } - @NgModule({declarations: [SomeDirective, MyComponent]}) - export class MyModule{} - ` + @NgModule({declarations: [SomeDirective, MyComponent]}) + export class MyModule{} + ` } }; // MyComponent definition should be: const MyComponentDefinition = ` - … - const $c0_a0$ = [${AttributeMarker.Bindings}, "someDirective"]; - … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ - … - template: function MyComponent_Template(rf, ctx) { - if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $c0_a0$); - $r3$.ɵɵlistener("someDirective", function MyComponent_Template_div_someDirective_0_listener($event) { return ctx.noop(); }); - $r3$.ɵɵelementEnd(); - } - }, - … - directives: [SomeDirective], - encapsulation: 2 - }); - `; + … + MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + … + consts: [[${AttributeMarker.Bindings}, "someDirective"]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "div", 0); + $r3$.ɵɵlistener("someDirective", function MyComponent_Template_div_someDirective_0_listener($event) { return ctx.noop(); }); + $r3$.ɵɵelementEnd(); + } + }, + … + directives: [SomeDirective], + encapsulation: 2 + }); + `; const result = compile(files, angularFiles); const source = result.source; diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts index 58b393736142e..40bef90382c7f 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts @@ -196,7 +196,6 @@ describe('i18n support in the template compiler', () => { else { $I18N_0$ = $localize \`:meaningA|descA@@idA:Content A\`; } - const $_c2$ = [${AttributeMarker.I18n}, "title"]; var $I18N_3$; if (ngI18nClosureMode) { /** @@ -269,32 +268,33 @@ describe('i18n support in the template compiler', () => { } const $_c25$ = ["title", $I18N_23$]; … + consts: [[${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵi18n(1, $I18N_0$); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(2, "div", $_c2$); + $r3$.ɵɵelementStart(2, "div", 0); $r3$.ɵɵi18nAttributes(3, $_c5$); $r3$.ɵɵtext(4, "Content B"); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(5, "div", $_c6$); + $r3$.ɵɵelementStart(5, "div", 0); $r3$.ɵɵi18nAttributes(6, $_c9$); $r3$.ɵɵtext(7, "Content C"); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(8, "div", $_c10$); + $r3$.ɵɵelementStart(8, "div", 0); $r3$.ɵɵi18nAttributes(9, $_c13$); $r3$.ɵɵtext(10, "Content D"); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(11, "div", $_c14$); + $r3$.ɵɵelementStart(11, "div", 0); $r3$.ɵɵi18nAttributes(12, $_c17$); $r3$.ɵɵtext(13, "Content E"); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(14, "div", $_c18$); + $r3$.ɵɵelementStart(14, "div", 0); $r3$.ɵɵi18nAttributes(15, $_c21$); $r3$.ɵɵtext(16, "Content F"); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(17, "div", $_c22$); + $r3$.ɵɵelementStart(17, "div", 0); $r3$.ɵɵi18nAttributes(18, $_c25$); $r3$.ɵɵtext(19, "Content G"); $r3$.ɵɵelementEnd(); @@ -311,11 +311,11 @@ describe('i18n support in the template compiler', () => { `; const output = ` - const $_c0$ = ["id", "static", "title", ""]; … + consts: [["id", "static", "title", ""]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $_c0$); + $r3$.ɵɵelement(0, "div", 0); } } `; @@ -332,11 +332,11 @@ describe('i18n support in the template compiler', () => { `; const output = ` - const $_c0$ = [3, "title"]; … + consts: [[3, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $_c0$); + $r3$.ɵɵelement(0, "div", 0); } if (rf & 2) { $r3$.ɵɵproperty("title", ctx.title); @@ -354,7 +354,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = ["id", "static", ${AttributeMarker.I18n}, "title"]; var $I18N_1$; if (ngI18nClosureMode) { /** @@ -369,9 +368,10 @@ describe('i18n support in the template compiler', () => { } const $_c1$ = ["title", $I18N_1$]; … + consts: [["id", "static", ${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c0$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵi18nAttributes(1, $_c1$); $r3$.ɵɵelementEnd(); } @@ -395,7 +395,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = ["id", "dynamic-1", ${AttributeMarker.I18n}, "aria-roledescription", "title", "aria-label"]; var $I18N_1$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_5526535577705876535$$APP_SPEC_TS_1$ = goog.getMsg("static text"); @@ -439,7 +438,6 @@ describe('i18n support in the template compiler', () => { "title", $I18N_2$, "aria-label", $I18N_3$ ]; - const $_c2$ = ["id", "dynamic-2", ${AttributeMarker.I18n}, "title", "aria-roledescription"]; var $I18N_6$; if (ngI18nClosureMode) { /** @@ -473,15 +471,16 @@ describe('i18n support in the template compiler', () => { "aria-roledescription", $I18N_7$ ]; … - consts: 5, + decls: 5, vars: 8, + consts: [["id", "dynamic-1", ${AttributeMarker.I18n}, "aria-roledescription", "title", "aria-label"], ["id", "dynamic-2", ${AttributeMarker.I18n}, "title", "aria-roledescription"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c0$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵpipe(1, "uppercase"); $r3$.ɵɵi18nAttributes(2, $_c1$); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(3, "div", $_c2$); + $r3$.ɵɵelementStart(3, "div", 1); $r3$.ɵɵi18nAttributes(4, $_c3$); $r3$.ɵɵelementEnd(); } @@ -503,7 +502,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.I18n}, "title"]; var $I18N_1$; if (ngI18nClosureMode) { /** @@ -521,9 +519,10 @@ describe('i18n support in the template compiler', () => { } const $_c3$ = ["title", $I18N_1$]; … + consts: [[${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c0$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵpipe(1, "uppercase"); $r3$.ɵɵi18nAttributes(2, $_c3$); $r3$.ɵɵelementEnd(); @@ -545,8 +544,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"]; - const $_c1$ = [${AttributeMarker.I18n}, "title"]; var $I18N_1$; if (ngI18nClosureMode) { /** @@ -566,7 +563,7 @@ describe('i18n support in the template compiler', () => { function MyComponent_div_0_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); - $r3$.ɵɵelementStart(1, "div", $_c1$); + $r3$.ɵɵelementStart(1, "div", 1); $r3$.ɵɵpipe(2, "uppercase"); $r3$.ɵɵi18nAttributes(3, $_c2$); $r3$.ɵɵelementEnd(); @@ -579,11 +576,12 @@ describe('i18n support in the template compiler', () => { } } … - consts: 1, + decls: 1, vars: 1, + consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 3, "div", $_c0$); + $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 3, "div", 0); } if (rf & 2) { $r3$.ɵɵproperty("ngForOf", ctx.items); @@ -600,7 +598,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.I18n}, "title"]; var $I18N_1$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_3462388422673575127$$APP_SPEC_TS_2$ = goog.getMsg("{$interpolation} title", { @@ -614,11 +611,12 @@ describe('i18n support in the template compiler', () => { } const $_c3$ = ["title", $I18N_1$]; … - consts: 2, + decls: 2, vars: 1, + consts: [[${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c0$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵi18nAttributes(1, $_c3$); $r3$.ɵɵelementEnd(); } @@ -648,10 +646,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [ - "id", "dynamic-1", - ${AttributeMarker.I18n}, "aria-roledescription", "title", "aria-label" - ]; var $I18N_1$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_5526535577705876535$$APP_SPEC_TS_1$ = goog.getMsg("static text"); @@ -695,7 +689,6 @@ describe('i18n support in the template compiler', () => { "title", $I18N_2$, "aria-label", $I18N_3$ ]; - const $_c2$ = ["id", "dynamic-2", ${AttributeMarker.I18n}, "title", "aria-roledescription"]; var $I18N_6$; if (ngI18nClosureMode) { /** @@ -729,15 +722,19 @@ describe('i18n support in the template compiler', () => { "aria-roledescription", $I18N_7$ ]; … - consts: 5, + decls: 5, vars: 8, + consts: [[ + "id", "dynamic-1", + ${AttributeMarker.I18n}, "aria-roledescription", "title", "aria-label" + ], ["id", "dynamic-2", ${AttributeMarker.I18n}, "title", "aria-roledescription"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c0$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵpipe(1, "uppercase"); $r3$.ɵɵi18nAttributes(2, $_c1$); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(3, "div", $_c2$); + $r3$.ɵɵelementStart(3, "div", 1); $r3$.ɵɵi18nAttributes(4, $_c3$); $r3$.ɵɵelementEnd(); } @@ -761,8 +758,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"]; - const $_c1$ = [${AttributeMarker.I18n}, "title"]; var $I18N_2$; if (ngI18nClosureMode) { /** @@ -782,7 +777,7 @@ describe('i18n support in the template compiler', () => { function MyComponent_div_0_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); - $r3$.ɵɵelementStart(1, "div", $_c1$); + $r3$.ɵɵelementStart(1, "div", 1); $r3$.ɵɵpipe(2, "uppercase"); $r3$.ɵɵi18nAttributes(3, $_c4$); $r3$.ɵɵelementEnd(); @@ -795,11 +790,12 @@ describe('i18n support in the template compiler', () => { } } … - consts: 1, + decls: 1, vars: 1, + consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 3, "div", $_c0$); + $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 3, "div", 0); } if (rf & 2) { $r3$.ɵɵproperty("ngForOf", ctx.items); @@ -816,7 +812,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.I18n}, "title"]; var $I18N_0$; if (ngI18nClosureMode) { /** @@ -839,9 +834,10 @@ describe('i18n support in the template compiler', () => { $I18N_2$ = $localize \`Some content\`; } … + consts: [[${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c0$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵi18nAttributes(1, $_c1$); $r3$.ɵɵi18n(2, $I18N_2$); $r3$.ɵɵelementEnd(); @@ -1033,7 +1029,7 @@ describe('i18n support in the template compiler', () => { String.raw `{"\uFFFD1\uFFFD"}:PH_B: \`; } … - consts: 2, + decls: 2, vars: 2, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -1170,7 +1166,7 @@ describe('i18n support in the template compiler', () => { String.raw `{"\uFFFD0\uFFFD"}:INTERPOLATION:\`; } … - consts: 7, + decls: 7, vars: 5, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -1258,7 +1254,7 @@ describe('i18n support in the template compiler', () => { } $I18N_1$ = $r3$.ɵɵi18nPostprocess($I18N_1$); … - consts: 9, + decls: 9, vars: 5, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -1307,7 +1303,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c1$ = [${AttributeMarker.I18n}, "title"]; var $I18N_2$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_4782264005467235841$$APP_SPEC_TS_3$ = goog.getMsg("Span title {$interpolation} and {$interpolation_1}", { @@ -1365,13 +1360,14 @@ describe('i18n support in the template compiler', () => { String.raw `{"\uFFFD/#7\uFFFD"}:CLOSE_TAG_SPAN:\`; } … - consts: 9, + decls: 9, vars: 7, + consts: [[${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵi18nStart(1, $I18N_0$); - $r3$.ɵɵelementStart(2, "span", $_c1$); + $r3$.ɵɵelementStart(2, "span", 0); $r3$.ɵɵi18nAttributes(3, $_c4$); $r3$.ɵɵelementEnd(); $r3$.ɵɵi18nEnd(); @@ -1379,7 +1375,7 @@ describe('i18n support in the template compiler', () => { $r3$.ɵɵelementStart(4, "div"); $r3$.ɵɵi18nStart(5, $I18N_6$); $r3$.ɵɵpipe(6, "uppercase"); - $r3$.ɵɵelementStart(7, "span", $_c1$); + $r3$.ɵɵelementStart(7, "span", 0); $r3$.ɵɵi18nAttributes(8, $_c9$); $r3$.ɵɵelementEnd(); $r3$.ɵɵi18nEnd(); @@ -1417,7 +1413,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.Template}, "ngIf"]; var $I18N_1$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_7679414751795588050$$APP_SPEC_TS__1$ = goog.getMsg(" Some other content {$interpolation} {$startTagDiv} More nested levels with bindings {$interpolation_1} {$closeTagDiv}", { @@ -1454,13 +1449,14 @@ describe('i18n support in the template compiler', () => { } } … - consts: 3, + decls: 3, vars: 1, + consts: [[${AttributeMarker.Template}, "ngIf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵtext(1, " Some content "); - $r3$.ɵɵtemplate(2, MyComponent_div_2_Template, 5, 4, "div", $_c0$); + $r3$.ɵɵtemplate(2, MyComponent_div_2_Template, 5, 4, "div", 0); $r3$.ɵɵelementEnd(); } if (rf & 2) { @@ -1481,15 +1477,11 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = ["src", "logo.png"]; - const $_c1$ = ["src", "logo.png", ${AttributeMarker.Template}, "ngIf"]; - const $_c2$ = ["src", "logo.png", ${AttributeMarker.Bindings}, "title", ${AttributeMarker.Template}, "ngIf"]; function MyComponent_img_1_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "img", $_c0$); + $r3$.ɵɵelement(0, "img", 0); } } - const $_c3$ = ["src", "logo.png", ${AttributeMarker.I18n}, "title"]; var $I18N_2$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_2367729185105559721$$APP_SPEC_TS__2$ = goog.getMsg("App logo #{$interpolation}", { @@ -1504,7 +1496,7 @@ describe('i18n support in the template compiler', () => { const $_c4$ = ["title", $I18N_2$]; function MyComponent_img_2_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "img", $_c3$); + $r3$.ɵɵelementStart(0, "img", 3); $r3$.ɵɵi18nAttributes(1, $_c4$); $r3$.ɵɵelementEnd(); } @@ -1515,13 +1507,14 @@ describe('i18n support in the template compiler', () => { } } … - consts: 3, + decls: 3, vars: 2, + consts: [["src", "logo.png"], ["src", "logo.png", ${AttributeMarker.Template}, "ngIf"], ["src", "logo.png", ${AttributeMarker.Bindings}, "title", ${AttributeMarker.Template}, "ngIf"], ["src", "logo.png", ${AttributeMarker.I18n}, "title"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "img", $_c0$); - $r3$.ɵɵtemplate(1, MyComponent_img_1_Template, 1, 0, "img", $_c1$); - $r3$.ɵɵtemplate(2, MyComponent_img_2_Template, 2, 1, "img", $_c2$); + $r3$.ɵɵelement(0, "img", 0); + $r3$.ɵɵtemplate(1, MyComponent_img_1_Template, 1, 0, "img", 1); + $r3$.ɵɵtemplate(2, MyComponent_img_2_Template, 2, 1, "img", 2); } if (rf & 2) { $r3$.ɵɵadvance(1); @@ -1561,7 +1554,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.Template}, "ngIf"]; function MyComponent_div_2_div_4_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵi18nStart(0, $I18N_0$, 2); @@ -1582,7 +1574,7 @@ describe('i18n support in the template compiler', () => { $r3$.ɵɵelementStart(1, "div"); $r3$.ɵɵelementStart(2, "div"); $r3$.ɵɵpipe(3, "uppercase"); - $r3$.ɵɵtemplate(4, MyComponent_div_2_div_4_Template, 3, 2, "div", $_c1$); + $r3$.ɵɵtemplate(4, MyComponent_div_2_div_4_Template, 3, 2, "div", 0); $r3$.ɵɵelementEnd(); $r3$.ɵɵelementEnd(); $r3$.ɵɵi18nEnd(); @@ -1656,14 +1648,15 @@ describe('i18n support in the template compiler', () => { } } … - consts: 4, + decls: 4, vars: 2, + consts: [[${AttributeMarker.Template}, "ngIf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵi18nStart(1, $I18N_0$); - $r3$.ɵɵtemplate(2, MyComponent_div_2_Template, 5, 5, "div", $_c1$); - $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 4, 4, "div", $_c1$); + $r3$.ɵɵtemplate(2, MyComponent_div_2_Template, 5, 5, "div", 0); + $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 4, 4, "div", 0); $r3$.ɵɵi18nEnd(); $r3$.ɵɵelementEnd(); } @@ -1685,7 +1678,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.Template}, "ngIf"]; var $I18N_1$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_119975189388320493$$APP_SPEC_TS__1$ = goog.getMsg("Some other content {$startTagSpan}{$interpolation}{$closeTagSpan}", { @@ -1717,11 +1709,12 @@ describe('i18n support in the template compiler', () => { } } … - consts: 1, + decls: 1, vars: 1, + consts: [[${AttributeMarker.Template}, "ngIf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 3, 1, "div", $_c0$); + $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 3, 1, "div", 0); } if (rf & 2) { $r3$.ɵɵproperty("ngIf", ctx.visible); @@ -1738,7 +1731,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.Bindings}, "click"]; var $I18N_1$; if (ngI18nClosureMode) { const $MSG_APP_SPEC_TS_2$ = goog.getMsg("Hello"); @@ -1748,9 +1740,10 @@ describe('i18n support in the template compiler', () => { $I18N_1$ = $localize \`Hello\`; } … + consts: [[${AttributeMarker.Bindings}, "click"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c0$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener($event) { return ctx.onClick(); }); $r3$.ɵɵi18n(1, $I18N_1$); $r3$.ɵɵelementEnd(); @@ -1808,7 +1801,7 @@ describe('i18n support in the template compiler', () => { "VAR_SELECT": "\uFFFD0\uFFFD" }); … - consts: 2, + decls: 2, vars: 1, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -1875,7 +1868,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [${AttributeMarker.Classes}, "myClass"]; var $I18N_1$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_5295701706185791735$$APP_SPEC_TS_1$ = goog.getMsg("Text #1"); @@ -1884,7 +1876,6 @@ describe('i18n support in the template compiler', () => { else { $I18N_1$ = $localize \`Text #1\`; } - const $_c2$ = [${AttributeMarker.Styles}, "padding", "10px"]; var $I18N_3$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_4722270221386399294$$APP_SPEC_TS_3$ = goog.getMsg("Text #2"); @@ -1894,14 +1885,15 @@ describe('i18n support in the template compiler', () => { $I18N_3$ = $localize \`Text #2\`; } … - consts: 4, + decls: 4, vars: 0, + consts: [[${AttributeMarker.Classes}, "myClass"], [${AttributeMarker.Styles}, "padding", "10px"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "span", $_c0$); + $r3$.ɵɵelementStart(0, "span", 0); $r3$.ɵɵi18n(1, $I18N_1$); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(2, "span", $_c1$); + $r3$.ɵɵelementStart(2, "span", 1); $r3$.ɵɵi18n(3, $I18N_3$); $r3$.ɵɵelementEnd(); } @@ -1931,7 +1923,7 @@ describe('i18n support in the template compiler', () => { String.raw `{"\uFFFD0\uFFFD"}:INTERPOLATION:\`; } … - consts: 3, + decls: 3, vars: 3, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -1978,7 +1970,7 @@ describe('i18n support in the template compiler', () => { } } … - consts: 1, + decls: 1, vars: 0, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2032,7 +2024,7 @@ describe('i18n support in the template compiler', () => { } } … - consts: 5, + decls: 5, vars: 3, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2094,7 +2086,7 @@ describe('i18n support in the template compiler', () => { } } … - consts: 3, + decls: 3, vars: 1, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2192,7 +2184,7 @@ describe('i18n support in the template compiler', () => { } } … - consts: 3, + decls: 3, vars: 0, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2248,7 +2240,7 @@ describe('i18n support in the template compiler', () => { } } … - consts: 3, + decls: 3, vars: 1, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2278,7 +2270,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = ["src", "logo.png", "title", "Logo"]; var $I18N_0$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_4891196282781544695$$APP_SPEC_TS_0$ = goog.getMsg("{$tagImg} is my logo #1 ", { @@ -2304,16 +2295,17 @@ describe('i18n support in the template compiler', () => { function MyComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵi18nStart(0, $I18N_2$); - $r3$.ɵɵelement(1, "img", $_c0$); + $r3$.ɵɵelement(1, "img", 0); $r3$.ɵɵi18nEnd(); } } … + consts: [["src", "logo.png", "title", "Logo"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementContainerStart(0); $r3$.ɵɵi18nStart(1, $I18N_0$); - $r3$.ɵɵelement(2, "img", $_c0$); + $r3$.ɵɵelement(2, "img", 0); $r3$.ɵɵi18nEnd(); $r3$.ɵɵelementContainerEnd(); $r3$.ɵɵtemplate(3, MyComponent_ng_template_3_Template, 2, 0, "ng-template"); @@ -2406,7 +2398,7 @@ describe('i18n support in the template compiler', () => { String.raw `{"\uFFFD/#2\uFFFD"}:CLOSE_TAG_NG_CONTAINER:\`; } … - consts: 3, + decls: 3, vars: 0, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2444,7 +2436,7 @@ describe('i18n support in the template compiler', () => { String.raw `{"\uFFFD/#2\uFFFD"}:CLOSE_TAG_NG_CONTAINER:\`; } … - consts: 4, + decls: 4, vars: 0, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2471,7 +2463,6 @@ describe('i18n support in the template compiler', () => { `; const output = String.raw ` - const $_c0$ = [4, "ngIf"]; var $I18N_1$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_3308216566145348998$$APP_SPEC_TS___2$ = goog.getMsg("Content A"); @@ -2504,12 +2495,13 @@ describe('i18n support in the template compiler', () => { } } … - consts: 2, + decls: 2, vars: 2, + consts: [[4, "ngIf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_0_Template, 1, 0, undefined, $_c0$); - $r3$.ɵɵtemplate(1, MyComponent_ng_container_1_Template, 2, 0, "ng-container", $_c0$); + $r3$.ɵɵtemplate(0, MyComponent_0_Template, 1, 0, undefined, 0); + $r3$.ɵɵtemplate(1, MyComponent_ng_container_1_Template, 2, 0, "ng-container", 0); } if (rf & 2) { $r3$.ɵɵproperty("ngIf", ctx.someFlag); @@ -2582,7 +2574,7 @@ describe('i18n support in the template compiler', () => { "VAR_SELECT": "\uFFFD0\uFFFD" }); … - consts: 2, + decls: 2, vars: 1, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2640,7 +2632,7 @@ describe('i18n support in the template compiler', () => { "VAR_SELECT": "\uFFFD0\uFFFD" }); … - consts: 1, + decls: 1, vars: 1, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2679,9 +2671,6 @@ describe('i18n support in the template compiler', () => { $I18N_0$ = $r3$.ɵɵi18nPostprocess($I18N_0$, { "VAR_SELECT": "\uFFFD0\uFFFD" }); - const $_c0$ = ["title", "icu only", ${AttributeMarker.Template}, "ngIf"]; - const $_c1$ = ["title", "icu and text", ${AttributeMarker.Template}, "ngIf"]; - const $_c2$ = ["title", "icu only"]; var $I18N_3$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_8806993169187953163$$APP_SPEC_TS__3$ = goog.getMsg("{VAR_SELECT, select, 10 {ten} 20 {twenty} other {other}}"); @@ -2695,7 +2684,7 @@ describe('i18n support in the template compiler', () => { }); function MyComponent_div_2_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c2$); + $r3$.ɵɵelementStart(0, "div", 2); $r3$.ɵɵtext(1, " "); $r3$.ɵɵi18n(2, $I18N_3$); $r3$.ɵɵtext(3, " "); @@ -2707,7 +2696,6 @@ describe('i18n support in the template compiler', () => { $r3$.ɵɵi18nApply(2); } } - const $_c3$ = ["title", "icu and text"]; var $I18N_5$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_1922743304863699161$$APP_SPEC_TS__5$ = goog.getMsg("{VAR_SELECT, select, 0 {no emails} 1 {one email} other {{INTERPOLATION} emails}}"); @@ -2722,7 +2710,7 @@ describe('i18n support in the template compiler', () => { }); function MyComponent_div_3_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $_c3$); + $r3$.ɵɵelementStart(0, "div", 3); $r3$.ɵɵtext(1, " You have "); $r3$.ɵɵi18n(2, $I18N_5$); $r3$.ɵɵtext(3, ". "); @@ -2735,15 +2723,16 @@ describe('i18n support in the template compiler', () => { } } … - consts: 4, + decls: 4, vars: 3, + consts: [["title", "icu only", ${AttributeMarker.Template}, "ngIf"], ["title", "icu and text", ${AttributeMarker.Template}, "ngIf"], ["title", "icu only"], ["title", "icu and text"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵi18n(1, $I18N_0$); $r3$.ɵɵelementEnd(); - $r3$.ɵɵtemplate(2, MyComponent_div_2_Template, 4, 1, "div", $_c0$); - $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 4, 2, "div", $_c1$); + $r3$.ɵɵtemplate(2, MyComponent_div_2_Template, 4, 1, "div", 0); + $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 4, 2, "div", 1); } if (rf & 2) { $r3$.ɵɵi18nExp(ctx.gender); @@ -2821,7 +2810,6 @@ describe('i18n support in the template compiler', () => { "START_TAG_DIV": "
", "CLOSE_TAG_DIV": "
" }); - const $_c2$ = [1, "other"]; var $I18N_0$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_5791551881115084301$$APP_SPEC_TS_0$ = goog.getMsg(" {$icu} {$startBoldText}Other content{$closeBoldText}{$startTagDiv}{$startItalicText}Another content{$closeItalicText}{$closeTagDiv}", { @@ -2846,14 +2834,15 @@ describe('i18n support in the template compiler', () => { String.raw `{"\uFFFD/#3\uFFFD"}:CLOSE_TAG_DIV:\`; } … - consts: 5, + decls: 5, vars: 1, + consts: [[1, "other"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵi18nStart(1, $I18N_0$); $r3$.ɵɵelement(2, "b"); - $r3$.ɵɵelementStart(3, "div", $_c2$); + $r3$.ɵɵelementStart(3, "div", 0); $r3$.ɵɵelement(4, "i"); $r3$.ɵɵelementEnd(); $r3$.ɵɵi18nEnd(); @@ -2888,7 +2877,7 @@ describe('i18n support in the template compiler', () => { "INTERPOLATION": "\uFFFD1\uFFFD" }); … - consts: 2, + decls: 2, vars: 2, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -2950,7 +2939,7 @@ describe('i18n support in the template compiler', () => { String.raw `{$I18N_1$}:ICU: $` + String.raw `{$I18N_2$}:ICU_1: \`; } … - consts: 2, + decls: 2, vars: 2, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -3004,7 +2993,6 @@ describe('i18n support in the template compiler', () => { $I18N_2$ = $r3$.ɵɵi18nPostprocess($I18N_2$, { "VAR_SELECT": "\uFFFD1\uFFFD" }); - const $_c3$ = [${AttributeMarker.Template}, "ngIf"]; var $I18N_4$; if (ngI18nClosureMode) { const $MSG_APP_SPEC_TS__4$ = goog.getMsg("{VAR_SELECT, select, male {male} female {female} other {other}}"); @@ -3052,14 +3040,15 @@ describe('i18n support in the template compiler', () => { } } … - consts: 4, + decls: 4, vars: 3, + consts: [[${AttributeMarker.Template}, "ngIf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵi18nStart(1, $I18N_0$); $r3$.ɵɵelement(2, "div"); - $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 2, 1, "div", $_c3$); + $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 2, 1, "div", 0); $r3$.ɵɵi18nEnd(); $r3$.ɵɵelementEnd(); } @@ -3111,7 +3100,7 @@ describe('i18n support in the template compiler', () => { $I18N_0$ = $localize \` $` + String.raw `{$I18N_1$}:ICU: \`; } … - consts: 2, + decls: 2, vars: 2, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -3159,7 +3148,7 @@ describe('i18n support in the template compiler', () => { "INTERPOLATION": "\uFFFD2\uFFFD" }); … - consts: 2, + decls: 2, vars: 3, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -3199,7 +3188,6 @@ describe('i18n support in the template compiler', () => { $I18N_1$ = $r3$.ɵɵi18nPostprocess($I18N_1$, { "VAR_SELECT": "\uFFFD0\uFFFD" }); - const $_c2$ = [${AttributeMarker.Template}, "ngIf"]; var $I18N_3$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_7068143081688428291$$APP_SPEC_TS__3$ = goog.getMsg("{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other}}"); @@ -3241,13 +3229,14 @@ describe('i18n support in the template compiler', () => { } } … - consts: 3, + decls: 3, vars: 2, + consts: [[${AttributeMarker.Template}, "ngIf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵi18nStart(1, $I18N_0$); - $r3$.ɵɵtemplate(2, MyComponent_span_2_Template, 2, 1, "span", $_c2$); + $r3$.ɵɵtemplate(2, MyComponent_span_2_Template, 2, 1, "span", 0); $r3$.ɵɵi18nEnd(); $r3$.ɵɵelementEnd(); } @@ -3287,16 +3276,15 @@ describe('i18n support in the template compiler', () => { "INTERPOLATION": "\uFFFD1\uFFFD", "INTERPOLATION_1": "\uFFFD2\uFFFD" }); - const $_c0$ = [${AttributeMarker.Template}, "ngIf"]; - var $I18N_4$; + var $I18N_3$; if (ngI18nClosureMode) { const $MSG_EXTERNAL_2310343208266678305$$APP_SPEC_TS__3$ = goog.getMsg("{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other: {INTERPOLATION}}}"); - $I18N_4$ = $MSG_EXTERNAL_2310343208266678305$$APP_SPEC_TS__3$; + $I18N_3$ = $MSG_EXTERNAL_2310343208266678305$$APP_SPEC_TS__3$; } else { $I18N_4$ = $localize \`{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other: {INTERPOLATION}}}\`; } - $I18N_4$ = $r3$.ɵɵi18nPostprocess($I18N_4$, { + $I18N_3$ = $r3$.ɵɵi18nPostprocess($I18N_3$, { "VAR_SELECT": "\uFFFD0:1\uFFFD", "INTERPOLATION": "\uFFFD1:1\uFFFD" }); @@ -3306,7 +3294,7 @@ describe('i18n support in the template compiler', () => { "startTagSpan": "\uFFFD*2:1\uFFFD\uFFFD#1:1\uFFFD", "closeTagSpan": "\uFFFD/#1:1\uFFFD\uFFFD/*2:1\uFFFD", "icu": $I18N_1$, - "icu_1": $I18N_4$ + "icu_1": $I18N_3$ }); $I18N_0$ = $MSG_EXTERNAL_7186042105600518133$$APP_SPEC_TS_0$; } @@ -3314,7 +3302,7 @@ describe('i18n support in the template compiler', () => { $I18N_0$ = $localize \` $` + String.raw `{I18N_1}:ICU: $` + String.raw `{"\uFFFD*2:1\uFFFD\uFFFD#1:1\uFFFD"}:START_TAG_SPAN: $` + - String.raw `{I18N_4}:ICU_1: $` + + String.raw `{I18N_3}:ICU_1: $` + String.raw `{"\uFFFD/#1:1\uFFFD\uFFFD/*2:1\uFFFD"}:CLOSE_TAG_SPAN:\`; } function MyComponent_span_2_Template(rf, ctx) { @@ -3330,13 +3318,14 @@ describe('i18n support in the template compiler', () => { } } … - consts: 3, + decls: 3, vars: 4, + consts: [[${AttributeMarker.Template}, "ngIf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { $r3$.ɵɵelementStart(0, "div"); $r3$.ɵɵi18nStart(1, $I18N_0$); - $r3$.ɵɵtemplate(2, MyComponent_span_2_Template, 2, 2, "span", $_c2$); + $r3$.ɵɵtemplate(2, MyComponent_span_2_Template, 2, 2, "span", 0); $r3$.ɵɵi18nEnd(); $r3$.ɵɵelementEnd(); } @@ -3379,7 +3368,7 @@ describe('i18n support in the template compiler', () => { "PH_WITH_SPACES": "\uFFFD3\uFFFD" }); … - consts: 2, + decls: 2, vars: 4, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts index cc7ffd6c8dea3..52fbc38af24e9 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts @@ -41,11 +41,11 @@ describe('compiler compliance: listen()', () => { // The template should look like this (where IDENT is a wild card for an identifier): const template = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "click"]; … + consts: [[${AttributeMarker.Bindings}, "click"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "div", $e0_attrs$); + $r3$.ɵɵelementStart(0, "div", 0); $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener($event) { ctx.onClick($event); return 1 == 2; @@ -87,11 +87,11 @@ describe('compiler compliance: listen()', () => { }; const template = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "click"]; … + consts: [[${AttributeMarker.Bindings}, "click"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelementStart(0, "my-app", $e0_attrs$); + $r3$.ɵɵelementStart(0, "my-app", 0); $r3$.ɵɵlistener("click", function MyComponent_Template_my_app_click_0_listener($event) { return ctx.onClick($event); }); @@ -133,21 +133,18 @@ describe('compiler compliance: listen()', () => { }; const template = ` - const $t0_attrs$ = [${AttributeMarker.Template}, "ngIf"]; - const $e_attrs$ = [${AttributeMarker.Bindings}, "click"]; - function MyComponent_div_0_Template(rf, ctx) { if (rf & 1) { const $s$ = $r3$.ɵɵgetCurrentView(); $r3$.ɵɵelementStart(0, "div"); - $r3$.ɵɵelementStart(1, "div", $e_attrs$); + $r3$.ɵɵelementStart(1, "div", 1); $r3$.ɵɵlistener("click", function MyComponent_div_0_Template_div_click_1_listener($event) { $r3$.ɵɵrestoreView($s$); const $comp$ = $r3$.ɵɵnextContext(); return $comp$.onClick($comp$.foo); }); $r3$.ɵɵelementEnd(); - $r3$.ɵɵelementStart(2, "button", $e_attrs$); + $r3$.ɵɵelementStart(2, "button", 1); $r3$.ɵɵlistener("click", function MyComponent_div_0_Template_button_click_2_listener($event) { $r3$.ɵɵrestoreView($s$); const $comp2$ = $r3$.ɵɵnextContext(); @@ -158,9 +155,10 @@ describe('compiler compliance: listen()', () => { } } // ... + consts: [[${AttributeMarker.Template}, "ngIf"], [${AttributeMarker.Bindings}, "click"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 3, 0, "div", $c0$); + $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 3, 0, "div", 0); } if (rf & 2) { $i0$.ɵɵproperty("ngIf", ctx.showing); @@ -195,18 +193,18 @@ describe('compiler compliance: listen()', () => { }; const MyComponentDefinition = ` - const $e0_attrs$ = [${AttributeMarker.Bindings}, "click"]; const $e2_refs$ = ["user", ""]; … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 4, + decls: 4, vars: 0, + consts: [[${AttributeMarker.Bindings}, "click"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { const $s$ = $r3$.ɵɵgetCurrentView(); - $r3$.ɵɵelementStart(0, "button", $e0_attrs$); + $r3$.ɵɵelementStart(0, "button", 0); $r3$.ɵɵlistener("click", function MyComponent_Template_button_click_0_listener($event) { $r3$.ɵɵrestoreView($s$); const $user$ = $r3$.ɵɵreference(3); diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_providers_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_providers_spec.ts index 08cf2e3810475..bcbf2b29a2e5f 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_providers_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_providers_spec.ts @@ -148,7 +148,7 @@ describe('compiler compliance: providers', () => { MyComponent.ngComponentDef = i0.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 1, + decls: 1, vars: 0, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts index 78c48aca42bb8..457dbda594da0 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts @@ -131,7 +131,7 @@ describe('compiler compliance: styling', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], - consts: 0, + decls: 0, vars: 0, template: function MyComponent_Template(rf, $ctx$) { }, @@ -170,7 +170,7 @@ describe('compiler compliance: styling', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], - consts: 0, + decls: 0, vars: 0, template: function MyComponent_Template(rf, $ctx$) { }, @@ -211,7 +211,7 @@ describe('compiler compliance: styling', () => { … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ … - consts: 3, + decls: 3, vars: 3, template: function MyComponent_Template(rf, $ctx$) { if (rf & 1) { @@ -272,7 +272,7 @@ describe('compiler compliance: styling', () => { … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ … - consts: 1, + decls: 1, vars: 1, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -435,7 +435,7 @@ describe('compiler compliance: styling', () => { const template = ` … - consts: 1, + decls: 1, vars: 2, template: function MyComponentWithInterpolation_Template(rf, $ctx$) { if (rf & 1) { @@ -446,7 +446,7 @@ describe('compiler compliance: styling', () => { } } … - consts: 1, + decls: 1, vars: 3, template: function MyComponentWithMuchosInterpolation_Template(rf, $ctx$) { if (rf & 1) { @@ -457,7 +457,7 @@ describe('compiler compliance: styling', () => { } } … - consts: 1, + decls: 1, vars: 1, template: function MyComponentWithoutInterpolation_Template(rf, $ctx$) { if (rf & 1) { @@ -501,16 +501,16 @@ describe('compiler compliance: styling', () => { }; const template = ` - const $_c0$ = [${AttributeMarker.Styles}, "opacity", "1"]; … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], - consts: 1, + decls: 1, vars: 4, + consts: [[${AttributeMarker.Styles}, "opacity", "1"]], template: function MyComponent_Template(rf, $ctx$) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $_c0$); + $r3$.ɵɵelement(0, "div", 0); } if (rf & 2) { $r3$.ɵɵstyleSanitizer($r3$.ɵɵdefaultStyleSanitizer); @@ -553,7 +553,7 @@ describe('compiler compliance: styling', () => { MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], - consts: 1, + decls: 1, vars: 1, template: function MyComponent_Template(rf, ctx) { if (rf & 1) { @@ -695,16 +695,16 @@ describe('compiler compliance: styling', () => { }; const template = ` - const $e0_attrs$ = [${AttributeMarker.Classes}, "grape"]; … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], - consts: 1, + decls: 1, vars: 4, + consts: [[${AttributeMarker.Classes}, "grape"]], template: function MyComponent_Template(rf, $ctx$) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $e0_attrs$); + $r3$.ɵɵelement(0, "div", 0); } if (rf & 2) { $r3$.ɵɵclassMap($ctx$.myClassExp); @@ -744,16 +744,16 @@ describe('compiler compliance: styling', () => { }; const template = ` - const $e0_attrs$ = [${AttributeMarker.Classes}, "foo", ${AttributeMarker.Styles}, "width", "100px"]; … MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], - consts: 1, + decls: 1, vars: 2, + consts: [[${AttributeMarker.Classes}, "foo", ${AttributeMarker.Styles}, "width", "100px"]], template: function MyComponent_Template(rf, $ctx$) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $e0_attrs$); + $r3$.ɵɵelement(0, "div", 0); } if (rf & 2) { $r3$.ɵɵattribute("class", "round")("style", "height:100px", $r3$.ɵɵsanitizeStyle); @@ -1029,7 +1029,7 @@ describe('compiler compliance: styling', () => { $r3$.ɵɵclassProp("foo", ctx.myFooClass); } }, - consts: 0, + decls: 0, vars: 0, `; @@ -1089,7 +1089,7 @@ describe('compiler compliance: styling', () => { $r3$.ɵɵclassProp("foo", ctx.myFooClass); } }, - consts: 0, + decls: 0, vars: 0, `; diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts index f5271df8824f3..7ea9a3e0e96a5 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts @@ -50,14 +50,10 @@ describe('compiler compliance: template', () => { // The template should look like this (where IDENT is a wild card for an identifier): const template = ` - const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"]; - const $c1$ = [${AttributeMarker.Bindings}, "title", "click", ${AttributeMarker.Template}, "ngFor", "ngForOf"]; - const $c2$ = [${AttributeMarker.Bindings}, "title", "click"]; function MyComponent_ul_0_li_1_div_1_Template(rf, ctx) { - if (rf & 1) { const $s$ = $i0$.ɵɵgetCurrentView(); - $i0$.ɵɵelementStart(0, "div", $c2$); + $i0$.ɵɵelementStart(0, "div", 2); $i0$.ɵɵlistener("click", function MyComponent_ul_0_li_1_div_1_Template_div_click_0_listener($event){ $i0$.ɵɵrestoreView($s$); const $inner$ = ctx.$implicit; @@ -84,7 +80,7 @@ describe('compiler compliance: template', () => { function MyComponent_ul_0_li_1_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelementStart(0, "li"); - $i0$.ɵɵtemplate(1, MyComponent_ul_0_li_1_div_1_Template, 2, 2, "div", $c1$); + $i0$.ɵɵtemplate(1, MyComponent_ul_0_li_1_div_1_Template, 2, 2, "div", 1); $i0$.ɵɵelementEnd(); } if (rf & 2) { @@ -97,7 +93,7 @@ describe('compiler compliance: template', () => { function MyComponent_ul_0_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelementStart(0, "ul"); - $i0$.ɵɵtemplate(1, MyComponent_ul_0_li_1_Template, 2, 1, "li", $c0$); + $i0$.ɵɵtemplate(1, MyComponent_ul_0_li_1_Template, 2, 1, "li", 0); $i0$.ɵɵelementEnd(); } if (rf & 2) { @@ -107,9 +103,10 @@ describe('compiler compliance: template', () => { } } // ... + consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Bindings}, "title", "click", ${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Bindings}, "title", "click"]], template:function MyComponent_Template(rf, ctx){ if (rf & 1) { - $i0$.ɵɵtemplate(0, MyComponent_ul_0_Template, 2, 1, "ul", $c0$); + $i0$.ɵɵtemplate(0, MyComponent_ul_0_Template, 2, 1, "ul", 0); } if (rf & 2) { $i0$.ɵɵproperty("ngForOf", ctx.items); @@ -145,13 +142,10 @@ describe('compiler compliance: template', () => { }; const template = ` - const $t0_attrs$ = [${AttributeMarker.Bindings}, "click", ${AttributeMarker.Template}, "ngFor", "ngForOf"]; - const $e_attrs$ = [${AttributeMarker.Bindings}, "click"]; - function MyComponent_div_0_Template(rf, ctx) { if (rf & 1) { const $s$ = $r3$.ɵɵgetCurrentView(); - $r3$.ɵɵelementStart(0, "div", $e_attrs$); + $r3$.ɵɵelementStart(0, "div", 1); $r3$.ɵɵlistener("click", function MyComponent_div_0_Template_div_click_0_listener($event) { $r3$.ɵɵrestoreView($s$); const $d$ = ctx.$implicit; @@ -163,9 +157,10 @@ describe('compiler compliance: template', () => { } } // ... + consts: [[${AttributeMarker.Bindings}, "click", ${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Bindings}, "click"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", $t0_attrs$); + $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", 0); } if (rf & 2) { $r3$.ɵɵproperty("ngForOf", ctx._data); @@ -205,7 +200,7 @@ describe('compiler compliance: template', () => { function MyComponent_div_0_Template(rf, ctx) { if (rf & 1) { const $_r2$ = i0.ɵɵgetCurrentView(); - $r3$.ɵɵelementStart(0, "div", $_c1$); + $r3$.ɵɵelementStart(0, "div", 2); $r3$.ɵɵlistener("click", function MyComponent_div_0_Template_div_click_0_listener($event) { i0.ɵɵrestoreView($_r2$); const $ctx_r1$ = i0.ɵɵnextContext(); @@ -217,7 +212,7 @@ describe('compiler compliance: template', () => { // ... function MyComponent_div_1_Template(rf, ctx) { if (rf & 1) { - $r3$.ɵɵelement(0, "div", $_c3$); + $r3$.ɵɵelement(0, "div", 3); } if (rf & 2) { const $ctx_0$ = i0.ɵɵnextContext(); $r3$.ɵɵproperty("id", $ctx_0$); @@ -252,8 +247,6 @@ describe('compiler compliance: template', () => { }; const template = ` - const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"]; - function MyComponent_span_0_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelementStart(0, "span"); @@ -268,9 +261,10 @@ describe('compiler compliance: template', () => { } } // ... + consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"]], template:function MyComponent_Template(rf, ctx){ if (rf & 1) { - $i0$.ɵɵtemplate(0, MyComponent_span_0_Template, 2, 2, "span", _c0); + $i0$.ɵɵtemplate(0, MyComponent_span_0_Template, 2, 2, "span", 0); } if (rf & 2) { $i0$.ɵɵproperty("ngForOf", ctx.items); @@ -306,9 +300,6 @@ describe('compiler compliance: template', () => { }; const template = ` - const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"]; - const $c1$ = [${AttributeMarker.Template}, "ngIf"]; - function MyComponent_div_0_span_1_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelementStart(0, "span"); @@ -327,7 +318,7 @@ describe('compiler compliance: template', () => { function MyComponent_div_0_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelementStart(0, "div"); - $i0$.ɵɵtemplate(1, MyComponent_div_0_span_1_Template, 2, 2, "span", $c1$); + $i0$.ɵɵtemplate(1, MyComponent_div_0_span_1_Template, 2, 2, "span", 1); $i0$.ɵɵelementEnd(); } if (rf & 2) { @@ -338,9 +329,10 @@ describe('compiler compliance: template', () => { } // ... + consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Template}, "ngIf"]], template:function MyComponent_Template(rf, ctx){ if (rf & 1) { - $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 2, 1, "div", $c0$); + $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 2, 1, "div", 0); } if (rf & 2) { $i0$.ɵɵproperty("ngForOf", ctx.items); @@ -379,7 +371,6 @@ describe('compiler compliance: template', () => { // The template should look like this (where IDENT is a wild card for an identifier): const template = ` - const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"]; function MyComponent_div_0_div_1_div_1_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelementStart(0, "div"); @@ -397,7 +388,7 @@ describe('compiler compliance: template', () => { function MyComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelementStart(0, "div"); - $i0$.ɵɵtemplate(1, MyComponent_div_0_div_1_div_1_Template, 2, 2, "div", $c0$); + $i0$.ɵɵtemplate(1, MyComponent_div_0_div_1_div_1_Template, 2, 2, "div", 0); $i0$.ɵɵelementEnd(); } if (rf & 2) { @@ -410,7 +401,7 @@ describe('compiler compliance: template', () => { function MyComponent_div_0_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelementStart(0, "div"); - $i0$.ɵɵtemplate(1, MyComponent_div_0_div_1_Template, 2, 1, "div", $c0$); + $i0$.ɵɵtemplate(1, MyComponent_div_0_div_1_Template, 2, 1, "div", 0); $i0$.ɵɵelementEnd(); } if (rf & 2) { @@ -420,9 +411,10 @@ describe('compiler compliance: template', () => { } } // ... + consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"]], template:function MyComponent_Template(rf, ctx){ if (rf & 1) { - $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 2, 1, "div", $c0$); + $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 2, 1, "div", 0); } if (rf & 2) { $i0$.ɵɵproperty("ngForOf", ctx.items); @@ -456,8 +448,6 @@ describe('compiler compliance: template', () => { }; const template = ` - const $c0$ = ["attr", "l", ${AttributeMarker.Bindings}, "boundAttr"]; - function MyComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵtext(0, " some-content "); @@ -466,9 +456,10 @@ describe('compiler compliance: template', () => { // ... + consts: [["attr", "l", ${AttributeMarker.Bindings}, "boundAttr"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $i0$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 1, 0, "ng-template", $c0$); + $i0$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 1, 0, "ng-template", 0); } if (rf & 2) { $i0$.ɵɵproperty("boundAttr", ctx.b); @@ -541,15 +532,14 @@ describe('compiler compliance: template', () => { }; const template = ` - const $t0_attrs$ = [${AttributeMarker.Bindings}, "outDirective"]; - function MyComponent_ng_template_0_Template(rf, ctx) { } // ... + consts: [[${AttributeMarker.Bindings}, "outDirective"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $i0$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", $t0_attrs$); + $i0$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0); $i0$.ɵɵlistener("outDirective", function MyComponent_Template_ng_template_outDirective_0_listener($event) { return $event.doSth(); }); } }`; @@ -746,8 +736,6 @@ describe('compiler compliance: template', () => { }; const template = ` - const $c0$ = [${AttributeMarker.Template}, "ngIf"]; - function MyComponent_div_0_Template(rf, ctx) { if (rf & 1) { $i0$.ɵɵelement(0, "div"); @@ -755,10 +743,10 @@ describe('compiler compliance: template', () => { } // ... - + consts: [[${AttributeMarker.Template}, "ngIf"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) { - $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", $c0$); + $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", 0); $i0$.ɵɵpipe(1, "pipe"); } if (rf & 2) { $i0$.ɵɵproperty("ngIf", $i0$.ɵɵpipeBind1(1, 1, ctx.val)); diff --git a/packages/compiler-cli/test/ngtsc/template_mapping_spec.ts b/packages/compiler-cli/test/ngtsc/template_mapping_spec.ts index c7ade5e4e6188..d7679f300178f 100644 --- a/packages/compiler-cli/test/ngtsc/template_mapping_spec.ts +++ b/packages/compiler-cli/test/ngtsc/template_mapping_spec.ts @@ -80,7 +80,7 @@ runInEachFileSystem((os) => { const mappings = compileAndMap('
'); expect(mappings).toContain({ source: '
', - generated: 'i0.ɵɵelement(0, "div", _c0)', + generated: 'i0.ɵɵelement(0, "div", 0)', sourceUrl: '../test.ts' }); expect(mappings).toContain({ @@ -109,7 +109,7 @@ runInEachFileSystem((os) => { const mappings = compileAndMap('
'); expect(mappings).toContain({ source: '
', - generated: 'i0.ɵɵelement(0, "div", _c0)', + generated: 'i0.ɵɵelement(0, "div", 0)', sourceUrl: '../test.ts' }); expect(mappings).toContain({ @@ -124,7 +124,7 @@ runInEachFileSystem((os) => { expect(mappings).toContain({ source: '
', - generated: 'i0.ɵɵelement(0, "div", _c0)', + generated: 'i0.ɵɵelement(0, "div", 0)', sourceUrl: '../test.ts' }); expect(mappings).toContain({ @@ -138,7 +138,7 @@ runInEachFileSystem((os) => { const mappings = compileAndMap('
'); expect(mappings).toContain({ source: '
', - generated: 'i0.ɵɵelement(0, "div", _c0)', + generated: 'i0.ɵɵelement(0, "div", 0)', sourceUrl: '../test.ts' }); expect(mappings).toContain({ @@ -152,7 +152,7 @@ runInEachFileSystem((os) => { const mappings = compileAndMap(''); expect(mappings).toContain({ source: '`); expect(mappings).toContain({ source: `'); expect(mappings).toContain({ source: ' */ template: function CompTemplate(rf: RenderFlags, ctx: any) { @@ -70,7 +70,7 @@ describe('event listeners', () => { static ngComponentDef = ɵɵdefineComponent({ type: MyCompWithGlobalListeners, selectors: [['comp']], - consts: 1, + decls: 1, vars: 0, template: function CompTemplate(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { @@ -138,7 +138,7 @@ describe('event listeners', () => { static ngComponentDef = ɵɵdefineComponent({ type: PreventDefaultComp, selectors: [['prevent-default-comp']], - consts: 2, + decls: 2, vars: 0, /** */ template: (rf: RenderFlags, ctx: PreventDefaultComp) => { @@ -329,7 +329,7 @@ describe('event listeners', () => { static ngComponentDef = ɵɵdefineComponent({ type: AppComp, selectors: [['app-comp']], - consts: 1, + decls: 1, vars: 0, template: function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { @@ -390,7 +390,7 @@ describe('event listeners', () => { static ngComponentDef = ɵɵdefineComponent({ type: AppComp, selectors: [['app-comp']], - consts: 1, + decls: 1, vars: 0, template: function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { @@ -454,7 +454,7 @@ describe('event listeners', () => { static ngComponentDef = ɵɵdefineComponent({ type: AppComp, selectors: [['app-comp']], - consts: 1, + decls: 1, vars: 0, template: function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { @@ -533,7 +533,7 @@ describe('event listeners', () => { static ngComponentDef = ɵɵdefineComponent({ type: MyComp, selectors: [['comp']], - consts: 1, + decls: 1, vars: 0, template: function CompTemplate(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { @@ -594,10 +594,10 @@ describe('event listeners', () => { } const fixture = new TemplateFixture(() => { - ɵɵelementStart(0, 'button', ['hostListenerDir', '']); + ɵɵelementStart(0, 'button', 0); ɵɵtext(1, 'Click'); ɵɵelementEnd(); - }, () => {}, 2, 0, [HostListenerDir]); + }, () => {}, 2, 0, [HostListenerDir], null, null, undefined, [['hostListenerDir', '']]); const button = fixture.hostElement.querySelector('button') !; @@ -610,8 +610,8 @@ describe('event listeners', () => { it('should support global host listeners on directives', () => { const fixture = new TemplateFixture(() => { - ɵɵelement(0, 'div', ['hostListenerDir', '']); - }, () => {}, 1, 0, [GlobalHostListenerDir]); + ɵɵelement(0, 'div', 0); + }, () => {}, 1, 0, [GlobalHostListenerDir], null, null, undefined, [['hostListenerDir', '']]); const doc = fixture.hostElement.ownerDocument !; @@ -636,7 +636,7 @@ describe('event listeners', () => { static ngComponentDef = ɵɵdefineComponent({ type: MyComp, selectors: [['comp']], - consts: 2, + decls: 2, vars: 0, /** */ template: function CompTemplate(rf: RenderFlags, ctx: any) { @@ -917,7 +917,7 @@ describe('event listeners', () => { static ngComponentDef = ɵɵdefineComponent({ type: App, selectors: [['app']], - consts: 3, + decls: 3, vars: 0, template: (rf: RenderFlags, ctx: App) => { if (rf & RenderFlags.Create) { diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts index c1065caadf324..6030bd73842e0 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/packages/core/test/render3/outputs_spec.ts @@ -26,7 +26,7 @@ describe('outputs', () => { type: ButtonToggle, selectors: [['button-toggle']], template: function(rf: RenderFlags, ctx: any) {}, - consts: 0, + decls: 0, vars: 0, outputs: {change: 'change', resetStream: 'reset'} }); @@ -80,7 +80,7 @@ describe('outputs', () => { ɵɵembeddedViewEnd(); } else { if (ɵɵembeddedViewStart(1, 1, 0)) { - ɵɵelementStart(0, 'div', ['otherDir', '']); + ɵɵelementStart(0, 'div', 0); { ɵɵlistener('change', function() { return ctx.onChange(); }); } @@ -95,13 +95,14 @@ describe('outputs', () => { let counter = 0; const ctx = {condition: true, onChange: () => counter++, onClick: () => {}}; - renderToHtml(Template, ctx, 3, 0, deps); + const attrs = [['otherDir', '']]; + renderToHtml(Template, ctx, 3, 0, deps, null, null, false, attrs); buttonToggle !.change.next(); expect(counter).toEqual(1); ctx.condition = false; - renderToHtml(Template, ctx, 3, 0, deps); + renderToHtml(Template, ctx, 3, 0, deps, null, null, false, attrs); expect(counter).toEqual(1); otherDir !.changeStream.next(); diff --git a/packages/core/test/render3/perf/element_text_create/index.ts b/packages/core/test/render3/perf/element_text_create/index.ts index 2b1f03733d27f..83e7d36ace4d6 100644 --- a/packages/core/test/render3/perf/element_text_create/index.ts +++ b/packages/core/test/render3/perf/element_text_create/index.ts @@ -68,7 +68,7 @@ function testTemplate(rf: RenderFlags, ctx: any) { } const viewTNode = createTNode(null !, null, TNodeType.View, -1, null, null) as TViewNode; -const embeddedTView = createTView(-1, testTemplate, 21, 0, null, null, null, null); +const embeddedTView = createTView(-1, testTemplate, 21, 0, null, null, null, null, null); // initialize global state resetComponentState(); @@ -89,4 +89,4 @@ while (createTime()) { console.profileEnd(); // report results -elementTextCreate.report(); \ No newline at end of file +elementTextCreate.report(); diff --git a/packages/core/test/render3/perf/listeners/index.ts b/packages/core/test/render3/perf/listeners/index.ts index 270da5181da25..4ea8304c30beb 100644 --- a/packages/core/test/render3/perf/listeners/index.ts +++ b/packages/core/test/render3/perf/listeners/index.ts @@ -28,47 +28,46 @@ import {createAndRenderLView} from '../setup'; `; -const _c0 = [3, 'click', 'input']; function testTemplate(rf: RenderFlags, ctx: any) { if (rf & 1) { ɵɵelementStart(0, 'div'); - ɵɵelementStart(1, 'button', _c0); + ɵɵelementStart(1, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(2, 'button', _c0); + ɵɵelementStart(2, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(3, 'button', _c0); + ɵɵelementStart(3, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(4, 'button', _c0); + ɵɵelementStart(4, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(5, 'button', _c0); + ɵɵelementStart(5, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(6, 'button', _c0); + ɵɵelementStart(6, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(7, 'button', _c0); + ɵɵelementStart(7, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(8, 'button', _c0); + ɵɵelementStart(8, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(9, 'button', _c0); + ɵɵelementStart(9, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); - ɵɵelementStart(10, 'button', _c0); + ɵɵelementStart(10, 'button', 0); ɵɵlistener('click', function clickListener() {}); ɵɵlistener('input', function inputListener() {}); ɵɵelementEnd(); @@ -77,7 +76,8 @@ function testTemplate(rf: RenderFlags, ctx: any) { } const viewTNode = createTNode(null !, null, TNodeType.View, -1, null, null) as TViewNode; -const embeddedTView = createTView(-1, testTemplate, 11, 0, null, null, null, null); +const embeddedTView = + createTView(-1, testTemplate, 11, 0, null, null, null, null, [[3, 'click', 'input']]); // initialize global state resetComponentState(); @@ -96,4 +96,4 @@ while (createTime()) { console.profileEnd(); // report results -listenersCreate.report(); \ No newline at end of file +listenersCreate.report(); diff --git a/packages/core/test/render3/perf/setup.ts b/packages/core/test/render3/perf/setup.ts index dd2de738f9500..a449dc97adcd7 100644 --- a/packages/core/test/render3/perf/setup.ts +++ b/packages/core/test/render3/perf/setup.ts @@ -7,7 +7,7 @@ */ import {addToViewTree, createLContainer, createLView, createTNode, createTView, getOrCreateTNode, renderView} from '../../../src/render3/instructions/shared'; import {ComponentTemplate} from '../../../src/render3/interfaces/definition'; -import {TNodeType, TViewNode} from '../../../src/render3/interfaces/node'; +import {TAttributes, TNodeType, TViewNode} from '../../../src/render3/interfaces/node'; import {RComment} from '../../../src/render3/interfaces/renderer'; import {LView, LViewFlags, TView} from '../../../src/render3/interfaces/view'; import {insertView} from '../../../src/render3/node_manipulation'; @@ -23,10 +23,10 @@ export function createAndRenderLView( } export function setupRootViewWithEmbeddedViews( - templateFn: ComponentTemplate| null, consts: number, vars: number, noOfViews: number, - embeddedViewContext: any = {}): LView { + templateFn: ComponentTemplate| null, decls: number, vars: number, noOfViews: number, + embeddedViewContext: any = {}, consts: TAttributes[] | null = null): LView { // Create a root view with a container - const rootTView = createTView(-1, null, 1, 0, null, null, null, null); + const rootTView = createTView(-1, null, 1, 0, null, null, null, null, consts); const tContainerNode = getOrCreateTNode(rootTView, null, 0, TNodeType.Container, null, null); const rootLView = createLView( null, rootTView, {}, LViewFlags.CheckAlways | LViewFlags.IsRoot, null, null, @@ -38,7 +38,7 @@ export function setupRootViewWithEmbeddedViews( // create test embedded views - const embeddedTView = createTView(-1, templateFn, consts, vars, null, null, null, null); + const embeddedTView = createTView(-1, templateFn, decls, vars, null, null, null, null, null); const viewTNode = createTNode(rootTView, null, TNodeType.View, -1, null, null) as TViewNode; // create embedded views and add them to the container @@ -54,4 +54,4 @@ export function setupRootViewWithEmbeddedViews( renderView(rootLView, rootTView, null); return rootLView; -} \ No newline at end of file +} diff --git a/packages/core/test/render3/perf/style_and_class_bindings/index.ts b/packages/core/test/render3/perf/style_and_class_bindings/index.ts index 09ebb63a61c3a..1d1af477299bc 100644 --- a/packages/core/test/render3/perf/style_and_class_bindings/index.ts +++ b/packages/core/test/render3/perf/style_and_class_bindings/index.ts @@ -31,18 +31,17 @@ import {setupRootViewWithEmbeddedViews} from '../setup'; `; function testTemplate(rf: RenderFlags, ctx: any) { if (rf & 1) { - ɵɵelementStart(0, 'div', [AttributeMarker.Classes, 'list']); - ɵɵelement(1, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement(2, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement(3, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement(4, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement(5, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement(6, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement(7, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement(8, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement(9, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵelement( - 10, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵelementStart(0, 'div', 0); + ɵɵelement(1, 'div', 1); + ɵɵelement(2, 'div', 1); + ɵɵelement(3, 'div', 1); + ɵɵelement(4, 'div', 1); + ɵɵelement(5, 'div', 1); + ɵɵelement(6, 'div', 1); + ɵɵelement(7, 'div', 1); + ɵɵelement(8, 'div', 1); + ɵɵelement(9, 'div', 1); + ɵɵelement(10, 'div', 1); ɵɵelementEnd(); } if (rf & 2) { @@ -80,7 +79,10 @@ function testTemplate(rf: RenderFlags, ctx: any) { } -const rootLView = setupRootViewWithEmbeddedViews(testTemplate, 11, 10, 1000); +const rootLView = setupRootViewWithEmbeddedViews(testTemplate, 11, 10, 1000, undefined, [ + [AttributeMarker.Classes, 'list'], + [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px'] +]); const rootTView = rootLView[TVIEW]; // scenario to benchmark diff --git a/packages/core/test/render3/providers_spec.ts b/packages/core/test/render3/providers_spec.ts index 82191cf827d75..7004d971d5074 100644 --- a/packages/core/test/render3/providers_spec.ts +++ b/packages/core/test/render3/providers_spec.ts @@ -873,7 +873,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: Repeated, selectors: [['repeated']], - consts: 2, + decls: 2, vars: 2, template: function(fs: RenderFlags, ctx: Repeated) { if (fs & RenderFlags.Create) { @@ -904,7 +904,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: ComponentWithProviders, selectors: [['component-with-providers']], - consts: 2, + decls: 2, vars: 0, template: function(fs: RenderFlags, ctx: ComponentWithProviders) { if (fs & RenderFlags.Create) { @@ -959,7 +959,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: Repeated, selectors: [['repeated']], - consts: 2, + decls: 2, vars: 2, template: function(fs: RenderFlags, ctx: Repeated) { if (fs & RenderFlags.Create) { @@ -993,7 +993,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: ComponentWithProviders, selectors: [['component-with-providers']], - consts: 2, + decls: 2, vars: 0, template: function(fs: RenderFlags, ctx: ComponentWithProviders) { if (fs & RenderFlags.Create) { @@ -1042,7 +1042,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: EmbeddedComponent, selectors: [['embedded-cmp']], - consts: 1, + decls: 1, vars: 1, template: (rf: RenderFlags, cmp: EmbeddedComponent) => { if (rf & RenderFlags.Create) { @@ -1065,7 +1065,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: HostComponent, selectors: [['host-cmp']], - consts: 1, + decls: 1, vars: 0, template: (rf: RenderFlags, cmp: HostComponent) => { if (rf & RenderFlags.Create) { @@ -1089,7 +1089,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: AppComponent, selectors: [['app-cmp']], - consts: 1, + decls: 1, vars: 0, template: (rf: RenderFlags, cmp: AppComponent) => { if (rf & RenderFlags.Create) { @@ -1251,7 +1251,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: MyComponent, selectors: [['my-cmp']], - consts: 1, + decls: 1, vars: 0, template: (rf: RenderFlags, cmp: MyComponent) => { if (rf & RenderFlags.Create) { @@ -1278,7 +1278,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: AppComponent, selectors: [['app-cmp']], - consts: 1, + decls: 1, vars: 0, template: (rf: RenderFlags, cmp: AppComponent) => { if (rf & RenderFlags.Create) { @@ -1343,7 +1343,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: MyComponent, selectors: [['my-comp']], - consts: 1, + decls: 1, vars: 0, template: (rf: RenderFlags, ctx: MyComponent) => { if (rf & RenderFlags.Create) { @@ -1370,7 +1370,7 @@ describe('providers', () => { static ngComponentDef = ɵɵdefineComponent({ type: App, selectors: [['app-cmp']], - consts: 2, + decls: 2, vars: 0, template: (rf: RenderFlags, ctx: App) => { if (rf & RenderFlags.Create) { @@ -1445,7 +1445,7 @@ function expectProvidersScenario(defs: { static ngComponentDef = ɵɵdefineComponent({ type: ViewChildComponent, selectors: [['view-child']], - consts: 1, + decls: 1, vars: 0, template: function(fs: RenderFlags, ctx: ViewChildComponent) { if (fs & RenderFlags.Create) { @@ -1473,7 +1473,7 @@ function expectProvidersScenario(defs: { static ngComponentDef = ɵɵdefineComponent({ type: ContentChildComponent, selectors: [['content-child']], - consts: 1, + decls: 1, vars: 0, template: function(fs: RenderFlags, ctx: ParentComponent) { if (fs & RenderFlags.Create) { @@ -1504,7 +1504,7 @@ function expectProvidersScenario(defs: { static ngComponentDef = ɵɵdefineComponent({ type: ParentComponent, selectors: [['parent']], - consts: 1, + decls: 1, vars: 0, template: function(fs: RenderFlags, ctx: ParentComponent) { if (fs & RenderFlags.Create) { @@ -1541,7 +1541,7 @@ function expectProvidersScenario(defs: { static ngComponentDef = ɵɵdefineComponent({ type: App, selectors: [['app']], - consts: 2, + decls: 2, vars: 0, template: function(fs: RenderFlags, ctx: App) { if (fs & RenderFlags.Create) { diff --git a/packages/core/test/render3/pure_function_spec.ts b/packages/core/test/render3/pure_function_spec.ts index 615f6f9a645b6..528f104cce1d4 100644 --- a/packages/core/test/render3/pure_function_spec.ts +++ b/packages/core/test/render3/pure_function_spec.ts @@ -23,7 +23,7 @@ describe('object literals', () => { static ngComponentDef = ɵɵdefineComponent({ type: ObjectComp, selectors: [['object-comp']], - consts: 0, + decls: 0, vars: 1, template: function ObjectComp_Template() {}, inputs: {config: 'config'} diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts index 0bfc516aa8daa..672dde8d56ace 100644 --- a/packages/core/test/render3/query_spec.ts +++ b/packages/core/test/render3/query_spec.ts @@ -113,7 +113,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', '']); + ɵɵelement(0, 'div', 0); elToQuery = getNativeByIndex(0, getLView()); } }, @@ -127,7 +127,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const cmptInstance = renderComponent(Cmpt); const qList = (cmptInstance.query as QueryList); @@ -150,7 +151,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', ['child', '', 'otherChild', '']); + ɵɵelementStart(0, 'div', 0); { otherChildInstance = getDirectiveOnNode(0, 1); } ɵɵelementEnd(); } @@ -165,7 +166,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '', 'otherChild', '']]); const cmptInstance = renderComponent(Cmpt); const qList = (cmptInstance.query as QueryList); @@ -186,7 +188,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', '']); + ɵɵelement(0, 'div', 0); } }, 1, 0, [Child, OtherChild], [], @@ -199,7 +201,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const cmptInstance = renderComponent(Cmpt); const qList = (cmptInstance.query as QueryList); @@ -249,11 +252,12 @@ describe('query', () => { static ngComponentDef = ɵɵdefineComponent({ type: App, selectors: [['app']], - consts: 1, + decls: 1, vars: 0, + consts: [['myDir']], template: function App_Template(rf: RenderFlags, ctx: App) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['myDir']); + ɵɵelement(0, 'div', 0); } }, viewQuery: function(rf: RenderFlags, ctx: App) { @@ -294,11 +298,12 @@ describe('query', () => { static ngComponentDef = ɵɵdefineComponent({ type: App, selectors: [['app']], - consts: 1, + decls: 1, vars: 0, + consts: [['myDir']], template: function App_Template(rf: RenderFlags, ctx: App) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['myDir']); + ɵɵelement(0, 'div', 0); } }, viewQuery: function(rf: RenderFlags, ctx: App) { @@ -837,7 +842,7 @@ describe('query', () => { static ngComponentDef = ɵɵdefineComponent({ type: Child, selectors: [['child']], - consts: 0, + decls: 0, vars: 0, template: (rf: RenderFlags, ctx: Child) => {}, exportAs: ['child'] @@ -890,7 +895,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', ''], ['foo', 'child']); + ɵɵelement(0, 'div', 0, ['foo', 'child']); } if (rf & RenderFlags.Update) { childInstance = getDirectiveOnNode(0); @@ -906,7 +911,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const cmptInstance = renderComponent(Cmpt); const qList = (cmptInstance.query as QueryList); @@ -929,8 +935,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement( - 0, 'div', ['child1', '', 'child2', ''], ['foo', 'child1', 'bar', 'child2']); + ɵɵelement(0, 'div', 0, ['foo', 'child1', 'bar', 'child2']); } if (rf & RenderFlags.Update) { child1Instance = getDirectiveOnNode(0, 0); @@ -947,7 +952,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child1', '', 'child2', '']]); const cmptInstance = renderComponent(Cmpt); const qList = (cmptInstance.query as QueryList); @@ -971,7 +977,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', ''], ['foo', 'child', 'bar', 'child']); + ɵɵelement(0, 'div', 0, ['foo', 'child', 'bar', 'child']); } if (rf & RenderFlags.Update) { childInstance = getDirectiveOnNode(0); @@ -990,7 +996,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.barQuery = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const cmptInstance = renderComponent(Cmpt); @@ -1017,7 +1024,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', ''], ['foo', 'child']); + ɵɵelement(0, 'div', 0, ['foo', 'child']); div = getNativeByIndex(0, getLView()); } }, @@ -1031,7 +1038,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const cmptInstance = renderComponent(Cmpt); const qList = (cmptInstance.query as QueryList); @@ -1053,7 +1061,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', ''], ['foo', '', 'bar', 'child']); + ɵɵelement(0, 'div', 0, ['foo', '', 'bar', 'child']); div = getNativeByIndex(0, getLView()); } if (rf & RenderFlags.Update) { @@ -1070,7 +1078,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const cmptInstance = renderComponent(Cmpt); const qList = (cmptInstance.query as QueryList); @@ -1092,7 +1101,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['foo', '']); + ɵɵelement(0, 'div', 0); } }, 2, 0, [Child], [], @@ -1105,7 +1114,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['foo', '']]); const {component} = new ComponentFixture(Cmpt); const qList = component.query; @@ -1126,7 +1136,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', '']); + ɵɵelement(0, 'div', 0); } }, 1, 0, [Child, OtherChild], [], @@ -1139,7 +1149,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const {component} = new ComponentFixture(Cmpt); const qList = component.query; @@ -1160,7 +1171,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', '']); + ɵɵelement(0, 'div', 0); } }, 1, 0, [Child, OtherChild], [], @@ -1173,7 +1184,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const {component} = new ComponentFixture(Cmpt); const qList = component.query; @@ -1224,7 +1236,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', ''], ['foo', '']); + ɵɵelement(0, 'div', 0, ['foo', '']); } }, 2, 0, [Child], [], @@ -1237,7 +1249,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const {component} = new ComponentFixture(Cmpt); const qList = component.query; @@ -1258,7 +1271,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['child', '']); + ɵɵelement(0, 'div', 0); } }, 1, 0, [Child], [], @@ -1271,7 +1284,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [['child', '']]); const {component} = new ComponentFixture(Cmpt); const qList = component.query; @@ -1429,8 +1443,7 @@ describe('query', () => { 'app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵtemplate( - 0, AppComponent_Template_1, 1, 0, 'div', [AttributeMarker.Template, 'someDir']); + ɵɵtemplate(0, AppComponent_Template_1, 1, 0, 'div', 0); ɵɵelement(1, 'div', null, ['foo', '']); } }, @@ -1444,7 +1457,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.query = tmp as QueryList); } - }); + }, + [], [], undefined, [[AttributeMarker.Template, 'someDir']]); const fixture = new ComponentFixture(AppComponent); expect(fixture.component.query.length).toBe(1); @@ -1489,13 +1503,17 @@ describe('query', () => { * * */ - const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) { - if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', [AttributeMarker.Bindings, 'with-content']); - { ɵɵelement(1, 'span', null, ['foo', '']); } - ɵɵelementEnd(); - } - }, 3, 0, [WithContentDirective]); + const AppComponent = createComponent( + 'app-component', + function(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + ɵɵelementStart(0, 'div', 0); + { ɵɵelement(1, 'span', null, ['foo', '']); } + ɵɵelementEnd(); + } + }, + 3, 0, [WithContentDirective], [], null, [], [], undefined, + [[AttributeMarker.Bindings, 'with-content']]); const fixture = new ComponentFixture(AppComponent); expect(withContentInstance !.foos.length) @@ -1520,27 +1538,31 @@ describe('query', () => { * * % } */ - const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) { - if (rf & RenderFlags.Create) { - ɵɵcontainer(0); - } - if (rf & RenderFlags.Update) { - ɵɵcontainerRefreshStart(0); - { - for (let i = 0; i < 3; i++) { - let rf = ɵɵembeddedViewStart(1, 3, 0); - if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', [AttributeMarker.Bindings, 'with-content']); - { ɵɵelement(1, 'span', null, ['foo', '']); } - ɵɵelementEnd(); - } - ɵɵembeddedViewEnd(); + const AppComponent = createComponent( + 'app-component', + function(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + ɵɵcontainer(0); } - } + if (rf & RenderFlags.Update) { + ɵɵcontainerRefreshStart(0); + { + for (let i = 0; i < 3; i++) { + let rf = ɵɵembeddedViewStart(1, 3, 0); + if (rf & RenderFlags.Create) { + ɵɵelementStart(0, 'div', 0); + { ɵɵelement(1, 'span', null, ['foo', '']); } + ɵɵelementEnd(); + } + ɵɵembeddedViewEnd(); + } + } - ɵɵcontainerRefreshEnd(); - } - }, 1, 0, [WithContentDirective]); + ɵɵcontainerRefreshEnd(); + } + }, + 1, 0, [WithContentDirective], [], null, [], [], undefined, + [[AttributeMarker.Bindings, 'with-content']]); const fixture = new ComponentFixture(AppComponent); expect(withContentInstance !.foos.length) @@ -1564,9 +1586,9 @@ describe('query', () => { */ const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['with-content', ''], ['foo', '']); + ɵɵelement(0, 'div', 0, ['foo', '']); } - }, 2, 0, [WithContentDirective]); + }, 2, 0, [WithContentDirective], [], null, [], [], undefined, [['with-content', '']]); const fixture = new ComponentFixture(AppComponent); expect(withContentInstance !.foos.length) @@ -1588,10 +1610,10 @@ describe('query', () => { 'app-component', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', ['with-content', '']); + ɵɵelementStart(0, 'div', 0); { ɵɵelement(1, 'div', null, ['foo', '']); } ɵɵelementEnd(); - ɵɵelement(3, 'div', ['id', 'after'], ['bar', '']); + ɵɵelement(3, 'div', 1, ['bar', '']); } }, 5, 0, [WithContentDirective], [], @@ -1604,7 +1626,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.foos = tmp as QueryList); } - }); + }, + [], [], undefined, [['with-content', ''], ['id', 'after']]); const fixture = new ComponentFixture(AppComponent); const viewQList = fixture.component.foos; @@ -1629,8 +1652,8 @@ describe('query', () => { 'app-component', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', ['with-content', '']); - { ɵɵelement(1, 'div', ['id', 'yes'], ['foo', '']); } + ɵɵelementStart(0, 'div', 0); + { ɵɵelement(1, 'div', 1, ['foo', '']); } ɵɵelementEnd(); ɵɵelement(3, 'div', null, ['foo', '']); } @@ -1645,7 +1668,8 @@ describe('query', () => { ɵɵqueryRefresh(tmp = ɵɵloadQuery>()) && (ctx.bars = tmp as QueryList); } - }); + }, + [], [], undefined, [['with-content', ''], ['id', 'yes']]); const fixture = new ComponentFixture(AppComponent); expect(withContentInstance !.foos.length).toBe(1); @@ -1690,13 +1714,13 @@ describe('query', () => { */ function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', [AttributeMarker.Bindings, 'query'], ['out', 'query']); + ɵɵelementStart(0, 'div', 0, ['out', 'query']); { - ɵɵelement(2, 'span', ['id', 'foo'], ['foo', '']); - ɵɵelementStart(4, 'div', [AttributeMarker.Bindings, 'query'], ['in', 'query']); - { ɵɵelement(6, 'span', ['id', 'bar'], ['bar', '']); } + ɵɵelement(2, 'span', 1, ['foo', '']); + ɵɵelementStart(4, 'div', 0, ['in', 'query']); + { ɵɵelement(6, 'span', 2, ['bar', '']); } ɵɵelementEnd(); - ɵɵelement(8, 'span', ['id', 'baz'], ['baz', '']); + ɵɵelement(8, 'span', 3, ['baz', '']); } ɵɵelementEnd(); } @@ -1706,7 +1730,8 @@ describe('query', () => { inInstance = load(lView, 5); } }, - 10, 0, [QueryDirective]); + 10, 0, [QueryDirective], [], null, [], [], undefined, + [[AttributeMarker.Bindings, 'query'], ['id', 'foo'], ['id', 'bar'], ['id', 'baz']]); const fixture = new ComponentFixture(AppComponent); expect(outInstance !.fooBars.length).toBe(3); @@ -1750,10 +1775,10 @@ describe('query', () => { */ function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', ['query', ''], ['out', 'query']); + ɵɵelementStart(0, 'div', 0, ['out', 'query']); { - ɵɵelementStart(2, 'div', ['query', ''], ['in', 'query', 'foo', '']); - { ɵɵelement(5, 'span', ['id', 'bar'], ['foo', '']); } + ɵɵelementStart(2, 'div', 0, ['in', 'query', 'foo', '']); + { ɵɵelement(5, 'span', 1, ['foo', '']); } ɵɵelementEnd(); } ɵɵelementEnd(); @@ -1764,7 +1789,7 @@ describe('query', () => { inInstance = load(lView, 3); } }, - 7, 0, [QueryDirective]); + 7, 0, [QueryDirective], [], null, [], [], undefined, [['query', ''], ['id', 'bar']]); const fixture = new ComponentFixture(AppComponent); expect(outInstance !.fooBars.length).toBe(1); @@ -1807,10 +1832,10 @@ describe('query', () => { */ function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', ['query', ''], ['out', 'query']); + ɵɵelementStart(0, 'div', 0, ['out', 'query']); { - ɵɵelementStart(2, 'div', ['query', ''], ['in', 'query', 'foo', '']); - { ɵɵelement(5, 'span', ['id', 'bar'], ['foo', '']); } + ɵɵelementStart(2, 'div', 0, ['in', 'query', 'foo', '']); + { ɵɵelement(5, 'span', 1, ['foo', '']); } ɵɵelementEnd(); } ɵɵelementEnd(); @@ -1821,7 +1846,7 @@ describe('query', () => { inInstance = load(lView, 3); } }, - 7, 0, [QueryDirective]); + 7, 0, [QueryDirective], [], null, [], [], undefined, [['query', ''], ['id', 'bar']]); const fixture1 = new ComponentFixture(AppComponent); expect(outInstance !.fooBars.length).toBe(1); @@ -1893,9 +1918,7 @@ describe('query', () => { */ function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelementStart( - 0, 'div', [AttributeMarker.Bindings, 'shallow-query', 'deep-query'], - ['shallow', 'shallow-query', 'deep', 'deep-query']); + ɵɵelementStart(0, 'div', 0, ['shallow', 'shallow-query', 'deep', 'deep-query']); { ɵɵelement(3, 'span', null, ['foo', '']); ɵɵelementStart(5, 'div'); @@ -1910,7 +1933,8 @@ describe('query', () => { deepInstance = load(lView, 2); } }, - 8, 0, [ShallowQueryDirective, DeepQueryDirective]); + 8, 0, [ShallowQueryDirective, DeepQueryDirective], [], null, [], [], undefined, + [[AttributeMarker.Bindings, 'shallow-query', 'deep-query']]); const fixture = new ComponentFixture(AppComponent); expect(shallowInstance !.foos.length).toBe(1); @@ -1967,20 +1991,23 @@ describe('query', () => { */ function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - ɵɵelementStart(0, 'div', ['content-query']); + ɵɵelementStart(0, 'div', 0); { - ɵɵelement(1, 'span', ['text', 'A']); - ɵɵelementStart(2, 'div', ['text', 'B']); - ɵɵelementStart(3, 'span', ['text', 'C']); - { ɵɵelement(4, 'span', ['text', 'D']); } + ɵɵelement(1, 'span', 1); + ɵɵelementStart(2, 'div', 2); + ɵɵelementStart(3, 'span', 3); + { ɵɵelement(4, 'span', 4); } ɵɵelementEnd(); ɵɵelementEnd(); - ɵɵelement(5, 'span', ['text', 'E']); + ɵɵelement(5, 'span', 5); } ɵɵelementEnd(); } }, - 6, 0, [TextDirective, ContentQueryDirective]); + 6, 0, [TextDirective, ContentQueryDirective], [], null, [], [], undefined, [ + ['content-query'], ['text', 'A'], ['text', 'B'], ['text', 'C'], ['text', 'D'], + ['text', 'E'] + ]); new ComponentFixture(AppComponent); expect(contentQueryDirective !.texts.map(item => item.value)).toEqual([ @@ -2006,18 +2033,19 @@ describe('query', () => { static ngComponentDef = ɵɵdefineComponent({ type: ViewQueryComponent, selectors: [['view-query']], + consts: [['text', 'A'], ['text', 'B'], ['text', 'C'], ['text', 'D'], ['text', 'E']], template: function(rf: RenderFlags, ctx: ViewQueryComponent) { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'span', ['text', 'A']); - ɵɵelementStart(1, 'div', ['text', 'B']); - ɵɵelementStart(2, 'span', ['text', 'C']); - { ɵɵelement(3, 'span', ['text', 'D']); } + ɵɵelement(0, 'span', 0); + ɵɵelementStart(1, 'div', 1); + ɵɵelementStart(2, 'span', 2); + { ɵɵelement(3, 'span', 3); } ɵɵelementEnd(); ɵɵelementEnd(); - ɵɵelement(4, 'span', ['text', 'E']); + ɵɵelement(4, 'span', 4); } }, - consts: 5, + decls: 5, vars: 0, viewQuery: function(rf: RenderFlags, ctx: ViewQueryComponent) { let tmp: any; diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts index 904ef954a62e2..6c802395edd32 100644 --- a/packages/core/test/render3/render_util.ts +++ b/packages/core/test/render3/render_util.ts @@ -13,7 +13,7 @@ import {TemplateRef} from '@angular/core/src/linker/template_ref'; import {ViewContainerRef} from '@angular/core/src/linker/view_container_ref'; import {Renderer2} from '@angular/core/src/render/api'; import {createLView, createTView, getOrCreateTNode, getOrCreateTView, renderComponentOrTemplate} from '@angular/core/src/render3/instructions/shared'; -import {TNodeType} from '@angular/core/src/render3/interfaces/node'; +import {TAttributes, TNodeType} from '@angular/core/src/render3/interfaces/node'; import {getLView, resetComponentState, selectView} from '@angular/core/src/render3/state'; import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util'; @@ -100,10 +100,10 @@ export class TemplateFixture extends BaseFixture { * `if (rf & RenderFlags.Update) { __here__ }`. */ constructor( - private createBlock: () => void, private updateBlock: () => void = noop, consts: number = 0, + private createBlock: () => void, private updateBlock: () => void = noop, decls: number = 0, private vars: number = 0, directives?: DirectiveTypesOrFactory|null, pipes?: PipeTypesOrFactory|null, sanitizer?: Sanitizer|null, - rendererFactory?: RendererFactory3) { + rendererFactory?: RendererFactory3, private _consts?: TAttributes[]) { super(); this._directiveDefs = toDefs(directives, extractDirectiveDef); this._pipeDefs = toDefs(pipes, extractPipeDef); @@ -119,8 +119,8 @@ export class TemplateFixture extends BaseFixture { this.updateBlock(); } }, - consts, vars, null !, this._rendererFactory, null, this._directiveDefs, this._pipeDefs, - sanitizer); + decls, vars, null !, this._rendererFactory, null, this._directiveDefs, this._pipeDefs, + sanitizer, this._consts); } /** @@ -131,7 +131,8 @@ export class TemplateFixture extends BaseFixture { update(updateBlock?: () => void): void { renderTemplate( this.hostElement, updateBlock || this.updateBlock, 0, this.vars, null !, - this._rendererFactory, this.hostView, this._directiveDefs, this._pipeDefs, this._sanitizer); + this._rendererFactory, this.hostView, this._directiveDefs, this._pipeDefs, this._sanitizer, + this._consts); } destroy(): void { @@ -236,24 +237,25 @@ export function resetDOM() { * * @param hostNode Existing node to render into. * @param templateFn Template function with the instructions. - * @param consts The number of nodes, local refs, and pipes in this template + * @param decls The number of nodes, local refs, and pipes in this template * @param context to pass into the template. * @param providedRendererFactory renderer factory to use * @param host The host element node to use * @param directives Directive defs that should be used for matching * @param pipes Pipe defs that should be used for matching + * @param consts Constants associated with the template. */ export function renderTemplate( - hostNode: RElement, templateFn: ComponentTemplate, consts: number, vars: number, context: T, + hostNode: RElement, templateFn: ComponentTemplate, decls: number, vars: number, context: T, providedRendererFactory: RendererFactory3, componentView: LView | null, directives?: DirectiveDefListOrFactory | null, pipes?: PipeDefListOrFactory | null, - sanitizer?: Sanitizer | null): LView { + sanitizer?: Sanitizer | null, consts?: TAttributes[]): LView { if (componentView === null) { resetComponentState(); const renderer = providedRendererFactory.createRenderer(null, null); // We need to create a root view so it's possible to look up the host element through its index - const tView = createTView(-1, null, 1, 0, null, null, null, null); + const tView = createTView(-1, null, 1, 0, null, null, null, null, null); const hostLView = createLView( null, tView, {}, LViewFlags.CheckAlways | LViewFlags.IsRoot, null, null, providedRendererFactory, renderer); @@ -263,8 +265,9 @@ export function renderTemplate( selectors: [], type: Object, template: templateFn, - consts: consts, + decls: decls, vars: vars, + consts: consts, }); def.directiveDefs = directives || null; def.pipeDefs = pipes || null; @@ -285,12 +288,14 @@ export function renderTemplate( * @deprecated use `TemplateFixture` or `ComponentFixture` */ export function renderToHtml( - template: ComponentTemplate, ctx: any, consts: number = 0, vars: number = 0, + template: ComponentTemplate, ctx: any, decls: number = 0, vars: number = 0, directives?: DirectiveTypesOrFactory | null, pipes?: PipeTypesOrFactory | null, - providedRendererFactory?: RendererFactory3 | null, keepNgReflect = false) { + providedRendererFactory?: RendererFactory3 | null, keepNgReflect = false, + consts?: TAttributes[]) { hostView = renderTemplate( - containerEl, template, consts, vars, ctx, providedRendererFactory || testRendererFactory, - hostView, toDefs(directives, extractDirectiveDef), toDefs(pipes, extractPipeDef)); + containerEl, template, decls, vars, ctx, providedRendererFactory || testRendererFactory, + hostView, toDefs(directives, extractDirectiveDef), toDefs(pipes, extractPipeDef), null, + consts); return toHtml(containerEl, keepNgReflect); } @@ -362,24 +367,26 @@ export function toHtml(componentOrElement: T | RElement, keepNgReflect = fals } export function createComponent( - name: string, template: ComponentTemplate, consts: number = 0, vars: number = 0, + name: string, template: ComponentTemplate, decls: number = 0, vars: number = 0, directives: DirectiveTypesOrFactory = [], pipes: PipeTypesOrFactory = [], viewQuery: ComponentTemplate| null = null, providers: Provider[] = [], - viewProviders: Provider[] = [], hostBindings?: HostBindingsFunction): ComponentType { + viewProviders: Provider[] = [], hostBindings?: HostBindingsFunction, + consts: TAttributes[] = []): ComponentType { return class Component { value: any; static ngFactoryDef = () => new Component; static ngComponentDef = ɵɵdefineComponent({ type: Component, selectors: [[name]], - consts: consts, + decls: decls, vars: vars, template: template, viewQuery: viewQuery, directives: directives, hostBindings, pipes: pipes, features: (providers.length > 0 || viewProviders.length > 0)? - [ɵɵProvidersFeature(providers || [], viewProviders || [])]: [] + [ɵɵProvidersFeature(providers || [], viewProviders || [])]: [], + consts: consts, }); }; } diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts index 3570ed6c6cacb..d67c98703fc0f 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/packages/core/test/render3/renderer_factory_spec.ts @@ -31,7 +31,7 @@ describe('renderer factory lifecycle', () => { type: SomeComponent, encapsulation: ViewEncapsulation.None, selectors: [['some-component']], - consts: 1, + decls: 1, vars: 0, template: function(rf: RenderFlags, ctx: SomeComponent) { if (rf & RenderFlags.Create) { @@ -51,7 +51,7 @@ describe('renderer factory lifecycle', () => { type: SomeComponentWhichThrows, encapsulation: ViewEncapsulation.None, selectors: [['some-component-with-Error']], - consts: 0, + decls: 0, vars: 0, template: function(rf: RenderFlags, ctx: SomeComponentWhichThrows) { throw(new Error('SomeComponentWhichThrows threw')); @@ -155,7 +155,7 @@ describe('Renderer2 destruction hooks', () => { type: SimpleComponent, encapsulation: ViewEncapsulation.None, selectors: [['simple']], - consts: 1, + decls: 1, vars: 0, template: function(rf: RenderFlags, ctx: SimpleComponent) { if (rf & RenderFlags.Create) { diff --git a/packages/core/test/render3/view_container_ref_spec.ts b/packages/core/test/render3/view_container_ref_spec.ts index 633c808a24646..cbc693e402eba 100644 --- a/packages/core/test/render3/view_container_ref_spec.ts +++ b/packages/core/test/render3/view_container_ref_spec.ts @@ -106,13 +106,14 @@ describe('ViewContainerRef', () => { type: TestComponent, encapsulation: ViewEncapsulation.None, selectors: [['test-cmp']], - consts: 4, + decls: 4, vars: 0, + consts: [['testdir', '']], template: (rf: RenderFlags, cmp: TestComponent) => { if (rf & RenderFlags.Create) { ɵɵtext(0, 'before|'); - ɵɵtemplate(1, EmbeddedTemplateA, 1, 0, 'ng-template', ['testdir', '']); - ɵɵtemplate(2, EmbeddedTemplateB, 1, 0, 'ng-template', ['testdir', '']); + ɵɵtemplate(1, EmbeddedTemplateA, 1, 0, 'ng-template', 0); + ɵɵtemplate(2, EmbeddedTemplateB, 1, 0, 'ng-template', 0); ɵɵtext(3, '|after'); } }, @@ -177,12 +178,13 @@ describe('ViewContainerRef', () => { type: TestComponent, encapsulation: ViewEncapsulation.None, selectors: [['test-cmp']], - consts: 4, + decls: 4, vars: 0, + consts: [['testdir', '']], template: (rf: RenderFlags, cmp: TestComponent) => { if (rf & RenderFlags.Create) { ɵɵtext(0, 'before|'); - ɵɵtemplate(1, EmbeddedTemplateA, 1, 0, 'ng-template', ['testdir', '']); + ɵɵtemplate(1, EmbeddedTemplateA, 1, 0, 'ng-template', 0); ɵɵcontainer(2); ɵɵtext(3, '|after'); } @@ -248,7 +250,7 @@ describe('ViewContainerRef', () => { static ngComponentDef = ɵɵdefineComponent({ type: AppComp, selectors: [['app-comp']], - consts: 0, + decls: 0, vars: 0, template: (rf: RenderFlags, cmp: AppComp) => {} }); @@ -264,7 +266,7 @@ describe('ViewContainerRef', () => { static ngComponentDef = ɵɵdefineComponent({ type: DynamicComp, selectors: [['dynamic-comp']], - consts: 0, + decls: 0, vars: 0, template: (rf: RenderFlags, cmp: DynamicComp) => {} }); @@ -320,11 +322,13 @@ describe('ViewContainerRef', () => { describe('getters', () => { it('should work on elements', () => { function createTemplate() { - ɵɵelement(0, 'header', ['vcref', '']); + ɵɵelement(0, 'header', 0); ɵɵelement(1, 'footer'); } - new TemplateFixture(createTemplate, undefined, 2, 0, [DirectiveWithVCRef]); + new TemplateFixture( + createTemplate, undefined, 2, 0, [DirectiveWithVCRef], null, null, undefined, + [['vcref', '']]); expect(directiveInstance !.vcref.element.nativeElement.tagName.toLowerCase()) .toEqual('header'); @@ -339,11 +343,13 @@ describe('ViewContainerRef', () => { createComponent('header-cmp', function(rf: RenderFlags, ctx: any) {}); function createTemplate() { - ɵɵelement(0, 'header-cmp', ['vcref', '']); + ɵɵelement(0, 'header-cmp', 0); ɵɵelement(1, 'footer'); } - new TemplateFixture(createTemplate, undefined, 2, 0, [HeaderComponent, DirectiveWithVCRef]); + new TemplateFixture( + createTemplate, undefined, 2, 0, [HeaderComponent, DirectiveWithVCRef], null, null, + undefined, [['vcref', '']]); expect(directiveInstance !.vcref.element.nativeElement.tagName.toLowerCase()) .toEqual('header-cmp'); @@ -365,7 +371,7 @@ describe('ViewContainerRef', () => { static ngComponentDef = ɵɵdefineComponent({ type: AppCmpt, selectors: [['app']], - consts: 0, + decls: 0, vars: 0, template: (rf: RenderFlags, cmp: AppCmpt) => {} }); @@ -433,11 +439,12 @@ describe('ViewContainerRef', () => { static ngComponentDef = ɵɵdefineComponent({ type: DynamicCompWithViewQueries, selectors: [['dynamic-cmpt-with-view-queries']], - consts: 2, + decls: 2, vars: 0, + consts: [['bar', '']], template: (rf: RenderFlags, ctx: DynamicCompWithViewQueries) => { if (rf & RenderFlags.Create) { - ɵɵelement(0, 'div', ['bar', ''], ['foo', '']); + ɵɵelement(0, 'div', 0, ['foo', '']); } // testing only fooEl = getNativeByIndex(0, getLView()) as RElement; @@ -481,7 +488,7 @@ describe('ViewContainerRef', () => { static ngComponentDef = ɵɵdefineComponent({ type: CompWithListenerThatDestroysItself, selectors: [['comp-with-listener-and-on-destroy']], - consts: 2, + decls: 2, vars: 0, /** */ template: function CompTemplate(rf: RenderFlags, ctx: any) { diff --git a/packages/core/test/render3/view_utils_spec.ts b/packages/core/test/render3/view_utils_spec.ts index 841ef529182be..293838fd44af7 100644 --- a/packages/core/test/render3/view_utils_spec.ts +++ b/packages/core/test/render3/view_utils_spec.ts @@ -12,7 +12,7 @@ import {isLContainer, isLView} from '@angular/core/src/render3/interfaces/type_c describe('view_utils', () => { it('should verify unwrap methods', () => { const div = document.createElement('div'); - const tView = createTView(0, null, 0, 0, null, null, null, null); + const tView = createTView(0, null, 0, 0, null, null, null, null, null); const lView = createLView(null, tView, {}, 0, div, null, {} as any, {} as any, null, null); const tNode = createTNode(null !, null, 3, 0, 'div', []); const lContainer = createLContainer(lView, lView, div, tNode, true); diff --git a/packages/core/test/test_bed_spec.ts b/packages/core/test/test_bed_spec.ts index 7ddc9a5f0a10e..a122f629d3c22 100644 --- a/packages/core/test/test_bed_spec.ts +++ b/packages/core/test/test_bed_spec.ts @@ -509,7 +509,7 @@ describe('TestBed', () => { static ngComponentDef = defineComponent({ type: ComponentClass, selectors: [['comp']], - consts: 1, + decls: 1, vars: 0, template: (rf: any, ctx: any) => { if (rf & 1) { diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts index fb2064600bedf..ded0c9951d70b 100644 --- a/tools/public_api_guard/core/core.d.ts +++ b/tools/public_api_guard/core/core.d.ts @@ -772,7 +772,7 @@ export declare function ɵɵdefineBase(baseDefinition: { export declare function ɵɵdefineComponent(componentDefinition: { type: Type; selectors: CssSelectorList; - consts: number; + decls: number; vars: number; inputs?: { [P in keyof T]?: string | [string, string]; @@ -784,6 +784,7 @@ export declare function ɵɵdefineComponent(componentDefinition: { contentQueries?: ContentQueriesFunction; exportAs?: string[]; template: ComponentTemplate; + consts?: TAttributes[]; ngContentSelectors?: string[]; viewQuery?: ViewQueriesFunction | null; features?: ComponentDefFeature[]; @@ -849,23 +850,23 @@ export declare function ɵɵdirectiveInject(token: Type | InjectionToken | null, consts: number, vars: number, tagName?: string | null, attrs?: TAttributes | null, localRefs?: string[] | null, localRefExtractor?: LocalRefExtractor): void; +export declare function ɵɵtemplate(index: number, templateFn: ComponentTemplate | null, decls: number, vars: number, tagName?: string | null, constsIndex?: number | null, localRefs?: string[] | null, localRefExtractor?: LocalRefExtractor): void; export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: LView): ViewEngine_TemplateRef | null;