Initial docs commit

Author: haejinjo

package.json

@@ -42,8 +42,12 @@
     "Ergi Shehu",
     "Gabriela Jardim Aquino",
     "Gregory Panciera",
+    "Haejin Jo",
+    "Hien Nguyen",
+    "Jack Crish",
     "Josh Kim",
     "Joshua Howard",
+    "Kevin Fey",
     "Nathanael Wa Mwenze",
     "Prasanna Malla",
     "Rajeeb Banstola",
@@ -121,4 +125,4 @@
     "react-select": "^3.1.0",
     "recoil": "0.0.10"
   }
-}
+}

src/backend/helpers.ts

@@ -9,29 +9,43 @@
 // 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());
-
 /**
  * @method throttle
  * @param f A function to throttle
  * @param t A number of milliseconds to use as throttling interval
  * @returns A function that limits input function, `f`, from being called more than once every `t` milliseconds
+ *
  */
 export const throttle = (f: Function, t: number): Function => {
+  // Initialize boolean flags for callback, throttledFunc
   let isOnCooldown: boolean = false;
   let isCallQueued: boolean = false;
+
+  // Wrap the passed-in function, f, in a callback function that "throttles"
+  // (puts a limit on) the number of calls that can be made to function, f
+  // in a given period of time (ms), t
   const throttledFunc = (): any => {
+    // CASE 1: In cooldown mode and we already have a function waiting to be executed,
+    //         so do nothing
     if (isOnCooldown && isCallQueued) return;
+
+    // CASE 2: In cooldown mode, but we have no functions waiting to be executed,
+    //         so just make note that we now have a call waiting to be executed and return
     if (isOnCooldown) {
       isCallQueued = true;
       return;
     }
+
+    // CASE 3: If we are ready to "fire":
+    // Execute the function, f, immediately
     f();
+    // Initiate a new cooldown period and reset the "call queue"
     isOnCooldown = true;
     isCallQueued = false;
+
+    // Declare a function that checks whether we have
+    // another function to be executed right after.
     const runAfterTimeout = (): any => {
       if (isCallQueued) {
         isCallQueued = false;
@@ -42,16 +56,17 @@ export const throttle = (f: Function, t: number): Function => {
       }
       isOnCooldown = false;
     };
+
     setTimeout(runAfterTimeout, t);
   };
+
   return throttledFunc;
 };
 
 // Helper function to grab the getters/setters from `elementType`
-
 /**
  * @method getHooksNames
- * @param elementType The fiber (whose hooks we want) `type`, A stringified function of the component the Fiber whose hooks we want corresponds to
+ * @param elementType The fiber `type`, A stringified function of the component the Fiber whose hooks we want corresponds to
  * @returns An array of strings 
  */
 export const getHooksNames = (elementType: string): Array<string> => {
@@ -60,41 +75,39 @@ export const getHooksNames = (elementType: string): Array<string> => {
   try {
     ast = JSXParser.parse(elementType);
   } catch (e) {
-    console.error(`getHooksNames ERROR: Failed to parse elementType string:\n${elementType}`);
     return ['unknown'];
   }
 
   const hooksNames: any = {};
 
+  // Begin search for hook names, only if ast has a body property.
   while (Object.hasOwnProperty.call(ast, 'body')) {
     let tsCount: number = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
     ast = ast.body;
-    const statements: Array<string> = [];
 
+    // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
+    const statements: Array<string> = [];
     /** 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: any;
-      if (functionDec.expression && functionDec.expression.body)
-        body = functionDec.expression.body.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: any) => {
+        // Hooks will always be contained in a variable declaration
         if (elem.type === 'VariableDeclaration') {
           elem.declarations.forEach((hook: any) => {
-            // * 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
+            // Parse destructured statements pair
             if (hook.id.type === 'ArrayPattern') {
               hook.id.elements.forEach((hook) => {
                 statements.push(`_useWildcard${tsCount}`);
                 statements.push(hook.name);
                 tsCount += 1;
               });
+              // Process hook function invocation ?
             } else {
               if (hook.init.object && hook.init.object.name) {
                 const varName: any = hook.init.object.name;