Added and view-source support for Memo components
Brian Vaughn committed
May 26, 2019 at 10:33 UTC
af47c39dbbf195442e9b654e8de0ebadf4102316
3 files changed
+53
-30
src/backend/agent.js
+4
-2
@@ -141,7 +141,7 @@ export default class Agent extends EventEmitter {
141
const renderer = ((this._rendererInterfaces[
142
(rendererID: any)
143
]: any): RendererInterface);
144
- return renderer.getFiberIDFromNative(node, true);
144
+ return renderer.getFiberIDForNative(node, true);
145
} catch (e) {}
146
}
147
return null;
@@ -186,7 +186,9 @@ export default class Agent extends EventEmitter {
186
187
let nodes: ?Array<HTMLElement> = null;
188
if (renderer !== null) {
189
- nodes = ((renderer.findNativeByFiberID(id): any): ?Array<HTMLElement>);
189
+ nodes = ((renderer.findNativeNodesForFiberID(
190
+ id
191
+ ): any): ?Array<HTMLElement>);
192
}
193
194
if (nodes != null && nodes[0] != null) {
src/backend/renderer.js
+47
-26
@@ -708,7 +708,7 @@ export function attach(
708
pendingSimulatedUnmountedIDs.length +
709
(pendingUnmountedRootID === null ? 0 : 1);
710
711
- const ops = new Uint32Array(
711
+ const operations = new Uint32Array(
712
// Identify which renderer this update is coming from.
713
2 + // [rendererID, rootFiberID]
714
// How big is the string table?
@@ -726,44 +726,44 @@ export function attach(
726
// This enables roots to be mapped to renderers,
727
// Which in turn enables fiber props, states, and hooks to be inspected.
728
let i = 0;
729
- ops[i++] = rendererID;
730
- ops[i++] = currentRootID; // Use this ID in case the root was unmounted!
729
+ operations[i++] = rendererID;
730
+ operations[i++] = currentRootID; // Use this ID in case the root was unmounted!
731
732
// Now fill in the string table.
733
// [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]
734
- ops[i++] = pendingStringTableLength;
734
+ operations[i++] = pendingStringTableLength;
735
pendingStringTable.forEach((value, key) => {
736
- ops[i++] = key.length;
737
- ops.set(utfEncodeString(key), i);
736
+ operations[i++] = key.length;
737
+ operations.set(utfEncodeString(key), i);
738
i += key.length;
739
});
740
741
if (numUnmountIDs > 0) {
742
// All unmounts except roots are batched in a single message.
743
- ops[i++] = TREE_OPERATION_REMOVE;
743
+ operations[i++] = TREE_OPERATION_REMOVE;
744
// The first number is how many unmounted IDs we're gonna send.
745
- ops[i++] = numUnmountIDs;
745
+ operations[i++] = numUnmountIDs;
746
// Fill in the real unmounts in the reverse order.
747
// They were inserted parents-first by React, but we want children-first.
748
// So we traverse our array backwards.
749
for (let j = pendingRealUnmountedIDs.length - 1; j >= 0; j--) {
750
- ops[i++] = pendingRealUnmountedIDs[j];
750
+ operations[i++] = pendingRealUnmountedIDs[j];
751
}
752
// Fill in the simulated unmounts (hidden Suspense subtrees) in their order.
753
// (We want children to go before parents.)
754
// They go *after* the real unmounts because we know for sure they won't be
755
// children of already pushed "real" IDs. If they were, we wouldn't be able
756
// to discover them during the traversal, as they would have been deleted.
757
- ops.set(pendingSimulatedUnmountedIDs, i);
757
+ operations.set(pendingSimulatedUnmountedIDs, i);
758
i += pendingSimulatedUnmountedIDs.length;
759
// The root ID should always be unmounted last.
760
if (pendingUnmountedRootID !== null) {
761
- ops[i] = pendingUnmountedRootID;
761
+ operations[i] = pendingUnmountedRootID;
762
i++;
763
}
764
}
765
// Fill in the rest of the operations.
766
- ops.set(pendingOperations, i);
766
+ operations.set(pendingOperations, i);
767
768
// Let the frontend know about tree operations.
769
// The first value in this array will identify which root it corresponds to,
@@ -772,10 +772,10 @@ export function attach(
772
// Until the frontend has been connected, store the tree operations.
773
// This will let us avoid walking the tree later when the frontend connects,
774
// and it enables the Profiler's reload-and-profile functionality to work as well.
775
- pendingOperationsQueue.push(ops);
775
+ pendingOperationsQueue.push(operations);
776
} else {
777
// If we've already connected to the frontend, just pass the operations through.
778
- hook.emit('operations', ops);
778
+ hook.emit('operations', operations);
779
}
780
781
pendingOperations.length = 0;
@@ -1279,8 +1279,8 @@ export function attach(
1279
) {
1280
// We may have already queued up some operations before the frontend connected
1281
// If so, let the frontend know about them.
1282
- localPendingOperationsQueue.forEach(ops => {
1283
- hook.emit('operations', ops);
1282
+ localPendingOperationsQueue.forEach(operations => {
1283
+ hook.emit('operations', operations);
1284
});
1285
} else {
1286
// Before the traversals, remember to start tracking
@@ -1435,7 +1435,7 @@ export function attach(
1435
return fibers;
1436
}
1437
1438
- function findNativeByFiberID(id: number) {
1438
+ function findNativeNodesForFiberID(id: number) {
1439
try {
1440
let fiber = findCurrentFiberUsingSlowPathById(id);
1441
if (fiber === null) {
@@ -1460,7 +1460,7 @@ export function attach(
1460
}
1461
}
1462
1463
- function getFiberIDFromNative(
1463
+ function getFiberIDForNative(
1464
hostInstance,
1465
findNearestUnfilteredAncestor = false
1466
) {
@@ -1672,7 +1672,7 @@ export function attach(
1672
return;
1673
}
1674
1675
- const { memoizedProps, stateNode, tag, type } = fiber;
1675
+ const { elementType, memoizedProps, stateNode, tag, type } = fiber;
1676
1677
switch (tag) {
1678
case ClassComponent:
@@ -1692,6 +1692,16 @@ export function attach(
1692
type: type.render,
1693
};
1694
break;
1695
+ case MemoComponent:
1696
+ case SimpleMemoComponent:
1697
+ global.$r = {
1698
+ props: memoizedProps,
1699
+ type:
1700
+ elementType != null && elementType.type != null
1701
+ ? elementType.type
1702
+ : type,
1703
+ };
1704
+ break;
1705
default:
1706
global.$r = null;
1707
break;
@@ -1705,15 +1715,24 @@ export function attach(
1715
return;
1716
}
1717
1708
- switch (fiber.tag) {
1718
+ const { elementType, tag, type } = fiber;
1719
+
1720
+ switch (tag) {
1721
case ClassComponent:
1722
case IncompleteClassComponent:
1723
case IndeterminateComponent:
1724
case FunctionComponent:
1713
- global.$type = fiber.type;
1725
+ global.$type = type;
1726
break;
1727
case ForwardRef:
1716
- global.$type = fiber.type.render;
1728
+ global.$type = type.render;
1729
+ break;
1730
+ case MemoComponent:
1731
+ case SimpleMemoComponent:
1732
+ global.$type =
1733
+ elementType != null && elementType.type != null
1734
+ ? elementType.type
1735
+ : type;
1736
break;
1737
default:
1738
global.$type = null;
@@ -1781,7 +1800,9 @@ export function attach(
1800
tag === FunctionComponent ||
1801
tag === IncompleteClassComponent ||
1802
tag === IndeterminateComponent ||
1784
- tag === ForwardRef
1803
+ tag === MemoComponent ||
1804
+ tag === ForwardRef ||
1805
+ tag === SimpleMemoComponent
1806
) {
1807
canViewSource = true;
1808
if (stateNode && stateNode.context != null) {
@@ -1955,7 +1976,7 @@ export function attach(
1976
if (result.hooks !== null) {
1977
console.log('Hooks:', result.hooks);
1978
}
1958
- const nativeNodes = findNativeByFiberID(id);
1979
+ const nativeNodes = findNativeNodesForFiberID(id);
1980
if (nativeNodes !== null) {
1981
console.log('Nodes:', nativeNodes);
1982
}
@@ -2445,8 +2466,8 @@ export function attach(
2466
cleanup,
2467
flushInitialOperations,
2468
getBestMatchForTrackedPath,
2448
- getFiberIDFromNative,
2449
- findNativeByFiberID,
2469
+ getFiberIDForNative,
2470
+ findNativeNodesForFiberID,
2471
getOwnersList,
2472
getPathForElement,
2473
getProfilingData,
src/backend/types.js
+2
-2
@@ -158,10 +158,10 @@ export type PathMatch = {|
158
159
export type RendererInterface = {
160
cleanup: () => void,
161
- findNativeByFiberID: (id: number) => ?Array<NativeType>,
161
+ findNativeNodesForFiberID: (id: number) => ?Array<NativeType>,
162
flushInitialOperations: () => void,
163
getBestMatchForTrackedPath: () => PathMatch | null,
164
- getFiberIDFromNative: (
164
+ getFiberIDForNative: (
165
component: NativeType,
166
findNearestUnfilteredAncestor?: boolean
167
) => number | null,