fix(tree): allow readonly arrays in getChildren return type

Fixes not being allowed to return a `ReadonlyArray` from a `getChildren` function. Also pulls the definition for the `getChildren` function into a separate type so we don't have to maintain it in 4 different places.

Fixes #17824.

Author: crisbeto

src/cdk/tree/control/base-tree-control.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {SelectionModel} from '@angular/cdk/collections';
-import {Observable} from 'rxjs';
 import {TreeControl} from './tree-control';
+import {GetChildrenFn} from './types';
 
 /** Base tree control. It has basic toggle/expand/collapse operations on a single data node. */
 export abstract class BaseTreeControl<T, K = T> implements TreeControl<T, K> {
@@ -42,7 +42,7 @@ export abstract class BaseTreeControl<T, K = T> implements TreeControl<T, K> {
   isExpandable: (dataNode: T) => boolean;
 
   /** Gets a stream that emits whenever the given data node's children change. */
-  getChildren: (dataNode: T) => (Observable<T[]> | T[] | undefined | null);
+  getChildren: GetChildrenFn<T>;
 
   /** Toggles one single data node's expanded/collapsed state. */
   toggle(dataNode: T): void {

src/cdk/tree/control/nested-tree-control.ts

@@ -8,12 +8,13 @@
 import {Observable, isObservable} from 'rxjs';
 import {take, filter} from 'rxjs/operators';
 import {BaseTreeControl} from './base-tree-control';
+import {GetChildrenFn} from './types';
 
 /** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
 export class NestedTreeControl<T> extends BaseTreeControl<T> {
 
   /** Construct with nested tree function getChildren. */
-  constructor(public getChildren: (dataNode: T) => (Observable<T[]> | T[] | undefined | null)) {
+  constructor(public getChildren: GetChildrenFn<T>) {
     super();
   }
 

src/cdk/tree/control/tree-control.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {SelectionModel} from '@angular/cdk/collections';
-import {Observable} from 'rxjs';
+import {GetChildrenFn} from './types';
 
 /**
  * Tree control interface. User can implement TreeControl to expand/collapse dataNodes in the tree.
@@ -60,5 +60,5 @@ export interface TreeControl<T, K = T> {
   readonly isExpandable: (dataNode: T) => boolean;
 
   /** Gets a stream that emits whenever the given data node's children change. */
-  readonly getChildren: (dataNode: T) => Observable<T[]> | T[] | undefined | null;
+  readonly getChildren: GetChildrenFn<T>;
 }

src/cdk/tree/control/types.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Observable} from 'rxjs';
+
+/** Function that can be used to get the children of a tree node. */
+export type GetChildrenFn<T> = (node: T) =>
+  Observable<T[] | ReadonlyArray<T>> | T[] | ReadonlyArray<T> | undefined | null;

src/cdk/tree/nested-node.ts

@@ -46,7 +46,7 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
   private _dataDiffer: IterableDiffer<T>;
 
   /** The children data dataNodes of current node. They will be placed in `CdkTreeNodeOutlet`. */
-  protected _children: T[];
+  protected _children: T[] | ReadonlyArray<T>;
 
   /** The children node placeholder. */
   @ContentChildren(CdkTreeNodeOutlet, {
@@ -84,7 +84,7 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
   }
 
   /** Add children dataNodes to the NodeOutlet */
-  protected updateChildrenNodes(children?: T[]): void {
+  protected updateChildrenNodes(children?: T[] | ReadonlyArray<T>): void {
     const outlet = this._getNodeOutlet();
     if (children) {
       this._children = children;

src/cdk/tree/public-api.ts

@@ -10,6 +10,7 @@ export * from './control/base-tree-control';
 export * from './control/flat-tree-control';
 export * from './control/nested-tree-control';
 export * from './control/tree-control';
+export * from './control/types';
 export * from './nested-node';
 export * from './node';
 export * from './padding';

src/cdk/tree/tree.ts

@@ -381,7 +381,7 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy {
     }
   }
 
-  protected _setRoleFromChildren(children: T[]) {
+  protected _setRoleFromChildren(children: T[] | ReadonlyArray<T>) {
     this.role = children && children.length ? 'group' : 'treeitem';
   }
 }

src/material/tree/data-source/flat-data-source.ts

@@ -7,7 +7,7 @@
  */
 
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
-import {FlatTreeControl, TreeControl} from '@angular/cdk/tree';
+import {FlatTreeControl, TreeControl, GetChildrenFn} from '@angular/cdk/tree';
 import {BehaviorSubject, merge, Observable} from 'rxjs';
 import {map, take} from 'rxjs/operators';
 
@@ -50,8 +50,7 @@ export class MatTreeFlattener<T, F> {
   constructor(public transformFunction: (node: T, level: number) => F,
               public getLevel: (node: F) => number,
               public isExpandable: (node: F) => boolean,
-              public getChildren: (node: T) =>
-                  Observable<T[]> | T[] | undefined | null) {}
+              public getChildren: GetChildrenFn<T>) {}
 
   _flattenNode(node: T, level: number,
                resultNodes: F[], parentMap: boolean[]): F[] {
@@ -64,7 +63,7 @@ export class MatTreeFlattener<T, F> {
         if (Array.isArray(childrenNodes)) {
           this._flattenChildren(childrenNodes, level, resultNodes, parentMap);
         } else {
-          childrenNodes.pipe(take(1)).subscribe(children => {
+          (childrenNodes as Observable<T[]>).pipe(take(1)).subscribe(children => {
             this._flattenChildren(children, level, resultNodes, parentMap);
           });
         }

tools/public_api_guard/cdk/tree.d.ts

@@ -1,7 +1,7 @@
 export declare abstract class BaseTreeControl<T, K = T> implements TreeControl<T, K> {
     dataNodes: T[];
     expansionModel: SelectionModel<K>;
-    getChildren: (dataNode: T) => (Observable<T[]> | T[] | undefined | null);
+    getChildren: GetChildrenFn<T>;
     getLevel: (dataNode: T) => number;
     isExpandable: (dataNode: T) => boolean;
     trackBy?: (dataNode: T) => K;
@@ -21,7 +21,7 @@ export declare abstract class BaseTreeControl<T, K = T> implements TreeControl<T
 export declare const CDK_TREE_NODE_OUTLET_NODE: InjectionToken<{}>;
 
 export declare class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContentInit, OnDestroy {
-    protected _children: T[];
+    protected _children: T[] | ReadonlyArray<T>;
     protected _differs: IterableDiffers;
     protected _elementRef: ElementRef<HTMLElement>;
     protected _tree: CdkTree<T>;
@@ -30,7 +30,7 @@ export declare class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements Afte
     protected _clear(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
-    protected updateChildrenNodes(children?: T[]): void;
+    protected updateChildrenNodes(children?: T[] | ReadonlyArray<T>): void;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkNestedTreeNode<any>, "cdk-nested-tree-node", ["cdkNestedTreeNode"], {}, {}, ["nodeOutlet"]>;
     static ɵfac: i0.ɵɵFactoryDef<CdkNestedTreeNode<any>, never>;
 }
@@ -74,7 +74,7 @@ export declare class CdkTreeNode<T> implements FocusableOption, OnDestroy {
     get level(): number;
     role: 'treeitem' | 'group';
     constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T>);
-    protected _setRoleFromChildren(children: T[]): void;
+    protected _setRoleFromChildren(children: T[] | ReadonlyArray<T>): void;
     protected _setRoleFromData(): void;
     focus(): void;
     ngOnDestroy(): void;
@@ -151,6 +151,8 @@ export interface FlatTreeControlOptions<T, K> {
     trackBy?: (dataNode: T) => K;
 }
 
+export declare type GetChildrenFn<T> = (node: T) => Observable<T[] | ReadonlyArray<T>> | T[] | ReadonlyArray<T> | undefined | null;
+
 export declare function getTreeControlFunctionsMissingError(): Error;
 
 export declare function getTreeControlMissingError(): Error;
@@ -162,8 +164,8 @@ export declare function getTreeMultipleDefaultNodeDefsError(): Error;
 export declare function getTreeNoValidDataSourceError(): Error;
 
 export declare class NestedTreeControl<T> extends BaseTreeControl<T> {
-    getChildren: (dataNode: T) => (Observable<T[]> | T[] | undefined | null);
-    constructor(getChildren: (dataNode: T) => (Observable<T[]> | T[] | undefined | null));
+    getChildren: GetChildrenFn<T>;
+    constructor(getChildren: GetChildrenFn<T>);
     protected _getDescendants(descendants: T[], dataNode: T): void;
     expandAll(): void;
     getDescendants(dataNode: T): T[];
@@ -172,7 +174,7 @@ export declare class NestedTreeControl<T> extends BaseTreeControl<T> {
 export interface TreeControl<T, K = T> {
     dataNodes: T[];
     expansionModel: SelectionModel<K>;
-    readonly getChildren: (dataNode: T) => Observable<T[]> | T[] | undefined | null;
+    readonly getChildren: GetChildrenFn<T>;
     readonly getLevel: (dataNode: T) => number;
     readonly isExpandable: (dataNode: T) => boolean;
     collapse(dataNode: T): void;

tools/public_api_guard/material/tree.d.ts

@@ -33,11 +33,11 @@ export declare class MatTreeFlatDataSource<T, F> extends DataSource<F> {
 }
 
 export declare class MatTreeFlattener<T, F> {
-    getChildren: (node: T) => Observable<T[]> | T[] | undefined | null;
+    getChildren: GetChildrenFn<T>;
     getLevel: (node: F) => number;
     isExpandable: (node: F) => boolean;
     transformFunction: (node: T, level: number) => F;
-    constructor(transformFunction: (node: T, level: number) => F, getLevel: (node: F) => number, isExpandable: (node: F) => boolean, getChildren: (node: T) => Observable<T[]> | T[] | undefined | null);
+    constructor(transformFunction: (node: T, level: number) => F, getLevel: (node: F) => number, isExpandable: (node: F) => boolean, getChildren: GetChildrenFn<T>);
     _flattenChildren(children: T[], level: number, resultNodes: F[], parentMap: boolean[]): void;
     _flattenNode(node: T, level: number, resultNodes: F[], parentMap: boolean[]): F[];
     expandFlattenedNodes(nodes: F[], treeControl: TreeControl<F>): F[];