Merge pull request #298 from Gongreg/apollo

Adding apollo dev tools.

Author: jhen0409

.eslintrc

@@ -24,7 +24,9 @@
           "__PLATFORM__",
           "__REPORT_REACT_DEVTOOLS_PORT__",
           "__FETCH_SUPPORT__",
-          "__NETWORK_INSPECT__"
+          "__NETWORK_INSPECT__",
+          "__APOLLO_CLIENT__",
+          "__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__"
         ]
       }
     ],

app/middlewares/debuggerAPI.js

@@ -30,8 +30,23 @@ let host;
 let port;
 let socket;
 
+const APOLLO_BACKEND = 'apollo-devtools-backend';
+const APOLLO_PROXY = 'apollo-devtools-proxy';
+
 const workerOnMessage = message => {
   const { data } = message;
+
+  if (data && data.source === APOLLO_BACKEND) {
+    if (!window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__) {
+      window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__ = true;
+    }
+
+    postMessage({
+      source: APOLLO_BACKEND,
+      payload: data,
+    }, '*');
+  }
+
   if (data && (data.__IS_REDUX_NATIVE_MESSAGE__ || data.__REPORT_REACT_DEVTOOLS_PORT__)) {
     return true;
   }
@@ -43,14 +58,22 @@ const workerOnMessage = message => {
   socket.send(JSON.stringify(data));
 };
 
+const onWindowMessage = e => {
+  const { data } = e;
+  if (data && data.source === APOLLO_PROXY) {
+    const message = typeof data.payload === 'string' ? { event: data.payload } : data.payload;
+    worker.postMessage({ source: APOLLO_PROXY, ...message });
+  }
+};
+
 const createJSRuntime = () => {
   // This worker will run the application javascript code,
   // making sure that it's run in an environment without a global
   // document, to make it consistent with the JSC executor environment.
   // eslint-disable-next-line
   worker = new Worker(`${__webpack_public_path__}RNDebuggerWorker.js`);
   worker.addEventListener('message', workerOnMessage);
-
+  window.addEventListener('message', onWindowMessage);
   actions.setDebuggerWorker(worker, 'connected');
 };
 
@@ -59,6 +82,7 @@ const shutdownJSRuntime = () => {
   scriptExecuted = false;
   if (worker) {
     worker.terminate();
+    window.removeEventListener('messsage', onWindowMessage);
     setDevMenuMethods([]);
   }
   worker = null;

app/worker/apollo.js

@@ -0,0 +1,47 @@
+import Bridge from 'apollo-client-devtools/src/bridge';
+import { initBackend, sendBridgeReady } from 'apollo-client-devtools/src/backend';
+import { version as devToolsVersion } from 'apollo-client-devtools/package.json';
+import { getSafeAsyncStorage } from './asyncStorage';
+
+export function handleApolloClient(modules) {
+  const interval = setInterval(() => {
+    if (!self.__APOLLO_CLIENT__) {
+      return;
+    }
+
+    clearInterval(interval);
+
+    const hook = {
+      ApolloClient: self.__APOLLO_CLIENT__,
+      devToolsVersion,
+    };
+
+    let listener;
+
+    const bridge = new Bridge({
+      listen(fn) {
+        listener = self.addEventListener('message', evt => {
+          if (evt.data.source === 'apollo-devtools-proxy') {
+            return fn(evt.data);
+          }
+        });
+      },
+      send(data) {
+        postMessage({
+          ...data,
+          source: 'apollo-devtools-backend',
+        });
+      },
+    });
+
+    bridge.on('init', () => {
+      sendBridgeReady();
+    });
+
+    bridge.on('shutdown', () => {
+      self.removeEventListener('message', listener);
+    });
+
+    initBackend(bridge, hook, getSafeAsyncStorage(modules.AsyncStorage));
+  }, 1000);
+}

app/worker/asyncStorage.js

@@ -3,6 +3,23 @@ export const getClearAsyncStorageFn = AsyncStorage => {
   return () => AsyncStorage.clear().catch(f => f);
 };
 
+export const getSafeAsyncStorage = AsyncStorage => ({
+  async getItem(key) {
+    try {
+      return AsyncStorage.getItem(key);
+    } catch (e) {
+      return null;
+    }
+  },
+  async setItem(key, value) {
+    try {
+      return AsyncStorage.setItem(key, value);
+    } catch (e) {
+      return null;
+    }
+  },
+});
+
 export const getShowAsyncStorageFn = AsyncStorage => {
   if (!AsyncStorage.getAllKeys || !AsyncStorage.getItem) return;
   return async () => {

app/worker/index.js

@@ -17,6 +17,7 @@ import devToolsEnhancer, { composeWithDevTools } from './reduxAPI';
 import * as RemoteDev from './remotedev';
 import { getRequiredModules, ignoreRNDIntervalSpy } from './utils';
 import { toggleNetworkInspect } from './networkInspect';
+import { handleApolloClient } from './apollo';
 
 /* eslint-disable no-underscore-dangle */
 self.__REMOTEDEV__ = RemoteDev;
@@ -51,6 +52,8 @@ const setupRNDebugger = async message => {
     checkAvailableDevMenuMethods(modules, message.networkInspect);
     reportDefaultReactDevToolsPort(modules);
   }
+
+  handleApolloClient(modules);
 };
 
 const messageHandlers = {
@@ -66,6 +69,7 @@ const messageHandlers = {
     } catch (err) {
       error = err.message;
     }
+
     sendReply(null /* result */, error);
 
     if (!error) {

dist/package.json

@@ -12,6 +12,7 @@
   "license": "MIT",
   "dependencies": {
     "adbkit": "^2.11.0",
+    "apollo-client-devtools": "2.1.7-alpha.2",
     "electron-store": "^1.2.0",
     "react-devtools-core": "^3.4.3"
   },