Merge pull request #10 from haejinjo/fixHooksNamesBug

Fix getHooksNames bug resulting in undefined state fields in Tree visualization

Author: haejinjo

src/backend/helpers.ts

@@ -14,12 +14,16 @@ const jsx = require('acorn-jsx');
 
 const JSXParser = acorn.Parser.extend(jsx());
 
-// Returns a throttled version of an input function
-// The returned throttled function only executes at most once every t milliseconds
-export const throttle = (f : Function, t: number) : Function => {
-  let isOnCooldown : boolean = false;
-  let isCallQueued : boolean = false;
-  const throttledFunc = () : any => {
+/**
+ * @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 => {
+  let isOnCooldown: boolean = false;
+  let isCallQueued: boolean = false;
+  const throttledFunc = (): any => {
     if (isOnCooldown && isCallQueued) return;
     if (isOnCooldown) {
       isCallQueued = true;
@@ -28,7 +32,7 @@ export const throttle = (f : Function, t: number) : Function => {
     f();
     isOnCooldown = true;
     isCallQueued = false;
-    const runAfterTimeout = () : any => {
+    const runAfterTimeout = (): any => {
       if (isCallQueued) {
         isCallQueued = false;
         isOnCooldown = true; // not needed I think
@@ -44,38 +48,42 @@ export const throttle = (f : Function, t: number) : Function => {
 };
 
 // Helper function to grab the getters/setters from `elementType`
-export const getHooksNames = (elementType : string) : Array<string> => {
+
+/**
+ * @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
+ * @returns An array of strings 
+ */
+export const getHooksNames = (elementType: string): Array<string> => {
   // Initialize empty object to store the setters and getter
-  let ast : any;
+  let ast: any;
   try {
     ast = JSXParser.parse(elementType);
   } catch (e) {
+    console.error(`getHooksNames ERROR: Failed to parse elementType string:\n${elementType}`);
     return ['unknown'];
   }
 
-  // const hookState = {};
-  // const hooksNames = {};
-  const hookState: any = {};
   const hooksNames: any = {};
 
   while (Object.hasOwnProperty.call(ast, 'body')) {
-    let tsCount : number = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
+    let tsCount: number = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
     ast = ast.body;
-    const statements : Array<string> = [];
+    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;
+      let body: any;
       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) => {
+      body.forEach((elem: any) => {
         if (elem.type === 'VariableDeclaration') {
-          elem.declarations.forEach((hook : any) => {
+          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
@@ -90,7 +98,7 @@ export const getHooksNames = (elementType : string) : Array<string> => {
               });
             } else {
               if (hook.init.object && hook.init.object.name) {
-                const varName : any = hook.init.object.name;
+                const varName: any = hook.init.object.name;
                 if (!hooksNames[varName] && varName.match(/_use/)) {
                   hooksNames[varName] = hook.id.name;
                 }
@@ -102,9 +110,8 @@ export const getHooksNames = (elementType : string) : Array<string> => {
           });
         }
       });
-
       statements.forEach((el, i) => {
-        if (el.match(/_use/)) hookState[el] = statements[i + 2];
+        if (el.match(/_use/)) hooksNames[el] = statements[i + 2];
       });
     });
   }