From df3c85886e31da8adb5ee670e523edb1230cd299 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 22 Apr 2016 15:45:35 +0100 Subject: [PATCH] Stop exposing ReactComponentTreeDevtool internal tree directly --- .../devtools/ReactComponentTreeDevtool.js | 43 ++++++--- .../ReactComponentTreeDevtool-test.js | 96 ++++++++----------- 2 files changed, 73 insertions(+), 66 deletions(-) diff --git a/src/isomorphic/devtools/ReactComponentTreeDevtool.js b/src/isomorphic/devtools/ReactComponentTreeDevtool.js index fc30ffbbdb..d057086903 100644 --- a/src/isomorphic/devtools/ReactComponentTreeDevtool.js +++ b/src/isomorphic/devtools/ReactComponentTreeDevtool.js @@ -23,7 +23,10 @@ function updateTree(id, update) { return; } if (!tree[id]) { - tree[id] = {}; + tree[id] = { + parentID: null, + childIDs: [], + }; } update(tree[id]); } @@ -41,10 +44,7 @@ function purgeTree(id) { allChildIDsByContainerID[containerID] = allChildIDsByContainerID[containerID] .filter(childID => childID !== id); } - - if (childIDs) { - childIDs.forEach(purgeTree); - } + childIDs.forEach(purgeTree); } var ReactComponentTreeDevtool = { @@ -65,7 +65,7 @@ var ReactComponentTreeDevtool = { onSetChildren(id, nextChildIDs) { updateTree(id, item => { - var prevChildIDs = item.childIDs || []; + var prevChildIDs = item.childIDs; item.childIDs = nextChildIDs; prevChildIDs.forEach(prevChildID => { @@ -136,11 +136,32 @@ var ReactComponentTreeDevtool = { unmountedContainerIDs = []; }, - getTree() { - return Object.keys(tree).reduce((result, key) => { - result[key] = {...tree[key]}; - return result; - }, {}); + isComposite(id) { + return tree[id].isComposite; + }, + + getChildIDs(id) { + return tree[id].childIDs; + }, + + getDisplayName(id) { + return tree[id].displayName; + }, + + getOwnerID(id) { + return tree[id].ownerID; + }, + + getParentID(id) { + return tree[id].parentID; + }, + + getText(id) { + return tree[id].text; + }, + + getRegisteredIDs() { + return Object.keys(tree); }, }; diff --git a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js index f8f8a8c4da..c9fd70762f 100644 --- a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js +++ b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js @@ -36,38 +36,38 @@ describe('ReactComponentTreeDevtool', () => { ReactDebugTool.removeDevtool(ReactComponentTreeDevtool); }); - function explodeTree( - tree, - rootID, - includeOwner = false, - expectedParentID = null - ) { - var item = tree[rootID]; - var result = { - isComposite: item.isComposite, - displayName: item.displayName, - }; - - if (expectedParentID) { - expect(item.parentID).toBe(expectedParentID); - } - - if (item.childIDs) { - result.children = item.childIDs.map(childID => - explodeTree(tree, childID, includeOwner, rootID) - ); - } - if (item.text != null) { - result.text = item.text; - } - if (includeOwner && item.ownerID) { - result.ownerDisplayName = tree[item.ownerID].displayName; - } - return result; + function getRegisteredDisplayNames() { + return ReactComponentTreeDevtool.getRegisteredIDs() + .map(ReactComponentTreeDevtool.getDisplayName); } - function getRegisteredDisplayNames(tree) { - return Object.keys(tree).map(id => tree[id].displayName); + function getTree(rootID, includeOwner = false, expectedParentID = null) { + var result = { + isComposite: ReactComponentTreeDevtool.isComposite(rootID), + displayName: ReactComponentTreeDevtool.getDisplayName(rootID), + }; + + var parentID = ReactComponentTreeDevtool.getParentID(rootID); + if (expectedParentID) { + expect(parentID).toBe(expectedParentID); + } + + var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID); + var text = ReactComponentTreeDevtool.getText(rootID); + if (text != null) { + result.text = text; + } else { + result.children = childIDs.map(childID => + getTree(childID, includeOwner, rootID) + ); + } + + var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID); + if (includeOwner && ownerID) { + result.ownerDisplayName = ReactComponentTreeDevtool.getDisplayName(ownerID); + } + + return result; } function assertTreeMatches(pairs, includeOwner) { @@ -89,29 +89,21 @@ describe('ReactComponentTreeDevtool', () => { pairs.forEach(([element, expectedTree]) => { currentElement = element; ReactDOM.render(, node); - expect(explodeTree( - ReactComponentTreeDevtool.getTree(), - rootInstance._renderedComponent._debugID, - includeOwner - )).toEqual(expectedTree); + expect( + getTree(rootInstance._renderedComponent._debugID, includeOwner) + ).toEqual(expectedTree); }); ReactDOM.unmountComponentAtNode(node); - expect( - getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree()) - ).toEqual([]); + expect(getRegisteredDisplayNames()).toEqual([]); pairs.forEach(([element, expectedTree]) => { currentElement = element; ReactDOMServer.renderToString(); - expect(explodeTree( - ReactComponentTreeDevtool.getTree(), - rootInstance._renderedComponent._debugID, - includeOwner - )).toEqual(expectedTree); - ReactComponentTreeDevtool.purgeUnmountedContainers(); expect( - getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree()) - ).toEqual([]); + getTree(rootInstance._renderedComponent._debugID, includeOwner) + ).toEqual(expectedTree); + ReactComponentTreeDevtool.purgeUnmountedContainers(); + expect(getRegisteredDisplayNames()).toEqual([]); }); } @@ -1835,16 +1827,10 @@ describe('ReactComponentTreeDevtool', () => { it('ignores top-level wrapper', () => { var node = document.createElement('div'); ReactDOM.render(
, node); - expect( - getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree()) - ).toEqual(['div']); + expect(getRegisteredDisplayNames()).toEqual(['div']); ReactDOM.render(
, node); - expect( - getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree()) - ).toEqual(['div']); + expect(getRegisteredDisplayNames()).toEqual(['div']); ReactDOM.unmountComponentAtNode(node); - expect( - getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree()) - ).toEqual([]); + expect(getRegisteredDisplayNames()).toEqual([]); }); });