',
sourceUrl: '../test.ts'
});
- const c2Mapping =
- mappings.find(mapping => /var _c0 = \[1, "some-class"\];/.test(mapping.generated));
- expect(c2Mapping).toBeDefined();
+ const attrsMapping =
+ mappings.find(mapping => /consts: \[\[1, "some-class"\]\]/.test(mapping.generated));
+ expect(attrsMapping).toBeDefined();
});
});
diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts
index 8f27dd2944..a05323ad25 100644
--- a/packages/compiler/src/render3/view/compiler.ts
+++ b/packages/compiler/src/render3/view/compiler.ts
@@ -240,12 +240,18 @@ export function compileComponentFromMetadata(
definitionMap.set('ngContentSelectors', ngContentSelectors);
}
- // e.g. `consts: 2`
- definitionMap.set('consts', o.literal(templateBuilder.getConstCount()));
+ // e.g. `decls: 2`
+ definitionMap.set('decls', o.literal(templateBuilder.getConstCount()));
// e.g. `vars: 2`
definitionMap.set('vars', o.literal(templateBuilder.getVarCount()));
+ // e.g. `consts: [['one', 'two'], ['three', 'four']]
+ const consts = templateBuilder.getConsts();
+ if (consts.length > 0) {
+ definitionMap.set('consts', o.literalArr(consts));
+ }
+
definitionMap.set('template', templateFunctionExpression);
// e.g. `directives: [MyDirective]`
diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts
index 4036f7bc32..5786805778 100644
--- a/packages/compiler/src/render3/view/template.ts
+++ b/packages/compiler/src/render3/view/template.ts
@@ -165,8 +165,8 @@ export class TemplateDefinitionBuilder implements t.Visitor
, LocalResolver
private templateIndex: number|null, private templateName: string|null,
private directiveMatcher: SelectorMatcher|null, private directives: Set,
private pipeTypeByName: Map, private pipes: Set,
- private _namespace: o.ExternalReference, private relativeContextFilePath: string,
- private i18nUseExternalIds: boolean) {
+ private _namespace: o.ExternalReference, relativeContextFilePath: string,
+ private i18nUseExternalIds: boolean, private _constants: o.Expression[] = []) {
this._bindingScope = parentBindingScope.nestedScope(level);
// Turn the relative context file path into an identifier by replacing non-alphanumeric
@@ -606,7 +606,7 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver
// add attributes for directive and projection matching purposes
attributes.push(...this.prepareNonRenderAttrs(
allOtherInputs, element.outputs, stylingBuilder, [], i18nAttrs, ngProjectAsAttr));
- parameters.push(this.toAttrsParam(attributes));
+ parameters.push(this.addConstants(attributes));
// local refs (ex.: )
parameters.push(this.prepareRefsParameter(element.references));
@@ -869,7 +869,7 @@ export class TemplateDefinitionBuilder implements t.Visitor
, LocalResolver
(a: t.TextAttribute) => { attrsExprs.push(asLiteral(a.name), asLiteral(a.value)); });
attrsExprs.push(...this.prepareNonRenderAttrs(
template.inputs, template.outputs, undefined, template.templateAttrs));
- parameters.push(this.toAttrsParam(attrsExprs));
+ parameters.push(this.addConstants(attrsExprs));
// local refs (ex.: )
if (template.references && template.references.length) {
@@ -881,7 +881,8 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver
const templateVisitor = new TemplateDefinitionBuilder(
this.constantPool, this._bindingScope, this.level + 1, contextName, this.i18n,
templateIndex, templateName, this.directiveMatcher, this.directives, this.pipeTypeByName,
- this.pipes, this._namespace, this.fileBasedI18nSuffix, this.i18nUseExternalIds);
+ this.pipes, this._namespace, this.fileBasedI18nSuffix, this.i18nUseExternalIds,
+ this._constants);
// Nested templates must not be visited until after their parent templates have completed
// processing, so they are queued here until after the initial pass. Otherwise, we wouldn't
@@ -1020,6 +1021,8 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver
getVarCount() { return this._pureFunctionSlots; }
+ getConsts() { return this._constants; }
+
getNgContentSelectors(): o.Expression|null {
return this._ngContentReservedSlots.length ?
this.constantPool.getConstLiteral(asLiteral(this._ngContentReservedSlots), true) :
@@ -1291,10 +1294,21 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver
return attrExprs;
}
- private toAttrsParam(attrsExprs: o.Expression[]): o.Expression {
- return attrsExprs.length > 0 ?
- this.constantPool.getConstLiteral(o.literalArr(attrsExprs), true) :
- o.TYPED_NULL_EXPR;
+ private addConstants(constExprs: o.Expression[]): o.LiteralExpr {
+ if (constExprs.length > 0) {
+ const literal = o.literalArr(constExprs);
+
+ // Try to reuse a literal that's already in the array, if possible.
+ for (let i = 0; i < this._constants.length; i++) {
+ if (this._constants[i].isEquivalent(literal)) {
+ return o.literal(i);
+ }
+ }
+
+ return o.literal(this._constants.push(literal) - 1);
+ }
+
+ return o.TYPED_NULL_EXPR;
}
private prepareRefsParameter(references: t.Reference[]): o.Expression {
diff --git a/packages/core/src/render3/VIEW_DATA.md b/packages/core/src/render3/VIEW_DATA.md
index 4c0def5770..0ada819d25 100644
--- a/packages/core/src/render3/VIEW_DATA.md
+++ b/packages/core/src/render3/VIEW_DATA.md
@@ -14,7 +14,7 @@ The layout is as such:
| Section | `LView` | `TView.data`
| ---------- | ------------------------------------------------------------ | --------------------------------------------------
| `HEADER` | contextual data | mostly `null`
-| `CONSTS` | DOM, pipe, and local ref instances |
+| `DECLS` | DOM, pipe, and local ref instances |
| `VARS` | binding values | property names
| `EXPANDO` | host bindings; directive instances; providers; dynamic nodes | host prop names; directive tokens; provider tokens; `null`
@@ -25,10 +25,10 @@ The layout is as such:
Mostly information such as parent `LView`, `Sanitizer`, `TView`, and many more bits of information needed for template rendering.
-## `CONSTS`
+## `DECLS`
-`CONSTS` contain the DOM elements, pipe instances, and local refs.
-The size of the `CONSTS` section is declared in the property `consts` of the component definition.
+`DECLS` contain the DOM elements, pipe instances, and local refs.
+The size of the `DECLS` section is declared in the property `decls` of the component definition.
```typescript
@Component({
@@ -38,7 +38,7 @@ class MyApp {
static ngComponentDef = ɵɵdefineComponent({
...,
- consts: 5,
+ decls: 5,
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div');
@@ -89,7 +89,7 @@ class MyApp {
static ngComponentDef = ɵɵdefineComponent({
...,
- consts: 2, // Two DOM Elements.
+ decls: 2, // Two DOM Elements.
vars: 2, // Two bindings.
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
@@ -142,7 +142,7 @@ class MyApp {
static ngComponentDef = ɵɵdefineComponent({
...,
- consts: 1,
+ decls: 1,
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
ɵɵelement(0, 'child', ['tooltip', null]);
@@ -276,7 +276,7 @@ class MyApp {
static ngComponentDef = ɵɵdefineComponent({
...,
- consts: 1,
+ decls: 1,
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
ɵɵelement(0, 'child');
diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts
index bd1e0306a7..0164b4f670 100644
--- a/packages/core/src/render3/component.ts
+++ b/packages/core/src/render3/component.ts
@@ -128,7 +128,7 @@ export function renderComponent(
const rootContext = createRootContext(opts.scheduler, opts.playerHandler);
const renderer = rendererFactory.createRenderer(hostRNode, componentDef);
- const rootTView = createTView(-1, null, 1, 0, null, null, null, null);
+ const rootTView = createTView(-1, null, 1, 0, null, null, null, null, null);
const rootView: LView = createLView(
null, rootTView, rootContext, rootFlags, null, null, rendererFactory, renderer, undefined,
opts.injector || null);
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
index 23dba94988..7638973919 100644
--- a/packages/core/src/render3/component_ref.ts
+++ b/packages/core/src/render3/component_ref.ts
@@ -161,7 +161,7 @@ export class ComponentFactory extends viewEngine_ComponentFactory {
}
// Create the root view. Uses empty TView and ContentTemplate.
- const rootTView = createTView(-1, null, 1, 0, null, null, null, null);
+ const rootTView = createTView(-1, null, 1, 0, null, null, null, null, null);
const rootLView = createLView(
null, rootTView, rootContext, rootFlags, null, null, rendererFactory, renderer, sanitizer,
rootViewInjector);
diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts
index f07c050da6..74d9d8d7cc 100644
--- a/packages/core/src/render3/definition.ts
+++ b/packages/core/src/render3/definition.ts
@@ -18,6 +18,7 @@ import {stringify} from '../util/stringify';
import {EMPTY_ARRAY, EMPTY_OBJ} from './empty';
import {NG_BASE_DEF, NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF, NG_LOCALE_ID_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields';
import {ComponentDef, ComponentDefFeature, ComponentTemplate, ComponentType, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, FactoryFn, HostBindingsFunction, PipeDef, PipeType, PipeTypesOrFactory, ViewQueriesFunction, ɵɵBaseDef} from './interfaces/definition';
+import {TAttributes} from './interfaces/node';
// while SelectorFlags is unused here, it's required so that types don't get resolved lazily
// see: https://github.com/Microsoft/web-build-tools/issues/1050
import {CssSelectorList, SelectorFlags} from './interfaces/projection';
@@ -56,7 +57,7 @@ export function ɵɵdefineComponent(componentDefinition: {
* can pre-fill the array and set the binding start index.
*/
// TODO(kara): remove queries from this count
- consts: number;
+ decls: number;
/**
* The number of bindings in this component template (including pure fn bindings).
@@ -171,6 +172,9 @@ export function ɵɵdefineComponent(componentDefinition: {
*/
template: ComponentTemplate;
+ /** Constants for the nodes in the component's view. */
+ consts?: TAttributes[];
+
/**
* An array of `ngContent[selector]` values that were found in the template.
*/
@@ -248,10 +252,11 @@ export function ɵɵdefineComponent(componentDefinition: {
const def: Mutable, keyof ComponentDef> = {
type: type,
providersResolver: null,
- consts: componentDefinition.consts,
+ decls: componentDefinition.decls,
vars: componentDefinition.vars,
factory: null,
template: componentDefinition.template || null !,
+ consts: componentDefinition.consts || null,
ngContentSelectors: componentDefinition.ngContentSelectors,
hostBindings: componentDefinition.hostBindings || null,
contentQueries: componentDefinition.contentQueries || null,
diff --git a/packages/core/src/render3/features/providers_feature.ts b/packages/core/src/render3/features/providers_feature.ts
index cecf406970..c0e3255a1b 100644
--- a/packages/core/src/render3/features/providers_feature.ts
+++ b/packages/core/src/render3/features/providers_feature.ts
@@ -22,7 +22,7 @@ import {DirectiveDef} from '../interfaces/definition';
* type: ComponentWithProviders,
* selectors: [['component-with-providers']],
* factory: () => new ComponentWithProviders(directiveInject(GreeterDE as any)),
- * consts: 1,
+ * decls: 1,
* vars: 1,
* template: function(fs: RenderFlags, ctx: ComponentWithProviders) {
* if (fs & RenderFlags.Create) {
diff --git a/packages/core/src/render3/instructions/container.ts b/packages/core/src/render3/instructions/container.ts
index be44d2e72c..1a2375786f 100644
--- a/packages/core/src/render3/instructions/container.ts
+++ b/packages/core/src/render3/instructions/container.ts
@@ -53,10 +53,10 @@ export function ɵɵcontainer(index: number): void {
*
* @param index The index of the container in the data array
* @param templateFn Inline template
- * @param consts The number of nodes, local refs, and pipes for this template
+ * @param decls The number of nodes, local refs, and pipes for this template
* @param vars The number of bindings for this template
* @param tagName The name of the container element, if applicable
- * @param attrs The attrs attached to the container, if applicable
+ * @param constsIndex Index of template in the `consts` array.
* @param localRefs A set of local reference bindings on the element.
* @param localRefExtractor A function which extracts local-refs values from the template.
* Defaults to the current element associated with the local-ref.
@@ -64,22 +64,25 @@ export function ɵɵcontainer(index: number): void {
* @codeGenApi
*/
export function ɵɵtemplate(
- index: number, templateFn: ComponentTemplate| null, consts: number, vars: number,
- tagName?: string | null, attrs?: TAttributes | null, localRefs?: string[] | null,
+ index: number, templateFn: ComponentTemplate| null, decls: number, vars: number,
+ tagName?: string | null, constsIndex?: number | null, localRefs?: string[] | null,
localRefExtractor?: LocalRefExtractor) {
const lView = getLView();
const tView = lView[TVIEW];
+ const tViewConsts = tView.consts;
// TODO: consider a separate node type for templates
- const tContainerNode = containerInternal(lView, index, tagName || null, attrs || null);
+ const tContainerNode = containerInternal(
+ lView, index, tagName || null,
+ tViewConsts === null || constsIndex == null ? null : tViewConsts[constsIndex]);
if (tView.firstTemplatePass) {
ngDevMode && ngDevMode.firstTemplatePass++;
resolveDirectives(tView, lView, tContainerNode, localRefs || null);
registerPostOrderHooks(tView, tContainerNode);
const embeddedTView = tContainerNode.tViews = createTView(
- -1, templateFn, consts, vars, tView.directiveRegistry, tView.pipeRegistry, null,
- tView.schemas);
+ -1, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null,
+ tView.schemas, tViewConsts);
const embeddedTViewNode = createTNode(tView, null, TNodeType.View, -1, null, null) as TViewNode;
embeddedTViewNode.injectorIndex = tContainerNode.injectorIndex;
embeddedTView.node = embeddedTViewNode;
diff --git a/packages/core/src/render3/instructions/element.ts b/packages/core/src/render3/instructions/element.ts
index c42c9e5860..5e1c9c9936 100644
--- a/packages/core/src/render3/instructions/element.ts
+++ b/packages/core/src/render3/instructions/element.ts
@@ -32,8 +32,7 @@ import {registerInitialStylingOnTNode} from './styling';
*
* @param index Index of the element in the LView array
* @param name Name of the DOM Node
- * @param attrs Statically bound set of attributes, classes, and styles to be written into the DOM
- * element on creation. Use [AttributeMarker] to denote the meaning of this array.
+ * @param constsIndex Index of the element in the `consts` array.
* @param localRefs A set of local reference bindings on the element.
*
* Attributes and localRefs are passed as an array of strings where elements with an even index
@@ -43,24 +42,25 @@ import {registerInitialStylingOnTNode} from './styling';
* @codeGenApi
*/
export function ɵɵelementStart(
- index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void {
+ index: number, name: string, constsIndex?: number | null, localRefs?: string[] | null): void {
const lView = getLView();
const tView = lView[TVIEW];
+ const tViewConsts = tView.consts;
+ const consts = tViewConsts === null || constsIndex == null ? null : tViewConsts[constsIndex];
ngDevMode && assertEqual(
lView[BINDING_INDEX], tView.bindingStartIndex,
- 'elements should be created before any bindings ');
+ 'elements should be created before any bindings');
ngDevMode && ngDevMode.rendererCreateElement++;
ngDevMode && assertDataInRange(lView, index + HEADER_OFFSET);
const renderer = lView[RENDERER];
const native = lView[index + HEADER_OFFSET] = elementCreate(name, renderer, getNamespace());
- const tNode =
- getOrCreateTNode(tView, lView[T_HOST], index, TNodeType.Element, name, attrs || null);
+ const tNode = getOrCreateTNode(tView, lView[T_HOST], index, TNodeType.Element, name, consts);
- if (attrs != null) {
- const lastAttrIndex = setUpAttributes(renderer, native, attrs);
+ if (consts != null) {
+ const lastAttrIndex = setUpAttributes(renderer, native, consts);
if (tView.firstTemplatePass) {
- registerInitialStylingOnTNode(tNode, attrs, lastAttrIndex);
+ registerInitialStylingOnTNode(tNode, consts, lastAttrIndex);
}
}
@@ -146,15 +146,14 @@ export function ɵɵelementEnd(): void {
*
* @param index Index of the element in the data array
* @param name Name of the DOM Node
- * @param attrs Statically bound set of attributes, classes, and styles to be written into the DOM
- * element on creation. Use [AttributeMarker] to denote the meaning of this array.
+ * @param constsIndex Index of the element in the `consts` array.
* @param localRefs A set of local reference bindings on the element.
*
* @codeGenApi
*/
export function ɵɵelement(
- index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void {
- ɵɵelementStart(index, name, attrs, localRefs);
+ index: number, name: string, constsIndex?: number | null, localRefs?: string[] | null): void {
+ ɵɵelementStart(index, name, constsIndex, localRefs);
ɵɵelementEnd();
}
diff --git a/packages/core/src/render3/instructions/element_container.ts b/packages/core/src/render3/instructions/element_container.ts
index b977bb016f..92b8392039 100644
--- a/packages/core/src/render3/instructions/element_container.ts
+++ b/packages/core/src/render3/instructions/element_container.ts
@@ -26,7 +26,7 @@ import {registerInitialStylingOnTNode} from './styling';
* The instruction must later be followed by `elementContainerEnd()` call.
*
* @param index Index of the element in the LView array
- * @param attrs Set of attributes to be used when matching directives.
+ * @param constsIndex Index of the container in the `consts` array.
* @param localRefs A set of local reference bindings on the element.
*
* Even if this instruction accepts a set of attributes no actual attribute values are propagated to
@@ -36,11 +36,13 @@ import {registerInitialStylingOnTNode} from './styling';
* @codeGenApi
*/
export function ɵɵelementContainerStart(
- index: number, attrs?: TAttributes | null, localRefs?: string[] | null): void {
+ index: number, constsIndex?: number | null, localRefs?: string[] | null): void {
const lView = getLView();
const tView = lView[TVIEW];
const renderer = lView[RENDERER];
const tagName = 'ng-container';
+ const tViewConsts = tView.consts;
+ const consts = tViewConsts === null || constsIndex == null ? null : tViewConsts[constsIndex];
ngDevMode && assertEqual(
lView[BINDING_INDEX], tView.bindingStartIndex,
'element containers should be created before any bindings');
@@ -50,14 +52,13 @@ export function ɵɵelementContainerStart(
const native = lView[index + HEADER_OFFSET] = renderer.createComment(ngDevMode ? tagName : '');
ngDevMode && assertDataInRange(lView, index - 1);
- const tNode = getOrCreateTNode(
- tView, lView[T_HOST], index, TNodeType.ElementContainer, tagName, attrs || null);
+ const tNode =
+ getOrCreateTNode(tView, lView[T_HOST], index, TNodeType.ElementContainer, tagName, consts);
-
- if (attrs && tView.firstTemplatePass) {
+ if (consts && tView.firstTemplatePass) {
// While ng-container doesn't necessarily support styling, we use the style context to identify
// and execute directives on the ng-container.
- registerInitialStylingOnTNode(tNode, attrs as TAttributes, 0);
+ registerInitialStylingOnTNode(tNode, consts as TAttributes, 0);
}
appendChild(native, tNode, lView);
@@ -113,13 +114,13 @@ export function ɵɵelementContainerEnd(): void {
* and {@link elementContainerEnd}
*
* @param index Index of the element in the LView array
- * @param attrs Set of attributes to be used when matching directives.
+ * @param constsIndex Index of the container in the `consts` array.
* @param localRefs A set of local reference bindings on the element.
*
* @codeGenApi
*/
export function ɵɵelementContainer(
- index: number, attrs?: TAttributes | null, localRefs?: string[] | null): void {
- ɵɵelementContainerStart(index, attrs, localRefs);
+ index: number, constsIndex?: number | null, localRefs?: string[] | null): void {
+ ɵɵelementContainerStart(index, constsIndex, localRefs);
ɵɵelementContainerEnd();
}
diff --git a/packages/core/src/render3/instructions/embedded_view.ts b/packages/core/src/render3/instructions/embedded_view.ts
index a366833d9a..0ceeaf309e 100644
--- a/packages/core/src/render3/instructions/embedded_view.ts
+++ b/packages/core/src/render3/instructions/embedded_view.ts
@@ -28,8 +28,7 @@ import {assignTViewNodeToLView, createLView, createTView, refreshView, renderVie
*
* @codeGenApi
*/
-export function ɵɵembeddedViewStart(
- viewBlockId: number, consts: number, vars: number): RenderFlags {
+export function ɵɵembeddedViewStart(viewBlockId: number, decls: number, vars: number): RenderFlags {
const lView = getLView();
const previousOrParentTNode = getPreviousOrParentTNode();
// The previous node can be a view node if we are processing an inline for loop
@@ -47,9 +46,8 @@ export function ɵɵembeddedViewStart(
} else {
// When we create a new LView, we always reset the state of the instructions.
viewToRender = createLView(
- lView,
- getOrCreateEmbeddedTView(viewBlockId, consts, vars, containerTNode as TContainerNode), null,
- LViewFlags.CheckAlways, null, null);
+ lView, getOrCreateEmbeddedTView(viewBlockId, decls, vars, containerTNode as TContainerNode),
+ null, LViewFlags.CheckAlways, null, null);
const tParentNode = getIsParent() ? previousOrParentTNode :
previousOrParentTNode && previousOrParentTNode.parent;
@@ -75,13 +73,13 @@ export function ɵɵembeddedViewStart(
* it with the same index (since it's in the same template).
*
* @param viewIndex The index of the TView in TNode.tViews
- * @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 vars The number of bindings and pure function bindings in this template
* @param container The parent container in which to look for the view's static data
* @returns TView
*/
function getOrCreateEmbeddedTView(
- viewIndex: number, consts: number, vars: number, parent: TContainerNode): TView {
+ viewIndex: number, decls: number, vars: number, parent: TContainerNode): TView {
const tView = getLView()[TVIEW];
ngDevMode && assertNodeType(parent, TNodeType.Container);
const containerTViews = parent.tViews as TView[];
@@ -89,7 +87,8 @@ function getOrCreateEmbeddedTView(
ngDevMode && assertEqual(Array.isArray(containerTViews), true, 'TViews should be in an array');
if (viewIndex >= containerTViews.length || containerTViews[viewIndex] == null) {
containerTViews[viewIndex] = createTView(
- viewIndex, null, consts, vars, tView.directiveRegistry, tView.pipeRegistry, null, null);
+ viewIndex, null, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, null,
+ tView.consts);
}
return containerTViews[viewIndex];
}
diff --git a/packages/core/src/render3/instructions/lview_debug.ts b/packages/core/src/render3/instructions/lview_debug.ts
index fe8e0bcc55..a6d647f79d 100644
--- a/packages/core/src/render3/instructions/lview_debug.ts
+++ b/packages/core/src/render3/instructions/lview_debug.ts
@@ -14,7 +14,7 @@ import {initNgDevMode} from '../../util/ng_dev_mode';
import {ACTIVE_INDEX, CONTAINER_HEADER_OFFSET, LContainer, MOVED_VIEWS, NATIVE} from '../interfaces/container';
import {DirectiveDefList, PipeDefList, ViewQueriesFunction} from '../interfaces/definition';
import {COMMENT_MARKER, ELEMENT_MARKER, I18nMutateOpCode, I18nMutateOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, TIcu} from '../interfaces/i18n';
-import {PropertyAliases, TContainerNode, TElementNode, TNode as ITNode, TNode, TNodeFlags, TNodeProviderIndexes, TNodeType, TViewNode} from '../interfaces/node';
+import {PropertyAliases, TAttributes, TContainerNode, TElementNode, TNode as ITNode, TNode, TNodeFlags, TNodeProviderIndexes, TNodeType, TViewNode} from '../interfaces/node';
import {SelectorFlags} from '../interfaces/projection';
import {TQueries} from '../interfaces/query';
import {RComment, RElement, RNode} from '../interfaces/renderer';
@@ -102,6 +102,7 @@ export const TViewConstructor = class TView implements ITView {
public pipeRegistry: PipeDefList|null, //
public firstChild: TNode|null, //
public schemas: SchemaMetadata[]|null, //
+ public consts: TAttributes[]|null, //
) {}
get template_(): string {
diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts
index 0b9d24a3ce..54198b7031 100644
--- a/packages/core/src/render3/instructions/shared.ts
+++ b/packages/core/src/render3/instructions/shared.ts
@@ -569,8 +569,8 @@ export function saveResolvedLocalsInData(
*/
export function getOrCreateTView(def: ComponentDef): TView {
return def.tView || (def.tView = createTView(
- -1, def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs,
- def.viewQuery, def.schemas));
+ -1, def.template, def.decls, def.vars, def.directiveDefs, def.pipeDefs,
+ def.viewQuery, def.schemas, def.consts));
}
@@ -579,18 +579,20 @@ export function getOrCreateTView(def: ComponentDef): TView {
*
* @param viewIndex The viewBlockId for inline views, or -1 if it's a component/dynamic
* @param templateFn Template function
- * @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 directives Registry of directives for this view
* @param pipes Registry of pipes for this view
* @param viewQuery View queries for this view
* @param schemas Schemas for this view
+ * @param consts Constants for this view
*/
export function createTView(
- viewIndex: number, templateFn: ComponentTemplate| null, consts: number, vars: number,
+ viewIndex: number, templateFn: ComponentTemplate| null, decls: number, vars: number,
directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
- viewQuery: ViewQueriesFunction| null, schemas: SchemaMetadata[] | null): TView {
+ viewQuery: ViewQueriesFunction| null, schemas: SchemaMetadata[] | null,
+ consts: TAttributes[] | null): TView {
ngDevMode && ngDevMode.tView++;
- const bindingStartIndex = HEADER_OFFSET + consts;
+ const bindingStartIndex = HEADER_OFFSET + decls;
// This length does not yet contain host bindings from child directives because at this point,
// we don't know which directives are active on this template. As soon as a directive is matched
// that has a host binding, we will update the blueprint with that def's hostVars count.
@@ -627,7 +629,7 @@ export function createTView(
typeof pipes === 'function' ? pipes() : pipes, // pipeRegistry: PipeDefList|null,
null, // firstChild: TNode|null,
schemas, // schemas: SchemaMetadata[]|null,
- ) :
+ consts) : // consts: TAttributes[]
{
id: viewIndex,
blueprint: blueprint,
@@ -656,6 +658,7 @@ export function createTView(
pipeRegistry: typeof pipes === 'function' ? pipes() : pipes,
firstChild: null,
schemas: schemas,
+ consts: consts,
};
}
diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts
index 7163729828..88d0749f33 100644
--- a/packages/core/src/render3/interfaces/definition.ts
+++ b/packages/core/src/render3/interfaces/definition.ts
@@ -9,6 +9,8 @@
import {SchemaMetadata, ViewEncapsulation} from '../../core';
import {ProcessProvidersFunction} from '../../di/interface/provider';
import {Type} from '../../interface/type';
+
+import {TAttributes} from './node';
import {CssSelectorList} from './projection';
import {TView} from './view';
@@ -241,6 +243,9 @@ export interface ComponentDef extends DirectiveDef {
*/
readonly template: ComponentTemplate;
+ /** Constants associated with the component's view. */
+ readonly consts: TAttributes[]|null;
+
/**
* An array of `ngContent[selector]` values that were found in the template.
*/
@@ -258,7 +263,7 @@ export interface ComponentDef extends DirectiveDef {
* can pre-fill the array and set the binding start index.
*/
// TODO(kara): remove queries from this count
- readonly consts: number;
+ readonly decls: number;
/**
* The number of bindings in this component template (including pure fn bindings).
diff --git a/packages/core/src/render3/interfaces/view.ts b/packages/core/src/render3/interfaces/view.ts
index b00704aec3..7c0aab9196 100644
--- a/packages/core/src/render3/interfaces/view.ts
+++ b/packages/core/src/render3/interfaces/view.ts
@@ -15,7 +15,7 @@ import {Sanitizer} from '../../sanitization/sanitizer';
import {LContainer} from './container';
import {ComponentDef, ComponentTemplate, DirectiveDef, DirectiveDefList, HostBindingsFunction, PipeDef, PipeDefList, ViewQueriesFunction} from './definition';
import {I18nUpdateOpCodes, TI18n} from './i18n';
-import {TElementNode, TNode, TViewNode} from './node';
+import {TAttributes, TElementNode, TNode, TViewNode} from './node';
import {PlayerHandler} from './player';
import {LQueries, TQueries} from './query';
import {RElement, Renderer3, RendererFactory3} from './renderer';
@@ -387,7 +387,7 @@ export interface TView {
/**
* The index where the "expando" section of `LView` begins. The expando
* section contains injectors, directive instances, and host binding values.
- * Unlike the "consts" and "vars" sections of `LView`, the length of this
+ * Unlike the "decls" and "vars" sections of `LView`, the length of this
* section cannot be calculated at compile-time because directives are matched
* at runtime to preserve locality.
*
@@ -561,6 +561,12 @@ export interface TView {
* Set of schemas that declare elements to be allowed inside the view.
*/
schemas: SchemaMetadata[]|null;
+
+ /**
+ * Array of attributes for all of the elements in the view. Used
+ * for directive matching and attribute bindings.
+ */
+ consts: TAttributes[]|null;
}
export const enum RootContextFlags {Empty = 0b00, DetectChanges = 0b01, FlushPlayers = 0b10}
diff --git a/packages/core/src/render3/pure_function.ts b/packages/core/src/render3/pure_function.ts
index 62f3fd7ea2..d0c5cc59ac 100644
--- a/packages/core/src/render3/pure_function.ts
+++ b/packages/core/src/render3/pure_function.ts
@@ -14,7 +14,7 @@ import {isCreationMode} from './util/view_utils';
/**
* Bindings for pure functions are stored after regular bindings.
*
- * |------consts------|---------vars---------| |----- hostVars (dir1) ------|
+ * |-------decls------|---------vars---------| |----- hostVars (dir1) ------|
* ------------------------------------------------------------------------------------------
* | nodes/refs/pipes | bindings | fn slots | injector | dir1 | host bindings | host slots |
* ------------------------------------------------------------------------------------------
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
index bb63b82b26..a8bea9dbbc 100644
--- a/packages/core/test/bundling/todo/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -320,66 +320,6 @@
{
"name": "_c1"
},
- {
- "name": "_c10"
- },
- {
- "name": "_c11"
- },
- {
- "name": "_c12"
- },
- {
- "name": "_c13"
- },
- {
- "name": "_c14"
- },
- {
- "name": "_c15"
- },
- {
- "name": "_c16"
- },
- {
- "name": "_c17"
- },
- {
- "name": "_c18"
- },
- {
- "name": "_c19"
- },
- {
- "name": "_c2"
- },
- {
- "name": "_c20"
- },
- {
- "name": "_c21"
- },
- {
- "name": "_c3"
- },
- {
- "name": "_c4"
- },
- {
- "name": "_c5"
- },
- {
- "name": "_c6"
- },
- {
- "name": "_c7"
- },
- {
- "name": "_c8"
- },
- {
- "name": "_c9"
- },
{
"name": "_currentInjector"
},
diff --git a/packages/core/test/render3/basic_perf.ts b/packages/core/test/render3/basic_perf.ts
index c1c9d55081..7a8a371501 100644
--- a/packages/core/test/render3/basic_perf.ts
+++ b/packages/core/test/render3/basic_perf.ts
@@ -37,7 +37,7 @@ describe('iv perf test', () => {
static ngComponentDef = ɵɵdefineComponent({
type: Component,
selectors: [['div']],
- consts: 1,
+ decls: 1,
vars: 0,
template: function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
diff --git a/packages/core/test/render3/change_detection_spec.ts b/packages/core/test/render3/change_detection_spec.ts
index e91403c0b9..f331676993 100644
--- a/packages/core/test/render3/change_detection_spec.ts
+++ b/packages/core/test/render3/change_detection_spec.ts
@@ -29,7 +29,7 @@ describe('change detection', () => {
static ngComponentDef = ɵɵdefineComponent({
type: MyComponent,
selectors: [['my-comp']],
- consts: 2,
+ decls: 2,
vars: 1,
template: (rf: RenderFlags, ctx: MyComponent) => {
if (rf & RenderFlags.Create) {
@@ -105,7 +105,7 @@ describe('change detection', () => {
static ngComponentDef = ɵɵdefineComponent({
type: MyComponent,
selectors: [['my-comp']],
- consts: 2,
+ decls: 2,
vars: 2,
/**
* {{ doCheckCount }} - {{ name }}
@@ -143,7 +143,7 @@ describe('change detection', () => {
static ngComponentDef = ɵɵdefineComponent({
type: ManualComponent,
selectors: [['manual-comp']],
- consts: 2,
+ decls: 2,
vars: 2,
/**
* {{ doCheckCount }} - {{ name }}
@@ -179,7 +179,7 @@ describe('change detection', () => {
static ngComponentDef = ɵɵdefineComponent({
type: ManualApp,
selectors: [['manual-app']],
- consts: 1,
+ decls: 1,
vars: 1,
/** */
template: (rf: RenderFlags, ctx: ManualApp) => {
@@ -234,7 +234,7 @@ describe('change detection', () => {
static ngComponentDef = ɵɵdefineComponent({
type: ButtonParent,
selectors: [['button-parent']],
- consts: 2,
+ decls: 2,
vars: 1,
/** {{ doCheckCount }} - */
template: (rf: RenderFlags, ctx: ButtonParent) => {
@@ -311,7 +311,7 @@ describe('change detection', () => {
static ngComponentDef = ɵɵdefineComponent({
type: MyComponent,
selectors: [['my-comp']],
- consts: 1,
+ decls: 1,
vars: 1,
template: (rf: RenderFlags, ctx: MyComponent) => {
if (rf & RenderFlags.Create) {
diff --git a/packages/core/test/render3/component_ref_spec.ts b/packages/core/test/render3/component_ref_spec.ts
index 10894f2f4d..f2becf5258 100644
--- a/packages/core/test/render3/component_ref_spec.ts
+++ b/packages/core/test/render3/component_ref_spec.ts
@@ -24,7 +24,7 @@ describe('ComponentFactory', () => {
static ngComponentDef = ɵɵdefineComponent({
type: TestComponent,
selectors: [['test', 'foo'], ['bar']],
- consts: 0,
+ decls: 0,
vars: 0,
template: () => undefined,
});
@@ -46,7 +46,7 @@ describe('ComponentFactory', () => {
type: TestComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['test', 'foo'], ['bar']],
- consts: 0,
+ decls: 0,
vars: 0,
template: () => undefined,
ngContentSelectors: ['*', 'a', 'b'],
@@ -94,7 +94,7 @@ describe('ComponentFactory', () => {
type: TestComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['test']],
- consts: 0,
+ decls: 0,
vars: 0,
template: () => undefined,
});
diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts
index ec394d28f0..30f55c0295 100644
--- a/packages/core/test/render3/component_spec.ts
+++ b/packages/core/test/render3/component_spec.ts
@@ -26,7 +26,7 @@ describe('component', () => {
type: CounterComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['counter']],
- consts: 1,
+ decls: 1,
vars: 1,
template: function(rf: RenderFlags, ctx: CounterComponent) {
if (rf & RenderFlags.Create) {
@@ -76,7 +76,7 @@ describe('component', () => {
type: MyComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['my-component']],
- consts: 1,
+ decls: 1,
vars: 1,
template: function(fs: RenderFlags, ctx: MyComponent) {
if (fs & RenderFlags.Create) {
@@ -119,7 +119,7 @@ describe('component', () => {
static ngComponentDef = ɵɵdefineComponent({
type: Comp,
selectors: [['comp']],
- consts: 1,
+ decls: 1,
vars: 1,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
@@ -178,9 +178,10 @@ it('should not invoke renderer destroy method for embedded views', () => {
static ngComponentDef = ɵɵdefineComponent({
type: Comp,
selectors: [['comp']],
- consts: 3,
+ decls: 3,
vars: 1,
directives: [NgIf],
+ consts: [[AttributeMarker.Template, 'ngIf']],
/**
* Root view
* Child view
@@ -190,8 +191,7 @@ it('should not invoke renderer destroy method for embedded views', () => {
ɵɵelementStart(0, 'div');
ɵɵtext(1, 'Root view');
ɵɵelementEnd();
- ɵɵtemplate(
- 2, MyComponent_div_Template_2, 2, 0, 'div', [AttributeMarker.Template, 'ngIf']);
+ ɵɵtemplate(2, MyComponent_div_Template_2, 2, 0, 'div', 0);
}
if (rf & RenderFlags.Update) {
ɵɵadvance(2);
@@ -252,7 +252,7 @@ describe('component with a container', () => {
type: WrapperComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['wrapper']],
- consts: 1,
+ decls: 1,
vars: 0,
template: function ChildComponentTemplate(rf: RenderFlags, ctx: {items: string[]}) {
if (rf & RenderFlags.Create) {
@@ -329,7 +329,7 @@ describe('recursive components', () => {
type: TreeComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['tree-comp']],
- consts: 3,
+ decls: 3,
vars: 1,
template: (rf: RenderFlags, ctx: TreeComponent) => {
if (rf & RenderFlags.Create) {
@@ -395,18 +395,14 @@ describe('recursive components', () => {
type: NgIfTree,
encapsulation: ViewEncapsulation.None,
selectors: [['ng-if-tree']],
- consts: 3,
+ decls: 3,
vars: 3,
+ consts: [[AttributeMarker.Bindings, 'data', AttributeMarker.Template, 'ngIf']],
template: (rf: RenderFlags, ctx: NgIfTree) => {
-
if (rf & RenderFlags.Create) {
ɵɵtext(0);
- ɵɵtemplate(
- 1, IfTemplate, 1, 1, 'ng-if-tree',
- [AttributeMarker.Bindings, 'data', AttributeMarker.Template, 'ngIf']);
- ɵɵtemplate(
- 2, IfTemplate2, 1, 1, 'ng-if-tree',
- [AttributeMarker.Bindings, 'data', AttributeMarker.Template, 'ngIf']);
+ ɵɵtemplate(1, IfTemplate, 1, 1, 'ng-if-tree', 0);
+ ɵɵtemplate(2, IfTemplate2, 1, 1, 'ng-if-tree', 0);
}
if (rf & RenderFlags.Update) {
ɵɵtextInterpolate(ctx.data.value);
@@ -415,7 +411,6 @@ describe('recursive components', () => {
ɵɵadvance(1);
ɵɵproperty('ngIf', ctx.data.right);
}
-
},
inputs: {data: 'data'},
});
@@ -543,7 +538,7 @@ describe('recursive components', () => {
encapsulation: ViewEncapsulation.None,
selectors: [['test-inputs']],
inputs: {minifiedName: 'unminifiedName'},
- consts: 0,
+ decls: 0,
vars: 0,
template: function(rf: RenderFlags, ctx: TestInputsComponent): void {
// Template not needed for this test
diff --git a/packages/core/test/render3/control_flow_spec.ts b/packages/core/test/render3/control_flow_spec.ts
index 0c491d5351..c03825bb85 100644
--- a/packages/core/test/render3/control_flow_spec.ts
+++ b/packages/core/test/render3/control_flow_spec.ts
@@ -702,7 +702,7 @@ describe('JS control flow', () => {
static ngComponentDef = ɵɵdefineComponent({
type: Comp,
selectors: [['comp']],
- consts: 0,
+ decls: 0,
vars: 0,
template: function(rf: RenderFlags, ctx: Comp) {}
});
@@ -716,7 +716,7 @@ describe('JS control flow', () => {
static ngComponentDef = ɵɵdefineComponent({
type: App,
selectors: [['app']],
- consts: 3,
+ decls: 3,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
@@ -772,7 +772,7 @@ describe('JS control flow', () => {
static ngComponentDef = ɵɵdefineComponent({
type: Comp,
selectors: [['comp']],
- consts: 0,
+ decls: 0,
vars: 0,
template: function(rf: RenderFlags, ctx: Comp) {}
});
@@ -786,7 +786,7 @@ describe('JS control flow', () => {
static ngComponentDef = ɵɵdefineComponent({
type: App,
selectors: [['app']],
- consts: 3,
+ decls: 3,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts
index 03f975b1af..8a1968df75 100644
--- a/packages/core/test/render3/di_spec.ts
+++ b/packages/core/test/render3/di_spec.ts
@@ -66,9 +66,9 @@ describe('di', () => {
/** */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
- ɵɵelement(0, 'div', ['dirA', '']);
+ ɵɵelement(0, 'div', 0);
}
- }, 1, 0, [DirA, DirB]);
+ }, 1, 0, [DirA, DirB], [], undefined, [], [], undefined, [['dirA', '']]);
expect(() => { new ComponentFixture(App); }).not.toThrow();
expect(dirA !.dirB).toEqual(null);
@@ -92,13 +92,17 @@ describe('di', () => {
*
*