add react info

Author: deeppatel234

packages/devtool-extenstion/extension/core/background.js

@@ -152,6 +152,7 @@ const saveCatchData = (request, { id: tabId, title }, subType) => {
       },
       useReducer: {},
       context: {},
+      reactInfo: {},
     };
     chunkData[tabId] = [];
   }
@@ -208,6 +209,10 @@ const saveCatchData = (request, { id: tabId, title }, subType) => {
       }
     });
   }
+
+  if (parsedData.reactInfo) {
+    catchData[tabId].reactInfo = parsedData.reactInfo;
+  }
 };
 
 const setAppPopup = (isActive, tabId) => {

packages/devtool-extenstion/extension/core/hook.js

@@ -7,6 +7,11 @@ export function installHook(target, settings) {
     context: {},
   };
 
+  let renderer = null;
+  let isDebuggingStarted = false;
+
+  const reactInfo = {};
+
   const dispatchAction = (event) => {
     if(event.type === "useReducer" && fiberNodeToDebug.useReducer[event.debugId]) {
       fiberNodeToDebug.useReducer[event.debugId].hook.queue.dispatch(event.data);
@@ -33,7 +38,9 @@ export function installHook(target, settings) {
   const sendDataToDevtool = () => {
     const helpers = window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.helpers;
 
-    const dataToSend = {};
+    const dataToSend = {
+      reactInfo,
+    };
 
     dataToSend.context = Object.keys(fiberNodeToDebug.context).reduce((memo, key) => {
       const debugObj = fiberNodeToDebug.context[key];
@@ -77,9 +84,6 @@ export function installHook(target, settings) {
     }, "*");
   };
 
-  let renderer = null;
-  let isDebuggingStarted = false;
-
   /**
    * Debug for React useReducer API
    *
@@ -298,6 +302,9 @@ export function installHook(target, settings) {
 
     renderer = params.renderer;
 
+    reactInfo.version = renderer ? renderer.version : "";
+    reactInfo.rendererPackageName = renderer ? renderer.rendererPackageName : "";
+
     const fiberRoot = reactDebtoolGlobalhook.getFiberRoots(params.id).keys().next().value;
 
     if (fiberRoot) {
@@ -372,6 +379,7 @@ export function installHook(target, settings) {
   window.addEventListener('message', event => {
     if (event.data.source === "react-devtools-detector") {
       if (settings.startDebugWhen === "pageLoad") {
+        reactInfo.mode = event.data.reactBuildType;
         startDebug();
       }
     }

packages/devtool-extenstion/src/containers/Header/index.js

@@ -5,9 +5,26 @@ import AppContext from "Containers/AppContext";
 import "./index.scss";
 
 const Header = () => {
-  const { appData: { tab } } = useContext(AppContext);
+  const {
+    appData: { tab, reactInfo },
+  } = useContext(AppContext);
 
-  return <header>{tab.title || "React Context Devtool"}</header>;
+  return (
+    <header>
+      <div>{tab.title || "React Context Devtool"}</div>
+      <div>
+        {reactInfo.version ? (
+          <span className="pill">
+            {reactInfo.rendererPackageName
+              ? `${reactInfo.rendererPackageName}@`
+              : null}
+            {reactInfo.version}
+          </span>
+        ) : null}
+        {reactInfo.mode ? <span className="pill">{reactInfo.mode}</span> : null}
+      </div>
+    </header>
+  );
 };
 
 export default Header;

packages/devtool-extenstion/src/containers/Header/index.scss

@@ -1,8 +1,17 @@
 header {
+  display: flex;
   align-items: center;
+  justify-content: space-between;
   background-color: var(--header-bg-color);
   border-bottom: 1px solid var(--border-color);
-  display: flex;
   font-size: 0.9rem;
   padding: 0.7rem 1rem;
+
+  .pill {
+    background-color: var(--primary-color);
+    padding: 2px 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    font-size: 0.8rem;
+  }
 }