wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
James Long 2015-10-30 10:06:52 -04:00
parent f7b1f5ac30
commit e5b3a9d373
14 changed files with 63 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
devtools/client/jsonview/json-viewer.js
View File

@ -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";

3
devtools/client/jsonview/viewer-config.js
View File

@ -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"
}
});

3
devtools/client/memory/components/test/mochitest/test_tree_01.html
View File

@ -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, {

3
devtools/client/memory/components/test/mochitest/test_tree_02.html
View File

@ -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(""))

3
devtools/client/memory/components/test/mochitest/test_tree_03.html
View File

@ -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

3
devtools/client/memory/components/test/mochitest/test_tree_04.html
View File

@ -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("")),

3
devtools/client/memory/components/test/mochitest/test_tree_05.html
View File

@ -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",

3
devtools/client/memory/components/test/mochitest/test_tree_06.html
View File

@ -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(""))

3
devtools/client/memory/components/test/mochitest/test_tree_07.html
View File

@ -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) => {

3
devtools/client/memory/components/test/mochitest/test_tree_08.html
View File

@ -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);

7
devtools/client/memory/initializer.js
View File

@ -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();

7
devtools/client/shared/vendor/REACT_UPGRADING vendored
View File

@ -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)

1
devtools/client/shared/vendor/moz.build vendored
View File

@ -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',

31
devtools/client/shared/vendor/react-dom.js vendored Normal file
View File

@ -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;
});