Basic desktop plugin

Summary:
Scaffolded desktop UI for UI debugger
I changed getroot from an rpc call to an event sent on connect. The root should never change as its the application object.

Reviewed By: lblasa

Differential Revision: D38866008

fbshipit-source-id: ca0f1908bedb643238f11ed796922e3359619167

android/sample/src/debug/java/com/facebook/flipper/sample/FlipperInitializer.java

@@ -7,6 +7,7 @@
 
 package com.facebook.flipper.sample;
 
+import android.app.Application;
 import android.content.Context;
 import com.facebook.flipper.core.FlipperClient;
 import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
@@ -20,6 +21,7 @@ import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
 import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
 import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
 import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin.SharedPreferencesDescriptor;
+import com.facebook.flipper.plugins.uidebugger.UIDebuggerFlipperPlugin;
 import com.facebook.litho.config.ComponentsConfiguration;
 import com.facebook.litho.editor.flipper.LithoFlipperDescriptors;
 import java.util.Arrays;
@@ -54,6 +56,7 @@ public final class FlipperInitializer {
     client.addPlugin(CrashReporterPlugin.getInstance());
     client.addPlugin(new DatabasesFlipperPlugin(context));
     client.addPlugin(NavigationFlipperPlugin.getInstance());
+    client.addPlugin(new UIDebuggerFlipperPlugin((Application) context));
     client.start();
 
     final OkHttpClient okHttpClient =

android/src/main/java/com/facebook/flipper/plugins/uidebugger/UIDebuggerFlipperPlugin.kt

@@ -9,24 +9,29 @@ package com.facebook.flipper.plugins.uidebugger
 
 import android.app.Application
 import com.facebook.flipper.core.FlipperConnection
+import com.facebook.flipper.core.FlipperObject
 import com.facebook.flipper.core.FlipperPlugin
-import com.facebook.flipper.plugins.uidebugger.commands.CommandRegister
-import com.facebook.flipper.plugins.uidebugger.commands.GetRoot
 import com.facebook.flipper.plugins.uidebugger.core.ApplicationRef
 import com.facebook.flipper.plugins.uidebugger.core.Context
 
-class UIDebuggerFlipperPlugin(application: Application) : FlipperPlugin {
+class UIDebuggerFlipperPlugin(val application: Application) : FlipperPlugin {
+
   private val context: Context = Context(ApplicationRef(application))
   private var connection: FlipperConnection? = null
 
   override fun getId(): String {
-    return "UIDebugger"
+    return "ui-debugger"
   }
 
   @Throws(Exception::class)
   override fun onConnect(connection: FlipperConnection) {
     this.connection = connection
-    registerCommands(connection)
+    // temp solution, get from descriptor
+    connection.send(
+        "init",
+        FlipperObject.Builder()
+            .put("rootId", System.identityHashCode(application).toString())
+            .build())
   }
 
   @Throws(Exception::class)
@@ -37,8 +42,4 @@ class UIDebuggerFlipperPlugin(application: Application) : FlipperPlugin {
   override fun runInBackground(): Boolean {
     return true
   }
-
-  fun registerCommands(connection: FlipperConnection) {
-    CommandRegister.register(connection, GetRoot(context))
-  }
 }

android/src/main/java/com/facebook/flipper/plugins/uidebugger/commands/GetRoot.kt

@@ -1,20 +0,0 @@
-/*
- * 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.
- */
-
-package com.facebook.flipper.plugins.uidebugger.commands
-
-import com.facebook.flipper.core.FlipperObject
-import com.facebook.flipper.core.FlipperResponder
-import com.facebook.flipper.plugins.uidebugger.core.Context
-
-class GetRoot(context: Context) : Command(context) {
-  override fun identifier(): String {
-    return "getRoot"
-  }
-
-  override fun execute(params: FlipperObject, response: FlipperResponder) {}
-}

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -0,0 +1,19 @@
+/**
+ * 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 React from 'react';
+import {plugin} from '../index';
+import {usePlugin, useValue} from 'flipper-plugin';
+
+export function Component() {
+  const instance = usePlugin(plugin);
+  const rootId = useValue(instance.rootId);
+
+  return <div>{rootId}</div>;
+}

desktop/plugins/public/ui-debugger/docs/overview.mdx

@@ -0,0 +1 @@
+This is an experimental plugin in development. Everything will change and comes with no warranty / support guarantees

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

@@ -0,0 +1,22 @@
+/**
+ * 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} from 'flipper-plugin';
+
+type Events = {
+  init: {rootId: string};
+};
+
+export function plugin(client: PluginClient<Events>) {
+  const rootId = createState<string | undefined>(undefined);
+  client.onMessage('init', (root) => rootId.set(root.rootId));
+  return {rootId};
+}
+
+export {Component} from './components/main';

desktop/plugins/public/ui-debugger/package.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
+  "name": "flipper-plugin-ui-debugger",
+  "id": "ui-debugger",
+  "pluginType": "client",
+  "version": "0.0.0",
+  "flipperBundlerEntry": "index.tsx",
+  "main": "dist/bundle.js",
+  "license": "MIT",
+  "title": "UI Debugger (alpha)",
+  "icon": "nav-magnifying-glass",
+  "keywords": [
+    "flipper-plugin"
+  ],
+  "bugs": {
+    "url": "https://github.com/facebook/flipper/issues"
+  },
+  "peerDependencies": {
+    "flipper-plugin": "*",
+    "antd": "*",
+    "react": "*",
+    "react-dom": "*",
+    "@emotion/styled": "*",
+    "@ant-design/icons": "*",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "@types/node": "*"
+  }
+}

desktop/static/icons.json

@@ -642,5 +642,8 @@
   ],
   "app-instagram": [
     16
+  ],
+  "nav-magnifying-glass": [
+    16
   ]
 }