Function recreateLView

packages/core/src/render3/hmr.ts:229–324

* Recreates an LView in-place from a new component definition. * @param importMeta `import.meta` information. * @param id HMR ID for the component. * @param newDef Definition from which to recreate the view. * @param oldDef Previous component definition being swapped out. * @param lView View to

(
  importMeta: ImportMetaExtended | null,
  id: string | null,
  newDef: ComponentDef<unknown>,
  oldDef: ComponentDef<unknown>,
  lView: LView<unknown>,
)

 * @param lView View to be recreated.
 */
function recreateLView(
  importMeta: ImportMetaExtended | null,
  id: string | null,
  newDef: ComponentDef<unknown>,
  oldDef: ComponentDef<unknown>,
  lView: LView<unknown>,
): void {
  const instance = lView[CONTEXT];
  let host = lView[HOST]! as HTMLElement;
  // In theory the parent can also be an LContainer, but it appears like that's
  // only the case for embedded views which we won't be replacing here.
  const parentLView = lView[PARENT] as LView;
  ngDevMode && assertLView(parentLView);
  const tNode = lView[T_HOST] as TElementNode;
  ngDevMode && assertTNodeType(tNode, TNodeType.Element);
  ngDevMode && assertNotEqual(newDef, oldDef, 'Expected different component definition');
  const zone = lView[INJECTOR].get(NgZone, null);
  const recreate = () => {
    // If we're recreating a component with shadow DOM encapsulation, it will have attached a
    // shadow root. The browser will throw if we attempt to attach another one and there's no way
    // to detach it. Our only option is to make a clone only of the root node, replace the node
    // with the clone and use it for the newly-created LView.
    if (
      oldDef.encapsulation === ViewEncapsulation.ShadowDom ||
      oldDef.encapsulation === ViewEncapsulation.ExperimentalIsolatedShadowDom
    ) {
      const newHost = host.cloneNode(false) as HTMLElement;
      host.replaceWith(newHost);
      host = newHost;
    }

    // Recreate the TView since the template might've changed.
    const newTView = getOrCreateComponentTView(newDef);

    // Create a new LView from the new TView, but reusing the existing TNode and DOM node.
    const newLView = createLView(
      parentLView,
      newTView,
      instance,
      getInitialLViewFlagsFromDef(newDef),
      host,
      tNode,
      null,
      null, // The renderer will be created a bit further down once the old one is destroyed.
      null,
      null,
      null,
    );

    // Detach the LView from its current place in the tree so we don't
    // start traversing any siblings and modifying their structure.
    replaceLViewInTree(parentLView, lView, newLView, tNode.index);

    // Destroy the detached LView.
    destroyLView(lView[TVIEW], lView);

    // Clean up any dehydrated views left over from SSR hydration.
    // Neither destroyLView nor removeViewFromDOM handle DOM nodes