refactor(collections): allow ReadonlyArray as data type (#12723)

Allows a `ReadonlyArray`, in addition to a regular one, to be passed into the data source.

Fixes #12720.

Author: crisbeto

src/cdk/collections/array-data-source.ts

@@ -12,11 +12,11 @@ import {DataSource} from './data-source';
 
 /** DataSource wrapper for a native array. */
 export class ArrayDataSource<T> extends DataSource<T> {
-  constructor(private _data: T[] | Observable<T[]>) {
+  constructor(private _data: T[] | ReadonlyArray<T> | Observable<T[] | ReadonlyArray<T>>) {
     super();
   }
 
-  connect(): Observable<T[]> {
+  connect(): Observable<T[] | ReadonlyArray<T>> {
     return this._data instanceof Observable ? this._data : observableOf(this._data);
   }
 

src/cdk/collections/data-source.ts

@@ -18,7 +18,7 @@ export abstract class DataSource<T> {
    *     data source.
    * @returns Observable that emits a new value when the data changes.
    */
-  abstract connect(collectionViewer: CollectionViewer): Observable<T[]>;
+  abstract connect(collectionViewer: CollectionViewer): Observable<T[] | ReadonlyArray<T>>;
 
   /**
    * Disconnects a collection viewer (such as a data-table) from this data source. Can be used

src/cdk/scrolling/virtual-for-of.ts

@@ -121,7 +121,7 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
   @Input() cdkVirtualForTemplateCacheSize: number = 20;
 
   /** Emits whenever the data in the current DataSource changes. */
-  dataStream: Observable<T[]> = this._dataSourceChanges
+  dataStream: Observable<T[] | ReadonlyArray<T>> = this._dataSourceChanges
       .pipe(
           // Start off with null `DataSource`.
           startWith(null!),
@@ -138,7 +138,7 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
   private _differ: IterableDiffer<T> | null = null;
 
   /** The most recent data emitted from the DataSource. */
-  private _data: T[];
+  private _data: T[] | ReadonlyArray<T>;
 
   /** The currently rendered items. */
   private _renderedItems: T[];
@@ -254,10 +254,13 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
   }
 
   /** Swap out one `DataSource` for another. */
-  private _changeDataSource(oldDs: DataSource<T> | null, newDs: DataSource<T>): Observable<T[]> {
+  private _changeDataSource(oldDs: DataSource<T> | null, newDs: DataSource<T>):
+    Observable<T[] | ReadonlyArray<T>> {
+
     if (oldDs) {
       oldDs.disconnect(this);
     }
+
     this._needsUpdate = true;
     return newDs.connect(this);
   }

src/cdk/table/table.ts

@@ -149,7 +149,7 @@ export interface RenderRow<T> {
 })
 export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
   /** Latest data provided by the data source. */
-  protected _data: T[];
+  protected _data: T[] | ReadonlyArray<T>;
 
   /** Subject that emits when the component has been destroyed. */
   private _onDestroy = new Subject<void>();
@@ -769,7 +769,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     // If no data source has been set, there is nothing to observe for changes.
     if (!this.dataSource) { return; }
 
-    let dataStream: Observable<T[]> | undefined;
+    let dataStream: Observable<T[] | ReadonlyArray<T>> | undefined;
 
     // Check if the datasource is a DataSource object by observing if it has a connect function.
     // Cannot check this.dataSource['connect'] due to potential property renaming, nor can it

src/cdk/tree/tree.ts

@@ -183,7 +183,7 @@ export class CdkTree<T>
 
   /** Set up a subscription for the data provided by the data source. */
   private _observeRenderChanges() {
-    let dataStream: Observable<T[]> | undefined;
+    let dataStream: Observable<T[] | ReadonlyArray<T>> | undefined;
 
     // Cannot use `instanceof DataSource` since the data source could be a literal with
     // `connect` function and may not extends DataSource.
@@ -204,7 +204,7 @@ export class CdkTree<T>
   }
 
   /** Check for changes made in the data and render each change (node added/removed/moved). */
-  renderNodeChanges(data: T[], dataDiffer: IterableDiffer<T> = this._dataDiffer,
+  renderNodeChanges(data: T[] | ReadonlyArray<T>, dataDiffer: IterableDiffer<T> = this._dataDiffer,
                     viewContainer: ViewContainerRef = this._nodeOutlet.viewContainer,
                     parentData?: T) {
     const changes = dataDiffer.diff(data);