Files
flipper/desktop/plugins/public/ui-debugger/index.tsx
Luke De Feo 41068d1c90 Native UI scan
Summary: Added scheduler to scan the Native UI every 500 ms to test, Also added instrumentation in a separate event with the timings of each stage visualised in a Data table on desktop which can be accessed with ctrl+I. Currently this instrumentation event is sent every time but it could be a config option controlled from the desktop in the future

Reviewed By: lblasa

Differential Revision: D39205313

fbshipit-source-id: ca034171db6b062396b4ef28028aaa663c4d852a
2022-09-07 04:37:17 -07:00

50 lines
1.3 KiB
TypeScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {PluginClient, createState, createDataSource} from 'flipper-plugin';
import {Id, UINode} from './types';
export type PerfStatsEvent = {
txId: number;
start: number;
scanComplete: number;
serializationComplete: number;
socketComplete: number;
nodesCount: number;
};
type Events = {
init: {rootId: string};
nativeScan: {txId: number; nodes: UINode[]};
perfStats: PerfStatsEvent;
};
export function plugin(client: PluginClient<Events>) {
const rootId = createState<Id | undefined>(undefined);
client.onMessage('init', (root) => rootId.set(root.rootId));
const perfEvents = createDataSource<PerfStatsEvent, 'txId'>([], {
key: 'txId',
limit: 10 * 1024,
});
client.onMessage('perfStats', (event) => {
perfEvents.append(event);
});
const nodesAtom = createState<Map<Id, UINode>>(new Map());
client.onMessage('nativeScan', ({nodes}) => {
nodesAtom.set(new Map(nodes.map((node) => [node.id, node])));
console.log(nodesAtom.get());
});
return {rootId, nodes: nodesAtom, perfEvents};
}
export {Component} from './components/main';