bippy 0.0.10 → 0.0.13

package/dist/score.mjs

@@ -0,0 +1,205 @@
+// src/index.ts
+var ClassComponentTag = 1;
+var FunctionComponentTag = 0;
+var ContextConsumerTag = 9;
+var ForwardRefTag = 11;
+var MemoComponentTag = 14;
+var SimpleMemoComponentTag = 15;
+var HostComponentTag = 5;
+var HostHoistableTag = 26;
+var HostSingletonTag = 27;
+var PerformedWork = 1;
+var Placement = 2;
+var Hydrating = 4096;
+var Update = 4;
+var Cloned = 8;
+var ChildDeletion = 16;
+var ContentReset = 32;
+var Snapshot = 1024;
+var Visibility = 8192;
+var MutationMask = Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
+var isHostFiber = (fiber) => fiber.tag === HostComponentTag || // @ts-expect-error: it exists
+fiber.tag === HostHoistableTag || // @ts-expect-error: it exists
+fiber.tag === HostSingletonTag;
+var didFiberRender = (fiber) => {
+  const nextProps = fiber.memoizedProps;
+  const prevProps = fiber.alternate?.memoizedProps || {};
+  const flags = fiber.flags ?? fiber.effectTag ?? 0;
+  switch (fiber.tag) {
+    case ClassComponentTag:
+    case FunctionComponentTag:
+    case ContextConsumerTag:
+    case ForwardRefTag:
+    case MemoComponentTag:
+    case SimpleMemoComponentTag: {
+      return (flags & PerformedWork) === PerformedWork;
+    }
+    default:
+      if (!fiber.alternate) return true;
+      return prevProps !== nextProps || fiber.alternate.memoizedState !== fiber.memoizedState || fiber.alternate.ref !== fiber.ref;
+  }
+};
+var didFiberCommit = (fiber) => {
+  return Boolean(
+    fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions
+  );
+};
+var getMutatedHostFibers = (fiber) => {
+  const mutations = [];
+  const visited = /* @__PURE__ */ new WeakSet();
+  const traverse = (node) => {
+    if (!node || visited.has(node)) return;
+    visited.add(node);
+    if (isHostFiber(node) && didFiberCommit(node.return ?? node) && didFiberRender(node)) {
+      mutations.push(node);
+    }
+    if (node.child) {
+      traverse(node.child);
+    }
+    if (node.sibling) {
+      traverse(node.sibling);
+    }
+  };
+  traverse(fiber);
+  return mutations;
+};
+var getNearestHostFiber = (fiber) => {
+  let hostFiber = traverseFiber(fiber, isHostFiber);
+  if (!hostFiber) {
+    hostFiber = traverseFiber(fiber, isHostFiber, true);
+  }
+  return hostFiber;
+};
+var traverseFiber = (fiber, selector, ascending = false) => {
+  if (!fiber) return null;
+  if (selector(fiber) === true) return fiber;
+  let child = ascending ? fiber.return : fiber.child;
+  while (child) {
+    const match = traverseFiber(child, selector, ascending);
+    if (match) return match;
+    child = ascending ? null : child.sibling;
+  }
+  return null;
+};
+var NO_OP = () => {
+};
+var getRDTHook = () => {
+  let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  const renderers = /* @__PURE__ */ new Map();
+  let i = 0;
+  rdtHook ??= {
+    checkDCE: NO_OP,
+    supportsFiber: true,
+    supportsFlight: true,
+    renderers,
+    onCommitFiberRoot: NO_OP,
+    onCommitFiberUnmount: NO_OP,
+    onPostCommitFiberRoot: NO_OP,
+    inject(renderer) {
+      const nextID = ++i;
+      renderers.set(nextID, renderer);
+      return nextID;
+    }
+  };
+  try {
+    globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = rdtHook;
+  } catch {
+  }
+  return rdtHook;
+};
+if (typeof window !== "undefined") {
+  getRDTHook();
+}
+
+// src/score.ts
+var fps = 0;
+var lastTime = performance.now();
+var frameCount = 0;
+var inited = false;
+var getFPS = () => {
+  const updateFPS = () => {
+    frameCount++;
+    const now = performance.now();
+    if (now - lastTime >= 1e3) {
+      fps = frameCount;
+      frameCount = 0;
+      lastTime = now;
+    }
+    requestAnimationFrame(updateFPS);
+  };
+  if (!inited) {
+    inited = true;
+    updateFPS();
+  }
+  return fps;
+};
+var truncateFloat = (value, maxLen = 1e4) => {
+  if (typeof value === "number" && parseInt(value) !== value) {
+    value = ~~(value * maxLen) / maxLen;
+  }
+  return value;
+};
+var THRESHOLD_FPS = 60;
+var getFiberRenderScore = (fiber) => {
+  const hostFiber = getNearestHostFiber(fiber);
+  const hasMutation = didFiberCommit(fiber);
+  const mutatedHostFibers = getMutatedHostFibers(fiber);
+  const isVisible = hostFiber && isElementVisible(hostFiber.stateNode) && isElementInViewport(hostFiber.stateNode);
+  const fps2 = getFPS();
+  let unnecessaryScore = (
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    isVisible || mutatedHostFibers.length || hasMutation ? 0 : 1
+  );
+  for (const mutatedHostFiber of mutatedHostFibers) {
+    const node = mutatedHostFiber.stateNode;
+    if (!isElementVisible(node) || !isElementInViewport(node)) {
+      unnecessaryScore += 1 / mutatedHostFibers.length;
+    }
+  }
+  return {
+    unnecessary: truncateFloat(unnecessaryScore),
+    slow: fps2 < THRESHOLD_FPS ? truncateFloat((THRESHOLD_FPS - fps2) / THRESHOLD_FPS) : 0
+  };
+};
+var isElementVisible = (el) => {
+  const style = window.getComputedStyle(el);
+  return style.display !== "none" && style.visibility !== "hidden" && style.contentVisibility !== "hidden" && style.opacity !== "0";
+};
+var initedEventListeners = false;
+var scrollX = null;
+var scrollY = null;
+var innerWidth = null;
+var innerHeight = null;
+var getWindowDimensions = () => {
+  if (scrollX === null) scrollX = window.scrollX;
+  if (scrollY === null) scrollY = window.scrollY;
+  if (innerWidth === null) innerWidth = window.innerWidth;
+  if (innerHeight === null) innerHeight = window.innerHeight;
+  if (!initedEventListeners) {
+    initedEventListeners = true;
+    const handleResize = () => {
+      scrollX = null;
+      scrollY = null;
+      innerWidth = null;
+      innerHeight = null;
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize);
+  }
+  return {
+    top: scrollY,
+    left: scrollX,
+    right: scrollX + innerWidth,
+    bottom: scrollY + innerHeight
+  };
+};
+var isElementInViewport = (el) => {
+  const elTop = el.offsetTop;
+  const elLeft = el.offsetLeft;
+  const elWidth = el.offsetWidth;
+  const elHeight = el.offsetHeight;
+  const { top, left, right, bottom } = getWindowDimensions();
+  return elTop + elHeight > top && elLeft + elWidth > left && elTop < bottom && elLeft < right;
+};
+
+export { getFPS, getFiberRenderScore, getWindowDimensions, isElementInViewport, isElementVisible };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bippy",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "description": "a hacky way to get fibers from react",
   "keywords": [
     "react",
@@ -28,15 +28,23 @@
     ".": {
       "import": {
         "types": "./dist/index.d.mts",
-        "react-server": "./dist/rsc-shim.mjs",
         "default": "./dist/index.mjs"
       },
       "require": {
         "types": "./dist/index.d.ts",
-        "react-server": "./dist/rsc-shim.js",
         "default": "./dist/index.js"
       }
     },
+    "./score": {
+      "import": {
+        "types": "./dist/score.d.mts",
+        "default": "./dist/score.mjs"
+      },
+      "require": {
+        "types": "./dist/score.d.ts",
+        "default": "./dist/score.js"
+      }
+    },
     "./dist/*": "./dist/*.js",
     "./dist/*.js": "./dist/*.js",
     "./dist/*.mjs": "./dist/*.mjs"

package/dist/rsc-shim.d.mts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/rsc-shim.d.ts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/rsc-shim.global.js

@@ -1 +0,0 @@
-var Bippy=function(){"use strict";var r,e,o=Object.getOwnPropertyNames;return(r={"src/rsc-shim.ts"(){throw new Error("This module cannot be imported from a Server Component module. It should only be used from a Client Component.")}},function(){return e||(0,r[o(r)[0]])((e={exports:{}}).exports,e),e.exports})()}();

package/dist/rsc-shim.js

@@ -1 +0,0 @@
-"use strict";var e,o,r=Object.getOwnPropertyNames,t=(e={"src/rsc-shim.ts"(){throw new Error("This module cannot be imported from a Server Component module. It should only be used from a Client Component.")}},function(){return o||(0,e[r(e)[0]])((o={exports:{}}).exports,o),o.exports})();module.exports=t;

package/dist/rsc-shim.mjs

@@ -1 +0,0 @@
-var e,o,r=Object.getOwnPropertyNames,t=(e={"src/rsc-shim.ts"(){throw new Error("This module cannot be imported from a Server Component module. It should only be used from a Client Component.")}},function(){return o||(0,e[r(e)[0]])((o={exports:{}}).exports,o),o.exports})();export{t as default};