DevTools should use injected reconciler version when available

Author: Brian Vaughn

packages/react-devtools-shared/src/__tests__/inspectedElement-test.js

@@ -2428,4 +2428,19 @@ describe('InspectedElement', () => {
       `);
     });
   });
+
+  it('should include both renderer and reconciler versions when present', async () => {
+    const Example = () => {
+      return null;
+    };
+
+    const container = document.createElement('div');
+    await utils.actAsync(() => ReactDOM.render(<Example />, container));
+
+    const ReactVersion = require('shared/ReactVersion').default;
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.reconcilerVersion).toBe(ReactVersion);
+    expect(inspectedElement.rendererVersion).toBe(ReactVersion);
+  });
 });

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -832,6 +832,7 @@ export function attach(
       rootType: null,
       rendererPackageName: null,
       rendererVersion: null,
+      reconcilerVersion: null,
     };
   }
 

packages/react-devtools-shared/src/backend/renderer.js

@@ -503,13 +503,19 @@ export function attach(
   renderer: ReactRenderer,
   global: Object,
 ): RendererInterface {
+  // Newer versions of the reconciler package also specific reconciler version.
+  // If that version number is present, use it.
+  // Third party renderer versions may not match the reconciler version,
+  // and the latter is what's important in terms of tags and symbols.
+  const version = renderer.reconcilerVersion || renderer.version;
+
   const {
     getDisplayNameForFiber,
     getTypeSymbol,
     ReactPriorityLevels,
     ReactTypeOfWork,
     ReactTypeOfSideEffect,
-  } = getInternalReactConstants(renderer.version);
+  } = getInternalReactConstants(version);
   const {Incomplete, NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
   const {
     CacheComponent,
@@ -2903,6 +2909,7 @@ export function attach(
       rootType,
       rendererPackageName: renderer.rendererPackageName,
       rendererVersion: renderer.version,
+      reconcilerVersion: renderer.reconcilerVersion || null,
     };
   }
 

packages/react-devtools-shared/src/backend/types.js

@@ -137,6 +137,8 @@ export type ReactRenderer = {
   // Only injected by React v16.9+ in DEV mode.
   // Enables DevTools to append owners-only component stack to error messages.
   getCurrentFiber?: () => Fiber | null,
+  // 17.0.2+
+  reconcilerVersion?: string,
   // Uniquely identifies React DOM v15.
   ComponentTree?: any,
   // Present for React DOM v12 (possibly earlier) through v15.
@@ -259,6 +261,7 @@ export type InspectedElement = {|
   // Meta information about the renderer that created this element.
   rendererPackageName: string | null,
   rendererVersion: string | null,
+  reconcilerVersion: string | null,
 |};
 
 export const InspectElementFullDataType = 'full-data';

packages/react-devtools-shared/src/backendAPI.js

@@ -200,6 +200,7 @@ export function convertInspectedElementBackendToFrontend(
     context,
     hooks,
     props,
+    reconcilerVersion,
     rendererPackageName,
     rendererVersion,
     rootType,
@@ -221,6 +222,7 @@ export function convertInspectedElementBackendToFrontend(
     hasLegacyContext,
     id,
     key,
+    reconcilerVersion,
     rendererPackageName,
     rendererVersion,
     rootType,

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css

@@ -94,4 +94,8 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.OwnersMetaVersionsWrapper {
+
 }

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js

@@ -53,6 +53,7 @@ export default function InspectedElementView({
   const {id} = element;
   const {
     owners,
+    reconcilerVersion,
     rendererPackageName,
     rendererVersion,
     rootType,
@@ -71,9 +72,14 @@ export default function InspectedElementView({
     rendererPackageName !== null && rendererVersion !== null
       ? `${rendererPackageName}@${rendererVersion}`
       : null;
+  const reconcilerLabel =
+    reconcilerVersion !== null ? `react-reconciler@${reconcilerVersion}` : null;
   const showOwnersList = owners !== null && owners.length > 0;
   const showRenderedBy =
-    showOwnersList || rendererLabel !== null || rootType !== null;
+    showOwnersList ||
+    reconcilerLabel !== null ||
+    rendererLabel !== null ||
+    rootType !== null;
 
   return (
     <Fragment>
@@ -140,8 +146,17 @@ export default function InspectedElementView({
             {rootType !== null && (
               <div className={styles.OwnersMetaField}>{rootType}</div>
             )}
-            {rendererLabel !== null && (
-              <div className={styles.OwnersMetaField}>{rendererLabel}</div>
+            {(rendererLabel !== null || reconcilerLabel !== null) && (
+              <div className={styles.OwnersMetaVersionsWrapper}>
+                {rendererLabel !== null && (
+                  <div className={styles.OwnersMetaField}>{rendererLabel}</div>
+                )}
+                {reconcilerLabel !== null && (
+                  <div className={styles.OwnersMetaField}>
+                    {reconcilerLabel}
+                  </div>
+                )}
+              </div>
             )}
           </div>
         )}

packages/react-devtools-shared/src/devtools/views/Components/types.js

@@ -108,6 +108,7 @@ export type InspectedElement = {|
   // Meta information about the renderer that created this element.
   rendererPackageName: string | null,
   rendererVersion: string | null,
+  reconcilerVersion: string | null,
 |};
 
 // TODO: Add profiling type