refactor(core): reuse existing logic in ComponentRef impl (#59806)

pkozlowski-opensource · alxhub · commit 2d53bacec31a · 2025-02-03T13:57:10.000-08:00
This change removes some code and logic duplication by re-using the existing functionality. It also pulls some code into separate methods for clarity. PR Close #59806
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
@@ -16,8 +16,6 @@ import {
 import {Injector} from '../di/injector';
 import {EnvironmentInjector} from '../di/r3_injector';
 import {RuntimeError, RuntimeErrorCode} from '../errors';
-import {DehydratedView} from '../hydration/interfaces';
-import {retrieveHydrationInfo} from '../hydration/utils';
 import {Type} from '../interface/type';
 import {
   ComponentFactory as AbstractComponentFactory,
@@ -28,7 +26,6 @@ import {createElementRef, ElementRef} from '../linker/element_ref';
 import {NgModuleRef} from '../linker/ng_module_factory';
 import {RendererFactory2} from '../render/api';
 import {Sanitizer} from '../sanitization/sanitizer';
-import {assertDefined} from '../util/assert';
 
 import {assertComponentType} from './assert';
 import {attachPatchData} from './context_discovery';
@@ -43,6 +40,7 @@ import {
   createDirectivesInstances,
   createLView,
   createTView,
+  getInitialLViewFlagsFromDef,
   initializeDirectives,
   locateHostElement,
   resolveHostDirectives,
@@ -58,7 +56,7 @@ import {
   TNode,
   TNodeType,
 } from './interfaces/node';
-import {RNode} from './interfaces/renderer_dom';
+import {RElement, RNode} from './interfaces/renderer_dom';
 import {
   CONTEXT,
   HEADER_OFFSET,
@@ -70,17 +68,19 @@ import {
 } from './interfaces/view';
 import {MATH_ML_NAMESPACE, SVG_NAMESPACE} from './namespaces';
 
+import {retrieveHydrationInfo} from '../hydration/utils';
 import {ChainedInjector} from './chained_injector';
 import {createElementNode, setupStaticAttributes} from './dom_node_manipulation';
 import {unregisterLView} from './interfaces/lview_tracking';
+import {Renderer} from './interfaces/renderer';
 import {
   extractAttrsAndClassesFromSelector,
   stringifyCSSSelectorList,
 } from './node_selector_matcher';
 import {profiler} from './profiler';
 import {ProfilerEvent} from './profiler_types';
 import {executeContentQueries} from './queries/query_execution';
-import {enterView, getCurrentTNode, getLView, leaveView} from './state';
+import {enterView, leaveView} from './state';
 import {computeStaticStyling} from './styling/static_styling';
 import {getOrCreateTNode} from './tnode_manipulation';
 import {mergeHostAttrs} from './util/attrs_utils';
@@ -150,9 +150,74 @@ function toRefArray<
   return array;
 }
 
-function getNamespace(elementName: string): string | null {
-  const name = elementName.toLowerCase();
-  return name === 'svg' ? SVG_NAMESPACE : name === 'math' ? MATH_ML_NAMESPACE : null;
+function verifyNotAnOrphanComponent(componentDef: ComponentDef<unknown>) {
+  // TODO(pk): create assert that verifies ngDevMode
+  if (
+    (typeof ngJitMode === 'undefined' || ngJitMode) &&
+    componentDef.debugInfo?.forbidOrphanRendering
+  ) {
+    if (depsTracker.isOrphanComponent(componentDef.type)) {
+      throw new RuntimeError(
+        RuntimeErrorCode.RUNTIME_DEPS_ORPHAN_COMPONENT,
+        `Orphan component found! Trying to render the component ${debugStringifyTypeForError(
+          componentDef.type,
+        )} without first loading the NgModule that declares it. It is recommended to make this component standalone in order to avoid this error. If this is not possible now, import the component's NgModule in the appropriate NgModule, or the standalone component in which you are trying to render this component. If this is a lazy import, load the NgModule lazily as well and use its module injector.`,
+      );
+    }
+  }
+}
+
+function createRootViewInjector(
+  componentDef: ComponentDef<unknown>,
+  environmentInjector: EnvironmentInjector | NgModuleRef<any> | undefined,
+  injector: Injector,
+): Injector {
+  let realEnvironmentInjector =
+    environmentInjector instanceof EnvironmentInjector
+      ? environmentInjector
+      : environmentInjector?.injector;
+
+  if (realEnvironmentInjector && componentDef.getStandaloneInjector !== null) {
+    realEnvironmentInjector =
+      componentDef.getStandaloneInjector(realEnvironmentInjector) || realEnvironmentInjector;
+  }
+
+  const rootViewInjector = realEnvironmentInjector
+    ? new ChainedInjector(injector, realEnvironmentInjector)
+    : injector;
+  return rootViewInjector;
+}
+
+function createRootLViewEnvironment(rootLViewInjector: Injector): LViewEnvironment {
+  const rendererFactory = rootLViewInjector.get(RendererFactory2, null);
+  if (rendererFactory === null) {
+    throw new RuntimeError(
+      RuntimeErrorCode.RENDERER_NOT_FOUND,
+      ngDevMode &&
+        'Angular was not able to inject a renderer (RendererFactory2). ' +
+          'Likely this is due to a broken DI hierarchy. ' +
+          'Make sure that any injector used to create this component has a correct parent.',
+    );
+  }
+
+  const sanitizer = rootLViewInjector.get(Sanitizer, null);
+  const changeDetectionScheduler = rootLViewInjector.get(ChangeDetectionScheduler, null);
+
+  return {
+    rendererFactory,
+    sanitizer,
+    changeDetectionScheduler,
+  };
+}
+
+function createHostElement(componentDef: ComponentDef<unknown>, render: Renderer): RElement {
+  // Determine a tag name used for creating host elements when this component is created
+  // dynamically. Default to 'div' if this component did not specify any tag name in its
+  // selector.
+  const tagName = ((componentDef.selectors[0][0] as string) || 'div').toLowerCase();
+  const namespace =
+    tagName === 'svg' ? SVG_NAMESPACE : tagName === 'math' ? MATH_ML_NAMESPACE : null;
+  return createElementNode(render, tagName, namespace);
 }
 
 /**
@@ -214,84 +279,8 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
 
     const prevConsumer = setActiveConsumer(null);
     try {
-      // Check if the component is orphan
-      if (
-        ngDevMode &&
-        (typeof ngJitMode === 'undefined' || ngJitMode) &&
-        this.componentDef.debugInfo?.forbidOrphanRendering
-      ) {
-        if (depsTracker.isOrphanComponent(this.componentType)) {
-          throw new RuntimeError(
-            RuntimeErrorCode.RUNTIME_DEPS_ORPHAN_COMPONENT,
-            `Orphan component found! Trying to render the component ${debugStringifyTypeForError(
-              this.componentType,
-            )} without first loading the NgModule that declares it. It is recommended to make this component standalone in order to avoid this error. If this is not possible now, import the component's NgModule in the appropriate NgModule, or the standalone component in which you are trying to render this component. If this is a lazy import, load the NgModule lazily as well and use its module injector.`,
-          );
-        }
-      }
-
-      environmentInjector = environmentInjector || this.ngModule;
-
-      let realEnvironmentInjector =
-        environmentInjector instanceof EnvironmentInjector
-          ? environmentInjector
-          : environmentInjector?.injector;
-
-      if (realEnvironmentInjector && this.componentDef.getStandaloneInjector !== null) {
-        realEnvironmentInjector =
-          this.componentDef.getStandaloneInjector(realEnvironmentInjector) ||
-          realEnvironmentInjector;
-      }
-
-      const rootViewInjector = realEnvironmentInjector
-        ? new ChainedInjector(injector, realEnvironmentInjector)
-        : injector;
-
-      const rendererFactory = rootViewInjector.get(RendererFactory2, null);
-      if (rendererFactory === null) {
-        throw new RuntimeError(
-          RuntimeErrorCode.RENDERER_NOT_FOUND,
-          ngDevMode &&
-            'Angular was not able to inject a renderer (RendererFactory2). ' +
-              'Likely this is due to a broken DI hierarchy. ' +
-              'Make sure that any injector used to create this component has a correct parent.',
-        );
-      }
-      const sanitizer = rootViewInjector.get(Sanitizer, null);
-
-      const changeDetectionScheduler = rootViewInjector.get(ChangeDetectionScheduler, null);
-
-      const environment: LViewEnvironment = {
-        rendererFactory,
-        sanitizer,
-        changeDetectionScheduler,
-      };
-
-      const hostRenderer = rendererFactory.createRenderer(null, this.componentDef);
-      // Determine a tag name used for creating host elements when this component is created
-      // dynamically. Default to 'div' if this component did not specify any tag name in its
-      // selector.
-      const elementName = (this.componentDef.selectors[0][0] as string) || 'div';
-      const hostRNode = rootSelectorOrNode
-        ? locateHostElement(
-            hostRenderer,
-            rootSelectorOrNode,
-            this.componentDef.encapsulation,
-            rootViewInjector,
-          )
-        : createElementNode(hostRenderer, elementName, getNamespace(elementName));
-
-      let rootFlags = LViewFlags.IsRoot;
-      if (this.componentDef.signals) {
-        rootFlags |= LViewFlags.SignalView;
-      } else if (!this.componentDef.onPush) {
-        rootFlags |= LViewFlags.CheckAlways;
-      }
-
-      let hydrationInfo: DehydratedView | null = null;
-      if (hostRNode !== null) {
-        hydrationInfo = retrieveHydrationInfo(hostRNode, rootViewInjector, true /* isRootView */);
-      }
+      const cmpDef = this.componentDef;
+      ngDevMode && verifyNotAnOrphanComponent(cmpDef);
 
       // Create the root view. Uses empty TView and ContentTemplate.
       const rootTView = createTView(
@@ -307,21 +296,39 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
         null,
         null,
       );
+
+      const rootViewInjector = createRootViewInjector(
+        cmpDef,
+        environmentInjector || this.ngModule,
+        injector,
+      );
+
+      const environment = createRootLViewEnvironment(rootViewInjector);
+      const hostRenderer = environment.rendererFactory.createRenderer(null, cmpDef);
+      const hostElement = rootSelectorOrNode
+        ? locateHostElement(
+            hostRenderer,
+            rootSelectorOrNode,
+            cmpDef.encapsulation,
+            rootViewInjector,
+          )
+        : createHostElement(cmpDef, hostRenderer);
+
       const rootLView = createLView<T>(
         null,
         rootTView,
         null,
-        rootFlags,
+        LViewFlags.IsRoot | getInitialLViewFlagsFromDef(cmpDef),
         null,
         null,
         environment,
         hostRenderer,
         rootViewInjector,
         null,
-        hydrationInfo,
+        retrieveHydrationInfo(hostElement, rootViewInjector, true /* isRootView */),
       );
 
-      rootLView[HEADER_OFFSET] = hostRNode;
+      rootLView[HEADER_OFFSET] = hostElement;
 
       // rootView is the parent when bootstrapping
       // TODO(misko): it looks like we are entering view here but we don't really need to as
@@ -337,9 +344,9 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
         const tAttributes = rootSelectorOrNode
           ? ['ng-version', '0.0.0-PLACEHOLDER']
           : // Extract attributes and classes from the first selector only to match VE behavior.
-            extractAttrsAndClassesFromSelector(this.componentDef.selectors[0]);
+            extractAttrsAndClassesFromSelector(cmpDef.selectors[0]);
 
-        // TODO: this logic is shared with the element instruction first create pass
+        // TODO: this logic is shared with the element instruction first create pass - minus directive matching
         const hostTNode = getOrCreateTNode(
           rootTView,
           HEADER_OFFSET,
@@ -349,27 +356,19 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
         );
 
         const [directiveDefs, hostDirectiveDefs] = resolveHostDirectives(rootTView, hostTNode, [
-          this.componentDef,
+          cmpDef,
         ]);
         initializeDirectives(rootTView, rootLView, hostTNode, directiveDefs, {}, hostDirectiveDefs);
-
-        for (const def of directiveDefs) {
-          hostTNode.mergedAttrs = mergeHostAttrs(hostTNode.mergedAttrs, def.hostAttrs);
-        }
         hostTNode.mergedAttrs = mergeHostAttrs(hostTNode.mergedAttrs, tAttributes);
 
         computeStaticStyling(hostTNode, hostTNode.mergedAttrs, true);
 
         // TODO(crisbeto): in practice `hostRNode` should always be defined, but there are some
         // tests where the renderer is mocked out and `undefined` is returned. We should update the
         // tests so that this check can be removed.
-        if (hostRNode) {
-          setupStaticAttributes(hostRenderer, hostRNode, hostTNode);
-          attachPatchData(hostRNode, rootLView);
-        }
-
-        if (projectableNodes !== undefined) {
-          projectNodes(hostTNode, this.ngContentSelectors, projectableNodes);
+        if (hostElement) {
+          setupStaticAttributes(hostRenderer, hostElement, hostTNode);
+          attachPatchData(hostElement, rootLView);
         }
 
         // TODO(pk): this logic is similar to the instruction code where a node can have directives
@@ -379,6 +378,10 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
         // TODO(pk): code / logic duplication with the elementEnd and similar instructions
         registerPostOrderHooks(rootTView, hostTNode);
 
+        if (projectableNodes !== undefined) {
+          projectNodes(hostTNode, this.ngContentSelectors, projectableNodes);
+        }
+
         componentView = getComponentLViewByIndex(hostTNode.index, rootLView);
 
         // TODO(pk): why do we need this logic?
diff --git a/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json b/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json
@@ -306,6 +306,7 @@
   "getDirectiveDef",
   "getFactoryDef",
   "getFirstLContainer",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/packages/core/test/bundling/animations/bundle.golden_symbols.json
@@ -327,6 +327,7 @@
   "getDirectiveDef",
   "getFactoryDef",
   "getFirstLContainer",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -255,6 +255,7 @@
   "getDirectiveDef",
   "getFactoryDef",
   "getFirstLContainer",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/defer/bundle.golden_symbols.json b/packages/core/test/bundling/defer/bundle.golden_symbols.json
@@ -309,6 +309,7 @@
   "getFactoryDef",
   "getFirstLContainer",
   "getFirstNativeNode",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -372,6 +372,7 @@
   "getFactoryOf",
   "getFirstLContainer",
   "getFirstNativeNode",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -358,6 +358,7 @@
   "getFactoryOf",
   "getFirstLContainer",
   "getFirstNativeNode",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
@@ -198,6 +198,7 @@
   "getDeclarationTNode",
   "getFactoryDef",
   "getFirstLContainer",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/hydration/bundle.golden_symbols.json b/packages/core/test/bundling/hydration/bundle.golden_symbols.json
@@ -263,6 +263,7 @@
   "getFactoryDef",
   "getFilteredHeaders",
   "getFirstLContainer",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -443,6 +443,7 @@
   "getFirstNativeNode",
   "getIdxOfMatchingSelector",
   "getInherited",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -228,6 +228,7 @@
   "getDirectiveDef",
   "getFactoryDef",
   "getFirstLContainer",
+  "getInitialLViewFlagsFromDef",
   "getInjectImplementation",
   "getInjectableDef",
   "getInjectorDef",
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
