Merge remote-tracking branch 'origin/feature-hooks' into reactime19.0-Jackie

Author: yuanjackie1

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -8,7 +8,7 @@
 /* eslint-disable guard-for-in */
 // @ts-nocheck
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
 import { LinearGradient } from '@visx/gradient';
@@ -47,9 +47,9 @@ export default function ComponentMap({
   const [orientation, setOrientation] = useState('vertical');
   const [linkType, setLinkType] = useState('diagonal');
   const [stepPercent, setStepPercent] = useState(10);
-  const [Tooltip, setTooltip] = useState(false);
   const [selectedNode, setSelectedNode] = useState('root');
   const [, dispatch] = useStoreContext();
+  const toolTipTimeoutID = useRef(null);
 
   useEffect(() => {
     dispatch(setCurrentTabInApp('map'));
@@ -191,7 +191,6 @@ export default function ComponentMap({
         <LinearGradient id='links-gradient' from='#fd9b93' to='#fe6e9e' />
         <rect
           onClick={() => {
-            setTooltip(false);
             hideTooltip();
           }}
           width={totalWidth}
@@ -266,7 +265,6 @@ export default function ComponentMap({
                           onClick={() => {
                             dispatch(toggleExpanded(node.data));
                             hideTooltip();
-                            setTooltip(false);
                           }}
                         />
                       )}
@@ -290,16 +288,48 @@ export default function ComponentMap({
                           onClick={() => {
                             dispatch(toggleExpanded(node.data));
                             hideTooltip();
-                            setTooltip(false);
                           }}
-                          onMouseOver={(event) => {
-                            setTooltip(true);
+                          // Mouse Enter Rect (Component Node) -----------------------------------------------------------------------
+                          /** This onMouseEnter event fires when the mouse first moves/hovers over a component node.
+                           * The supplied event listener callback produces a Tooltip element for the current node. */ 
+                          
+                          onMouseEnter={(event) => {
+                            /** This 'if' statement block checks to see if you've just left another component node
+                             * by seeing if there's a current setTimeout waiting to close that component node's 
+                             * tooltip (see onMouseLeave immediately below).
+                             * This setTimeout gives the mouse time to enter the tooltip element so the tooltip 
+                             * can persist. If instead of entering said tooltip element you've left the previous 
+                             * component node to enter this component node, this logic will clear the timeout event,
+                             * and close the tooltip. */
+                            if (toolTipTimeoutID.current !== null) {
+                              clearTimeout(toolTipTimeoutID.current);
+                              hideTooltip();
+                            }
+                            /** The following line resets the toolTipTimeoutID.current to null, showing that there
+                            * are no current setTimeouts running. I placed this outside of the above if statement  
+                            * to make sure there are no edge cases that would allow for the toolTipTimeoutID.current
+                            * to hold onto an old reference. */
+                            toolTipTimeoutID.current = null;
+                            //This generates a tooltip for the component node the mouse has entered.
                             handleMouseAndClickOver(event);
                           }}
-                          // with onmouseOver, this produces a hover over effect for the Tooltip
-                          onMouseOut={() => {
-                            hideTooltip();
-                            setTooltip(false);
+
+                          // Mouse Leave Rect (Component Node) --------------------------------------------------------------------------
+                          /** This onMouseLeave event fires when the mouse leaves a component node.
+                           * The supplied event listener callback generates a setTimeout call which gives the 
+                           * mouse a certain amount of time between leaving the current component node and 
+                           * closing the tooltip for that node.
+                           * If the mouse enters the tooltip before the timeout delay has passed, the 
+                           * setTimeout event will be canceled. */
+                          onMouseLeave={() => {
+                            // This line invokes setTimeout and saves its ID to the useRef var toolTipTimeoutID
+                            toolTipTimeoutID.current = setTimeout(() => {
+                              // hideTooltip unmounts the tooltip
+                              hideTooltip();
+                              // As the timeout has been executed, the timeoutID can be reset to null
+                              toolTipTimeoutID.current = null;
+                              //There is a delay of 300 ms
+                            }, 300);
                           }}
                         />
                       )}
@@ -329,33 +359,48 @@ export default function ComponentMap({
           top={tooltipTop}
           left={tooltipLeft}
           style={tooltipStyles}
-          onClick={hideTooltip}
+          
+          //------------- Mouse Over TooltipInPortal--------------------------------------------------------------------
+          /** This onMouseEnter fires when the mouse first moves/hovers over the tooltip
+           * The supplied event listener callback stops the setTimeout that was going to 
+           * close the tooltip from firing */ 
+          
+          onMouseEnter={() => {
+            // The setTimeoutID stored in toolTipTimeoutID.current is from the setTimeout initiated by leaving the 
+            // component node that generated the tooltip. If you've triggered an onMouseEnter event in that tooltip,
+            clearTimeout(toolTipTimeoutID.current);
+            // This line resets the timeoutID to null
+            toolTipTimeoutID.current = null;
+          }}
+
+          //------------- Mouse Leave TooltipInPortal -----------------------------------------------------------------
+          /** This onMouseLeave event fires when the mouse leaves the tooltip 
+           * The supplied event listener callback unmounts the tooltip */
+          onMouseLeave={() => {
+            // hideTooltip unmounts the tooltip
+            hideTooltip();
+          }}
         >
-          <div
-            onClick={() => {
-              setTooltip(false);
-              hideTooltip();
-            }}
-          >
+          <div>
             <div style={{}}>
               {' '}
               <strong>{tooltipData.name}</strong>{' '}
             </div>
             <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
             <div className='stateTip'>
-              State:
-              {formatState(tooltipData.state)}
+              State: {formatState(tooltipData.state)}
             </div>
             <div style={React.scrollStyle}>
               <div className='tooltipWrapper'>
                 <h2>Props:</h2>
                 {formatData(tooltipData.componentData.props, 'props')}
               </div>
-
+              
+              {/* Currently no use for this field
               <div className='tooltipWrapper'>
                 <h2>Initial Context:</h2>
                 {formatData(tooltipData.componentData.context, 'context')}
-              </div>
+              </div> */}
 
               <div className='tooltipWrapper'>
                 <h2>State:</h2>

src/app/index.tsx

@@ -1,7 +1,19 @@
 /* eslint-disable react/jsx-filename-extension */
 import React from 'react';
-import ReactDOM from 'react-dom';
+// import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './components/App';
 import './styles/main.scss';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// Old way of rendering that was locking Reactime into React 17
+// Left for testing purposes
+// ReactDOM.render(<App />, document.getElementById('root'));
+
+//New way of rendering that allows us to use React 18
+const root = createRoot(document.getElementById("root"));
+root.render(
+  //Strict mode is for developers, it throws extra errors 
+  // <StrictMode>
+    <App/>
+  // </StrictMode>
+);

src/backend/controllers/statePropExtractors.ts

@@ -83,7 +83,9 @@ export function getHooksStateAndUpdateMethod(
 
 // ---------------------GET STATE VAR NAME & HOOK NAME--------------------------
 /**
- * This function receive a string representation of a functional component. This function then use JSX parser to traverse through the function string, and extract the state variable name and its corresponding setState method.
+ * This function receive a string representation of a functional component. 
+ * This function then uses JSX parser to traverse through the function string, 
+ * and extract the state variable name and its corresponding setState method.
  * @param elementType - The string representation of a functional component
  * @returns - An array of objects with key: hookName (the name of setState method) | value: varName (the state variable name)
  */
@@ -93,45 +95,78 @@ export function getHooksNames(elementType: string): { hookName: string; varName:
   let AST: any;
   try {
     AST = JSXParser.parse(elementType).body;
+    console.log('AST');
+    console.log(AST);
+    let count = 0;
     // Begin search for hook names, only if ast has a body property.
     // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
     const statements: { hookName: string; varName: 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 & variable name declaration */
+     * Iterate through AST of every function(al component) declaration
+     * Check within each function(al component) declaration if there are hook declarations & variable name declaration */
     AST.forEach((functionDec: any) => {
+      // console.log('functionDec');
+      // console.log(functionDec);
       let declarationBody: any;
       if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
       // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
       else declarationBody = functionDec.body?.body ?? [];
       // Traverse through the function's funcDecs and Expression Statements
+      console.log('declarationBody');
+      console.log( declarationBody);
       declarationBody.forEach((elem: any) => {
         // Hooks will always be contained in a variable declaration
+        console.log('elem type:', count++, elem.type);
+        console.log(elem);
+
         if (elem.type === 'VariableDeclaration') {
           // Obtain the declarations array from elem.
           const { declarations } = elem;
           // Obtain the reactHook:
           // Due to difference in babel transpilation in browser vs for jest test, expression is stored in differen location
+          console.log('Found variable declaration, elem declarations:', declarations)
+          // console.log('dec[0]', declarations[0]);
+          // console.log('init',declarations[0]?.init);
+          // console.log('callee',declarations[0]?.init?.callee);
+          // console.log('expressions', declarations[0]?.init?.callee?.expressions);
+          // console.log('Line 2!');
+          // console.log('args', declarations[0]?.init?.arguments);
+          // console.log('args[0]', declarations[0]?.init?.arguments?.arguments[0]);
+          // console.log('callee', declarations[0]?.init?.arguments?.arguments[0]?.callee);
+          // console.log('expression', declarations[0]?.init?.arguments?.arguments[0]?.callee?.expressions);
           const expression =
             declarations[0]?.init?.callee?.expressions || //work for browser
-            declarations[0]?.init?.arguments[0]?.callee?.expressions; //work for jest test
+            //Mark's notes: so this was where the app was breaking. ES6 functions (e.g. const handleClick = () => {}) inside functional components were hitting this line and crashing when it tried to access arguments[0] and arguments didn't exist.
+            declarations[0]?.init?.arguments?.[0]?.callee?.expressions; //work for jest test; 
+
+          console.log('looked for expression, found:', expression);
+          //Mark's Note: for a functional definition that isn't a hook, it won't have the callee being searched for above. This line will cause this forEach execution to stop here in this case.
+          if (expression === undefined) return; 
           let reactHook: string;
           reactHook = expression[1].property?.name;
           if (reactHook === 'useState') {
             // Obtain the variable being set:
+            //Mark's note: changed to point to second to last element of declarations because webpack adds an extra variable when converting files that use ES6, so the previous pointer wasn't working for this case
             let varName: string =
-              declarations[1]?.id?.name || // work react application
+              declarations[declarations.length - 2]?.id?.name || // work react application; 
               (Array.isArray(declarations[0]?.id?.elements)
                 ? declarations[0]?.id?.elements[0]?.name
                 : undefined); //work for nextJS application
             // Obtain the setState method:
+            //Mark's note: changed to point to last element of declarations because webpack adds an extra variable when converting files that use ES6, so the previous pointer wasn't working for this case
             let hookName: string =
-              declarations[2]?.id?.name || // work react application
+              declarations[declarations.length - 1]?.id?.name || // work react application; 
               (Array.isArray(declarations[0]?.id?.elements)
                 ? declarations[0]?.id?.elements[0]?.name
                 : undefined); //work for nextJS & Remix
             // Push reactHook & varName to statements array
+            /**
+             * Mark's notes, I'd like to alter the structure of the data
+             * to pass on the reactHook 'useState'. That way the user will 
+             * eventually be able to view the difference between variables
+             * stored via useState and useContext
+             */
             statements.push({ hookName, varName });
           }
         }