Skip to content

Commit 4f5e617

Browse files
ngoczwolinskingoczwolinski
committed
Modularize updateSnapShot Complete. Detect bug when switching between two routes that use ReactHook
1 parent ebe3564 commit 4f5e617

File tree

2 files changed

+86
-76
lines changed

2 files changed

+86
-76
lines changed

‎src/backend/linkFiber.ts

Lines changed: 22 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ import Tree from './tree';
6060
// passes the data down to its components
6161
import componentActionsRecord from './masterState';
6262
import routes from './routes';
63+
import updateSnapShotTree from './snapShot';
6364

6465
// throttle returns a function that can be called any number of times (possibly in quick succession) but will only invoke the callback at most once every x ms
6566
// getHooksNames - helper function to grab the getters/setters from `elementType`
@@ -79,63 +80,8 @@ type ComponentData = {
7980
[key: string]: any;
8081
};
8182

82-
const circularComponentTable: Set<Fiber> = new Set();
8383
let rtidCounter = 0;
8484

85-
/**
86-
* @method sendSnapshot
87-
* @param snapShot The current snapshot
88-
* @param mode The current mode (i.e. jumping, time-traveling, or paused)
89-
* @return Nothing.
90-
*
91-
* Middleware: Gets a copy of the current snapShot.tree and posts a recordSnap message to the window
92-
*/
93-
function sendSnapshot(snapShot: Snapshot, mode: Status): void {
94-
// Don't send messages while jumping or while paused
95-
if (mode.jumping || mode.paused) return;
96-
// If there is no current tree creates a new one
97-
if (!snapShot.tree) {
98-
snapShot.tree = new Tree('root', 'root');
99-
}
100-
// Make a deep copy of the tree:
101-
const payload = snapShot.tree.cleanTreeCopy();
102-
payload.route = routes.addRoute(window.location.href);
103-
// method safely enables cross-origin communication between Window objects;
104-
// e.g., between a page and a pop-up that it spawned, or between a page
105-
// and an iframe embedded within it.
106-
// this postMessage will be sending the most up-to-date snapshot of the current React Fiber Tree
107-
// the postMessage action will be received on the content script to later update the tabsObj
108-
// this will fire off everytime there is a change in test application
109-
110-
window.postMessage(
111-
{
112-
action: 'recordSnap',
113-
payload,
114-
},
115-
'*',
116-
);
117-
}
118-
119-
/**
120-
* @function updateSnapShotTree
121-
* @param snapShot The current snapshot
122-
* @param mode The current mode (i.e. jumping, time-traveling, or paused)
123-
* Middleware: Updates snapShot object with latest snapshot, using @sendSnapshot
124-
*/
125-
// updating tree depending on current mode on the panel (pause, etc)
126-
function updateSnapShotTree(snapShot: Snapshot, mode: Status, fiberRoot: FiberRoot): void {
127-
// this is the currently active root fiber(the mutable root of the tree)
128-
if (fiberRoot) {
129-
const { current } = fiberRoot;
130-
// Clears circular component table
131-
circularComponentTable.clear();
132-
// creates snapshot that is a tree based on properties in fiberRoot object
133-
componentActionsRecord.clear();
134-
snapShot.tree = createTree(current);
135-
}
136-
// sends the updated tree back
137-
sendSnapshot(snapShot, mode);
138-
}
13985

