adding time-travel for setState components; setting up dispatch() function storage and retrieval for possible use in hooks time-travel

Author: crperezt

dev-reactime/componentActionsRecord.js

@@ -0,0 +1,8 @@
+const componentActionsRecord = {};
+const index = 0;
+
+module.exports = {
+  saveNew: (state, setterFunction) => {
+    componentActionsRecord[index] = { state, setterFunction };
+  },
+};

dev-reactime/linkFiber.js

@@ -42,7 +42,7 @@
 /* eslint-disable no-param-reassign */
 
 const Tree = require('./tree');
-const { saveState, saveHooksComponent } = require('./masterState');
+const componentActionsRecord = require('./masterState');
 
 module.exports = (snap, mode) => {
   let fiberRoot = null;
@@ -74,21 +74,22 @@ module.exports = (snap, mode) => {
       // prevents useEffect from crashing on load
       // if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
       if (memoizedState.memoizedState) {
+        console.log('memoizedState in traverseHooks is:', memoizedState);
         hooksComponents.push({
-          action: memoizedState.queue.dispatch,
+          component: memoizedState.queue,
           state: memoizedState.memoizedState,
         });
       }
-      //console.log('GOT STATE', memoizedState.memoizedState);
+      // console.log('GOT STATE', memoizedState.memoizedState);
       memoizedState = memoizedState.next !== memoizedState
         ? memoizedState.next : null;
     }
     return hooksComponents;
   }
 
   // Carlos: This runs after EVERY Fiber commit. It creates a new snapshot,
