Update docs for JS only plugins

Summary: Added docs on how to write React-Native JavaScript based plugins

Reviewed By: passy

Differential Revision: D19344803

fbshipit-source-id: ad1ea66f1031760729fdaea8a7e6c1ef5dcd5439

docs/extending/create-plugin.md

@@ -4,7 +4,8 @@ title: Client Plugin API
 ---
 
 ## FlipperPlugin
-To build a client plugin, just implement the `FlipperPlugin` interface.
+
+To build a client plugin, implement the `FlipperPlugin` interface.
 
 The ID that is returned from your implementation needs to match the `name` defined in your JavaScript counterpart's `package.json`.
 
@@ -60,6 +61,32 @@ public:
   bool runInBackground() override;
 };
 ```
+<!--React Native JS-->
+
+<div class="warning">
+
+Please note that using Flipper from JavaScript in React Native requires the package [`react-native-flipper`](https://www.npmjs.com/package/react-native-flipper) to be installed in the hosting application.
+
+</div>
+
+```javascript
+import {addPlugin} from 'react-native-flipper';
+
+addPlugin({
+  getId() {
+    return 'MyFlipperPlugin';
+  },
+  onConnect(connection) {
+    console.log("connected");
+  },
+  onDisconnect() {
+    console.log("disconnected");
+  },
+  runInBackground() {
+    return false;
+  }
+})
+```
 <!--END_DOCUSAURUS_CODE_TABS-->
 
 
@@ -112,6 +139,25 @@ void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
   });
 }
 ```
+<!--React Native JS-->
+```javascript
+addPlugin({
+  getId() {
+    return 'MyFlipperPlugin';
+  },
+  onConnect(connection) {
+    console.log("connected");
+    connection.receive("getData", (data, responder) => {
+      console.log("incoming data", data);
+      // respond with some data
+      responder.success({
+        ack: true
+      });
+    });
+  },
+  // ...as-is
+})
+```
 <!--END_DOCUSAURUS_CODE_TABS-->
 
 ## Push data to the desktop
@@ -137,12 +183,33 @@ void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
   conn->send("getData", message);
 }
 ```
+<!--React Native JS-->
+```javascript
+addPlugin({
+  getId() {
+    return 'MyFlipperPlugin';
+  },
+  onConnect(connection) {
+    console.log("connected");
+    connection.send("newRow", { message: "Hello" });
+  },
+  // ...as-is
+})
+```
 <!--END_DOCUSAURUS_CODE_TABS-->
 
 ## Background Plugins
 
-In some cases you may want to provide data to flipper even when your plugin is not currently active. Returning true in `runInBackground()` will result in `onConnect` being called as soon as Flipper connects, and allow you to use the connection at any time.
+In some cases you may want to provide data to Flipper even when your plugin is not currently active. Returning true in `runInBackground()` will result in `onConnect` being called as soon as Flipper connects, and allow you to use the connection at any time.
 
 This should be used in combination with a `persistedStateReducer` on the desktop side. See the [JS Plugin API](js-plugin-api#background-plugins) for details.
 
 The benefit is that the desktop plugin can process this data in the background and fire notifications. It also reduces the number of renders and time taken to display the data when the plugin becomes active.
+
+<div class="warning">
+
+Please note that a background plugin could keep some data in memory until a Flipper connection is available, for example to keep statistics about the app startup process.
+However, a plugin shouldn't assume it will eventually get a connection, since this depends on whether the user has enabled the plugin on the Desktop side.
+So make sure to not store unbounded amounts of data!
+
+</div>

docs/extending/js-plugin-api.md

@@ -3,6 +3,12 @@ id: js-plugin-api
 title: JavaScript Plugin API
 ---
 
+<div class="warning">
+
+This page describes the JavaScript API that is used to implement plugins inside the Flipper Desktop application. For the JavaScript API that can be used inside React Native to communicate with the Flipper Desktop, see [Client Plugin API](create-plugin).
+
+</div>
+
 Provided a plugin is setup as defined in [JS Plugin Definiton](js-setup), the basic requirement of a Flipper plugin is that `index.tsx` exports a default class that extends `FlipperPlugin`.
 
 `FlipperPlugin` is an extension of `React.Component` with extra Flipper-related functionality. This means to define the UI of your plugin, you just need to implement this React component.