added testing for lazy loading import statements

Author: andynullwong

package/astParser.js

@@ -1,18 +1,20 @@
 const acorn = require('acorn');
 const jsx = require('acorn-jsx');
+
 const JSXParser = acorn.Parser.extend(jsx());
 
-// Helper function to recursively traverse through the user's codebase 
-// INSERT HERE 
+// Helper function to recursively traverse through the user's codebase
+// INSERT HERE
 
 module.exports = file => {
   // Initialize empty object to store the setters and getter
   const hookState = {};
   const ast = JSXParser.parse(file).body;
+  console.log('AST Tree', ast);
   // Iterate through AST of every function declaration
   // Check within each function declaration if there are hook declarations
   ast.forEach(func => {
-    const { body } = func.body; 
+    const { body } = func.body;
     const statements = [];
     // Traverse through the function's funcDecs and Expression Statements
     body.forEach(program => {

package/index.js

@@ -25,4 +25,12 @@ window.addEventListener('message', ({ data: { action, payload } }) => {
   }
 });
 
-module.exports = linkFiber;
+function visitor() {
+  return './Components/BoardGame.js';
+}
+
+// module.exports = linkFiber;
+module.exports = {
+  reactime: linkFiber,
+  visitor,
+};

package/linkFiber.js

@@ -4,8 +4,8 @@
 // links component state tree to library
 // changes the setState method to also update our snapshot
 const Tree = require('./tree');
-const astParser = require('./astParser'); 
-const { saveState } = require('./masterState'); 
+const astParser = require('./astParser');
+const { saveState } = require('./masterState');
 
 module.exports = (snap, mode) => {
   let fiberRoot = null;
@@ -24,8 +24,9 @@ module.exports = (snap, mode) => {
   }
 
   function changeSetState(component) {
+    console.log('Component', component);
     // check that setState hasn't been changed yet
-    if (component.setState.linkFiberChanged) return;
+    if (component.setState.linkFiberChanged === true) return;
     // make a copy of setState
     const oldSetState = component.setState.bind(component);
     // replace component's setState so developer doesn't change syntax
@@ -46,12 +47,12 @@ module.exports = (snap, mode) => {
 
   function changeUseState(component) {
     if (component.queue.dispatch.linkFiberChanged) return;
-    // store the original dispatch function definition 
-    const oldDispatch = component.queue.dispatch.bind(component.queue);; 
+    // store the original dispatch function definition
+    const oldDispatch = component.queue.dispatch.bind(component.queue);
     // redefine the dispatch function so we can inject our code
     component.queue.dispatch = (fiber, queue, action) => {
       // don't do anything if state is locked
-      if (mode.locked && !mode.jumping) return; 
+      if (mode.locked && !mode.jumping) return;
       oldDispatch(fiber, queue, action);
       setTimeout(() => {
         updateSnapShotTree();
@@ -63,19 +64,19 @@ module.exports = (snap, mode) => {
 
   // Helper function to traverse through the memoized state
   function traverseHooks(memoizedState) {
-    // Declare variables and assigned to 0th index and an empty object, respectively
+    // Declare variables and assigned t  return nextComponent;o 0th index and an empty object, respectively
     const memoized = {};
-    let index = 0; 
-    astHooks = Object.values(astHooks); 
+    let index = 0;
+    astHooks = Object.values(astHooks);
     // while memoizedState is truthy, save the value to the object
     while (memoizedState) {
       changeUseState(memoizedState);
-      //memoized[astHooks[index]] = memoizedState.memoizedState;
-      memoized[astHooks[index]] = memoizedState.memoizedState; 
+      // memoized[astHooks[index]] = memoizedState.memoizedState;
+      memoized[astHooks[index]] = memoizedState.memoizedState;
       // Reassign memoizedState to its next value
       memoizedState = memoizedState.next;
       // Increment the index by 2
-      index += 2; 
+      index += 2;
     }
     return memoized;
   }
@@ -100,7 +101,7 @@ module.exports = (snap, mode) => {
     }
     // Check if the component uses hooks
     if (memoizedState && memoizedState.hasOwnProperty('baseState')) {
-      // Add a traversed property and initialize to the evaluated result 
+      // Add a traversed property and initialize to the evaluated result
       // of invoking traverseHooks, and reassign nextTree
       memoizedState.traversed = traverseHooks(memoizedState);
       nextTree = tree.appendChild(memoizedState);
@@ -125,16 +126,17 @@ module.exports = (snap, mode) => {
     } = container;
     // only assign internal rootp if it actually exists
     fiberRoot = _internalRoot || _reactRootContainer;
-    // If hooks are implemented, traverse through the source code 
+    // If hooks are implemented, traverse through the source code
     // Save the getter/setter combo for timeJump
     if (entryFile) {
       astHooks = astParser(entryFile);
-      saveState(astHooks); 
+      console.log('Ast Hooks', astHooks);
+      saveState(astHooks);
     }
     updateSnapShotTree();
     // send the initial snapshot once the content script has started up
     window.addEventListener('message', ({ data: { action } }) => {
       if (action === 'contentScriptStarted') sendSnapshot();
     });
-  }
+  };
 };

package/masterState.js

@@ -1,3 +1,5 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
 // Export two functions that either saves the AST state object into an array
 // or returns the array for use
 const masterState = [];
@@ -8,7 +10,5 @@ module.exports = {
       masterState.push(state[key]);
     }
   },
-  returnState: () => {
-    return masterState; 
-  },
+  returnState: () => masterState,
 };

package/timeJump.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 // traverses given tree by accessing children through coords array
-const { returnState } = require('./masterState'); 
+const { returnState } = require('./masterState');
 
 function traverseTree(tree, coords) {
   let curr = tree;
@@ -16,6 +16,7 @@ module.exports = (origin, mode) => {
     const originNode = traverseTree(origin.tree, coords);
     // set the state of the origin tree if the component is stateful
     if (originNode.component.setState) {
+      console.log('if(originNode.component.setState):', originNode.component);
       originNode.component.setState(target.state, () => {
         // iterate through new children once state has been set
         target.children.forEach((child, i) => {
@@ -26,7 +27,7 @@ module.exports = (origin, mode) => {
       // if component uses hooks, traverse through the memoize tree
       let current = originNode.component;
       let index = 0;
-      const hooks = returnState(); 
+      const hooks = returnState();
       // while loop through the memoize tree
       while (current) {
         current.queue.dispatch(target.state[hooks[index]]);