Fix context menu functions for RN 0.56 (#247)

* Fix patchFetchPolyfill for compatible RN 0.56

* Fix required modules of RNDebugger functions on RN 0.56

* Update docs/network-inspect-of-chrome-devtools.md

* Update docs/debugger-integration.md

* Update test fixture

* Add more comments about Network Inspect manually setup

* Lookup for react-native implementation

* Assign global.$reactNative for make debug easier

* Detect metroRequire for RN 0.56

* Update docs/debugger-integration.md

Author: jhen0409

__e2e__/fixture/setup.js

@@ -5,23 +5,27 @@ self.window = global;
 // Remove native fetch as react-native use whatwg-fetch polyfill
 self.fetch = undefined;
 
+const MessageQueue = function MessageQueue() {};
+MessageQueue.spy = () => {};
+MessageQueue.prototype.__spy = null;
+
 const requiredModules = {
   NativeModules: {},
   Platform: {},
   setupDevtools: undefined,
   AsyncStorage: {},
-  MessageQueue: {
-    spy: () => {},
-    prototype: { __spy: null },
-  },
+  MessageQueue,
 };
 // Simulate React Native's window.require polyfill
 window.require = moduleName => {
-  // From https://github.com/facebook/react-native/blob/5403946f098cc72c3d33ea5cee263fb3dd03891d/packager/src/Resolver/polyfills/require.js#L97
-  console.warn(
-    `Requiring module '${moduleName}' by name is only supported for ` +
-      'debugging purposes and will BREAK IN PRODUCTION!'
-  );
+  if (typeof moduleName !== 'number') {
+    // From https://github.com/facebook/react-native/blob/5403946f098cc72c3d33ea5cee263fb3dd03891d/packager/src/Resolver/polyfills/require.js#L97
+    console.warn(
+      `Requiring module '${moduleName}' by name is only supported for ` +
+        'debugging purposes and will BREAK IN PRODUCTION!'
+    );
+  }
   return requiredModules[moduleName];
 };
 window.__DEV__ = true;
+window.__fbBatchedBridge = new MessageQueue();

app/middlewares/debuggerAPI.js

@@ -127,7 +127,10 @@ const connectToDebuggerProxy = async () => {
         // Check Delta support
         try {
           if (await checkDeltaAvailable(host, port)) {
-            const url = await deltaUrlToBlobUrl(object.url.replace('.bundle', '.delta'));
+            const { url, moduleSize } = await deltaUrlToBlobUrl(
+              object.url.replace('.bundle', '.delta')
+            );
+            object.moduleSize = moduleSize;
             clearLogs();
             scriptExecuted = true;
             worker.postMessage({ ...object, url });

app/middlewares/delta/DeltaPatcher.js

@@ -113,6 +113,10 @@ export default class DeltaPatcher {
     );
   }
 
+  getSizeOfAllModules() {
+    return this._lastBundle.pre.size + this._lastBundle.modules.size + this._lastBundle.post.size;
+  }
+
   _patchMap(original, patch) {
     for (const [key, value] of patch.entries()) {
       if (value == null) {

app/middlewares/delta/deltaUrlToBlobUrl.js

@@ -36,7 +36,7 @@ export default async function deltaUrlToBlobUrl(deltaUrl) {
   // If nothing changed, avoid recreating a bundle blob by reusing the
   // previous one.
   if (deltaPatcher.getLastNumModifiedFiles() === 0 && cachedBundle) {
-    return cachedBundle;
+    return { url: cachedBundle, moduleSize: deltaPatcher.getSizeOfAllModules() };
   }
 
   // Clean up the previous bundle URL to not leak memory.
@@ -56,5 +56,5 @@ export default async function deltaUrlToBlobUrl(deltaUrl) {
   const bundleContents = URL.createObjectURL(blob);
   cachedBundleUrls.set(deltaUrl, bundleContents);
 
-  return bundleContents;
+  return { url: bundleContents, moduleSize: deltaPatcher.getSizeOfAllModules() };
 }

app/middlewares/delta/patchFetchPolyfill.js

@@ -4,16 +4,23 @@
  * Patch whatwg-fetch code to get `support` var,
  * so we could use it to fix the issue.
  */
-const isFetch = /"node_modules\/@?[a-zA-Z-_/]*whatwg-fetch\/fetch.js"/;
 
-const fetchSupportFlag = /(if \(self.fetch\) {\n\s+return;\n\s+}\n\s+var support )(=)( {)/g;
+const isFetch = [
+  /"node_modules\/@?[a-zA-Z-_/]*whatwg-fetch\/fetch.js"/,
+  /*
+   * RN >= 0.56
+   */
+  /,"whatwg-fetch.js"\)/,
+];
+
+const fetchSupportFlag = /(var support )(=)( {)/g;
 const fetchSupportReplaceStr = '$1= self.__FETCH_SUPPORT__ =$3';
 
-const toggleFlag = 'self.fetch.polyfill = true';
+const toggleFlag = 'fetch.polyfill = true';
 // 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}`;
+const toggleReplaceStr = `${toggleFlag};self.__NETWORK_INSPECT__ && self.__NETWORK_INSPECT__(true)`;
 
-export const checkFetchExists = code => isFetch.test(code);
+export const checkFetchExists = code => isFetch.some(regex => regex.test(code));
 export const patchFetchPolyfill = code =>
   code.replace(fetchSupportFlag, fetchSupportReplaceStr).replace(toggleFlag, toggleReplaceStr);

app/worker/index.js

@@ -45,7 +45,7 @@ const setupRNDebugger = async message => {
   // doesn't notify to the remote JS runtime
   self.__RND_INTERVAL__ = setInterval(function() {}, 100); // eslint-disable-line
 
-  const modules = await getRequiredModules();
+  const modules = await getRequiredModules(message.moduleSize);
   if (modules) {
     ignoreRNDIntervalSpy(modules);
     checkAvailableDevMenuMethods(modules, message.networkInspect);

app/worker/utils.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 
 // Avoid warning of use `window.require` on dev mode
+// it actually unnecessary for RN >= 0.56, so it is backward compatibility
 const avoidWarnForRequire = moduleNames => {
   if (!moduleNames.length) moduleNames.push('NativeModules');
   return new Promise(resolve =>
@@ -23,20 +24,49 @@ const avoidWarnForRequire = moduleNames => {
   );
 };
 
-const requiredModules = [
-  'MessageQueue',
-  'NativeModules',
-  'AsyncStorage',
-  'Platform',
-  'setupDevtools',
-];
-export const getRequiredModules = async () => {
+let reactNative;
+
+const lookupForRNModules = (size = 999) => {
+  for (let moduleId = 0; moduleId <= size - 1; moduleId++) {
+    const rn = window.require(moduleId);
+    if (rn.requireNativeComponent && rn.NativeModules) {
+      return rn;
+    }
+  }
+  return null;
+};
+
+const getModule = (name, size) => {
+  let result;
+  try {
+    // RN >= 0.56
+    if (window.require.name === 'metroRequire') {
+      reactNative = global.$reactNative = reactNative || lookupForRNModules(size);
+      result = reactNative && reactNative[name];
+    } else if (window.require.name === '_require') {
+      result = window.require(name);
+    }
+  } catch (e) {} // eslint-disable-line
+  return result || { __empty: true };
+};
+
+const requiredModules = {
+  MessageQueue: size =>
+    (self.__fbBatchedBridge && Object.getPrototypeOf(self.__fbBatchedBridge).constructor) ||
+    getModule('MessageQueue', size),
+  NativeModules: size => getModule('NativeModules', size),
+  AsyncStorage: size => getModule('AsyncStorage', size),
+  Platform: size => getModule('Platform', size),
+  setupDevtools: size => getModule('setupDevtools', size),
+};
+
+export const getRequiredModules = async size => {
   if (!window.__DEV__ || typeof window.require !== 'function') return;
-  const done = await avoidWarnForRequire(requiredModules);
+  const done = await avoidWarnForRequire(Object.keys(requiredModules));
   const modules = {};
-  requiredModules.forEach(
-    name => (modules[name] = window.__DEV__ ? window.require(name) : { __empty: true })
-  );
+  for (const name of Object.keys(requiredModules)) {
+    modules[name] = requiredModules[name](size);
+  }
   done();
   return modules;
 };

docs/debugger-integration.md

@@ -2,10 +2,10 @@
 
 The Debugger worker is referenced from [react-native](https://github.com/facebook/react-native/blob/master/local-cli/server/util/) debugger-ui, so it's only working if you're enabled `Debug JS Remotely`, you can debug your app in Chrome Developer Tools, we keep the following tabs:
 
-* `Console`
-* `Sources`
-* `Network` (Inspect Network requests if you are enabled [Network Inspect](network-inspect-of-chrome-devtools.md))
-* `Memory`
+- `Console`
+- `Sources`
+- `Network` (Inspect Network requests if you are enabled [Network Inspect](network-inspect-of-chrome-devtools.md))
+- `Memory`
 
 ## Multiple React Native packager (custom port) support
 
@@ -21,9 +21,9 @@ For macOS (10.12+), it used native tabs feature, see [the support page](https://
 
 When you enabled remote debugging, RNDebugger should switched context to `RNDebuggerWorker.js` automatically, so you can get global variables of React Native runtime in the console.
 
-* `$r`: You selected element on react-devtools.
-* `require('<providesModule>')`: The module specified [`@providesModule`](https://github.com/facebook/react-native/search?l=JavaScript&q=providesModule&type=&utf8=✓) words in React Native, even you can specify in your files. This is example for use `AsyncStorage`: <img width="519" alt="t" src="https://cloud.githubusercontent.com/assets/3001525/25587896/a1253c9e-2ed8-11e7-9d70-6368cfd5e016.png">
-* `showAsyncStorageContentInDev()` - Log AsyncStorage content
+- `$r`: You selected element on react-devtools.
+- `showAsyncStorageContentInDev()` - Log AsyncStorage content
+- `require(...)` (RN < 0.56) or `$reactNative.*` (RN >= 0.56) - Get react-native modules. For example, you can get `$reactNative.AsyncStorage`
 
 #### [iOS only] Force your app on debug mode
 
@@ -44,11 +44,11 @@ if (__DEV__) {
 
 ## Other documentations
 
-* [Getting Started](getting-started.md)
-* [React DevTools Integration](react-devtools-integration.md)
-* [Redux DevTools Integration](redux-devtools-integration.md)
-* [Shortcut references](shortcut-references.md)
-* [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
-* [Enable open in editor in console](enable-open-in-editor-in-console.md)
-* [Troubleshooting](troubleshooting.md)
-* [Contributing](contributing.md)
+- [Getting Started](getting-started.md)
+- [React DevTools Integration](react-devtools-integration.md)
+- [Redux DevTools Integration](redux-devtools-integration.md)
+- [Shortcut references](shortcut-references.md)
+- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
+- [Enable open in editor in console](enable-open-in-editor-in-console.md)
+- [Troubleshooting](troubleshooting.md)
+- [Contributing](contributing.md)

docs/network-inspect-of-chrome-devtools.md

@@ -1,12 +1,12 @@
 # Network Inspect of Chrome Developer Tools
 
-__*WARNING*__: You should read [the limitations](#limitations) if you want to use this feature.
+**_WARNING_**: You should read [the limitations](#limitations) if you want to use this feature.
 
 You can enable this feature by the [context menu or Touch Bar](shortcut-references.md), then you can inspect network requests that use `XMLHttpRequest` or `fetch` on the `Network` tab of Chrome Developer Tools.
 
 ## How it works
 
-See [the comments of `react-native/Libraries/Core/InitializeCore.js#L43-L53`](https://github.com/facebook/react-native/blob/0.45-stable/Libraries/Core/InitializeCore.js#L43-L53). It uses `XMLHttpRequest` from WebWorker in Chrome:
+See [the comments of `react-native/Libraries/Core/InitializeCore.js#L43-L53`](https://github.com/facebook/react-native/blob/0.45-stable/Libraries/Core/InitializeCore.js#L43-L53). It uses `XMLHttpRequest` from WebWorker in Chrome, basically it can manually setup by:
 
 ```js
 global.XMLHttpRequest = global.originalXMLHttpRequest ?
@@ -15,38 +15,51 @@ global.XMLHttpRequest = global.originalXMLHttpRequest ?
 global.FormData = global.originalFormData ?
   global.originalFormData :
   global.FormData;
-global.Blob = global.originalBlob ?
-  global.originalBlob :
-  global.Blob;
-global.FileReader = global.originalFileReader ?
-  global.originalFileReader :
-  global.FileReader;
+
+fetch; // Ensure to get the lazy property
+
+if (window.__FETCH_SUPPORT__) { // it's RNDebugger only to have
+  window.__FETCH_SUPPORT__.blob = false;
+} else {
+  /*
+   * Set __FETCH_SUPPORT__ to false is just work for `fetch`.
+   * If you're using another way you can just use the native Blob and remove the `else` statement
+   */
+  global.Blob = global.originalBlob ?
+    global.originalBlob :
+    global.Blob;
+  global.FileReader = global.originalFileReader ?
+    global.originalFileReader :
+    global.FileReader;
+}
 ```
 
+> Note that replace `global.Blob` will cause issue like [#56](https://github.com/jhen0409/react-native-debugger/issues/56).
+
 This allows you can open the `Network` tab in devtools to inspect requests of `fetch` and `XMLHttpRequest`.
 
 You can also do this on the official remote debugger, but it has two differences:
 
-* RNDebugger is based on [Electron](https://github.com/electron/electron) so it doesn't have the CORS issue
-* We support setting [`Forbidden header names`](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name), so you can use headers like `Origin` and `User-Agent`.
+- RNDebugger is based on [Electron](https://github.com/electron/electron) so it doesn't have the CORS issue
+- We support setting [`Forbidden header names`](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name), so you can use headers like `Origin` and `User-Agent`.
 
 ## Limitations
 
 There are some limitations of debugging network requests using Network Inspect:
 
-* [iOS] Requests pass `NSExceptionDomains` checks. If you forget to set a domain name, the requests will break in production. You should be clear about the difference.
-* React Native `FormData` supports the `uri` property. You can use files from `CameraRoll`, but `originalFormData` isn't supported.
-* It can't inspect request like `Image`s loaded from urls for `src`, so if your `Image` source has a set session, the session can't apply to `fetch` and `XMLHttpRequest`.
+- [iOS] Requests pass `NSExceptionDomains` checks. If you forget to set a domain name, the requests will break in production. You should be clear about the difference.
+- React Native `FormData` supports the `uri` property. You can use files from `CameraRoll`, but `originalFormData` isn't supported.
+- It can't inspect request like `Image`s loaded from urls for `src`, so if your `Image` source has a set session, the session can't apply to `fetch` and `XMLHttpRequest`.
 
 If you want to inspect deeper network requests (like requests made with `Image`), use tools like [Charles](https://www.charlesproxy.com) or [Stetho](https://facebook.github.io/stetho).
 
 ## Other documentations
 
-* [Getting Started](getting-started.md)
-* [Debugger Integration](debugger-integration.md)
-* [React DevTools Integration](react-devtools-integration.md)
-* [Redux DevTools Integration](redux-devtools-integration.md)
-* [Shortcut references](shortcut-references.md)
-* [Enable open in editor in console](enable-open-in-editor-in-console.md)
-* [Troubleshooting](troubleshooting.md)
-* [Contributing](contributing.md)
+- [Getting Started](getting-started.md)
+- [Debugger Integration](debugger-integration.md)
+- [React DevTools Integration](react-devtools-integration.md)
+- [Redux DevTools Integration](redux-devtools-integration.md)
+- [Shortcut references](shortcut-references.md)
+- [Enable open in editor in console](enable-open-in-editor-in-console.md)
+- [Troubleshooting](troubleshooting.md)
+- [Contributing](contributing.md)