bippy 0.2.22 → 0.2.24

package/README.md

@@ -28,24 +28,6 @@ onCommitFiberRoot((root) => {
 });
 ```
 
-or, use the `/inspect` subpackage to graphically visualize the fiber tree:
-
-```jsx
-import { Inspector } from 'bippy/inspect';
-
-<Inspector enabled={true} />
-```
-
-<table>
-  <tbody>
-    <tr>
-      <td>
-        <a href="https://bippy.dev"><b>open live demo ↗</b></a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
 ## how it works & motivation
 
 bippy allows you to **access** and **use** react fibers **outside** of react components.
@@ -158,7 +140,6 @@ or, use via script tag:
 
 next, you can use the api to get data about the fiber tree. below is a (useful) subset of the api. for the full api, read the [source code](https://github.com/aidenybai/bippy/blob/main/src/core.ts).
 
-
 ### onCommitFiberRoot
 
 a utility function that wraps the `instrument` function and sets the `onCommitFiberRoot` hook.
@@ -275,20 +256,6 @@ traverseState(fiber, (next, prev) => {
 });
 ```
 
-### traverseEffects
-
-traverses the effects (useEffect, useLayoutEffect, etc.) of a fiber.
-
-```typescript
-import { traverseEffects } from 'bippy';
-
-// ...
-
-traverseEffects(fiber, (effect) => {
-  console.log(effect);
-});
-```
-
 ### traverseContexts
 
 traverses the contexts (useContext) of a fiber.
@@ -303,7 +270,6 @@ traverseContexts(fiber, (next, prev) => {
 });
 ```
 
-
 ### setFiberId / getFiberId
 
 set and get a persistent identity for a fiber. by default, fibers are anonymous and have no identity.
@@ -621,6 +587,8 @@ instrument(
 
 ## development
 
+pre-requisite: you should understand how react works internally. if you don't, please give this [series of articles](https://jser.dev/series/react-source-code-walkthrough) a read.
+
 we use a pnpm monorepo, get started by running:
 
 ```shell

package/dist/{chunk-DE5T66AV.js → chunk-347RWTP3.js}

@@ -8,7 +8,7 @@
  */
 
 // src/rdt-hook.ts
-var version = "0.2.22";
+var version = "0.2.24";
 var BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
 var objectDefineProperty = Object.defineProperty;
 var objectHasOwnProperty = Object.prototype.hasOwnProperty;
@@ -39,6 +39,7 @@ var isReactRefresh = (rdtHook = getRDTHook()) => {
   }
   return Boolean(injectFnStr?.includes("(injected)"));
 };