-  // 
-  function createTree(currentFiber, tree = new Tree('root'), hooksDispatch) {
+  //
+  function createTree(currentFiber, tree = new Tree('root')) {
     // Base case: child or sibling pointed to null
     if (!currentFiber) return tree;
 
@@ -103,55 +104,30 @@ module.exports = (snap, mode) => {
       tag,
     } = currentFiber;
 
-    let nextTree = tree;
-
-    // Check if stateful component 
+    let index;
+    // Check if node is a stateful component
     if (stateNode && stateNode.state && (tag === 0 || tag === 1)) {
-      // Carlos: this is a Tree class object, which has an appendChild
-      // method that adds stateNode to an array. We should refactor
-      // into variable because there is always at most one element in the array
-      tree.appendChild(stateNode.state, elementType.name); // Add component to tree
-      Map(currentFiber, UUID) -> UUID
-      tree.components[elementType.name] = stateNode.setState;
+      // Save component's state and setState() function to our record for future
+      // time-travel state changing. Add record index to snapshot so we can retrieve.
+      index = componentActionsRecord.saveNew(stateNode.state, stateNode);
+      tree.appendChild(stateNode.state, elementType.name, index); // Add component to tree
     } else {
       // grab stateless components here
     }
 
-    // Check if the component uses hooks
-    if (
-      memoizedState
-      && (tag === 0 || tag === 1 || tag === 10)
-    ) {
-
-      // Traverse through the currentFiber and extract the getters/setters
-      // astHooks = astParser(elementType);
-      // console.log('astHooks: ', astHooks);
-      // saveState(astHooks);
-      // Create a traversed property and assign to the evaluated result of
-      // invoking traverseHooks with memoizedState
-      // Carlos: try passing new state in updateSnapShotTree instead ****
-      // memoizedState.traversed = traverseHooks(memoizedState);
+    // Check if node is a hooks function
+    if (memoizedState && (tag === 0 || tag === 1 || tag === 10)) {
       if (memoizedState.queue) {
         const hooksComponents = traverseHooks(memoizedState);
         hooksComponents.forEach(c => {
           if (elementType.name) {
-            const hooksSnapshot = { [elementType.name]: { action: c.action, state: c.state } };
-            if (hooksSnapshot) saveHooksComponent(hooksSnapshot);
-            tree.appendChild({ state: c.state }, elementType.name ? elementType.name : 'nameless');
-            // console.log('GOT STATE, HOOKS SNAPSHOT:', hooksSnapshot);
+            index = componentActionsRecord.saveNew(c.state, c.component);
+            tree.appendChild(c.state, elementType.name ? elementType.name : 'nameless', index);
           }
         });
       }
-
-      /*
-      if (hooksDispatch) {
-        memoizedState.component = { hooksDispatch };
-        console.log('hooks dispatch args saved:', memoizedState);
-        nextTree = tree.appendChild(memoizedState.hooksDispatch);
-      } */
     }
 
-
     // Recurse on siblings
     createTree(sibling, tree);
     // Recurse on children
@@ -165,27 +141,24 @@ module.exports = (snap, mode) => {
   }
 
   // ! BUG: skips 1st hook click
-  function updateSnapShotTree(hooksDispatch) {
+  function updateSnapShotTree() {
     /* let current;
     // If concurrent mode, grab current.child
     if (concurrent) {
       // we need a way to wait for current child to populate
       const promise = new Promise((resolve, reject) => {
         setTimeout(() => resolve(fiberRoot.current.child), 400);
       });
-
       current = await promise;
-
       current = fiberRoot.current.child;
-    } else { 
+    } else {
       current = fiberRoot.current;
     } */
-    const current = fiberRoot.current; // Carlos: get rid of concurrent mode for now
+    const { current } = fiberRoot; // Carlos: get rid of concurrent mode for now
 
     // console.log('FIBER COMMITTED, new fiber is:', util.inspect(current, false, 4));
     // fs.appendFile('fiberlog.txt', util.inspect(current, false, 10));
-    snap.tree = createTree(current, undefined, hooksDispatch); // Carlos: pass new hooks state here?
-    // console.log("GOT STATE, MOVING TO CHILD/SIBLING, tree:", snap.tree);
+    snap.tree = createTree(current); // Carlos: pass new hooks state here?
   }
 
   return async container => {
@@ -205,6 +178,9 @@ module.exports = (snap, mode) => {
     }
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
+    const overrideHookState = reactInstance ? reactInstance.overrideHookState : null;
+    console.log('DEVTOOLS:', devTools);
+    console.log('roots:', reactInstance.getCurrentFiber())
 
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {

dev-reactime/masterState.js

@@ -1,8 +1,24 @@
+/* eslint-disable no-plusplus */
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
-// Export two functions that either saves the AST state object into an array
-// or returns the array for use
-const masterState = [];
+
+const componentActionsRecord = {};
+let index = 0;
+
+module.exports = {
+  saveNew: (state, component) => {
+    componentActionsRecord[index] = { state, component };
+    index++;
+    return index - 1;
+  },
+  getRecordByIndex: inputIndex => componentActionsRecord[inputIndex],
+  getComponentByIndex: inputIndex => (componentActionsRecord[inputIndex]
+    ? componentActionsRecord[inputIndex].component
+    : undefined),
+};
+
+
+/* const masterState = [];
 const hooksComponentsActions = {};
 
 module.exports = {
@@ -13,9 +29,10 @@ module.exports = {
     return masterState;
   },
   returnState: () => masterState,
-  saveHooksComponent: comp => {
-    for (const key in comp) {
-      hooksComponentsActions[key] = comp[key];
+  saveHooksComponent: stateAndAction => {
+    for (const elementName in stateAndAction) {
+      hooksComponentsActions[elementName] = stateAndAction[elementName];
     }
   },
 };
+ */

dev-reactime/timeJump.js

@@ -11,7 +11,7 @@
 
 /* eslint-disable no-param-reassign */
 
-const { returnState } = require('./masterState');
+const componentActionsRecord = require('./masterState');
 
 // Carlos: origin is latest snapshot, linking to the fiber,
 // so changes to origin change app
@@ -21,8 +21,39 @@ module.exports = (origin, mode) => {
 
   function jump(target, originNode = origin.tree) {
     console.log('origin (link to current app state) in jump():', origin);
+    console.log('target state is: ', target);
     // Set the state of the origin tree if the component is stateful
     if (!target) return;
+    const component = componentActionsRecord.getComponentByIndex(target.index);
+    if (component) {
+      console.log('time-travel component is true');
+      if (component.setState) {
+        console.log('time-travel component setState is true');
+      }
+    }
+
+    if (component && component.setState) {
+      console.log('time-travel calling setState', component);
+      component.setState(prevState => {
+        Object.keys(prevState).forEach(key => {
+          if (target.state[key] === undefined) {
+            target.state[key] = undefined;
+          }
+        });
+        return target.state;
+        // Iterate through new children after state has been set
+      }, () => target.children.forEach(child => jump(child)));
+    } else if (component && component.dispatch) {
+      // ** not entering here
+      console.log('time-travel calling dispatch', component);
+      component.dispatch(target.state);
+      target.children.forEach(child => jump(child));
+    } else {
+      console.log('time-travel did not call setState nor dispatch', component);
+      target.children.forEach(child => jump(child));
+    }
+
+    /*
     if (originNode.component.setState) {
       console.log('stateful component jump, originNode: ', originNode.component);
       console.log('new target is:', target);
@@ -59,6 +90,7 @@ module.exports = (origin, mode) => {
         index += 2;
       }
     }
+    */
   }
 
   return target => {

dev-reactime/tree.js

@@ -12,22 +12,23 @@ function scrubUnserializableMembers(tree) {
 
 // this is the current snapshot that is being sent to the snapshots array.
 class Tree {
-  constructor(state, name = 'nameless') {
+  constructor(state, name = 'nameless', index) {
     this.state = state === 'root' ? 'root' : JSON.parse(JSON.stringify(state));
     this.name = name;
+    this.index = index;
     this.children = [];
   }
 
-  appendChild(state, name) {
-    const child = new Tree(state, name);
+  appendChild(state, name, index) {
+    const child = new Tree(state, name, index);
     this.children.push(child);
   }
 
   cleanTreeCopy() {
-    const copy = new Tree(this.state, this.name);
+    const copy = new Tree(this.state, this.name, this.index);
     let newChild;
     copy.children = this.children.map(child => {
-      newChild = new Tree(child.state, child.name);
+      newChild = new Tree(child.state, child.name, child.index);
       newChild.children = child.children;
       return scrubUnserializableMembers(newChild);
     });