merging this into dev branch

Author: jemzir

README.fr.md

@@ -18,10 +18,10 @@
   </a>
   <a href="https://travis-ci.com/oslabs-beta/reactime">
     <img src="https://travis-ci.com/oslabs-beta/reactime.svg?branch=master" alt="Build Status">
-  </a>  
+  </a>
   <a href="http://badge.fury.io/js/reactime">
     <img src="https://badge.fury.io/js/reactime.svg" alt="npm version">
-  </a>  
+  </a>
     <img src="https://img.shields.io/badge/babel%20preset-airbnb-ff69b4" alt="BabelPresetPrefs">
     <img src="https://img.shields.io/badge/linted%20with-eslint-blueviolet" alt="LintPrefs">
 </p>
@@ -40,7 +40,7 @@
 </p>
 
 <p align="center">
-  <a href="#how-to-use">Manuel</a> • <a href="#features">Caractéristiques</a> • <a href="https://reactime.io">Website</a> • <a href="#readmore">En savoir plus</a>
+  <a href="#how-to-use">Manuel</a> • <a href="#features">Caractéristiques</a> • <a href="https://reactime.dev">Website</a> • <a href="#readmore">En savoir plus</a>
 </p>
 
 Actuellement, Reactime est compatible avec les applications React qui utilisent des composants à état (stateful) et Hooks, avec un support en version bêta de Recoil et de pour le Context API.

README.md

@@ -40,7 +40,7 @@
 </p>
 
 <p align="center">
-  <a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://reactime.io">Website</a> • <a href="#read-more">Read More</a>
+  <a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://reactime.dev">Website</a> • <a href="#read-more">Read More</a>
 </p>
 
 <b>Reactime 16.0</b> presents the codebase with substantial, much-needed

demo-app/src/client/Router.tsx

@@ -15,9 +15,9 @@ ReactDOM.render(
       <Context.Provider value={{ bullshit: 'bullshit' }}>
       <Nav />
       <Routes>
-        <Route path="/tictactoe" element={<Board />}/>
-        <Route path="/" element={<Home />}/>
-        <Route path="/buttons" element={<Buttons />}/>
+          <Route path="/tictactoe" element={<Board />}/>
+          <Route path="/" element={<Home />}/>
+          <Route path="/buttons" element={<Buttons />}/>
       </Routes>
       </Context.Provider>
     </BrowserRouter>, root);

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/containers/ErrorContainer.tsx

@@ -84,11 +84,11 @@ function ErrorContainer(): any {
       </div>
       <br />
       <a
-        href="https://reactime.io/"
+        href="https://reactime.dev/"
         target="_blank"
         rel="noopener noreferrer"
       >
-        Please visit reactime.io to more info.
+        Please visit reactime.dev to more info.
       </a>
     </div>
   );

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/__tests__/tree.test.ts

@@ -1,8 +1,4 @@
 import Tree from '../tree';
-import { networkInterfaces } from 'os';
-
-
-
 
 describe('Tree unit test', () => {
   const newTree = new Tree({});
@@ -73,32 +69,30 @@ describe('Tree unit test', () => {
 
     it('the tree now has 2 children', () => {
       expect(newTree.children.length).toBe(2);
-    })
+    });
 
     it('both of the children has the parent as this tree', () => {
       expect(newTree.children[0]).toEqual(returnChild);
       expect(newTree.children[1]).toEqual(returnSibling);
-    })
+    });
 
     it('both of the children has the parent as this tree', () => {
       expect(returnChild.parent).toEqual(newTree);
       expect(returnSibling.parent).toEqual(newTree);
-    })  
-  })
-
-
+    });
+  });
 
-  // review this test 
+  // review this test
   // returnSibling not used?
   // Check Test
 
   describe('Copy & clean tree', () => {
     // const newTree = new Tree({});
     const returnChild = newTree.addChild('stateful', 'child', {}, null);
-    const returnSibling = returnChild.addSibling('stateful', 'child', {}, null);
+    returnChild.addSibling('stateful', 'child', {}, null);
     const copy = newTree.cleanTreeCopy();
     it('its copy has 2 children', () => {
       expect(copy.children.length).toEqual(2);
-    })
-  })
-})
+    });
+  });
+});

src/backend/linkFiber.ts

@@ -181,13 +181,29 @@ 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
 // need to figure out what tag is
   if (tag === 5) {
     try {
-      if (memoizedProps.children[0]._owner?.memoizedProps !== undefined) {
+      if (memoizedProps.children && memoizedProps.children[0]?._owner?.memoizedProps !== undefined) {
         const propsData = memoizedProps.children[0]._owner.memoizedProps;
         const newPropData = convertDataToString(propsData, tree.componentData.props ? tree.componentData.props : null);
         tree.componentData = {
@@ -210,6 +226,7 @@ function createTree(
     selfBaseDuration?: number;
     treeBaseDuration?: number;
     props?: any,
+    context?: any,
   } = {};
   let componentFound = false;
 
@@ -218,6 +235,10 @@ 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);
+  }
   // 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
@@ -245,6 +266,7 @@ function createTree(
       const hooksStates = traverseHooks(memoizedState);
       const hooksNames = getHooksNames(elementType.toString());
 
+
       hooksStates.forEach((state, i) => {
         hooksIndex = componentActionsRecord.saveNew(
           state.state,

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;
 };