feat(trace-updates): extract HOC names and add markers to display names

Author: piotrski

packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js

@@ -9,7 +9,7 @@
 
 import Agent from 'react-devtools-shared/src/backend/agent';
 import {destroy as destroyCanvas, draw} from './canvas';
-import {getNestedBoundingClientRect} from '../utils';
+import {extractHOCNames, getNestedBoundingClientRect} from '../utils';
 
 import type {HostInstance} from '../../types';
 import type {Rect} from '../utils';
@@ -24,6 +24,12 @@ const MAX_DISPLAY_DURATION = 3000;
 // How long should a rect be considered valid for?
 const REMEASUREMENT_AFTER_DURATION = 250;
 
+// Markers for different types of HOCs
+const HOC_MARKERS = new Map([
+  ['Forget', '✨ń'],
+  ['Memo', '🧠'],
+]);
+
 // Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
   // $FlowFixMe[method-unbinding]
@@ -81,24 +87,33 @@ export function toggleEnabled(value: boolean): void {
 }
 
 function traceUpdates(nodes: Set<HostInstance>): void {
-  if (!isEnabled) {
-    return;
-  }
+  if (!isEnabled) return;
 
   nodes.forEach(node => {
     const data = nodeToData.get(node);
     const now = getCurrentTime();
 
     let lastMeasuredAt = data != null ? data.lastMeasuredAt : 0;
     let rect = data != null ? data.rect : null;
+
     if (rect === null || lastMeasuredAt + REMEASUREMENT_AFTER_DURATION < now) {
       lastMeasuredAt = now;
       rect = measureNode(node);
     }
 
-    let displayName = this.showNames && agent.getComponentNameForHostInstance(node);
-    if (displayName != null && displayName.startsWith('Forget(')) {
-      displayName = '✨' + displayName.slice(7, -1);
+    let displayName = showNames
+      ? agent.getComponentNameForHostInstance(node)
+      : null;
+    if (displayName) {
+      const {baseComponentName, hocNames} = extractHOCNames(displayName);
+
+      const markers = hocNames.map(hoc => HOC_MARKERS.get(hoc) || '').join('');
+
+      const enhancedDisplayName = markers
+        ? `${markers}${baseComponentName}`
+        : baseComponentName;
+
+      displayName = enhancedDisplayName;
     }
 
     nodeToData.set(node, {

packages/react-devtools-shared/src/backend/views/utils.js

@@ -138,3 +138,25 @@ export function getElementDimensions(domElement: HTMLElement): {
     paddingBottom: parseInt(calculatedStyle.paddingBottom, 10),
   };
 }
+
+export function extractHOCNames(displayName: string) {
+  if (!displayName) return {baseComponentName: '', hocNames: []};
+
+  const hocRegex = /([A-Z][a-zA-Z0-9]*?)\((.*)\)/g;
+  const hocNames: string[] = [];
+  let baseComponentName = displayName;
+  let match;
+
+  while ((match = hocRegex.exec(baseComponentName)) != null) {
+    if (Array.isArray(match)) {
+      const [, hocName, inner] = match;
+      hocNames.push(hocName);
+      baseComponentName = inner;
+    }
+  }
+
+  return {
+    baseComponentName,
+    hocNames,
+  };
+}