adding hooks state names by incorporating ast parser

Author: crperezt

dev-reactime/__tests__/astParser.test.js

@@ -7,21 +7,21 @@
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 // import toJson from 'enzyme-to-json';
-import astParser from '../astParser';
+import { getHooksNames } from '../helpers';
 
 // Newer Enzyme versions require an adapter to a particular version of React
 configure({ adapter: new Adapter() });
 
 describe('AST Unit Tests', () => {
-  describe('astParser', () => {
+  describe('getHooksNames', () => {
     it.skip('Should return object with one getter/setter for a single useState instance', () => {
       const useState = 'const singleUseStateTest = () => { const [testCount, setTestCount] = useState(0); return ( <div> <p> You clicked this {testCount} times </p> <button onClick={() => setTestCount(testCount + 1)}>+1</button> <button onClick={() => setTestCount(testCount - 1)}>-1</button> <hr /> </div> )';
 
       const expectedObject = {
         _useState: 'testCount',
         _useState2: 'setTestCount',
       };
-      expect(astParser(useState)).toEqual(expectedObject);
+      expect(getHooksNames(useState)).toEqual(expectedObject);
     });
 
     it.skip('Should output the right number of properties when taking in multiple function definitions', () => {
@@ -33,26 +33,94 @@ describe('AST Unit Tests', () => {
         _useState3: 'age',
         _useState4: 'setAge',
       };
-      expect(astParser(useState)).toEqual(expectedObject);
-      expect(Object.keys(astParser(useState))).toHaveLength(4);
+      expect(getHooksNames(useState)).toEqual(expectedObject);
+      expect(Object.keys(getHooksNames(useState))).toHaveLength(4);
     });
 
     it.skip('Should ignore any non-hook definitions', () => {
       const useState = 'const singleUseStateTest = () => { const [testCount, setTestCount] = useState(0); const age = 20; return ( <div> <p> You clicked this {testCount} times </p> <button onClick={() => setTestCount(testCount + 1)}>+1</button> <button onClick={() => setTestCount(testCount - 1)}>-1</button> <p> You are {age} years old! </p> <button onClick={age => age + 1}>Get Older</button> <hr /> </div>)';
 
-      expect(Object.keys(astParser(useState))).toHaveLength(2);
+      expect(Object.keys(getHooksNames(useState))).toHaveLength(2);
     });
 
     it.skip('Should return an empty object if no hooks found', () => {
       const useState = 'const singleUseStateTest = () => { const age = 20; return ( <div> <p> You are {age} years old! </p> <button onClick={age => age + 1}>Get Older</button> <hr /> </div>)';
 
-      expect(astParser(useState)).toBe({});
+      expect(getHooksNames(useState)).toBe({});
     });
 
     it.skip('Should throw an error if input is invalid javascript', () => {
       const useState = 'const singleUseStateTest = () => { age: 20; return ( <div> <p> You are {age} years old! </p> <button onClick={age + 1}>Get Older</button></div>) }';
 
-      expect(astParser(useState)).toThrow();
+      expect(getHooksNames(useState)).toThrow();
     });
   });
 });
+
+
+
+/* /*
+console.log('getHooksNames: ', getHooksNames(`function LastSnapshot(props) {
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentSnapshot = _useState2[0],
+      setCurrentSnapshot = _useState2[1];
+
+  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(25),
+      _useState4 = _slicedToArray(_useState3, 2),
+      testState = _useState4[0],
+      setTestState = _useState4[1];
+
+  var _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(50),
+      _useState6 = _slicedToArray(_useState5, 2),
+      testState2 = _useState6[0],
+      setTestState2 = _useState6[1];
+
+  function replacer(name, val) {
+    // Ignore the key that is the name of the state variable
+    if (name === 'currentSnapshot') {
+      console.log('filtering currentSnapshot from display');
+      return undefined;
+    }
+
+    return val;
+  }
+
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
+    window.addEventListener('message', function (_ref) {
+      var _ref$data = _ref.data,
+          action = _ref$data.action,
+          payload = _ref$data.payload;
+
+      if (action === 'recordSnap') {
+        console.log('stringifying payload:', payload);
+        var payloadContent = JSON.stringify(payload, replacer, 1);
+        setCurrentSnapshot(payloadContent);
+        setTestState(function (state) {
+          return state * 2;
+        });
+        setTestState2(function (state) {
+          return state * 2;
+        });
+        console.log('current snapshot', currentSnapshot);
+      }
+    });
+  }, []);
+  /*
+  // This method is for testing. Setting state after the activeSandbox is changed modifies the overall behavior of the sandbox environment.
+  const { activeSandbox } = props;
+  useEffect(() => {
+    // Reset the current snapshot when a new sandbox is entered
+    setCurrentSnapshot('');
+  }, [activeSandbox]);
+  */
+/*
+ return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+  id: "lastSnapshot",
+  className: "ml-5 mt-2",
+  style: {
+    whiteSpace: 'pre'
+  }
+}, testState, testState2, currentSnapshot));
+};`));
+*/

dev-reactime/helpers.js

@@ -1,8 +1,12 @@
 /* eslint-disable linebreak-style */
 /* eslint-disable no-inner-declarations, no-loop-func */
 // eslint-disable-next-line import/newline-after-import
-import acorn from 'acorn'; // javascript parser
-import jsx from 'acorn-jsx';
+const acorn = require('acorn');
+const jsx = require('acorn-jsx');
+// import { acorn } from 'acorn'; // javascript parser
+// import { jsx } from 'acorn-jsx';
+
+const JSXParser = acorn.Parser.extend(jsx());
 
 // Returns a throttled version of an input function
 // The returned throttled function only executes at most once every t milliseconds
@@ -35,10 +39,11 @@ export const throttle = (f, t) => {
 
 // Helper function to grab the getters/setters from `elementType`
 export const getHooksNames = elementType => {
-  const JSXParser = acorn.Parser.extend(jsx());
+
   // Initialize empty object to store the setters and getter
   let ast = JSXParser.parse(elementType);
   const hookState = {};
+  const hooksNames = {};
 
   while (Object.hasOwnProperty.call(ast, 'body')) {
     let tsCount = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
@@ -51,8 +56,8 @@ export const getHooksNames = elementType => {
      * 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;
+      if (functionDec.expression && functionDec.expression.body) body = functionDec.expression.body.body;
+      else body = functionDec.body ? functionDec.body.body : [];
       // Traverse through the function's funcDecs and Expression Statements
       body.forEach(elem => {
         if (elem.type === 'VariableDeclaration') {
@@ -69,7 +74,15 @@ export const getHooksNames = elementType => {
                 statements.unshift(`_useWildcard${tsCount}`);
                 tsCount += 1;
               });
-            } else statements.push(hook.id.name);
+            } else {
+              if (hook.init.object && hook.init.object.name) {
+                const varName = hook.init.object.name;
+                if (!hooksNames[varName] && varName.match(/_use/)) {
+                  hooksNames[varName] = hook.id.name;
+                }
+              }
+              statements.push(hook.id.name);
+            }
           });
         }
       });
@@ -80,5 +93,5 @@ export const getHooksNames = elementType => {
       });
     });
   }
