Merged changes from 4.0.0 -> 4.0.5 from DevTools fork

fixtures/devtools/standalone/index.html

@@ -9,6 +9,7 @@
 
     <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/immutable@4.0.0-rc.12/dist/immutable.js"></script>
 
     <!-- Don't use this in production: -->
     <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
@@ -255,6 +256,33 @@ <h1>List</h1>
         );
       }
 
+      const set = new Set(['abc', 123]);
+      const map = new Map([['name', 'Brian'], ['food', 'sushi']]);
+      const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
+      const mapOfMaps = new Map([['first', map], ['second', map]]);
+      const typedArray = Int8Array.from([100, -100, 0]);
+      const immutable = Immutable.fromJS({
+        a: [{ hello: 'there' }, 'fixed', true],
+        b: 123,
+        c: {
+          '1': 'xyz',
+          xyz: 1,
+        },
+      });
+
+      function UnserializableProps() {
+        return (
+          <ChildComponent
+            map={map}
+            set={set}
+            mapOfMaps={mapOfMaps}
+            setOfSets={setOfSets}
+            typedArray={typedArray}
+            immutable={immutable}
+          />
+        );
+      }
+
       function ChildComponent(props: any) {
         return null;
       }
@@ -264,6 +292,7 @@ <h1>List</h1>
           <Fragment>
             <SimpleValues />
             <ObjectProps />
+            <UnserializableProps />
             <CustomObject />
           </Fragment>
         );

