Setup sdk for background plugin

Summary:
This diff sets up flipper for running plugins in background. This diff does the following

- Adds a function named `runInBackground` to the interface `FlipperPlugin` to make the plugins opt in to be run in background, default is false
- Changes the javascript side of the flipper to store the messages received by the plugins in background
- Process the stored messages when the plugin in background becomes active
- Currently I have just turned on network plugin to be in background mode.

- Remove the buffering from the network plugin, as it will run in background
- Write a batching layer to batch the messages and send to flipper.

Note: I haven't tested the wilde app yet, but the sample app works. I will remove the "[WIP]" from the title once I have tested it in wilde

Reviewed By: danielbuechele

Differential Revision: D10301403

fbshipit-source-id: 034eebf659a545d6b480a4ac1b73b0aa4b2f9797

src/Client.js

@@ -43,6 +43,7 @@ export default class Client extends EventEmitter {
     this.messageIdCounter = 0;
     this.logger = logger;
 
+    this.bufferedMessages = new Map();
     this.broadcastCallbacks = new Map();
     this.requestCallbacks = new Map();
 
@@ -77,6 +78,7 @@ export default class Client extends EventEmitter {
   connection: ReactiveSocket;
   responder: PartialResponder;
 
+  bufferedMessages: Map<string, Array<Object>>;
   broadcastCallbacks: Map<?string, Map<string, Set<Function>>>;
 
   requestCallbacks: Map<
@@ -163,7 +165,11 @@ export default class Client extends EventEmitter {
         }
 
         const methodCallbacks: ?Set<Function> = apiCallbacks.get(params.method);
-        if (methodCallbacks) {
+        if (this.selectedPlugin != params.api) {
+          this.bufferMessage(params);
+          return;
+        }
+        if (methodCallbacks && methodCallbacks.size > 0) {
           for (const callback of methodCallbacks) {
             callback(params.params);
           }
@@ -188,6 +194,39 @@ export default class Client extends EventEmitter {
     }
   }
 
+  readBufferedMessages(id: string) {
+    const paramsArray = this.bufferedMessages.get(id);
+    if (!paramsArray) {
+      return;
+    }
+    paramsArray.forEach((params, i) =>
+      setTimeout(() => {
+        const apiCallbacks = this.broadcastCallbacks.get(params.api);
+        if (!apiCallbacks) {
+          return;
+        }
+
+        const methodCallbacks: ?Set<Function> = apiCallbacks.get(params.method);
+        if (methodCallbacks) {
+          for (const callback of methodCallbacks) {
+            callback(params.params);
+          }
+        }
+      }, i * 20),
+    );
+    this.bufferedMessages.delete(id);
+  }
+
+  bufferMessage(msg: Object) {
+    const arr = this.bufferedMessages.get(msg.api);
+    if (arr) {
+      arr.push(msg);
+      this.bufferedMessages.set(msg.api, arr);
+    } else {
+      this.bufferedMessages.set(msg.api, [msg]);
+    }
+  }
+
   toJSON() {
     return `<Client#${this.id}>`;
   }

src/PluginContainer.js

@@ -119,6 +119,9 @@ class PluginContainer extends Component<Props, State> {
     if (ref && target) {
       activateMenuItems(ref);
       ref._init();
+      if (target instanceof Client) {
+        target.readBufferedMessages(ref.constructor.id);
+      }
       this.props.logger.trackTimeSince(`activePlugin-${ref.constructor.id}`);
       this.plugin = ref;
     }
@@ -136,7 +139,13 @@ class PluginContainer extends Component<Props, State> {
       key: pluginKey,
       logger: this.props.logger,
       persistedState: pluginStates[pluginKey] || {},
-      setPersistedState: state => setPluginState({pluginKey, state}),
+      setPersistedState: state => {
+        // We are using setTimout here to wait for previous state updated to
+        // finish before triggering a new state update. Otherwise this can
+        // cause race conditions, with multiple state updates happening at the
+        // same time.
+        setTimeout(() => setPluginState({pluginKey, state}), 0);
+      },
       target,
       deepLinkPayload: this.props.deepLinkPayload,
       ref: this.refChanged,

src/dispatcher/server.js

@@ -13,6 +13,12 @@ import type Client from '../Client.js';
 
 export default (store: Store, logger: Logger) => {
   const server = new Server(logger);
+  store.subscribe(() => {
+    let currentState = store.getState();
+    currentState.connections.clients.forEach((client: Client) => {
+      client.selectedPlugin = currentState.connections.selectedPlugin;
+    });
+  });
   server.addListener('new-client', (client: Client) => {
     store.dispatch({
       type: 'NEW_CLIENT',