bippy 0.2.6 → 0.2.7

package/dist/inspect.js

@@ -1,5 +1,5 @@
 import './chunk-6TJRMCM3.js';
-import { getFiberId, HostRootTag, HostTextTag, getDisplayName, FragmentTag, isHostFiber, getNearestHostFiber, getFiberFromHostInstance, traverseFiber, getFiberStack, isCompositeFiber, isInstrumentationActive, hasRDTHook, getRDTHook, detectReactBuildType } from './chunk-DCVQB6TW.js';
+import { getFiberId, HostRootTag, HostTextTag, getDisplayName, FragmentTag, isHostFiber, getNearestHostFiber, onCommitFiberRoot, traverseRenderedFibers, getRDTHook, getFiberFromHostInstance, traverseFiber, getFiberStack, isCompositeFiber, isInstrumentationActive, hasRDTHook, detectReactBuildType } from './chunk-ZF32UKFC.js';
 import React17, { createContext, memo, Children, useContext, useCallback, useState, useLayoutEffect, useRef, useMemo, useEffect } from 'react';
 
 /**
@@ -4576,6 +4576,8 @@ function zoom_default2() {
 }
 
 // src/inspect.tsx
+var renderCounts = /* @__PURE__ */ new WeakMap();
+var fiberStates = /* @__PURE__ */ new Map();
 var FIBER_PROP_EXPLANATIONS = {
   tag: "Numeric type identifier for this fiber (e.g. 1=FunctionComponent, 5=HostComponent)",
   elementType: "The original function/class/element type",
@@ -4788,6 +4790,21 @@ var FiberGraph = React17.memo(
     const zoomRef = useRef();
     const linksGroupRef = useRef(null);
     const nodesGroupRef = useRef(null);
+    const renderedFibersRef = useRef(/* @__PURE__ */ new Set());
+    const flashTimeoutRef = useRef();
+    const [timelineIndex, setTimelineIndex] = useState(-1);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const playIntervalRef = useRef();
+    const [activeTab, setActiveTab] = useState("graph");
+    const [tooltip, setTooltip] = useState(null);
+    const handlePropertyHover = (e, propName) => {
+      if (!isDialogMode) return;
+      const explanation = FIBER_PROP_EXPLANATIONS[propName];
+      setTooltip(explanation || null);
+    };
+    const handlePropertyLeave = () => {
+      setTooltip(null);
+    };
     const { nodes, links } = useMemo(() => {
       const nodes2 = [];
       const links2 = [];
@@ -4983,16 +5000,21 @@ var FiberGraph = React17.memo(
           const isRoot = d.data.id === nodes[0].id;
           const isPreview = !isDialogMode;
           const scale = isRoot ? isPreview ? 2 : 1.75 : 1;
-          const rect = g.selectAll("rect").data([d]).join("rect").attr("x", -75 * scale).attr("y", -30 * scale).attr("width", 150 * scale).attr("height", 60 * scale).attr("rx", 6 * scale).attr("fill", isCompositeFiber(d.data.fiber) ? "#FFF" : "#232323").attr("stroke", "#505050").attr("stroke-width", isRoot ? "3" : "2");
+          const isRendered = renderedFibersRef.current.has(
+            getFiberId(d.data.fiber).toString()
+          );
+          const rect = g.selectAll("rect").data([d]).join("rect").attr("x", -75 * scale).attr("y", -30 * scale).attr("width", 150 * scale).attr("height", 60 * scale).attr("rx", 6 * scale).attr("fill", isCompositeFiber(d.data.fiber) ? "#FFF" : "#232323").attr("stroke", isRendered ? "#FFC799" : "#505050").attr("stroke-width", isRoot ? "3" : "2");
           rect.on("mouseover", function() {
             select_default2(this).attr("stroke", "#808080").attr("stroke-width", isRoot ? "4" : "3");
           }).on("mouseout", function() {
-            select_default2(this).attr("stroke", "#505050").attr("stroke-width", isRoot ? "3" : "2");
+            select_default2(this).attr("stroke", isRendered ? "#FFC799" : "#505050").attr("stroke-width", isRoot ? "3" : "2");
           });
+          const renderCount = renderCounts.get(d.data.fiber) || 0;
+          const renderText = renderCount > 0 ? ` \xD7${renderCount}` : "";
           g.selectAll("text.name").data([d]).join("text").attr("class", "name").attr("text-anchor", "middle").attr("dy", `${-0.6 * scale}em`).attr("fill", isCompositeFiber(d.data.fiber) ? "#000" : "#FFF").attr("font-weight", "500").attr(
             "font-size",
             isRoot ? isPreview ? "1.75em" : "1.5em" : "1em"
-          ).text(d.data.name);
+          ).text(d.data.name + renderText);
           g.selectAll("text.props").data([d]).join("text").attr("class", "props").attr("text-anchor", "middle").attr("dy", `${0.9 * scale}em`).attr("fill", isCompositeFiber(d.data.fiber) ? "#666" : "#999").attr(
             "font-size",
             isRoot ? isPreview ? "1.25em" : "1.1em" : "0.75em"
@@ -5057,7 +5079,173 @@ var FiberGraph = React17.memo(
         setTimeout(handleFit, 0);
       }
     }, [nodes.length, handleFit]);
-    return /* @__PURE__ */ React17.createElement("div", { style: { height: "50ch", marginTop: "2ch" } }, /* @__PURE__ */ React17.createElement(
+    useEffect(() => {
+      onCommitFiberRoot((root2) => {
+        if (flashTimeoutRef.current) {
+          clearTimeout(flashTimeoutRef.current);
+        }
+        renderedFibersRef.current = /* @__PURE__ */ new Set();
+        traverseRenderedFibers(root2, (renderedFiber) => {
+          const fiberId = getFiberId(renderedFiber).toString();
+          renderedFibersRef.current.add(fiberId);
+          const states = fiberStates.get(fiberId) || [];
+          states.push({
+            props: renderedFiber.memoizedProps ?? {},
+            hookState: renderedFiber.memoizedState ?? {},
+            timestamp: Date.now()
+          });
+          fiberStates.set(fiberId, states);
+          renderCounts.set(renderedFiber, (renderCounts.get(renderedFiber) || 0) + 1);
+        });
+        if (nodesGroupRef.current) {
+          const nodeElements = select_default2(nodesGroupRef.current).selectAll("g");
+          nodeElements.each(function(d) {
+            const isRendered = renderedFibersRef.current.has(
+              getFiberId(d.data.fiber).toString()
+            );
+            if (isRendered) {
+              const rect = select_default2(this).select("rect");
+              rect.attr("stroke", "#FFC799").style("filter", "drop-shadow(0 0 8px #FFC799)").transition().duration(400).style("filter", "none").attr("stroke", "#505050");
+              const renderCount = renderCounts.get(d.data.fiber) || 0;
+              const renderText = renderCount > 0 ? ` \xD7${renderCount}` : "";
+              select_default2(this).select("text.name").text(d.data.name + renderText);
+            }
+          });
+        }
+        flashTimeoutRef.current = setTimeout(() => {
+          renderedFibersRef.current = /* @__PURE__ */ new Set();
+        }, 400);
+      });
+      return () => {
+        if (flashTimeoutRef.current) {
+          clearTimeout(flashTimeoutRef.current);
+        }
+      };
+    }, []);
+    const handleTimelineChange = useCallback((index) => {
+      setTimelineIndex(index);
+      const fiberId = getFiberId(fiber).toString();
+      const states = fiberStates.get(fiberId);
+      if (states?.[index]) {
+        const rdtHook = getRDTHook();
+        if (rdtHook?.renderers.size > 0) {
+          const renderer = Array.from(rdtHook.renderers.values())?.[0];
+          const overrideProps = renderer?.currentDispatcherRef?.current?.overrideProps;
+          const overrideHookState = renderer?.currentDispatcherRef?.current?.overrideHookState;
+          const state = states?.[index];
+          if (state) {
+            if (overrideProps) {
+              overrideProps(fiber, state.props);
+            }
+            if (overrideHookState) {
+              overrideHookState(fiber, state.hookState);
+            }
+          }
+        }
+      }
+    }, [fiber]);
+    const handlePlayPause = useCallback(() => {
+      setIsPlaying((prev) => !prev);
+    }, []);
+    const handleStepForward = useCallback(() => {
+      const states = fiberStates.get(getFiberId(fiber).toString());
+      if (states) {
+        const nextIndex = Math.min(timelineIndex + 1, states.length - 1);
+        handleTimelineChange(nextIndex);
+      }
+    }, [fiber, timelineIndex, handleTimelineChange]);
+    const handleStepBack = useCallback(() => {
+      const states = fiberStates.get(getFiberId(fiber).toString());
+      if (states) {
+        const prevIndex = Math.max(timelineIndex - 1, 0);
+        handleTimelineChange(prevIndex);
+      }
+    }, [fiber, timelineIndex, handleTimelineChange]);
+    useEffect(() => {
+      if (isPlaying) {
+        playIntervalRef.current = setInterval(() => {
+          const states = fiberStates.get(getFiberId(fiber).toString());
+          if (states) {
+            const nextIndex = timelineIndex + 1;
+            if (nextIndex >= states.length) {
+              setIsPlaying(false);
+            } else {
+              handleTimelineChange(nextIndex);
+            }
+          }
+        }, 1e3);
+      } else if (playIntervalRef.current) {
+        clearInterval(playIntervalRef.current);
+      }
+      return () => {
+        if (playIntervalRef.current) {
+          clearInterval(playIntervalRef.current);
+        }
+      };
+    }, [isPlaying, fiber, timelineIndex, handleTimelineChange]);
+    return /* @__PURE__ */ React17.createElement("div", { style: { height: "50ch", marginTop: "2ch", display: "flex", flexDirection: "column", position: "relative" } }, isDialogMode && /* @__PURE__ */ React17.createElement("div", { style: {
+      display: "flex",
+      gap: "0.5ch",
+      marginBottom: "1ch",
+      padding: "0 1ch",
+      borderBottom: "1px solid #282828"
+    } }, /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveTab("graph"),
+        style: {
+          background: "transparent",
+          border: "none",
+          color: activeTab === "graph" ? "#FFC799" : "#A0A0A0",
+          padding: "1ch",
+          cursor: "pointer",
+          position: "relative",
+          fontSize: "0.875rem",
+          fontWeight: activeTab === "graph" ? 500 : 400
+        }
+      },
+      "Graph View",
+      activeTab === "graph" && /* @__PURE__ */ React17.createElement("div", { style: {
+        position: "absolute",
+        bottom: "-1px",
+        left: 0,
+        right: 0,
+        height: "2px",
+        background: "#FFC799",
+        borderRadius: "2px 2px 0 0"
+      } })
+    ), /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveTab("fiber"),
+        style: {
+          background: "transparent",
+          border: "none",
+          color: activeTab === "fiber" ? "#FFC799" : "#A0A0A0",
+          padding: "1ch",
+          cursor: "pointer",
+          position: "relative",
+          fontSize: "0.875rem",
+          fontWeight: activeTab === "fiber" ? 500 : 400
+        }
+      },
+      "Fiber View",
+      activeTab === "fiber" && /* @__PURE__ */ React17.createElement("div", { style: {
+        position: "absolute",
+        bottom: "-1px",
+        left: 0,
+        right: 0,
+        height: "2px",
+        background: "#FFC799",
+        borderRadius: "2px 2px 0 0"
+      } })
+    )), /* @__PURE__ */ React17.createElement("div", { style: { position: "relative", flex: 1 } }, /* @__PURE__ */ React17.createElement("div", { style: {
+      position: "absolute",
+      inset: 0,
+      display: activeTab === "graph" ? "block" : "none"
+    } }, /* @__PURE__ */ React17.createElement(
       Controls,
       {
         onZoomIn: handleZoomIn,
@@ -5082,7 +5270,213 @@ var FiberGraph = React17.memo(
       },
       /* @__PURE__ */ React17.createElement("title", null, "Fiber Tree Visualization"),
       /* @__PURE__ */ React17.createElement("g", { ref: svgGroupRef }, /* @__PURE__ */ React17.createElement("g", { ref: linksGroupRef, className: "links" }), /* @__PURE__ */ React17.createElement("g", { ref: nodesGroupRef, className: "nodes" }))
-    ));
+    )), /* @__PURE__ */ React17.createElement("div", { style: {
+      position: "absolute",
+      inset: 0,
+      display: activeTab === "fiber" ? "block" : "none",
+      overflow: "auto",
+      background: "#101010",
+      borderRadius: "0.25rem",
+      padding: "1ch"
+    } }, /* @__PURE__ */ React17.createElement(
+      Inspector,
+      {
+        theme: theme3,
+        data: fiber,
+        expandLevel: isDialogMode ? 1 : 0,
+        table: false,
+        nodeRenderer: (props) => {
+          const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
+          return /* @__PURE__ */ React17.createElement(
+            "span",
+            {
+              onMouseEnter: (e) => handlePropertyHover(e, props.name),
+              onMouseLeave: handlePropertyLeave,
+              style: {
+                cursor: FIBER_PROP_EXPLANATIONS[props.name] ? "help" : "default",
+                padding: "1px 0",
+                display: "inline-block",
+                fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
+              }
+            },
+            /* @__PURE__ */ React17.createElement(
+              Component,
+              {
+                name: props.name,
+                data: props.data,
+                isNonenumerable: props.isNonenumerable
+              }
+            )
+          );
+        }
+      }
+    ), tooltip && /* @__PURE__ */ React17.createElement("div", { style: {
+      position: "absolute",
+      zIndex: 1001,
+      backgroundColor: "#161616",
+      color: "#FFF",
+      bottom: "2ch",
+      right: "2ch",
+      pointerEvents: "none",
+      overflowY: "auto",
+      padding: "1ch",
+      fontSize: "1ch",
+      border: "1px solid #282828",
+      borderRadius: "0.25ch"
+    } }, tooltip))), isDialogMode && /* @__PURE__ */ React17.createElement("div", { style: {
+      background: "#161616",
+      padding: "1ch",
+      margin: "1ch 1ch 0 1ch",
+      borderRadius: "0.25rem",
+      border: "1px solid #282828",
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5ch",
+      opacity: fiberStates.get(getFiberId(fiber).toString())?.length ? 1 : 0.5
+    } }, /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", alignItems: "center", gap: "0.5ch" } }, /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: handleStepBack,
+        disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
+        style: {
+          background: "transparent",
+          border: "1px solid #282828",
+          color: "#FFF",
+          borderRadius: "0.25rem",
+          cursor: fiberStates.get(getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
+          padding: "0.25ch 0.5ch"
+        }
+      },
+      "\u23EE"
+    ), /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: handlePlayPause,
+        disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
+        style: {
+          background: "transparent",
+          border: "1px solid #282828",
+          color: "#FFF",
+          borderRadius: "0.25rem",
+          cursor: fiberStates.get(getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
+          padding: "0.25ch 0.5ch"
+        }
+      },
+      isPlaying ? "\u23F8" : "\u25B6\uFE0F"
+    ), /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: handleStepForward,
+        disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
+        style: {
+          background: "transparent",
+          border: "1px solid #282828",
+          color: "#FFF",
+          borderRadius: "0.25rem",
+          cursor: fiberStates.get(getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
+          padding: "0.25ch 0.5ch"
+        }
+      },
+      "\u23ED"
+    ), /* @__PURE__ */ React17.createElement("span", { style: { color: "#A0A0A0", fontSize: "0.75rem" } }, timelineIndex >= 0 && fiberStates.get(getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ? new Date(fiberStates.get(getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ?? 0).toLocaleTimeString() : "--:--:--"), !fiberStates.get(getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17.createElement("span", { style: { color: "#A0A0A0", fontSize: "0.75rem", marginLeft: "auto" } }, "No state changes recorded yet")), /* @__PURE__ */ React17.createElement("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.25ch",
+      height: "2ch",
+      position: "relative"
+    } }, (fiberStates.get(getFiberId(fiber).toString()) ?? []).map((state, i) => {
+      const isActive = i === timelineIndex;
+      return /* @__PURE__ */ React17.createElement(
+        "div",
+        {
+          key: state.timestamp,
+          onClick: () => handleTimelineChange(i),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleTimelineChange(i);
+            }
+          },
+          role: "button",
+          tabIndex: 0,
+          style: {
+            flex: 1,
+            height: "100%",
+            background: isActive ? "#FFC799" : "#282828",
+            cursor: "pointer",
+            position: "relative",
+            borderRadius: "0.125rem",
+            transition: "background-color 150ms",
+            outline: "none"
+          },
+          onMouseEnter: (e) => {
+            const target = e.currentTarget;
+            const tooltip2 = document.createElement("div");
+            tooltip2.style.position = "absolute";
+            tooltip2.style.bottom = "100%";
+            tooltip2.style.left = "50%";
+            tooltip2.style.transform = "translateX(-50%)";
+            tooltip2.style.background = "#161616";
+            tooltip2.style.color = "#FFF";
+            tooltip2.style.padding = "0.5ch";
+            tooltip2.style.borderRadius = "0.25rem";
+            tooltip2.style.fontSize = "0.75rem";
+            tooltip2.style.whiteSpace = "nowrap";
+            tooltip2.style.pointerEvents = "none";
+            tooltip2.style.border = "1px solid #282828";
+            tooltip2.style.zIndex = "1000";
+            const changes = [];
+            const states = fiberStates.get(getFiberId(fiber).toString());
+            const prevState = i > 0 && states ? states[i - 1] : null;
+            if (prevState) {
+              const propChanges = Object.keys(state.props).filter(
+                (key) => state.props[key] !== prevState.props[key]
+              );
+              if (propChanges.length > 0) {
+                changes.push(`Props: ${propChanges.join(", ")}`);
+              }
+              const hookChanges = Object.keys(state.hookState).filter(
+                (key) => state.hookState[key] !== prevState.hookState[key]
+              );
+              if (hookChanges.length > 0) {
+                changes.push(`State: ${hookChanges.join(", ")}`);
+              }
+            }
+            tooltip2.textContent = changes.length > 0 ? changes.join(" | ") : prevState ? "No changes" : "Initial state";
+            target.appendChild(tooltip2);
+          },
+          onMouseLeave: (e) => {
+            const tooltip2 = e.currentTarget.querySelector("div");
+            if (tooltip2) {
+              tooltip2.remove();
+            }
+          }
+        }
+      );
+    }), !fiberStates.get(getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17.createElement("div", { style: {
+      flex: 1,
+      height: "100%",
+      background: "#282828",
+      borderRadius: "0.125rem",
+      opacity: 0.5
+    } })), /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: (fiberStates.get(getFiberId(fiber).toString())?.length ?? 1) - 1,
+        value: timelineIndex,
+        onChange: (e) => handleTimelineChange(Number(e.target.value)),
+        disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
+        style: {
+          width: "100%",
+          accentColor: "#FFC799",
+          opacity: fiberStates.get(getFiberId(fiber).toString())?.length ? 1 : 0.5
+        }
+      }
+    )));
   }
 );
 var Inspector2 = React17.memo(
@@ -5103,14 +5497,6 @@ var Inspector2 = React17.memo(
       const fiber2 = getFiberFromHostInstance(element);
       return fiber2;
     }, [selectedFiber, element]);
