From 41b05eaf061ec5b500b63e6ce73af86154624f3a Mon Sep 17 00:00:00 2001
From: James Long <longster@gmail.com>
Date: Fri, 30 Oct 2015 10:06:52 -0400
Subject: [PATCH] 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       |  4 +--
 devtools/client/jsonview/viewer-config.js     |  3 +-
 .../test/mochitest/test_tree_01.html          |  3 +-
 .../test/mochitest/test_tree_02.html          |  3 +-
 .../test/mochitest/test_tree_03.html          |  3 +-
 .../test/mochitest/test_tree_04.html          |  3 +-
 .../test/mochitest/test_tree_05.html          |  3 +-
 .../test/mochitest/test_tree_06.html          |  3 +-
 .../test/mochitest/test_tree_07.html          |  3 +-
 .../test/mochitest/test_tree_08.html          |  3 +-
 devtools/client/memory/initializer.js         |  7 +++--
 devtools/client/shared/vendor/REACT_UPGRADING |  7 +++++
 devtools/client/shared/vendor/moz.build       |  1 +
 devtools/client/shared/vendor/react-dom.js    | 31 +++++++++++++++++++
 14 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 devtools/client/shared/vendor/react-dom.js

diff --git a/devtools/client/jsonview/json-viewer.js b/devtools/client/jsonview/json-viewer.js
index b680eb0bed98..5300db3ae370 100644
--- a/devtools/client/jsonview/json-viewer.js
+++ b/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";
diff --git a/devtools/client/jsonview/viewer-config.js b/devtools/client/jsonview/viewer-config.js
index 0869a20864e9..9b881ebddb61 100644
--- a/devtools/client/jsonview/viewer-config.js
+++ b/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"
   }
 });
 
diff --git a/devtools/client/memory/components/test/mochitest/test_tree_01.html b/devtools/client/memory/components/test/mochitest/test_tree_01.html
index 89609562c6ba..ed5312fc62bb 100644
--- a/devtools/client/memory/components/test/mochitest/test_tree_01.html
+++ b/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, {
diff --git a/devtools/client/memory/components/test/mochitest/test_tree_02.html b/devtools/client/memory/components/test/mochitest/test_tree_02.html
index f9bef591b023..b97ae1e392e7 100644
--- a/devtools/client/memory/components/test/mochitest/test_tree_02.html
+++ b/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(""))
diff --git a/devtools/client/memory/components/test/mochitest/test_tree_03.html b/devtools/client/memory/components/test/mochitest/test_tree_03.html
index e890502177d3..dda3df0d7d66 100644
--- a/devtools/client/memory/components/test/mochitest/test_tree_03.html
+++ b/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
diff --git a/devtools/client/memory/components/test/mochitest/test_tree_04.html b/devtools/client/memory/components/test/mochitest/test_tree_04.html
index 0591cfbb170f..26ac889aa11f 100644
--- a/devtools/client/memory/components/test/mochitest/test_tree_04.html
+++ b/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("")),
diff --git a/devtools/client/memory/components/test/mochitest/test_tree_05.html b/devtools/client/memory/components/test/mochitest/test_tree_05.html
index ab2add9e4195..fc0a9f0cd595 100644
--- a/devtools/client/memory/components/test/mochitest/test_tree_05.html
+++ b/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",
diff --git a/devtools/client/memory/components/test/mochitest/test_tree_06.html b/devtools/client/memory/components/test/mochitest/test_tree_06.html
index f4e172fde50c..cbc92c0747a2 100644
--- a/devtools/client/memory/components/test/mochitest/test_tree_06.html
+++ b/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(""))
diff --git a/devtools/client/memory/components/test/mochitest/test_tree_07.html b/devtools/client/memory/components/test/mochitest/test_tree_07.html
index 5a2fabc9aa69..18c7ee3794bb 100644
--- a/devtools/client/memory/components/test/mochitest/test_tree_07.html
+++ b/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) => {
diff --git a/devtools/client/memory/components/test/mochitest/test_tree_08.html b/devtools/client/memory/components/test/mochitest/test_tree_08.html
index 23f6c5022b66..9248ec38c741 100644
--- a/devtools/client/memory/components/test/mochitest/test_tree_08.html
+++ b/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);
diff --git a/devtools/client/memory/initializer.js b/devtools/client/memory/initializer.js
index 4418343aa99d..8c1d3cb051f0 100644
--- a/devtools/client/memory/initializer.js
+++ b/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();
diff --git a/devtools/client/shared/vendor/REACT_UPGRADING b/devtools/client/shared/vendor/REACT_UPGRADING
index b9038a4da12a..b100d4e92a9d 100644
--- a/devtools/client/shared/vendor/REACT_UPGRADING
+++ b/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)
diff --git a/devtools/client/shared/vendor/moz.build b/devtools/client/shared/vendor/moz.build
index b95da467b25d..89718e24b322 100644
--- a/devtools/client/shared/vendor/moz.build
+++ b/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',
diff --git a/devtools/client/shared/vendor/react-dom.js b/devtools/client/shared/vendor/react-dom.js
new file mode 100644
index 000000000000..cd1acd8e53d4
--- /dev/null
+++ b/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;
+});