(add) LinkedList algorithm to find DOM elements in the Fiber node for Recoil

Co-authored-by: Sanjay Lavingia <Sanjaylavingia@gmail.com>

Author: VNguyenCode

src/app/actions/actions.ts

@@ -78,8 +78,8 @@ export const resetSlider = () => ({
   type: types.SLIDER_ZERO,
 });
 
-export const onHover = () => ({
+export const onHover = (rtid) => ({
   type: types.ON_HOVER, 
   //the payload should be something to relate the component we're hovering and highlight that component on the DOM
-  payload: 'PAYLOAD FROM onHover inside of action.ts'
+  payload: rtid
 })

src/app/components/ComponentMap.tsx

@@ -11,6 +11,8 @@ import { pointRadial } from 'd3-shape';
 import useForceUpdate from './useForceUpdate';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
+import { onHover } from '../actions/actions'
+import { useStoreContext } from '../store'
 
 const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
 
@@ -28,6 +30,8 @@ export default function ComponentMap({
   margin = defaultMargin,
   snapshots: snapshots,
 }: LinkTypesProps) {
+
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
   // preparing the data to be used for render
   const lastNode = snapshots.length - 1;
   const data = snapshots[lastNode];
@@ -147,6 +151,7 @@ export default function ComponentMap({
                             console.log(node);
                             forceUpdate();
                           }}
+                          onMouseEnter={()=>dispatch(onHover(node.data.rtid))}
                         />
                       )}
                       <text

src/app/reducers/mainReducer.js

@@ -42,7 +42,7 @@ export default (state, action) => produce(state, draft => {
     case types.ON_HOVER: {
       port.postMessage({
         action: 'onHover',
-        payload: 'payload from Reducer ON_HOVER',
+        payload: action.payload,
         tabId: currentTab,
       })
       break; 
@@ -199,6 +199,7 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.INITIAL_CONNECT: {
+      console.log(action.paylooad)
       const { payload } = action;
       Object.keys(payload).forEach(tab => {
         // check if tab exists in memory

src/backend/index.ts

@@ -59,7 +59,20 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       mode.paused = payload;
       break;
     case 'onHover':
-      // console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:', payload);
+      if (payload !== null) {
+        let element = document.getElementById(payload)
+
+        if (element !== null) {
+
+          element.style.backgroundColor = '#C0D9D9'; 
+          setTimeout( () => {
+            element.style.backgroundColor = "";
+          }, 500)
+        }
+      
+        // console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:', payload);
+        // console.log(element);
+      }
       break;
     default:
       break;

src/backend/linkFiber.ts

@@ -22,6 +22,7 @@ import componentActionsRecord from './masterState';
 import { throttle, getHooksNames } from './helpers';
 import { Console } from 'console';
 import AtomsRelationship from '../app/components/AtomsRelationship';
+import { isNull } from 'util';
 
 // Set global variables to use in exported module and helper functions
 declare global {
@@ -35,6 +36,9 @@ const circularComponentTable = new Set();
 let isRecoil = false;
 let allAtomsRelationship = [];
 let initialstart = false;
+let rtidCounter = 0; 
+let rtid = null;
+let recoilStateNode = {};
 
 // Simple check for whether our target app uses Recoil
 if (window[`$recoilDebugStates`]) {
@@ -78,7 +82,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
     payload.atomSelectors = atomsSelectors;
   }
 
-
+  console.log(recoilStateNode)
   window.postMessage(
     {
       action: 'recordSnap',
@@ -183,6 +187,17 @@ function createTree(
   if (!currentFiber) return null;
   if (!tree) return tree;
 
+    if (currentFiber.tag === 0 || currentFiber.tag === 1 || currentFiber.tag === 2) {
+      if (currentFiber.child && currentFiber.child.stateNode) {
+          // console.log('Sanjays algo', currentFiber)
+          rtid = "fromLinkFiber" + rtidCounter
+          // if (currentFiber.child.stateNode.setAttribute) {
+            currentFiber.child.stateNode.setAttribute("id", rtid);
+          // }
+      }
+      rtidCounter++;
+  }
+    
   // These have the newest state. We update state and then
   // called updateSnapshotTree()
 
@@ -200,6 +215,7 @@ function createTree(
     treeBaseDuration,
   } = currentFiber;
 
+  
   //Checks Recoil Atom and Selector Relationships
   if (
     currentFiber.memoizedState &&
@@ -282,6 +298,7 @@ function createTree(
     (tag === 0 || tag === 1 || tag === 2 || tag === 10) &&
     isRecoil === true
   ) {
+    // console.log('Recoil Hooks Algo', currentFiber)
     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.
@@ -315,6 +332,7 @@ function createTree(
     (tag === 0 || tag === 1 || tag === 2 || tag === 10) &&
     isRecoil === false
   ) {
+    // console.log('Regular Hooks Algo', currentFiber)
     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.
@@ -343,6 +361,7 @@ function createTree(
 
   // This grabs stateless components
   if (!componentFound && (tag === 0 || tag === 1 || tag === 2)) {
+    // console.log('Stateless Algo', currentFiber)
     newState = 'stateless';
   }
 
@@ -356,19 +375,47 @@ function createTree(
   };
 
   let newNode = null;
+
   // We want to add this fiber node to the snapshot
   if (componentFound || newState === 'stateless') {
     if (fromSibling) {
+      
+      console.log(currentFiber)
+
+      
+      if(currentFiber.elementType.name){
+        if(!recoilStateNode[currentFiber.elementType.name]){
+          recoilStateNode[currentFiber.elementType.name] = [];
+        }
+      }
+      
+      let pointer = currentFiber
+      while(pointer !== null){
+          if(pointer.stateNode !== null){
+          rtid = "fromLinkFiber" + rtidCounter++
+          recoilStateNode[currentFiber.elementType.name].push(pointer.stateNode)}
+          pointer.stateNode.setAttribute("id", rtid)
+          pointer = pointer.child
+        }
+        
+      // console.log(currentFiber)
+      
+      // currentFiber.child.stateNode.setAttribute("id", rtid);
       newNode = tree.addSibling(
         newState,
         elementType ? elementType.name : 'nameless',
-        componentData
+        componentData,
+        rtid
       );
     } else {
+      // console.log(currentFiber)
+      rtid = "fromLinkFiber" + rtidCounter++
+      // currentFiber.child.stateNode.setAttribute("id", rtid);
       newNode = tree.addChild(
         newState,
         elementType ? elementType.name : 'nameless',
-        componentData
+        componentData,
+        rtid
       );
     }
   } else {
@@ -382,13 +429,13 @@ function createTree(
     // Otherwise, attach children to this same node.
     circularComponentTable.add(child);
     createTree(child, newNode);
+    
   }
   // Recurse on siblings
   if (sibling && !circularComponentTable.has(sibling)) {
     circularComponentTable.add(sibling);
     createTree(sibling, newNode, true);
   }
-
   return tree;
 }
 

src/backend/tree.ts

@@ -49,23 +49,26 @@ class Tree {
 
   atomSelectors: any;
 
-  constructor(state: string | {}, name = 'nameless', componentData: {} = {}) {
+  rtid: any; 
+
+  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.children = [];
     this.parent = null; // ref to parent so we can add siblings
+    this.rtid = rtid
   }
 
-  addChild(state: string | {}, name: string, componentData: {}): Tree {
-    const newChild: Tree = new Tree(state, name, componentData);
+  addChild(state: string | {}, name: string, componentData: {}, rtid: any): Tree {
+    const newChild: Tree = new Tree(state, name, componentData, rtid);
     newChild.parent = this;
     this.children.push(newChild);
     return newChild;
   }
 
-  addSibling(state: string | {}, name: string, componentData: {}): Tree {
-    const newSibling: Tree = new Tree(state, name, componentData);
+  addSibling(state: string | {}, name: string, componentData: {},  rtid: any): Tree {
+    const newSibling: Tree = new Tree(state, name, componentData, rtid);
     newSibling.parent = this.parent;
     this.parent.children.push(newSibling);
     return newSibling;
@@ -84,7 +87,7 @@ class Tree {
       circularComponentTable.clear();
     }
     // creates copy of present node
-    let copy: Tree = new Tree(this.state, this.name, this.componentData);
+    let copy: Tree = new Tree(this.state, this.name, this.componentData, this.rtid);
     delete copy.parent;
     circularComponentTable.add(this);
     copy = scrubUnserializableMembers(copy);