-    const handlePropertyHover = (_e, propName) => {
-      if (!isDialogMode) return;
-      const explanation = FIBER_PROP_EXPLANATIONS[propName];
-      setTooltip(explanation || null);
-    };
-    const handlePropertyLeave = () => {
-      setTooltip(null);
-    };
     const handleFiberSelect = (fiber2) => {
       if (fiber2 !== selectedFiber) {
         if (!isDialogMode) {
@@ -5416,52 +5802,6 @@ var Inspector2 = React17.memo(
           isDialogMode
         }
       ),
-      /* @__PURE__ */ React17.createElement(
-        "div",
-        {
-          onMouseLeave: handlePropertyLeave,
-          style: {
-            flex: isDialogMode ? 1 : "none",
-            overflow: "auto",
-            marginTop: "1ch",
-            borderTop: "1px solid #282828",
-            paddingTop: "1ch"
-          }
-        },
-        /* @__PURE__ */ React17.createElement(
-          Inspector,
-          {
-            theme: theme3,
-            data: fiber,
-            expandLevel: isDialogMode ? 1 : 0,
-            table: false,
-            nodeRenderer: (props) => {
-              const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
-              return /* @__PURE__ */ React17.createElement(
-                "span",
-                {
-                  onMouseEnter: (e) => handlePropertyHover(e, props.name),
-                  onMouseLeave: handlePropertyLeave,
-                  style: {
-                    cursor: FIBER_PROP_EXPLANATIONS[props.name] ? "help" : "default",
-                    padding: "1px 0",
-                    display: "inline-block",
-                    fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
-                  }
-                },
-                /* @__PURE__ */ React17.createElement(
-                  Component,
-                  {
-                    name: props.name,
-                    data: props.data,
-                    isNonenumerable: props.isNonenumerable
-                  }
-                )
-              );
-            }
-          }
-        )
-      ),
       tooltip && /* @__PURE__ */ React17.createElement(
         "div",
         {

package/dist/sw.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+/**
+ * @license bippy
+ *
+ * Copyright (c) Aiden Bai, Million Software, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// src/sw.ts
+(() => {
+  try {
+    const NO_OP = () => {
+    };
+    const renderers = /* @__PURE__ */ new Map();
+    let id = 0;
+    globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+      checkDCE: NO_OP,
+      supportsFiber: true,
+      supportsFlight: true,
+      hasUnsupportedRendererAttached: false,
+      renderers,
+      onCommitFiberRoot: NO_OP,
+      onCommitFiberUnmount: NO_OP,
+      onPostCommitFiberRoot: NO_OP,
+      inject(renderer) {
+        const nextID = ++id;
+        renderers.set(nextID, renderer);
+        globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__._instrumentationIsActive = true;
+        return nextID;
+      },
+      _instrumentationIsActive: false
+    };
+  } catch {
+  }
+})();

