{"patch":"diff --git a\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap b\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap\nindex cbb2177c9b..28069711fd 100644\n--- a\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap\n@@ -1,20 +1,121 @@\n \/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n \n+exports[`Store owners list should drill through interleaved intermediate components: 1: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`Store owners list should drill through interleaved intermediate components: 2: components owned by 1`] = `\n+\" ▾ \n+ ▾ \n+ \n+ \"\n+`;\n+\n+exports[`Store owners list should drill through interleaved intermediate components: 3: components owned by 1`] = `\n+\" ▾ \n+ \n+ ▾ \"\n+`;\n+\n exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `\n [root]\n ▾ \n ▾ \n ▾ \n- \n+ \n `;\n \n exports[`Store owners list should drill through intermediate components: 2: components owned by 1`] = `\n \" ▾ \n ▾ \n- \"\n+ \"\n `;\n \n exports[`Store owners list should drill through intermediate components: 3: components owned by 1`] = `\n \" ▾ \n ▾ \"\n `;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 1: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ ▾ \n+ \n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 2: components owned by 1`] = `\n+\" ▾ \n+ ▾ \n+ \"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 3: update to add direct 1`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 4: components owned by 1`] = `\n+\" ▾ \n+ \n+ ▾ \n+ \"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 5: update to remove indirect 1`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 6: components owned by 1`] = `\n+\" ▾ \n+ \"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 7: update to remove both 1`] = `\n+[root]\n+ \n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 8: components owned by 1`] = `\" \"`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 1: mount (ascending) 1`] = `\n+[root]\n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 2: components owned by 1`] = `\n+\" ▾ \n+ \n+ \n+ \"\n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 3: update (descending) 1`] = `\n+[root]\n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 4: components owned by 1`] = `\n+\" ▾ \n+ \n+ \n+ \"\n+`;\ndiff --git a\/src\/__tests__\/storeOwners-test.js b\/src\/__tests__\/storeOwners-test.js\nindex 7e49bc803f..f4853b2fe0 100644\n--- a\/src\/__tests__\/storeOwners-test.js\n+++ b\/src\/__tests__\/storeOwners-test.js\n@@ -27,7 +27,9 @@ describe('Store owners list', () => {\n it('should drill through intermediate components', () => {\n const Root = () => (\n \n- \n+

\n+ \n+ <\/div>\n <\/Intermediate>\n );\n const Wrapper = ({ children }) => children;\n@@ -47,4 +49,123 @@ describe('Store owners list', () => {\n printOwnersList(store.getOwnersListForElement(intermediateID))\n ).toMatchSnapshot('3: components owned by ');\n });\n+\n+ it('should drill through interleaved intermediate components', () => {\n+ const Root = () => [\n+ \n+ \n+ <\/Intermediate>,\n+ ,\n+ ];\n+ const Wrapper = ({ children }) => children;\n+ const Leaf = () =>

Leaf<\/div>;\n+ const Intermediate = ({ children }) => [\n+ ,\n+ {children}<\/Wrapper>,\n+ ];\n+\n+ act(() => ReactDOM.render(, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by ');\n+\n+ const intermediateID = store.getElementIDAtIndex(1);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(intermediateID))\n+ ).toMatchSnapshot('3: components owned by ');\n+ });\n+\n+ it('should show the proper owners list order and contents after insertions and deletions', () => {\n+ const Root = ({ includeDirect, includeIndirect }) => (\n+

\n+ {includeDirect ? : null}\n+ {includeIndirect ? (\n+ \n+ \n+ <\/Intermediate>\n+ ) : null}\n+ <\/div>\n+ );\n+ const Wrapper = ({ children }) => children;\n+ const Leaf = () =>

Leaf<\/div>;\n+ const Intermediate = ({ children }) => {children}<\/Wrapper>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ ,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by ');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ ,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('3: update to add direct');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('4: components owned by ');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ ,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('5: update to remove indirect');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('6: components owned by ');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ ,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('7: update to remove both');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('8: components owned by ');\n+ });\n+\n+ it('should show the proper owners list ordering after reordered children', () => {\n+ const Root = ({ ascending }) =>\n+ ascending\n+ ? [, , ]\n+ : [, , ];\n+ const Leaf = () =>

Leaf<\/div>;\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(, container));\n+ expect(store).toMatchSnapshot('1: mount (ascending)');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by ');\n+\n+ act(() => ReactDOM.render(, container));\n+ expect(store).toMatchSnapshot('3: update (descending)');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('4: components owned by ');\n+ });\n });\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 16a447c98c..dcb894160a 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -81,6 +81,10 @@ export default class Store extends EventEmitter {\n \/\/ When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.\n _isProfiling: boolean = false;\n \n+ \/\/ Map of element (id) to the set of elements (ids) it owns.\n+ \/\/ This map enables getOwnersListForElement() to avoid traversing the entire tree.\n+ _ownersMap: Map> = new Map();\n+\n \/\/ Suspense cache for reading profiling data.\n _profilingCache: ProfilingCache;\n \n@@ -406,10 +410,65 @@ export default class Store extends EventEmitter {\n return index;\n }\n \n- getOwnersListForElement(id: number): Array {\n+ getOwnersListForElement(ownerID: number): Array {\n const list = [];\n+ let element = this._idToElement.get(ownerID);\n+ if (element != null) {\n+ list.push({\n+ ...element,\n+ depth: 0,\n+ });\n \n- this._populateOwnersList(id, id, 0, list);\n+ const unsortedIDs = this._ownersMap.get(ownerID);\n+ if (unsortedIDs !== undefined) {\n+ const depthMap: Map = new Map([[ownerID, 0]]);\n+\n+ \/\/ Items in a set are ordered based on insertion.\n+ \/\/ This does not correlate with their order in the tree.\n+ \/\/ So first we need to order them.\n+ \/\/ I wish we could avoid this sorting operation; we could sort at insertion time,\n+ \/\/ but then we'd have to pay sorting costs even if the owners list was never used.\n+ \/\/ Seems better to defer the cost, since the set of ids is probably pretty small.\n+ const sortedIDs = Array.from(unsortedIDs).sort(\n+ (idA, idB) =>\n+ ((this.getIndexOfElementID(idA): any): number) -\n+ ((this.getIndexOfElementID(idB): any): number)\n+ );\n+\n+ \/\/ Next we need to determine the appropriate depth for each element in the list.\n+ \/\/ The depth in the list may not correspond to the depth in the tree,\n+ \/\/ because the list has been filtered to remove intermediate components.\n+ \/\/ Perhaps the easiest way to do this is to walk up the tree until we reach either:\n+ \/\/ (1) another node that's already in the tree, or (2) the root (owner)\n+ \/\/ at which point, our depth is just the depth of that node plus one.\n+ sortedIDs.forEach(id => {\n+ const element = this._idToElement.get(id);\n+ if (element != null) {\n+ let parentID = element.parentID;\n+\n+ let depth = 0;\n+ while (parentID > 0) {\n+ if (parentID === ownerID || unsortedIDs.has(parentID)) {\n+ depth = depthMap.get(parentID) + 1;\n+ depthMap.set(id, depth);\n+ break;\n+ }\n+ const parent = this._idToElement.get(parentID);\n+ if (parent == null) {\n+ break;\n+ }\n+ parentID = parent.parentID;\n+ }\n+\n+ if (depth === 0) {\n+ throw Error('Invalid owners list');\n+ }\n+\n+ list.push({ ...element, depth });\n+ }\n+ });\n+ }\n+ }\n \n return list;\n }\n@@ -561,32 +620,6 @@ export default class Store extends EventEmitter {\n THROTTLE_CAPTURE_SCREENSHOT_DURATION\n );\n \n- _populateOwnersList(\n- id: number,\n- ownerID: number,\n- depth: number,\n- list: Array\n- ) {\n- const element = this._idToElement.get(id);\n- if (element != null) {\n- const isInList = id === ownerID || element.ownerID === ownerID;\n- if (isInList) {\n- list.push({\n- ...element,\n- depth: depth,\n- });\n- }\n- element.children.forEach(childID =>\n- this._populateOwnersList(\n- childID,\n- ownerID,\n- isInList ? depth + 1 : depth,\n- list\n- )\n- );\n- }\n- }\n-\n _takeProfilingSnapshotRecursive = (id: number) => {\n const element = this.getElementByID(id);\n if (element !== null) {\n@@ -779,6 +812,15 @@ export default class Store extends EventEmitter {\n this._idToElement.set(id, element);\n addedElementIDs.push(id);\n this._adjustParentTreeWeight(parentElement, 1);\n+\n+ if (ownerID > 0) {\n+ let set = this._ownersMap.get(ownerID);\n+ if (set === undefined) {\n+ set = new Set();\n+ this._ownersMap.set(ownerID, set);\n+ }\n+ set.add(id);\n+ }\n }\n break;\n }\n@@ -798,13 +840,13 @@ export default class Store extends EventEmitter {\n i = i + 1;\n \n const element = ((this._idToElement.get(id): any): Element);\n- if (element.children.length > 0) {\n+ const { children, ownerID, parentID, weight } = element;\n+ if (children.length > 0) {\n throw new Error(`Node ${id} was removed before its children.`);\n }\n \n this._idToElement.delete(id);\n \n- const parentID = element.parentID;\n let parentElement = null;\n if (parentID === 0) {\n if (__DEBUG__) {\n@@ -830,8 +872,16 @@ export default class Store extends EventEmitter {\n parentElement.children.splice(index, 1);\n }\n \n- this._adjustParentTreeWeight(parentElement, -element.weight);\n+ this._adjustParentTreeWeight(parentElement, -weight);\n removedElementIDs.set(id, parentID);\n+\n+ this._ownersMap.delete(id);\n+ if (ownerID > 0) {\n+ const set = this._ownersMap.get(ownerID);\n+ if (set !== undefined) {\n+ set.delete(id);\n+ }\n+ }\n }\n break;\n }\n","body":"","files":[{"path":"src\/__tests__\/__snapshots__\/storeOwners-test.js.snap","status":"M"},{"path":"src\/__tests__\/storeOwners-test.js","status":"M"},{"path":"src\/devtools\/store.js","status":"M"}],"parents":["15eacae02c1d526bdc54cbff6e32d068fd483257"],"commit":{"shortRevision":"09029acf00","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2019-04-25T12:16:13-07:00","subject":"Refactored owners list to use cached metadata (and added more tests)","revision":"09029acf009aeecdd10bbaeddfe3463568d23c0d"}}

dillon1000/react

Files changed