Bug 1219304 - add react-dom and use it in the devtools to render react r=jsantell

--HG--
extra : amend_source : 4aa25a00c9e1a0a51fbc7b08d4c8fb15393f83e2

devtools/client/jsonview/json-viewer.js

@@ -7,7 +7,7 @@
 define(function(require, exports, module) {
 
 // ReactJS
-const React = require("react");
+const ReactDOM = require("react-dom");
 
 // RDP Inspector
 const { createFactories } = require("./components/reps/rep-utils");
@@ -79,7 +79,7 @@ input.actions = {
  * at the top of the window. This component also represents ReacJS root.
  */
 var content = document.getElementById("content");
-var theApp = React.render(MainTabbedArea(input), content);
+var theApp = ReactDOM.render(MainTabbedArea(input), content);
 
 var onResize = event => {
   window.document.body.style.height = window.innerHeight + "px";

devtools/client/jsonview/viewer-config.js

@@ -23,7 +23,8 @@ require.config({
     "react": [
       "resource://devtools/client/shared/vendor/react-dev",
       "resource://devtools/client/shared/vendor/react"
-    ]
+    ],
+    "react-dom": "resource://devtools/client/shared/vendor/react-dom"
   }
 });
 

devtools/client/memory/components/test/mochitest/test_tree_01.html

@@ -16,6 +16,7 @@ depth.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
+    let ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
     let React = bRequire("devtools/client/shared/vendor/react");
     let Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
 
@@ -25,7 +26,7 @@ window.onload = Task.async(function* () {
     const t = Tree(TEST_TREE_INTERFACE);
     ok(t, "Should be able to create Tree instances");
 
-    const tree = React.render(t, window.document.body);
+    const tree = ReactDOM.render(t, window.document.body);
     ok(tree, "Should be able to mount Tree instances");
 
     yield setState(tree, {

devtools/client/memory/components/test/mochitest/test_tree_02.html

@@ -15,10 +15,11 @@ Test that collapsed subtrees aren't rendered.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
+    let ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
     let React = bRequire("devtools/client/shared/vendor/react");
     let Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
 
-    const tree = React.render(Tree(TEST_TREE_INTERFACE), window.document.body);
+    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setState(tree, {
       expanded: new Set("MNO".split(""))

devtools/client/memory/components/test/mochitest/test_tree_03.html

@@ -15,10 +15,11 @@ Test Tree's autoExpandDepth.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
+    let ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
     let React = bRequire("devtools/client/shared/vendor/react");
     let Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
 
-    const tree = React.render(Tree(TEST_TREE_INTERFACE), window.document.body);
+    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setProps(tree, {
       autoExpandDepth: 1

devtools/client/memory/components/test/mochitest/test_tree_04.html

@@ -15,9 +15,10 @@ Test that we only render visible tree items.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
+    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
     const React = bRequire("devtools/client/shared/vendor/react");
     const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
-    const tree = React.render(Tree(TEST_TREE_INTERFACE), window.document.body);
+    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setState(tree, {
       expanded: new Set("ABCDEFGHIJKLMNO".split("")),

devtools/client/memory/components/test/mochitest/test_tree_05.html

@@ -16,10 +16,11 @@ Test focusing with the Tree component.
 
 window.onload = Task.async(function* () {
   try {
+    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
     const React = bRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
-    const tree = React.render(Tree(TEST_TREE_INTERFACE), window.document.body);
+    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setState(tree, {
       focused: "G",

devtools/client/memory/components/test/mochitest/test_tree_06.html

@@ -15,10 +15,11 @@ Test keyboard navigation with the Tree component.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
+    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
     const React = bRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
-    const tree = React.render(Tree(TEST_TREE_INTERFACE), window.document.body);
+    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setState(tree, {
       expanded: new Set("ABCDEFGHIJKLMNO".split(""))

devtools/client/memory/components/test/mochitest/test_tree_07.html

@@ -16,9 +16,10 @@ Test that arrows get the open attribute when their item's children are expanded.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
+    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
     const React = bRequire("devtools/client/shared/vendor/react");
     const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
-    const tree = React.render(Tree(TEST_TREE_INTERFACE), window.document.body);
+    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setProps(tree, {
       renderItem: (item, depth, focused, arrow) => {

devtools/client/memory/components/test/mochitest/test_tree_08.html

@@ -17,10 +17,11 @@ other inputs.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
+    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
     const React = bRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
-    const tree = React.render(Tree(TEST_TREE_INTERFACE), window.document.body);
+    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     const input = document.createElement("input");
     document.body.appendChild(input);

devtools/client/memory/initializer.js

@@ -9,7 +9,8 @@ const BrowserLoaderModule = {};
 Cu.import("resource://devtools/client/shared/browser-loader.js", BrowserLoaderModule);
 const { require } = BrowserLoaderModule.BrowserLoader("resource://devtools/client/memory/", this);
 const { Task } = require("resource://gre/modules/Task.jsm");
-const { createFactory, createElement, render, unmountComponentAtNode } = require("devtools/client/shared/vendor/react");
+const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
+const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 const App = createFactory(require("devtools/client/memory/app"));
 const Store = require("devtools/client/memory/store");
@@ -30,12 +31,12 @@ var initialize = Task.async(function*() {
   gStore = Store();
   gApp = createElement(App, { toolbox: gToolbox, front: gFront, heapWorker: gHeapAnalysesClient });
   gProvider = createElement(Provider, { store: gStore }, gApp);
-  render(gProvider, gRoot);
+  ReactDOM.render(gProvider, gRoot);
   unsubscribe = gStore.subscribe(onStateChange);
 });
 
 var destroy = Task.async(function*() {
-  const ok = unmountComponentAtNode(gRoot);
+  const ok = ReactDOM.unmountComponentAtNode(gRoot);
   assert(ok, "Should successfully unmount the memory tool's top level React component");
 
   unsubscribe();

devtools/client/shared/vendor/REACT_UPGRADING

@@ -18,3 +18,10 @@ For production, which we do not currently have:
 
 The second build produces a non-minified React file but with all the
 sanity checks that incur a perf hit removed.
+
+You also need to copy the ReactDOM package. It requires React, so
+right now we are just manually changing the path from `react` to
+`devtools/client/shared/vendor/react`.
+
+* cp build/react-dom.js <gecko-dev>/devtools/client/shared/vendor/react-dom.js
+* (change `require('react')` at the top of the file to the right path)

devtools/client/shared/vendor/moz.build

@@ -5,6 +5,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'react-dom.js',
     'react-redux.js',
     'react.js',
     'redux.js',

devtools/client/shared/vendor/react-dom.js

@@ -0,0 +1,31 @@
+// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
+;(function(f) {
+  // CommonJS
+  if (typeof exports === "object" && typeof module !== "undefined") {
+    module.exports = f(require('devtools/client/shared/vendor/react'));
+
+  // RequireJS
+  } else if (typeof define === "function" && define.amd) {
+    define(['react'], f);
+
+  // <script>
+  } else {
+    var g
+    if (typeof window !== "undefined") {
+      g = window;
+    } else if (typeof global !== "undefined") {
+      g = global;
+    } else if (typeof self !== "undefined") {
+      g = self;
+    } else {
+      // works providing we're not in "use strict";
+      // needed for Java 8 Nashorn
+      // see https://github.com/facebook/react/issues/3037
+      g = this;
+    }
+    g.ReactDOM = f(g.React);
+  }
+
+})(function(React) {
+  return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+});