bippy 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,31 +1,101 @@
 /**
  * @license bippy
  *
- * Copyright (c) Aiden Bai.
+ * 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/core.ts
+// src/rdt-hook.ts
 var version = "0.1.0";
 var BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
-var ClassComponentTag = 1;
+var NO_OP = () => {
+};
+var checkDCE = (fn) => {
+  try {
+    const code = Function.prototype.toString.call(fn);
+    if (code.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 {
+  }
+};
+var installRDTHook = (onActive) => {
+  const renderers = /* @__PURE__ */ new Map();
+  let i = 0;
+  const rdtHook = {
+    checkDCE,
+    supportsFiber: true,
+    supportsFlight: true,
+    hasUnsupportedRendererAttached: false,
+    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_INSTRUMENTATION_STRING,
+    _instrumentationIsActive: false
+  };
+  try {
+    Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
+      value: rdtHook
+    });
+  } catch {
+  }
+  return rdtHook;
+};
+var hasRDTHook = () => {
+  return Object.prototype.hasOwnProperty.call(
+    globalThis,
+    "__REACT_DEVTOOLS_GLOBAL_HOOK__"
+  );
+};
+var getRDTHook = (onActive) => {
+  let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (rdtHook) onActive?.();
+  if (!hasRDTHook()) {
+    rdtHook = installRDTHook(onActive);
+  }
+  return rdtHook;
+};
+try {
+  if (typeof window !== "undefined" && // @ts-expect-error `document` may not be defined in some enviroments
+  (window.document?.createElement || window.navigator?.product === "ReactNative") && typeof process !== "undefined" && process.versions != null && process.versions.node != null) {
+    installRDTHook();
+  }
+} catch {
+}
+
+// src/core.ts
 var FunctionComponentTag = 0;
+var ClassComponentTag = 1;
+var HostRootTag = 3;
+var HostComponentTag = 5;
+var HostTextTag = 6;
+var FragmentTag = 7;
 var ContextConsumerTag = 9;
-var SuspenseComponentTag = 13;
 var ForwardRefTag = 11;
+var SuspenseComponentTag = 13;
 var MemoComponentTag = 14;
 var SimpleMemoComponentTag = 15;
-var HostComponentTag = 5;
+var DehydratedSuspenseComponentTag = 18;
+var OffscreenComponentTag = 22;
+var LegacyHiddenComponentTag = 23;
 var HostHoistableTag = 26;
 var HostSingletonTag = 27;
-var DehydratedSuspenseComponent = 18;
-var HostText = 6;
-var Fragment = 7;
-var LegacyHiddenComponent = 23;
-var OffscreenComponent = 22;
-var HostRoot = 3;
 var CONCURRENT_MODE_NUMBER = 60111;
 var ELEMENT_TYPE_SYMBOL_STRING = "Symbol(react.element)";
 var TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING = "Symbol(react.transitional.element)";
@@ -47,12 +117,32 @@ var isValidElement = (element) => typeof element === "object" && element != null
   TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING
 ].includes(String(element.$$typeof));
 var isValidFiber = (fiber) => typeof fiber === "object" && fiber != null && "tag" in fiber && "stateNode" in fiber && "return" in fiber && "child" in fiber && "sibling" in fiber && "flags" in fiber;
