From 4df2b2b91ec99fccbb565103c900847f3c720ed4 Mon Sep 17 00:00:00 2001
From: AleksanderBodurri <alex.bodurri@mail.utoronto.ca>
Date: Sun, 22 Mar 2020 20:20:33 -0400
Subject: [PATCH] refactor(devtools): type node properly; simplify logic in
 select-component.ts

---
 .../src/lib/client-event-subscribers.ts       |  4 +--
 .../src/lib/component-tree.ts                 |  1 -
 .../src/lib/selected-component.ts             | 34 +++++++++----------
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts b/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
index cc219e8d4e7..7cd3fbcea31 100644
--- a/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
+++ b/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
@@ -18,6 +18,7 @@ import { setConsoleReference } from './selected-component';
 import { unHighlight } from './highlighter';
 import { getAngularVersion, appIsAngularInDevMode, appIsSupportedAngularVersion } from './angular-check';
 import { observeDOM, getDirectiveId, getDirectiveForest, indexDirectiveForest } from './component-tree-identifiers';
+import { IndexedNode } from './observer/identity-tracker';
 
 export const subscribeToClientEvents = (messageBus: MessageBus<Events>): void => {
   messageBus.on('shutdown', shutdownCallback(messageBus));
@@ -83,9 +84,8 @@ const stopProfilingCallback = (messageBus: MessageBus<Events>) => () => {
 };
 
 const selectedComponentCallback = (position: ElementPosition) => {
-  // TODO: figure out proper typing of the node variable.
   const node = queryDirectiveForest(position, getDirectiveForest());
-  setConsoleReference(node);
+  setConsoleReference(node as IndexedNode);
 };
 
 const getNestedPropertiesCallback = (messageBus: MessageBus<Events>) => (
diff --git a/projects/ng-devtools-backend/src/lib/component-tree.ts b/projects/ng-devtools-backend/src/lib/component-tree.ts
index d31faf2ae5d..abc3433617c 100644
--- a/projects/ng-devtools-backend/src/lib/component-tree.ts
+++ b/projects/ng-devtools-backend/src/lib/component-tree.ts
@@ -27,7 +27,6 @@ export interface ComponentInstanceType {
 
 export interface ComponentTreeNode extends DevToolsNode<DirectiveInstanceType, ComponentInstanceType> {
   children: ComponentTreeNode[];
-  position?: ElementPosition;
 }
 
 export const getLatestComponentState = (query: ComponentExplorerViewQuery): DirectivesProperties | undefined => {
diff --git a/projects/ng-devtools-backend/src/lib/selected-component.ts b/projects/ng-devtools-backend/src/lib/selected-component.ts
index 6653e6f80cd..168fa7b44dc 100644
--- a/projects/ng-devtools-backend/src/lib/selected-component.ts
+++ b/projects/ng-devtools-backend/src/lib/selected-component.ts
@@ -1,46 +1,41 @@
-import { ComponentTreeNode } from './component-tree';
 import { arrayEquals } from 'shared-utils';
+import { IndexedNode } from './observer/identity-tracker';
 
 declare const ng: any;
 
-const SELECTED_COMPONENT_PROPERTY_KEY_PREFIX = '$ng';
-let selectedComponentKeyPostfix = 0;
-const getSelectedComponentKey = () => `${SELECTED_COMPONENT_PROPERTY_KEY_PREFIX}${selectedComponentKeyPostfix}`;
+const CONSOLE_REFERENCE_PREFIX = '$ng';
+const CAPACITY = 5;
+const nodesForConsoleReference: IndexedNode[] = [];
 
-const nodesForConsoleReference: ComponentTreeNode[] = [];
-
-export const setConsoleReference = (node: ComponentTreeNode | null) => {
+export const setConsoleReference = (node: IndexedNode | null) => {
   if (node === null) {
     return;
   }
   _setConsoleReference(node);
 };
 
-const _setConsoleReference = (node: ComponentTreeNode) => {
+const _setConsoleReference = (node: IndexedNode) => {
   prepareCurrentReferencesForInsertion(node);
   nodesForConsoleReference.unshift(node);
   assignConsoleReferencesFrom(nodesForConsoleReference);
 };
 
-const prepareCurrentReferencesForInsertion = (node: ComponentTreeNode) => {
-  const foundIndex = nodesForConsoleReference.findIndex(
-    nodeToLookFor => nodeToLookFor.position && node.position && arrayEquals(nodeToLookFor.position, node.position)
+const prepareCurrentReferencesForInsertion = (node: IndexedNode) => {
+  const foundIndex = nodesForConsoleReference.findIndex(nodeToLookFor =>
+    arrayEquals(nodeToLookFor.position, node.position)
   );
   if (foundIndex !== -1) {
     nodesForConsoleReference.splice(foundIndex, 1);
-  } else if (nodesForConsoleReference.length === 5) {
+  } else if (nodesForConsoleReference.length === CAPACITY) {
     nodesForConsoleReference.pop();
   }
 };
 
-const assignConsoleReferencesFrom = (nodes: ComponentTreeNode[]) => {
-  nodes.forEach((node, index) => {
-    selectedComponentKeyPostfix = index;
-    setDirectiveKey(node, getSelectedComponentKey());
-  });
+const assignConsoleReferencesFrom = (nodes: IndexedNode[]) => {
+  nodes.forEach((node, index) => setDirectiveKey(node, getConsoleReferenceWithIndexOf(index)));
 };
 
-const setDirectiveKey = (node: ComponentTreeNode | null, key) => {
+const setDirectiveKey = (node: IndexedNode | null, key) => {
   Object.defineProperty(window, key, {
     get: () => {
       if (node && node.nativeElement instanceof HTMLElement) {
@@ -54,3 +49,6 @@ const setDirectiveKey = (node: ComponentTreeNode | null, key) => {
     configurable: true,
   });
 };
+
+const getConsoleReferenceWithIndexOf = (consoleReferenceIndex: number) =>
+  `${CONSOLE_REFERENCE_PREFIX}${consoleReferenceIndex}`;