Remove duplicate state from backend. Working on review component data type.

Author: ngoczwolinski

src/backend/helpers.ts

@@ -96,6 +96,54 @@ export const throttle = (
   };
 };
 
+export const getHooksNames = (
+  elementType: string,
+): { hookName: string; varName: string }[] | undefined => {
+  // Initialize empty object to store the setters and getter
+  let AST: any;
+  try {
+    AST = JSXParser.parse(elementType);
+  } catch (e) {
+    throw Error('Error occurs at helpers getHooksName.ts Cannot parse functional component.');
+  }
+  // Begin search for hook names, only if ast has a body property.
+
+  AST = AST.body;
+
+  // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
+  const statements: { hookName: string; varName: string }[] = [];
+  /** All module exports always start off as a single 'FunctionDeclaration' type
+   * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
+   * Iterate through AST of every function declaration
+   * Check within each function declaration if there are hook declarations & variable name declaration */
+  AST.forEach((functionDec: any) => {
+    let declarationBody: any;
+    if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
+    // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
+    else declarationBody = functionDec.body?.body ?? [];
+    // Traverse through the function's funcDecs and Expression Statements
+    declarationBody.forEach((elem: any) => {
+      // Hooks will always be contained in a variable declaration
+      if (elem.type === 'VariableDeclaration') {
+        // Obtain the declarations array from elem.
+        const { declarations } = elem;
+        // Obtain the reactHook:
+        const reactHook: string = declarations[0]?.init?.callee?.expressions[1]?.property?.name;
+        if (reactHook === 'useState') {
+          // Obtain the variable being set:
+          let varName: string = declarations[1]?.id?.name;
+          // Obtain the setState method:
+          let hookName: string = declarations[2]?.id?.name;
+          // Push reactHook & varName to statements array
+          statements.push({ hookName, varName });
+        }
+      }
+    });
+  });
+  return statements;
+};
+
+// DEPERACATED: After React DEV Tool Update. This function no longer works. Keep for history record
 // // Helper function to grab the getters/setters from `elementType`
 // /**
 //  * @method getHooksNames
