adding readme2.md

Author: hienqn

readme2.md

@@ -1,10 +1,11 @@
-This documentation explains the architecture of Reactime v.4.
+This documentation explains the architecture of Reactime v4.
 
 
 ![demo](./AppStructureDiagram.png)
 
 In the src folder, there are three directory: 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 backend folder is responsible for generating data and handle time jump request from the background.js scripts in extension. 
@@ -22,9 +23,11 @@ The extension folder is where the contentscript.js and background.js located. Th
 
 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 the following:
+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, 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.
 
+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.
 
-2. This contentscript always listens to the messages being sent from the interface of the browser, so when it receives data, it will send that immediately to the background script, the background script will update an object that persist in background script file called **tabsObj**. It is this object that is sent to the reactime dev tools which is written the app folder. How does the reactime dev tools know? It listens to the events from the background script by using useEffect hook in whatever components that need the data.
+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.

src/backend/astParser.js

@@ -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];
       });
     });
   }