docs(cdk/tree): examples not working when forked to Stackblitz (#30601)

The tree examples were breaking down when forked to Stackblitz, because of a couple of reasons:
1. They had their sample data in a separate file which the build process wasn't picking up.
2. They had compilation errors only with rxjs 7+ which we didn't notice, because our local setup is on rxjs 6.

I also went through all the examples and moved the sample data further down so it doesn't distract from the actual code.

Fixes #30600.

Author: crisbeto

src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.ts

@@ -14,40 +14,6 @@ interface BackendData {
   children?: string[];
 }
 
-const TREE_DATA: Map<string, BackendData> = new Map(
-  [
-    {
-      id: '1',
-      name: 'Fruit',
-      children: ['1-1', '1-2', '1-3'],
-    },
-    {id: '1-1', name: 'Apple', parent: '1'},
-    {id: '1-2', name: 'Banana', parent: '1'},
-    {id: '1-3', name: 'Fruit Loops', parent: '1'},
-    {
-      id: '2',
-      name: 'Vegetables',
-      children: ['2-1', '2-2'],
-    },
-    {
-      id: '2-1',
-      name: 'Green',
-      parent: '2',
-      children: ['2-1-1', '2-1-2'],
-    },
-    {
-      id: '2-2',
-      name: 'Orange',
-      parent: '2',
-      children: ['2-2-1', '2-2-2'],
-    },
-    {id: '2-1-1', name: 'Broccoli', parent: '2-1'},
-    {id: '2-1-2', name: 'Brussel sprouts', parent: '2-1'},
-    {id: '2-2-1', name: 'Pumpkins', parent: '2-2'},
-    {id: '2-2-2', name: 'Carrots', parent: '2-2'},
-  ].map(datum => [datum.id, datum]),
-);
-
 class FakeDataBackend {
   private _getRandomDelayTime() {
     // anywhere from 100 to 500ms.
@@ -56,16 +22,16 @@ class FakeDataBackend {
 
   getChildren(id: string): Observable<BackendData[]> {
     // first, find the specified ID in our tree
-    const item = TREE_DATA.get(id);
+    const item = EXAMPLE_DATA.get(id);
     const children = item?.children ?? [];
 
-    return observableOf(children.map(childId => TREE_DATA.get(childId)!)).pipe(
+    return observableOf(children.map(childId => EXAMPLE_DATA.get(childId)!)).pipe(
       delay(this._getRandomDelayTime()),
     );
   }
 
   getRoots(): Observable<BackendData[]> {
-    return observableOf([...TREE_DATA.values()].filter(datum => !datum.parent)).pipe(
+    return observableOf([...EXAMPLE_DATA.values()].filter(datum => !datum.parent)).pipe(
       delay(this._getRandomDelayTime()),
     );
   }
@@ -268,7 +234,7 @@ class ComplexDataStore {
     const transformFn = sourcesAndTransform[sourcesAndTransform.length - 1] as TransformFn<T, U>;
 
     return combineLatest([...sources, this._state]).pipe(
-      map(args => transformFn(...(args as [...ObservedValuesOf<T>, State]))),
+      map(args => transformFn(...(args as unknown as [...ObservedValuesOf<T>, State]))),
       shareReplay({refCount: true, bufferSize: 1}),
     );
   }
@@ -305,3 +271,37 @@ export class CdkTreeComplexExample implements OnInit {
     }
   }
 }
+
+const EXAMPLE_DATA = new Map<string, BackendData>(
+  [
+    {
+      id: '1',
+      name: 'Fruit',
+      children: ['1-1', '1-2', '1-3'],
+    },
+    {id: '1-1', name: 'Apple', parent: '1'},
+    {id: '1-2', name: 'Banana', parent: '1'},
+    {id: '1-3', name: 'Fruit Loops', parent: '1'},
+    {
+      id: '2',
+      name: 'Vegetables',
+      children: ['2-1', '2-2'],
+    },
+    {
+      id: '2-1',
+      name: 'Green',
+      parent: '2',
+      children: ['2-1-1', '2-1-2'],
+    },
+    {
+      id: '2-2',
+      name: 'Orange',
+      parent: '2',
+      children: ['2-2-1', '2-2-2'],
+    },
+    {id: '2-1-1', name: 'Broccoli', parent: '2-1'},
+    {id: '2-1-2', name: 'Brussel sprouts', parent: '2-1'},
+    {id: '2-2-1', name: 'Pumpkins', parent: '2-2'},
+    {id: '2-2-2', name: 'Carrots', parent: '2-2'},
+  ].map(datum => [datum.id, datum]),
+);

src/components-examples/cdk/tree/cdk-tree-custom-key-manager/cdk-tree-custom-key-manager-example.ts

@@ -28,64 +28,6 @@ import {
 import {Subject, isObservable, Observable} from 'rxjs';
 import {take} from 'rxjs/operators';
 
-const TREE_DATA: ExampleFlatNode[] = [
-  {
-    name: 'Fruit',
-    expandable: true,
-    level: 0,
-  },
-  {
-    name: 'Apple',
-    expandable: false,
-    level: 1,
-  },
-  {
-    name: 'Banana',
-    expandable: false,
-    level: 1,
-  },
-  {
-    name: 'Fruit loops',
-    expandable: false,
-    level: 1,
-  },
-  {
-    name: 'Vegetables',
-    expandable: true,
-    level: 0,
-  },
-  {
-    name: 'Green',
-    expandable: true,
-    level: 1,
-  },
-  {
-    name: 'Broccoli',
-    expandable: false,
-    level: 2,
-  },
-  {
-    name: 'Brussels sprouts',
-    expandable: false,
-    level: 2,
-  },
-  {
-    name: 'Orange',
-    expandable: true,
-    level: 1,
-  },
-  {
-    name: 'Pumpkins',
-    expandable: false,
-    level: 2,
-  },
-  {
-    name: 'Carrots',
-    expandable: false,
-    level: 2,
-  },
-];
-
 /** Flat node with expandable and level information */
 interface ExampleFlatNode {
   expandable: boolean;
@@ -379,16 +321,16 @@ export class CdkTreeCustomKeyManagerExample {
     node => node.expandable,
   );
 
-  dataSource = new ArrayDataSource(TREE_DATA);
+  dataSource = new ArrayDataSource(EXAMPLE_DATA);
 
   hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
 
   getParentNode(node: ExampleFlatNode) {
-    const nodeIndex = TREE_DATA.indexOf(node);
+    const nodeIndex = EXAMPLE_DATA.indexOf(node);
 
     for (let i = nodeIndex - 1; i >= 0; i--) {
-      if (TREE_DATA[i].level === node.level - 1) {
-        return TREE_DATA[i];
+      if (EXAMPLE_DATA[i].level === node.level - 1) {
+        return EXAMPLE_DATA[i];
       }
     }
 
@@ -406,3 +348,61 @@ export class CdkTreeCustomKeyManagerExample {
     return true;
   }
 }
+
+const EXAMPLE_DATA: ExampleFlatNode[] = [
+  {
+    name: 'Fruit',
+    expandable: true,
+    level: 0,
+  },
+  {
+    name: 'Apple',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Banana',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Fruit loops',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Vegetables',
+    expandable: true,
+    level: 0,
+  },
+  {
+    name: 'Green',
+    expandable: true,
+    level: 1,
+  },
+  {
+    name: 'Broccoli',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Brussels sprouts',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Orange',
+    expandable: true,
+    level: 1,
+  },
+  {
+    name: 'Pumpkins',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Carrots',
+    expandable: false,
+    level: 2,
+  },
+];

src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example-data.ts

@@ -5,7 +5,15 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {timer} from 'rxjs';
 import {mapTo} from 'rxjs/operators';
-import {NestedFoodNode, NESTED_DATA} from './cdk-tree-flat-children-accessor-example-data';
+
+/**
+ * Food data with nested structure.
+ * Each node has a name and an optional list of children.
+ */
+interface NestedFoodNode {
+  name: string;
+  children?: NestedFoodNode[];
+}
 
 function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
   const flattenedNodes = [];
@@ -34,12 +42,12 @@ export class CdkTreeFlatChildrenAccessorExample {
 
   childrenAccessor = (dataNode: NestedFoodNode) => timer(100).pipe(mapTo(dataNode.children ?? []));
 
-  dataSource = new ArrayDataSource(NESTED_DATA);
+  dataSource = new ArrayDataSource(EXAMPLE_DATA);
 
   hasChild = (_: number, node: NestedFoodNode) => !!node.children?.length;
 
   getParentNode(node: NestedFoodNode) {
-    for (const parent of flattenNodes(NESTED_DATA)) {
+    for (const parent of flattenNodes(EXAMPLE_DATA)) {
       if (parent.children?.includes(node)) {
         return parent;
       }
@@ -59,3 +67,23 @@ export class CdkTreeFlatChildrenAccessorExample {
     return true;
   }
 }
+
+const EXAMPLE_DATA: NestedFoodNode[] = [
+  {
+    name: 'Fruit',
+    children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
+  },
+  {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green',
+        children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
+      },
+      {
+        name: 'Orange',
+        children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
+      },
+    ],
+  },
+];