useState-useContext

Author: Rocky Lin

package/astParser.js

@@ -12,27 +12,43 @@ module.exports = elementType => {
   while (Object.hasOwnProperty.call(ast, 'body')) {
     // Traverse down .body once before invoking parsing logic and will loop through any .body after
     ast = ast.body;
-    // Iterate through AST of every function declaration
-    // Check within each function declaration if there are hook declarations
-    ast.forEach(functionDec => {
-      const { body } = functionDec.body;
-      const statements = [];
-      // Traverse through the function's funcDecs and Expression Statements
-      body.forEach(program => {
-        // Hook Declarations will only be under 'VariableDeclaration' type
-        if (program.type === 'VariableDeclaration') {
-          program.declarations.forEach(dec => {
-            statements.push(dec.id.name);
-          });
-        }
+    const statements = [];
+
+    // handle useState useContext
+    if (ast[0].expression.body.body) {
+      ast = ast[0].expression.body.body;
+      // Hook Declarations will only be under 'VariableDeclaration' type
+      hookDeclare(ast);
+      // Iterate array and determine getter/setters based on pattern
+      stMent(statements); // add key-value to hookState
+    } else {
+      // Iterate through AST of every function declaration
+      // Check within each function declaration if there are hook declarations
+      ast.forEach(functionDec => {
+        const { body } = functionDec.body;
+        // Traverse through the function's funcDecs and Expression Statements
+        hookDeclare(body);
+        // Iterate array and determine getter/setters based on pattern
+        stMent(statements); // add key-value to hookState
       });
-      // Iterate through the array and determine getter/setters based on pattern
-      for (let i = 0; i < statements.length; i += 1) {
-        if (statements[i].match(/_use/)) {
-          hookState[statements[i]] = statements[i + 2];
-        }
+    }
+  }
+
+  function stMent(st) {
+    st.forEach((el, i) => {
+      if (el.match(/_use/)) hookState[el] = statements[i + 2];
+    });
+  }
+
+  function hookDeclare(astVal) {
+    astVal.forEach(elem => {
+      if (elem.type === 'VariableDeclaration') {
+        elem.declarations.forEach(decClar => {
+          statements.push(decClar.id.name);
+        });
       }
     });
   }
+
   return hookState;
 };

package/linkFiber.js

@@ -31,7 +31,7 @@ module.exports = (snap, mode) => {
     const oldSetState = component.setState.bind(component);
     // replace component's setState so developer doesn't change syntax
     // component.setState = newSetState.bind(component);
-    component.setState = (state, callback = () => { }) => {
+    component.setState = (state, callback = () => {}) => {
       // don't do anything if state is locked
       // UNLESS we are currently jumping through time
       if (mode.locked && !mode.jumping) return;
@@ -70,10 +70,11 @@ module.exports = (snap, mode) => {
     let index = 0;
     astHooks = Object.values(astHooks);
     // while memoizedState is truthy, save the value to the object
-    while (memoizedState && memoizedState.queue) { // prevents useEffect from crashing on load
-      if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
-        changeUseState(memoizedState);
-      }
+    while (memoizedState && memoizedState.queue) {
+      // prevents useEffect from crashing on load
+      // if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
+      changeUseState(memoizedState);
+      // }
       // memoized[astHooks[index]] = memoizedState.memoizedState;
       memoized[astHooks[index]] = memoizedState.memoizedState;
       // Reassign memoizedState to its next value
@@ -104,7 +105,10 @@ module.exports = (snap, mode) => {
       changeSetState(stateNode);
     }
     // Check if the component uses hooks
-    if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
+    if (
+      memoizedState &&
+      Object.hasOwnProperty.call(memoizedState, 'baseState')
+    ) {
       // Traverse through the currentFiber and extract the getters/setters
       astHooks = astParser(elementType);
       saveState(astHooks);

src/extension/background.js

@@ -8,10 +8,9 @@ const firstSnapshotReceived = {};
 // there will be the same number of objects in here as there are reactime tabs open for each user application being worked on
 const tabsObj = {};
 
-console.log("background scripts");
+console.log('background scripts');
 
 function createTabObj(title) {
-
   // update tabsObj
   return {
     title,
@@ -62,14 +61,17 @@ function changeCurrLocation(tabObj, rootNode, index) {
     return;
     // if not, recurse on each one of the children
   }
-  rootNode.children.forEach(child => {
-    changeCurrLocation(tabObj, child, index);
-  });
+  // added if (rootNode.children) { <=======
+  if (rootNode.children) {
+    rootNode.children.forEach(child => {
+      changeCurrLocation(tabObj, child, index);
+    });
+  }
 }
 
-
 // establishing connection with devtools
-chrome.runtime.onConnect.addListener(port => { // port is one end of the connection - an object
+chrome.runtime.onConnect.addListener(port => {
+  // port is one end of the connection - an object
 
   // push every port connected to the ports array
   portsArr.push(port);
@@ -92,8 +94,9 @@ chrome.runtime.onConnect.addListener(port => { // port is one end of the connect
     }
   });
 
-  // receive snapshot from devtools and send it to contentScript - 
-  port.onMessage.addListener(msg => { // msg is action denoting a time jump in devtools
+  // receive snapshot from devtools and send it to contentScript -
+  port.onMessage.addListener(msg => {
+    // msg is action denoting a time jump in devtools
 
     // ---------------------------------------------------------------
     // message incoming from devTools should look like this:
@@ -143,7 +146,11 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   let isReactTimeTravel = false;
 
   // Filter out tabs that don't have reactime
-  if (action === 'tabReload' || action === 'recordSnap' || action === 'jumpToSnap') {
+  if (
+    action === 'tabReload' ||
+    action === 'recordSnap' ||
+    action === 'jumpToSnap'
+  ) {
     isReactTimeTravel = true;
   } else return;
 
@@ -175,10 +182,12 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         tabsObj[tabId].index = 1;
 
         // send a message to devtools
-        portsArr.forEach(bg => bg.postMessage({
-          action: 'initialConnectSnapshots',
-          payload: tabsObj,
-        }));
+        portsArr.forEach(bg =>
+          bg.postMessage({
+            action: 'initialConnectSnapshots',
+            payload: tabsObj,
+          })
+        );
       }
       reloaded[tabId] = true;
       break;
@@ -191,12 +200,17 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         reloaded[tabId] = false;
 
         tabsObj[tabId].snapshots.push(request.payload);
-        sendToHierarchy(tabsObj[tabId], new Node(request.payload, tabsObj[tabId]));
+        sendToHierarchy(
+          tabsObj[tabId],
+          new Node(request.payload, tabsObj[tabId])
+        );
         if (portsArr.length > 0) {
-          portsArr.forEach(bg => bg.postMessage({
-            action: 'initialConnectSnapshots',
-            payload: tabsObj,
-          }));
+          portsArr.forEach(bg =>
+            bg.postMessage({
+              action: 'initialConnectSnapshots',
+              payload: tabsObj,
+            })
+          );
         }
         break;
       }
@@ -207,15 +221,20 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       } else {
         tabsObj[tabId].snapshots.push(request.payload);
         //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
-        sendToHierarchy(tabsObj[tabId], new Node(request.payload, tabsObj[tabId]));
+        sendToHierarchy(
+          tabsObj[tabId],
+          new Node(request.payload, tabsObj[tabId])
+        );
       }
       // send message to devtools
       if (portsArr.length > 0) {
-        portsArr.forEach(bg => bg.postMessage({
-          action: 'sendSnapshots',
-          payload: tabsObj,
-          sourceTab,
-        }));
+        portsArr.forEach(bg =>
+          bg.postMessage({
+            action: 'sendSnapshots',
+            payload: tabsObj,
+            sourceTab,
+          })
+        );
       }
       break;
     }
@@ -228,10 +247,12 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 chrome.tabs.onRemoved.addListener(tabId => {
   // tell devtools which tab to delete
   if (portsArr.length > 0) {
-    portsArr.forEach(bg => bg.postMessage({
-      action: 'deleteTab',
-      payload: tabId,
-    }));
+    portsArr.forEach(bg =>
+      bg.postMessage({
+        action: 'deleteTab',
+        payload: tabId,
+      })
+    );
   }
 
   // delete the tab from the tabsObj
@@ -253,7 +274,7 @@ chrome.runtime.onInstalled.addListener(() => {
 // when context menu is clicked, listen for the menuItemId,
 // if user clicked on reactime, open the devtools window
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
-  console.log("clicked menu");
+  console.log('clicked menu');
   const options = {
     type: 'panel',
     left: 0,