bippy

import { instrument, onCommitFiberRoot, traverseFiber } from 'bippy'; // Must be imported BEFORE React // This block MUST execute before any React import or ReactDOM.createRoot call. // For a typical SPA, place this at the very top of your main entry file (e.g., index.ts/js). instrument({ onCommitFiberRoot: (root) => { console.log('React commit detected for root:', root.current); // root.current is the actual Fiber root traverseFiber(root.current, (fiber) => { // This callback runs for every fiber in the current React tree upon commit. // 'fiber' contains properties like type, memoizedProps, memoizedState, etc. if (fiber.elementType && typeof fiber.elementType === 'function') { // Log component names (functional or class components) console.log(`Component Fiber: ${fiber.elementType.displayName || fiber.elementType.name || 'AnonymousComponent'}`); } else if (fiber.stateNode instanceof HTMLElement) { // Log host (DOM) element tags console.log(`Host Fiber (DOM): <${fiber.stateNode.tagName.toLowerCase()} />`); } else if (fiber.type) { // Log other types of fibers (e.g., HostText, Suspense, Provider) console.log(`Other Fiber Type: ${typeof fiber.type === 'symbol' ? fiber.type.toString() : fiber.type}`); } }); }, // Additional hooks can be configured here, e.g., onMount, onUnmount // onMount: (fiber) => console.log('Fiber Mounted:', fiber), // onUnmount: (fiber) => console.log('Fiber Unmounted:', fiber), }); console.log('Bippy instrumentation activated successfully. Your React app will now be monitored.'); // Your React application's entry point would typically follow here, // e.g., import ReactDOM from 'react-dom/client'; ReactDOM.createRoot(...).render(...);