Fix the snapshot tree structure

Author: ngoczwolinski

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

@@ -10,14 +10,14 @@ function Increment() {
       <button className='increment' onClick={() => setCount(count + 1)}>
         You clicked me {count} times.
       </button>
-      <div>
+      {/* <div> */}
         <Box
           value={value}
           column={3}
           row={2}
           handleBoxClick={() => setValue((value: BoardText) => (value == 'X' ? 'O' : 'X'))}
         />
-      </div>
+      {/* </div> */}
     </div>
   );
 }

src/backend/controllers/createTree/createTree.ts

@@ -81,13 +81,7 @@ export default function createTree(
   tree: Tree = new Tree('root', 'root'),
   fromSibling = false,
 ): Tree {
-  // Base case: child or sibling pointed to null
-  // if (!currentFiberNode) return tree; //TO BE DELETE SINCE THIS FUNCTION CAN ONLY BE RECURSIVE CALLED IF THE FIBERNODE HAS A CHILD/SIBILING
-  // 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
+  // Base Case: if has visited the component, return
   if (circularComponentTable.has(currentFiberNode)) {
     return;
   } else {
@@ -132,30 +126,6 @@ export default function createTree(
   //   // _debugHookTypes,
   // });
 
-  // TODO: Understand this if statement
-  if (tag === HostComponent) {
-    try {
-      // Ensure parent component has memoizedProps property
-      if (
-        memoizedProps.children &&
-        memoizedProps.children[0]?._owner?.memoizedProps !== undefined
-      ) {
-        // Access the memoizedProps of the parent component
-        const propsData = memoizedProps.children[0]._owner.memoizedProps;
-        const newPropData = filterAndFormatData(
-          propsData,
-          tree.componentData.props ? tree.componentData.props : null,
-        );
-        tree.componentData = {
-          ...tree.componentData,
-          props: newPropData,
-        };
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
   // -----------------INITIALIZE OBJECT TO CONTAIN COMPONENT DATA---------------
   let newState: any | { hooksState?: any[] } = {};
   let componentData: {
@@ -183,18 +153,6 @@ export default function createTree(
    */
   let newNode: Tree;
 
-  // console.log('LinkFiber', {
-  //   currentFiberNode,
-  //   // tag,
-  //   // elementType,
-  //   componentName,
-  //   // memoizedProps,
-  //   // memoizedState,
-  //   // stateNode,
-  //   // dependencies,
-  //   // _debugHookTypes,
-  // });
-
   // ----------------APPEND PROP DATA FROM REACT DEV TOOL-----------------------
   // check to see if the parent component has any state/props
   if (
@@ -273,7 +231,6 @@ export default function createTree(
   ) {
     // 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.
-    console.log('Class Component: ', stateNode);
     componentData.index = componentActionsRecord.saveNew(stateNode);
     // Save state information in componentData.
     componentData.state = stateNode.state;
@@ -314,11 +271,9 @@ export default function createTree(
         });
         isStatefulComponent = true;
       } catch (err) {
-        console.log('Failed Element', { component: elementType?.name });
-        // if (!nextJSDefaultComponent.has(elementType?.name)) {
-        //   throw new Error(err);
-        // } else {
-        //   console.log('We are good');
+        console.log('ERROR: Failed Element during JSX parsing', {
+          componentName: elementType?.name,
+        });
       }
     }
   }
@@ -378,7 +333,14 @@ export default function createTree(
   if (child) createTree(child, circularComponentTable, newNode);
 
   // If currentFiberNode has siblings, recurse on siblings
-  if (sibling) createTree(sibling, circularComponentTable, newNode, true);
+  if (sibling) {
+    if (
+      (isStatefulComponent || newState === 'stateless') &&
+      !nextJSDefaultComponent.has(componentName)
+    )
+      createTree(sibling, circularComponentTable, newNode, true);
+    else createTree(sibling, circularComponentTable, newNode, fromSibling);
+  }
 
   // -------------RETURN THE TREE OUTPUT & PASS TO FRONTEND FOR RENDERING-------
   return tree;

src/backend/models/tree.ts

@@ -34,6 +34,7 @@ export function serializeState(state) {
     return JSON.parse(JSON.stringify(state));
   } catch (e) {
     // if there is an error, that means there is circular state i.e state that depends on itself
+    console.log('circular');
     return 'circularState';
   }
 }
@@ -51,7 +52,7 @@ export function serializeState(state) {
  * @param route - an object representing the route associated with the node.
  */
 class Tree {
-  state: string | {};
+  state: string | {}; // TODO: should change this to stateless || statefull
 
   name: string;
 
@@ -77,16 +78,10 @@ class Tree {
   // If not, create the new component and also a new key: value pair in 'componentNames' with the component's name as the key and 0 as its value
   // EXAMPLE OF COMPONENTNAMES OBJECT: {editableInput: 1, Provider: 0, etc}
 
-  constructor(
-    state: string | {},
-    name = 'nameless',
-    componentData: {} = {},
-    rtid: any = null,
-    string: any = null,
-  ) {
+  constructor(state: string | {}, name = 'nameless', componentData: {} = {}, rtid: any = null) {
     this.state = state === 'root' ? 'root' : serializeState(state);
     this.name = name;
-    this.componentData = componentData ? { ...JSON.parse(JSON.stringify(componentData)) } : {};
+    this.componentData = JSON.parse(JSON.stringify(componentData));
     this.children = [];
     this.parent = null; // ref to parent so we can add siblings
     this.isExpanded = true;
@@ -100,26 +95,24 @@ class Tree {
    * @returns
    */
   checkForDuplicates(name: string): string {
+    /**
+     * The condition for check empty name does not seem to ever be reached
+     * Commented and did not remove for potential future use
+     */
     // check for empty name
-    if (name === '' && typeof this.rtid === 'string') {
-      name = this.rtid.replace('fromLinkFiber', '');
-    }
-    // if we are at root, then make sure componentNames is an empty object
-    if (this.state === 'root') componentNames = {};
-    // check for duplicate
-    else if (componentNames[name] !== undefined) {
-      // if name exists in componentNames object, grab count and add 1
-      const count: number = componentNames[name] + 1;
-      // declare a new name variable
-      const newName: string = name + count;
-      // update name count in object
-      componentNames[name] = count;
-      // return newName
-      return newName;
-    }
-    // add name in componentsName with value of 0
-    componentNames[name] = 0;
-    // return name
+    // if (name === '' && typeof this.rtid === 'string') {
+    //   name = this.rtid.replace('fromLinkFiber', '');
+    // }
+    // console.log('Tree', { name, parentName: this.name, this: this });
+    // if parent node is root, initialize the componentNames object
+    if (this.name === 'root') componentNames = {};
+
+    // Numerize the component name if found duplicate
+    // Ex: A board has 3 rows => Row, Row1, Row2
+    // Ex: Each row has 3 boxes => Box, Box1, Box2, ..., Box8
+    componentNames[name] = componentNames[name] + 1 || 0;
+    name += componentNames[name] ? componentNames[name] : '';
+
     return name;
   }
   /**
@@ -131,9 +124,10 @@ class Tree {
    * @returns - return new tree instance that is child
    */
   addChild(state: string | {}, name: string, componentData: {}, rtid: any): Tree {
-    // gets unique name by calling checkForDuplicates method
+    // Get unique name by invoking checkForDuplicates method
     const uniqueName = this.checkForDuplicates(name);
-    // instantiates new child Tree with state, uniqueName, componentData and rtid
+    console.log('CHILD', { name: uniqueName, this: this });
+    // Instantiates new child Tree with state, uniqueName, componentData and rtid
     const newChild: Tree = new Tree(state, uniqueName, componentData, rtid);
     // updating newChild parent to "this"
     newChild.parent = this;
@@ -153,6 +147,7 @@ class Tree {
   addSibling(state: string | {}, name: string, componentData: {}, rtid: any): Tree {
     // gets unique name by calling checkForDuplicates method
     const uniqueName = this.checkForDuplicates(name);
+    console.log('SIBILING', { name: uniqueName, this: this });
     // instantiate new sibilng tree with state, uniqueName, componentName and rtid
     const newSibling: Tree = new Tree(state, uniqueName, componentData, rtid);
     // updating newSibling's parent to be the parent of "this" which refers to sibling node

src/backend/routers/snapShot.ts

@@ -24,7 +24,7 @@ export default function updateAndSendSnapShotTree(snapshot: Snapshot, fiberRoot:
   const payload = snapshot.tree.cleanTreeCopy();
   // Save the current window url to route
   payload.route = routes.addRoute(window.location.href);
-
+  console.log('send snapshot', { payload });
   // method safely enables cross-origin communication between Window objects;
   // e.g., between a page and a pop-up that it spawned, or between a page
   // and an iframe embedded within it.