refactor(cdk/tree): signalify _flattenedNodes

angular · BobobUnicorn · Sep 16, 2024 · Sep 16, 2024 · Sep 17, 2024 · Sep 17, 2024
commit 8ca94550771b0b9bc134087a6ce54774d209d45c
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
@@ -41,6 +41,7 @@ import {
   Output,
   QueryList,
   TrackByFunction,
+  computed,
   signal,
   effect,
   ViewChild,
@@ -50,7 +51,7 @@ import {
   inject,
   booleanAttribute,
 } from '@angular/core';
-import {toSignal} from '@angular/core/rxjs-interop';
+import {toObservable, toSignal} from '@angular/core/rxjs-interop';
 import {coerceObservable} from '@angular/cdk/coercion/private';
 import {
   BehaviorSubject,
@@ -85,6 +86,7 @@ import {
   getTreeMultipleDefaultNodeDefsError,
   getTreeNoValidDataSourceError,
 } from './tree-errors';
+import { NgTemplateOutlet } from '@angular/common';
 
 type RenderingData<T> =
   | {
@@ -105,7 +107,16 @@ type RenderingData<T> =
 @Component({
   selector: 'cdk-tree',
   exportAs: 'cdkTree',
-  template: `<ng-container cdkTreeNodeOutlet></ng-container>`,
+  template: `
+    <ng-template let-nodes>
+      @for (node of nodes(); track node.key) {
+        <ng-container
+            [ngTemplateOutlet]="node.template"
+            [ngTemplateOutletContext]="node.context" />
+      }
+    </ng-template>
+    <ng-container cdkTreeNodeOutlet></ng-container>
+  `,
   host: {
     'class': 'cdk-tree',
     'role': 'tree',
@@ -117,7 +128,8 @@ type RenderingData<T> =
   // declared elsewhere, they are checked when their declaration points are checked.
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
-  imports: [CdkTreeNodeOutlet],
+  standalone: true,
+  imports: [CdkTreeNodeOutlet, NgTemplateOutlet],
 })
 export class CdkTree<T, K = T>
   implements
@@ -261,13 +273,6 @@ export class CdkTree<T, K = T>
   /** Keep track of which nodes are expanded. */
   private _expansionModel?: SelectionModel<K>;
 
-  /**
-   * Maintain a synchronous cache of flattened data nodes. This will only be
-   * populated after initial render, and in certain cases, will be delayed due to
-   * relying on Observable `getChildren` calls.
-   */
-  private _flattenedNodes: BehaviorSubject<readonly T[]> = new BehaviorSubject<readonly T[]>([]);
-
   /** The automatically determined node type for the tree. */
   private _nodeType = new BehaviorSubject<'flat' | 'nested' | null>(null);
 
@@ -297,6 +302,18 @@ export class CdkTree<T, K = T>
     ),
     {initialValue: null},
   );
+  /**
+   * Maintain a synchronous cache of flattened data nodes. This will only be
+   * populated after initial render, and in certain cases, will be delayed due to
+   * relying on Observable `getChildren` calls.
+   */
+  private readonly _flattenedNodes = computed(() => {
+    return this._renderData()?.flattenedNodes ?? [];
+  });
+  private readonly _flatNodesObs = toObservable(this._flattenedNodes);
+  private readonly _renderNodes = computed(() => {
+    return this._renderData()?.renderNodes ?? [];
+  });
 
   constructor(...args: unknown[]);
   constructor() {
@@ -412,7 +429,6 @@ export class CdkTree<T, K = T>
 
     // If we're here, then we know what our node type is, and therefore can
     // perform our usual rendering pipeline.
-    this._updateCachedData(data.flattenedNodes);
     this.renderNodeChanges(data.renderNodes);
     this._updateKeyManagerItems(data.flattenedNodes);
     // Explicitly detect the initial set of changes to this component subtree
@@ -694,7 +710,7 @@ export class CdkTree<T, K = T>
     } else if (this._expansionModel) {
       const expansionModel = this._expansionModel;
       expansionModel.select(
-        ...this._flattenedNodes.value.map(child => this._getExpansionKey(child)),
+        ...this._flattenedNodes().map(child => this._getExpansionKey(child)),
       );
     }
   }
@@ -706,7 +722,7 @@ export class CdkTree<T, K = T>
     } else if (this._expansionModel) {
       const expansionModel = this._expansionModel;
       expansionModel.deselect(
-        ...this._flattenedNodes.value.map(child => this._getExpansionKey(child)),
+        ...this._flattenedNodes().map(child => this._getExpansionKey(child)),
       );
     }
   }
@@ -747,15 +763,14 @@ export class CdkTree<T, K = T>
     );
 
     if (levelAccessor) {
-      return combineLatest([isExpanded, this._flattenedNodes]).pipe(
+      return combineLatest([isExpanded, this._flatNodesObs]).pipe(
         map(([expanded, flattenedNodes]) => {
           if (!expanded) {
             return [];
           }
           return this._findChildrenByLevel(
             levelAccessor,
             flattenedNodes,
-
             dataNode,
             1,
           );
@@ -898,7 +913,7 @@ export class CdkTree<T, K = T>
     if (this.levelAccessor) {
       const results = this._findChildrenByLevel(
         this.levelAccessor,
-        this._flattenedNodes.value,
+        this._flattenedNodes(),
         dataNode,
         Infinity,
       );
@@ -1103,10 +1118,6 @@ export class CdkTree<T, K = T>
     }
   }
 
-  private _updateCachedData(flattenedNodes: readonly T[]) {
-    this._flattenedNodes.next(flattenedNodes);
-  }
-
   private _updateKeyManagerItems(flattenedNodes: readonly T[]) {
     this._keyManagerNodes.next(flattenedNodes);
   }