Merge pull request #120 from open-source-labs/ast-update

AST implementation fixed using elementType prop

Author: yujinkay

package/astParser.js

@@ -1,11 +1,11 @@
 const acorn = require('acorn');
 const jsx = require('acorn-jsx');
-
 const JSXParser = acorn.Parser.extend(jsx());
 
-// Helper function to recursively traverse AST of a specified component for all hook declarations
-function getHookNames(ast) {
+// Helper function to grab the getters/setters from `elementType`
+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')) {
@@ -35,19 +35,3 @@ function getHookNames(ast) {
   }
   return hookState;
 }
-
-module.exports = file => {
-  // Create an empty object to allow all invocations of getHookNames to consolidate
-  let allHookNames = {};
-  const ast = JSXParser.parse(file);
-  // console.log('Original File', file.toString());
-  // console.log('Original AST', ast);
-  // Upsert any new/updated {_hookType#: hookName} pairs
-  allHookNames = {
-    ...allHookNames,
-    ...getHookNames(ast),
-  };
-
-  // Return the object with setters and getters
-  return allHookNames;
-};

package/linkFiber.js

@@ -3,9 +3,6 @@
 /* eslint-disable no-param-reassign */
 // links component state tree to library
 // changes the setState method to also update our snapshot
-
-// import loadable from '@loadable/component';
-
 const Tree = require('./tree');
 const astParser = require('./astParser');
 const { saveState } = require('./masterState');
@@ -55,9 +52,8 @@ module.exports = (snap, mode) => {
     component.queue.dispatch = (fiber, queue, action) => {
       // don't do anything if state is locked
       if (mode.locked && !mode.jumping) return;
-      // oldDispatch(fiber, queue, action);
+      oldDispatch(fiber, queue, action);
       setTimeout(() => {
-        oldDispatch(fiber, queue, action);
         updateSnapShotTree();
         sendSnapshot();
       }, 100);
@@ -87,12 +83,13 @@ module.exports = (snap, mode) => {
 
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
-
+   
     const {
       sibling,
       stateNode,
       child,
       memoizedState,
+      elementType,
     } = currentFiber;
 
     let nextTree = tree;
@@ -105,8 +102,11 @@ module.exports = (snap, mode) => {
     }
     // Check if the component uses hooks
     if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
-      // Add a traversed property and initialize to the evaluated result
-      // of invoking traverseHooks, and reassign nextTree
+      // Traverse through the currentFiber and extract the getters/setters
+      astHooks = astParser(elementType); 
+      saveState(astHooks); 
+      // Create a traversed property and assign to the evaluated result of 
+      // invoking traverseHooks with memoizedState
       memoizedState.traversed = traverseHooks(memoizedState);
       nextTree = tree.appendChild(memoizedState);
     }
@@ -124,20 +124,14 @@ module.exports = (snap, mode) => {
     snap.tree = createTree(current);
   }
 
-  return (container, entryFile) => {
+  return container => {
     const {
       _reactRootContainer: { _internalRoot },
       _reactRootContainer,
     } = container;
     // only assign internal rootp if it actually exists
     fiberRoot = _internalRoot || _reactRootContainer;
-    // If hooks are implemented, traverse through the source code
-    // Save the getter/setter combo for timeJump
-    if (entryFile) {
-      astHooks = astParser(entryFile);
-      // console.log('Ast Hooks', astHooks);
-      saveState(astHooks);
-    }
+  
     updateSnapShotTree();
     // send the initial snapshot once the content script has started up
     window.addEventListener('message', ({ data: { action } }) => {

package/package-lock.json

@@ -22,7 +22,6 @@ chrome.runtime.onMessage.addListener(request => {
   const { action } = request;
   switch (action) {
     case 'jumpToSnap':
-      console.log('jumpped to snap', request);
       chrome.runtime.sendMessage(request);
       window.postMessage(request);
       break;