@client-to-code/react-client/lib/dist/index.esm.js

Components used to package files that need to click and jump under the react development environment.

import*as t from"react";import*as e from"hotkeys-js";import*as n from"querystring";var o={317:t=>{t.exports="/__open-stack-frame-in-editor"}},i={};function r(t){var e=i[t];if(void 0!==e)return e.exports;var n=i[t]={exports:{}};return o[t](n,n.exports,r),n.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var s={};(()=>{r.d(s,{Inspector:()=>T,defaultHotKeys:()=>L});const o=(i={useEffect:()=>t.useEffect,useRef:()=>t.useRef},a={},r.d(a,i),a);var i,a;const d=(t=>{var e={};return r.d(e,t),e})({default:()=>e.default});let p=new Set;const c=t=>"symbol"==typeof t?.type?.$$typeof,h=t=>t?.type?.$$typeof===Symbol.for("react.forward_ref"),l=t=>{if(!t)return;const e=(t=>{const e=Object.keys(t).find((t=>t.startsWith("__reactInternalInstance$")||t.startsWith("__reactFiber$")));if(e)return t[e]})(t);return e||l(t.parentElement)},u=t=>{const e=t?.type;if(!e)return;const{displayName:n,name:o}=e;return"string"==typeof n?n:"string"==typeof o?o:void 0},m=t=>{if(!t)return;const e=(t=>{let e=t.return;for(;e;){if(!c(e))return e;e=e.return}return null})(t);if(!e)return;const n=(o=e,"string"==typeof o?.type);var o;const i=!e.child.sibling;let r=!n&&i?e:t;const s=r;for(;r;){if(g(r))return r;r=r.return}return s},f=t=>{const e=l(t),n=m(e),o=(t=>{let e,n=t;for(;n;){let t,o=n.return??void 0;for(;c(o);)h(o)&&(t=o),o=o?.return??void 0;if(t&&(n=t),u(n)&&(e||(e=n),g(n)))return n;n=o}return e})(n),i=u(o),r=t.nodeName.toLowerCase();return{fiber:n,name:i,title:i?`${r} in <${i}>`:r}},g=t=>{if(!t?._debugSource)return;const{fileName:e,lineNumber:n,columnNumber:o}=t._debugSource;return e&&n?{lineNumber:String(n),columnNumber:String(o??0),absolutePath:String(e)}:void 0},v=t=>{const e=l(t),n=m(e);return g(n)},b=(t=>{var e={};return r.d(e,t),e})({default:()=>n.default});var E=r(317),w=r.n(E);function y(t){return t.getBoundingClientRect()}class _{node;border;padding;content;constructor(t,e){this.node=t.createElement("div"),this.border=t.createElement("div"),this.padding=t.createElement("div"),this.content=t.createElement("div"),this.border.style.borderColor=N.border,this.padding.style.borderColor=N.padding,this.content.style.backgroundColor=N.background,Object.assign(this.node.style,{borderColor:N.margin,pointerEvents:"none",position:"fixed"}),this.node.style.zIndex="10000000",this.node.appendChild(this.border),this.border.appendChild(this.padding),this.padding.appendChild(this.content),e.prepend(this.node)}remove(){this.node.parentNode&&this.node.parentNode.removeChild(this.node)}update(t,e){C(e,"margin",this.node),C(e,"border",this.border),C(e,"padding",this.padding),Object.assign(this.content.style,{height:t.height-e.borderTop-e.borderBottom-e.paddingTop-e.paddingBottom+"px",width:t.width-e.borderLeft-e.borderRight-e.paddingLeft-e.paddingRight+"px"}),Object.assign(this.node.style,{top:t.top-e.marginTop+"px",left:t.left-e.marginLeft+"px"})}}class I{tip;nameSpan;titleDiv;infoDiv;dimSpan;constructor(t,e){this.tip=t.createElement("div"),Object.assign(this.tip.style,{display:"flex",flexFlow:"row nowrap",alignItems:"center",backgroundColor:"#333740",borderRadius:"2px",fontFamily:'"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',fontWeight:"bold",padding:"6px 8px",pointerEvents:"none",position:"fixed",fontSize:"12px",whiteSpace:"nowrap"}),this.nameSpan=t.createElement("span"),this.tip.appendChild(this.nameSpan),Object.assign(this.nameSpan.style,{display:"flex",flexDirection:"column",borderRight:"1px solid #aaaaaa",paddingRight:"0.8rem",marginRight:"0.8rem"}),this.titleDiv=t.createElement("div"),this.nameSpan.appendChild(this.titleDiv),Object.assign(this.titleDiv.style,{color:"#ee78e6",fontSize:"16px"}),this.infoDiv=t.createElement("div"),this.nameSpan.appendChild(this.infoDiv),Object.assign(this.infoDiv.style,{color:"#ee78e6",fontSize:"14px"}),this.dimSpan=t.createElement("span"),this.tip.appendChild(this.dimSpan),Object.assign(this.dimSpan.style,{color:"#d7d7d7"}),this.tip.style.zIndex="10000000",e.appendChild(this.tip)}remove(){this.tip.parentNode&&this.tip.parentNode.removeChild(this.tip)}updateText(t,e,n,o){this.titleDiv.textContent=t,this.infoDiv.textContent=e??"",this.dimSpan.textContent=`${Math.round(n)}px × ${Math.round(o)}px`}updatePosition(t,e){const n=this.tip.getBoundingClientRect(),o=function(t,e,n){const o=Math.max(n.height,20),i=Math.max(n.width,60);let r;r=t.top+t.height+o<=e.top+e.height?t.top+t.height<e.top+0?e.top+5:t.top+t.height+5:t.top-o<=e.top+e.height?t.top-o-5<e.top+5?e.top+5:t.top-o-5:e.top+e.height-o-5;let s=t.left+5;return t.left<e.left&&(s=e.left+5),t.left+i>e.left+e.width&&(s=e.left+e.width-i-5),{style:{top:`${r}px`,left:`${s}px`}}}(t,e,{width:n.width,height:n.height});Object.assign(this.tip.style,o.style)}}class x{window;tipBoundsWindow;container;tip;rects;removeCallback;constructor(){const t=window.__REACT_DEVTOOLS_TARGET_WINDOW__||window;this.window=t;const e=window.__REACT_DEVTOOLS_TARGET_WINDOW__||window;this.tipBoundsWindow=e;const n=t.document;this.container=n.createElement("div"),this.container.style.zIndex="10000000",this.tip=new I(n,this.container),this.rects=[],this.removeCallback=()=>{},n.body.appendChild(this.container)}remove(){this.tip.remove(),this.rects.forEach((t=>{t.remove()})),this.rects.length=0,this.container.parentNode&&this.container.parentNode.removeChild(this.container),this.removeCallback()}setRemoveCallback(t){this.removeCallback=t.bind(this)}inspect(t,e,n){const o=t.filter((t=>t.nodeType===Node.ELEMENT_NODE));for(;this.rects.length>o.length;){const t=this.rects.pop();t?.remove()}if(0===o.length)return;for(;this.rects.length<o.length;)this.rects.push(new _(this.window.document,this.container));const i={top:Number.POSITIVE_INFINITY,right:Number.NEGATIVE_INFINITY,bottom:Number.NEGATIVE_INFINITY,left:Number.POSITIVE_INFINITY};if(o.forEach(((t,e)=>{const n=y(t,this.window),o=function(t){const e=window.getComputedStyle(t);return{borderLeft:parseInt(e.borderLeftWidth,10),borderRight:parseInt(e.borderRightWidth,10),borderTop:parseInt(e.borderTopWidth,10),borderBottom:parseInt(e.borderBottomWidth,10),marginLeft:parseInt(e.marginLeft,10),marginRight:parseInt(e.marginRight,10),marginTop:parseInt(e.marginTop,10),marginBottom:parseInt(e.marginBottom,10),paddingLeft:parseInt(e.paddingLeft,10),paddingRight:parseInt(e.paddingRight,10),paddingTop:parseInt(e.paddingTop,10),paddingBottom:parseInt(e.paddingBottom,10)}}(t);i.top=Math.min(i.top,n.top-o.marginTop),i.right=Math.max(i.right,n.left+n.width+o.marginRight),i.bottom=Math.max(i.bottom,n.top+n.height+o.marginBottom),i.left=Math.min(i.left,n.left-o.marginLeft),this.rects[e].update(n,o)})),!e){e=o[0].nodeName.toLowerCase();const t=o[0],n=t.ownerDocument.defaultView?.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(n?.rendererInterfaces){let o=null;for(const e of n.rendererInterfaces.values()){const n=e.getFiberIDForNative(t,!0);if(null!==n){o=e.getDisplayNameForFiberID(n,!0);break}}o&&(e+=` (in ${o})`)}}this.tip.updateText(e,n,i.right-i.left,i.bottom-i.top);const r=y(this.tipBoundsWindow.document.documentElement,this.window);this.tip.updatePosition({top:i.top,left:i.left,height:i.bottom-i.top,width:i.right-i.left},{top:r.top+this.tipBoundsWindow.scrollY,left:r.left+this.tipBoundsWindow.scrollX,height:this.tipBoundsWindow.innerHeight,width:this.tipBoundsWindow.innerWidth})}}function C(t,e,n){Object.assign(n.style,{borderTopWidth:`${t[`${e}Top`]}px`,borderLeftWidth:`${t[`${e}Left`]}px`,borderRightWidth:`${t[`${e}Right`]}px`,borderBottomWidth:`${t[`${e}Bottom`]}px`,borderStyle:"solid"})}const N={background:"rgba(120, 170, 210, 0.7)",padding:"rgba(77, 200, 0, 0.3)",margin:"rgba(255, 155, 0, 0.3)",border:"rgba(255, 200, 50, 0.3)"},L=["control","shift","command","c"],T=t=>{const{keys:e,onHoverElement:n,onClickElement:i,disableLaunchEditor:r,children:s}=t,a=(e??L).join("+"),c=(0,o.useRef)(),h=(0,o.useRef)({x:0,y:0}),l=({clientX:t,clientY:e})=>{h.current.x=t,h.current.y=e},u=()=>{const t=new x;c.current=t;const e=function(t){function e(t){t&&"function"==typeof t.addEventListener&&(t.addEventListener("click",i,!0),t.addEventListener("mousedown",r,!0),t.addEventListener("mouseover",r,!0),t.addEventListener("mouseup",r,!0),t.addEventListener("pointerdown",s,!0),t.addEventListener("pointerover",a,!0),t.addEventListener("pointerup",d,!0))}function n(){o(window),p.forEach((function(t){try{o(t.contentWindow)}catch(t){}})),p=new Set}function o(t){t&&"function"==typeof t.removeEventListener&&(t.removeEventListener("click",i,!0),t.removeEventListener("mousedown",r,!0),t.removeEventListener("mouseover",r,!0),t.removeEventListener("mouseup",r,!0),t.removeEventListener("pointerdown",s,!0),t.removeEventListener("pointerover",a,!0),t.removeEventListener("pointerup",d,!0))}function i(e){e.preventDefault(),e.stopPropagation(),n(),t.onClick?.(e.target)}function r(t){t.preventDefault(),t.stopPropagation()}function s(t){t.preventDefault(),t.stopPropagation()}function a(n){n.preventDefault(),n.stopPropagation();const o=n.target;if("IFRAME"===o.tagName){const t=o;try{p.has(t)||(e(t.contentWindow),p.add(t))}catch(t){}}t.onPointerOver?.(n.target)}function d(t){t.preventDefault(),t.stopPropagation()}return e(window),n}({onPointerOver:g,onClick:E});t.setRemoveCallback(e);const n=h.current,o=document.elementFromPoint(n.x,n.y);o&&g(o)},m=()=>{c.current?.remove(),c.current=void 0},g=t=>{const e=c.current,o=v(t),i=o?.relativePath,r=o?.absolutePath,{fiber:s,name:a,title:d}=f(t);e?.inspect?.([t],d,i??r),n?.({element:t,fiber:s,codeInfo:o,name:a})},E=t=>{m();const e=v(t),{fiber:n,name:o}=f(t);r||(t=>{if(!t)return;const{lineNumber:e,columnNumber:n,relativePath:o,absolutePath:i}=t,r=Boolean(o),s={fileName:r?o:i,lineNumber:e,colNumber:n},a=r?`${w()}/relative`:w();fetch(`${a}?${b.default.stringify(s)}`,{headers:{"Content-Type":"application/json"}})})(e),i?.({element:t,fiber:n,codeInfo:e,name:o})};return(0,o.useEffect)((()=>(document.addEventListener("mousemove",l,!0),()=>{document.removeEventListener("mousemove",l,!0)})),[]),(0,o.useEffect)((()=>{const t=(t,e)=>{e.key===a?c.current?m():u():"esc"===e.key&&c.current&&m()};return(0,d.default)(`${a}, esc`,t),window.__REACT_DEV_INSPECTOR_TOGGLE__=()=>c.current?m():u(),()=>{d.default.unbind(`${a}, esc`,t),delete window.__REACT_DEV_INSPECTOR_TOGGLE__}}),[a]),s??null}})();var a=s.Inspector,d=s.defaultHotKeys;export{a as Inspector,d as defaultHotKeys};