Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(devtools): type node properly; simplify logic in select-component.ts

Browse source
This commit is contained in:
AleksanderBodurri 2020-03-22 20:20:33 -04:00 committed by Minko Gechev
parent a8ba83cd30
commit 4df2b2b91e
3 changed files with 18 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
View file

@ -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>) => (

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

@ -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 => {

34
projects/ng-devtools-backend/src/lib/selected-component.ts
View file

@ -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}`;