+var onActiveListeners = /* @__PURE__ */ new Set();
 var installRDTHook = (onActive) => {
   const renderers = /* @__PURE__ */ new Map();
   let i = 0;
@@ -56,7 +57,7 @@ var installRDTHook = (onActive) => {
       renderers.set(nextID, renderer);
       if (!rdtHook._instrumentationIsActive) {
         rdtHook._instrumentationIsActive = true;
-        onActive?.();
+        onActiveListeners.forEach((listener) => listener());
       }
       return nextID;
     },
@@ -89,6 +90,9 @@ var installRDTHook = (onActive) => {
   return rdtHook;
 };
 var patchRDTHook = (onActive) => {
+  if (onActive) {
+    onActiveListeners.add(onActive);
+  }
   try {
     const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!rdtHook) return;
@@ -102,11 +106,11 @@ var patchRDTHook = (onActive) => {
       rdtHook._instrumentationIsActive = false;
       if (rdtHook.renderers.size) {
         rdtHook._instrumentationIsActive = true;
-        onActive?.();
+        onActiveListeners.forEach((listener) => listener());
         return;
       }
       const prevInject = rdtHook.inject;
-      if (isReactRefresh(rdtHook)) {
+      if (isReactRefresh(rdtHook) && !isRealReactDevtools()) {
         isReactRefreshOverride = true;
         let nextID = rdtHook.inject(null);
         if (nextID) {
@@ -117,7 +121,7 @@ var patchRDTHook = (onActive) => {
         rdtHook.inject = (renderer) => {
           const id = prevInject(renderer);
           rdtHook._instrumentationIsActive = true;
-          onActive?.();
+          onActiveListeners.forEach((listener) => listener());
           return id;
         };
       }
@@ -245,28 +249,6 @@ var traverseState = (fiber, selector) => {
   }
   return false;
 };
-var traverseEffects = (fiber, selector) => {
-  try {
-    let nextState = (
-      // biome-ignore lint/suspicious/noExplicitAny: underlying type is unknown
-      fiber.updateQueue?.lastEffect
-    );
-    let prevState = (
-      // biome-ignore lint/suspicious/noExplicitAny: underlying type is unknown
-      fiber.alternate?.updateQueue?.lastEffect
-    );
-    while (nextState || prevState) {
-      if (selector(nextState, prevState) === true) return true;
-      if (nextState?.next === nextState || prevState?.next === prevState) {
-        break;
-      }
-      nextState = nextState?.next;
-      prevState = prevState?.next;
-    }
-  } catch {
-  }
-  return false;
-};
 var traverseProps = (fiber, selector) => {
   try {
     const nextProps = fiber.memoizedProps;
@@ -328,11 +310,7 @@ var getFiberStack = (fiber) => {
     stack.push(currentFiber);
     currentFiber = currentFiber.return;
   }
-  const newStack = new Array(stack.length);
-  for (let i = 0; i < stack.length; i++) {
-    newStack[i] = stack[stack.length - i - 1];
-  }
-  return newStack;
+  return stack;
 };
 var shouldFilterFiber = (fiber) => {
   switch (fiber.tag) {
@@ -670,12 +648,11 @@ var secure = (options, secureOptions = {}) => {
   const isUsingRealReactDevtools = isRealReactDevtools();
   const isUsingReactRefresh = isReactRefresh();
   let timeout;
-  let isProduction = false;
+  let isProduction = secureOptions.isProduction ?? false;
   options.onActive = () => {
     clearTimeout(timeout);
     let isSecure = true;
     try {
-      onActive?.();
       const rdtHook = getRDTHook();
       for (const renderer of rdtHook.renderers.values()) {
         const [majorVersion] = renderer.version.split(".");
@@ -700,6 +677,7 @@ var secure = (options, secureOptions = {}) => {
       options.onActive = void 0;
       return;
     }
+    onActive?.();
     try {
       const onCommitFiberRoot2 = options.onCommitFiberRoot;
       if (onCommitFiberRoot2) {
@@ -755,4 +733,4 @@ var onCommitFiberRoot = (handler) => {
   );
 };
 
-export { BIPPY_INSTRUMENTATION_STRING, CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponentTag, ELEMENT_TYPE_SYMBOL_STRING, ForwardRefTag, FragmentTag, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRootTag, HostSingletonTag, HostTextTag, INSTALL_ERROR, INSTALL_HOOK_SCRIPT_STRING, LegacyHiddenComponentTag, MemoComponentTag, OffscreenComponentTag, SimpleMemoComponentTag, SuspenseComponentTag, TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, fiberIdMap, getDisplayName, getFiberFromHostInstance, getFiberId, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getNearestHostFibers, getRDTHook, getTimings, getType, hasMemoCache, hasRDTHook, installRDTHook, instrument, isClientEnvironment, isCompositeFiber, isHostFiber, isInstrumentationActive, isReactRefresh, isRealReactDevtools, isValidElement, isValidFiber, mountFiberRecursively, onCommitFiberRoot, patchRDTHook, secure, setFiberId, shouldFilterFiber, traverseContexts, traverseEffects, traverseFiber, traverseProps, traverseRenderedFibers, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively, version };
+export { BIPPY_INSTRUMENTATION_STRING, CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponentTag, ELEMENT_TYPE_SYMBOL_STRING, ForwardRefTag, FragmentTag, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRootTag, HostSingletonTag, HostTextTag, INSTALL_ERROR, INSTALL_HOOK_SCRIPT_STRING, LegacyHiddenComponentTag, MemoComponentTag, OffscreenComponentTag, SimpleMemoComponentTag, SuspenseComponentTag, TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, fiberIdMap, getDisplayName, getFiberFromHostInstance, getFiberId, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getNearestHostFibers, getRDTHook, getTimings, getType, hasMemoCache, hasRDTHook, installRDTHook, instrument, isClientEnvironment, isCompositeFiber, isHostFiber, isInstrumentationActive, isReactRefresh, isRealReactDevtools, isValidElement, isValidFiber, mountFiberRecursively, onCommitFiberRoot, patchRDTHook, secure, setFiberId, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseRenderedFibers, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively, version };

package/dist/{chunk-A5CNTCS7.cjs → chunk-GVWERSAB.cjs}

@@ -10,7 +10,7 @@
  */
 
 // src/rdt-hook.ts
-var version = "0.2.22";
+var version = "0.2.24";
 var BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
 var objectDefineProperty = Object.defineProperty;
 var objectHasOwnProperty = Object.prototype.hasOwnProperty;
@@ -41,6 +41,7 @@ var isReactRefresh = (rdtHook = getRDTHook()) => {
   }
   return Boolean(injectFnStr?.includes("(injected)"));
 };
+var onActiveListeners = /* @__PURE__ */ new Set();
 var installRDTHook = (onActive) => {
   const renderers = /* @__PURE__ */ new Map();
   let i = 0;
@@ -58,7 +59,7 @@ var installRDTHook = (onActive) => {
       renderers.set(nextID, renderer);
       if (!rdtHook._instrumentationIsActive) {
         rdtHook._instrumentationIsActive = true;
-        onActive?.();
+        onActiveListeners.forEach((listener) => listener());
       }
       return nextID;
     },
@@ -91,6 +92,9 @@ var installRDTHook = (onActive) => {
   return rdtHook;
 };
 var patchRDTHook = (onActive) => {
+  if (onActive) {
+    onActiveListeners.add(onActive);
+  }
   try {
     const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!rdtHook) return;
@@ -104,11 +108,11 @@ var patchRDTHook = (onActive) => {
       rdtHook._instrumentationIsActive = false;
       if (rdtHook.renderers.size) {
         rdtHook._instrumentationIsActive = true;
-        onActive?.();
+        onActiveListeners.forEach((listener) => listener());
         return;
       }
       const prevInject = rdtHook.inject;
-      if (isReactRefresh(rdtHook)) {
+      if (isReactRefresh(rdtHook) && !isRealReactDevtools()) {
         isReactRefreshOverride = true;
         let nextID = rdtHook.inject(null);
         if (nextID) {
@@ -119,7 +123,7 @@ var patchRDTHook = (onActive) => {
         rdtHook.inject = (renderer) => {
           const id = prevInject(renderer);
           rdtHook._instrumentationIsActive = true;
-          onActive?.();
+          onActiveListeners.forEach((listener) => listener());
           return id;
         };
       }
@@ -247,28 +251,6 @@ var traverseState = (fiber, selector) => {
   }
   return false;
 };
-var traverseEffects = (fiber, selector) => {
-  try {
-    let nextState = (
-      // biome-ignore lint/suspicious/noExplicitAny: underlying type is unknown
-      fiber.updateQueue?.lastEffect
-    );
-    let prevState = (
-      // biome-ignore lint/suspicious/noExplicitAny: underlying type is unknown
-      fiber.alternate?.updateQueue?.lastEffect
-    );
-    while (nextState || prevState) {
-      if (selector(nextState, prevState) === true) return true;
-      if (nextState?.next === nextState || prevState?.next === prevState) {
-        break;
-      }
-      nextState = nextState?.next;
-      prevState = prevState?.next;
-    }
-  } catch {
-  }
-  return false;
-};
 var traverseProps = (fiber, selector) => {
   try {
     const nextProps = fiber.memoizedProps;
@@ -330,11 +312,7 @@ var getFiberStack = (fiber) => {
     stack.push(currentFiber);
     currentFiber = currentFiber.return;
   }
-  const newStack = new Array(stack.length);
-  for (let i = 0; i < stack.length; i++) {
-    newStack[i] = stack[stack.length - i - 1];
-  }
-  return newStack;
+  return stack;
 };
 var shouldFilterFiber = (fiber) => {
   switch (fiber.tag) {
@@ -672,12 +650,11 @@ var secure = (options, secureOptions = {}) => {
   const isUsingRealReactDevtools = isRealReactDevtools();
   const isUsingReactRefresh = isReactRefresh();
   let timeout;
-  let isProduction = false;
+  let isProduction = secureOptions.isProduction ?? false;
   options.onActive = () => {
     clearTimeout(timeout);
     let isSecure = true;
     try {
-      onActive?.();
       const rdtHook = getRDTHook();
       for (const renderer of rdtHook.renderers.values()) {
         const [majorVersion] = renderer.version.split(".");
@@ -702,6 +679,7 @@ var secure = (options, secureOptions = {}) => {
       options.onActive = void 0;
       return;
     }
+    onActive?.();
     try {
       const onCommitFiberRoot2 = options.onCommitFiberRoot;
       if (onCommitFiberRoot2) {
@@ -815,7 +793,6 @@ exports.secure = secure;
 exports.setFiberId = setFiberId;
 exports.shouldFilterFiber = shouldFilterFiber;
 exports.traverseContexts = traverseContexts;
-exports.traverseEffects = traverseEffects;
 exports.traverseFiber = traverseFiber;
 exports.traverseProps = traverseProps;
 exports.traverseRenderedFibers = traverseRenderedFibers;

package/dist/{chunk-HC7ECRJC.cjs → chunk-HQYIPSLJ.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkA5CNTCS7_cjs = require('./chunk-A5CNTCS7.cjs');
+var chunkGVWERSAB_cjs = require('./chunk-GVWERSAB.cjs');
 
 /**
  * @license bippy
@@ -13,8 +13,8 @@ var chunkA5CNTCS7_cjs = require('./chunk-A5CNTCS7.cjs');
 
 // src/index.ts
 try {
-  if (chunkA5CNTCS7_cjs.isClientEnvironment()) {
-    chunkA5CNTCS7_cjs.getRDTHook();
+  if (chunkGVWERSAB_cjs.isClientEnvironment()) {
+    chunkGVWERSAB_cjs.getRDTHook();
   }
 } catch {
 }

package/dist/{chunk-DPLW5GUM.js → chunk-N23WFCSF.js}

@@ -1,4 +1,4 @@
-import { isClientEnvironment, getRDTHook } from './chunk-DE5T66AV.js';
+import { isClientEnvironment, getRDTHook } from './chunk-347RWTP3.js';
 
 /**
  * @license bippy