pulled from dev

Author: ericsngyun

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

@@ -153,6 +153,19 @@ export default function ComponentMap({
     return propsFormat;
   };
 
+  const formatContext = data => {
+    const propsFormat = [];
+    const nestedObj = [];
+    for (const key in data) {
+      propsFormat.push(
+        <p className="stateprops">
+          {`${key}: ${data[key]}`}
+        </p>,
+      );
+    }
+    return propsFormat;
+  };
+
   const formatState = state => {
     if (state === 'stateless') return ['stateless'];
     return ['stateful'];
@@ -378,10 +391,15 @@ export default function ComponentMap({
               {formatState(tooltipData.state)}
             </div>
             <div style={React.scrollStyle}>
-              <div className="props">
-                Props:
+              <div className="tooltipWrapper">
+                <h2>Props:</h2>
                 {formatProps(tooltipData.componentData.props)}
               </div>
+              {tooltipData.componentData.context &&
+              <div className="tooltipWrapper">
+                <h2>Context:</h2>
+                {formatContext(tooltipData.componentData.context)}
+              </div>}
             </div>
           </div>
         </TooltipInPortal>

src/app/styles/main.scss

@@ -1,9 +1,33 @@
 @charset 'UTF-8';
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 * {
   font-family: 'Roboto', sans-serif;
 }
 
+.tooltipWrapper {
+  background-color: #505050;
+  color: rgb(216, 216, 216);
+  margin-top: 3px;
+  margin-bottom: 3px;
+  padding: 2px;
+}
+
+.tooltipWrapper h2 {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-left: 1px;
+  font-size: small;
+  font-weight: bolder;
+}
+
+.tooltipWrapper p {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-left: 10px;
+  margin-right: 3px;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;
@@ -36,13 +60,13 @@
 
 // 4. Layout-related sections
 @import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
-  'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
-  'layout/buttonsContainer', 'layout/headContainer.scss';
+'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
+'layout/buttonsContainer', 'layout/headContainer.scss';
 
 // 5. Components
 @import 'components/buttons', 'components/actionComponent',
-  'components/jsonTree', 'components/renderingFrequency',
-  'components/performanceVisx';
+'components/jsonTree', 'components/renderingFrequency',
+'components/performanceVisx';
 
 // slider component
 @import './components/rc-slider', './components/sliderHandle';
@@ -51,4 +75,4 @@
 @import './components/d3graph.css';
 
 // diff component
-@import './components/diff';
+@import './components/diff';

src/backend/linkFiber.ts

@@ -181,34 +181,24 @@ function createTree(
     actualStartTime,
     selfBaseDuration,
     treeBaseDuration,
+    dependencies,
+    _debugHookTypes,
   } = currentFiber;
 
-
 //   if (currentFiber.tag === 10) {
 //     const queue = [currentFiber];
-//     const result = [];
 //     while (queue.length > 0) {
 //       const tempFiber = queue.shift();
-//       if (tempFiber.tag === 0 && tempFiber._debugHookTypes) result.push(tempFiber);
+//       if (tempFiber.tag === 0) console.log(tempFiber);
 //       if (tempFiber.sibling) {
 //         queue.push(tempFiber.sibling);
 //       }
 //       if (tempFiber.child) {
 //         queue.push(tempFiber.child);
 //       }
 //   }
-//   console.log('test', result);
 // }
 
-  // if(currentFiber.tag === 10) {
-  //   let stack = [currentFiber];
-
-  //   while(stack > 0) {
-  //     let node = stack.pop();
-
-
-  //   }
-  // }
 // check to see if we can get the information we were looking for
   if (tag === 5) {
     try {
@@ -235,6 +225,7 @@ function createTree(
     selfBaseDuration?: number;
     treeBaseDuration?: number;
     props?: any,
+    context?: any,
   } = {};
   let componentFound = false;
 
@@ -243,6 +234,11 @@ function createTree(
     componentData.props = convertDataToString(memoizedProps, null);
   }
 
+  // if the component uses the useContext hook, we want to grab the co  text object and add it to the componentData object for that fiber
+  if (tag === 0 && _debugHookTypes) {
+      componentData.context = convertDataToString(dependencies?.firstContext?.memoizedValue, null);
+      console.log(convertDataToString(componentData.context, null), componentData.context);
+  }
   // Check if node is a stateful class component
   if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
     // Save component's state and setState() function to our record for future

src/backend/types/backendTypes.ts

@@ -175,5 +175,7 @@ export type Fiber = {
   // This field is only set when the enableProfilerTimer flag is enabled.
   treeBaseDuration?: number;
 
-  _debugHookTypes?: string[] | null;
+  dependencies: any;
+
+  _debugHookTypes: any;
 };