merging mark's changes to hooks

Author: minzo-kim

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

@@ -140,31 +140,35 @@ export function getHooksNames(elementType: string): { hookName: string; varName:
           // 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 &&
-              declarations[0]?.init?.arguments[0]?.callee?.expressions); //work for jest test; Mark's notes: so this was where the app was breaking. ES6 functions 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?.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);
-          if (expression === undefined) return; //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.
+          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[declarations.length - 2]?.id?.name || // work react application; Mark's note: changed to point to second to last element of declarations because webpack added an extra variable and therefor declaration in the middle of the array cuz es6
+              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[declarations.length - 1]?.id?.name || // work react application; Mark's note: changed to point to last element of declarations because webpack added an extra variable and therefor declaration in the middle of the array cuz es6
+              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, it's interesting that they don't want to
-             * pass on reactHook 'useState'. I wonder why.
+             * 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 });
           }

src/extension/build/devtools.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Reactime v9</title>
+  <title>Reactime v19</title>
 </head>
 
 <body>

src/extension/build/panel.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Reactime 18.0</title>
+    <title>Reactime 19.0</title>
   </head>
 
   <body>