Merge pull request #13 from oslabs-beta/chris-10-29

added concurrent support 11/13

Author: prasmalla

package/astParser.js

@@ -9,47 +9,40 @@ module.exports = elementType => {
   // Initialize empty object to store the setters and getter
   let ast = JSXParser.parse(elementType);
   const hookState = {};
-  // All module exports will always start off as a single 'FunctionDeclaration' type
+
   while (Object.hasOwnProperty.call(ast, 'body')) {
-    // Traverse down .body once before invoking parsing logic and will loop through any .body after
     ast = ast.body;
     const statements = [];
 
-    function saveAstHooks(st) {
-      st.forEach((el, i) => {
-        if (el.match(/_use/)) hookState[el] = statements[i + 2];
-      });
-    }
-
-    function findHookDeclarations(astVal) {
-      astVal.forEach(elem => {
+    /** All module exports always start off as a single 'FunctionDeclaration' type
+     * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
+     * Iterate through AST of every function declaration
+     * Check within each function declaration if there are hook declarations */
+    ast.forEach(functionDec => {
+      let body;
+      if (functionDec.expression) body = functionDec.expression.body.body;
+      else body = functionDec.body.body;
+      // Traverse through the function's funcDecs and Expression Statements
+      body.forEach(elem => {
         if (elem.type === 'VariableDeclaration') {
-          elem.declarations.forEach(decClar => {
-            statements.push(decClar.id.name);
+          elem.declarations.forEach(hook => {
+            statements.push(hook.id.name);
           });
         }
       });
-    }
 
-    // handle useState useContext
-    if (ast[0].expression.body.body) {
-      ast = ast[0].expression.body.body;
-      // Hook Declarations will only be under 'VariableDeclaration' type
-      findHookDeclarations(ast);
+      /* body will look something like:
+      [ 0: "_useState"
+        1: "_useState2"
+        2: "character"
+        3: "setCharacter" ]
+      */
+
       // Iterate array and determine getter/setters based on pattern
-      saveAstHooks(statements); // add key-value to hookState
-    } else {
-      // TODO test if this is needed, backward compatibility?
-      // 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
-        findHookDeclarations(body);
-        // Iterate array and determine getter/setters based on pattern
-        saveAstHooks(statements); // add key-value to hookState
+      statements.forEach((el, i) => {
+        if (el.match(/_use/)) hookState[el] = statements[i + 2];
       });
-    }
+    });
   }
   return hookState;
 };

package/linkFiber.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 /* eslint-disable func-names */
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-param-reassign */
@@ -10,6 +11,7 @@ const { saveState } = require('./masterState');
 module.exports = (snap, mode) => {
   let fiberRoot = null;
   let astHooks;
+  let concurrent = false; // flag to check if we are in concurrent mode
 
   function sendSnapshot() {
     // don't send messages while jumping or while paused
@@ -70,20 +72,24 @@ 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) {
+    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
       memoizedState = memoizedState.next;
-      index += 2; // Increment the index by 2
+      // Increment the index by 2
+      index += 2;
     }
     return memoized;
   }
 
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
 
+
     const {
       sibling,
       stateNode,
@@ -101,10 +107,11 @@ module.exports = (snap, mode) => {
       changeSetState(stateNode);
     }
     // Check if the component uses hooks
-    if (
-      memoizedState
-      && Object.hasOwnProperty.call(memoizedState, 'baseState')
-    ) {
+    // console.log("memoizedState", memoizedState);
+
+    if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
+      // 'catch-all' for suspense elements (experimental)
+      if (typeof elementType.$$typeof === 'symbol') return;
       // Traverse through the currentFiber and extract the getters/setters
       astHooks = astParser(elementType);
       saveState(astHooks);
@@ -122,20 +129,39 @@ module.exports = (snap, mode) => {
   }
   // runs when page initially loads
   // but skips 1st hook click
-  function updateSnapShotTree() {
-    const { current } = fiberRoot;
+  async function updateSnapShotTree() {
+    let current;
+    // if concurrent mode, grab current.child'
+    if (concurrent) {
+      // we need a way to wait for current child to populate
+      const promise = new Promise((resolve, reject) => {
+        setTimeout(() => resolve(fiberRoot.current.child), 400);
+      });
+
+      current = await promise;
+
+      current = fiberRoot.current.child;
+    } else {
+      current = fiberRoot.current;
+    }
+
     snap.tree = createTree(current);
   }
 
-  return container => {
-    const {
-      _reactRootContainer: { _internalRoot },
-      _reactRootContainer,
-    } = container;
-    // only assign internal rootp if it actually exists
-    fiberRoot = _internalRoot || _reactRootContainer;
+  return async container => {
+    if (container._internalRoot) {
+      fiberRoot = container._internalRoot;
+      concurrent = true;
+    } else {
+      const {
+        _reactRootContainer: { _internalRoot },
+        _reactRootContainer,
+      } = container;
+      // only assign internal rootp if it actually exists
+      fiberRoot = _internalRoot || _reactRootContainer;
+    }
 
-    updateSnapShotTree();
+    await updateSnapShotTree();
     // send the initial snapshot once the content script has started up
     window.addEventListener('message', ({ data: { action } }) => {
       if (action === 'contentScriptStarted') sendSnapshot();

src/extension/contentScript.js

@@ -3,7 +3,8 @@ let firstMessage = true;
 // listening for messages from npm package
 window.addEventListener('message', msg => { // runs automatically every second
   // window listener picks up the message it sends, so we should filter
-  // messages sent by contentscript
+  // messages sent by contentscrip
+
   if (msg.data.action !== 'contentScriptStarted' && firstMessage) {
     // since contentScript is run everytime a page is refreshed
     // tell the background script that the tab has reloaded
@@ -21,7 +22,6 @@ window.addEventListener('message', msg => { // runs automatically every second
 
 // listening for messages from the UI
 chrome.runtime.onMessage.addListener(request => { // seems to never fire
-
   // send the message to npm package
   const { action } = request;
   switch (action) {