working Recoil except time jump, implemented Map component

Author: hienqn

.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

readme2.md renamed to readme_2.md

@@ -3,12 +3,12 @@ This documentation explains the architecture of Reactime v4.
 
 ![demo](./AppStructureDiagram.png)
 
-In the src folder, there are three directory: app, backend, and extension. 
+In the src folder, there are three directories: app, backend, and extension. 
 
 
-The app folder is responsible a SPA application that you see when you open the chrome dev tools under the reactime tab. 
+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 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. 
 
@@ -25,7 +25,7 @@ Just to reiterate, contentscript is use to read and modify information that is r
 
 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 to send to the contentscript every specified miliseconds.
+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.

src/backend/helpers.js

@@ -101,10 +101,6 @@ export const getHooksNames = (elementType) => {
         }
       });
 
-      // el !== undefined &&
-      // Iterate array and determine getter/setters based on pattern
-      // console.log('abc');
-      console.log(3);
       statements.forEach((el, i) => {
         if (el.match(/_use/)) hookState[el] = statements[i + 2];
       });

src/backend/linkFiber.ts

@@ -50,8 +50,6 @@ import componentActionsRecord from './masterState';
 import { throttle, getHooksNames } from './helpers';
 import ReactDOM from 'react-dom';
 
-console.log(ReactDOM);
-
 declare global {
   interface Window {
     __REACT_DEVTOOLS_GLOBAL_HOOK__?: any;
@@ -61,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;
 
@@ -97,9 +94,6 @@ 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;
@@ -158,7 +152,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     }
 
     let hooksIndex;
-    // RECOIL
     let isRecoil = false;
 
     if (window[`$recoilDebugStates`]) {
@@ -173,7 +166,7 @@ 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 = [];
@@ -183,16 +176,12 @@ 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;
@@ -213,10 +202,8 @@ 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
@@ -239,7 +226,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     //REGULAR REACT HOOKS
     if (memoizedState && (tag === 0 || tag === 1 || tag === 2 || tag === 10) && 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,
@@ -266,7 +252,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     }
 
     // This grabs stateless components
-
     if (!componentFound && (tag === 0 || tag === 1 || tag === 2)) {
       newState = 'stateless';
     }
@@ -324,10 +309,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       snap.tree = createTree(current);
     }
 
-    console.log('Fiber', fiberRoot.current);
-
-    console.log('SNAP.TREE->', snap.tree);
-
     sendSnapshot();
   }
 
@@ -352,14 +333,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);
-
-    let snapshot = useRecoilSnapshot();
-    console.log('here is an example of snapshot', snapshot);
-    console.log(RecoilRoot);
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {

src/backend/timeJump.ts

@@ -49,12 +49,14 @@ export default (origin, mode) => {
       }, () => target.children.forEach(child => jump(child)));
     }
 
+    console.log('TARGET', target);
     // Check for hooks state and set it with dispatch()
     if (target.state && target.state.hooksState) {
       target.state.hooksState.forEach(hook => {
         const hooksComponent = componentActionsRecord.getComponentByIndex(target.componentData.hooksIndex);
         const hookState = Object.values(hook);
         if (hooksComponent && hooksComponent.dispatch) {
+          // console.log('attempt to dispatch this', hooksComponent, hookState[0]);
           hooksComponent.dispatch(hookState[0]);
         }
       });