bippy 0.0.23 → 0.0.24

package/README.md

@@ -2,76 +2,219 @@
 
 a hacky way to get fibers from react. used internally for [`react-scan`](https://github.com/aidenybai/react-scan).
 
-bippy works by setting a "fake" version of the `__REACT_DEVTOOLS_GLOBAL_HOOK__` object. this gives us access to react internals without actually using react devtools.
+bippy works by monkey-patching `window.__REACT_DEVTOOLS_GLOBAL_HOOK__` with [custom handlers](https://github.com/facebook/react/blob/6a4b46cd70d2672bc4be59dcb5b8dede22ed0cef/packages/react-refresh/src/ReactFreshRuntime.js#L427). this gives us access to react internals without needing to use react devtools.
 
 > [!WARNING]
 > this project uses react internals, which can change at any time. **this is not recommended for usage and may break production apps** - unless you acknowledge this risk and know exactly you're doing.
 
-## example
+## tutorial: create a mini react-scan
 
-here i wrote a `getRenderInfo` function, where you're able to pass any component identifier and get back the number of times it rendered, as well as the total and self time. this is done by traversing the fiber tree during a [commit](https://react.dev/learn/render-and-commit) via `onCommitFiberRoot`.
+[`react-scan`](https://github.com/aidenybai/react-scan) is a tool that highlights renders in your react app. under the hood, it uses bippy to detect rendered fibers.
 
-inspect it live [here](https://bippy.million.dev/).
+fibers are how "work" is represented in react. each fiber either represents a composite (function/class component) or a host (dom element). [here is a live visualization](https://jser.pro/ddir/rie?reactVersion=18.3.1&snippetKey=hq8jm2ylzb9u8eh468) of what the fiber tree looks like, and here is a [deep dive article](https://jser.dev/2023-07-18-how-react-rerenders/).
+
+a simplified version of a fiber looks roughly like this:
+
+```typescript
+interface Fiber {
+  // component type (function/class)
+  type: any;
+
+  child: Fiber | null;
+  sibling: Fiber | null;
+
+  // parent fiber
+  return: Fiber | null;
+
+  // saved props input
+  memoizedProps: any;
+
+  // state (useState, useReducer, useSES, etc.)
+  memoizedState: any;
+
+  // contexts (useContext)
+  dependencies: Dependencies | null;
+}
+```
+
+however, fibers aren't directly accessible by the user. so, we have to hack our way around to accessing it.
+
+luckily, react [reads from a property](https://github.com/facebook/react/blob/6a4b46cd70d2672bc4be59dcb5b8dede22ed0cef/packages/react-reconciler/src/ReactFiberDevToolsHook.js#L48) in the window object: `window.__REACT_DEVTOOLS_GLOBAL_HOOK__` and runs handlers on it when certain events happen. this is intended for react devtools, but we can use it to our advantage.
+
+here's what it roughly looks like:
+
+```typescript
+interface __REACT_DEVTOOLS_GLOBAL_HOOK__ {
+  // list of renderers (react-dom, react-native, etc.)
+  renderers: Map<RendererID, ReactRenderer>;
+
+  // called when react has rendered everythign and ready to apply changes to the host tree (e.g. DOM mutations)
+  onCommitFiberRoot: (
+    rendererID: RendererID,
+    fiber: Record<string, unknown>,
+    commitPriority?: number,
+    didError?: boolean,
+  ) => void;
+}
+```
+
+we can use bippy's utils and the `onCommitFiberRoot` handler to detect renders!
+
+### 0. setup
+
+first, [create a new react project via stackblitz](https://stackblitz.com/fork/github/vitejs/vite/tree/main/packages/create-vite/template-react?file=src/App.jsx&terminal=dev)
+
+then, install bippy:
+
+```bash
+npm install bippy
+```
+
+finally, re-run the dev server:
+
+```bash
+npm run dev
+```
+
+### 1. use `onCommitFiberRoot` to get fibers
+
+let's use `instrument` to stub the `__REACT_DEVTOOLS_GLOBAL_HOOK__` object, and setup a custom handler for `onCommitFiberRoot`.
+
+```jsx
+import { instrument } from 'bippy'; // must be imported BEFORE react
+
+// rest of your code ...
+
+instrument({
+  onCommitFiberRoot(rendererID, root) {
+    const fiberRoot = root.current;
+    console.log('fiberRoot', fiberRoot);
+  },
+});
+```
+
+running this should log `fiberRoot` to the console. i recommend you playing with this code to get a feel for how fibers work.
+
+### 2. create a fiber visitor
+
+now, let's create a fiber visitor with `createFiberVisitor` to "visit" fibers that render. not every fiber actually renders, so we need to filter for the ones that do.
+
+```jsx
+import { instrument, createFiberVisitor } from 'bippy'; // must be imported BEFORE react
+
+// rest of your code ...
+
+const visit = createFiberVisitor({
+  onRender(fiber) {
+    console.log('fiber render', fiber);
+  },
+});
+
+instrument({
+  onCommitFiberRoot(rendererID, root) {
+    visit(rendererID, root);
+  },
+});
+```
+
+### 3. determine DOM nodes to highlight
+
+next, we need to identify which DOM nodes we are going to highlight. we can do this by checking if the fiber is a host fiber, or if it's not, find the nearest host fiber.
 
 ```jsx
 import {
   instrument,
+  isHostFiber,
+  getNearestHostFiber,
   createFiberVisitor,
-  getTimings,
-  getDisplayName,
 } from 'bippy'; // must be imported BEFORE react
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom/client';
-
-const componentRenderMap = new WeakMap();
-
-const visitor = createFiberVisitor({
-  onRender(fiber, phase) {
-    const componentType = fiber.elementType;
-    if (
-      typeof componentType !== 'function' &&
-      (typeof componentType !== 'object' || !componentType)
-    ) {
-      return;
+
+// rest of your code ...
+
+const highlightFiber = (fiber) => {
+  if (!(fiber instanceof HTMLElement)) return;
+
+  console.log('highlight dom node', fiber.stateNode);
+};
+
+const visit = createFiberVisitor({
+  onRender(fiber) {
+    if (isHostFiber(fiber)) {
+      highlightFiber(fiber);
+    } else {
+      // can be a component
+      const hostFiber = getNearestHostFiber(fiber);
+      highlightFiber(hostFiber);
     }
-    const render = componentRenderMap.get(componentType) || {
-      count: 0,
-      selfTime: 0,
-      totalTime: 0,
-      displayName: getDisplayName(componentType),
-    };
-    render.count++;
-    const { selfTime, totalTime } = getTimings(fiber);
-    render.selfTime += selfTime;
-    render.totalTime += totalTime;
-    componentRenderMap.set(componentType, render);
-    console.log(phase, render);
   },
 });
 
 instrument({
-  onCommitFiberRoot: (rendererID, fiberRoot) => {
-    visitor(rendererID, fiberRoot);
+  onCommitFiberRoot(rendererID, root) {
+    visit(rendererID, root);
   },
 });
+```
+
+### 4. highlight DOM nodes
+
+now, let's implement the `highlightFiber` function to highlight the DOM node. the simplest way is to just overlay a div (with a red border) on top of the DOM node.
 
-export const getRenderInfo = (componentType) => {
-  return componentRenderMap.get(componentType);
+```jsx
+import {
+  instrument,
+  isHostFiber,
+  getNearestHostFiber,
+  createFiberVisitor,
+} from 'bippy'; // must be imported BEFORE react
+
+// rest of your code ...
+
+const highlightFiber = (fiber) => {
+  if (!(fiber.stateNode instanceof HTMLElement)) return;
+
+  const rect = fiber.stateNode.getBoundingClientRect();
+  const highlight = document.createElement('div');
+  highlight.style.border = '1px solid red';
+  highlight.style.position = 'fixed';
+  highlight.style.top = `${rect.top}px`;
+  highlight.style.left = `${rect.left}px`;
+  highlight.style.width = `${rect.width}px`;
+  highlight.style.height = `${rect.height}px`;
+  highlight.style.zIndex = 999999999;
+  document.documentElement.appendChild(highlight);
+  setTimeout(() => {
+    document.documentElement.removeChild(highlight);
+  }, 100);
 };
 
-function App() {
-  const [count, setCount] = useState(0);
-  const renderInfo = getRenderInfo(App);
-  return (
-    <button onClick={() => setCount(count + 1)}>
-      rendered: {JSON.stringify(renderInfo, null, 2)}
-    </button>
-  );
-}
+const visit = createFiberVisitor({
+  onRender(fiber) {
+    if (isHostFiber(fiber)) {
+      highlightFiber(fiber);
+    } else {
+      // can be a component
+      const hostFiber = getNearestHostFiber(fiber);
+      highlightFiber(hostFiber);
+    }
+  },
+});
 
-ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+instrument({
+  onCommitFiberRoot(rendererID, root) {
+    visit(rendererID, root);
+  },
+});
 ```
 
+### 5. profit
+
+try a completed version [here](https://bippy.million.dev)
+
+you can learn more about bippy by [reading the source code](https://github.com/aidenybai/bippy/blob/main/src/index.ts).
+
+looking for a more robust version of our mini react-scan? try out [react-scan](https://github.com/aidenybai/react-scan).
+
 ## misc
 
 the original bippy character is owned and created by [@dairyfreerice](https://www.instagram.com/dairyfreerice). this project is not related to the bippy brand, i just think the character is cute

package/dist/index.cjs

@@ -249,39 +249,43 @@ var checkDCE = (fn) => {
 };
 var NO_OP = () => {
 };
+var installRDTHook = (onActive) => {
+  const renderers = /* @__PURE__ */ new Map();
+  let i = 0;
+  const rdtHook = {
+    checkDCE,
+    supportsFiber: true,
+    supportsFlight: true,
+    renderers,
+    onCommitFiberRoot: NO_OP,
+    onCommitFiberUnmount: NO_OP,
+    onPostCommitFiberRoot: NO_OP,
+    inject(renderer) {
+      const nextID = ++i;
+      renderers.set(nextID, renderer);
+      if (!rdtHook._instrumentationIsActive) {
+        rdtHook._instrumentationIsActive = true;
+        onActive?.();
+      }
+      return nextID;
+    },
+    _instrumentationSource: "bippy",
+    _instrumentationIsActive: false
+  };
+  try {
+    Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
+      configurable: true,
+      value: rdtHook
+    });
+  } catch {
+  }
+  return rdtHook;
+};
 var getRDTHook = (onActive) => {
   let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (rdtHook) onActive?.();
   if (!window.hasOwnProperty("__REACT_DEVTOOLS_GLOBAL_HOOK__")) {
-    const renderers = /* @__PURE__ */ new Map();
-    let i = 0;
-    rdtHook ??= {
-      checkDCE,
-      supportsFiber: true,
-      supportsFlight: true,
-      renderers,
-      onCommitFiberRoot: NO_OP,
-      onCommitFiberUnmount: NO_OP,
-      onPostCommitFiberRoot: NO_OP,
-      inject(renderer) {
-        const nextID = ++i;
-        renderers.set(nextID, renderer);
-        if (!rdtHook._instrumentationIsActive) {
-          rdtHook._instrumentationIsActive = true;
-          onActive?.();
-        }
-        return nextID;
-      },
-      _instrumentationSource: "bippy",
-      _instrumentationIsActive: Boolean(rdtHook)
-    };
-    try {
-      Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
-        configurable: true,
-        value: rdtHook
-      });
-    } catch {
-    }
+    rdtHook = installRDTHook(onActive);
   }
   return rdtHook;
 };
@@ -289,10 +293,6 @@ var isInstrumentationActive = () => {
   const rdtHook = getRDTHook();
   return Boolean(rdtHook._instrumentationIsActive) || isUsingRDT();
 };
-if (typeof window !== "undefined") {
-  performance.now();
-  getRDTHook();
-}
 var mountFiberRecursively = (onRender, firstChild, traverseSiblings) => {
   let fiber = firstChild;
   while (fiber != null) {
@@ -473,6 +473,11 @@ var instrument = ({
   }
   return devtoolsHook;
 };
+var isBrowser = typeof document !== "undefined" && typeof document.createElement === "function";
+var isNode = typeof process !== "undefined" && process.versions != null && process.versions.node != null;
+if (isBrowser || !isNode) {
+  installRDTHook();
+}
 
 exports.CONCURRENT_MODE_NUMBER = CONCURRENT_MODE_NUMBER;
 exports.CONCURRENT_MODE_SYMBOL_STRING = CONCURRENT_MODE_SYMBOL_STRING;
@@ -518,6 +523,7 @@ exports.getRDTHook = getRDTHook;
 exports.getTimings = getTimings;
 exports.getType = getType;
 exports.hasMemoCache = hasMemoCache;
+exports.installRDTHook = installRDTHook;
 exports.instrument = instrument;
 exports.isCompositeFiber = isCompositeFiber;
 exports.isHostFiber = isHostFiber;

package/dist/index.d.cts

@@ -50,7 +50,15 @@ declare const Snapshot = 1024;
 declare const Visibility = 8192;
 declare const MutationMask: number;
 declare const isValidElement: (element: unknown) => element is React.ReactElement;
+/**
+ * Host fibers are DOM nodes in react-dom, `View` in react-native, etc.
+ */
 declare const isHostFiber: (fiber: Fiber) => boolean;
+/**
+ * Composite fibers are functional, class components, etc.
+ *
+ * @see https://github.com/facebook/react/blob/865d2c418d5ba6fb4546e4b58616cd9b7701af85/packages/react/src/jsx/ReactJSXElement.js#L490
+ */
 declare const isCompositeFiber: (fiber: Fiber) => boolean;
 declare const traverseContexts: (fiber: Fiber, selector: (prevValue: {
     context: React.Context<unknown>;
@@ -66,6 +74,9 @@ declare const traverseState: (fiber: Fiber, selector: (prevValue: {
 }) => boolean | void) => boolean;
 declare const traverseProps: (fiber: Fiber, selector: (prevValue: unknown, nextValue: unknown) => boolean | void) => boolean;
 declare const didFiberRender: (fiber: Fiber) => boolean;
+/**
+ * A commit is means reconciliation occured and the host tree is updated
+ */
 declare const didFiberCommit: (fiber: Fiber) => boolean;
 declare const getMutatedHostFibers: (fiber: Fiber) => Array<Fiber>;
 declare const getFiberStack: (fiber: Fiber) => any[];
@@ -81,6 +92,7 @@ declare const getType: (type: any) => any;
 declare const getDisplayName: (type: any) => string | null;
 declare const isUsingRDT: () => boolean;
 declare const detectReactBuildType: (renderer: ReactRenderer) => "development" | "production";
+declare const installRDTHook: (onActive?: () => unknown) => ReactDevToolsGlobalHook;
 declare const getRDTHook: (onActive?: () => unknown) => ReactDevToolsGlobalHook;
 declare const isInstrumentationActive: () => boolean;
 type RenderHandler = <S>(fiber: Fiber, phase: 'mount' | 'update' | 'unmount', state?: S) => unknown;
@@ -88,10 +100,33 @@ declare const mountFiberRecursively: (onRender: RenderHandler, firstChild: Fiber
 declare const updateFiberRecursively: (onRender: RenderHandler, nextFiber: Fiber, prevFiber: Fiber, parentFiber: Fiber | null) => void;
 declare const unmountFiber: (onRender: RenderHandler, fiber: Fiber) => void;
 declare const unmountFiberChildrenRecursively: (onRender: RenderHandler, fiber: Fiber) => void;
+/**
+ * Creates a fiber visitor function.
+ * @param options { onRender, onError }
+ * @example
+ * const visitor = createFiberVisitor({
+ *   onRender(fiber, phase) {
+ *     console.log(phase)
+ *   },
+ * });
+ */
 declare const createFiberVisitor: ({ onRender: onRenderWithoutState, onError, }: {
     onRender: RenderHandler;
     onError?: (error: unknown) => unknown;
 }) => <S>(_rendererID: number, root: FiberRoot, state?: S) => void;
+/**
+ * Instruments the DevTools hook.
+ * @param options { onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, onActive, name }
+ * @example
+ * const hook = instrument({
+ *   onActive() {
+ *     console.log('initialized');
+ *   },
+ *   onCommitFiberRoot(rendererID, root) {
+ *     console.log('fiberRoot', root.current)
+ *   },
+ * });
+ */
 declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, onActive, name, }: {
     onCommitFiberRoot?: (rendererID: number, root: FiberRoot, priority: void | number) => unknown;
     onCommitFiberUnmount?: (rendererID: number, root: FiberRoot) => unknown;
@@ -100,4 +135,4 @@ declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostComm
     name?: string;
 }) => ReactDevToolsGlobalHook;
 
-export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ChildDeletion, ClassComponentTag, Cloned, ContentReset, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, DidCapture, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, Hydrating, LegacyHiddenComponent, MemoComponentTag, MutationMask, OffscreenComponent, OffscreenComponentTag, PerformedWork, Placement, type ReactDevToolsGlobalHook, type ReactRenderer, Ref, SimpleMemoComponentTag, Snapshot, SuspenseComponentTag, Update, Visibility, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, instrument, isCompositeFiber, isHostFiber, isInstrumentationActive, isUsingRDT, isValidElement, mountFiberRecursively, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively };
+export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ChildDeletion, ClassComponentTag, Cloned, ContentReset, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, DidCapture, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, Hydrating, LegacyHiddenComponent, MemoComponentTag, MutationMask, OffscreenComponent, OffscreenComponentTag, PerformedWork, Placement, type ReactDevToolsGlobalHook, type ReactRenderer, Ref, SimpleMemoComponentTag, Snapshot, SuspenseComponentTag, Update, Visibility, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, installRDTHook, instrument, isCompositeFiber, isHostFiber, isInstrumentationActive, isUsingRDT, isValidElement, mountFiberRecursively, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively };

package/dist/index.d.ts

@@ -50,7 +50,15 @@ declare const Snapshot = 1024;
 declare const Visibility = 8192;
 declare const MutationMask: number;
 declare const isValidElement: (element: unknown) => element is React.ReactElement;
+/**
+ * Host fibers are DOM nodes in react-dom, `View` in react-native, etc.
+ */
 declare const isHostFiber: (fiber: Fiber) => boolean;
+/**
+ * Composite fibers are functional, class components, etc.
+ *
+ * @see https://github.com/facebook/react/blob/865d2c418d5ba6fb4546e4b58616cd9b7701af85/packages/react/src/jsx/ReactJSXElement.js#L490
+ */
 declare const isCompositeFiber: (fiber: Fiber) => boolean;
 declare const traverseContexts: (fiber: Fiber, selector: (prevValue: {
     context: React.Context<unknown>;
@@ -66,6 +74,9 @@ declare const traverseState: (fiber: Fiber, selector: (prevValue: {
 }) => boolean | void) => boolean;
 declare const traverseProps: (fiber: Fiber, selector: (prevValue: unknown, nextValue: unknown) => boolean | void) => boolean;
 declare const didFiberRender: (fiber: Fiber) => boolean;
+/**
+ * A commit is means reconciliation occured and the host tree is updated
+ */
 declare const didFiberCommit: (fiber: Fiber) => boolean;
 declare const getMutatedHostFibers: (fiber: Fiber) => Array<Fiber>;
 declare const getFiberStack: (fiber: Fiber) => any[];
@@ -81,6 +92,7 @@ declare const getType: (type: any) => any;
 declare const getDisplayName: (type: any) => string | null;
 declare const isUsingRDT: () => boolean;
 declare const detectReactBuildType: (renderer: ReactRenderer) => "development" | "production";
+declare const installRDTHook: (onActive?: () => unknown) => ReactDevToolsGlobalHook;
 declare const getRDTHook: (onActive?: () => unknown) => ReactDevToolsGlobalHook;
 declare const isInstrumentationActive: () => boolean;
 type RenderHandler = <S>(fiber: Fiber, phase: 'mount' | 'update' | 'unmount', state?: S) => unknown;
@@ -88,10 +100,33 @@ declare const mountFiberRecursively: (onRender: RenderHandler, firstChild: Fiber
 declare const updateFiberRecursively: (onRender: RenderHandler, nextFiber: Fiber, prevFiber: Fiber, parentFiber: Fiber | null) => void;
 declare const unmountFiber: (onRender: RenderHandler, fiber: Fiber) => void;
 declare const unmountFiberChildrenRecursively: (onRender: RenderHandler, fiber: Fiber) => void;
+/**
+ * Creates a fiber visitor function.
+ * @param options { onRender, onError }
+ * @example
+ * const visitor = createFiberVisitor({
+ *   onRender(fiber, phase) {
+ *     console.log(phase)
+ *   },
+ * });
+ */
 declare const createFiberVisitor: ({ onRender: onRenderWithoutState, onError, }: {
     onRender: RenderHandler;
     onError?: (error: unknown) => unknown;
 }) => <S>(_rendererID: number, root: FiberRoot, state?: S) => void;
+/**
+ * Instruments the DevTools hook.
+ * @param options { onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, onActive, name }
+ * @example
+ * const hook = instrument({
+ *   onActive() {
+ *     console.log('initialized');
+ *   },
+ *   onCommitFiberRoot(rendererID, root) {
+ *     console.log('fiberRoot', root.current)
+ *   },
+ * });
+ */
 declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, onActive, name, }: {
     onCommitFiberRoot?: (rendererID: number, root: FiberRoot, priority: void | number) => unknown;
     onCommitFiberUnmount?: (rendererID: number, root: FiberRoot) => unknown;
@@ -100,4 +135,4 @@ declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostComm
     name?: string;
 }) => ReactDevToolsGlobalHook;
 
-export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ChildDeletion, ClassComponentTag, Cloned, ContentReset, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, DidCapture, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, Hydrating, LegacyHiddenComponent, MemoComponentTag, MutationMask, OffscreenComponent, OffscreenComponentTag, PerformedWork, Placement, type ReactDevToolsGlobalHook, type ReactRenderer, Ref, SimpleMemoComponentTag, Snapshot, SuspenseComponentTag, Update, Visibility, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, instrument, isCompositeFiber, isHostFiber, isInstrumentationActive, isUsingRDT, isValidElement, mountFiberRecursively, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively };
+export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ChildDeletion, ClassComponentTag, Cloned, ContentReset, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, DidCapture, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, Hydrating, LegacyHiddenComponent, MemoComponentTag, MutationMask, OffscreenComponent, OffscreenComponentTag, PerformedWork, Placement, type ReactDevToolsGlobalHook, type ReactRenderer, Ref, SimpleMemoComponentTag, Snapshot, SuspenseComponentTag, Update, Visibility, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, installRDTHook, instrument, isCompositeFiber, isHostFiber, isInstrumentationActive, isUsingRDT, isValidElement, mountFiberRecursively, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively };

package/dist/index.global.js

@@ -6,5 +6,5 @@ var Bippy=(function(exports){'use strict';/**
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var D=1,H=0,E=9,P=13,M=22,z=11,I=14,A=15,N=5,V=26,U=27,j=18,L=6,B=7,G=23,W=22,$=3,K=60111,R="Symbol(react.concurrent_mode)",_="Symbol(react.async_mode)",Y=1,J=2,Q=128,q=4096,X=4,Z=8,ee=16,te=32,ne=512,oe=1024,re=8192,ie=13366,le=e=>typeof e=="object"&&e!=null&&"$$typeof"in e&&["Symbol(react.element)","Symbol(react.transitional.element)"].includes(String(e.$$typeof)),d=e=>e.tag===5||e.tag===26||e.tag===27,se=e=>e.tag===0||e.tag===1||e.tag===15||e.tag===14||e.tag===11,ae=(e,t)=>{try{let o=e.dependencies,n=e.alternate?.dependencies;if(!o||!n||typeof o!="object"||!("firstContext"in o)||typeof n!="object"||!("firstContext"in n))return !1;let l=o.firstContext,r=n.firstContext;for(;l&&typeof l=="object"&&"memoizedValue"in l&&r&&typeof r=="object"&&"memoizedValue"in r;){if(t(l,r)===!0)return !0;l=l.next,r=r.next;}}catch{}return !1},ce=(e,t)=>{try{let o=e.memoizedState,n=e.alternate?.memoizedState;for(;o&&n;){if(t(o,n)===!0)return !0;o=o.next,n=n.next;}}catch{}return !1},ue=(e,t)=>{try{let o=e.memoizedProps,n=e.alternate?.memoizedProps||{},l=new Set([...Object.keys(n),...Object.keys(o)]);for(let r of l){let s=n?.[r],c=o?.[r];if(t(s,c)===!0)return !0}}catch{}return !1},C=e=>{let t=e.memoizedProps,o=e.alternate?.memoizedProps||{},n=e.flags??e.effectTag??0;switch(e.tag){case 1:case 0:case 9:case 11:case 14:case 15:return (n&1)===1;default:return e.alternate?o!==t||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref:!0}},w=e=>!!(e.flags&22||e.subtreeFlags&22),me=e=>{let t=[],o=[e];for(;o.length;){let n=o.pop();n&&(d(n)&&w(n)&&C(n)&&t.push(n),n.child&&o.push(n.child),n.sibling&&o.push(n.sibling));}return t},pe=e=>{let t=[];for(;e.return;)t.push(e),e=e.return;let o=new Array(t.length);for(let n=0;n<t.length;n++)o[n]=t[t.length-n-1];return o},g=e=>{switch(e.tag){case 18:return !0;case 6:case 7:case 23:case 22:return !0;case 3:return !1;default:{let t=typeof e.type=="object"&&e.type!==null?e.type.$$typeof:e.type;switch(typeof t=="symbol"?t.toString():t){case 60111:case R:case _:return !0;default:return !1}}}},de=e=>{let t=b(e,d);return t||(t=b(e,d,!0)),t},b=(e,t,o=!1)=>{if(!e)return null;if(t(e)===!0)return e;let n=o?e.return:e.child;for(;n;){let l=b(n,t,o);if(l)return l;n=o?null:n.sibling;}return null},be=e=>{let t=e?.actualDuration??0,o=t,n=e?.child??null;for(;t>0&&n!=null;)o-=n.actualDuration??0,n=n.sibling;return {selfTime:o,totalTime:t}},fe=e=>!!e.updateQueue?.memoCache,y=e=>typeof e=="function"?e:typeof e=="object"&&e?y(e.type||e.render):null,Ce=e=>{if(typeof e!="function"&&!(typeof e=="object"&&e))return null;let t=e.displayName||e.name||null;return t||(e=y(e),e&&(e.displayName||e.name)||null)},k=()=>globalThis.__REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__!=null,ge=e=>{try{if(typeof e.version=="string"&&e.bundleType>0)return "development"}catch{}return "production"},v=e=>{try{Function.prototype.toString.call(e).indexOf("^_^")>-1&&setTimeout(()=>{throw new Error("React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://reactjs.org/link/perf-use-production-build")});}catch{}},p=()=>{},h=e=>{let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t&&e?.(),!window.hasOwnProperty("__REACT_DEVTOOLS_GLOBAL_HOOK__")){let o=new Map,n=0;t??={checkDCE:v,supportsFiber:!0,supportsFlight:!0,renderers:o,onCommitFiberRoot:p,onCommitFiberUnmount:p,onPostCommitFiberRoot:p,inject(l){let r=++n;return o.set(r,l),t._instrumentationIsActive||(t._instrumentationIsActive=!0,e?.()),r},_instrumentationSource:"bippy",_instrumentationIsActive:!!t};try{Object.defineProperty(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__",{configurable:!0,value:t});}catch{}}return t},he=()=>!!h()._instrumentationIsActive||k();typeof window<"u"&&(performance.now(),h());var m=(e,t,o)=>{let n=t;for(;n!=null;){if(!g(n)&&C(n)&&e(n,"mount"),n.tag===13)if(n.memoizedState!==null){let s=n.child,c=s?s.sibling:null;if(c){let i=c.child;i!==null&&m(e,i,!1);}}else {let s=null;n.child!==null&&(s=n.child.child),s!==null&&m(e,s,!1);}else n.child!=null&&m(e,n.child,!0);n=o?n.sibling:null;}},f=(e,t,o,n)=>{if(!o)return;let l=t.tag===13,r=!g(t);r&&C(t)&&e(t,"update");let s=l&&o.memoizedState!==null,c=l&&t.memoizedState!==null;if(s&&c){let i=t.child?.sibling??null,a=o.child?.sibling??null;i!==null&&a!==null&&f(e,i,a);}else if(s&&!c){let i=t.child;i!==null&&m(e,i,!0);}else if(!s&&c){T(e,o);let i=t.child?.sibling??null;i!==null&&m(e,i,!0);}else if(t.child!==o.child){let i=t.child;for(;i;){if(i.alternate){let a=i.alternate;f(e,i,a);}else m(e,i,!1);i=i.sibling;}}},S=(e,t)=>{(t.tag===3||!g(t))&&e(t,"unmount");},T=(e,t)=>{let o=t.tag===13&&t.memoizedState!==null,n=t.child;for(o&&(n=(t.child?.sibling??null)?.child??null);n!==null;)n.return!==null&&(S(e,n),T(e,n)),n=n.sibling;},O=0,F=new WeakMap,xe=({onRender:e,onError:t})=>(o,n,l)=>{let r=n.current,s=(a,u)=>e(a,u,l),c=F.get(n);c||(c={prevFiber:null,id:O++},F.set(n,c));let{prevFiber:i}=c;try{if(i!==null){let a=i&&i.memoizedState!=null&&i.memoizedState.element!=null&&i.memoizedState.isDehydrated!==!0,u=r.memoizedState!=null&&r.memoizedState.element!=null&&r.memoizedState.isDehydrated!==!0;!a&&u?m(s,r,!1):a&&u?f(s,r,r.alternate,null):a&&!u&&S(s,r);}else m(s,r,!1);}catch(a){if(t)t(a);else throw a}c.prevFiber=r;},Fe=({onCommitFiberRoot:e,onCommitFiberUnmount:t,onPostCommitFiberRoot:o,onActive:n,name:l})=>{let r=h(n);r._instrumentationSource=l??"bippy";let s=r.onCommitFiberRoot;e&&(r.onCommitFiberRoot=(a,u,x)=>{s&&s(a,u,x),e(a,u,x);});let c=r.onCommitFiberUnmount;t&&(r.onCommitFiberUnmount=(a,u)=>{c&&c(a,u),t(a,u);});let i=r.onPostCommitFiberRoot;return o&&(r.onPostCommitFiberRoot=(a,u)=>{i&&i(a,u);}),r};
-exports.CONCURRENT_MODE_NUMBER=K;exports.CONCURRENT_MODE_SYMBOL_STRING=R;exports.ChildDeletion=ee;exports.ClassComponentTag=D;exports.Cloned=Z;exports.ContentReset=te;exports.ContextConsumerTag=E;exports.DEPRECATED_ASYNC_MODE_SYMBOL_STRING=_;exports.DehydratedSuspenseComponent=j;exports.DidCapture=Q;exports.ForwardRefTag=z;exports.Fragment=B;exports.FunctionComponentTag=H;exports.HostComponentTag=N;exports.HostHoistableTag=V;exports.HostRoot=$;exports.HostSingletonTag=U;exports.HostText=L;exports.Hydrating=q;exports.LegacyHiddenComponent=G;exports.MemoComponentTag=I;exports.MutationMask=ie;exports.OffscreenComponent=W;exports.OffscreenComponentTag=M;exports.PerformedWork=Y;exports.Placement=J;exports.Ref=ne;exports.SimpleMemoComponentTag=A;exports.Snapshot=oe;exports.SuspenseComponentTag=P;exports.Update=X;exports.Visibility=re;exports.createFiberVisitor=xe;exports.detectReactBuildType=ge;exports.didFiberCommit=w;exports.didFiberRender=C;exports.getDisplayName=Ce;exports.getFiberStack=pe;exports.getMutatedHostFibers=me;exports.getNearestHostFiber=de;exports.getRDTHook=h;exports.getTimings=be;exports.getType=y;exports.hasMemoCache=fe;exports.instrument=Fe;exports.isCompositeFiber=se;exports.isHostFiber=d;exports.isInstrumentationActive=he;exports.isUsingRDT=k;exports.isValidElement=le;exports.mountFiberRecursively=m;exports.shouldFilterFiber=g;exports.traverseContexts=ae;exports.traverseFiber=b;exports.traverseProps=ue;exports.traverseState=ce;exports.unmountFiber=S;exports.unmountFiberChildrenRecursively=T;exports.updateFiberRecursively=f;return exports;})({});
+var P=1,M=0,z=9,I=13,A=22,N=11,V=14,U=15,j=5,L=26,B=27,G=18,W=6,$=7,K=23,Y=22,J=3,Q=60111,_="Symbol(react.concurrent_mode)",k="Symbol(react.async_mode)",q=1,X=2,Z=128,ee=4096,te=4,ne=8,oe=16,re=32,ie=512,se=1024,le=8192,ae=13366,ce=e=>typeof e=="object"&&e!=null&&"$$typeof"in e&&["Symbol(react.element)","Symbol(react.transitional.element)"].includes(String(e.$$typeof)),d=e=>e.tag===5||e.tag===26||e.tag===27,ue=e=>e.tag===0||e.tag===1||e.tag===15||e.tag===14||e.tag===11,me=(e,n)=>{try{let o=e.dependencies,t=e.alternate?.dependencies;if(!o||!t||typeof o!="object"||!("firstContext"in o)||typeof t!="object"||!("firstContext"in t))return !1;let s=o.firstContext,r=t.firstContext;for(;s&&typeof s=="object"&&"memoizedValue"in s&&r&&typeof r=="object"&&"memoizedValue"in r;){if(n(s,r)===!0)return !0;s=s.next,r=r.next;}}catch{}return !1},pe=(e,n)=>{try{let o=e.memoizedState,t=e.alternate?.memoizedState;for(;o&&t;){if(n(o,t)===!0)return !0;o=o.next,t=t.next;}}catch{}return !1},de=(e,n)=>{try{let o=e.memoizedProps,t=e.alternate?.memoizedProps||{},s=new Set([...Object.keys(t),...Object.keys(o)]);for(let r of s){let l=t?.[r],c=o?.[r];if(n(l,c)===!0)return !0}}catch{}return !1},C=e=>{let n=e.memoizedProps,o=e.alternate?.memoizedProps||{},t=e.flags??e.effectTag??0;switch(e.tag){case 1:case 0:case 9:case 11:case 14:case 15:return (t&1)===1;default:return e.alternate?o!==n||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref:!0}},w=e=>!!(e.flags&22||e.subtreeFlags&22),be=e=>{let n=[],o=[e];for(;o.length;){let t=o.pop();t&&(d(t)&&w(t)&&C(t)&&n.push(t),t.child&&o.push(t.child),t.sibling&&o.push(t.sibling));}return n},fe=e=>{let n=[];for(;e.return;)n.push(e),e=e.return;let o=new Array(n.length);for(let t=0;t<n.length;t++)o[t]=n[n.length-t-1];return o},g=e=>{switch(e.tag){case 18:return !0;case 6:case 7:case 23:case 22:return !0;case 3:return !1;default:{let n=typeof e.type=="object"&&e.type!==null?e.type.$$typeof:e.type;switch(typeof n=="symbol"?n.toString():n){case 60111:case _:case k:return !0;default:return !1}}}},Ce=e=>{let n=b(e,d);return n||(n=b(e,d,!0)),n},b=(e,n,o=!1)=>{if(!e)return null;if(n(e)===!0)return e;let t=o?e.return:e.child;for(;t;){let s=b(t,n,o);if(s)return s;t=o?null:t.sibling;}return null},ge=e=>{let n=e?.actualDuration??0,o=n,t=e?.child??null;for(;n>0&&t!=null;)o-=t.actualDuration??0,t=t.sibling;return {selfTime:o,totalTime:n}},he=e=>!!e.updateQueue?.memoCache,F=e=>typeof e=="function"?e:typeof e=="object"&&e?F(e.type||e.render):null,xe=e=>{if(typeof e!="function"&&!(typeof e=="object"&&e))return null;let n=e.displayName||e.name||null;return n||(e=F(e),e&&(e.displayName||e.name)||null)},v=()=>globalThis.__REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__!=null,Fe=e=>{try{if(typeof e.version=="string"&&e.bundleType>0)return "development"}catch{}return "production"},O=e=>{try{Function.prototype.toString.call(e).indexOf("^_^")>-1&&setTimeout(()=>{throw new Error("React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://reactjs.org/link/perf-use-production-build")});}catch{}},p=()=>{},y=e=>{let n=new Map,o=0,t={checkDCE:O,supportsFiber:!0,supportsFlight:!0,renderers:n,onCommitFiberRoot:p,onCommitFiberUnmount:p,onPostCommitFiberRoot:p,inject(s){let r=++o;return n.set(r,s),t._instrumentationIsActive||(t._instrumentationIsActive=!0,e?.()),r},_instrumentationSource:"bippy",_instrumentationIsActive:!1};try{Object.defineProperty(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__",{configurable:!0,value:t});}catch{}return t},T=e=>{let n=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;return n&&e?.(),window.hasOwnProperty("__REACT_DEVTOOLS_GLOBAL_HOOK__")||(n=y(e)),n},ye=()=>!!T()._instrumentationIsActive||v(),m=(e,n,o)=>{let t=n;for(;t!=null;){if(!g(t)&&C(t)&&e(t,"mount"),t.tag===13)if(t.memoizedState!==null){let l=t.child,c=l?l.sibling:null;if(c){let i=c.child;i!==null&&m(e,i,!1);}}else {let l=null;t.child!==null&&(l=t.child.child),l!==null&&m(e,l,!1);}else t.child!=null&&m(e,t.child,!0);t=o?t.sibling:null;}},f=(e,n,o,t)=>{if(!o)return;let s=n.tag===13,r=!g(n);r&&C(n)&&e(n,"update");let l=s&&o.memoizedState!==null,c=s&&n.memoizedState!==null;if(l&&c){let i=n.child?.sibling??null,a=o.child?.sibling??null;i!==null&&a!==null&&f(e,i,a);}else if(l&&!c){let i=n.child;i!==null&&m(e,i,!0);}else if(!l&&c){S(e,o);let i=n.child?.sibling??null;i!==null&&m(e,i,!0);}else if(n.child!==o.child){let i=n.child;for(;i;){if(i.alternate){let a=i.alternate;f(e,i,a);}else m(e,i,!1);i=i.sibling;}}},R=(e,n)=>{(n.tag===3||!g(n))&&e(n,"unmount");},S=(e,n)=>{let o=n.tag===13&&n.memoizedState!==null,t=n.child;for(o&&(t=(n.child?.sibling??null)?.child??null);t!==null;)t.return!==null&&(R(e,t),S(e,t)),t=t.sibling;},D=0,x=new WeakMap,Te=({onRender:e,onError:n})=>(o,t,s)=>{let r=t.current,l=(a,u)=>e(a,u,s),c=x.get(t);c||(c={prevFiber:null,id:D++},x.set(t,c));let{prevFiber:i}=c;try{if(i!==null){let a=i&&i.memoizedState!=null&&i.memoizedState.element!=null&&i.memoizedState.isDehydrated!==!0,u=r.memoizedState!=null&&r.memoizedState.element!=null&&r.memoizedState.isDehydrated!==!0;!a&&u?m(l,r,!1):a&&u?f(l,r,r.alternate,null):a&&!u&&R(l,r);}else m(l,r,!1);}catch(a){if(n)n(a);else throw a}c.prevFiber=r;},Re=({onCommitFiberRoot:e,onCommitFiberUnmount:n,onPostCommitFiberRoot:o,onActive:t,name:s})=>{let r=T(t);r._instrumentationSource=s??"bippy";let l=r.onCommitFiberRoot;e&&(r.onCommitFiberRoot=(a,u,h)=>{l&&l(a,u,h),e(a,u,h);});let c=r.onCommitFiberUnmount;n&&(r.onCommitFiberUnmount=(a,u)=>{c&&c(a,u),n(a,u);});let i=r.onPostCommitFiberRoot;return o&&(r.onPostCommitFiberRoot=(a,u)=>{i&&i(a,u);}),r},H=typeof document<"u"&&typeof document.createElement=="function",E=typeof process<"u"&&process.versions!=null&&process.versions.node!=null;(H||!E)&&y();
+exports.CONCURRENT_MODE_NUMBER=Q;exports.CONCURRENT_MODE_SYMBOL_STRING=_;exports.ChildDeletion=oe;exports.ClassComponentTag=P;exports.Cloned=ne;exports.ContentReset=re;exports.ContextConsumerTag=z;exports.DEPRECATED_ASYNC_MODE_SYMBOL_STRING=k;exports.DehydratedSuspenseComponent=G;exports.DidCapture=Z;exports.ForwardRefTag=N;exports.Fragment=$;exports.FunctionComponentTag=M;exports.HostComponentTag=j;exports.HostHoistableTag=L;exports.HostRoot=J;exports.HostSingletonTag=B;exports.HostText=W;exports.Hydrating=ee;exports.LegacyHiddenComponent=K;exports.MemoComponentTag=V;exports.MutationMask=ae;exports.OffscreenComponent=Y;exports.OffscreenComponentTag=A;exports.PerformedWork=q;exports.Placement=X;exports.Ref=ie;exports.SimpleMemoComponentTag=U;exports.Snapshot=se;exports.SuspenseComponentTag=I;exports.Update=te;exports.Visibility=le;exports.createFiberVisitor=Te;exports.detectReactBuildType=Fe;exports.didFiberCommit=w;exports.didFiberRender=C;exports.getDisplayName=xe;exports.getFiberStack=fe;exports.getMutatedHostFibers=be;exports.getNearestHostFiber=Ce;exports.getRDTHook=T;exports.getTimings=ge;exports.getType=F;exports.hasMemoCache=he;exports.installRDTHook=y;exports.instrument=Re;exports.isCompositeFiber=ue;exports.isHostFiber=d;exports.isInstrumentationActive=ye;exports.isUsingRDT=v;exports.isValidElement=ce;exports.mountFiberRecursively=m;exports.shouldFilterFiber=g;exports.traverseContexts=me;exports.traverseFiber=b;exports.traverseProps=de;exports.traverseState=pe;exports.unmountFiber=R;exports.unmountFiberChildrenRecursively=S;exports.updateFiberRecursively=f;return exports;})({});

package/dist/index.js

@@ -247,39 +247,43 @@ var checkDCE = (fn) => {
 };
 var NO_OP = () => {
 };
+var installRDTHook = (onActive) => {
+  const renderers = /* @__PURE__ */ new Map();
+  let i = 0;
+  const rdtHook = {
+    checkDCE,
+    supportsFiber: true,
+    supportsFlight: true,
+    renderers,
+    onCommitFiberRoot: NO_OP,
+    onCommitFiberUnmount: NO_OP,
+    onPostCommitFiberRoot: NO_OP,
+    inject(renderer) {
+      const nextID = ++i;
+      renderers.set(nextID, renderer);
+      if (!rdtHook._instrumentationIsActive) {
+        rdtHook._instrumentationIsActive = true;
+        onActive?.();
+      }
+      return nextID;
+    },
+    _instrumentationSource: "bippy",
+    _instrumentationIsActive: false
+  };
+  try {
+    Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
+      configurable: true,
+      value: rdtHook
+    });
+  } catch {
+  }
+  return rdtHook;
+};
 var getRDTHook = (onActive) => {
   let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (rdtHook) onActive?.();
   if (!window.hasOwnProperty("__REACT_DEVTOOLS_GLOBAL_HOOK__")) {
-    const renderers = /* @__PURE__ */ new Map();
-    let i = 0;
-    rdtHook ??= {
-      checkDCE,
-      supportsFiber: true,
-      supportsFlight: true,
-      renderers,
-      onCommitFiberRoot: NO_OP,
-      onCommitFiberUnmount: NO_OP,
-      onPostCommitFiberRoot: NO_OP,
-      inject(renderer) {
-        const nextID = ++i;
-        renderers.set(nextID, renderer);
-        if (!rdtHook._instrumentationIsActive) {
-          rdtHook._instrumentationIsActive = true;
-          onActive?.();
-        }
-        return nextID;
-      },
-      _instrumentationSource: "bippy",
-      _instrumentationIsActive: Boolean(rdtHook)
-    };
-    try {
-      Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
-        configurable: true,
-        value: rdtHook
-      });
-    } catch {
-    }
+    rdtHook = installRDTHook(onActive);
   }
   return rdtHook;
 };
@@ -287,10 +291,6 @@ var isInstrumentationActive = () => {
   const rdtHook = getRDTHook();
   return Boolean(rdtHook._instrumentationIsActive) || isUsingRDT();
 };
-if (typeof window !== "undefined") {
-  performance.now();
-  getRDTHook();
-}
 var mountFiberRecursively = (onRender, firstChild, traverseSiblings) => {
   let fiber = firstChild;
   while (fiber != null) {
@@ -471,5 +471,10 @@ var instrument = ({
   }
   return devtoolsHook;
 };
+var isBrowser = typeof document !== "undefined" && typeof document.createElement === "function";
+var isNode = typeof process !== "undefined" && process.versions != null && process.versions.node != null;
+if (isBrowser || !isNode) {
+  installRDTHook();
+}
 
-export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ChildDeletion, ClassComponentTag, Cloned, ContentReset, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, DidCapture, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, Hydrating, LegacyHiddenComponent, MemoComponentTag, MutationMask, OffscreenComponent, OffscreenComponentTag, PerformedWork, Placement, Ref, SimpleMemoComponentTag, Snapshot, SuspenseComponentTag, Update, Visibility, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, instrument, isCompositeFiber, isHostFiber, isInstrumentationActive, isUsingRDT, isValidElement, mountFiberRecursively, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively };
+export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ChildDeletion, ClassComponentTag, Cloned, ContentReset, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, DidCapture, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, Hydrating, LegacyHiddenComponent, MemoComponentTag, MutationMask, OffscreenComponent, OffscreenComponentTag, PerformedWork, Placement, Ref, SimpleMemoComponentTag, Snapshot, SuspenseComponentTag, Update, Visibility, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, installRDTHook, instrument, isCompositeFiber, isHostFiber, isInstrumentationActive, isUsingRDT, isValidElement, mountFiberRecursively, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bippy",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "a hacky way to get fibers from react",
   "keywords": [
     "react",