react-render-guard 0.1.1 → 0.1.2

package/README.md

@@ -1,4 +1,4 @@
-# 🛡️ RenderGuard
+# 🛡️ React Render Guard
 
 > **Stop guessing. Start optimizing.**  
 > A lightweight, non-intrusive React library to detect, visualize, and eliminate unnecessary re-renders in your application.
@@ -26,7 +26,8 @@ Finding these bottlenecks manually with general profiling tools is tedious and d
 - **🔍 Precision Monitoring**: Uses React's internal Profiler API 100% safely.
 - **⚡ Zero Production Overhead**: Designed to be stripped out or disabled in production.
 - **🛠️ Developer Experience**: Simple `Provider` API.
-- **📊 Real-time Insights**: Console alerts for expensive renders (Visual Overlay coming soon!).
+- **📊 Real-time Insights**: Console alerts for expensive renders.
+- **👁️ Visual Overlay**: A non-intrusive floating panel showing render duration, total render counts, and color-coded health status (Green/Orange/Red) in real-time.
 
 ## 📦 Installation
 

package/dist/components/RenderGuard.test.d.ts

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

package/dist/components/RenderOverlay.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface OverlayProps {
+    lastRenderTime: number;
+    renderCount: number;
+    lastRenderId: string;
+}
+export declare const RenderOverlay: React.FC<OverlayProps>;
+export {};

package/dist/core/index.test.d.ts

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

package/dist/render-guard.es.js