-var isHostFiber = (fiber) => fiber.tag === HostComponentTag || // @ts-expect-error: it exists
-fiber.tag === HostHoistableTag || // @ts-expect-error: it exists
-fiber.tag === HostSingletonTag || typeof fiber.type === "string";
-var isCompositeFiber = (fiber) => fiber.tag === FunctionComponentTag || fiber.tag === ClassComponentTag || fiber.tag === SimpleMemoComponentTag || fiber.tag === MemoComponentTag || fiber.tag === ForwardRefTag;
+var isHostFiber = (fiber) => {
+  switch (fiber.tag) {
+    case HostComponentTag:
+    // @ts-expect-error: it exists
+    case HostHoistableTag:
+    // @ts-expect-error: it exists
+    case HostSingletonTag:
+      return true;
+    default:
+      return typeof fiber.type === "string";
+  }
+};
+var isCompositeFiber = (fiber) => {
+  switch (fiber.tag) {
+    case FunctionComponentTag:
+    case ClassComponentTag:
+    case SimpleMemoComponentTag:
+    case MemoComponentTag:
+    case ForwardRefTag:
+      return true;
+    default:
+      return false;
+  }
+};
 var traverseContexts = (fiber, selector) => {
-  return safeTry(() => {
+  try {
     const nextDependencies = fiber.dependencies;
     const prevDependencies = fiber.alternate?.dependencies;
     if (!nextDependencies || !prevDependencies) return false;
@@ -66,23 +156,25 @@ var traverseContexts = (fiber, selector) => {
       nextContext = nextContext?.next;
       prevContext = prevContext?.next;
     }
-    return false;
-  });
+  } catch {
+  }
+  return false;
 };
 var traverseState = (fiber, selector) => {
-  return safeTry(() => {
+  try {
     let nextState = fiber.memoizedState;
     let prevState = fiber.alternate?.memoizedState;
     while (nextState || prevState) {
       if (selector(nextState, prevState) === true) return true;
-      nextState = nextState.next;
-      prevState = prevState.next;
+      nextState = nextState?.next;
+      prevState = prevState?.next;
     }
-    return false;
-  });
+  } catch {
+  }
+  return false;
 };
 var traverseEffects = (fiber, selector) => {
-  return safeTry(() => {
+  try {
     let nextState = (
       // biome-ignore lint/suspicious/noExplicitAny: underlying type is unknown
       fiber.updateQueue?.lastEffect
@@ -99,11 +191,12 @@ var traverseEffects = (fiber, selector) => {
       nextState = nextState?.next;
       prevState = prevState?.next;
     }
-    return false;
-  });
+  } catch {
+  }
+  return false;
 };
 var traverseProps = (fiber, selector) => {
-  return safeTry(() => {
+  try {
     const nextProps = fiber.memoizedProps;
     const prevProps = fiber.alternate?.memoizedProps || {};
     const allKeys = /* @__PURE__ */ new Set([
@@ -115,8 +208,9 @@ var traverseProps = (fiber, selector) => {
       const nextValue = nextProps?.[propName];
       if (selector(propName, nextValue, prevValue) === true) return true;
     }
-    return false;
-  });
+  } catch {
+  }
+  return false;
 };
 var didFiberRender = (fiber) => {
   const nextProps = fiber.memoizedProps;
@@ -170,14 +264,14 @@ var getFiberStack = (fiber) => {
 };
 var shouldFilterFiber = (fiber) => {
   switch (fiber.tag) {
-    case DehydratedSuspenseComponent:
+    case DehydratedSuspenseComponentTag:
       return true;
-    case HostText:
-    case Fragment:
-    case LegacyHiddenComponent:
-    case OffscreenComponent:
+    case HostTextTag:
+    case FragmentTag:
+    case LegacyHiddenComponentTag:
+    case OffscreenComponentTag:
       return true;
-    case HostRoot:
+    case HostRootTag:
       return false;
     default: {
       const symbolOrNumber = typeof fiber.type === "object" && fiber.type !== null ? fiber.type.$$typeof : fiber.type;
@@ -202,18 +296,24 @@ var getNearestHostFiber = (fiber, ascending = false) => {
 };
 var getNearestHostFibers = (fiber) => {
   const hostFibers = [];
-  const traverse = (node) => {
-    let currentNode = node;
-    while (currentNode) {
-      if (isHostFiber(currentNode)) {
-        hostFibers.push(currentNode);
-      } else if (currentNode.child) {
-        traverse(currentNode.child);
-      }
-      currentNode = currentNode.sibling;
+  const stack = [];
+  if (isHostFiber(fiber)) {
+    hostFibers.push(fiber);
+  } else if (fiber.child) {
+    stack.push(fiber.child);
+  }
+  while (stack.length) {
+    const currentNode = stack.pop();
+    if (!currentNode) break;
+    if (isHostFiber(currentNode)) {
+      hostFibers.push(currentNode);
+    } else if (currentNode.child) {
+      stack.push(currentNode.child);
     }
-  };
-  traverse(fiber);
+    if (currentNode.sibling) {
+      stack.push(currentNode.sibling);
+    }
+  }
   return hostFibers;
 };
 var traverseFiber = (fiber, selector, ascending = false) => {
@@ -265,78 +365,44 @@ var getDisplayName = (type) => {
   if (!unwrappedType) return null;
   return unwrappedType.displayName || unwrappedType.name || null;
 };
-var isUsingRDT = () => "reactDevtoolsAgent" in getRDTHook();
+var isUsingRDT = () => {
+  return "reactDevtoolsAgent" in getRDTHook();
+};
 var detectReactBuildType = (renderer) => {
-  return safeTry(() => {
+  try {
     if (typeof renderer.version === "string" && renderer.bundleType > 0) {
       return "development";
     }
-    return "production";
-  });
-};
-var checkDCE = (fn) => {
-  safeTry(() => {
-    const code = Function.prototype.toString.call(fn);
-    if (code.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"
-        );
-      });
-    }
-  });
-};
-var NO_OP = () => {
-};
-var installRDTHook = (onActive) => {
-  const renderers = /* @__PURE__ */ new Map();
-  let i = 0;
-  const rdtHook = {
-    checkDCE,
-    supportsFiber: true,
-    supportsFlight: true,
-    hasUnsupportedRendererAttached: false,
-    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_INSTRUMENTATION_STRING,
-    _instrumentationIsActive: false
-  };
-  safeTry(() => {
-    Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
-      value: rdtHook
-    });
-  });
-  return rdtHook;
-};
-var getRDTHook = (onActive) => {
-  let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (rdtHook) onActive?.();
-  if (!Object.prototype.hasOwnProperty.call(
-    globalThis,
-    "__REACT_DEVTOOLS_GLOBAL_HOOK__"
-  )) {
-    rdtHook = installRDTHook(onActive);
+  } catch {
   }
-  return rdtHook;
+  return "production";
 };
 var isInstrumentationActive = () => {
   const rdtHook = getRDTHook();
   return Boolean(rdtHook._instrumentationIsActive) || isUsingRDT();
 };
+var fiberId = 0;
+var fiberIdMap = /* @__PURE__ */ new WeakMap();
+var setFiberId = (fiber, id = fiberId++) => {
+  fiberIdMap.set(fiber, id);
+};
+var getFiberId = (fiber) => {
+  let id = fiberIdMap.get(fiber);
+  if (!id && fiber.alternate) {
+    id = fiberIdMap.get(fiber.alternate);
+  }
+  if (!id) {
+    id = fiberId++;
+    setFiberId(fiber, id);
+  }
+  return id;
+};
 var mountFiberRecursively = (onRender, firstChild, traverseSiblings) => {
   let fiber = firstChild;
   while (fiber != null) {
+    if (!fiberIdMap.has(fiber)) {
+      getFiberId(fiber);
+    }
     const shouldIncludeInTree = !shouldFilterFiber(fiber);
     if (shouldIncludeInTree && didFiberRender(fiber)) {
       onRender(fiber, "mount");
@@ -368,7 +434,13 @@ var mountFiberRecursively = (onRender, firstChild, traverseSiblings) => {
   }
 };
 var updateFiberRecursively = (onRender, nextFiber, prevFiber, parentFiber) => {
+  if (!fiberIdMap.has(nextFiber)) {
+    getFiberId(nextFiber);
+  }
   if (!prevFiber) return;
+  if (!fiberIdMap.has(prevFiber)) {
+    getFiberId(prevFiber);
+  }
   const isSuspense = nextFiber.tag === SuspenseComponentTag;
   const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
   if (shouldIncludeInTree && didFiberRender(nextFiber)) {
@@ -413,7 +485,7 @@ var updateFiberRecursively = (onRender, nextFiber, prevFiber, parentFiber) => {
   }
 };
 var unmountFiber = (onRender, fiber) => {
-  const isRoot = fiber.tag === HostRoot;
+  const isRoot = fiber.tag === HostRootTag;
   if (isRoot || !shouldFilterFiber(fiber)) {
     onRender(fiber, "unmount");
   }
@@ -449,7 +521,7 @@ var createFiberVisitor = ({
       rootInstanceMap.set(root, rootInstance);
     }
     const { prevFiber } = rootInstance;
-    safeTry(() => {
+    try {
       if (!rootFiber) {
         unmountFiber(onRender, root);
       } else if (prevFiber !== null) {
@@ -472,7 +544,9 @@ var createFiberVisitor = ({
       } else {
         mountFiberRecursively(onRender, rootFiber, true);
       }
-    }, onError);
+    } catch (error) {
+      onError(error);
+    }
     rootInstance.prevFiber = rootFiber;
   };
 };
@@ -507,24 +581,55 @@ var instrument = (options) => {
     }
   });
 };
-var secure = (options) => {
+var getFiberFromHostInstance = (hostInstance) => {
+  const rdtHook = getRDTHook();
+  for (const renderer of rdtHook.renderers.values()) {
+    try {
+      const fiber = renderer.findFiberByHostInstance?.(hostInstance);
+      if (fiber) return fiber;
+    } catch {
+    }
+  }
+  if (typeof hostInstance === "object" && hostInstance != null) {
+    if ("_reactRootContainer" in hostInstance) {
+      return hostInstance._reactRootContainer?._internalRoot?.current?.child;
+    }
+    for (const key in hostInstance) {
+      if (key.startsWith("__reactInternalInstance$") || key.startsWith("__reactFiber")) {
+        return hostInstance[key];
+      }
+    }
+  }
+  return null;
+};
+var secure = (options, secureOptions = {}) => {
   const onActive = options.onActive;
+  const isRDTHookInstalled = hasRDTHook();
+  const isRDT = isUsingRDT();
+  let timeout;
+  let isProduction = false;
   options.onActive = () => {
+    clearTimeout(timeout);
     let isSecure = true;
-    safeTry(() => {
+    try {
       onActive?.();
       const rdtHook = getRDTHook();
       for (const renderer of rdtHook.renderers.values()) {
         const [majorVersion] = renderer.version.split(".");
-        if (Number(majorVersion) < 17) {
+        if (Number(majorVersion) < (secureOptions.minReactMajorVersion ?? 17)) {
           isSecure = false;
         }
         const buildType = detectReactBuildType(renderer);
         if (buildType !== "development") {
-          isSecure = false;
+          isProduction = true;
+          if (!secureOptions.dangerouslyRunInProduction) {
+            isSecure = false;
+          }
         }
       }
-    });
+    } catch (err) {
+      secureOptions.onError?.(err);
+    }
     if (!isSecure) {
       options.onCommitFiberRoot = void 0;
       options.onCommitFiberUnmount = void 0;
@@ -532,40 +637,50 @@ var secure = (options) => {
       options.onActive = void 0;
       return;
     }
-    const onCommitFiberRoot = options.onCommitFiberRoot;
-    if (onCommitFiberRoot) {
-      options.onCommitFiberRoot = (rendererID, root, priority) => {
-        safeTry(() => onCommitFiberRoot(rendererID, root, priority));
-      };
-    }
-    const onCommitFiberUnmount = options.onCommitFiberUnmount;
-    if (onCommitFiberUnmount) {
-      options.onCommitFiberUnmount = (rendererID, root) => {
-        safeTry(() => onCommitFiberUnmount(rendererID, root));
-      };
-    }
-    const onPostCommitFiberRoot = options.onPostCommitFiberRoot;
-    if (onPostCommitFiberRoot) {
-      options.onPostCommitFiberRoot = (rendererID, root) => {
-        safeTry(() => onPostCommitFiberRoot(rendererID, root));
-      };
+    try {
+      const onCommitFiberRoot = options.onCommitFiberRoot;
+      if (onCommitFiberRoot) {
+        options.onCommitFiberRoot = (rendererID, root, priority) => {
+          try {
+            onCommitFiberRoot(rendererID, root, priority);
+          } catch (err) {
+            secureOptions.onError?.(err);
+          }
+        };
+      }
+      const onCommitFiberUnmount = options.onCommitFiberUnmount;
+      if (onCommitFiberUnmount) {
+        options.onCommitFiberUnmount = (rendererID, root) => {
+          try {
+            onCommitFiberUnmount(rendererID, root);
+          } catch (err) {
+            secureOptions.onError?.(err);
+          }
+        };
+      }
+      const onPostCommitFiberRoot = options.onPostCommitFiberRoot;
+      if (onPostCommitFiberRoot) {
+        options.onPostCommitFiberRoot = (rendererID, root) => {
+          try {
+            onPostCommitFiberRoot(rendererID, root);
+          } catch (err) {
+            secureOptions.onError?.(err);
+          }
+        };
+      }
+    } catch (err) {
+      secureOptions.onError?.(err);
     }
   };
-  return options;
-};
-var safeTry = (fn, onError) => {
-  try {
-    return fn();
-  } catch (error) {
-    onError?.(error);
+  if (!isRDTHookInstalled && !isRDT) {
+    timeout = setTimeout(() => {
+      if (!isProduction) {
+        secureOptions.onError?.();
+      }
+      stop();
+    }, secureOptions.installCheckTimeout ?? 100);
   }
-  return null;
+  return options;
 };
 
-// src/index.ts
-if (typeof window !== "undefined" && // @ts-expect-error `document` may not be defined in some enviroments
-(window.document?.createElement || window.navigator?.product === "ReactNative") && typeof process !== "undefined" && process.versions != null && process.versions.node != null) {
-  installRDTHook();
-}
-
-export { BIPPY_INSTRUMENTATION_STRING, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getNearestHostFibers, getRDTHook, getTimings, getType, hasMemoCache, installRDTHook, instrument, isCompositeFiber, isHostFiber, isInstrumentationActive, isUsingRDT, isValidElement, isValidFiber, mountFiberRecursively, safeTry, secure, shouldFilterFiber, traverseContexts, traverseEffects, traverseFiber, traverseProps, 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, 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, isCompositeFiber, isHostFiber, isInstrumentationActive, isUsingRDT, isValidElement, isValidFiber, mountFiberRecursively, secure, setFiberId, shouldFilterFiber, traverseContexts, traverseEffects, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively, version };