added support for CTX api

Author: benmarg

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,30 @@
 @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;
+  padding: 2px;
+}
+
+.tooltipWrapper h2 {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  font-size: small;
+  font-weight: bolder;
+}
+
+.tooltipWrapper p {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-left: 10px;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;
@@ -36,13 +57,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 +72,4 @@
 @import './components/d3graph.css';
 
 // diff component
-@import './components/diff';
+@import './components/diff';

src/backend/linkFiber.ts

@@ -181,8 +181,24 @@ function createTree(
     actualStartTime,
     selfBaseDuration,
     treeBaseDuration,
+    dependencies,
+    _debugHookTypes,
   } = currentFiber;
 
+//   if (currentFiber.tag === 10) {
+//     const queue = [currentFiber];
+//     while (queue.length > 0) {
+//       const tempFiber = queue.shift();
+//       if (tempFiber.tag === 0) console.log(tempFiber);
+//       if (tempFiber.sibling) {
+//         queue.push(tempFiber.sibling);
+//       }
+//       if (tempFiber.child) {
+//         queue.push(tempFiber.child);
+//       }
+//   }
+// }
+
 // check to see if we can get the information we were looking for
   if (tag === 5) {
     try {
@@ -209,6 +225,7 @@ function createTree(
     selfBaseDuration?: number;
     treeBaseDuration?: number;
     props?: any,
+    context?: any,
   } = {};
   let componentFound = false;
 
@@ -217,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

@@ -174,4 +174,8 @@ export type Fiber = {
   // This value bubbles up during the "complete" phase.
   // This field is only set when the enableProfilerTimer flag is enabled.
   treeBaseDuration?: number;
+
+  dependencies: any;
+
+  _debugHookTypes: any;
 };

www/src/pages/components/FeaturesSection.jsx

@@ -52,7 +52,7 @@ export default function FeaturesSection() {
           What makes Reactime so great?
         </p>
         <p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
-        Reactime is full of features that make your life easier as a developer. From time-travel debugging to state snapshot display, check out how using Reactime will improve your developer experience.
+        Reactime iscd full of features that make your life easier as a developer. From time-travel debugging to state snapshot display, check out how using Reactime will improve your developer experience.
         </p>
         <div className="mt-20">
           <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">