refactoring and fixes

Summary: Slightly refactored JS api to make it work with new js app launcher

Reviewed By: jknoxville

Differential Revision: D18761757

fbshipit-source-id: edb8e5907765a9354e4c636be97d3cf6df63ee98

src/utils/js-client/api.js

@@ -14,7 +14,7 @@ export type FlipperMethodID = string;
 export class FlipperBridge {
   registerPlugins: (plugins: Array<FlipperPluginID>) => void;
 
-  start: () => void;
+  start: (appName: string) => void;
 
   stop: () => void;
 
@@ -104,9 +104,9 @@ export class FlipperClient {
     return this.plugins.get(id);
   }
 
-  start() {
+  start(appName: string) {
     this._bridge.registerPlugins([...this.plugins.keys()]);
-    this._bridge.start();
+    this._bridge.start(appName);
   }
 
   stop() {

src/utils/js-client/example.js

@@ -23,7 +23,7 @@ class FlipperManager {
     this.furyPlugin = new FuryPlugin();
     this.flipperClient.addPlugin(this.analyticsPlugin);
     this.flipperClient.addPlugin(this.furyPlugin);
-    this.flipperClient.start();
+    this.flipperClient.start('Example JS App');
   }
 }
 

src/utils/js-client/webviewImpl.js

@@ -19,8 +19,8 @@ class FlipperWebviewBridgeImpl extends FlipperBridge {
       window.FlipperWebviewBridge.registerPlugins(plugins);
   };
 
-  start = () => {
-    window.FlipperWebviewBridge && window.FlipperWebviewBridge.start();
+  start = (appName: string) => {
+    window.FlipperWebviewBridge && window.FlipperWebviewBridge.start(appName);
   };
 
   stop = () => {
@@ -42,22 +42,22 @@ class FlipperWebviewBridgeImpl extends FlipperBridge {
     handler: any => void,
   ) => {
     this._subscriptions.set(plugin + method, handler);
-    window.FlipperWebviewBridge &&
-      window.FlipperWebviewBridge.subscribe(plugin, method);
   };
 
   isAvailable = () => {
     return window.FlipperWebviewBridge != null;
   };
 
-  handleMessage(plugin: FlipperPluginID, method: FlipperMethodID, data: any) {
-    const handler: ?(any) => void = this._subscriptions.get(plugin + method);
-    handler && handler(data);
+  receive(plugin: FlipperPluginID, method: FlipperMethodID, data: string) {
+    const handler = this._subscriptions.get(plugin + method);
+    handler && handler(JSON.parse(data));
   }
 }
 
 export function newWebviewClient(): FlipperClient {
   const bridge = new FlipperWebviewBridgeImpl();
-  window.FlipperBridgeClientSide = bridge;
+  window.flipper = {
+    FlipperWebviewMessageReceiver: bridge,
+  };
   return new FlipperClient(bridge);
 }

static/SupportJSClientPreload.js

@@ -12,60 +12,56 @@
 // ==============
 const {remote, ipcRenderer} = require('electron');
 
-let FlipperMainWindowId = 0;
+const flipperState = {
+  mainWindowId: 0,
+  isClientInit: false,
+  plugins: null,
+  appName: 'JS App',
+};
 
 ipcRenderer.on('parent-window-id', (event, message) => {
-  FlipperMainWindowId = message;
+  flipperState.mainWindowId = message;
 });
 
-let FlipperIsClientInit = false;
-let FlipperMemoizedPlugins;
-
-function initClient(plugins) {
-  if (FlipperIsClientInit) {
+function initClient(plugins, appName) {
+  if (flipperState.isClientInit) {
     return;
   }
   if (plugins) {
-    FlipperMemoizedPlugins = plugins;
+    flipperState.plugins = plugins;
   }
-  if (FlipperMainWindowId != 0) {
-    ipcRenderer.sendTo(FlipperMainWindowId, 'from-js-emulator-init-client', {
-      command: 'initClient',
-      windowId: remote.getCurrentWebContents().id,
-      payload: {
-        plugins: plugins ? plugins : FlipperMemoizedPlugins,
-        appName: 'kite/weblite',
+  if (appName) {
+    flipperState.appName = appName;
+  }
+  if (flipperState.mainWindowId != 0) {
+    ipcRenderer.sendTo(
+      flipperState.mainWindowId,
+      'from-js-emulator-init-client',
+      {
+        command: 'initClient',
+        windowId: remote.getCurrentWebContents().id,
+        payload: {
+          plugins: flipperState.plugins,
+          appName: flipperState.appName,
+        },
       },
-    });
-    FlipperIsClientInit = true;
+    );
+    flipperState.isClientInit = true;
   }
 }
 
 window.FlipperWebviewBridge = {
   registerPlugins: function(plugins) {
-    console.log(plugins);
-    if (FlipperMainWindowId != 0) {
-      ipcRenderer.sendTo(FlipperMainWindowId, 'from-js-emulator', {
-        command: 'registerPlugins',
-        payload: plugins,
-      });
-    }
+    flipperState.plugins = plugins;
   },
-  start: function() {
-    console.log('start');
-
-    if (FlipperMainWindowId != 0) {
-      ipcRenderer.sendTo(FlipperMainWindowId, 'from-js-emulator', {
-        command: 'start',
-        payload: null,
-      });
-    }
+  start: function(appName) {
+    flipperState.appName = appName;
+    initClient();
   },
   sendFlipperObject: function(plugin, method, data) {
-    console.log(plugin, method, data);
     initClient();
-    if (FlipperMainWindowId != 0) {
-      ipcRenderer.sendTo(FlipperMainWindowId, 'from-js-emulator', {
+    if (flipperState.mainWindowId != 0) {
+      ipcRenderer.sendTo(flipperState.mainWindowId, 'from-js-emulator', {
         command: 'sendFlipperObject',
         payload: {
           api: plugin,