-  return hookState;
-};
+  return Object.values(hooksNames);
+};

dev-reactime/linkFiber.js

@@ -9,25 +9,14 @@
  * that is invoked on
  * @param snap --> Current snapshot
  * @param mode --> Current mode (jumping i.e. time-traveling, locked, or paused)
- * and @returns a function to be invoked on the rootContainer HTMLElement
+ * and @returns a function to be invoked by index.js to initiate snapshot monitoring
  *
  * @function updateSnapShotTree
  * --> Middleware #1: Updates snap object with latest snapshot
  *
  * @function sendSnapshot
  * --> Middleware #2: Gets a copy of the current snap.tree and posts a message to the window
  *
- * @function changeSetState
- * @param component : stateNode property on a stateful class component's FiberNode object
- * --> Binds class component setState method to the component
- * --> Injects middleware into class component's setState method
- *
- * @function changeUseState
- * @param component : memoizedState property on a stateful functional component's FiberNode object
- * --> Binds functional component dispatch method to the component
- * --> Injects middleware into component's dispatch method
- * Note: dispatch is hook equivalent to setState()
- *
  * @function traverseHooks
  * @param memoizedState : memoizedState property on a stateful fctnl component's FiberNode object
  * --> Helper function to traverse through memoizedState
@@ -46,11 +35,14 @@
 
 // const Tree = require('./tree').default;
 // const componentActionsRecord = require('./masterState');
