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
* This is a recursive function that runs after Fiber commit, if user navigating to a new route during jumping. This function performs the following logic:
18
+
* This is a recursive function that runs after Fiber commit, if user is navigating to a new route during jumping. This function performs the following logic:
24
19
* 1. Traverse from FiberRootNode
25
20
* 2. If the component is stateful, extract its update methods & push to the `componentActionRecord` array
* 1. We will only interested in components that are one of these types: Function Component, Class Component, Indeterminate Component or Context Provider.
47
+
* 1. We are only interested in components that are one of these types: Function Component, Class Component, Indeterminate Component or Context Provider.
68
48
* 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
49
+
* 2. If user is using Next JS, filter out default NextJS components
50
+
* 3. If user is using Remix JS, filter out default Remix components
71
51
*/
72
52
73
53
if(
@@ -90,20 +70,15 @@ export default function createComponentActionsRecord(currentFiberNode: Fiber): v
90
70
// ---------OBTAIN STATE & SET STATE METHODS FROM CLASS COMPONENT-----------
91
71
// Check if node is a stateful class component when user use setState.
92
72
// 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
75
componentActionsRecord.saveNew(stateNode);
97
76
}
98
-
99
77
// --------OBTAIN STATE & DISPATCH METHODS FROM FUNCTIONAL COMPONENT--------
100
78
// Check if node is a stateful class component when user use setState.
101
79
// 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
80
if(
103
-
(tag===FunctionComponent||
104
-
tag===IndeterminateComponent||
105
-
//TODO: Need to figure out why we need context provider
// 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.
92
+
// 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 later
118
93
componentActionsRecord.saveNew(component);
119
94
});
120
95
}catch(err){
@@ -124,7 +99,6 @@ export default function createComponentActionsRecord(currentFiberNode: Fiber): v
124
99
}
125
100
}
126
101
}
127
-
128
102
// ---------------------TRAVERSE TO NEXT FIBERNODE--------------------------
129
103
// If currentFiberNode has children, recurse on children
// TODO: Determine what Component Data Type we are sending back for state, context, & props
6
+
12
7
typeReactimeData={
13
8
[key: string]: any;
14
9
};
15
-
16
10
// ------------FILTER DATA FROM REACT DEV TOOL && CONVERT TO STRING-------------
17
11
/**
18
12
* This function receives raw Data from REACT DEV TOOL and filter the Data based on the exclude list. The filterd data is then converted to string (if applicable) before being sent to reacTime front end.
@@ -27,8 +21,7 @@ export function filterAndFormatData(
27
21
): ReactimeData{
28
22
for(constkeyinreactDevData){
29
23
try{
30
-
// Skip keys that are in exclude set OR if there is no value at key
31
-
// Falsy values such as 0, false, null are still valid value
24
+
// If key is in exclude set or if there is no value at key, skip
@@ -59,62 +52,6 @@ export function filterAndFormatData(
59
52
}
60
53
returnreactimeData;
61
54
}
62
-
// COMMENT OUT SINCE EXTRACTING CONTEXT IS STILL IN EXPERIMENT
63
-
// // ------------------------FILTER STATE & CONTEXT DATA--------------------------
64
-
// /**
65
-
// * This function is used to filter the state data of a component.
66
-
// * All propperty name that are in the central `exclude` list would be filtered out.
67
-
// * If passed in memoizedState is a not an object (a.k.a a primitive type), a default name would be provided.
68
-
// * @param memoizedState - The current state of the component associated with the current Fiber node.
69
-
// * @param _debugHookTypes - An array of hooks used for debugging purposes.
70
-
// * @param componentName - Name of the evaluated component
71
-
// * @returns - The updated state data object to send to front end of ReactTime
72
-
// */
73
-
// export function getStateAndContextData(
74
-
// memoizedState: Fiber['memoizedState'],
75
-
// componentName: string,
76
-
// _debugHookTypes: Fiber['_debugHookTypes'],
77
-
// ) {
78
-
// // Initialize a list of componentName that would not be evaluated for State Data:
79
-
// const ignoreComponent = new Set(['BrowserRouter', 'Router']);
80
-
// if (ignoreComponent.has(componentName)) return;
81
-
82
-
// // Initialize object to store state and context data of the component
83
-
// const reactimeData: ReactimeData = {};
84
-
// // Initialize counter for the default naming. If user use reactHook, such as useState, react will only pass in the value, and not the variable name of the state.
85
-
// let stateCounter = 1;
86
-
// let refCounter = 1;
87
-
88
-
// // Loop through each hook inside the _debugHookTypes array.
89
-
// // NOTE: _debugHookTypes.length === height of memoizedState tree.
90
-
// for (const hook of _debugHookTypes) {
91
-
// // useContext does not create any state => skip
92
-
// if (hook === 'useContext') {
93
-
// continue;
94
-
// }
95
-
// // If user use useState reactHook => React will only pass in the value of state & not the name of the state => create a default name:
// // If user use Redux to contain their context => the context object will be stored using useMemo Hook, as of for Rect Dev Tool v4.27.2
108
-
// // Note: Provider is not a reserved component name for redux. User may name their component as Provider, which will break this logic. However, it is a good assumption that if user have a custom provider component, it would have a more specific naming such as ThemeProvider.
// Wrap the passed-in function callback in a callback function that "throttles" (puts a limit on) the number of calls that can be made to function in a given period of time (ms)
// CASE 1: In cooldown mode and we already have a function waiting to be executed, so do nothing
38
+
// CASE 1: In cooldown mode and we have a function waiting to be executed, so do nothing
39
39
if(isOnCooldown&&isCallQueued)return;
40
40
41
-
// CASE 2: In cooldown mode, but we have no functions waiting to be executed, so just make note that we now have a call waiting to be executed and return
41
+
// CASE 2: In cooldown mode, but we have no functions waiting to be executed, so just make note that we now have a callback waiting to be executed and then return
0 commit comments