@@ -1,69 +1,70 @@
-import K, { useCallback as ee, Profiler as re, useRef as te, useEffect as ne } from "react";
-var b = { exports: {} }, E = {};
-var I;
-function oe() {
-  if (I) return E;
-  I = 1;
-  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), s = /* @__PURE__ */ Symbol.for("react.fragment");
-  function i(f, a, u) {
-    var c = null;
-    if (u !== void 0 && (c = "" + u), a.key !== void 0 && (c = "" + a.key), "key" in a) {
-      u = {};
-      for (var d in a)
-        d !== "key" && (u[d] = a[d]);
-    } else u = a;
-    return a = u.ref, {
-      $$typeof: l,
-      type: f,
-      key: c,
-      ref: a !== void 0 ? a : null,
-      props: u
+import C, { useState as D, useEffect as z, Profiler as oe, useCallback as ae, useRef as se } from "react";
+import { createPortal as le } from "react-dom";
+var g = { exports: {} }, x = {};
+var M;
+function ie() {
+  if (M) return x;
+  M = 1;
+  var n = /* @__PURE__ */ Symbol.for("react.transitional.element"), s = /* @__PURE__ */ Symbol.for("react.fragment");
+  function p(d, i, c) {
+    var u = null;
+    if (c !== void 0 && (u = "" + c), i.key !== void 0 && (u = "" + i.key), "key" in i) {
+      c = {};
+      for (var m in i)
+        m !== "key" && (c[m] = i[m]);
+    } else c = i;
+    return i = c.ref, {
+      $$typeof: n,
+      type: d,
+      key: u,
+      ref: i !== void 0 ? i : null,
+      props: c
     };
   }
-  return E.Fragment = s, E.jsx = i, E.jsxs = i, E;
+  return x.Fragment = s, x.jsx = p, x.jsxs = p, x;
 }
-var _ = {};
-var D;
-function ae() {
-  return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
-    function l(e) {
+var E = {};
+var G;
+function ce() {
+  return G || (G = 1, process.env.NODE_ENV !== "production" && (function() {
+    function n(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === B ? null : e.displayName || e.name || null;
+        return e.$$typeof === re ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
         case k:
           return "Fragment";
-        case U:
+        case q:
           return "Profiler";
-        case M:
+        case J:
           return "StrictMode";
-        case V:
+        case Z:
           return "Suspense";
-        case z:
+        case Q:
           return "SuspenseList";
-        case H:
+        case ee:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case W:
+          case V:
             return "Portal";
-          case q:
+          case X:
             return e.displayName || "Context";
-          case G:
+          case B:
             return (e._context.displayName || "Context") + ".Consumer";
-          case J:
+          case H:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case X:
-            return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
-          case O:
+          case K:
+            return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
+          case S:
             r = e._payload, e = e._init;
             try {
-              return l(e(r));
+              return n(e(r));
             } catch {
             }
         }
@@ -72,7 +73,7 @@ function ae() {
     function s(e) {
       return "" + e;
     }
-    function i(e) {
+    function p(e) {
       try {
         s(e);
         var r = !1;
@@ -81,42 +82,42 @@ function ae() {
       }
       if (r) {
         r = console;
-        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        var t = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return t.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          n
+          o
         ), s(e);
       }
     }
-    function f(e) {
+    function d(e) {
       if (e === k) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === O)
+      if (typeof e == "object" && e !== null && e.$$typeof === S)
         return "<...>";
       try {
-        var r = l(e);
+        var r = n(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function a() {
-      var e = A.A;
+    function i() {
+      var e = w.A;
       return e === null ? null : e.getOwner();
     }
-    function u() {
+    function c() {
       return Error("react-stack-top-frame");
     }
-    function c(e) {
-      if (h.call(e, "key")) {
+    function u(e) {
+      if (I.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function d(e, r) {
+    function m(e, r) {
       function t() {
-        N || (N = !0, console.error(
+        F || (F = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
@@ -126,23 +127,23 @@ function ae() {
         configurable: !0
       });
     }
-    function T() {
-      var e = l(this.type);
-      return C[e] || (C[e] = !0, console.error(
+    function R() {
+      var e = n(this.type);
+      return Y[e] || (Y[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function p(e, r, t, n, v, P) {
-      var o = t.ref;
+    function j(e, r, t, o, y, A) {
+      var a = t.ref;
       return e = {
-        $$typeof: g,
+        $$typeof: N,
         type: e,
         key: r,
         props: t,
-        _owner: n
-      }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
+        _owner: o
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: T
+        get: R
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -157,138 +158,270 @@ function ae() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: v
+        value: y
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: P
+        value: A
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function x(e, r, t, n, v, P) {
-      var o = r.children;
-      if (o !== void 0)
-        if (n)
-          if (Z(o)) {
-            for (n = 0; n < o.length; n++)
-              y(o[n]);
-            Object.freeze && Object.freeze(o);
+    function _(e, r, t, o, y, A) {
+      var a = r.children;
+      if (a !== void 0)
+        if (o)
+          if (te(a)) {
+            for (o = 0; o < a.length; o++)
+              v(a[o]);
+            Object.freeze && Object.freeze(a);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else y(o);
-      if (h.call(r, "key")) {
-        o = l(e);
-        var m = Object.keys(r).filter(function(Q) {
-          return Q !== "key";
+        else v(a);
+      if (I.call(r, "key")) {
+        a = n(e);
+        var b = Object.keys(r).filter(function(ne) {
+          return ne !== "key";
         });
-        n = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", F[o + n] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
+        o = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", L[a + o] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          n,
           o,
-          m,
-          o
-        ), F[o + n] = !0);
+          a,
+          b,
+          a
+        ), L[a + o] = !0);
       }
-      if (o = null, t !== void 0 && (i(t), o = "" + t), c(r) && (i(r.key), o = "" + r.key), "key" in r) {
+      if (a = null, t !== void 0 && (p(t), a = "" + t), u(r) && (p(r.key), a = "" + r.key), "key" in r) {
         t = {};
-        for (var w in r)
-          w !== "key" && (t[w] = r[w]);
+        for (var P in r)
+          P !== "key" && (t[P] = r[P]);
       } else t = r;
-      return o && d(
+      return a && m(
         t,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), p(
+      ), j(
         e,
-        o,
+        a,
         t,
-        a(),
-        v,
-        P
+        i(),
+        y,
+        A
       );
     }
-    function y(e) {
-      j(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? j(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function v(e) {
+      T(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? T(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function j(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === g;
+    function T(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === N;
     }
-    var R = K, g = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), M = /* @__PURE__ */ Symbol.for("react.strict_mode"), U = /* @__PURE__ */ Symbol.for("react.profiler"), G = /* @__PURE__ */ Symbol.for("react.consumer"), q = /* @__PURE__ */ Symbol.for("react.context"), J = /* @__PURE__ */ Symbol.for("react.forward_ref"), V = /* @__PURE__ */ Symbol.for("react.suspense"), z = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), O = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), B = /* @__PURE__ */ Symbol.for("react.client.reference"), A = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, h = Object.prototype.hasOwnProperty, Z = Array.isArray, S = console.createTask ? console.createTask : function() {
+    var h = C, N = /* @__PURE__ */ Symbol.for("react.transitional.element"), V = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), J = /* @__PURE__ */ Symbol.for("react.strict_mode"), q = /* @__PURE__ */ Symbol.for("react.profiler"), B = /* @__PURE__ */ Symbol.for("react.consumer"), X = /* @__PURE__ */ Symbol.for("react.context"), H = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), Q = /* @__PURE__ */ Symbol.for("react.suspense_list"), K = /* @__PURE__ */ Symbol.for("react.memo"), S = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), w = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, te = Array.isArray, O = console.createTask ? console.createTask : function() {
       return null;
     };
-    R = {
+    h = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var N, C = {}, $ = R.react_stack_bottom_frame.bind(
-      R,
-      u
-    )(), Y = S(f(u)), F = {};
-    _.Fragment = k, _.jsx = function(e, r, t) {
-      var n = 1e4 > A.recentlyCreatedOwnerStacks++;
-      return x(
+    var F, Y = {}, $ = h.react_stack_bottom_frame.bind(
+      h,
+      c
+    )(), W = O(d(c)), L = {};
+    E.Fragment = k, E.jsx = function(e, r, t) {
+      var o = 1e4 > w.recentlyCreatedOwnerStacks++;
+      return _(
         e,
         r,
         t,
         !1,
-        n ? Error("react-stack-top-frame") : $,
-        n ? S(f(e)) : Y
+        o ? Error("react-stack-top-frame") : $,
+        o ? O(d(e)) : W
       );
-    }, _.jsxs = function(e, r, t) {
-      var n = 1e4 > A.recentlyCreatedOwnerStacks++;
-      return x(
+    }, E.jsxs = function(e, r, t) {
+      var o = 1e4 > w.recentlyCreatedOwnerStacks++;
+      return _(
         e,
         r,
         t,
         !0,
-        n ? Error("react-stack-top-frame") : $,
-        n ? S(f(e)) : Y
+        o ? Error("react-stack-top-frame") : $,
+        o ? O(d(e)) : W
       );
     };
-  })()), _;
+  })()), E;
 }
-var L;
-function se() {
-  return L || (L = 1, process.env.NODE_ENV === "production" ? b.exports = oe() : b.exports = ae()), b.exports;
+var U;
+function ue() {
+  return U || (U = 1, process.env.NODE_ENV === "production" ? g.exports = ie() : g.exports = ce()), g.exports;
 }
-var ue = se();
-const le = 3, ie = ({
-  children: l,
+var l = ue();
+const f = {
+  container: {
+    position: "fixed",
+    bottom: "20px",
+    right: "20px",
+    backgroundColor: "rgba(0, 0, 0, 0.85)",
+    color: "#fff",
+    padding: "12px",
+    borderRadius: "8px",
+    fontFamily: "monospace",
+    fontSize: "12px",
+    zIndex: 9999,
+    boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+    minWidth: "200px",
+    border: "1px solid #333",
+    backdropFilter: "blur(4px)",
+    transition: "border-color 0.3s ease"
+  },
+  metricRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginBottom: "4px"
+  },
+  label: {
+    color: "#aaa"
+  },
+  value: {
+    fontWeight: "bold"
+  },
+  indicator: {
+    display: "inline-block",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    marginRight: "8px"
+  },
+  title: {
+    margin: "0 0 8px 0",
+    fontSize: "14px",
+    fontWeight: "bold",
+    borderBottom: "1px solid #444",
+    paddingBottom: "4px",
+    display: "flex",
+    alignItems: "center"
+  }
+}, fe = (n) => n < 16 ? "#4caf50" : n < 50 ? "#ff9800" : "#f44336", de = ({
+  lastRenderTime: n,
+  renderCount: s,
+  lastRenderId: p
+}) => {
+  const [d, i] = D(!1), [c, u] = D(!1);
+  if (z(() => {
+    if (s > 0) {
+      i(!0), u(!0);
+      const R = setTimeout(() => u(!1), 300);
+      return () => clearTimeout(R);
+    }
+  }, [s, n]), !d) return null;
+  const m = fe(n);
+  return /* @__PURE__ */ l.jsxs(
+    "div",
+    {
+      style: {
+        ...f.container,
+        borderColor: c ? m : "#333"
+      },
+      children: [
+        /* @__PURE__ */ l.jsxs("h4", { style: f.title, children: [
+          /* @__PURE__ */ l.jsx(
+            "span",
+            {
+              style: { ...f.indicator, backgroundColor: m }
+            }
+          ),
+          "RenderGuard"
+        ] }),
+        /* @__PURE__ */ l.jsxs("div", { style: f.metricRow, children: [
+          /* @__PURE__ */ l.jsx("span", { style: f.label, children: "Last Render:" }),
+          /* @__PURE__ */ l.jsxs("span", { style: { ...f.value, color: m }, children: [
+            n.toFixed(2),
+            "ms"
+          ] })
+        ] }),
+        /* @__PURE__ */ l.jsxs("div", { style: f.metricRow, children: [
+          /* @__PURE__ */ l.jsx("span", { style: f.label, children: "Total Renders:" }),
+          /* @__PURE__ */ l.jsx("span", { style: f.value, children: s })
+        ] }),
+        /* @__PURE__ */ l.jsxs("div", { style: f.metricRow, children: [
+          /* @__PURE__ */ l.jsx("span", { style: f.label, children: "Source:" }),
+          /* @__PURE__ */ l.jsx(
+            "span",
+            {
+              style: {
+                ...f.value,
+                maxWidth: "100px",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              children: p
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, me = 3, pe = C.memo(
+  ({
+    children: n,
+    onRender: s
+  }) => /* @__PURE__ */ l.jsx(oe, { id: "RenderGuardRoot", onRender: s, children: n })
+), xe = ({
+  children: n,
   onRenderCallback: s,
-  threshold: i = le
+  threshold: p = me
 }) => {
-  const f = ee(
-    (a, u, c, d, T, p) => {
-      c > 5 && console.warn(
-        `[RenderGuard] Slow render detected in ${a}: ${c.toFixed(2)}ms`
+  const [d, i] = C.useState({
+    lastRenderTime: 0,
+    renderCount: 0,
+    lastRenderId: ""
+  }), c = ae(
+    (u, m, R, j, _, v) => {
+      i((T) => ({
+        lastRenderTime: R,
+        renderCount: T.renderCount + 1,
+        lastRenderId: u
+      })), R > 5 && console.warn(
+        `[RenderGuard] Slow render detected in ${u}: ${R.toFixed(2)}ms`
       ), s && s(
-        a,
         u,
-        c,
-        d,
-        T,
-        p
+        m,
+        R,
+        j,
+        _,
+        v
       );
     },
-    [s, i]
+    [s, p]
   );
-  return /* @__PURE__ */ ue.jsx(re, { id: "RenderGuardRoot", onRender: f, children: l });
-}, fe = (l) => {
-  const s = te(0);
-  return ne(() => {
+  return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    /* @__PURE__ */ l.jsx(pe, { onRender: c, children: n }),
+    typeof document < "u" && le(
+      /* @__PURE__ */ l.jsx(
+        de,
+        {
+          lastRenderTime: d.lastRenderTime,
+          renderCount: d.renderCount,
+          lastRenderId: d.lastRenderId
+        }
+      ),
+      document.body
+    )
+  ] });
+}, Ee = (n) => {
+  const s = se(0);
+  return z(() => {
     s.current += 1, console.log(
-      `[RenderGuard] ${l} rendered ${s.current} times`
+      `[RenderGuard] ${n} rendered ${s.current} times`
     );
   }), s.current;
 };
 export {
-  ie as RenderGuard,
-  fe as useRenderCheck
+  xe as RenderGuard,
+  Ee as useRenderCheck
 };

package/dist/render-guard.umd.js

@@ -1,6 +1,6 @@
-(function(f,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],c):(f=typeof globalThis<"u"?globalThis:f||self,c(f.RenderGuard={},f.React))})(this,(function(f,c){"use strict";var p={exports:{}},_={};var j;function U(){if(j)return _;j=1;var l=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function d(m,a,u){var i=null;if(u!==void 0&&(i=""+u),a.key!==void 0&&(i=""+a.key),"key"in a){u={};for(var E in a)E!=="key"&&(u[E]=a[E])}else u=a;return a=u.ref,{$$typeof:l,type:m,key:i,ref:a!==void 0?a:null,props:u}}return _.Fragment=s,_.jsx=d,_.jsxs=d,_}var b={};var x;function $(){return x||(x=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case Z:return"Profiler";case B:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case oe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case H:return"Portal";case K:return e.displayName||"Context";case Q:return(e._context.displayName||"Context")+".Consumer";case ee:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ne:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case A:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function s(e){return""+e}function d(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),s(e)}}function m(e){if(e===S)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===A)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=y.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function i(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function E(e,r){function t(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function k(){var e=l(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function O(e,r,t,n,T,h){var o=t.ref;return e={$$typeof:F,type:e,key:r,props:t,_owner:n},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:h}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,r,t,n,T,h){var o=r.children;if(o!==void 0)if(n)if(se(o)){for(n=0;n<o.length;n++)C(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else C(o);if(I.call(r,"key")){o=l(e);var R=Object.keys(r).filter(function(ue){return ue!=="key"});n=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",W[o+n]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(b,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],u):(b=typeof globalThis<"u"?globalThis:b||self,u(b.RenderGuard={},b.React,b.ReactDOM))})(this,(function(b,u,z){"use strict";var T={exports:{}},_={};var I;function V(){if(I)return _;I=1;var n=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function R(m,i,c){var f=null;if(c!==void 0&&(f=""+c),i.key!==void 0&&(f=""+i.key),"key"in i){c={};for(var p in i)p!=="key"&&(c[p]=i[p])}else c=i;return i=c.ref,{$$typeof:n,type:m,key:f,ref:i!==void 0?i:null,props:c}}return _.Fragment=s,_.jsx=R,_.jsxs=R,_}var v={};var F;function q(){return F||(F=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case te:return"Profiler";case re:return"StrictMode";case se:return"Suspense";case le:return"SuspenseList";case ue:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ee:return"Portal";case oe:return e.displayName||"Context";case ne:return(e._context.displayName||"Context")+".Consumer";case ae:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case O:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function s(e){return""+e}function R(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),s(e)}}function m(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=A.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function f(e){if(W.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function p(e,r){function t(){L||(L=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function E(){var e=n(this.type);return M[e]||(M[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function k(e,r,t,o,g,C){var a=t.ref;return e={$$typeof:$,type:e,key:r,props:t,_owner:o},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:g}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,r,t,o,g,C){var a=r.children;if(a!==void 0)if(o)if(de(a)){for(o=0;o<a.length;o++)y(a[o]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(a);if(W.call(r,"key")){a=n(e);var x=Object.keys(r).filter(function(fe){return fe!=="key"});o=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",U[a+o]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,n,o,R,o),W[o+n]=!0)}if(o=null,t!==void 0&&(d(t),o=""+t),i(r)&&(d(r.key),o=""+r.key),"key"in r){t={};for(var w in r)w!=="key"&&(t[w]=r[w])}else t=r;return o&&E(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),O(e,o,t,a(),T,h)}function C(e){Y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===A&&(e._payload.status==="fulfilled"?Y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function Y(e){return typeof e=="object"&&e!==null&&e.$$typeof===F}var v=c,F=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),Z=Symbol.for("react.profiler"),Q=Symbol.for("react.consumer"),K=Symbol.for("react.context"),ee=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),ne=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),oe=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),y=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,se=Array.isArray,P=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var D,L={},G=v.react_stack_bottom_frame.bind(v,u)(),M=P(m(u)),W={};b.Fragment=S,b.jsx=function(e,r,t){var n=1e4>y.recentlyCreatedOwnerStacks++;return N(e,r,t,!1,n?Error("react-stack-top-frame"):G,n?P(m(e)):M)},b.jsxs=function(e,r,t){var n=1e4>y.recentlyCreatedOwnerStacks++;return N(e,r,t,!0,n?Error("react-stack-top-frame"):G,n?P(m(e)):M)}})()),b}var g;function J(){return g||(g=1,process.env.NODE_ENV==="production"?p.exports=U():p.exports=$()),p.exports}var V=J();const z=3,X=({children:l,onRenderCallback:s,threshold:d=z})=>{const m=c.useCallback((a,u,i,E,k,O)=>{i>5&&console.warn(`[RenderGuard] Slow render detected in ${a}: ${i.toFixed(2)}ms`),s&&s(a,u,i,E,k,O)},[s,d]);return V.jsx(c.Profiler,{id:"RenderGuardRoot",onRender:m,children:l})},q=l=>{const s=c.useRef(0);return c.useEffect(()=>{s.current+=1,console.log(`[RenderGuard] ${l} rendered ${s.current} times`)}),s.current};f.RenderGuard=X,f.useRenderCheck=q,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,o,a,x,a),U[a+o]=!0)}if(a=null,t!==void 0&&(R(t),a=""+t),f(r)&&(R(r.key),a=""+r.key),"key"in r){t={};for(var N in r)N!=="key"&&(t[N]=r[N])}else t=r;return a&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,a,t,i(),g,C)}function y(e){j(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?j(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function j(e){return typeof e=="object"&&e!==null&&e.$$typeof===$}var S=u,$=Symbol.for("react.transitional.element"),ee=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),re=Symbol.for("react.strict_mode"),te=Symbol.for("react.profiler"),ne=Symbol.for("react.consumer"),oe=Symbol.for("react.context"),ae=Symbol.for("react.forward_ref"),se=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),A=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,de=Array.isArray,P=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(e){return e()}};var L,M={},D=S.react_stack_bottom_frame.bind(S,c)(),G=P(m(c)),U={};v.Fragment=w,v.jsx=function(e,r,t){var o=1e4>A.recentlyCreatedOwnerStacks++;return h(e,r,t,!1,o?Error("react-stack-top-frame"):D,o?P(m(e)):G)},v.jsxs=function(e,r,t){var o=1e4>A.recentlyCreatedOwnerStacks++;return h(e,r,t,!0,o?Error("react-stack-top-frame"):D,o?P(m(e)):G)}})()),v}var Y;function J(){return Y||(Y=1,process.env.NODE_ENV==="production"?T.exports=V():T.exports=q()),T.exports}var l=J();const d={container:{position:"fixed",bottom:"20px",right:"20px",backgroundColor:"rgba(0, 0, 0, 0.85)",color:"#fff",padding:"12px",borderRadius:"8px",fontFamily:"monospace",fontSize:"12px",zIndex:9999,boxShadow:"0 4px 12px rgba(0,0,0,0.3)",minWidth:"200px",border:"1px solid #333",backdropFilter:"blur(4px)",transition:"border-color 0.3s ease"},metricRow:{display:"flex",justifyContent:"space-between",marginBottom:"4px"},label:{color:"#aaa"},value:{fontWeight:"bold"},indicator:{display:"inline-block",width:"8px",height:"8px",borderRadius:"50%",marginRight:"8px"},title:{margin:"0 0 8px 0",fontSize:"14px",fontWeight:"bold",borderBottom:"1px solid #444",paddingBottom:"4px",display:"flex",alignItems:"center"}},B=n=>n<16?"#4caf50":n<50?"#ff9800":"#f44336",X=({lastRenderTime:n,renderCount:s,lastRenderId:R})=>{const[m,i]=u.useState(!1),[c,f]=u.useState(!1);if(u.useEffect(()=>{if(s>0){i(!0),f(!0);const E=setTimeout(()=>f(!1),300);return()=>clearTimeout(E)}},[s,n]),!m)return null;const p=B(n);return l.jsxs("div",{style:{...d.container,borderColor:c?p:"#333"},children:[l.jsxs("h4",{style:d.title,children:[l.jsx("span",{style:{...d.indicator,backgroundColor:p}}),"RenderGuard"]}),l.jsxs("div",{style:d.metricRow,children:[l.jsx("span",{style:d.label,children:"Last Render:"}),l.jsxs("span",{style:{...d.value,color:p},children:[n.toFixed(2),"ms"]})]}),l.jsxs("div",{style:d.metricRow,children:[l.jsx("span",{style:d.label,children:"Total Renders:"}),l.jsx("span",{style:d.value,children:s})]}),l.jsxs("div",{style:d.metricRow,children:[l.jsx("span",{style:d.label,children:"Source:"}),l.jsx("span",{style:{...d.value,maxWidth:"100px",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:R})]})]})},H=3,Z=u.memo(({children:n,onRender:s})=>l.jsx(u.Profiler,{id:"RenderGuardRoot",onRender:s,children:n})),Q=({children:n,onRenderCallback:s,threshold:R=H})=>{const[m,i]=u.useState({lastRenderTime:0,renderCount:0,lastRenderId:""}),c=u.useCallback((f,p,E,k,h,y)=>{i(j=>({lastRenderTime:E,renderCount:j.renderCount+1,lastRenderId:f})),E>5&&console.warn(`[RenderGuard] Slow render detected in ${f}: ${E.toFixed(2)}ms`),s&&s(f,p,E,k,h,y)},[s,R]);return l.jsxs(l.Fragment,{children:[l.jsx(Z,{onRender:c,children:n}),typeof document<"u"&&z.createPortal(l.jsx(X,{lastRenderTime:m.lastRenderTime,renderCount:m.renderCount,lastRenderId:m.lastRenderId}),document.body)]})},K=n=>{const s=u.useRef(0);return u.useEffect(()=>{s.current+=1,console.log(`[RenderGuard] ${n} rendered ${s.current} times`)}),s.current};b.RenderGuard=Q,b.useRenderCheck=K,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-render-guard",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/render-guard.umd.js",
   "module": "./dist/render-guard.es.js",
@@ -16,7 +16,8 @@
   ],
   "scripts": {
     "build": "tsc && vite build",
-    "dev": "vite build --watch"
+    "dev": "vite build --watch",
+    "test": "vitest"
   },
   "keywords": [
     "react",
@@ -36,14 +37,19 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^25.2.0",
     "@types/react": "^19.2.11",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.3",
+    "jsdom": "^28.0.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
   }
 }