From 1b97432960a59218b40427f3d494818540889ac7 Mon Sep 17 00:00:00 2001
From: AleksanderBodurri <alex.bodurri@mail.utoronto.ca>
Date: Mon, 21 Jun 2021 20:56:43 -0400
Subject: [PATCH] fix(devtools): update typing of differ objects to fit the new
 contract of TrackByFunction (rangle/angular-devtools#862)

Previously `DefaultIterableDiffer` was able to infer the type of it's generic by reading the type contract defined by the user defined trackBy function. This was because `TrackByFunction` can be specified with a generic that is used to type its second argument. If this generic is not provided, like in this case, typescript infers this type from the function contract directly. In this case this inferred type was `FlatNode`. This inference is then propagated to `DefaultIterableDiffer`, which is why we were not seeing this error previously.

A change in the framework made it so the second argument of `TrackByFunction` is typed as a generic that extends the generic passed into `TrackByFunction`. Since we had not previously passed in this generic to `TrackByFunction`, this type was inferred as an extension of `unknown`, causing a type error when passed as an argument to the `DefaultIterableDiffer` constructor.

Now the functions being used are typed directly as `TrackByFunction<FlatNode>`

For clarity, the `DefaultIterableDiffer` generic is now also typed as `FlatNode`.

See https://github.com/angular/angular/pull/41995 for the framework change.
---
 .../directive-forest/component-data-source.ts              | 6 +++---
 .../property-resolver/property-data-source.ts              | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts
index f7fd00629f0..619e554df28 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts
@@ -4,7 +4,7 @@ import { BehaviorSubject, merge, Observable } from 'rxjs';
 import { MatTreeFlattener } from '@angular/material/tree';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { map } from 'rxjs/operators';
-import { DefaultIterableDiffer } from '@angular/core';
+import { DefaultIterableDiffer, TrackByFunction } from '@angular/core';
 import { IndexedNode, indexForest } from './index-forest';
 import { diff } from '../../diffing';
 
@@ -22,7 +22,7 @@ export interface FlatNode {
 
 const expandable = (node: IndexedNode) => !!node.children && node.children.length > 0;
 
-const trackBy = (_: number, item: FlatNode) => `${item.id}#${item.expandable}`;
+const trackBy: TrackByFunction<FlatNode> = (_: number, item: FlatNode) => `${item.id}#${item.expandable}`;
 
 const getId = (node: IndexedNode) => {
   let prefix = '';
@@ -61,7 +61,7 @@ const filterCommentNodes = (nodes: IndexedNode[]) => {
 };
 
 export class ComponentDataSource extends DataSource<FlatNode> {
-  private _differ = new DefaultIterableDiffer(trackBy);
+  private _differ = new DefaultIterableDiffer<FlatNode>(trackBy);
   private _expandedData = new BehaviorSubject<FlatNode[]>([]);
   private _flattenedData = new BehaviorSubject<FlatNode[]>([]);
   private _nodeToFlat = new WeakMap<IndexedNode, FlatNode>();
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts
index 0c58a25e53e..5e00f8e2306 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts
@@ -4,18 +4,19 @@ import { BehaviorSubject, merge, Observable, Subscription } from 'rxjs';
 import { MatTreeFlattener } from '@angular/material/tree';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { map } from 'rxjs/operators';
-import { DefaultIterableDiffer } from '@angular/core';
+import { DefaultIterableDiffer, TrackByFunction } from '@angular/core';
 import { diff } from '../../diffing';
 import { FlatNode, Property } from './element-property-resolver';
 import { arrayifyProps } from './arrayify-props';
 
-const trackBy = (_: number, item: FlatNode) => `#${item.prop.name}#${item.prop.descriptor.preview}#${item.level}`;
+const trackBy: TrackByFunction<FlatNode> = (_: number, item: FlatNode) =>
+  `#${item.prop.name}#${item.prop.descriptor.preview}#${item.level}`;
 
 export class PropertyDataSource extends DataSource<FlatNode> {
   private _data = new BehaviorSubject<FlatNode[]>([]);
   private _subscriptions: Subscription[] = [];
   private _expandedData = new BehaviorSubject<FlatNode[]>([]);
-  private _differ = new DefaultIterableDiffer(trackBy);
+  private _differ = new DefaultIterableDiffer<FlatNode>(trackBy);
 
   constructor(
     props: { [prop: string]: Descriptor },