[Experiment] Add xstate-devtools

.eslintrc

@@ -27,12 +27,16 @@
           "__FETCH_SUPPORT__",
           "__NETWORK_INSPECT__",
           "__APOLLO_CLIENT__",
-          "__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__"
+          "__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__",
+          "__IS_XSTATE_DEVTOOLS_MESSAGE__"
         ]
       }
     ],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "import/prefer-default-export": 0,
-    "import/no-extraneous-dependencies": ["error", { "optionalDependencies": true }]
+    "import/no-extraneous-dependencies": [
+      "error",
+      { "optionalDependencies": true }
+    ]
   }
 }

app/middlewares/debuggerAPI.js

@@ -15,7 +15,10 @@ import { checkPortStatus } from 'portscanner';
 import * as debuggerActions from '../actions/debugger';
 import { setDevMenuMethods, networkInspect } from '../utils/devMenu';
 import { tryADBReverse } from '../utils/adb';
-import { clearNetworkLogs, selectRNDebuggerWorkerContext } from '../utils/devtools';
+import {
+  clearNetworkLogs,
+  selectRNDebuggerWorkerContext,
+} from '../utils/devtools';
 import config from '../utils/config';
 import deltaUrlToBlobUrl from './delta/deltaUrlToBlobUrl';
 import checkDeltaAvailable from './delta/checkDeltaAvailable';
