@buoy-gg/highlight-updates 2.1.12 → 2.1.13

package/lib/module/highlight-updates/utils/ProfilerInterceptor.js

@@ -1,358 +1 @@
-/**
- * ProfilerInterceptor
- *
- * Swizzles React DevTools internals to capture and log exactly what the
- * profiler detects when "Highlight updates when components render" is enabled.
- *
- * This allows us to compare profiler detection with our own implementation
- * to ensure 100% accuracy.
- *
- * Usage:
- *   import { installProfilerInterceptor } from './ProfilerInterceptor';
- *   installProfilerInterceptor();
- */
-
-"use strict";
-
-// Store original functions for cleanup
-let originalHookEmit = null;
-let originalAgentEmit = null;
-let isInstalled = false;
-
-// Controls whether logging is active (toggled by enable/disable)
-let loggingEnabled = false;
-
-// Callback for our comparison function
-let comparisonCallback = null;
-
-/**
- * Get a readable description of a stateNode for logging
- */
-function describeNode(node) {
-  if (!node) return {
-    type: "null"
-  };
-  const n = node;
-
-  // Try to identify the node type and extract useful info
-  const info = {};
-
-  // Check for Fabric canonical structure
-  if (n.canonical) {
-    info.type = "Fabric";
-    const canonical = n.canonical;
-    if (canonical.publicInstance) {
-      const pub = canonical.publicInstance;
-      info.hasMeasure = typeof pub.measure === "function";
-      info.nativeTag = pub.__nativeTag ?? pub._nativeTag ?? "unknown";
-    }
-  }
-  // Check for legacy structure with direct measure
-  else if (typeof n.measure === "function") {
-    info.type = "Legacy";
-    info.hasMeasure = true;
-    info.nativeTag = n.__nativeTag ?? n._nativeTag ?? n.nativeTag ?? "unknown";
-  }
-  // Unknown structure
-  else {
-    info.type = "Unknown";
-    info.keys = Object.keys(n).slice(0, 10); // First 10 keys for debugging
-  }
-  return info;
-}
-
-/**
- * Swizzle hook.emit to intercept all events including 'traceUpdates'
- *
- * This captures the raw data from the renderer before any processing.
- * The 'traceUpdates' event contains a Set of stateNodes.
- *
- * Reference: backend.js line 13566
- *   hook.emit('traceUpdates', traceUpdatesForNodes)
- */
-function swizzleHookEmit() {
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (!hook || typeof hook.emit !== "function") {
-    // Silent - hook not available is expected in some environments
-    return;
-  }
-  if (originalHookEmit) {
-    // Already swizzled - no need to log
-    return;
-  }
-  originalHookEmit = hook.emit.bind(hook);
-  hook.emit = function (event, ...args) {
-    // Intercept traceUpdates events - only log when logging is enabled
-    if (event === "traceUpdates" && loggingEnabled) {
-      const nodes = args[0];
-
-      // Only log if there are actual nodes (skip 0 node events)
-      if (nodes.size > 0) {
-        console.log(`[PROFILER] traceUpdates: ${nodes.size} nodes`, Array.from(nodes).map((node, index) => ({
-          index,
-          ...describeNode(node)
-        })));
-      }
-
-      // Call comparison callback if set (even for 0 nodes)
-      if (comparisonCallback) {
-        comparisonCallback(nodes);
-      }
-    }
-
-    // Call original emit
-    return originalHookEmit(event, ...args);
-  };
-
-  // Swizzled successfully - no need to log in normal operation
-}
-
-/**
- * Swizzle agent.emit to intercept 'drawTraceUpdates' events
- *
- * This captures data after the TraceUpdates module has processed it,
- * including color assignments based on render count.
- *
- * Reference: backend.js line 6380
- *   agent.emit('drawTraceUpdates', nodesToDraw)
- */
-function swizzleAgentEmit() {
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  const agent = hook?.reactDevtoolsAgent;
-  if (!agent || typeof agent.emit !== "function") {
-    // Silent - agent not available is expected when DevTools not connected
-    return;
-  }
-  if (originalAgentEmit) {
-    // Already swizzled - no need to log
-    return;
-  }
-  originalAgentEmit = agent.emit.bind(agent);
-  agent.emit = function (event, ...args) {
-    // Only log when logging is enabled and there are actual nodes
-    if (loggingEnabled && event === "drawTraceUpdates") {
-      const nodesToDraw = args[0];
-      if (nodesToDraw.length > 0) {
-        console.log(`[PROFILER] drawTraceUpdates: ${nodesToDraw.length} nodes`, nodesToDraw.map((item, index) => ({
-          index,
-          color: item.color,
-          ...describeNode(item.node)
-        })));
-      }
-    }
-
-    // Call original emit
-    return originalAgentEmit(event, ...args);
-  };
-
-  // Swizzled successfully - no need to log in normal operation
-}
-
-/**
- * Log information about available renderer interfaces.
- * Only call this manually for debugging - not called during normal operation.
- * @internal
- */
-export function logRendererInterfaces() {
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (!hook?.rendererInterfaces) {
-    console.log("[ProfilerInterceptor] No rendererInterfaces available");
-    return;
-  }
-  const info = [];
-  hook.rendererInterfaces.forEach((iface, id) => {
-    const methods = Object.keys(iface).filter(key => typeof iface[key] === "function");
-    info.push({
-      id,
-      hasSetTraceUpdatesEnabled: typeof iface.setTraceUpdatesEnabled === "function",
-      methods: methods.slice(0, 20) // First 20 methods
-    });
-  });
-  console.log(`[ProfilerInterceptor] Found ${hook.rendererInterfaces.size} renderer interface(s)`, info);
-}
-
-/**
- * Log hook structure for debugging.
- * Only call this manually for debugging - not called during normal operation.
- * @internal
- */
-export function logHookStructure() {
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (!hook) {
-    console.log("[ProfilerInterceptor] No hook available");
-    return;
-  }
-  const structure = {};
-  for (const key in hook) {
-    const value = hook[key];
-    if (typeof value === "function") {
-      structure[key] = "function";
-    } else if (value instanceof Map) {
-      structure[key] = `Map(${value.size})`;
-    } else if (value instanceof Set) {
-      structure[key] = `Set(${value.size})`;
-    } else if (typeof value === "object" && value !== null) {
-      structure[key] = "object";
-    } else {
-      structure[key] = typeof value;
-    }
-  }
-  console.log("[ProfilerInterceptor] Hook structure:", structure);
-}
-
-/**
- * Enable trace updates on all renderer interfaces
- *
- * This is what DevTools does when you check "Highlight updates when components render"
- *
- * Reference: backend.js line 15487-15489
- *   function setTraceUpdatesEnabled(isEnabled) {
- *     traceUpdatesEnabled = isEnabled;
- *   }
- */
-function enableTracingOnAllRenderers() {
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (!hook?.rendererInterfaces) {
-    // Silent - no rendererInterfaces available
-    return;
-  }
-  hook.rendererInterfaces.forEach(iface => {
-    if (typeof iface.setTraceUpdatesEnabled === "function") {
-      try {
-        iface.setTraceUpdatesEnabled(true);
-      } catch {
-        // Silent - error enabling tracing on this renderer
-      }
-    }
-  });
-}
-
-/**
- * Disable trace updates on all renderer interfaces
- */
-function disableTracingOnAllRenderers() {
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (!hook?.rendererInterfaces) return;
-  hook.rendererInterfaces.forEach(iface => {
-    if (typeof iface.setTraceUpdatesEnabled === "function") {
-      try {
-        iface.setTraceUpdatesEnabled(false);
-      } catch {
-        // Silent - error disabling tracing on this renderer
-      }
-    }
-  });
-}
-
-/**
- * Set a callback to receive profiler nodes for comparison
- */
-export function setComparisonCallback(callback) {
-  comparisonCallback = callback;
-}
-
-/**
- * Install all profiler interception hooks
- *
- * Call this early in your app initialization to capture all events.
- * Installation is silent - no console logs in normal operation.
- */
-export function installProfilerInterceptor() {
-  if (typeof __DEV__ !== "undefined" && !__DEV__) {
-    // Silent in production - nothing to install
-    return;
-  }
-  if (isInstalled) {
-    // Already installed - no action needed
-    return;
-  }
-
-  // Swizzle emit functions to intercept events (silent operation)
-  swizzleHookEmit();
-  swizzleAgentEmit();
-
-  // NOTE: We don't enable tracing here - it will be enabled when
-  // enableProfilerLogging() is called (when user toggles on)
-
-  // Note: We don't need hook.sub since we already intercept via swizzled hook.emit
-
-  isInstalled = true;
-}
-
-/**
- * Uninstall profiler interception hooks and restore original functions
- */
-export function uninstallProfilerInterceptor() {
-  if (!isInstalled) return;
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-
-  // Restore hook.emit
-  if (originalHookEmit && hook) {
-    hook.emit = originalHookEmit;
-    originalHookEmit = null;
-  }
-
-  // Restore agent.emit
-  if (originalAgentEmit && hook?.reactDevtoolsAgent) {
-    hook.reactDevtoolsAgent.emit = originalAgentEmit;
-    originalAgentEmit = null;
-  }
-
-  // Disable tracing
-  disableTracingOnAllRenderers();
-  comparisonCallback = null;
-  isInstalled = false;
-  // Silent uninstall - no logging in normal operation
-}
-
-/**
- * Check if interceptor is currently installed
- */
-export function isInterceptorInstalled() {
-  return isInstalled;
-}
-
-/**
- * Enable profiler logging - starts logging all profiler events
- *
- * NOTE: This only enables LOGGING of events. It does NOT enable tracing.
- * The profiler must be enabled separately (e.g., via Chrome DevTools checkbox)
- * for events to be emitted. This allows us to compare what the real profiler
- * detects without our code interfering.
- */
-export function enableProfilerLogging() {
-  loggingEnabled = true;
-  // Don't enable tracing here - let Chrome DevTools control that
-  // enableTracingOnAllRenderers();
-  // Silent enable - no logging needed
-}
-
-/**
- * Disable profiler logging - stops logging profiler events
- * NOTE: Does NOT disable tracing - the profiler continues to work,
- * we just stop logging its events
- */
-export function disableProfilerLogging() {
-  loggingEnabled = false;
-  // Don't disable tracing - let the profiler continue to work
-  // disableTracingOnAllRenderers();
-  // Silent disable - no logging needed
-}
-
-/**
- * Check if logging is currently enabled
- */
-export function isLoggingEnabled() {
-  return loggingEnabled;
-}
-export default {
-  install: installProfilerInterceptor,
-  uninstall: uninstallProfilerInterceptor,
-  isInstalled: isInterceptorInstalled,
-  setComparisonCallback,
-  enableTracing: enableTracingOnAllRenderers,
-  disableTracing: disableTracingOnAllRenderers,
-  enableLogging: enableProfilerLogging,
-  disableLogging: disableProfilerLogging,
-  isLoggingEnabled
-};
+"use strict";let originalHookEmit=null,originalAgentEmit=null,isInstalled=!1,loggingEnabled=!1,comparisonCallback=null;function describeNode(e){if(!e)return{type:"null"};const n=e,t={};if(n.canonical){t.type="Fabric";const e=n.canonical;if(e.publicInstance){const n=e.publicInstance;t.hasMeasure="function"==typeof n.measure,t.nativeTag=n.__nativeTag??n._nativeTag??"unknown"}}else"function"==typeof n.measure?(t.type="Legacy",t.hasMeasure=!0,t.nativeTag=n.__nativeTag??n._nativeTag??n.nativeTag??"unknown"):(t.type="Unknown",t.keys=Object.keys(n).slice(0,10));return t}function swizzleHookEmit(){const e=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;e&&"function"==typeof e.emit&&(originalHookEmit||(originalHookEmit=e.emit.bind(e),e.emit=function(e,...n){if("traceUpdates"===e&&loggingEnabled){const e=n[0];e.size>0&&console.log(`[PROFILER] traceUpdates: ${e.size} nodes`,Array.from(e).map((e,n)=>({index:n,...describeNode(e)}))),comparisonCallback&&comparisonCallback(e)}return originalHookEmit(e,...n)}))}function swizzleAgentEmit(){const e=window.__REACT_DEVTOOLS_GLOBAL_HOOK__,n=e?.reactDevtoolsAgent;n&&"function"==typeof n.emit&&(originalAgentEmit||(originalAgentEmit=n.emit.bind(n),n.emit=function(e,...n){if(loggingEnabled&&"drawTraceUpdates"===e){const e=n[0];e.length>0&&console.log(`[PROFILER] drawTraceUpdates: ${e.length} nodes`,e.map((e,n)=>({index:n,color:e.color,...describeNode(e.node)})))}return originalAgentEmit(e,...n)}))}export function logRendererInterfaces(){const e=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!e?.rendererInterfaces)return void console.log("[ProfilerInterceptor] No rendererInterfaces available");const n=[];e.rendererInterfaces.forEach((e,t)=>{const o=Object.keys(e).filter(n=>"function"==typeof e[n]);n.push({id:t,hasSetTraceUpdatesEnabled:"function"==typeof e.setTraceUpdatesEnabled,methods:o.slice(0,20)})}),console.log(`[ProfilerInterceptor] Found ${e.rendererInterfaces.size} renderer interface(s)`,n)}export function logHookStructure(){const e=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!e)return void console.log("[ProfilerInterceptor] No hook available");const n={};for(const t in e){const o=e[t];"function"==typeof o?n[t]="function":o instanceof Map?n[t]=`Map(${o.size})`:o instanceof Set?n[t]=`Set(${o.size})`:n[t]="object"==typeof o&&null!==o?"object":typeof o}console.log("[ProfilerInterceptor] Hook structure:",n)}function enableTracingOnAllRenderers(){const e=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;e?.rendererInterfaces&&e.rendererInterfaces.forEach(e=>{if("function"==typeof e.setTraceUpdatesEnabled)try{e.setTraceUpdatesEnabled(!0)}catch{}})}function disableTracingOnAllRenderers(){const e=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;e?.rendererInterfaces&&e.rendererInterfaces.forEach(e=>{if("function"==typeof e.setTraceUpdatesEnabled)try{e.setTraceUpdatesEnabled(!1)}catch{}})}export function setComparisonCallback(e){comparisonCallback=e}export function installProfilerInterceptor(){("undefined"==typeof __DEV__||__DEV__)&&(isInstalled||(swizzleHookEmit(),swizzleAgentEmit(),isInstalled=!0))}export function uninstallProfilerInterceptor(){if(!isInstalled)return;const e=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;originalHookEmit&&e&&(e.emit=originalHookEmit,originalHookEmit=null),originalAgentEmit&&e?.reactDevtoolsAgent&&(e.reactDevtoolsAgent.emit=originalAgentEmit,originalAgentEmit=null),disableTracingOnAllRenderers(),comparisonCallback=null,isInstalled=!1}export function isInterceptorInstalled(){return isInstalled}export function enableProfilerLogging(){loggingEnabled=!0}export function disableProfilerLogging(){loggingEnabled=!1}export function isLoggingEnabled(){return loggingEnabled}export default{install:installProfilerInterceptor,uninstall:uninstallProfilerInterceptor,isInstalled:isInterceptorInstalled,setComparisonCallback:setComparisonCallback,enableTracing:enableTracingOnAllRenderers,disableTracing:disableTracingOnAllRenderers,enableLogging:enableProfilerLogging,disableLogging:disableProfilerLogging,isLoggingEnabled:isLoggingEnabled};