Basic tree UI

Summary: A very basic tree in Antd to visualise the UI

Reviewed By: lblasa

Differential Revision: D38977035

fbshipit-source-id: f9bbf765ea8027eeb263cad86407502c6a5779dd

desktop/plugins/public/ui-debugger/index.tsx

@@ -9,14 +9,60 @@
 
 import {PluginClient, createState} from 'flipper-plugin';
 
+export type Inspectable =
+  | InspectableObject
+  | InspectableText
+  | InspectableNumber
+  | InspectableColor;
+
+export type InspectableText = {
+  type: 'text';
+  value: string;
+  mutable: boolean;
+};
+
+export type InspectableNumber = {
+  type: 'number';
+  value: number;
+  mutable: boolean;
+};
+
+export type InspectableColor = {
+  type: 'number';
+  value: number;
+  mutable: boolean;
+};
+
+export type InspectableObject = {
+  type: 'object';
+  fields: Record<string, Inspectable>;
+};
+
+export type Id = string;
+export type UINode = {
+  id: Id;
+  name: string;
+  attributes: Record<string, Inspectable>;
+  children: UINode[];
+};
+
 type Events = {
   init: {rootId: string};
+
+  nativeScan: {root: UINode};
 };
 
 export function plugin(client: PluginClient<Events>) {
   const rootId = createState<string | undefined>(undefined);
+
+  const tree = createState<UINode | undefined>(undefined);
   client.onMessage('init', (root) => rootId.set(root.rootId));
-  return {rootId};
+
+  client.onMessage('nativeScan', ({root}) => {
+    tree.set(root as UINode);
+  });
+
+  return {rootId, tree};
 }
 
 export {Component} from './components/main';