diff --git a/projects/ng-devtools-backend/src/lib/change-detection-tracker.ts b/projects/ng-devtools-backend/src/lib/change-detection-tracker.ts index 15bc5920b66..f9310df8ce8 100644 --- a/projects/ng-devtools-backend/src/lib/change-detection-tracker.ts +++ b/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'); diff --git a/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts b/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts index 676bd831243..800d56d63a5 100644 --- a/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts +++ b/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); diff --git a/projects/ng-devtools-backend/src/lib/component-tree.ts b/projects/ng-devtools-backend/src/lib/component-tree.ts index ea963dad842..c73cf20d16f 100644 --- a/projects/ng-devtools-backend/src/lib/component-tree.ts +++ b/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 { - 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 => { 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; diff --git a/projects/ng-devtools-backend/src/lib/observer/identity-tracker.ts b/projects/ng-devtools-backend/src/lib/observer/identity-tracker.ts index 7e841baf3d4..9d96c755e15 100644 --- a/projects/ng-devtools-backend/src/lib/observer/identity-tracker.ts +++ b/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(); private _isComponent = new Map(); - 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(); - 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 = ({ position, ...d })), + directives: node.directives.map((d) => ({ position, ...d })), children: node.children.map((n, i) => indexTree(n, i, position)), nativeElement: node.nativeElement, } as IndexedNode; diff --git a/projects/ng-devtools-backend/src/lib/observer/observer.ts b/projects/ng-devtools-backend/src/lib/observer/observer.ts index 91d4eb8c3d9..c62277089d0 100644 --- a/projects/ng-devtools-backend/src/lib/observer/observer.ts +++ b/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 void>(); private _undoLifecyclePatch: (() => void)[] = []; private _lastChangeDetection = new Map(); - private _tracker = new IdentityTracker((window as any).ng); + private _tracker = new IdentityTracker(); private _forest: IndexedNode[] = []; constructor(private _config: Partial) {} @@ -140,14 +140,14 @@ export class DirectiveForestObserver { } this._patched = new Map 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) {