Merge pull request #155 from open-source-labs/david/dev-update

Bringing dev branch up to date with the latest master code

Author: rocky9413

.gitignore

@@ -7,6 +7,5 @@ parents
 coverage
 src/extension/build.zip
 src/extension/build.crx
-src/extension/build/key.pem
-bower_components
-package/__tests__/astParser.test.js
+src/extension/build.pem
+bower_components

Dockerfile

@@ -1,4 +1,4 @@
 FROM node:10.16.2
-WORKDIR /usr/src/app 
+WORKDIR /usr/src/app
 COPY package*.json ./
 RUN npm i

build.zip

@@ -5,7 +5,7 @@
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
     "test": "jest --verbose --coverage --watchAll",
-    "lint": "eslint --ext .js --ext .jsx src"
+    "docker-test-lint": "eslint --ext .js --ext .jsx src"
   },
   "keywords": [
     "react",
@@ -22,8 +22,12 @@
   "contributors": [
     "Andy Wong",
     "Bryan Lee",
+    "Chris Flannery",
     "David Chai",
     "Josh Kim",
+    "Prasanna Malla",
+    "Rajeeb Banstola",
+    "Rocky Lin",
     "Ruth Anam",
     "Ryan Dang",
     "Sierra Swaby",

package.json

@@ -1,4 +1,5 @@
-const acorn = require('acorn');
+/* eslint-disable no-inner-declarations */
+const acorn = require('acorn'); // javascript parser
 // eslint-disable-next-line import/newline-after-import
 const jsx = require('acorn-jsx');
 const JSXParser = acorn.Parser.extend(jsx());
@@ -8,30 +9,32 @@ 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;
-    // Iterate through AST of every function declaration
-    // Check within each function declaration if there are hook declarations
+    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 => {
-      const { body } = functionDec.body;
-      const statements = [];
+      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(program => {
-        // Hook Declarations will only be under 'VariableDeclaration' type
-        if (program.type === 'VariableDeclaration') {
-          program.declarations.forEach(dec => {
-            statements.push(dec.id.name);
+      body.forEach(elem => {
+        if (elem.type === 'VariableDeclaration') {
+          elem.declarations.forEach(hook => {
+            statements.push(hook.id.name);
           });
         }
       });
-      // Iterate through the array and determine getter/setters based on pattern
-      for (let i = 0; i < statements.length; i += 1) {
-        if (statements[i].match(/_use/)) {
-          hookState[statements[i]] = statements[i + 2];
-        }
-      }
+
+      // Iterate array and determine getter/setters based on pattern
+      statements.forEach((el, i) => {
+        if (el.match(/_use/)) hookState[el] = statements[i + 2];
+      });
     });
   }
   return hookState;

package/astParser.js

@@ -9,10 +9,25 @@ const mode = {
 const linkFiber = require('./linkFiber')(snapShot, mode);
 const timeJump = require('./timeJump')(snapShot, mode);
 
-window.addEventListener('message', ({ data: { action, payload } }) => {
+function getRouteURL(node) {
+  if (node.name === 'Router') {
+    return node.state.location.pathname;
+  }
+  if (node.children && node.children.length >= 1) {
+    const tempNode = node.children;
+    for (let index = 0; index < tempNode.length; index += 1) {
+      return getRouteURL(tempNode[index]);
+    }
+  }
+}
+
+window.addEventListener('message', ({ data: { action, payload } }) => { // runs automatically twice per second with inspectedElement
   switch (action) {
     case 'jumpToSnap':
       timeJump(payload);
+      // Get the pathname from payload and add new entry to browser history
+      // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
+      window.history.pushState('', '', getRouteURL(payload));
       break;
     case 'setLock':
       mode.locked = payload;

package/index.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
@@ -31,7 +33,7 @@ module.exports = (snap, mode) => {
     const oldSetState = component.setState.bind(component);
     // replace component's setState so developer doesn't change syntax
     // component.setState = newSetState.bind(component);
-    component.setState = (state, callback = () => { }) => {
+    component.setState = (state, callback = () => {}) => {
       // don't do anything if state is locked
       // UNLESS we are currently jumping through time
       if (mode.locked && !mode.jumping) return;
@@ -54,10 +56,10 @@ module.exports = (snap, mode) => {
       // don't do anything if state is locked
       if (mode.locked && !mode.jumping) return;
       oldDispatch(fiber, queue, action);
-      setTimeout(() => {
-        updateSnapShotTree();
-        sendSnapshot();
-      }, 100);
+      // setTimeout(() => {
+      updateSnapShotTree();
+      sendSnapshot();
+      // }, 100);
     };
     component.queue.dispatch.linkFiberChanged = true;
   }
@@ -70,8 +72,11 @@ module.exports = (snap, mode) => {
     let index = 0;
     astHooks = Object.values(astHooks);
     // while memoizedState is truthy, save the value to the object
-    while (memoizedState) {
+    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
@@ -102,7 +107,14 @@ 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);
@@ -120,20 +132,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 root 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();

package/linkFiber.js

@@ -1,6 +1,6 @@
 {
   "name": "reactime",
-  "version": "2.0.4",
+  "version": "2.0.9",
   "description": "A library that helps debug React by memorizing the state of components with every render.",
   "main": "index.js",
   "repository": {
@@ -26,9 +26,13 @@
   "contributors": [
     "Andy Wong",
     "Bryan Lee",
+    "Chris Flannery",
     "David Chai",
     "Josh Kim",
-    "Ruthba Anam",
+    "Prasanna Malla",
+    "Rajeeb Banstola",
+    "Rocky Lin",
+    "Ruth Anam",
     "Ryan Dang",
     "Sierra Swaby",
     "Yujin Kang"
@@ -38,4 +42,4 @@
     "acorn": "^7.1.0",
     "acorn-jsx": "^5.0.2"
   }
-}
+}

package/package-lock.json

@@ -1,8 +1,8 @@
 <p align="center">
-  <img src ="./assets/readme_logo.png" width="400"/>
+  <img src ="./assets/readme-logo-svg.svg" width="300"/>
 </p>
 
-# Reactime: A Time Travel Debugger for React
+<h1 align="center">State Debugger for React</h1>
 
 [![GitHub](https://img.shields.io/github/license/oslabs-beta/reactime)](https://github.com/oslabs-beta/reactime)
 [![Build Status](https://travis-ci.com/oslabs-beta/reactime.svg?branch=master)](https://travis-ci.com/oslabs-beta/reactime)
@@ -11,24 +11,24 @@
 [![DevDependencies](https://david-dm.org/oslabs-beta/reactime/dev-status.svg)](https://david-dm.org/oslabs-beta/reactime?type=dev)
 [![Vulnerabilities](https://snyk.io/test/github/oslabs-beta/reactime/badge.svg)](https://snyk.io/test/github/oslabs-beta/reactime)
 
-[![NPM](https://nodei.co/npm/reactime.png)](https://nodei.co/npm/reactime/)
-
 <p align="center">
+<a href="https://nodei.co/npm/reactime/"><img src="https://nodei.co/npm/reactime.png"></a>
+
   <img src="demo.gif" alt="Demo of Reactime" style="width: 55%">
 </p>
 
-Reactime is a debugging tool for React developers. It records state whenever state is changed and allows user to jump to any previous recorded state.
+Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.
 
-One important thing to note. This devtool is for React apps using only stateful components and prop drilling. If you're using Redux, Hooks, Context, or functional components, this devtool will not function on your app. 
+This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState & useEffect) and functional components.
 
-Another thing is that this library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
+One thing to note is that this library does not work well when mixing React with direct DOM manipulation.
 
-Two parts are needed for this tool to function. The <a href="https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga">chrome extension</a> must be installed, and the NPM package must be installed and used in the React code.
+Two parts are needed for this tool to function. The [**chrome extension**](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga) must be installed, and the [**NPM package**](https://www.npmjs.com/package/reactime) must be installed and used in the React code.
 
 After successfully installing the chrome extension, you can test Reactime functionalities in the demo repositories below.
 
-- <a href="http://reactime-demo1.us-east-1.elasticbeanstalk.com/">Calculator</a>
-- <a href="http://reactime-demo2.us-east-1.elasticbeanstalk.com/">Bitcoin Price Index</a>
+- [Calculator](http://reactime-demo1.us-east-1.elasticbeanstalk.com)
+- [Bitcoin Price Index](http://reactime-demo2.us-east-1.elasticbeanstalk.com)
 
 ## Installing
 
@@ -63,7 +63,7 @@ Then open up your Chrome DevTools. There'll be a new tab called Reactime.
 
 ### Recording
 
-Whenever state is changed (whenever setState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.
+Whenever state is changed (whenever setState or useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.
 
 ### Viewing
 
@@ -73,14 +73,15 @@ You can click on a snapshot to view your app's state. State can be visualized in
 
 Jumping is the most important feature of all. It allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state.
 
-### Others
-
-Other handy features include:
+### And Much More
 
+- multiple tree graph branches depicting state changes
+- tree graph hover functionality to view state changes
+- ability to pan and zoom tree graph
 - multiple tabs support
 - a slider to move through snapshots quickly
 - a play button to move through snapshots automatically
-- a pause which button stops recording each snapshot
+- a pause button, which stops recording each snapshot
 - a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
 - a persist button to keep snapshots upon refresh (handy when changing code and debugging)
 - export/import the current snapshots in memory
@@ -91,6 +92,14 @@ Other handy features include:
 - **Bryan Lee** - [@mylee1995](https://github.com/mylee1995)
 - **Josh Kim** - [@joshua0308](https://github.com/joshua0308)
 - **Sierra Swaby** - [@starkspark](https://github.com/starkspark)
+- **Ruth Anam** - [@peachiecodes](https://github.com/peachiecodes)
+- **David Chai** - [@davidchaidev](https://github.com/davidchai717)
+- **Yujin Kang** - [@yujinkay](https://github.com/yujinkay)
+- **Andy Wong** - [@andywongdev](https://github.com/andywongdev)
+- **Chris Flannery** - [@chriswillsflannery](https://github.com/chriswillsflannery)
+- **Rajeeb Banstola** - [@rajeebthegreat](https://github.com/rajeebthegreat)
+- **Prasanna Malla** - [@prasmalla](https://github.com/prasmalla)
+- **Rocky Lin** - [@rocky9413](https://github.com/rocky9413)
 
 ## License
 

package/package.json

@@ -28,7 +28,7 @@ module.exports = (origin, mode) => {
       let index = 0;
       const hooks = returnState();
       // while loop through the memoize tree
-      while (current) {
+      while (current && current.queue) { // allows time travel with useEffect
         current.queue.dispatch(target.state[hooks[index]]);
         // Reassign the current value
         current = current.next;