diff --git a/src/backend/agent.js b/src/backend/agent.js index 2baf636fc9..4b8873d475 100644 --- a/src/backend/agent.js +++ b/src/backend/agent.js @@ -141,7 +141,7 @@ export default class Agent extends EventEmitter { const renderer = ((this._rendererInterfaces[ (rendererID: any) ]: any): RendererInterface); - return renderer.getInternalIDFromNative(node, true); + return renderer.getFiberIDForNative(node, true); } catch (e) {} } return null; @@ -186,7 +186,9 @@ export default class Agent extends EventEmitter { let nodes: ?Array = null; if (renderer !== null) { - nodes = ((renderer.getNativeFromInternal(id): any): ?Array); + nodes = ((renderer.findNativeNodesForFiberID( + id + ): any): ?Array); } if (nodes != null && nodes[0] != null) { diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js index ece93c7bbb..d8318a9304 100644 --- a/src/backend/legacy/renderer.js +++ b/src/backend/legacy/renderer.js @@ -25,8 +25,7 @@ import { import type { DevToolsHook, - GetInternalIDFromNative, - GetNativeFromInternal, + GetFiberIDForNative, NativeType, PathFrame, PathMatch, @@ -87,38 +86,36 @@ export function attach( return null; } - let getInternalIDFromNative: GetInternalIDFromNative = ((null: any): GetInternalIDFromNative); - let getNativeFromInternal: ( - id: number - ) => ?NativeType = ((null: any): GetNativeFromInternal); + let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative); + let findNativeNodeForInternalID: (id: number) => ?NativeType; // React Native if (renderer.Mount.findNodeHandle && renderer.Mount.nativeTagToRootNodeID) { - getInternalIDFromNative = (nativeTag, findNearestUnfilteredAncestor) => { + getInternalIDForNative = (nativeTag, findNearestUnfilteredAncestor) => { const internalInstance = renderer.Mount.nativeTagToRootNodeID(nativeTag); return findNearestAncestorInTree(internalInstance); }; - getNativeFromInternal = (id: number) => { + findNativeNodeForInternalID = (id: number) => { const internalInstance = idToInternalInstanceMap.get(id); return renderer.Mount.findNodeHandle(internalInstance); }; // React DOM 15+ } else if (renderer.ComponentTree) { - getInternalIDFromNative = (node, findNearestUnfilteredAncestor) => { + getInternalIDForNative = (node, findNearestUnfilteredAncestor) => { const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode( node ); return findNearestAncestorInTree(internalInstance); }; - getNativeFromInternal = (id: number) => { + findNativeNodeForInternalID = (id: number) => { const internalInstance = idToInternalInstanceMap.get(id); return renderer.ComponentTree.getNodeFromInstance(internalInstance); }; // React DOM } else if (renderer.Mount.getID && renderer.Mount.getNode) { - getInternalIDFromNative = (node, findNearestUnfilteredAncestor) => { + getInternalIDForNative = (node, findNearestUnfilteredAncestor) => { let id = renderer.Mount.getID(node); while (node && node.parentNode && !id) { node = node.parentNode; @@ -127,7 +124,7 @@ export function attach( return id; }; - getNativeFromInternal = (id: number) => { + findNativeNodeForInternalID = (id: number) => { try { const internalInstance = idToInternalInstanceMap.get(id); if (internalInstance != null) { @@ -580,7 +577,7 @@ export function attach( if (result.context !== null) { console.log('State:', result.context); } - const nativeNode = getNativeFromInternal(id); + const nativeNode = findNativeNodeForInternalID(id); if (nativeNode !== null) { console.log('Node:', nativeNode); } @@ -807,8 +804,11 @@ export function attach( cleanup, flushInitialOperations, getBestMatchForTrackedPath, - getInternalIDFromNative, - getNativeFromInternal, + getFiberIDForNative: getInternalIDForNative, + findNativeNodesForFiberID: (id: number) => { + const nativeNode = findNativeNodeForInternalID(id); + return nativeNode == null ? null : [nativeNode]; + }, getOwnersList, getPathForElement, getProfilingData, diff --git a/src/backend/renderer.js b/src/backend/renderer.js index 2f044290db..70e5ecd7ce 100644 --- a/src/backend/renderer.js +++ b/src/backend/renderer.js @@ -724,7 +724,7 @@ export function attach( // Identify which renderer this update is coming from. // This enables roots to be mapped to renderers, - // Which in turn enables fiber properations, states, and hooks to be inspected. + // Which in turn enables fiber props, states, and hooks to be inspected. let i = 0; operations[i++] = rendererID; operations[i++] = currentRootID; // Use this ID in case the root was unmounted! @@ -1435,7 +1435,7 @@ export function attach( return fibers; } - function getNativeFromInternal(id: number) { + function findNativeNodesForFiberID(id: number) { try { let fiber = findCurrentFiberUsingSlowPathById(id); if (fiber === null) { @@ -1460,7 +1460,7 @@ export function attach( } } - function getInternalIDFromNative( + function getFiberIDForNative( hostInstance, findNearestUnfilteredAncestor = false ) { @@ -1672,7 +1672,7 @@ export function attach( return; } - const { memoizedProps, stateNode, tag, type } = fiber; + const { elementType, memoizedProps, stateNode, tag, type } = fiber; switch (tag) { case ClassComponent: @@ -1692,6 +1692,16 @@ export function attach( type: type.render, }; break; + case MemoComponent: + case SimpleMemoComponent: + global.$r = { + props: memoizedProps, + type: + elementType != null && elementType.type != null + ? elementType.type + : type, + }; + break; default: global.$r = null; break; @@ -1705,19 +1715,20 @@ export function attach( return; } - switch (fiber.tag) { + const { elementType, tag, type } = fiber; + + switch (tag) { case ClassComponent: case IncompleteClassComponent: case IndeterminateComponent: case FunctionComponent: - global.$type = fiber.type; + global.$type = type; break; case ForwardRef: - global.$type = fiber.type.render; + global.$type = type.render; break; case MemoComponent: case SimpleMemoComponent: - const { elementType, type } = fiber; global.$type = elementType != null && elementType.type != null ? elementType.type @@ -1965,7 +1976,7 @@ export function attach( if (result.hooks !== null) { console.log('Hooks:', result.hooks); } - const nativeNodes = getNativeFromInternal(id); + const nativeNodes = findNativeNodesForFiberID(id); if (nativeNodes !== null) { console.log('Nodes:', nativeNodes); } @@ -2455,8 +2466,8 @@ export function attach( cleanup, flushInitialOperations, getBestMatchForTrackedPath, - getInternalIDFromNative, - getNativeFromInternal, + getFiberIDForNative, + findNativeNodesForFiberID, getOwnersList, getPathForElement, getProfilingData, diff --git a/src/backend/types.js b/src/backend/types.js index 12204bf36e..68672ad6e8 100644 --- a/src/backend/types.js +++ b/src/backend/types.js @@ -88,11 +88,11 @@ export type RendererID = number; type Dispatcher = any; -export type GetInternalIDFromNative = ( +export type GetFiberIDForNative = ( component: NativeType, findNearestUnfilteredAncestor?: boolean ) => number | null; -export type GetNativeFromInternal = (id: number) => ?NativeType; +export type FindNativeNodesForFiberID = (id: number) => ?Array; export type ReactRenderer = { findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber, @@ -164,10 +164,10 @@ export type PathMatch = {| export type RendererInterface = { cleanup: () => void, + findNativeNodesForFiberID: FindNativeNodesForFiberID, flushInitialOperations: () => void, getBestMatchForTrackedPath: () => PathMatch | null, - getInternalIDFromNative: GetInternalIDFromNative, - getNativeFromInternal: GetNativeFromInternal, + getFiberIDForNative: GetFiberIDForNative, getProfilingData(): ProfilingDataBackend, getOwnersList: (id: number) => Array | null, getPathForElement: (id: number) => Array | null,