Merge branch 'staging' into map

Author: kevinfey

.gitignore

@@ -10,4 +10,5 @@ src/extension/build.crx
 src/extension/build.pem
 bower_components
 sandboxes/manual-tests/NextJS/.next
-.vscode
+.vscode
+src/app/components/Map.tsx

AppStructureDiagram.png

@@ -118,6 +118,7 @@
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.2.0",
-    "react-select": "^3.1.0"
+    "react-select": "^3.1.0",
+    "recoil": "0.0.10"
   }
 }

package-lock.json

@@ -0,0 +1,33 @@
+This documentation explains the architecture of Reactime v4.
+
+
+![demo](./AppStructureDiagram.png)
+
+In the src folder, there are three directories: app, backend, and extension. 
+
+
+The app folder is responsible a SPA that you see when you open the chrome dev tools under the Reactime tab. 
+
+The backend folder is responsible for generating data and handle time-jump request from the background.js scripts in extension. 
+
+The extension folder is where the contentscript.js and background.js located. These two files belongs to Chrome internal to help us handle requests both from the web browser and from the chrome dev tools. Unsure what contentscripts and backgroundscripts are? The details implementation are documented in the files themselves. 
+
+> Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them and pass information to their parent extension. Source: https://developer.chrome.com/extensions/content_scripts
+
+>A background page is loaded when it is needed, and unloaded when it goes idle. Some examples of events include:
+>The extension is first installed or updated to a new version.
+>The background page was listening for an event, and the event is dispatched.
+>A content script or other extension sends a message.
+>Another view in the extension, such as a popup, calls runtime.getBackgroundPage.
+>Once it has been loaded, a background page will stay running as long as it is performing an action, such as calling a Chrome API or issuing a network request. Additionally, the background page will not unload until all visible views and all message ports are closed. Note that opening a view does not cause the event page to load, but only prevents it from closing once loaded. Source: https://developer.chrome.com/extensions/background_pages
+
+Just to reiterate, contentscript is use to read and modify information that is rendered on the webpage, and a host of other objects. Background is very similar to client/server concept in which background is behaving like a server, listening to request from the contentscipt and **the request from the "front-end" of the chrome dev tools in the reactime tab (not the interface of the browser, this is an important distinction.)** In other words, background script works directly with the React Dev Tools, whereas contentscript works with the interface of the browser.
+
+The general flow of data is described in the following steps:
+
+1. When the background bundle is loaded from the browser, it injects a script into the dom. This script uses a technique called [throttle](https://medium.com/@bitupon.211/debounce-and-throttle-160affa5457b) to get the data of the state of the app to send to the contentscript every specified miliseconds (in our case, it's 70ms).
+
+
+2. This contentscript always listens to the messages being sent from the interface of the browser. The recieved data will immediately be sent to the background script which then update an object that persist in background script called **tabsObj**. Each time tabsObj is updated, the most recent version will be sent to the interface of reactime dev tools written the app folder.
+
+3. Likewise, when there is an action from Reactime dev tools - a jump request for example, a request will be made to the background script which is proxied to the content script. This content script will talk to the browser interface to request the *state* that the user wants to jump to. One important thing to note here is that the jump action will be excecuted in the backend script because it has direct access to the DOM.

package.json

@@ -45,13 +45,19 @@ module.exports = elementType => {
                 tsCount += 1;
               });
             } else statements.push(hook.id.name);
+
+            // if (hook.id.name !== undefined){
+            //   statements.push(hook.id.name);
+            // }
+
           });
         }
       });
+      console.log(statements);
 
       // Iterate array and determine getter/setters based on pattern
       statements.forEach((el, i) => {
-        if (el.match(/_use/)) hookState[el] = statements[i + 2];
+        if (el !== undefined && el.match(/_use/)) hookState[el] = statements[i + 2];
       });
     });
   }

readme_2.md

@@ -100,8 +100,7 @@ export const getHooksNames = (elementType) => {
           });
         }
       });
-
-      // Iterate array and determine getter/setters based on pattern
+      
       statements.forEach((el, i) => {
         if (el.match(/_use/)) hookState[el] = statements[i + 2];
       });

src/backend/astParser.js

@@ -36,7 +36,7 @@ import 'core-js';
 
 // const Tree = require('./tree').default;
 // const componentActionsRecord = require('./masterState');
-
+import { useGotoRecoilSnapshot, RecoilRoot, useRecoilSnapshot } from 'recoil';
 import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   Snapshot,
