Toggle network inspect after define support var on patchFetchPolyfi…

…ll (#220)
jhen0409 · Mar 17, 2018 · e88dafa · e88dafa
1 parent 32c9ab3
commit e88dafa
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 28 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -13,7 +13,7 @@
     "react/prefer-stateless-function": 0,
     "consistent-return": 0,
     "strict": 0,
-    "no-console": 1,
+    "no-console": 0,
     "no-param-reassign": ["error", { "props": false }],
     "no-underscore-dangle": [
       "error",
@@ -22,15 +22,14 @@
           "__IS_REDUX_NATIVE_MESSAGE__",
           "__AVAILABLE_METHODS_CAN_CALL_BY_RNDEBUGGER__",
           "__PLATFORM__",
-          "__REPORT_REACT_DEVTOOLS_PORT__"
+          "__REPORT_REACT_DEVTOOLS_PORT__",
+          "__FETCH_SUPPORT__",
+          "__NETWORK_INSPECT__"
         ]
       }
     ],
     "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/delta/patchFetchPolyfill.js b/app/middlewares/delta/patchFetchPolyfill.js
@@ -5,8 +5,15 @@
  * so we could use it to fix the issue.
  */
 const isFetch = '"node_modules/whatwg-fetch/fetch.js"';
-const flag = /(if \(self.fetch\) {\n\s+return;\n\s+}\n\s+var support )(=)( {)/g;
-const replaceStr = '$1= self._fetchSupport =$3';
+
+const fetchSupportFlag = /(if \(self.fetch\) {\n\s+return;\n\s+}\n\s+var support )(=)( {)/g;
+const fetchSupportReplaceStr = '$1= self.__FETCH_SUPPORT__ =$3';
+
+const toggleFlag = 'if (support.arrayBuffer) {';
+// Toggle Network Inspect after define `support` var.
+// We have been set up `__NETWORK_INSPECT__` in Worker before import application script.
+const toggleReplaceStr = `self.__NETWORK_INSPECT__ && self.__NETWORK_INSPECT__(true);${toggleFlag}`;
 
 export const checkFetchExists = code => code.indexOf(isFetch) > -1;
-export const patchFetchPolyfill = code => code.replace(flag, replaceStr);
+export const patchFetchPolyfill = code =>
+  code.replace(fetchSupportFlag, fetchSupportReplaceStr).replace(toggleFlag, toggleReplaceStr);
diff --git a/app/worker/index.js b/app/worker/index.js
@@ -16,6 +16,7 @@ import { reportDefaultReactDevToolsPort } from './reactDevTools';
 import devToolsEnhancer, { composeWithDevTools } from './reduxAPI';
 import * as RemoteDev from './remotedev';
 import { getRequiredModules, ignoreRNDIntervalSpy } from './utils';
+import { toggleNetworkInspect } from './networkInspect';
 
 /* eslint-disable no-underscore-dangle */
 self.__REMOTEDEV__ = RemoteDev;
@@ -33,6 +34,9 @@ self.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = composeWithDevTools;
 
 const setupRNDebuggerBeforeImportScript = message => {
   self.__REACT_DEVTOOLS_PORT__ = message.reactDevToolsPort;
+  if (message.networkInspect) {
+    self.__NETWORK_INSPECT__ = toggleNetworkInspect;
+  }
 };
 
 const setupRNDebugger = async message => {

diff --git a/app/worker/networkInspect.js b/app/worker/networkInspect.js
@@ -1,20 +1,32 @@
 const isWorkerMethod = fn => String(fn).indexOf('[native code]') > -1;
 
+/* eslint-disable no-underscore-dangle */
 let networkInspect;
 
-/* eslint-disable no-underscore-dangle */
+// Disable `support.blob` in `whatwg-fetch` for use native XMLHttpRequest,
+// See https://github.com/jhen0409/react-native-debugger/issues/56
+const toggleBlobOfFetchSupport = disabled => {
+  if (!self.__FETCH_SUPPORT__) return;
+  if (disabled) {
+    self.__FETCH_SUPPORT__._blobBackup = self.__FETCH_SUPPORT__.blob;
+    self.__FETCH_SUPPORT__.blob = false;
+  } else {
+    self.__FETCH_SUPPORT__.blob = !!self.__FETCH_SUPPORT__._blobBackup;
+    delete self.__FETCH_SUPPORT__._blobBackup;
+  }
+};
+
 export const toggleNetworkInspect = enabled => {
   if (!enabled && networkInspect) {
-    window.XMLHttpRequest = networkInspect.XMLHttpRequest;
-    window.FormData = networkInspect.FormData;
+    self.XMLHttpRequest = networkInspect.XMLHttpRequest;
+    self.FormData = networkInspect.FormData;
     networkInspect = null;
-    if (window._fetchSupport) {
-      window._fetchSupport.blob = !!window._fetchSupport._blob;
-    }
+    toggleBlobOfFetchSupport(false);
     return;
   }
   if (!enabled) return;
-  if (isWorkerMethod(window.XMLHttpRequest) || isWorkerMethod(window.FormData)) {
+  if (enabled && networkInspect) return;
+  if (isWorkerMethod(self.XMLHttpRequest) || isWorkerMethod(self.FormData)) {
     console.warn(
       '[RNDebugger] ' +
         'I tried to enable Network Inspect but XHR ' +
@@ -26,20 +38,15 @@ export const toggleNetworkInspect = enabled => {
     return;
   }
   networkInspect = {
-    XMLHttpRequest: window.XMLHttpRequest,
-    FormData: window.FormData,
+    XMLHttpRequest: self.XMLHttpRequest,
+    FormData: self.FormData,
   };
-  window.XMLHttpRequest = window.originalXMLHttpRequest
-    ? window.originalXMLHttpRequest
-    : window.XMLHttpRequest;
-  window.FormData = window.originalFormData ? window.originalFormData : window.FormData;
+  self.XMLHttpRequest = self.originalXMLHttpRequest
+    ? self.originalXMLHttpRequest
+    : self.XMLHttpRequest;
+  self.FormData = self.originalFormData ? self.originalFormData : self.FormData;
 
-  // Disable `support.blob` in `whatwg-fetch` for use native XMLHttpRequest,
-  // See https://github.com/jhen0409/react-native-debugger/issues/56
-  if (window._fetchSupport) {
-    window._fetchSupport._blob = window._fetchSupport.blob;
-    window._fetchSupport.blob = false;
-  }
+  toggleBlobOfFetchSupport(true);
 
   console.log(
     '[RNDebugger]',