Fully refactor to have 1 true source of state & props

Author: ngoczwolinski

demo-app/src/client/Components/Increment.tsx

@@ -4,7 +4,7 @@ import { BoardText } from '../../types';
 import { Function } from 'lodash';
 function Increment() {
   const [count, setCount] = useState(0);
-  const [value, setValue]: [BoardText, any] = useState('-');
+  // const [value, setValue]: [BoardText, any] = useState('-');
   return (
     <div>
       <button className='increment' onClick={() => setCount(count + 1)}>

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -359,7 +359,12 @@ export default function ComponentMap({
 
               <div className='tooltipWrapper'>
                 <h2>State:</h2>
-                {formatData(tooltipData.componentData.state, 'state')}
+                {formatData(
+                  tooltipData.componentData.hooksIndex
+                    ? tooltipData.componentData.hooksState
+                    : tooltipData.componentData.state,
+                  'state',
+                )}
               </div>
             </div>
           </div>

src/backend/linkFiber.ts

@@ -89,7 +89,6 @@ type ReactimeData = {
 function traverseHooks(memoizedState: any): HookStates {
   const hooksStates: HookStates = [];
   while (memoizedState) {
-    // the !== undefined conditional is necessary here for correctly displaying react hooks because TypeScript recognizes 0 and "" as falsey value - DO NOT REMOVE
     if (memoizedState.queue) {
       hooksStates.push({
         component: memoizedState.queue,
@@ -293,6 +292,13 @@ export function createTree(
   // if (!tree) return tree; //TO BE DELETE: WE HAVE A DEFAULT PARAMETER TREE, THIS WILL NEVER BE TRUE
   // These have the newest state. We update state and then
   // called updateSnapshotTree()
+
+  // Base Case: if has visited, return
+  if (circularComponentTable.has(currentFiberNode)) {
+    return;
+  } else {
+    circularComponentTable.add(currentFiberNode);
+  }
   const {
     sibling,
     stateNode,
@@ -359,7 +365,7 @@ export function createTree(
     props: {};
     context: {};
     state?: {};
-    hooksState?: any[];
+    hooksState?: {};
     hooksIndex?: number[];
     index?: number;
   } = {
@@ -381,7 +387,16 @@ export function createTree(
       tag === ContextProvider) &&
     memoizedProps
   ) {
-    Object.assign(componentData.props, convertDataToString(memoizedProps));
+    switch (elementType.name) {
+      case 'Router':
+        componentData.props = { pathname: memoizedProps?.location?.pathname };
+        break;
+      case 'RenderedRoute':
+        componentData.props = { pathname: memoizedProps?.match?.pathname };
+        break;
+      default:
+        Object.assign(componentData.props, convertDataToString(memoizedProps));
+    }
   }
 
   // ------------APPEND STATE & CONTEXT DATA FROM REACT DEV TOOL----------------
@@ -441,8 +456,6 @@ export function createTree(
   }
 
   // ---------OBTAIN STATE & DISPATCH METHODS FROM FUNCTIONAL COMPONENT---------
-  // REGULAR REACT HOOKS
-  let hooksIndex;
   // Check if node is a hooks useState function
   if (
     memoizedState &&
@@ -460,15 +473,15 @@ export function createTree(
       const hooksNames = getHooksNames(elementType.toString());
       // Intialize state & index:
       newState.hooksState = [];
-      componentData.hooksState = [];
+      componentData.hooksState = {};
       componentData.hooksIndex = [];
-      hooksStates.forEach((state, i) => {
+      hooksStates.forEach(({ state, component }, 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.component));
+        componentData.hooksIndex.push(componentActionsRecord.saveNew(component));
         // Save state information in componentData.
-        newState.hooksState.push({ [hooksNames[i].hookName]: state.state });
+        newState.hooksState.push({ [hooksNames[i].varName]: state });
         // Passess to front end
-        componentData.hooksState.push({ [hooksNames[i].hookName]: state.state });
+        componentData.hooksState[hooksNames[i].varName] = state;
       });
       isStatefulComponent = true;
     }
@@ -492,7 +505,6 @@ export function createTree(
    */
   let rtid: string | null = null;
   // We want to add this fiber node to the snapshot
-  // if (componentFound || (newState === 'stateless' && !newState.hooksState)) {
   if (isStatefulComponent || newState === 'stateless') {
     // Grab JSX Component & replace the 'fromLinkFiber' class value
     if (currentFiberNode.child?.stateNode?.setAttribute) {
@@ -512,41 +524,30 @@ export function createTree(
       currentFiberNode.child.stateNode.classList.add(rtid);
     }
     rtidCounter += 1; // I THINK THIS SHOULD BE UP IN THE IF STATEMENT. Still unsure the use of rtid
+
+    // Obtain component name:
+    const componentName =
+      elementType?._context?.displayName || //For ContextProvider
+      elementType?._result?.name || //For lazy Component
+      elementType?.render?.name ||
+      elementType?.name ||
+      'nameless';
     // checking if tree fromSibling is true
     if (fromSibling) {
-      newNode = tree.addSibling(
-        newState,
-        elementType ? elementType.name : 'nameless',
-        componentData,
-        rtid,
-      );
+      newNode = tree.addSibling(newState, componentName, componentData, rtid);
     } else {
-      newNode = tree.addChild(
-        newState,
-        elementType ? elementType.name : 'nameless',
-        componentData,
-        rtid,
-      );
+      newNode = tree.addChild(newState, componentName, componentData, rtid);
     }
   } else {
     newNode = tree;
   }
 
   // ----------------------TRAVERSE TO NEXT FIBERNODE---------------------------
-  // Recurse on children
-  if (child && !circularComponentTable.has(child)) {
-    // If this node had state we appended to the children array,
-    // so attach children to the newly appended child.
-    // Otherwise, attach children to this same node.
-    circularComponentTable.add(child);
-    createTree(child, circularComponentTable, newNode);
-  }
+  // If currentFiberNode has children, recurse on children
+  if (child) createTree(child, circularComponentTable, newNode);
 
-  // Recurse on siblings
-  if (sibling && !circularComponentTable.has(sibling)) {
-    circularComponentTable.add(sibling);
-    createTree(sibling, circularComponentTable, newNode, true);
-  }
+  // If currentFiberNode has siblings, recurse on siblings
+  if (sibling) createTree(sibling, circularComponentTable, newNode, true);
 
   // -------------RETURN THE TREE OUTPUT & PASS TO FRONTEND FOR RENDERING-------
   return tree;

src/backend/masterState.ts

@@ -4,12 +4,6 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 
-import {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  HookStateItem, // obj with state and component
-  HookStates, // array of hook state items
-} from './types/backendTypes';
-
 type ComponentAction = any[];
 
 // HookState is an array that contains a "component" for

src/backend/snapShot.ts

@@ -1,6 +1,4 @@
 import { Snapshot, Status, FiberRoot } from './types/backendTypes';
-// import function that creates a tree
-import Tree from './tree';
 // passes the data down to its components
 import componentActionsRecord from './masterState';
 import routes from './routes';

src/backend/timeJump.ts

@@ -23,7 +23,6 @@ export default function timeJump(mode) {
   // Recursively change state of tree
   // Set the state of the origin tree if the component is stateful
   async function jump(target): Promise<void> {
-    // ----------------
     if (!target) return;
     // Base Case: if has visited, return
     if (circularComponentTable.has(target)) {
@@ -68,11 +67,10 @@ export default function timeJump(mode) {
     if (hooksIndex !== undefined) {
       // Obtain component data & its update method at the given index
       const functionalComponent = componentActionsRecord.getComponentByIndexHooks(hooksIndex);
-      if (functionalComponent.length) {
-        for (let i = 0; i < hooksState.length; i += 1) {
-          await functionalComponent[i].dispatch(Object.values(hooksState[i])[0]);
-        }
+      for (let i in functionalComponent) {
+        await functionalComponent[i].dispatch(Object.values(hooksState)[i]);
       }
+      // Iterate through new children after state has been set
       target.children.forEach((child) => jump(child));
       return;
     }

src/backend/types/backendTypes.ts

@@ -82,11 +82,6 @@ export interface HookStateItem {
  */
 export type HookStates = Array<HookStateItem>;
 
-export interface State {
-  state?: {} | number;
-  hooksState?: HookStates;
-}
-
 export type WorkTag =
   | 0
   | 1
@@ -248,4 +243,5 @@ export type Fiber = {
  */
 export type FiberRoot = {
   current: Fiber;
+  Nok_Nok: string;
 };