You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// ------------------OBTAIN DATA FROM THE CURRENT FIBER NODE----------------
30
+
// Destructure the current fiber node:
31
+
const{
32
+
sibling,
33
+
stateNode,
34
+
child,
35
+
// with memoizedState we can grab the root type and construct an Abstract Syntax Tree from the hooks structure using Acorn in order to extract the hook getters and match them with their corresponding setters in an object
36
+
memoizedState,
37
+
elementType,
38
+
tag,
39
+
}=currentFiberNode;
32
40
33
-
/**
34
-
* This is a helper function to recursively traverse the React Fiber Tree and craft the snapshot tree to send to front end
// Base Case: if has visited the component, return
40
-
if(circularComponentTable.has(currentFiberNode)){
41
-
return;
42
-
}else{
43
-
circularComponentTable.add(currentFiberNode);
44
-
}
45
-
46
-
// ------------------OBTAIN DATA FROM THE CURRENT FIBER NODE----------------
47
-
// Destructure the current fiber node:
48
-
const{
49
-
sibling,
50
-
stateNode,
51
-
child,
52
-
// with memoizedState we can grab the root type and construct an Abstract Syntax Tree from the hooks structure using Acorn in order to extract the hook getters and match them with their corresponding setters in an object
* 1. We will only interested in components that are one of these types: Function Component, Class Component, Indeterminate Component or Context Provider.
85
-
* NOTE: this list of components may change depending on future use
86
-
* 2. If user use Next JS, filter out default NextJS components
87
-
* 3. If user use Remix JS, filter out default Remix components
* 1. We will only interested in components that are one of these types: Function Component, Class Component, Indeterminate Component or Context Provider.
68
+
* NOTE: this list of components may change depending on future use
69
+
* 2. If user use Next JS, filter out default NextJS components
70
+
* 3. If user use Remix JS, filter out default Remix components
71
+
*/
89
72
90
-
if(
91
-
!allowedComponentTypes.has(tag)||
92
-
nextJSDefaultComponent.has(componentName)||
93
-
remixDefaultComponents.has(componentName)
94
-
){
95
-
// -------------------TRAVERSE TO NEXT FIBERNODE------------------------
96
-
// If currentFiberNode has children, recurse on children
97
-
if(child)_createComponentActionsRecord(child);
73
+
if(
74
+
!allowedComponentTypes.has(tag)||
75
+
nextJSDefaultComponent.has(componentName)||
76
+
remixDefaultComponents.has(componentName)
77
+
){
78
+
// -------------------TRAVERSE TO NEXT FIBERNODE------------------------
79
+
// If currentFiberNode has children, recurse on children
80
+
if(child)createComponentActionsRecord(child);
98
81
99
-
// If currentFiberNode has siblings, recurse on siblings
100
-
if(sibling){
101
-
_createComponentActionsRecord(sibling);
102
-
}
103
-
// ---------RETURN THE TREE OUTPUT & PASS TO FRONTEND FOR RENDERING-------
104
-
return;
82
+
// If currentFiberNode has siblings, recurse on siblings
83
+
if(sibling){
84
+
createComponentActionsRecord(sibling);
105
85
}
86
+
// ---------RETURN THE TREE OUTPUT & PASS TO FRONTEND FOR RENDERING-------
87
+
return;
88
+
}
106
89
107
-
// ---------OBTAIN STATE & SET STATE METHODS FROM CLASS COMPONENT-----------
108
-
// Check if node is a stateful class component when user use setState.
109
-
// If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state
110
-
// Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data.
// Save component setState() method to our componentActionsRecord for use during timeJump
113
-
componentActionsRecord.saveNew(stateNode);
114
-
}
90
+
// ---------OBTAIN STATE & SET STATE METHODS FROM CLASS COMPONENT-----------
91
+
// Check if node is a stateful class component when user use setState.
92
+
// If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state
93
+
// Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data.
// Save component setState() method to our componentActionsRecord for use during timeJump
96
+
componentActionsRecord.saveNew(stateNode);
97
+
}
115
98
116
-
// --------OBTAIN STATE & DISPATCH METHODS FROM FUNCTIONAL COMPONENT--------
117
-
// Check if node is a stateful class component when user use setState.
118
-
// If user use useState to define/manage state, the state object will be stored in memoizedState.queue => grab the state object stored in the memoizedState.queue
119
-
if(
120
-
(tag===FunctionComponent||
121
-
tag===IndeterminateComponent||
122
-
//TODO: Need to figure out why we need context provider
123
-
tag===ContextProvider)&&
124
-
memoizedState
125
-
){
126
-
if(memoizedState.queue){
127
-
try{
128
-
// Hooks states are stored as a linked list using memoizedState.next,
129
-
// so we must traverse through the list and get the states.
130
-
// We then store them along with the corresponding memoizedState.queue,
131
-
// which includes the dispatch() function we use to change their state.
// Save component's state and dispatch() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve.
135
-
componentActionsRecord.saveNew(component);
136
-
});
137
-
}catch(err){
138
-
console.log('ERROR: Failed Element during JSX parsing',{
139
-
componentName,
140
-
});
141
-
}
99
+
// --------OBTAIN STATE & DISPATCH METHODS FROM FUNCTIONAL COMPONENT--------
100
+
// Check if node is a stateful class component when user use setState.
101
+
// If user use useState to define/manage state, the state object will be stored in memoizedState.queue => grab the state object stored in the memoizedState.queue
102
+
if(
103
+
(tag===FunctionComponent||
104
+
tag===IndeterminateComponent||
105
+
//TODO: Need to figure out why we need context provider
106
+
tag===ContextProvider)&&
107
+
memoizedState
108
+
){
109
+
if(memoizedState.queue){
110
+
try{
111
+
// Hooks states are stored as a linked list using memoizedState.next,
112
+
// so we must traverse through the list and get the states.
113
+
// We then store them along with the corresponding memoizedState.queue,
114
+
// which includes the dispatch() function we use to change their state.
// Save component's state and dispatch() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve.
118
+
componentActionsRecord.saveNew(component);
119
+
});
120
+
}catch(err){
121
+
console.log('ERROR: Failed Element during JSX parsing',{
122
+
componentName,
123
+
});
142
124
}
143
125
}
126
+
}
144
127
145
-
// ---------------------TRAVERSE TO NEXT FIBERNODE--------------------------
146
-
// If currentFiberNode has children, recurse on children
147
-
if(child)_createComponentActionsRecord(child);
128
+
// ---------------------TRAVERSE TO NEXT FIBERNODE--------------------------
129
+
// If currentFiberNode has children, recurse on children
130
+
if(child)createComponentActionsRecord(child);
148
131
149
-
// If currentFiberNode has siblings, recurse on siblings
0 commit comments