@puberty-labs/clits/dist/utils/react-hook-monitor.js

CLiTS (Chrome Logging and Inspection Tool Suite) is a powerful Node.js library for AI-controlled Chrome browser automation, testing, and inspection. Features enhanced CSS selector support (:contains(), XPath), dry-run mode, element discovery tools, and co

// BSD: Injects a script into the browser context to monitor React hooks (useState, useEffect) and report their usage via console logs.
export const REACT_HOOK_MONITOR_SCRIPT = `
(function() {
  // Check if React is available
  if (typeof window.React === 'undefined') {
    console.warn('[CLiTS-React-Monitor] React not found on window. Skipping hook monitoring.');
    return;
  }

  // Store original hooks
  const originalUseState = window.React.useState;
  const originalUseEffect = window.React.useEffect;
  const originalCreateElement = window.React.createElement;

  // Patch useState
  window.React.useState = function(...args) {
    const [value, setter] = originalUseState.apply(this, args);

    const newSetter = (newValue) => {
      return setter(newValue);
    };

    return [value, newSetter];
  };

  // Patch useEffect
  window.React.useEffect = function(...args) {
    const [effect, dependencies] = args;

    // Wrap the effect to log its execution
    const wrappedEffect = () => {
      const cleanup = effect();
      if (typeof cleanup === 'function') {
        return () => {
          cleanup();
        };
      }
      return cleanup;
    };

    return originalUseEffect.call(this, wrappedEffect, dependencies);
  };

  // Patch React.createElement for prop monitoring
  window.React.createElement = function(type, props, ...children) {
    if (typeof type === 'string') { // For intrinsic elements (e.g., 'div', 'p')
    } else if (typeof type === 'function' || (typeof type === 'object' && type !== null && (type.$$typeof === Symbol.for('react.memo') || type.$$typeof === Symbol.for('react.forward_ref')))) { // For React components
      const componentName = type.displayName || type.name || (type.type && (type.type.displayName || type.type.name)) || 'UnknownComponent';
    }
    return originalCreateElement.apply(this, arguments);
  };

  // Attempt to hook into React DevTools Global Hook for lifecycle monitoring
  if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined') {
    const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;

    // Patch onCommitFiberRoot for component mount/update
    const originalOnCommitFiberRoot = hook.onCommitFiberRoot;
    hook.onCommitFiberRoot = function(...args) {
      // React component lifecycle monitoring active (removed noisy logging)
      return originalOnCommitFiberRoot.apply(this, args);
    };

    // Patch onCommitFiberUnmount for component unmount
    const originalOnCommitFiberUnmount = hook.onCommitFiberUnmount;
    hook.onCommitFiberUnmount = function(...args) {
      // React component unmount monitoring active (removed noisy logging)
      return originalOnCommitFiberUnmount.apply(this, args);
    };
  } else {
    console.warn('[CLiTS-React-Monitor] React DevTools Global Hook not found. Advanced component lifecycle monitoring may be limited.');
  }

})();
`;