v0.11 (#485)

* Upgrade react-devtools-core to v4 (#371) * Use react-devtools-core v4 alpha * Temporary made it work * Update patch-modules * Bump ws to v7 * Remove setDefaultThemeName usage * Fix lint error * Remove `How to use it with a real device?` tip * Update docs/react-devtools-integration.md * Remove DeltaBundler support * Avoid box-sizing style for `.redux-container *` * Create new auto_update.json feed for v0.11 usage * Due to app breaking changes, we don't allow auto update for RNDebugger version < 0.11 * Update react-devtools-core to v4.3.0 * Fix E2E test * Update doc * v0.11.0-beta-0 * Update react-devtools-core to v4.4 * v0.11.0-beta-1 * v0.11.0-beta-2 * Improve lookupForRNModules by use __r.getModules if provided (#468) * Update react-devtools-core to v4.5 * v0.11.0-beta-3 * Upgrade Electron to v8.0 (#456) * Bump Electron version to v8.0.0-beta.3 * Bump to 8.0.0-beta.9 * Update electron and spectron version * Update Electron to v8.0.1 * Update Electron to v8.0.2 * Update Electron to v8.1.1 * Bump node-abi version * Update Electron to v8.2.0 * Update react-devtools-core to v4.6.0 * v0.11.0-beta-4 * E2E test: Update auto_update feed path * Fix url of auto_update.json * Update README.md * Link v0.10 docs
jhen0409 · Apr 4, 2020 · bac060d · bac060d
1 parent 80ef55b
commit bac060d
Show file tree

Hide file tree

Showing 16 changed files with 157 additions and 438 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,17 @@ $ brew update && brew cask install react-native-debugger
 
 This puts `React Native Debugger.app` in your `/applications/` folder.
 
+### NOTICE: React Native Compatibility
+
+To use this app you need to ensure you are using the correct version of React Native Debugger and react-native:
+
+| React Native Debugger | react-native |
+| --------------------- | ------------ |
+| >= 0.11               | >= 0.62      |
+| <= 0.10               | <= 0.61      |
+
+We used different auto-update feed for `v0.10` and `v0.11`, so you won't see update tips of `v0.11` from `v0.10`.
+
 ## Documentation
 
 - [Getting Started](docs/getting-started.md)
@@ -38,6 +49,10 @@ This puts `React Native Debugger.app` in your `/applications/` folder.
 - [Troubleshooting](docs/troubleshooting.md)
 - [Contributing](docs/contributing.md)
 
+## Documentation (v0.10)
+
+Please visit [`v0.10 branch`](https://github.com/jhen0409/react-native-debugger/tree/v0.10).
+
 ## Credits
 
 - Great work of [React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools)

diff --git a/__e2e__/app.spec.js b/__e2e__/app.spec.js
@@ -6,7 +6,7 @@ import electronPath from 'electron';
 import { Application } from 'spectron';
 import buildTestBundle, { bundlePath } from './buildTestBundle';
 import createMockRNServer from './mockRNServer';
-import autoUpdateFeed from '../auto_updater.json';
+import autoUpdateFeed from '../auto_update.json';
 
 const delay = time => new Promise(resolve => setTimeout(resolve, time));
 
@@ -42,7 +42,7 @@ describe('Application launch', () => {
     // Check auto update feed is expected
     expect(version).toBe(process.env.npm_package_version);
     expect(autoUpdateFeed.url).toBe(
-      `https://github.com/jhen0409/react-native-debugger/releases/download/v${version}/rn-debugger-macos-x64.zip`
+      `https://github.com/jhen0409/react-native-debugger/releases/download/v${version}/rn-debugger-macos-x64.zip`,
     );
     expect(autoUpdateFeed.name).toBe(`v${version}`);
     expect(typeof autoUpdateFeed.notes).toBe('string');
@@ -56,11 +56,16 @@ describe('Application launch', () => {
     await client.waitUntilWindowLoaded();
     await delay(2000);
     const title = await browserWindow.getTitle();
-    expect(title).toBe('React Native Debugger - Attempting reconnection (port 8081)');
+    expect(title).toBe(
+      'React Native Debugger - Attempting reconnection (port 8081)',
+    );
   });
 
   it('should portfile (for debugger-open usage) always exists in home dir', async () => {
-    const portFile = path.join(process.env.USERPROFILE || process.env.HOME, '.rndebugger_port');
+    const portFile = path.join(
+      process.env.USERPROFILE || process.env.HOME,
+      '.rndebugger_port',
+    );
 
     expect(fs.existsSync(portFile)).toBe(true);
     fs.unlinkSync(portFile);
@@ -78,20 +83,26 @@ describe('Application launch', () => {
   it("should contain Inspector monitor's component on Redux DevTools", async () => {
     const { client } = app;
 
-    const val = await client.element('//div[contains(@class, "inspector-")]').getText();
+    const val = await client
+      .element('//div[contains(@class, "inspector-")]')
+      .getText();
     expect(val).not.toBeNull();
   });
 
   it('should contain an empty actions list on Redux DevTools', async () => {
     const { client } = app;
 
-    const val = await client.element('//div[contains(@class, "actionListRows-")]').getText();
+    const val = await client
+      .element('//div[contains(@class, "actionListRows-")]')
+      .getText();
     expect(val).toBe('');
   });
 
   it('should show waiting message on React DevTools', async () => {
     const { client } = app;
-    const exist = await client.isExisting('//h2[text()="Waiting for React to connect…"]');
+    const exist = await client.isExisting(
+      '//h2[text()="Waiting for React to connect…"]',
+    );
     expect(exist).toBe(true);
   });
 
@@ -110,7 +121,9 @@ describe('Application launch', () => {
     expect(url).toBe('/debugger-proxy?role=debugger&name=Chrome');
 
     const title = await app.browserWindow.getTitle();
-    expect(title).toBe('React Native Debugger - Waiting for client connection (port 8081)');
+    expect(title).toBe(
+      'React Native Debugger - Waiting for client connection (port 8081)',
+    );
     server.close();
     wss.close();
   });
@@ -143,7 +156,7 @@ describe('Application launch', () => {
 
     const title = await app.browserWindow.getTitle();
     expect(title).toBe(
-      `React Native Debugger - Waiting for client connection (port ${customRNServerPort})`
+      `React Native Debugger - Waiting for client connection (port ${customRNServerPort})`,
     );
     server.close();
     wss.close();
@@ -183,7 +196,7 @@ describe('Application launch', () => {
                     method: 'executeApplicationScript',
                     inject: [],
                     url: `../../${bundlePath}`,
-                  })
+                  }),
                 );
                 break;
               case 'sendFakeScript':
@@ -196,12 +209,14 @@ describe('Application launch', () => {
             JSON.stringify({
               id: 'createJSRuntime',
               method: 'prepareJSRuntime',
-            })
+            }),
           );
         });
       });
       const title = await app.browserWindow.getTitle();
-      expect(title).toBe(`React Native Debugger - Connected (port ${customRNServerPort})`);
+      expect(title).toBe(
+        `React Native Debugger - Connected (port ${customRNServerPort})`,
+      );
     });
 
     afterAll(() => {
@@ -218,7 +233,9 @@ describe('Application launch', () => {
 
     it('should have @@INIT action on Redux DevTools', async () => {
       const { client } = app;
-      const val = await client.element('//div[contains(@class, "actionListRows-")]').getText();
+      const val = await client
+        .element('//div[contains(@class, "actionListRows-")]')
+        .getText();
       expect(val).toMatch(/@@redux\/INIT/); // Last store is `RemoteDev store instance 1`
     });
 
@@ -246,7 +263,11 @@ describe('Application launch', () => {
 
     const expectActions = {
       'Redux store instance 1': {
-        expt: [/@@INIT/, /TEST_PASS_FOR_REDUX_STORE_1/, /SHOW_FOR_REDUX_STORE_1/],
+        expt: [
+          /@@INIT/,
+          /TEST_PASS_FOR_REDUX_STORE_1/,
+          /SHOW_FOR_REDUX_STORE_1/,
+        ],
         notExpt: [/NOT_SHOW_FOR_REDUX_STORE_1/, /TEST_PASS_FOR_REDUX_STORE_2/],
       },
       'Redux store instance 2': {
@@ -287,7 +308,9 @@ describe('Application launch', () => {
       const { client } = app;
 
       await selectInstance(name);
-      const val = await client.element('//div[contains(@class, "actionListRows-")]').getText();
+      const val = await client
+        .element('//div[contains(@class, "actionListRows-")]')
+        .getText();
       runExpectActions(name, val);
       await commit();
     };
@@ -311,21 +334,29 @@ describe('Application launch', () => {
       const logs = await client.getRenderProcessLogs();
       // Print renderer process logs
       logs.forEach(log =>
-        console.log(`Message: ${log.message}\nSource: ${log.source}\nLevel: ${log.level}`)
+        console.log(
+          `Message: ${log.message}\nSource: ${log.source}\nLevel: ${log.level}`,
+        ),
       );
       expect(logs.length).toEqual(1);
       const [formDataWarning] = logs;
       expect(formDataWarning.source).toBe('worker');
       expect(formDataWarning.level).toBe('WARNING');
       expect(
-        formDataWarning.message.indexOf("Detected you're enabled Network Inspect") > 0
+        formDataWarning.message.indexOf(
+          "Detected you're enabled Network Inspect",
+        ) > 0,
       ).toBeTruthy();
     });
 
     it('should show apollo devtools panel', async () => {
       const { client } = app;
       expect(
-        (await client.execute(() => window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__)).value
+        (
+          await client.execute(
+            () => window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__,
+          )
+        ).value,
       ).toBeTruthy();
     });
   });

diff --git a/app/containers/ReactInspector.js b/app/containers/ReactInspector.js
@@ -5,13 +5,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { shell } from 'electron';
 import { tryADBReverse } from '../utils/adb';
-import config from '../utils/config';
 
 let ReactServer;
 const getReactInspector = () => {
   if (ReactServer) return ReactServer;
   // eslint-disable-next-line
-  ReactServer = ReactServer || require('react-devtools-core/standalone');
+  ReactServer = ReactServer || require('react-devtools-core/standalone').default;
 
   return ReactServer;
 };
@@ -23,13 +22,6 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
   },
-  tip: {
-    lineHeight: 1.5,
-  },
-  link: {
-    cursor: 'pointer',
-    color: '#777',
-  },
 };
 
 const isReactPanelOpen = props => props.setting.react;
@@ -66,15 +58,11 @@ export default class ReactInspector extends Component {
       this.closeServerIfExists();
       if (isReactPanelOpen(this.props)) {
         this.server = this.startServer();
-        this.setDefaultThemeName(nextProps.setting.themeName);
       }
       nextWorker.addEventListener('message', this.workerOnMessage);
     } else if (!nextWorker) {
       this.closeServerIfExists();
     }
-    if (this.props.setting.themeName !== nextProps.setting.themeName) {
-      this.setDefaultThemeName(nextProps.setting.themeName);
-    }
     // Open / Close server when react panel opened / hidden
     if (!worker && !nextWorker) return;
     if (isReactPanelOpen(this.props) && !isReactPanelOpen(nextProps)) {
@@ -93,16 +81,6 @@ export default class ReactInspector extends Component {
     this.closeServerIfExists();
   }
 
-  setDefaultThemeName(themeName) {
-    const theme = config.defaultReactDevToolsTheme;
-    const inspector = getReactInspector();
-    if (!theme || theme === 'RNDebugger') {
-      inspector.setDefaultThemeName(themeName === 'dark' ? 'ChromeDark' : 'ChromeDefault');
-    } else {
-      inspector.setDefaultThemeName(theme);
-    }
-  }
-
   listeningPort = window.reactDevToolsPort;
 
   workerOnMessage = message => {
@@ -123,8 +101,8 @@ export default class ReactInspector extends Component {
 
   startServer(port = this.listeningPort) {
     let loggedWarn = false;
+
     return getReactInspector()
-      .setBrowserName('RNDebugger DevTools')
       .setStatusListener(status => {
         if (!loggedWarn && status === 'Failed to start the server.') {
           const message =
@@ -161,13 +139,6 @@ export default class ReactInspector extends Component {
       <div id={containerId} style={styles.container}>
         <div id="waiting">
           <h2>{'Waiting for React to connect…'}</h2>
-          <h5 style={styles.tip}>
-            {"If you're using a real device, ensure you have read the "}
-            <span style={styles.link} onClick={this.handleDocLinkClick}>
-              `How to use it with a real device?`
-            </span>
-            {' section in the documentation.'}
-          </h5>
         </div>
       </div>
     );

diff --git a/app/middlewares/debuggerAPI.js b/app/middlewares/debuggerAPI.js
@@ -17,8 +17,6 @@ import { setDevMenuMethods, networkInspect } from '../utils/devMenu';
 import { tryADBReverse } from '../utils/adb';
 import { clearNetworkLogs, selectRNDebuggerWorkerContext } from '../utils/devtools';
 import config from '../utils/config';
-import deltaUrlToBlobUrl from './delta/deltaUrlToBlobUrl';
-import checkDeltaAvailable from './delta/checkDeltaAvailable';
 
 const currentWindow = remote.getCurrentWindow();
 const { SET_DEBUGGER_LOCATION, BEFORE_WINDOW_CLOSE } = debuggerActions;
@@ -178,25 +176,9 @@ const connectToDebuggerProxy = async () => {
           // Reserve React Inspector port for debug via USB on Android real device
           tryADBReverse(window.reactDevToolsPort).catch(() => {});
         }
-        // Check Delta support
-        try {
-          if (await checkDeltaAvailable(host, port)) {
-            const { url, moduleSize } = await deltaUrlToBlobUrl(
-              object.url.replace('.bundle', '.delta')
-            );
-            object.moduleSize = moduleSize;
-            clearLogs();
-            scriptExecuted = true;
-            worker.postMessage({ ...object, url });
-            flushQueuedMessages();
-            checkJSLoadCount();
-            return;
-          }
-        } finally {
-          // Clear logs even if no error catched
-          clearLogs();
-          scriptExecuted = true;
-        }
+        // Clear logs even if no error catched
+        clearLogs();
+        scriptExecuted = true;
         checkJSLoadCount();
       }
       if (scriptExecuted) {