@puberty-labs/clits
Version:
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
2 lines (1 loc) • 2.82 kB
TypeScript
export declare const REACT_HOOK_MONITOR_SCRIPT = "\n(function() {\n // Check if React is available\n if (typeof window.React === 'undefined') {\n console.warn('[CLiTS-React-Monitor] React not found on window. Skipping hook monitoring.');\n return;\n }\n\n // Store original hooks\n const originalUseState = window.React.useState;\n const originalUseEffect = window.React.useEffect;\n const originalCreateElement = window.React.createElement;\n\n // Patch useState\n window.React.useState = function(...args) {\n const [value, setter] = originalUseState.apply(this, args);\n\n const newSetter = (newValue) => {\n return setter(newValue);\n };\n\n return [value, newSetter];\n };\n\n // Patch useEffect\n window.React.useEffect = function(...args) {\n const [effect, dependencies] = args;\n\n // Wrap the effect to log its execution\n const wrappedEffect = () => {\n const cleanup = effect();\n if (typeof cleanup === 'function') {\n return () => {\n cleanup();\n };\n }\n return cleanup;\n };\n\n return originalUseEffect.call(this, wrappedEffect, dependencies);\n };\n\n // Patch React.createElement for prop monitoring\n window.React.createElement = function(type, props, ...children) {\n if (typeof type === 'string') { // For intrinsic elements (e.g., 'div', 'p')\n } 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\n const componentName = type.displayName || type.name || (type.type && (type.type.displayName || type.type.name)) || 'UnknownComponent';\n }\n return originalCreateElement.apply(this, arguments);\n };\n\n // Attempt to hook into React DevTools Global Hook for lifecycle monitoring\n if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined') {\n const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n\n // Patch onCommitFiberRoot for component mount/update\n const originalOnCommitFiberRoot = hook.onCommitFiberRoot;\n hook.onCommitFiberRoot = function(...args) {\n // React component lifecycle monitoring active (removed noisy logging)\n return originalOnCommitFiberRoot.apply(this, args);\n };\n\n // Patch onCommitFiberUnmount for component unmount\n const originalOnCommitFiberUnmount = hook.onCommitFiberUnmount;\n hook.onCommitFiberUnmount = function(...args) {\n // React component unmount monitoring active (removed noisy logging)\n return originalOnCommitFiberUnmount.apply(this, args);\n };\n } else {\n console.warn('[CLiTS-React-Monitor] React DevTools Global Hook not found. Advanced component lifecycle monitoring may be limited.');\n }\n\n})();\n";