refactor(core): consolidate first create pass

The first create pass for elements and containers was identical. These changes consolidate it to reduce code duplication.
angular · crisbeto · May 16, 2025 · May 16, 2025 · May 19, 2025 · May 19, 2025
commit b4b1a5f68f2dcc3cbf02755df129e25291b91fd5
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
@@ -42,7 +42,13 @@ import {
 } from './instructions/shared';
 import {ComponentDef, ComponentTemplate, DirectiveDef, RenderFlags} from './interfaces/definition';
 import {InputFlags} from './interfaces/input_flags';
-import {TContainerNode, TElementContainerNode, TElementNode, TNode} from './interfaces/node';
+import {
+  TContainerNode,
+  TElementContainerNode,
+  TElementNode,
+  TNode,
+  TNodeType,
+} from './interfaces/node';
 import {RElement, RNode} from './interfaces/renderer_dom';
 import {
   CONTEXT,
@@ -71,7 +77,7 @@ import {executeContentQueries} from './queries/query_execution';
 import {enterView, leaveView} from './state';
 import {debugStringifyTypeForError, stringifyForError} from './util/stringify_utils';
 import {getComponentLViewByIndex, getTNode} from './util/view_utils';
-import {elementEndFirstCreatePass, elementStartFirstCreatePass} from './view/elements';
+import {elementEndFirstCreatePass, elementLikeStartFirstCreatePass} from './view/elements';
 import {ViewRef} from './view_ref';
 import {createLView, createTView, getInitialLViewFlagsFromDef} from './view/construction';
 import {BINDING, Binding, DirectiveWithBindings} from './dynamic_bindings';
@@ -297,10 +303,11 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
       let componentView: LView | null = null;
 
       try {
-        const hostTNode = elementStartFirstCreatePass(
+        const hostTNode = elementLikeStartFirstCreatePass(
           HEADER_OFFSET,
           rootTView,
           rootLView,
+          TNodeType.Element,
           '#host',
           () => rootTView.directiveRegistry,
           true,

diff --git a/packages/core/src/render3/instructions/element.ts b/packages/core/src/render3/instructions/element.ts
@@ -60,7 +60,7 @@ import {
   setCurrentTNodeAsNotParent,
   wasLastNodeCreated,
 } from '../state';
-import {elementEndFirstCreatePass, elementStartFirstCreatePass} from '../view/elements';
+import {elementEndFirstCreatePass, elementLikeStartFirstCreatePass} from '../view/elements';
 
 import {validateElementIsKnown} from './element_validation';
 import {setDirectiveInputsWhichShadowsStyling} from './property';
@@ -105,10 +105,11 @@ export function ɵɵelementStart(
 
   const renderer = lView[RENDERER];
   const tNode = tView.firstCreatePass
-    ? elementStartFirstCreatePass(
+    ? elementLikeStartFirstCreatePass(
         adjustedIndex,
         tView,
         lView,
+        TNodeType.Element,
         name,
         findDirectiveDefMatches,
         getBindingsEnabled(),

diff --git a/packages/core/src/render3/instructions/element_container.ts b/packages/core/src/render3/instructions/element_container.ts
@@ -19,7 +19,7 @@ import {assertHasParent} from '../assert';
 import {attachPatchData} from '../context_discovery';
 import {createCommentNode} from '../dom_node_manipulation';
 import {registerPostOrderHooks} from '../hooks';
-import {TAttributes, TElementContainerNode, TNode, TNodeType} from '../interfaces/node';
+import {TElementContainerNode, TNode, TNodeType} from '../interfaces/node';
 import {RComment} from '../interfaces/renderer_dom';
 import {isContentQueryHost, isDirectiveHost} from '../interfaces/type_checks';
 import {HEADER_OFFSET, HYDRATION, LView, RENDERER, TView} from '../interfaces/view';
@@ -39,49 +39,12 @@ import {
   setCurrentTNodeAsNotParent,
   wasLastNodeCreated,
 } from '../state';
-import {computeStaticStyling} from '../styling/static_styling';
-import {mergeHostAttrs} from '../util/attrs_utils';
-import {getConstant} from '../util/view_utils';
-
-import {getOrCreateTNode} from '../tnode_manipulation';
-import {resolveDirectives} from '../view/directives';
 import {
   createDirectivesInstances,
   findDirectiveDefMatches,
   saveResolvedLocalsInData,
 } from './shared';
-
-function elementContainerStartFirstCreatePass(
-  index: number,
-  tView: TView,
-  lView: LView,
-  attrsIndex?: number | null,
-  localRefsIndex?: number,
-): TElementContainerNode {
-  const tViewConsts = tView.consts;
-  const attrs = getConstant<TAttributes>(tViewConsts, attrsIndex);
-  const tNode = getOrCreateTNode(tView, index, TNodeType.ElementContainer, 'ng-container', attrs);
-
-  // While ng-container doesn't necessarily support styling, we use the style context to identify
-  // and execute directives on the ng-container.
-  if (attrs !== null) {
-    computeStaticStyling(tNode, attrs, true);
-  }
-
-  const localRefs = getConstant<string[]>(tViewConsts, localRefsIndex);
-  if (getBindingsEnabled()) {
-    resolveDirectives(tView, lView, tNode, localRefs, findDirectiveDefMatches);
-  }
-
-  // Merge the template attrs last so that they have the highest priority.
-  tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
-
-  if (tView.queries !== null) {
-    tView.queries.elementStart(tView, tNode);
-  }
-
-  return tNode;
-}
+import {elementLikeStartFirstCreatePass} from '../view/elements';
 
 /**
  * Creates a logical container for other nodes (<ng-container>) backed by a comment node in the DOM.
@@ -105,7 +68,7 @@ export function ɵɵelementContainerStart(
 ): typeof ɵɵelementContainerStart {
   const lView = getLView();
   const tView = getTView();
-  const adjustedIndex = index + HEADER_OFFSET;
+  const adjustedIndex = HEADER_OFFSET + index;
 
   ngDevMode && assertIndexInRange(lView, adjustedIndex);
   ngDevMode &&
@@ -116,7 +79,17 @@ export function ɵɵelementContainerStart(
     );
 
   const tNode = tView.firstCreatePass
-    ? elementContainerStartFirstCreatePass(adjustedIndex, tView, lView, attrsIndex, localRefsIndex)
+    ? elementLikeStartFirstCreatePass(
+        adjustedIndex,
+        tView,
+        lView,
+        TNodeType.ElementContainer,
+        'ng-container',
+        findDirectiveDefMatches,
+        getBindingsEnabled(),
+        attrsIndex,
+        localRefsIndex,
+      )
     : (tView.data[adjustedIndex] as TElementContainerNode);
   setCurrentTNode(tNode, true);
 

diff --git a/packages/core/src/render3/tnode_manipulation.ts b/packages/core/src/render3/tnode_manipulation.ts
@@ -91,12 +91,26 @@ export function getOrCreateTNode(
   type: TNodeType,
   name: string | null,
   attrs: TAttributes | null,
-): TElementNode &
-  TContainerNode &
-  TElementContainerNode &
-  TProjectionNode &
-  TIcuContainerNode &
-  TLetDeclarationNode {
+):
+  | TElementNode
+  | TContainerNode
+  | TElementContainerNode
+  | TProjectionNode
+  | TIcuContainerNode
+  | TLetDeclarationNode;
+export function getOrCreateTNode(
+  tView: TView,
+  index: number,
+  type: TNodeType,
+  name: string | null,
+  attrs: TAttributes | null,
+):
+  | TElementNode
+  | TContainerNode
+  | TElementContainerNode
+  | TProjectionNode
+  | TIcuContainerNode
+  | TLetDeclarationNode {
   ngDevMode &&
     index !== 0 && // 0 are bogus nodes and they are OK. See `createContainerRef` in
     // `view_engine_compatibility` for additional context.
@@ -123,11 +137,12 @@ export function getOrCreateTNode(
     ngDevMode && assertEqual(index, tNode.index, 'Expecting same index');
   }
   setCurrentTNode(tNode, true);
-  return tNode as TElementNode &
-    TContainerNode &
-    TElementContainerNode &
-    TProjectionNode &
-    TIcuContainerNode;
+  return tNode as
+    | TElementNode
+    | TContainerNode
+    | TElementContainerNode
+    | TProjectionNode
+    | TIcuContainerNode;
 }
 
 export function createTNodeAtIndex(

diff --git a/packages/core/src/render3/view/elements.ts b/packages/core/src/render3/view/elements.ts
@@ -8,7 +8,13 @@
 
 import {assertFirstCreatePass} from '../assert';
 import {registerPostOrderHooks} from '../hooks';
-import {TAttributes, TNode, TNodeType, type TElementNode} from '../interfaces/node';
+import {
+  TAttributes,
+  TElementContainerNode,
+  TNode,
+  TNodeType,
+  type TElementNode,
+} from '../interfaces/node';
 import {isContentQueryHost} from '../interfaces/type_checks';
 import type {LView, TView} from '../interfaces/view';
 import {computeStaticStyling} from '../styling/static_styling';
@@ -17,21 +23,23 @@ import {mergeHostAttrs} from '../util/attrs_utils';
 import {getConstant} from '../util/view_utils';
 import {resolveDirectives, type DirectiveMatcherStrategy} from './directives';
 
-export function elementStartFirstCreatePass(
+export function elementLikeStartFirstCreatePass(
   index: number,
   tView: TView,
   lView: LView,
+  type: TNodeType.Element | TNodeType.ElementContainer,
   name: string,
   directiveMatcher: DirectiveMatcherStrategy,
   bindingsEnabled: boolean,
   attrsIndex?: number | null,
   localRefsIndex?: number,
-): TElementNode {
+): TElementNode | TElementContainerNode {
   ngDevMode && assertFirstCreatePass(tView);
-
   const tViewConsts = tView.consts;
   const attrs = getConstant<TAttributes>(tViewConsts, attrsIndex);
-  const tNode = getOrCreateTNode(tView, index, TNodeType.Element, name, attrs);
+  const tNode = getOrCreateTNode(tView, index, type, name, attrs) as
+    | TElementNode
+    | TElementContainerNode;
 
   if (bindingsEnabled) {
     resolveDirectives(