react-beetle-inspector/dist/index.cjs.js

Debug re-renders, API calls and performance issues in React apps with an overlay.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");function H(o,t){return JSON.stringify(o)===JSON.stringify(t)}const S=new Map,C=()=>[...S.entries()].sort((o,t)=>t[1]-o[1]).slice(0,5),N=(o,t={})=>{const r=e.useRef(t),a=e.useRef(1);e.useEffect(()=>{if(process.env.NODE_ENV!=="development")return;const l=Object.entries(t).reduce((g,[d,f])=>(H(f,r.current[d])||(g[d]={from:r.current[d],to:f}),g),{}),u=o||"Unknown";S.set(u,(S.get(u)||0)+1),console.groupCollapsed(`%c[${u}] Render #${a.current}`,"color: dodgerblue;"),Object.keys(l).length===0?console.log("No prop changes."):console.log("Changed Props:",l),console.trace(`[${u}] render trace`),console.groupEnd(),r.current=t,a.current+=1})},w=[],W=100;let E=[];const j=()=>{E.forEach(o=>o([...w]))},k=o=>(E.push(o),o([...w]),()=>{E=E.filter(t=>t!==o)}),v=({url:o,method:t,duration:r,status:a,stack:l})=>{w.length>W&&w.shift(),w.push({url:o,method:t,duration:r,status:a,time:new Date,stack:l}),j()},M=()=>{if(typeof window>"u")return;const o=window.fetch;window.fetch=async(...t)=>{var g;const r=t[0],a=(((g=t[1])==null?void 0:g.method)||"GET").toUpperCase(),l=performance.now(),u=new Error().stack.split(`
`).slice(2,6).join(`
`);try{const d=await o(...t),f=(performance.now()-l).toFixed(2);return v({url:r,method:a,duration:f,status:d.status,stack:u}),d}catch(d){const f=(performance.now()-l).toFixed(2);throw v({url:r,method:a,duration:f,status:"ERROR",stack:u}),d}}};function X(o){o.interceptors.request.use(t=>(t.metadata={startTime:new Date},t)),o.interceptors.response.use(t=>{const r=new Date-t.config.metadata.startTime;return v({method:t.config.method.toUpperCase(),url:t.config.url,duration:r,status:t.status}),t},t=>{const r=t.config||{},a=r.metadata?new Date-r.metadata.startTime:0;return v({method:r.method?r.method.toUpperCase():"UNKNOWN",url:r.url||"unknown",duration:a,status:t.response?t.response.status:"ERR"}),Promise.reject(t)})}const Y=()=>{const[o,t]=e.useState([]),[r,a]=e.useState([]),[l,u]=e.useState(!1),[g,d]=e.useState(!1),[f,D]=e.useState({x:0,y:0}),y=e.useRef(null),L=e.useRef(null),h=e.useRef({x:window.innerWidth-80,y:window.innerHeight-80}),m=e.useRef({isDragging:!1,offsetX:0,offsetY:0}),b=e.useRef(!1),T=(n,i)=>{const s=y.current;if(!s)return;const p=Math.max(0,Math.min(n,window.innerWidth-s.offsetWidth)),c=Math.max(0,Math.min(i,window.innerHeight-s.offsetHeight));s.style.left=`${p}px`,s.style.top=`${c}px`,s.style.right="auto",s.style.bottom="auto",h.current={x:p,y:c}},P=()=>{const n=L.current;if(!n)return;const{offsetWidth:i,offsetHeight:s}=n,{x:p,y:c}=h.current,x=p<window.innerWidth/2,R=c<window.innerHeight/2,O=x?p+10:p-i-10,I=R?c+10:c-s-10;D({x:O,y:I})};return e.useLayoutEffect(()=>{l&&P()},[l]),e.useEffect(()=>{const n=y.current;if(!n)return;const i=c=>{m.current.isDragging=!0,b.current=!1,m.current.offsetX=c.clientX-n.offsetLeft,m.current.offsetY=c.clientY-n.offsetTop},s=c=>{if(!m.current.isDragging)return;b.current=!0;const x=c.clientX-m.current.offsetX,R=c.clientY-m.current.offsetY;T(x,R)},p=()=>{m.current.isDragging=!1};return n.addEventListener("pointerdown",i),window.addEventListener("pointermove",s),window.addEventListener("pointerup",p),()=>{n.removeEventListener("pointerdown",i),window.removeEventListener("pointermove",s),window.removeEventListener("pointerup",p)}},[]),e.useEffect(()=>{const n=i=>{i.ctrlKey&&i.key==="`"&&d(s=>!s)};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[]),e.useEffect(()=>{const n=k(t),i=setInterval(()=>{a(C())},2e3);return()=>{n(),clearInterval(i)}},[]),g?e.createElement("div",{ref:y,onClick:()=>{b.current||u(n=>!n)},style:{position:"fixed",zIndex:1e4,left:h.current.x,top:h.current.y,width:50,height:50,borderRadius:"50%",background:"#000",color:"#fff",display:"none",alignItems:"center",justifyContent:"center",fontSize:24,cursor:"grab",userSelect:"none"},title:"Toggle Debug Panel"},"🐞"):e.createElement(e.Fragment,null,e.createElement("div",{ref:y,onClick:()=>{b.current||u(n=>!n)},style:{position:"fixed",zIndex:1e4,left:h.current.x,top:h.current.y,width:50,height:50,borderRadius:"50%",background:"#000",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:24,cursor:"grab",userSelect:"none"},title:"Toggle Debug Panel"},"🐞"),l&&e.createElement("div",{ref:L,className:"debug-panel",style:{position:"fixed",top:f.y,left:f.x,zIndex:10001,width:320,maxHeight:400,overflowY:"auto",backgroundColor:"#111",color:"#fff",fontFamily:"monospace",borderRadius:12,padding:16,boxShadow:"0 8px 16px rgba(0,0,0,0.3)",transition:"opacity 0.3s ease"}},e.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},e.createElement("strong",null,"Debug Info"),e.createElement("button",{onClick:()=>u(!1),style:{background:"transparent",border:"none",color:"#fff",fontSize:"18px",cursor:"pointer"}},"×")),e.createElement("div",{style:{marginTop:10}},e.createElement("strong",null,"Top Rendered Components"),e.createElement("ul",{style:{paddingLeft:15}},r.map(([n,i],s)=>e.createElement("li",{key:s},n,": ",i)))),e.createElement("div",{style:{marginTop:10}},e.createElement("strong",null,"API Calls (",o.length,")"),e.createElement("ul",{style:{paddingLeft:15}},o.slice(-5).reverse().map((n,i)=>e.createElement("li",{key:i},e.createElement("div",{style:{wordBreak:"break-word"}},n.method," ",n.url),e.createElement("small",null,n.duration,"ms | ",n.status," |"," ",n.time.toLocaleTimeString())))))))};exports.DebugOverlay=Y;exports.getRenderStats=C;exports.patchAxiosInstance=X;exports.patchGlobalFetch=M;exports.subscribeToApiLogs=k;exports.useWhyRender=N;
//# sourceMappingURL=index.cjs.js.map