Improved logic in masterState saveNew function to account for case where target application has multiple stateful functional components. Made accompanying edits to linkFiber where saveNew is invoked and backendTypes where the HookStateItem type is defined. Next commit should aim to resolve case where target application has multiple React components with the same name (i.e. tic-tac-toe with 9 box components).

Co-authored-by: Chris LeBrett <100822842+fscgolden@users.noreply.github.com>
Co-authored-by: Robby Tipton <100332566+RobbyTipton@users.noreply.github.com>
Co-authored-by: Joseph Park <10874783+joeepark@users.noreply.github.com>
Co-authored-by: David Kim <101825171+codejunkie7@users.noreply.github.com>
Co-authored-by: Kevin HoEun Lee <14950124+khobread@users.noreply.github.com>

Author: 5 people

src/backend/linkFiber.ts

@@ -357,7 +357,8 @@ function createTree(
     // time-travel state changing. Add record index to snapshot so we can retrieve.
     componentData.index = componentActionsRecord.saveNew(
       stateNode.state,
-      stateNode
+      stateNode,
+      currentFiber.elementType.name,
     );
     newState = stateNode.state;
     componentFound = true;
@@ -367,32 +368,32 @@ function createTree(
   atomArray.push(memoizedProps);
 
   // RECOIL HOOKS
-  if (
-    memoizedState
-    && (tag === 0 || tag === 1 || tag === 2 || tag === 10)
-  ) {
-    if (memoizedState.queue) {
-      // Hooks states are stored as a linked list using memoizedState.next,
-      // so we must traverse through the list and get the states.
-      // We then store them along with the corresponding memoizedState.queue,
-      // which includes the dispatch() function we use to change their state.
-      const hooksStates = traverseRecoilHooks(memoizedState, memoizedProps);
-      hooksStates.forEach((state, i) => {
-        hooksIndex = componentActionsRecord.saveNew(
-          state.state,
-          state.component
-        );
-        componentData.hooksIndex = hooksIndex;
-        if (!newState) {
-          newState = { hooksState: [] };
-        } else if (!newState.hooksState) {
-          newState.hooksState = [];
-        }
-        newState.hooksState.push({ [i]: state.state });
-        componentFound = true;
-      });
-    }
-  }
+  // if (
+  //   memoizedState
+  //   && (tag === 0 || tag === 1 || tag === 2 || tag === 10)
+  // ) {
+  //   if (memoizedState.queue) {
+  //     // Hooks states are stored as a linked list using memoizedState.next,
+  //     // so we must traverse through the list and get the states.
+  //     // We then store them along with the corresponding memoizedState.queue,
+  //     // which includes the dispatch() function we use to change their state.
+  //     const hooksStates = traverseRecoilHooks(memoizedState, memoizedProps);
+  //     hooksStates.forEach((state, i) => {
+  //       hooksIndex = componentActionsRecord.saveNew(
+  //         state.state,
+  //         state.component
+  //       );
+  //       componentData.hooksIndex = hooksIndex;
+  //       if (!newState) {
+  //         newState = { hooksState: [] };
+  //       } else if (!newState.hooksState) {
+  //         newState.hooksState = [];
+  //       }
+  //       newState.hooksState.push({ [i]: state.state });
+  //       componentFound = true;
+  //     });
+  //   }
+  // }
 
   // Check if node is a hooks useState function
   // REGULAR REACT HOOKS
@@ -412,7 +413,8 @@ function createTree(
       hooksStates.forEach((state, i) => {
         hooksIndex = componentActionsRecord.saveNew(
           state.state,
-          state.component
+          state.component,
+          currentFiber.elementType.name,
         );
         componentData.hooksIndex = hooksIndex;
         if (!newState) {

src/backend/masterState.ts

@@ -20,18 +20,13 @@ let index = 0;
 
 export default {
   // adds new component to ComponentActionsRecord
-  saveNew: (state, component): number => {
-    componentActionsRecord[index] = { state, component };
-    console.log('entire record of components is', [...componentActionsRecord]);
+  saveNew: (state, component, name): number => {
+    componentActionsRecord[index] = { state, component, name };
     index++;
 
     for (let i = 0; i < componentActionsRecord.length - 2; i++) {
-      if (
-        componentActionsRecord[i].component.constructor.name ===
-        component.constructor.name
-      ) {
-        console.log('reassigning componentActionsRecord at index', i);
-        componentActionsRecord[i] = { state, component };
+      if (componentActionsRecord[i].name === name) {
+        componentActionsRecord[i] = { state, component, name };
       }
     }
 

src/backend/types/backendTypes.ts

@@ -41,6 +41,7 @@ export interface ComponentData {
 export interface HookStateItem {
   state: any;
   component: any;
+  name?: string;
 }
 
 export type HookStates = Array<HookStateItem>;