refactor(devtools): remove unused ng debug objects

projects/ng-devtools-backend/src/lib/change-detection-tracker.ts

@@ -7,7 +7,7 @@ export const onChangeDetection = (callback: () => void): void => {
   if (hookInitialized) {
     return;
   }
-  const forest = buildDirectiveForest((window as any).ng);
+  const forest = buildDirectiveForest();
   listenAndNotifyOnUpdates(forest, callback);
   hookInitialized = true;
 };
@@ -15,7 +15,7 @@ export const onChangeDetection = (callback: () => void): void => {
 // We patch the component tView template function reference
 // to detect when the change detection has completed and notify the client.
 const listenAndNotifyOnUpdates = (roots: ComponentTreeNode[], callback: () => void): void => {
-  roots.forEach(root => {
+  roots.forEach((root) => {
     const { component } = root;
     if (!component) {
       console.warn('Could not find component instance on root');

projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts

@@ -61,7 +61,7 @@ export class ComponentInspector {
     unHighlight();
     if (this._selectedComponent.component && this._selectedComponent.host) {
       highlight(this._selectedComponent.host);
-      const forest: IndexedNode[] = indexForest(buildDirectiveForest((window as any).ng));
+      const forest: IndexedNode[] = indexForest(buildDirectiveForest());
       const elementPosition: ElementPosition | null = getIndexForNativeElementInForest(
         this._selectedComponent.host,
         forest
@@ -84,7 +84,7 @@ export class ComponentInspector {
   }
 
   highlightByPosition(position: ElementPosition): void {
-    const forest: ComponentTreeNode[] = buildDirectiveForest((window as any).ng);
+    const forest: ComponentTreeNode[] = buildDirectiveForest();
     const elementToHighlight: HTMLElement | null = findNodeInForest(position, forest);
     if (elementToHighlight) {
       highlight(elementToHighlight);

projects/ng-devtools-backend/src/lib/component-tree.ts

@@ -1,14 +1,13 @@
 import { deeplySerializeSelectedProperties, serializeDirectiveState } from './state-serializer/state-serializer';
 
 import {
-  DevToolsNode,
-  ElementPosition,
   ComponentExplorerViewQuery,
+  DevToolsNode,
   DirectivesProperties,
-  UpdatedStateData,
+  ElementPosition,
   PropertyQueryTypes,
+  UpdatedStateData,
 } from 'protocol';
-import { DebuggingAPI } from './interfaces';
 import { IndexedNode } from './observer/identity-tracker';
 import { buildDirectiveTree, getLViewFromDirectiveOrElementInstance } from './lview-transform';
 
@@ -30,7 +29,7 @@ export interface ComponentTreeNode extends DevToolsNode<DirectiveInstanceType, C
 }
 
 export const getLatestComponentState = (query: ComponentExplorerViewQuery): DirectivesProperties | undefined => {
-  const node = queryDirectiveForest(query.selectedElement, buildDirectiveForest((window as any).ng));
+  const node = queryDirectiveForest(query.selectedElement, buildDirectiveForest());
   if (!node) {
     return;
   }
@@ -105,10 +104,9 @@ const getRootLViews = (element: Element): Set<any> => {
   return getRootLViewsHelper(element, new Set(Array.from(roots).map(getLViewFromDirectiveOrElementInstance)));
 };
 
-export const buildDirectiveForest = (ngd: DebuggingAPI): ComponentTreeNode[] => {
+export const buildDirectiveForest = (): ComponentTreeNode[] => {
   const roots = getRootLViews(document.documentElement);
-  const result = Array.prototype.concat.apply([], [...roots].map(buildDirectiveTree));
-  return result;
+  return Array.prototype.concat.apply([], [...roots].map(buildDirectiveTree));
 };
 
 // Based on an ElementID we return a specific component node.
@@ -164,12 +162,12 @@ const findElementIDFromNativeElementInForest = (
 
 export const findNodeFromSerializedPosition = (serializedPosition: string) => {
   const position: number[] = serializedPosition.split(',').map((index) => parseInt(index, 10));
-  return queryDirectiveForest(position, buildDirectiveForest(ngDebug()));
+  return queryDirectiveForest(position, buildDirectiveForest());
 };
 
 export const updateState = (updatedStateData: UpdatedStateData): void => {
   const ngd = ngDebug();
-  const node = queryDirectiveForest(updatedStateData.directiveId.element, buildDirectiveForest(ngd));
+  const node = queryDirectiveForest(updatedStateData.directiveId.element, buildDirectiveForest());
   if (!node) {
     console.warn('Could not update the state of component', updatedStateData, 'because the component was not found');
     return;

projects/ng-devtools-backend/src/lib/observer/identity-tracker.ts

@@ -1,7 +1,6 @@
 import { ElementPosition, DevToolsNode } from 'protocol';
 import { buildDirectiveForest, DirectiveInstanceType, ComponentInstanceType } from '../component-tree';
 import { Type } from '@angular/core';
-import { DebuggingAPI } from '../interfaces';
 
 interface TreeNode {
   parent: TreeNode;
@@ -20,8 +19,6 @@ export class IdentityTracker {
   private _currentDirectiveId = new Map<any, number>();
   private _isComponent = new Map<any, boolean>();
 
-  constructor(private _ng: DebuggingAPI) {}
-
   getDirectivePosition(dir: any): ElementPosition | undefined {
     return this._currentDirectivePosition.get(dir);
   }
@@ -35,11 +32,11 @@ export class IdentityTracker {
   }
 
   index(): { newNodes: NodeArray; removedNodes: NodeArray; indexedForest: IndexedNode[] } {
-    const indexedForest = indexForest(buildDirectiveForest(this._ng));
+    const indexedForest = indexForest(buildDirectiveForest());
     const newNodes: NodeArray = [];
     const removedNodes: NodeArray = [];
     const allNodes = new Set<any>();
-    indexedForest.forEach(root => this._index(root, null, newNodes, allNodes));
+    indexedForest.forEach((root) => this._index(root, null, newNodes, allNodes));
     this._currentDirectiveId.forEach((_: number, dir: any) => {
       if (!allNodes.has(dir)) {
         removedNodes.push({ directive: dir, isComponent: !!this._isComponent.get(dir) });
@@ -63,12 +60,12 @@ export class IdentityTracker {
       this._isComponent.set(node.component.instance, true);
       this._indexNode(node.component.instance, node.position, newNodes);
     }
-    (node.directives || []).forEach(dir => {
+    (node.directives || []).forEach((dir) => {
       allNodes.add(dir.instance);
       this._isComponent.set(dir.instance, false);
       this._indexNode(dir.instance, node.position, newNodes);
     });
-    node.children.forEach(child => this._index(child, parent, newNodes, allNodes));
+    node.children.forEach((child) => this._index(child, parent, newNodes, allNodes));
   }
 
   private _indexNode(directive: any, position: ElementPosition, newNodes: NodeArray): void {
@@ -100,7 +97,7 @@ const indexTree = <T extends DevToolsNode<DirectiveInstanceType, ComponentInstan
     position,
     element: node.element,
     component: node.component,
-    directives: node.directives.map(d => ({ position, ...d })),
+    directives: node.directives.map((d) => ({ position, ...d })),
     children: node.children.map((n, i) => indexTree(n, i, position)),
     nativeElement: node.nativeElement,
   } as IndexedNode;

projects/ng-devtools-backend/src/lib/observer/observer.ts

@@ -55,7 +55,7 @@ const hookNames = [
   'AfterViewChecked',
 ];
 
-const hookMethodNames = new Set(hookNames.map(hook => `ng${hook}`));
+const hookMethodNames = new Set(hookNames.map((hook) => `ng${hook}`));
 
 const hookTViewProperties = [
   'preOrderHooks',
@@ -95,7 +95,7 @@ export class DirectiveForestObserver {
   private _patched = new Map<any, () => void>();
   private _undoLifecyclePatch: (() => void)[] = [];
   private _lastChangeDetection = new Map<any, number>();
-  private _tracker = new IdentityTracker((window as any).ng);
+  private _tracker = new IdentityTracker();
   private _forest: IndexedNode[] = [];
 
   constructor(private _config: Partial<Config>) {}
@@ -140,14 +140,14 @@ export class DirectiveForestObserver {
     }
 
     this._patched = new Map<any, () => void>();
-    this._undoLifecyclePatch.forEach(p => p());
+    this._undoLifecyclePatch.forEach((p) => p());
     this._undoLifecyclePatch = [];
   }
 
   indexForest(): void {
     const { newNodes, removedNodes, indexedForest } = this._tracker.index();
     this._forest = indexedForest;
-    newNodes.forEach(node => {
+    newNodes.forEach((node) => {
       if (this._config.onLifecycleHook) {
         this._observeLifecycle(node.directive, node.isComponent);
       }
@@ -156,7 +156,7 @@ export class DirectiveForestObserver {
       }
       this._fireCreationCallback(node.directive, node.isComponent);
     });
-    removedNodes.forEach(node => {
+    removedNodes.forEach((node) => {
       this._patched.delete(node.directive);
       this._fireDestroyCallback(node.directive, node.isComponent);
     });
@@ -206,7 +206,7 @@ export class DirectiveForestObserver {
     if (original.patched) {
       return;
     }
-    declarations.tView.template = function(_: any, component: any): void {
+    declarations.tView.template = function (_: any, component: any): void {
       const start = performance.now();
       original.apply(this, arguments);
       if (self._tracker.hasDirective(component) && self._config.onChangeDetection) {
@@ -240,7 +240,7 @@ export class DirectiveForestObserver {
       return;
     }
     const tview = ctx[1];
-    hookTViewProperties.forEach(hook => {
+    hookTViewProperties.forEach((hook) => {
       const current = tview[hook];
       if (!Array.isArray(current)) {
         return;
@@ -251,7 +251,7 @@ export class DirectiveForestObserver {
         }
         if (typeof el === 'function') {
           const self = this;
-          current[idx] = function(): any {
+          current[idx] = function (): any {
             const start = performance.now();
             const result = el.apply(this, arguments);
             if (self._tracker.hasDirective(this) && self._config.onLifecycleHook) {