14086
/**
14187
* @function traverseHooks
@@ -329,8 +275,9 @@ function trimContextData(
329275
* @param fromSibling A boolean, default initialized to false
330276
* @return An instance of a Tree object
331277
*/
332-
function createTree(
278+
export function createTree(
333279
currentFiberNode: Fiber,
280+
circularComponentTable: Set<Fiber> = new Set(),
334281
tree: Tree = new Tree('root', 'root'),
335282
fromSibling = false,
336283
): Tree {
@@ -355,22 +302,22 @@ function createTree(
355302
dependencies,
356303
_debugHookTypes,
357304
} = currentFiberNode;
358-
console.log('LinkFiber', {
359-
currentFiberNode,
360-
// tag,
361-
// elementType,
362-
componentName:
363-
elementType?._context?.displayName || //For ContextProvider
364-
elementType?._result?.name || //For lazy Component
365-
elementType?.render?.name ||
366-
elementType?.name ||
367-
elementType,
368-
// memoizedProps,
369-
// memoizedState,
370-
// stateNode,
371-
// dependencies,
372-
// _debugHookTypes,
373-
});
305+
// console.log('LinkFiber', {
306+
// currentFiberNode,
307+
// // tag,
308+
// // elementType,
309+
// componentName:
310+
// elementType?._context?.displayName || //For ContextProvider
311+
// elementType?._result?.name || //For lazy Component
312+
// elementType?.render?.name ||
313+
// elementType?.name ||
314+
// elementType,
315+
// // memoizedProps,
316+
// // memoizedState,
317+
// // stateNode,
318+
// // dependencies,
319+
// // _debugHookTypes,
320+
// });
374321

375322
// TODO: Understand this if statement
376323
if (tag === HostComponent) {
@@ -556,7 +503,6 @@ function createTree(
556503
if (componentFound || newState === 'stateless') {
557504
// Grab JSX Component & replace the 'fromLinkFiber' class value
558505
if (currentFiberNode.child?.stateNode?.setAttribute) {
559-
console.log(elementType.name);
560506
rtid = `fromLinkFiber${rtidCounter}`;
561507
// rtid = rtidCounter;
562508
// check if rtid is already present
@@ -600,13 +546,13 @@ function createTree(
600546
// so attach children to the newly appended child.
601547
// Otherwise, attach children to this same node.
602548
circularComponentTable.add(child);
603-
createTree(child, newNode);
549+
createTree(child, circularComponentTable, newNode);
604550
}
605551

606552
// Recurse on siblings
607553
if (sibling && !circularComponentTable.has(sibling)) {
608554
circularComponentTable.add(sibling);
609-
createTree(sibling, newNode, true);
555+
createTree(sibling, circularComponentTable, newNode, true);
610556
}
611557

612558
// -------------RETURN THE TREE OUTPUT & PASS TO FRONTEND FOR RENDERING-------
@@ -698,7 +644,7 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => void
698644
console.log('linkFiber', { fiberRoot });
699645

700646
// ----------INITIALIZE THE TREE SNAP SHOT ON CHROME EXTENSION--------------
701-
throttledUpdateSnapshot(); // only runs on start up
647+
throttledUpdateSnapshot(fiberRoot); // only runs on start up
702648

703649
// --------MONKEY PATCHING THE onCommitFiberRoot FROM REACT DEV TOOL--------
704650
// React has inherent methods that are called with react fiber

‎src/backend/snapShot.ts

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Snapshot, Status, FiberRoot } from './types/backendTypes';
2+
// import function that creates a tree
3+
import Tree from './tree';
4+
// passes the data down to its components
5+
import componentActionsRecord from './masterState';
6+
import routes from './routes';
7+
import { createTree } from './linkFiber';
8+
/**
9+
* @method sendSnapshot
10+
* @param snapShot The current snapshot
11+
* @param mode The current mode (i.e. jumping, time-traveling, or paused)
12+
* @return Nothing.
13+
*
14+
* Middleware: Gets a copy of the current snapShot.tree and posts a recordSnap message to the window
15+
*/
16+
function sendSnapshot(snapShot: Snapshot, mode: Status): void {
17+
// Don't send messages while jumping or while paused
18+
if (mode.jumping || mode.paused) return;
19+
// If there is no current tree creates a new one
20+
if (!snapShot.tree) {
21+
snapShot.tree = new Tree('root', 'root');
22+
}
23+
// Make a deep copy of the tree:
24+
const payload = snapShot.tree.cleanTreeCopy();
25+
payload.route = routes.addRoute(window.location.href);
26+
// method safely enables cross-origin communication between Window objects;
27+
// e.g., between a page and a pop-up that it spawned, or between a page
28+
// and an iframe embedded within it.
29+
// this postMessage will be sending the most up-to-date snapshot of the current React Fiber Tree
30+
// the postMessage action will be received on the content script to later update the tabsObj
31+
// this will fire off everytime there is a change in test application
32+
33+
window.postMessage(
34+
{
35+
action: 'recordSnap',
36+
payload,
37+
},
38+
'*',
39+
);
40+
}
41+
42+
/**
43+
* @function updateSnapShotTree
44+
* @param snapShot The current snapshot
45+
* @param mode The current mode (i.e. jumping, time-traveling, or paused)
46+
* Middleware: Updates snapShot object with latest snapshot, using @sendSnapshot
47+
*/
48+
// updating tree depending on current mode on the panel (pause, etc)
49+
export default function updateSnapShotTree(
50+
snapShot: Snapshot,
51+
mode: Status,
52+
fiberRoot: FiberRoot,
53+
): void {
54+
console.log('snapShot - Update');
55+
// this is the currently active root fiber(the mutable root of the tree)
56+
if (fiberRoot) {
57+
const { current } = fiberRoot;
58+
// creates snapshot that is a tree based on properties in fiberRoot object
59+
componentActionsRecord.clear();
60+
snapShot.tree = createTree(current);
61+
}
62+
// sends the updated tree back
63+
sendSnapshot(snapShot, mode);
64+
}

0 commit comments

Comments
 (0)