Enable data flow from overreact to devtools

2021-10-12 16:40:04 -07:00 · 2021-10-12 16:40:04 -07:00 · 3a3691aebd
--- a/packages/demo/src/network-requestor.js
+++ b/packages/demo/src/network-requestor.js
@ -21,20 +21,6 @@ function tripPinNetworkRequestor(uri, requestVerb, headers, body) {
 }

 export function networkRequestor(uri, requestVerb, headers, body) {
-  if (window.__OVERREACT_DEVTOOLS__) {
-    const { postMessage } = window.__OVERREACT_DEVTOOLS__;
-
-    postMessage({
-      type: 'network-request',
-      message: {
-        uri,
-        requestVerb,
-        headers,
-        body,
-      },
-    });
-  }
-
  if (uri.startsWith('/People')) {
    return tripPinNetworkRequestor(uri, requestVerb, headers, body);
  }
--- a/packages/dev-tools/package.json
+++ b/packages/dev-tools/package.json
@ -3,8 +3,10 @@
  "version": "0.1.0-alpha.25",
  "private": true,
  "dependencies": {
+    "@reduxjs/toolkit": "^1.6.2",
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
+    "react-redux": "^7.2.5",
    "web-vitals": "^1.0.1"
  },
  "devDependencies": {
--- a/packages/dev-tools/src/agent/index.js
+++ b/packages/dev-tools/src/agent/index.js
@ -1,19 +1,4 @@
 function initializeAgent() {
-  console.log('initializing agent');
-
-  Object.defineProperty(
-    window,
-    '__OVERREACT_DEVTOOLS__',
-    ({
-      configurable: true,
-      enumerable: false,
-      get() {
-        return {
-          test: () => { console.log('test'); },
-        };
-      },
-    }),
-  );
 }

 initializeAgent();
--- a/packages/dev-tools/src/extension/background.js
+++ b/packages/dev-tools/src/extension/background.js
@ -17,8 +17,6 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 chrome.runtime.onConnect.addListener(port => {
  // assign the listener function to a variable so we can remove it later
  const devToolsListener = (message, sender, sendResponse) => {
-    console.log('message received', message);
-
    if (message.name === 'init') {
      connections[message.tabId] = port;
      return;
--- a/packages/dev-tools/src/extension/content_script.js
+++ b/packages/dev-tools/src/extension/content_script.js
@ -15,7 +15,22 @@ function initializeAgent(target) {
      enumerable: false,
      get() {
        return {
-          test: () => { console.log('test'); },
+          test: () => {
+            window.postMessage({
+              test: 'test',
+              source: 'overreact-devtools-agent',
+            }, '*');
+          },
+          onRequest: ({
+            url, verb, headers, payload,
+          }) => {
+            window.postMessage({
+              request: {
+                url, verb, headers, payload,
+              },
+              source: 'overreact-devtools-agent',
+            }, '*');
+          },
        };
      },
    }),
--- a/packages/dev-tools/src/extension/manifest.json
+++ b/packages/dev-tools/src/extension/manifest.json
@ -8,6 +8,11 @@
    "persistent": false
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "web_accessible_resources": [
+    "devtools.html",
+    "panel.html",
+    "dist/agent.js"
+  ],
  "permissions": [
    "file:///*",
    "http://*/*",
--- a/packages/dev-tools/src/ui/devtools-ui.js
+++ b/packages/dev-tools/src/ui/devtools-ui.js
@ -1,11 +1,28 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { add as addRequest } from './slices/requests';
+import port from './port';

 export function DevToolsUI(props) {
-  console.log('whoa');
+  const dispatch = useDispatch();
+  const requests = useSelector(state => state.request.requests);
+
+  const handleMessageFromAgent = useCallback(msg => {
+    dispatch(addRequest({ request: msg }));
+  }, [dispatch]);
+
+  useEffect(() => {
+    port.onMessage.addListener(msg => handleMessageFromAgent(msg));
+  }, [handleMessageFromAgent]);

  return (
    <div>
      <h1>DevTools for overreact</h1>
+      <ul>
+        { requests && requests.map(request => (
+          <li>{JSON.stringify(request, null, 2)}</li>
+        ))}
+      </ul>
    </div>
  );
 }
--- a/packages/dev-tools/src/ui/index.js
+++ b/packages/dev-tools/src/ui/index.js
@ -1,5 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import store from './store';
+
 import { DevToolsUI } from './devtools-ui';

 const { injectDebugger } = require('./inject-debugger');
@ -7,5 +11,10 @@ const { injectDebugger } = require('./inject-debugger');
 injectDebugger();

 window.addEventListener('load', () => {
-  ReactDOM.render(<DevToolsUI />, document.getElementById('devtools-container'));
+  ReactDOM.render(
+    <Provider store={store}>
+      <DevToolsUI />
+    </Provider>,
+    document.getElementById('devtools-container'),
+  );
 });
--- a/packages/dev-tools/src/ui/inject-debugger.js
+++ b/packages/dev-tools/src/ui/inject-debugger.js
@ -14,12 +14,11 @@ function injectDebugger() {
  chrome.devtools.inspectedWindow.eval(injectedGlobal, result => {
    if (!result) {
      const agentUrl = chrome.runtime.getURL('dist/agent.js');
-      console.log(agentUrl);

      let agentCode;

      const request = new XMLHttpRequest();
-      request.addEventListener('load', function () {
+      request.addEventListener('load', () => {
        agentCode = this.responseText;
      });

--- a/packages/dev-tools/src/ui/slices/requests.js
+++ b/packages/dev-tools/src/ui/slices/requests.js
@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const requestSlice = createSlice({
+  name: 'request',
+  initialState: {
+    requests: [],
+  },
+  reducers: {
+    add: (state, action) => {
+      const { payload: { request } } = action;
+      state = {
+        ...state,
+        requests: state.requests.push(request),
+      };
+    },
+  },
+});
+
+export default requestSlice.reducer;
+export const { add } = requestSlice.actions;
--- a/packages/dev-tools/src/ui/store.js
+++ b/packages/dev-tools/src/ui/store.js
@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import requestReducer from './slices/requests';
+
+export default configureStore({
+  reducer: {
+    request: requestReducer,
+  },
+});
--- a/packages/dev-tools/webpack.config.js
+++ b/packages/dev-tools/webpack.config.js
@ -6,7 +6,7 @@ module.exports = {
    agent: './src/agent/index.js',
  },

-  devtool: 'source-map',
+  devtool: 'eval-source-map',

  output: {
    path: path.resolve(__dirname, 'src/extension/dist/'),
--- a/packages/overreact/src/environment/environment.js
+++ b/packages/overreact/src/environment/environment.js
@ -34,15 +34,29 @@ export class Environment {
  }

  getRequestor(id, spec, variables, middlewareStates) {
+    const requestorWithDevTools = (uri, verb, header, payload) => {
+      if (window.__OVERREACT_DEVTOOLS__) {
+        const { onRequest } = window.__OVERREACT_DEVTOOLS__;
+        onRequest({
+          url: uri,
+          verb,
+          headers: header,
+          body: payload,
+        });
+      }
+
+      return this.networkRequestor(uri, verb, header, payload);
+    };
+
    return (uri, verb, header, payload) => ({
      execute: sink => {
        if (!this.middlewares || this.middlewares.length === 0) {
-          this.networkRequestor(uri, verb, header, payload)
+          requestorWithDevTools(uri, verb, header, payload)
            .then(value => sink.onComplete(value))
            .catch(err => sink.onError(err));
        } else {
          const wrappedRequestor = new WrappedRequestor({
-            requestor: this.networkRequestor,
+            requestor: requestorWithDevTools,
            uri,
            verb,
            header,
--- a/yarn.lock
+++ b/yarn.lock
@ -3003,6 +3003,16 @@
  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.20.tgz#111b5db0f501aa89b05076fa31f0ea0e0c292cd3"
  integrity sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q==

+"@reduxjs/toolkit@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.6.2.tgz#2f2b5365df77dd6697da28fdf44f33501ed9ba37"
+  integrity sha512-HbfI/hOVrAcMGAYsMWxw3UJyIoAS9JTdwddsjlr5w3S50tXhWb+EMyhIw+IAvCVCLETkzdjgH91RjDSYZekVBA==
+  dependencies:
+    immer "^9.0.6"
+    redux "^4.1.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
 "@rollup/plugin-node-resolve@^7.1.1":
  version "7.1.3"
  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@ -3348,6 +3358,14 @@
  dependencies:
    "@types/unist" "*"

+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^5.0.0":
  version "5.1.2"
  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57"
@ -3437,11 +3455,35 @@
  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.1.tgz#e1303048d5389563e130f5bdd89d37a99acb75eb"
  integrity sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==

+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
 "@types/q@^1.5.1":
  version "1.5.5"
  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
  integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==

+"@types/react-redux@^7.1.16":
+  version "7.1.19"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.19.tgz#477bd0a9b01bae6d6bf809418cdfa7d3c16d4c62"
+  integrity sha512-L37dSCT0aoJnCgpR8Iuginlbxoh7qhWOXiaDqEsxVMrER1CmVhFD+63NxgJeT4pkmEM28oX0NH4S4f+sXHTZjA==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
+"@types/react@*":
+  version "17.0.29"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.29.tgz#9535f3fc01a4981ce9cadcf0daa2593c0c2f2251"
+  integrity sha512-HSenIfBEBZ70BLrrVhtEtHpqaP79waauPtA8XKlczTxL3hXrW/ElGNLTpD1TmqkykgGlOAK55+D3SmUHEirpFw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@ -3456,6 +3498,11 @@
  dependencies:
    "@types/node" "*"

+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/source-list-map@*":
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@ -6629,6 +6676,11 @@ cssstyle@^2.3.0:
  dependencies:
    cssom "~0.3.6"

+csstype@^3.0.2:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
+  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
+
 cyclist@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@ -8927,7 +8979,7 @@ hmac-drbg@^1.0.1:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@ -9246,6 +9298,11 @@ immer@8.0.1:
  resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
  integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==

+immer@^9.0.6:
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.6.tgz#7a96bf2674d06c8143e327cbf73539388ddf1a73"
+  integrity sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ==
+
 import-cwd@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@ -14145,7 +14202,7 @@ react-helmet@^6.1.0:
    react-fast-compare "^3.1.1"
    react-side-effect "^2.1.0"

-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -14198,6 +14255,18 @@ react-loadable@^5.5.0:
  dependencies:
    prop-types "^15.5.0"

+react-redux@^7.2.5:
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.5.tgz#213c1b05aa1187d9c940ddfc0b29450957f6a3b8"
+  integrity sha512-Dt29bNyBsbQaysp6s/dN0gUodcq+dVKKER8Qv82UrpeygwYeX1raTtil7O/fftw/rFqzaf6gJhDZRkkZnn6bjg==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/react-redux" "^7.1.16"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-refresh@^0.8.3:
  version "0.8.3"
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@ -14509,6 +14578,18 @@ redent@^3.0.0:
    indent-string "^4.0.0"
    strip-indent "^3.0.0"

+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
+redux@^4.0.0, redux@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.1.tgz#76f1c439bb42043f985fbd9bf21990e60bd67f47"
+  integrity sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^9.0.0:
  version "9.0.0"
  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
@ -14766,6 +14847,11 @@ requires-port@^1.0.0:
  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resolve-cwd@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"