diff --git a/.eslintrc b/.eslintrc index 10692b1c..41f476f3 100644 --- a/.eslintrc +++ b/.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 } + ] } } diff --git a/app/middlewares/debuggerAPI.js b/app/middlewares/debuggerAPI.js index b3dcc44b..778e1db6 100644 --- a/app/middlewares/debuggerAPI.js +++ b/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(); diff --git a/app/worker/remotedev.js b/app/worker/remotedev.js index bd473f9f..2b270c3c 100644 --- a/app/worker/remotedev.js +++ b/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); diff --git a/dist/package.json b/dist/package.json index ae37be71..f607aba4 100644 --- a/dist/package.json +++ b/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" } } diff --git a/dist/yarn.lock b/dist/yarn.lock index 5227a2c4..6365045f 100644 --- a/dist/yarn.lock +++ b/dist/yarn.lock @@ -2,6 +2,11 @@ # yarn lockfile v1 +"7zip@0.0.6": + 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 @@ cross-fetch@2.2.2: node-fetch "2.1.2" whatwg-fetch "2.0.4" +cross-unzip@0.0.2: + 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 @@ whatwg-fetch@2.0.4: 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" diff --git a/electron/extensions.js b/electron/extensions.js index 1017398d..6e81eeeb 100644 --- a/electron/extensions.js +++ b/electron/extensions.js @@ -1,25 +1,38 @@ import path from 'path'; import { BrowserWindow } from 'electron'; +import installer, { + REACT_DEVELOPER_TOOLS, + REDUX_DEVTOOLS, +} from 'electron-devtools-installer'; + +const extensions = ['aamnodipnlopbknpklfoabalmobheehc']; export default async () => { if (process.env.NODE_ENV === 'development') { - const installer = require('electron-devtools-installer'); // eslint-disable-line - - const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS']; - const forceDownload = !!process.env.UPGRADE_EXTENSIONS; - for (const name of extensions) { - try { - await installer.default(installer[name], forceDownload); - } catch (e) {} // eslint-disable-line - } BrowserWindow.addDevToolsExtension(path.resolve('dist/devtools-helper/')); BrowserWindow.addDevToolsExtension( - path.join(__dirname, '../node_modules/apollo-client-devtools/shells/webextension/') + path.join( + __dirname, + '../node_modules/apollo-client-devtools/shells/webextension/', + ), ); + extensions.push(REACT_DEVELOPER_TOOLS); + extensions.push(REDUX_DEVTOOLS); } else { - BrowserWindow.addDevToolsExtension(path.join(__dirname, 'devtools-helper/')); BrowserWindow.addDevToolsExtension( - path.join(__dirname, 'node_modules/apollo-client-devtools/shells/webextension/') + path.join(__dirname, 'devtools-helper/'), ); + BrowserWindow.addDevToolsExtension( + path.join( + __dirname, + 'node_modules/apollo-client-devtools/shells/webextension/', + ), + ); + } + const forceDownload = !!process.env.UPGRADE_EXTENSIONS; + for (const ext of extensions) { + try { + await installer(ext, forceDownload); + } catch (e) {} // eslint-disable-line } }; diff --git a/package.json b/package.json index 22dc3cd9..a619aad7 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,8 @@ "redux-persist": "^4.10.2", "remotedev-app": "^0.10.8", "remotedev-monitor-components": "^0.0.5", - "remotedev-slider": "^1.1.3" + "remotedev-slider": "^1.1.3", + "uuid": "^3.3.3" }, "optionalDependencies": { "electron-installer-debian": "^2.0.1", diff --git a/webpack/base.babel.js b/webpack/base.babel.js index 5cc9e8bb..5a51bd8b 100644 --- a/webpack/base.babel.js +++ b/webpack/base.babel.js @@ -3,7 +3,9 @@ import path from 'path'; import LodashModuleReplacementPlugin from 'lodash-webpack-plugin'; import electronPkg from 'electron/package.json'; -const babelConfig = JSON.parse(fs.readFileSync(path.join(__dirname, '../.babelrc'), 'utf-8')); +const babelConfig = JSON.parse( + fs.readFileSync(path.join(__dirname, '../.babelrc'), 'utf-8'), +); // Webpack 2 have native import / export support babelConfig.presets = [ [ @@ -28,7 +30,10 @@ export default { extensions: ['.mjs', '.js'], alias: { // From remotedev-app, but currently we don't need this - 'socketcluster-client': path.resolve(__dirname, 'mock-socketcluster-client'), + 'socketcluster-client': path.resolve( + __dirname, + 'mock-socketcluster-client', + ), }, }, module: { @@ -57,5 +62,6 @@ export default { 'electron-store', 'adbkit', 'electron-named-image', + 'electron-devtools-installer', ], }; diff --git a/yarn.lock b/yarn.lock index 6a13c7c8..226d2de0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10940,7 +10940,7 @@ uuid@3.2.1: resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14" integrity sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA== -uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2: +uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2, uuid@^3.3.3: version "3.3.3" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866" integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==