{"files":[{"status":"M","path":"src\/devtools\/cache.js"},{"status":"M","path":"src\/devtools\/store.js"},{"status":"M","path":"src\/devtools\/views\/Components\/InspectedElementContext.js"}],"commit":{"revision":"7262a30cf38e6980e0b3f2245cc65f2b9510c071","authorEmail":"bvaughn@fb.com","authorName":"Brian Vaughn","authoredAt":"2019-04-23T18:04:25-07:00","shortRevision":"7262a30cf3","subject":"Reverted optimization to avoid re-sending inspected fiber unless it committed"},"parents":["0aa7d2f8006888557e23b3e003eb3889747db19f"],"body":"","patch":"diff --git a\/src\/devtools\/cache.js b\/src\/devtools\/cache.js\nindex 7aec26f21e..1e12798030 100644\n--- a\/src\/devtools\/cache.js\n+++ b\/src\/devtools\/cache.js\n@@ -1,7 +1,6 @@\n \/\/ @flow\n \n import React, { createContext } from 'react';\n-import LRU from 'lru-cache';\n \n \/\/ Cache implementation was forked from the React repo:\n \/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-cache\/src\/ReactCache.js\n@@ -68,18 +67,23 @@ function readContext(Context, observedBits) {\n const CacheContext = createContext(null);\n \n type Config = {\n- useLRU?: boolean,\n+ useWeakMap?: boolean,\n };\n \n-const entries: Map, Map | LRU> = new Map();\n+const entries: Map<\n+ Resource,\n+ Map | WeakMap\n+> = new Map();\n const resourceConfigs: Map, Config> = new Map();\n \n-function getEntriesForResource(resource: any): Map | LRU {\n+function getEntriesForResource(\n+ resource: any\n+): Map | WeakMap {\n let entriesForResource = ((entries.get(resource): any): Map);\n if (entriesForResource === undefined) {\n const config = resourceConfigs.get(resource);\n entriesForResource =\n- config !== undefined && config.useLRU ? new LRU({ max: 10 }) : new Map();\n+ config !== undefined && config.useWeakMap ? new WeakMap() : new Map();\n entries.set(resource, entriesForResource);\n }\n return entriesForResource;\n@@ -122,7 +126,7 @@ function accessResult(\n }\n }\n \n-export function createResource(\n+export function createResource(\n fetch: Input => Thenable,\n hashInput: Input => Key,\n config?: Config = {}\n@@ -134,11 +138,7 @@ export function createResource(\n \n invalidate(key: Key): void {\n const entriesForResource = getEntriesForResource(resource);\n- if (entriesForResource instanceof Map) {\n- entriesForResource.delete(key);\n- } else {\n- entriesForResource.set(key, undefined);\n- }\n+ entriesForResource.delete(key);\n },\n \n read(input: Input): Value {\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 9b67920c6c..63d4ce543b 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -68,8 +68,9 @@ export default class Store extends EventEmitter {\n \/\/ At least one of the injected renderers contains (DEV only) owner metadata.\n _hasOwnerMetadata: boolean = false;\n \n- \/\/ Map of ID to Element.\n- \/\/ Elements are mutable (for now) to avoid excessive cloning during tree updates.\n+ \/\/ Map of ID to (mutable) Element.\n+ \/\/ Elements are mutated to avoid excessive cloning during tree updates.\n+ \/\/ The InspectedElementContext also relies on this mutability for its WeakMap usage.\n _idToElement: Map = new Map();\n \n \/\/ The user has imported a previously exported profiling session.\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/src\/devtools\/views\/Components\/InspectedElementContext.js\nindex 6c0f2f6444..0a87518f05 100644\n--- a\/src\/devtools\/views\/Components\/InspectedElementContext.js\n+++ b\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -2,6 +2,7 @@\n \n import React, {\n createContext,\n+ useCallback,\n useContext,\n useEffect,\n useMemo,\n@@ -14,6 +15,7 @@ import { TreeStateContext } from '.\/TreeContext';\n \n import type {\n DehydratedData,\n+ Element,\n InspectedElement,\n } from 'src\/devtools\/views\/Components\/types';\n import type { Resource, Thenable } from '..\/..\/cache';\n@@ -31,10 +33,10 @@ type InProgressRequest = {|\n resolveFn: ResolveFn,\n |};\n \n-const inProgressRequests: Map = new Map();\n-const resource: Resource = createResource(\n- (id: number) => {\n- let request = inProgressRequests.get(id);\n+const inProgressRequests: WeakMap = new WeakMap();\n+const resource: Resource = createResource(\n+ (element: Element) => {\n+ let request = inProgressRequests.get(element);\n if (request != null) {\n return request.promise;\n }\n@@ -44,12 +46,12 @@ const resource: Resource = createResource(\n resolveFn = resolve;\n });\n \n- inProgressRequests.set(id, { promise, resolveFn });\n+ inProgressRequests.set(element, { promise, resolveFn });\n \n return promise;\n },\n- (id: number) => id,\n- { useLRU: true }\n+ (element: Element) => element,\n+ { useWeakMap: true }\n );\n \n type Props = {|\n@@ -60,6 +62,18 @@ function InspectedElementContextController({ children }: Props) {\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n+ const read = useCallback(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ return resource.read(element);\n+ } else {\n+ return null;\n+ }\n+ },\n+ [store]\n+ );\n+\n \/\/ It's very important that this context consumes selectedElementID and not inspectedElementID.\n \/\/ Otherwise the effect that sends the \"inspect\" message across the bridge-\n \/\/ would itself be blocked by the same render that suspends (waiting for the data).\n@@ -81,16 +95,19 @@ function InspectedElementContextController({ children }: Props) {\n state: hydrateHelper(inspectedElement.state),\n }: any): InspectedElement);\n \n- const request = inProgressRequests.get(id);\n- if (request != null) {\n- inProgressRequests.delete(id);\n- request.resolveFn(inspectedElement);\n- } else {\n- resource.write(id, inspectedElement);\n-\n- \/\/ Schedule update with React if the curently-selected element has been invalidated.\n- if (id === selectedElementID) {\n- setCount(count => count + 1);\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+ request.resolveFn(inspectedElement);\n+ } else {\n+ resource.write(element, inspectedElement);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCount(count => count + 1);\n+ }\n }\n }\n }\n@@ -98,7 +115,7 @@ function InspectedElementContextController({ children }: Props) {\n \n bridge.addListener('inspectedElement', onInspectedElement);\n return () => bridge.removeListener('inspectedElement', onInspectedElement);\n- }, [bridge, selectedElementID]);\n+ }, [bridge, selectedElementID, store]);\n \n \/\/ This effect handler polls for updates on the currently selected element.\n useEffect(() => {\n@@ -145,12 +162,10 @@ function InspectedElementContextController({ children }: Props) {\n }, [bridge, selectedElementID, store]);\n \n const value = useMemo(\n- () => ({\n- read: resource.read,\n- }),\n+ () => ({ read }),\n \/\/ Count is used to invalidate the cache and schedule an update with React.\n \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n- [count]\n+ [count, read]\n );\n \n return (\n"}

dillon1000/react

Files changed