{"body":"","files":[{"status":"M","path":"src\/devtools\/store.js"},{"status":"M","path":"src\/devtools\/types.js"},{"status":"M","path":"src\/devtools\/views\/TreeContext.js"}],"parents":["038018650169ecbe2962898746ea39ce31f73847"],"patch":"diff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 4480a17ff9..42b3820e4d 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -28,14 +28,18 @@ const debug = (methodName, ...args) => {\n * ContextProviders can subscribe to the Store for specific things they want to provide.\n *\/\n export default class Store extends EventEmitter {\n- \/\/ TODO Should items in this map be read-only\/immutable for easier props comparison?\n- \/\/ We currently mutate \"children\" and \"weight\" props.\n+ \/\/ Map of ID to Element.\n+ \/\/ Elements are read-only so they wokr well with memoization.\n _idToElement: Map = new Map();\n \n \/\/ Total number of visible elements (within all roots).\n \/\/ Used for windowing purposes.\n _numElements: number = 0;\n \n+ \/\/ Incremented each time the store is mutated.\n+ \/\/ This enables a passive effect to detect a mutation between render and commit phase.\n+ _revision: number = 0;\n+\n \/\/ This Array must be treated as immutable!\n \/\/ Passive effects will check it for changes between render and mount.\n _roots: $ReadOnlyArray = [];\n@@ -55,6 +59,10 @@ export default class Store extends EventEmitter {\n return this._numElements;\n }\n \n+ get revision(): number {\n+ return this._revision;\n+ }\n+\n get roots(): $ReadOnlyArray {\n return this._roots;\n }\n@@ -275,7 +283,11 @@ export default class Store extends EventEmitter {\n \/\/ Maybe in the future we'll revisit this.\n } else {\n parentElement = ((this._idToElement.get(parentID): any): Element);\n- parentElement.children = parentElement.children.concat(id);\n+\n+ this._idToElement.set(parentID, {\n+ ...parentElement,\n+ children: parentElement.children.concat(id),\n+ });\n \n const element: Element = {\n children: [],\n@@ -319,9 +331,12 @@ export default class Store extends EventEmitter {\n this._roots = this._roots.filter(rootID => rootID !== id);\n this._rootIDToRendererID.delete(id);\n } else {\n- parentElement.children = parentElement.children.filter(\n- childID => childID !== id\n- );\n+ this._idToElement.set(parentID, {\n+ ...parentElement,\n+ children: parentElement.children.filter(\n+ childID => childID !== id\n+ ),\n+ });\n }\n \n \/\/ Track removed items so search results can be updated\n@@ -343,7 +358,6 @@ export default class Store extends EventEmitter {\n debug('Re-order', `fiber ${id} children ${children.join(',')}`);\n \n element = ((this._idToElement.get(id): any): Element);\n- element.children = Array.from(children);\n \n const prevWeight = element.weight;\n let childWeight = 0;\n@@ -353,7 +367,12 @@ export default class Store extends EventEmitter {\n childWeight += child.weight;\n });\n \n- element.weight = childWeight + 1;\n+ this._idToElement.set(id, {\n+ ...element,\n+ children: Array.from(children),\n+ weight: childWeight + 1,\n+ });\n+\n weightDelta = childWeight + 1 - prevWeight;\n break;\n default:\n@@ -370,6 +389,8 @@ export default class Store extends EventEmitter {\n }\n }\n \n+ this._revision++;\n+\n if (haveRootsChanged) {\n this.emit('roots');\n }\ndiff --git a\/src\/devtools\/types.js b\/src\/devtools\/types.js\nindex 59cddbfd10..53517834dc 100644\n--- a\/src\/devtools\/types.js\n+++ b\/src\/devtools\/types.js\n@@ -18,7 +18,7 @@ export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n \/\/ Some of its information (e.g. id, type, displayName) come from the backend.\n \/\/ Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.\n \/\/ Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.\n-export type Element = {|\n+export type Element = $ReadOnly<{|\n id: number,\n parentID: number,\n children: Array,\n@@ -37,7 +37,7 @@ export type Element = {|\n \/\/ This property is used to quickly determine the total number of Elements,\n \/\/ and the Element at any given index (for windowing purposes).\n weight: number,\n-|};\n+|}>;\n \n export type Owner = {|\n displayName: string,\ndiff --git a\/src\/devtools\/views\/TreeContext.js b\/src\/devtools\/views\/TreeContext.js\nindex 2868fb728f..bc9232552c 100644\n--- a\/src\/devtools\/views\/TreeContext.js\n+++ b\/src\/devtools\/views\/TreeContext.js\n@@ -21,7 +21,7 @@ import React, {\n createContext,\n useCallback,\n useContext,\n- useLayoutEffect,\n+ useEffect,\n useMemo,\n useReducer,\n } from 'react';\n@@ -112,11 +112,11 @@ function reduceTreeState(store: Store, state: State, action: Action): State {\n numElements = store.numElements;\n \n \/\/ If the currently-selected Element has been removed from the tree, update selection state.\n- if (selectedElementID !== null) {\n- const removedElementIDs = ((payload: any): Array)[1];\n- if (removedElementIDs.includes(((selectedElementID: any): number))) {\n- selectedElementIndex = null;\n- }\n+ if (\n+ selectedElementID !== null &&\n+ store.getElementByID(selectedElementID) === null\n+ ) {\n+ selectedElementIndex = null;\n }\n break;\n case 'SELECT_ELEMENT_AT_INDEX':\n@@ -330,12 +330,9 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n switch (type) {\n case 'HANDLE_STORE_MUTATION':\n if (ownerStack.length > 0) {\n- \/\/ eslint-disable-next-line no-unused-vars\n- const [_, removedElementIDs] = ((payload: any): Array);\n-\n let indexOfRemovedItem = -1;\n for (let i = 0; i < ownerStack.length; i++) {\n- if (removedElementIDs.includes(ownerStack[i])) {\n+ if (store.getElementByID(ownerStack[i]) === null) {\n indexOfRemovedItem = i;\n break;\n }\n@@ -467,6 +464,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n \/\/ TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.\n function TreeContextController({ children }: {| children: React$Node |}) {\n const store = useContext(StoreContext);\n+ const initialRevision = useMemo(() => store.revision, [store]);\n \n \/\/ This reducer is created inline because it needs access to the Store.\n \/\/ The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,\n@@ -592,7 +590,7 @@ function TreeContextController({ children }: {| children: React$Node |}) {\n );\n \n \/\/ Mutations to the underlying tree may impact this context (e.g. search results, selection state).\n- useLayoutEffect(() => {\n+ useEffect(() => {\n const handleStoreMutated = ([\n addedElementIDs,\n removedElementIDs,\n@@ -603,13 +601,21 @@ function TreeContextController({ children }: {| children: React$Node |}) {\n });\n };\n \n- \/\/ TODO Even though we're using layout effect, concurrent rendering may cause us to miss a mutation.\n- \/\/ Should the store expose some sort of version number that we could check after mounting?\n+ \/\/ Since this is a passive effect, the tree may have been mutated before our initial subscription.\n+ if (store.revision !== initialRevision) {\n+ \/\/ At the moment, we can treat this as a mutation.\n+ \/\/ We don't know which Elements were newly added\/removed, but that should be okay in this case.\n+ \/\/ It would only impact the search state, which is unlikely to exist yet at this point.\n+ dispatch({\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [new Uint32Array(0), new Uint32Array(0)],\n+ });\n+ }\n \n store.addListener('mutated', handleStoreMutated);\n \n return () => store.removeListener('mutated', handleStoreMutated);\n- }, [state, store]);\n+ }, [store]);\n \n return {children}<\/TreeContext.Provider>;\n }\n","commit":{"shortRevision":"41514d67f0","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","subject":"Small refinements to Store: read-only Elements in map, added revision to guard against tearing","authoredAt":"2019-02-08T15:37:52-05:00","revision":"41514d67f0be930d0aefe4b1277f3b7579358e6a"}}

dillon1000/react

Files changed