+import acorn from 'acorn'; // javascript parser
+import jsx from 'acorn-jsx';
 import Tree from './tree';
 import componentActionsRecord from './masterState';
-import { throttle } from './helpers';
 
-const DEBUG_MODE = true;
+import { throttle, getHooksNames } from './helpers';
+
+const DEBUG_MODE = false;
 
 const alwaysLog = console.log;
 
@@ -93,7 +85,7 @@ export default (snap, mode) => {
   // a hooks component changes state
   function traverseHooks(memoizedState) {
     const hooksStates = [];
-    if (memoizedState && memoizedState.queue) {
+    while (memoizedState && memoizedState.queue) {
       // Carlos: these two are legacy comments, we should look into them later
       // prevents useEffect from crashing on load
       // if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
@@ -156,14 +148,16 @@ export default (snap, mode) => {
         // We then store them along with the corresponding memoizedState.queue,
         // which includes the dispatch() function we use to change their state.
         const hooksStates = traverseHooks(memoizedState);
-        hooksStates.forEach(state => {
+        const hooksNames = getHooksNames(elementType.toString());
+        console.log('hooks names:', hooksNames);
+        hooksStates.forEach((state, i) => {
           hooksIndex = componentActionsRecord.saveNew(state.state, state.component);
           if (newState && newState.hooksState) {
-            newState.hooksState.push([state.state, hooksIndex]);
+            newState.hooksState.push([{ [hooksNames[i]]: state.state }, hooksIndex]);
           } else if (newState) {
-            newState.hooksState = [[state.state, hooksIndex]];
+            newState.hooksState = [{ [hooksNames[i]]: state.state }, hooksIndex];
           } else {
-            newState = { hooksState: [[state.state, hooksIndex]] };
+            newState = { hooksState: [{ [hooksNames[i]]: state.state }, hooksIndex] };
           }
           componentFound = true;
           console.log('currentFiber of hooks state:', currentFiber);

package-lock.json

@@ -49,8 +49,6 @@
     "@babel/plugin-proposal-decorators": "^7.4.4",
     "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.0.0",
-    "acorn": "^7.3.1",
-    "acorn-jsx": "^5.2.0",
     "babel-loader": "^8.0.6",
     "core-js": "^3.6.5",
     "css-loader": "^3.2.0",
@@ -79,6 +77,8 @@
     "webpack-cli": "^3.3.6"
   },
   "dependencies": {
+    "acorn": "^7.3.1",
+    "acorn-jsx": "^5.2.0",
     "bower": "^1.8.8",
     "d3": "^5.16.0",
     "d3-zoom": "^1.8.3",

package.json

@@ -10,6 +10,9 @@ import './styles.sass';
 const LastSnapshot = props => {
   const [currentSnapshot, setCurrentSnapshot] = useState('');
 
+  const [testState, setTestState] = useState(25);
+  const [testState2, setTestState2] = useState(50);
+
   function replacer(name, val) {
     // Ignore the key that is the name of the state variable
     if (name === 'currentSnapshot') {
@@ -26,6 +29,8 @@ const LastSnapshot = props => {
         console.log('stringifying payload:', payload);
         const payloadContent = JSON.stringify(payload, replacer, 1);
         setCurrentSnapshot(payloadContent);
+        setTestState((state) => state*2);
+        setTestState2((state) => state*2);
         console.log('current snapshot', currentSnapshot);
       }
     });