@@ -166,50 +214,3 @@ export const throttle = (
 //     return Object.values(hooksNames);
 //   }
 // };
-
-export const getHooksNames = (
-  elementType: string,
-): { hookName: string; varName: string }[] | undefined => {
-  // Initialize empty object to store the setters and getter
-  let AST: any;
-  try {
-    AST = JSXParser.parse(elementType);
-  } catch (e) {
-    throw Error('Error occurs at helpers ts getComponentName. Cannot parse functional component.');
-  }
-  // Begin search for hook names, only if ast has a body property.
-
-  AST = AST.body;
-
-  // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
-  const statements: { hookName: string; varName: string }[] = [];
-  /** All module exports always start off as a single 'FunctionDeclaration' type
-   * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
-   * Iterate through AST of every function declaration
-   * Check within each function declaration if there are hook declarations & variable name declaration */
-  AST.forEach((functionDec: any) => {
-    let declarationBody: any;
-    if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
-    // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
-    else declarationBody = functionDec.body?.body ?? [];
-    // Traverse through the function's funcDecs and Expression Statements
-    declarationBody.forEach((elem: any) => {
-      // Hooks will always be contained in a variable declaration
-      if (elem.type === 'VariableDeclaration') {
-        // Obtain the declarations array from elem.
-        const { declarations } = elem;
-        // Obtain the reactHook:
-        const reactHook: string = declarations[0]?.init?.callee?.expressions[1]?.property?.name;
-        if (reactHook === 'useState') {
-          // Obtain the variable being set:
-          let varName: string = declarations[1]?.id?.name;
-          // Obtain the setState method:
-          let hookName: string = declarations[2]?.id?.name;
-          // Push reactHook & varName to statements array
-          statements.push({ hookName, varName });
-        }
-      }
-    });
-  });
-  return statements;
-};

src/backend/linkFiber.ts

@@ -78,8 +78,6 @@ type ReactimeData = {
   [key: string]: any;
 };
 
-let rtidCounter = 0;
-
 /**
  * @function traverseHooks
  * @param memoizedState - The current state of the component associated with the current Fiber node.
@@ -281,6 +279,9 @@ function trimContextData(
  * @param fromSibling A boolean, default initialized to false
  * @return An instance of a Tree object
  */
+// TODO: Not sure why the ritd need to be outside of the createTree function. Want to put inside, but in case this need to be keep track for front end.
+let rtidCounter = 0;
+
 export function createTree(
   currentFiberNode: Fiber,
   circularComponentTable: Set<Fiber> = new Set(),
@@ -431,7 +432,7 @@ export function createTree(
   if (stateNode?.state && (tag === ClassComponent || tag === IndeterminateComponent)) {
     // 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.
-    componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
+    componentData.index = componentActionsRecord.saveNew(stateNode);
     // Save state information in componentData.
     componentData.state = stateNode.state;
     // Passess to front end
@@ -457,14 +458,13 @@ export function createTree(
       // which includes the dispatch() function we use to change their state.
       const hooksStates = traverseHooks(memoizedState);
       const hooksNames = getHooksNames(elementType.toString());
-      console.log({ hooksNames });
       // Intialize state & index:
       newState.hooksState = [];
       componentData.hooksState = [];
       componentData.hooksIndex = [];
       hooksStates.forEach((state, i) => {
         // 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.
-        componentData.hooksIndex.push(componentActionsRecord.saveNew(state.state, state.component));
+        componentData.hooksIndex.push(componentActionsRecord.saveNew(state.component));
         // Save state information in componentData.
         newState.hooksState.push({ [hooksNames[i].hookName]: state.state });
         // Passess to front end

src/backend/masterState.ts

@@ -10,13 +10,15 @@ import {
   HookStates, // array of hook state items
 } from './types/backendTypes';
 
+type ComponentAction = any[];
+
 // HookState is an array that contains a "component" for
 // every single state change that occurs in the app
 // Information on these components include ComponentData as well as state
 // For class components, there will be one "component" for each snapshot
 // For functional components that utilize Hooks, there will be one "component"
 // for each setter/getter every time we have a new snapshot
-let componentActionsRecord: HookStates = [];
+let componentActionsRecord: ComponentAction = [];
 let index: number;
 index = 0;
 
@@ -26,26 +28,23 @@ export default {
     index = 0;
   },
   // adds new component to ComponentActionsRecord
-  saveNew: (state, component): number => {
-    console.log('masterState', { component, componentActionsRecord });
-    componentActionsRecord[index] = { state, component };
+  saveNew: (component): number => {
+    componentActionsRecord[index] = component;
     index++;
 
     return index - 1;
   },
   getRecordByIndex: (inputIndex: number): HookStateItem => componentActionsRecord[inputIndex],
   // this is used for class components -
   /* inputIndex will always be a fixed number (coming in timeJump.ts) */
-  getComponentByIndex: (inputIndex: number): HookStateItem['component'] | undefined =>
-    componentActionsRecord[inputIndex] ? componentActionsRecord[inputIndex].component : undefined,
+  getComponentByIndex: (inputIndex: number): any | undefined =>
+    componentActionsRecord[inputIndex] ? componentActionsRecord[inputIndex] : undefined,
   // this is used for react hooks - hooks will be passed in as an array from timeJump.ts
-  getComponentByIndexHooks: (
-    inputIndex: Array<number> = [],
-  ): Array<HookStateItem['component']> | undefined => {
+  getComponentByIndexHooks: (inputIndex: Array<number> = []): any[] | undefined => {
     const multiDispatch = [];
     for (let i = 0; i < inputIndex.length; i++) {
       if (componentActionsRecord[inputIndex[i]]) {
-        multiDispatch.push(componentActionsRecord[inputIndex[i]].component);
+        multiDispatch.push(componentActionsRecord[inputIndex[i]]);
       }
     }
     return multiDispatch;