Merge pull request #54 from crperezt/feature2

Added hooks useState state names to snapshots; performance changes

Author: crperezt

.vscode/settings.json

@@ -1,3 +1,22 @@
 {
-  "eslint.enable": true
+  "eslint.enable": true,
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#93e6fc",
+    "activityBar.activeBorder": "#fa45d4",
+    "activityBar.background": "#93e6fc",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#fa45d4",
+    "activityBarBadge.foreground": "#15202b",
+    "statusBar.background": "#61dafb",
+    "statusBar.border": "#61dafb",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#2fcefa",
+    "titleBar.activeBackground": "#61dafb",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.border": "#61dafb",
+    "titleBar.inactiveBackground": "#61dafb99",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#61dafb"
 }

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/__tests__/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Testing LinkFiber</title>
+</head>
+<body>
+  
+</body>
+</html>

dev-reactime/__tests__/linkFiber.test.js

@@ -1,13 +1,21 @@
 /* eslint-disable react/jsx-filename-extension */
 import React, { Component } from 'react';
 import { render } from 'react-dom';
+import linkFiberStart from '../linkFiber';
+// import 'expect-puppeteer';
+import puppeteer from 'puppeteer';
 
-const linkFiberRequire = require('../linkFiber');
+const SERVER = require('./puppeteerServer');
+
+const APP = 'http://localhost:3002';
 
 let linkFiber;
 let mode;
 let snapShot;
 
+let browser;
+let page;
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -21,24 +29,59 @@ class App extends Component {
 }
 
 describe('unit test for linkFiber', () => {
+  beforeAll(async () => {
+    await SERVER;
+    const args = puppeteer.defaultArgs().filter(arg => String(arg).toLowerCase() !== '--disable-extensions');
+    browser = await puppeteer.launch({
+      args: args.concat(['--no-sandbox', '--disable-setuid-sandbox',
+        '---extensions-on-chrome-urls',
+        '--whitelisted-extension-id=fmkadmapgofadopljbjfkapdkoienihi',
+        '--whitelisted-extension-id=hilpbahfbckghckaiafiiinjkeagmfhn',
+        '--load-extension=/mnt/d/Libraries/Documents/codeRepos/reactime/src/extension/build']),
+      devtools: true,
+      ignoreDefaultArgs: true,
+      // '--load-extension', '../../src/extension/build'],
+
+      // headless: false,
+    });
+
+    const c = await puppeteer.connect({
+      browserWSEndpoint:  browser.wsEndpoint(),   //`ws://${host}:${port}/devtools/browser/<id>`,
+      ignoreHTTPSErrors: false
+    });
+
+    page = await browser.newPage();
+  });
+
+  afterAll(async () => {
+    await SERVER.close();
+
+    await browser.close();
+  });
+
+
   beforeEach(() => {
     snapShot = { tree: null };
     mode = {
       jumping: false,
       paused: false,
       locked: false,
     };
-    linkFiber = linkFiberRequire(snapShot, mode);
+    linkFiber = linkFiberStart(snapShot, mode);
 
-    const container = document.createElement('div');
-    render(<App />, container);
-    linkFiber(container);
+    page.waitForFunction(async lf => {
+      const container = document.createElement('div');
+      render(<App />, container);
+      lf(container);
+    }, {}, linkFiber);
   });
 
   test('linkFiber should mutate the snapshot tree property', () => {
     // linkFiber mutates the snapshot
+
     expect(typeof snapShot.tree).toBe('object');
-    expect(snapShot.tree.component.state).toBe('root');
+    //expect(snapShot.tree.component.state).toBe('root');
+    expect(snapShot.tree.state).toBe('root');
     expect(snapShot.tree.children).toHaveLength(1);
     expect(snapShot.tree.children[0].component.state.foo).toBe('bar');
   });

dev-reactime/__tests__/puppeteerServer.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+
+const app = express();
+
+app.use(express.static(path.resolve(__dirname)));
+
+const server = app.listen(3002);
+// () => {console.log('Express listening on port 3000');}
+
+module.exports = server;

dev-reactime/astParser.js

@@ -1,3 +1,4 @@
+import 'core-js';
 /* eslint-disable no-inner-declarations, no-loop-func */
 // eslint-disable-next-line import/newline-after-import
 const acorn = require('acorn'); // javascript parser

dev-reactime/helpers.js

@@ -0,0 +1,97 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable no-inner-declarations, no-loop-func */
+// eslint-disable-next-line import/newline-after-import
+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
+export const throttle = (f, t) => {
+  let isOnCooldown = false;
+  let isCallQueued = false;
+  const throttledFunc = () => {
+    if (isOnCooldown && isCallQueued) return;
+    if (isOnCooldown) {
+      isCallQueued = true;
+      return;
+    }
+    f();
+    isOnCooldown = true;
+    isCallQueued = false;
+
+    const runAfterTimeout = () => {
+      if (isCallQueued) {
+        isCallQueued = false;
+        isOnCooldown = true; // not needed I think
+        setTimeout(runAfterTimeout, t);
+        return;
+      }
+      isOnCooldown = false;
+    };
+    setTimeout(runAfterTimeout, t);
+  };
+  return throttledFunc;
+};
+
+// Helper function to grab the getters/setters from `elementType`
+export const getHooksNames = elementType => {
+
+  // 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)
+    ast = ast.body;
+    const statements = [];
+
+    /** 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 && 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') {
+          elem.declarations.forEach(hook => {
+            // * TypeScript hooks appear to have no "VariableDeclarator"
+            // * with id.name of _useState, _useState2, etc...
+            // * hook.id.type relevant for TypeScript applications
+            // *
+            // * Works for useState hooks
+            if (hook.id.type === 'ArrayPattern') {
+              hook.id.elements.forEach(hook => {
+                statements.push(hook.name);
+                // * Unshift a wildcard name to achieve similar functionality as before
+                statements.unshift(`_useWildcard${tsCount}`);
+                tsCount += 1;
+              });
+            } 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);
+            }
+          });
+        }
+      });
+
+      // Iterate array and determine getter/setters based on pattern
+      statements.forEach((el, i) => {
+        if (el.match(/_use/)) hookState[el] = statements[i + 2];
+      });
+    });
+  }
+  return Object.values(hooksNames);
+};

dev-reactime/index.js

@@ -10,7 +10,7 @@ import timeJumpStart from './timeJump';
 // * State snapshot object initialized here
 const snapShot = { 
   tree: null,
-  unfilteredTree: null
+  unfilteredTree: null,
 };
 
 const mode = {