@@ -48,6 +48,7 @@ import {
 import Tree from './tree';
 import componentActionsRecord from './masterState';
 import { throttle, getHooksNames } from './helpers';
+import ReactDOM from 'react-dom';
 
 declare global {
   interface Window {
@@ -58,7 +59,6 @@ declare global {
 let doWork = true;
 const circularComponentTable = new Set();
 
-// module.exports = (snap, mode) => {
 export default (snap: Snapshot, mode: Mode): (() => void) => {
   let fiberRoot = null;
 
@@ -94,9 +94,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
           component: memoizedState.queue,
           state: memoizedState.memoizedState,
         });
-        //console.log('MEMOIZED PROPS ------>', memoizedProps);
-        // console.log('MEMOIZEDSTATE QUEUE------>', memoizedState.queue);
-        // console.log('HOOK STATE ------->', hooksStates);
+
       }
       memoizedState =
         memoizedState.next !== memoizedState ? memoizedState.next : null;
@@ -155,7 +153,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     }
 
     let hooksIndex;
-    // RECOIL
     let isRecoil = false;
 
     if (window[`$recoilDebugStates`]) {
@@ -170,7 +167,8 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     //   });
     atomArray.push(memoizedProps);
 
-    //console.log('1st ATOM ARRAY', atomArray);
+
+    // console.log('1st ATOM ARRAY', atomArray);
 
     function traverseRecoilHooks(memoizedState: any): HookStates {
       const hooksStates: HookStates = [];
@@ -180,17 +178,13 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
           memoizedState.queue.lastRenderedReducer &&
           memoizedState.queue.lastRenderedReducer.name === 'basicStateReducer'
         ) {
-          // console.log('MEM STATE', memoizedState);
           if (Object.entries(memoizedProps).length !== 0) {
             hooksStates.push({
               component: memoizedState.queue,
               state: memoizedProps,
             });
           }
 
-          // console.log('MEMOIZED PROPS ------>', memoizedProps);
-          // console.log('MEMOIZEDSTATE QUEUE------>', memoizedState.queue);
-          // console.log('HOOK STATE ------->', hooksStates);
         }
         memoizedState =
           memoizedState.next !== memoizedState ? memoizedState.next : null;
@@ -211,10 +205,10 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
         // which includes the dispatch() function we use to change their state.
 
         const hooksStates = traverseRecoilHooks(memoizedState);
-       // console.log('HOOK STATE BEFORE LOOPING', hooksStates);
+
         const hooksNames = getHooksNames(elementType.toString());
         hooksStates.forEach((state, i) => {
-         // console.log('STATE IN SAVE NEW LOOP', state);
+
           hooksIndex = componentActionsRecord.saveNew(
             state.state,
             state.component
@@ -251,7 +245,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       isRecoil === false
     ) {
       if (memoizedState.queue) {
-        //console.log('Regular Hooks');
+
         // Hooks states are stored as a linked list using memoizedState.next,
         // so we must traverse through the list and get the states.
         // We then store them along with the corresponding memoizedState.queue,
@@ -278,7 +272,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     }
 
     // This grabs stateless components
-
     if (!componentFound && (tag === 0 || tag === 1 || tag === 2)) {
       newState = 'stateless';
     }
@@ -336,9 +329,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       snap.tree = createTree(current);
     }
 
-    // console.log('Fiber', fiberRoot.current);
-
-    // console.log('SNAP.TREE->', snap.tree);
 
     sendSnapshot();
   }
@@ -364,11 +354,10 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
 
-    console.log('FIBER ROOT', fiberRoot.current);
+    // console.log('FIBER ROOT', fiberRoot.current);
 
     const throttledUpdateSnapshot = throttle(updateSnapShotTree, 70);
     document.addEventListener('visibilitychange', onVisibilityChange);
-
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {

src/backend/helpers.js

@@ -54,6 +54,7 @@ export default (origin, mode) => {
       );
     }
 
+    console.log('TARGET', target);
     // Check for hooks state and set it with dispatch()
     if (target.state && target.state.hooksState) {
       target.state.hooksState.forEach((hook) => {
@@ -63,8 +64,7 @@ export default (origin, mode) => {
         const hookState = Object.values(hook);
         console.log('target', target);
         if (hooksComponent && hooksComponent.dispatch) {
-          console.log('HOOKS COMPONENT', hooksComponent);
-          console.log('HOOKS STATE of Zero', hookState[0]);
+
           hooksComponent.dispatch(hookState[0]);
         }
       });