Added AtomsComponents and AtomsSelectors as typescript properties in StateRouteProps interface

Author: VNguyenCode

src/app/components/StateRoute.tsx

@@ -31,7 +31,9 @@ interface StateRouteProps {
     state?: string | object;
     stateSnaphot?: object;
     children?: any[];
-    AtomsRelationship?: any[];
+    AtomsComponents?: any;
+    AtomsSelectors?: any;
+
   };
   hierarchy: any;
   snapshots: [];
@@ -41,7 +43,7 @@ interface StateRouteProps {
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
 
-  const isRecoil = snapshot.AtomsRelationship ? true : false;
+  const isRecoil = snapshot.AtomsComponents ? true : false;
   const [noRenderData, setNoRenderData] = useState(false);
 
   // component map zoom state
@@ -79,7 +81,7 @@ const StateRoute = (props: StateRouteProps) => {
   };
 
   const renderAtomsRelationship = () => (
-    <AtomsRelationship atomsRel={snapshot.AtomsRelationship} />
+    <AtomsRelationship atomsRel={snapshot.AtomsComponents} />
   );
 
   // the hierarchy gets set on the first click in the page

src/app/containers/StateContainer.tsx

@@ -28,6 +28,9 @@ const StateContainer = (props:StateContainerProps): unknown => {
     snapshot, hierarchy, snapshots, viewIndex,
   } = props;
   const [Text, setText] = useState('State');
+
+  console.log(props)
+  
   return (
     <Router>
       <div className="state-container">

src/backend/linkFiber.ts

@@ -40,20 +40,21 @@ let initialstart = false;
 if (window[`$recoilDebugStates`]) {
   isRecoil = true;
 }
-function getRecoilState(): any {
-  const RecoilSnapshotsLength = window[`$recoilDebugStates`].length;
-  const lastRecoilSnapshot =
-    window[`$recoilDebugStates`][RecoilSnapshotsLength - 1];
-  const nodeToNodeSubs = lastRecoilSnapshot.nodeToNodeSubscriptions;
-  const nodeToNodeSubsKeys = lastRecoilSnapshot.nodeToNodeSubscriptions.keys();
-  nodeToNodeSubsKeys.forEach((node) => {
-    nodeToNodeSubs
-      .get(node)
-      .forEach((nodeSubs) =>
-        allAtomsRelationship.push([node, nodeSubs, 'atoms and selectors'])
-      );
-  });
-}
+
+// function getRecoilState(): any {
+//   const RecoilSnapshotsLength = window[`$recoilDebugStates`].length;
+//   const lastRecoilSnapshot =
+//     window[`$recoilDebugStates`][RecoilSnapshotsLength - 1];
+//   const nodeToNodeSubs = lastRecoilSnapshot.nodeToNodeSubscriptions;
+//   const nodeToNodeSubsKeys = lastRecoilSnapshot.nodeToNodeSubscriptions.keys();
+//   nodeToNodeSubsKeys.forEach((node) => {
+//     nodeToNodeSubs
+//       .get(node)
+//       .forEach((nodeSubs) =>
+//         allAtomsRelationship.push([node, nodeSubs, 'atoms and selectors'])
+//       );
+//   });
+// }
 
 /**
  * @method sendSnapshot
@@ -72,11 +73,14 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   }
 
   const payload = snap.tree.cleanTreeCopy();
+
   if (isRecoil) {
-    getRecoilState();
-    payload.AtomsRelationship = allAtomsRelationship;
+    // getRecoilState();
+    payload.AtomsComponents = atomsComponents;
+    payload.AtomsSelectors = atomsSelectors;
   }
 
+
   window.postMessage(
     {
       action: 'recordSnap',

src/backend/tree.ts

@@ -45,7 +45,9 @@ class Tree {
 
   parent: Tree
 
-  AtomsRelationship: any;
+  AtomsComponents: any;
+
+  AtomsSelectors: any;
 
   constructor(state: string | {}, name = 'nameless', componentData: {} = {}) {
     this.state = state === 'root' ? 'root' : serializeState(state);

src/extension/background.js

@@ -91,14 +91,14 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
   }
 
   if (rootNode.children) {
-    rootNode.children.forEach(child => {
+    rootNode.children.forEach((child) => {
       changeCurrLocation(tabObj, child, index, name);
     });
   }
 }
 
 // establishing connection with devtools
-chrome.runtime.onConnect.addListener(port => {
+chrome.runtime.onConnect.addListener((port) => {
   // port is one end of the connection - an object
 
   // push every port connected to the ports array
@@ -113,7 +113,7 @@ chrome.runtime.onConnect.addListener(port => {
   }
 
   // every time devtool is closed, remove the port from portsArr
-  port.onDisconnect.addListener(e => {
+  port.onDisconnect.addListener((e) => {
     for (let i = 0; i < portsArr.length; i += 1) {
       if (portsArr[i] === e) {
         portsArr.splice(i, 1);
@@ -123,7 +123,7 @@ chrome.runtime.onConnect.addListener(port => {
   });
 
   // receive snapshot from devtools and send it to contentScript -
-  port.onMessage.addListener(msg => {
+  port.onMessage.addListener((msg) => {
     // msg is action denoting a time jump in devtools
 
     // ---------------------------------------------------------------
@@ -146,13 +146,20 @@ chrome.runtime.onConnect.addListener(port => {
         // records snapshot of page initial state
         tabsObj[tabId].initialSnapshot.push(tabsObj[tabId].snapshots[0]);
         // reset snapshots to page last state recorded
-        tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1]];
+        tabsObj[tabId].snapshots = [
+          tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1],
+        ];
         // records hierarchy of page initial state
-        tabsObj[tabId].initialHierarchy = { ...tabsObj[tabId].hierarchy, children: [] };
+        tabsObj[tabId].initialHierarchy = {
+          ...tabsObj[tabId].hierarchy,
+          children: [],
+        };
         // resets hierarchy
         tabsObj[tabId].hierarchy.children = [];
         // resets hierarchy to page last state recorded
-        tabsObj[tabId].hierarchy.stateSnapshot = { ...tabsObj[tabId].snapshots[0] };
+        tabsObj[tabId].hierarchy.stateSnapshot = {
+          ...tabsObj[tabId].snapshots[0],
+        };
         // resets currLocation to page last state recorded
         tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
         // resets index
@@ -192,10 +199,10 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
   // Filter out tabs that don't have reactime
   if (
-    action === 'tabReload'
-    || action === 'recordSnap'
-    || action === 'jumpToSnap'
-    || action === 'injectScript'
+    action === 'tabReload' ||
+    action === 'recordSnap' ||
+    action === 'jumpToSnap' ||
+    action === 'injectScript'
   ) {
     isReactTimeTravel = true;
   } else {
@@ -263,11 +270,11 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         tabsObj[tabId].currBranch = 0;
 
         // send a message to devtools
-        portsArr.forEach(bg =>
+        portsArr.forEach((bg) =>
           bg.postMessage({
             action: 'initialConnectSnapshots',
             payload: tabsObj,
-          }),
+          })
         );
       }
       reloaded[tabId] = true;
@@ -285,14 +292,14 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
         sendToHierarchy(
           tabsObj[tabId],
-          new Node(request.payload, tabsObj[tabId]),
+          new Node(request.payload, tabsObj[tabId])
         );
         if (portsArr.length > 0) {
-          portsArr.forEach(bg =>
+          portsArr.forEach((bg) =>
             bg.postMessage({
               action: 'initialConnectSnapshots',
               payload: tabsObj,
-            }),
+            })
           );
         }
         break;
@@ -306,17 +313,17 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
         sendToHierarchy(
           tabsObj[tabId],
-          new Node(request.payload, tabsObj[tabId]),
+          new Node(request.payload, tabsObj[tabId])
         );
       }
       // send message to devtools
       if (portsArr.length > 0) {
-        portsArr.forEach(bg =>
+        portsArr.forEach((bg) =>
           bg.postMessage({
             action: 'sendSnapshots',
             payload: tabsObj,
             sourceTab,
-          }),
+          })
         );
       }
       break;
@@ -328,14 +335,14 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 });
 
 // when tab is closed, remove the tabid from the tabsObj
-chrome.tabs.onRemoved.addListener(tabId => {
+chrome.tabs.onRemoved.addListener((tabId) => {
   // tell devtools which tab to delete
   if (portsArr.length > 0) {
-    portsArr.forEach(bg =>
+    portsArr.forEach((bg) =>
       bg.postMessage({
         action: 'deleteTab',
         payload: tabId,
-      }),
+      })
     );
   }
 
@@ -352,11 +359,11 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
     if (changeInfo.title && changeInfo.title !== tabsObj[tabId].title) {
       // tell devtools which tab to delete
       if (portsArr.length > 0) {
-        portsArr.forEach(bg =>
+        portsArr.forEach((bg) =>
           bg.postMessage({
             action: 'deleteTab',
             payload: tabId,
-          }),
+          })
         );
       }
 
@@ -372,14 +379,14 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
 });
 
 // when tab is view change, put the tabid as the current tab
-chrome.tabs.onActivated.addListener(info => {
+chrome.tabs.onActivated.addListener((info) => {
   // tell devtools which tab to be the current
   if (portsArr.length > 0) {
-    portsArr.forEach(bg =>
+    portsArr.forEach((bg) =>
       bg.postMessage({
         action: 'changeTab',
         payload: info,
-      }),
+      })
     );
   }
 });