packages/react-devtools-core/package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.5",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
   "repository": {
-    "url": "https://github.com/bvaughn/react-devtools-experimental.git",
-    "type": "git"
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-devtools-core"
   },
   "files": [
     "dist",

packages/react-devtools-core/src/standalone.js

@@ -14,7 +14,8 @@ import {
   getAppendComponentStack,
 } from 'react-devtools-shared/src/utils';
 import {Server} from 'ws';
-import {existsSync, readFileSync} from 'fs';
+import {join} from 'path';
+import {readFileSync} from 'fs';
 import {installHook} from 'react-devtools-shared/src/hook';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {doesFilePathExist, launchEditor} from './editor';
@@ -259,14 +260,8 @@ function startServer(port?: number = 8097) {
   });
 
   httpServer.on('request', (request, response) => {
-    // NPM installs should read from node_modules,
-    // But local dev mode needs to use a relative path.
-    const basePath = existsSync('./node_modules/react-devtools-core')
-      ? 'node_modules/react-devtools-core'
-      : '../react-devtools-core';
-
     // Serve a file that immediately sets up the connection.
-    const backendFile = readFileSync(`${basePath}/dist/backend.js`);
+    const backendFile = readFileSync(join(__dirname, 'backend.js'));
 
     // The renderer interface doesn't read saved component filters directly,
     // because they are generally stored in localStorage within the context of the extension.

packages/react-devtools-core/webpack.standalone.js

@@ -40,6 +40,12 @@ module.exports = {
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
+  node: {
+    // Don't replace __dirname!
+    // This would break the standalone DevTools ability to load the backend.
+    // see https://github.com/facebook/react-devtools/issues/1269
+    __dirname: false,
+  },
   plugins: [
     new DefinePlugin({
       __DEV__: false,

packages/react-devtools-extensions/build.js

@@ -61,14 +61,13 @@ const build = async (tempPath, manifestPath) => {
   );
 
   const commit = getGitCommit();
-  const versionDateString = `${commit} (${new Date().toLocaleDateString()})`;
-
+  const dateString = new Date().toLocaleDateString();
   const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
+  const versionDateString = `${manifest.version} (${dateString})`;
   if (manifest.version_name) {
     manifest.version_name = versionDateString;
-  } else {
-    manifest.description += `\n\nCreated from revision ${versionDateString}`;
   }
+  manifest.description += `\n\nCreated from revision ${commit} on ${dateString}.`;
 
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 

packages/react-devtools-extensions/chrome/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.0.0",
-  "version_name": "4.0.0",
+  "version": "4.0.5",
+  "version_name": "4.0.5",
 
   "minimum_chrome_version": "49",
 
@@ -40,15 +40,7 @@
     "persistent": false
   },
 
-  "permissions": [
-    "<all_urls>",
-    "background",
-    "tabs",
-    "webNavigation",
-    "file:///*",
-    "http://*/*",
-    "https://*/*"
-  ],
+  "permissions": ["file:///*", "http://*/*", "https://*/*"],
 
   "content_scripts": [
     {

packages/react-devtools-extensions/deploy.html

@@ -18,12 +18,11 @@ <h1>
 
   <h3>
     Created on <strong>%date%</strong> from
-    <a href="http://github.com/bvaughn/react-devtools-experimental/commit/%commit%"><code>%commit%</code></a>
+    <a href="http://github.com/facebook/react/commit/%commit%"><code>%commit%</code></a>
   </h3>
 
   <p>
-    This is a preview build of an <a href="https://github.com/facebook/react/tree/master/packages/react-devtools-extensions">unreleased DevTools extension</a>.
-    It has no developer support.
+    This is a preview build of the <a href="https://github.com/facebook/react">React DevTools extension</a>.
   </p>
 
   <h2>Installation instructions</h2>
@@ -37,10 +36,5 @@ <h2>Bug reports</h2>
     Please report bugs as <a href="https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools">GitHub issues</a>.
     Please include all of the info required to reproduce the bug (e.g. links, code, instructions).
   </p>
-
-  <h2>Feature requests</h2>
-  <p>
-    Feature requests are not being accepted at this time.
-  </p>
 </body>
 </html>

packages/react-devtools-extensions/firefox/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.0.0",
+  "version": "4.0.5",
 
   "applications": {
     "gecko": {
@@ -44,15 +44,7 @@
     "scripts": ["build/background.js"]
   },
 
-  "permissions": [
-    "<all_urls>",
-    "activeTab",
-    "tabs",
-    "webNavigation",
-    "file:///*",
-    "http://*/*",
-    "https://*/*"
-  ],
+  "permissions": ["file:///*", "http://*/*", "https://*/*"],
 
   "content_scripts": [
     {

packages/react-devtools-extensions/src/main.js

@@ -120,6 +120,10 @@ function createPanelIfReactLoaded() {
           localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
         }
 
+        if (store !== null) {
+          profilingData = store.profilerStore.profilingData;
+        }
+
         store = new Store(bridge, {
           isProfiling,
           supportsReloadAndProfile: getBrowserName() === 'Chrome',
@@ -281,21 +285,6 @@ function createPanelIfReactLoaded() {
 
       chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
-      // Shutdown bridge before a new page is loaded.
-      chrome.webNavigation.onBeforeNavigate.addListener(
-        function onBeforeNavigate(details) {
-          // Ignore navigation events from other tabs (or from within frames).
-          if (details.tabId !== tabId || details.frameId !== 0) {
-            return;
-          }
-
-          // `bridge.shutdown()` will remove all listeners we added, so we don't have to.
-          bridge.shutdown();
-
-          profilingData = store.profilerStore.profilingData;
-        },
-      );
-
       // Re-initialize DevTools panel when a new page is loaded.
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
         // Re-initialize saved filters on navigation,

packages/react-devtools-inline/package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.5",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
   "repository": {
-    "url": "https://github.com/bvaughn/react-devtools-experimental.git",
-    "type": "git"
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-devtools-inline"
   },
   "files": [
     "dist",

packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InspectedElementContext should dehydrate complex nested values when requested: 1: Initially inspect element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "set_of_sets": {
+      "0": {},
+      "1": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should dehydrate complex nested values when requested: 2: Inspect props.set_of_sets.0 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "set_of_sets": {
+      "0": {
+        "0": 1,
+        "1": 2,
+        "2": 3
+      },
+      "1": {}
+    }
+  },
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `
 {
   "id": 2,
@@ -91,6 +127,28 @@ exports[`InspectedElementContext should include updates for nested values that w
 }
 `;
 
+exports[`InspectedElementContext should inspect hooks for components that only use context: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": null,
+      "isStateEditable": false,
+      "name": "Context",
+      "value": true,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `
 {
   "id": 2,
@@ -427,13 +485,38 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
   "context": null,
   "hooks": null,
   "props": {
-    "html_element": {},
+    "array_buffer": {},
+    "date": {},
     "fn": {},
-    "symbol": {},
+    "html_element": {},
+    "immutable": {
+      "0": {},
+      "1": {},
+      "2": {}
+    },
+    "map": {
+      "0": {},
+      "1": {}
+    },
+    "map_of_maps": {
+      "0": {},
+      "1": {}
+    },
     "react_element": {},
-    "array_buffer": {},
-    "typed_array": {},
-    "date": {}
+    "set": {
+      "0": "abc",
+      "1": 123
+    },
+    "set_of_sets": {
+      "0": {},
+      "1": {}
+    },
+    "symbol": {},
+    "typed_array": {
+      "0": 100,
+      "1": -100,
+      "2": 0
+    }
   },
   "state": null
 }