package/dist/sw.d.cts

@@ -0,0 +1,69 @@
+import { FiberRoot, Fiber as Fiber$1, ReactContext, Lanes } from 'react-reconciler';
+
+interface ReactDevToolsGlobalHook {
+    checkDCE: (fn: unknown) => void;
+    supportsFiber: boolean;
+    supportsFlight: boolean;
+    renderers: Map<number, ReactRenderer>;
+    hasUnsupportedRendererAttached: boolean;
+    onCommitFiberRoot: (rendererID: number, root: FiberRoot, priority: void | number) => void;
+    onCommitFiberUnmount: (rendererID: number, fiber: Fiber) => void;
+    onPostCommitFiberRoot: (rendererID: number, root: FiberRoot) => void;
+    inject: (renderer: ReactRenderer) => number;
+    _instrumentationSource?: string;
+    _instrumentationIsActive?: boolean;
+}
+/**
+ * Represents a react-internal Fiber node.
+ */
+type Fiber<T = any> = Omit<Fiber$1, 'stateNode' | 'dependencies' | 'child' | 'sibling' | 'return' | 'alternate' | 'memoizedProps' | 'pendingProps' | 'memoizedState' | 'updateQueue'> & {
+    stateNode: T;
+    dependencies: Dependencies | null;
+    child: Fiber | null;
+    sibling: Fiber | null;
+    return: Fiber | null;
+    alternate: Fiber | null;
+    memoizedProps: Props;
+    pendingProps: Props;
+    memoizedState: MemoizedState;
+    updateQueue: {
+        lastEffect: Effect | null;
+        [key: string]: unknown;
+    };
+};
+interface ReactRenderer {
+    version: string;
+    bundleType: 0 | 1;
+    findFiberByHostInstance?: (hostInstance: unknown) => Fiber | null;
+}
+interface ContextDependency<T> {
+    context: ReactContext<T>;
+    memoizedValue: T;
+    observedBits: number;
+    next: ContextDependency<unknown> | null;
+}
+interface Dependencies {
+    lanes: Lanes;
+    firstContext: ContextDependency<unknown> | null;
+}
+interface Effect {
+    next: Effect | null;
+    create: (...args: unknown[]) => unknown;
+    destroy: ((...args: unknown[]) => unknown) | null;
+    deps: unknown[] | null;
+    tag: number;
+    [key: string]: unknown;
+}
+interface MemoizedState {
+    memoizedState: unknown;
+    next: MemoizedState | null;
+    [key: string]: unknown;
+}
+interface Props {
+    [key: string]: unknown;
+}
+declare global {
+    var __REACT_DEVTOOLS_GLOBAL_HOOK__: ReactDevToolsGlobalHook;
+}
+
+export type { ContextDependency as C, Dependencies as D, Effect as E, Fiber as F, MemoizedState as M, Props as P, ReactDevToolsGlobalHook as R, ReactRenderer as a };