@@ -37,6 +40,11 @@ const APOLLO_PROXY = 'apollo-devtools-proxy';
 const workerOnMessage = message => {
   const { data } = message;
 
+  if (data && data.__IS_XSTATE_DEVTOOLS_MESSAGE__) {
+    postMessage(data.content, '*');
+    return false;
+  }
+
   if (data && data.source === APOLLO_BACKEND) {
     if (!window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__) {
       window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__ = true;
@@ -47,12 +55,15 @@ const workerOnMessage = message => {
         source: APOLLO_BACKEND,
         payload: data,
       },
-      '*'
+      '*',
     );
     return false;
   }
 
-  if (data && (data.__IS_REDUX_NATIVE_MESSAGE__ || data.__REPORT_REACT_DEVTOOLS_PORT__)) {
+  if (
+    data &&
+    (data.__IS_REDUX_NATIVE_MESSAGE__ || data.__REPORT_REACT_DEVTOOLS_PORT__)
+  ) {
     return true;
   }
   const list = data && data.__AVAILABLE_METHODS_CAN_CALL_BY_RNDEBUGGER__;
@@ -66,7 +77,8 @@ const workerOnMessage = message => {
 const onWindowMessage = e => {
   const { data } = e;
   if (data && data.source === APOLLO_PROXY) {
-    const message = typeof data.payload === 'string' ? { event: data.payload } : data.payload;
+    const message =
+      typeof data.payload === 'string' ? { event: data.payload } : data.payload;
     worker.postMessage({
       method: 'emitApolloMessage',
       source: APOLLO_PROXY,
@@ -99,7 +111,8 @@ const shutdownJSRuntime = () => {
 };
 
 const isScriptBuildForAndroid = url =>
-  url && (url.indexOf('.android.bundle') > -1 || url.indexOf('platform=android') > -1);
+  url &&
+  (url.indexOf('.android.bundle') > -1 || url.indexOf('platform=android') > -1);
 
 let preconnectTimeout;
 const preconnect = async (fn, firstTimeout) => {
@@ -139,14 +152,16 @@ const checkJSLoadCount = () => {
       '[RNDebugger]',
       `Refreshed the devtools panel as React Native app was reloaded ${loadCount} times.`,
       'If you want to update or disable this,',
-      'Open `Debugger` -> `Open Config File` to change `timesJSLoadToRefreshDevTools` field.'
+      'Open `Debugger` -> `Open Config File` to change `timesJSLoadToRefreshDevTools` field.',
     );
     loadCount = 0;
   }
 };
 
 const connectToDebuggerProxy = async () => {
-  const ws = new WebSocket(`ws://${host}:${port}/debugger-proxy?role=debugger&name=Chrome`);
+  const ws = new WebSocket(
+    `ws://${host}:${port}/debugger-proxy?role=debugger&name=Chrome`,
+  );
 
   const { setDebuggerStatus } = actions;
   ws.onopen = () => setDebuggerStatus('waiting');
@@ -182,7 +197,7 @@ const connectToDebuggerProxy = async () => {
         try {
           if (await checkDeltaAvailable(host, port)) {
             const { url, moduleSize } = await deltaUrlToBlobUrl(
-              object.url.replace('.bundle', '.delta')
+              object.url.replace('.bundle', '.delta'),
             );
             object.moduleSize = moduleSize;
             clearLogs();

app/worker/remotedev.js

@@ -1,6 +1,7 @@
 // Edit from https://github.com/zalmoxisus/remotedev/blob/master/src/devTools.js
 
 import { stringify, parse } from 'jsan';
+import uuid from 'uuid';
 import { generateId, getActionsArray } from 'redux-devtools-core/lib/utils';
 
 let listenerAdded;
@@ -63,7 +64,10 @@ export function send(action, state, type, options) {
   setTimeout(() => {
     const message = {
       payload: state ? stringify(state) : '',
-      action: type === 'ACTION' ? stringify(transformAction(action, options)) : action,
+      action:
+        type === 'ACTION'
+          ? stringify(transformAction(action, options))
+          : action,
       type: type || 'ACTION',
       id: options.instanceId,
       instanceId: options.instanceId,
@@ -79,15 +83,62 @@ export function send(action, state, type, options) {
   }, 0);
 }
 
-export function connect(options = {}) {
+export function connect(options = {}, machine) {
   const id = generateId(options.instanceId);
   const opts = {
     ...options,
     instanceId: id,
     name: options.name || id,
-    actionCreators: JSON.stringify(getActionsArray(options.actionCreators || {})),
+    actionCreators: JSON.stringify(
+      getActionsArray(options.actionCreators || {}),
+    ),
   };
   start();
+  if (options.useXStateViz && machine) {
+    const serviceId = uuid();
+    postMessage({
+      __IS_XSTATE_DEVTOOLS_MESSAGE__: true,
+      content: {
+        type: 'connect',
+        payload: {
+          serviceId,
+          machine: JSON.stringify(machine.config),
+          state: JSON.stringify(machine.initialState),
+        },
+      },
+    });
+    return {
+      send: (event, state) => {
+        const formattedEvent = {
+          event,
+          time: Date.now(),
+        };
+        postMessage({
+          __IS_XSTATE_DEVTOOLS_MESSAGE__: true,
+          content: {
+            type: 'update',
+            payload: {
+              serviceId,
+              state: JSON.stringify(state),
+              event: JSON.stringify(formattedEvent),
+            },
+          },
+        });
+      },
+      disconnect: () => {
+        postMessage({
+          __IS_XSTATE_DEVTOOLS_MESSAGE__: true,
+          content: {
+            type: 'disconnect',
+            payload: {
+              serviceId,
+            },
+          },
+        });
+      },
+      init: () => {},
+    };
+  }
   return {
     init(state, action) {
       send(action || {}, state, 'INIT', opts);

dist/package.json

@@ -14,6 +14,7 @@
     "adbkit": "^2.11.0",
     "apollo-client-devtools": "^2.2.5",
     "electron-store": "^1.2.0",
+    "electron-devtools-installer": "^2.2.3",
     "react-devtools-core": "^3.6.2"
   }
 }

dist/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"[email protected]":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/7zip/-/7zip-0.0.6.tgz#9cafb171af82329490353b4816f03347aa150a30"
+  integrity sha1-nK+xca+CMpSQNTtIFvAzR6oVCjA=
+
 "@types/node@>=6":
   version "12.0.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.4.tgz#46832183115c904410c275e34cf9403992999c32"
@@ -249,6 +254,11 @@ [email protected]:
     node-fetch "2.1.2"
     whatwg-fetch "2.0.4"
 
+[email protected]:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/cross-unzip/-/cross-unzip-0.0.2.tgz#5183bc47a09559befcf98cc4657964999359372f"
+  integrity sha1-UYO8R6CVWb78+YzEZXlkmZNZNy8=
+
 debug@~2.6.3:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
@@ -268,6 +278,16 @@ dot-prop@^4.1.0:
   dependencies:
     is-obj "^1.0.0"
 
+electron-devtools-installer@^2.2.3:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-2.2.4.tgz#261a50337e37121d338b966f07922eb4939a8763"
+  integrity sha512-b5kcM3hmUqn64+RUcHjjr8ZMpHS2WJ5YO0pnG9+P/RTdx46of/JrEjuciHWux6pE+On6ynWhHJF53j/EDJN0PA==
+  dependencies:
+    "7zip" "0.0.6"
+    cross-unzip "0.0.2"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+
 electron-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/electron-store/-/electron-store-1.2.0.tgz#96f708f0188c7708907e9f9b7cba790bed6b989f"
@@ -302,6 +322,23 @@ find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+glob@^7.1.3:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 graceful-fs@^4.1.11:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -441,6 +478,19 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
 is-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
@@ -576,6 +626,13 @@ object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
 optimism@^0.9.0:
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.9.5.tgz#b8b5dc9150e97b79ddbf2d2c6c0e44de4d255527"
@@ -600,6 +657,11 @@ path-exists@^3.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
   integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
 
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
 pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -679,6 +741,13 @@ react@^16.8.2:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+rimraf@^2.5.2:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 safe-buffer@~5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -692,6 +761,11 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+semver@^5.3.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
 shell-quote@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
@@ -761,6 +835,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
   integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
 
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
 write-file-atomic@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"