@tanstack/router-devtools 0.0.1-beta.214 → 0.0.1-beta.215
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/devtools.js +24 -15
- package/build/cjs/devtools.js.map +1 -1
- package/build/esm/index.js +24 -15
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +108 -108
- package/build/umd/index.development.js +24 -15
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +2 -2
- package/build/umd/index.production.js.map +1 -1
- package/package.json +2 -2
- package/src/devtools.tsx +38 -19
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
*
|
|
9
9
|
* @license MIT
|
|
10
10
|
*/
|
|
11
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TanStackRouterDevtools={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=a(t),l=n(t);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(this,arguments)}const i=r.createContext(null);function d(){const e=window.__TSR_ROUTER_CONTEXT__||i;return r.useContext(e)}"undefined"!=typeof document&&(window.__TSR_ROUTER_CONTEXT__=i);function
|
|
11
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TanStackRouterDevtools={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=a(t),l=n(t);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(this,arguments)}const i=r.createContext(null);function d(){const e=window.__TSR_ROUTER_CONTEXT__||i;return r.useContext(e)}"undefined"!=typeof document&&(window.__TSR_ROUTER_CONTEXT__=i);function u(e,t){const[n,a]=l.default.useState();l.default.useEffect((()=>{const n=(e=>{try{const t=localStorage.getItem(e);return"string"==typeof t?JSON.parse(t):void 0}catch{return}})(e);a(null==n?"function"==typeof t?t():t:n)}),[t,e]);return[n,l.default.useCallback((t=>{a((n=>{let a=t;"function"==typeof t&&(a=t(n));try{localStorage.setItem(e,JSON.stringify(a))}catch{}return a}))}),[e])]}const c={background:"#0b1521",backgroundAlt:"#132337",foreground:"white",gray:"#3f4e60",grayAlt:"#222e3e",inputBackgroundColor:"#fff",inputTextColor:"#000",success:"#00ab52",danger:"#ff0085",active:"#006bff",warning:"#ffb200"},s=l.default.createContext(c);function f({theme:e,...t}){return l.default.createElement(s.Provider,o({value:e},t))}const m="undefined"==typeof window;function p(e,t){return"pending"===e.status||e.isFetching?t.active:"error"===e.status?t.danger:"success"===e.status?t.success:t.gray}function g(e,t,n){const a=e.find((e=>e.routeId===t.id));return a?p(a,n):n.gray}function b(e,t,n={}){return l.default.forwardRef((({style:a,...r},o)=>{const i=l.default.useContext(s),d=Object.entries(n).reduce(((e,[t,n])=>function(e){const[t,n]=l.default.useState((()=>{if("undefined"!=typeof window)return window.matchMedia&&window.matchMedia(e).matches}));return l.default.useEffect((()=>{if("undefined"!=typeof window){if(!window.matchMedia)return;const t=window.matchMedia(e),a=({matches:e})=>n(e);return t.addListener(a),()=>{t.removeListener(a)}}}),[t,e,n]),t}(t)?{...e,..."function"==typeof n?n(r,i):n}:e),{});return l.default.createElement(e,{...r,style:{..."function"==typeof t?t(r,i):t,...a,...d},ref:o})}))}function y(){const e=l.default.useRef(!1),t=l.default.useCallback((()=>e.current),[]);return l.default[m?"useEffect":"useLayoutEffect"]((()=>(e.current=!0,()=>{e.current=!1})),[]),t}function E(e){const t=y(),[n,a]=l.default.useState(e);return[n,l.default.useCallback((e=>{var n;n=()=>{t()&&a(e)},Promise.resolve().then(n).catch((e=>setTimeout((()=>{throw e}))))}),[t])]}const h=b("div",((e,t)=>({fontSize:"clamp(12px, 1.5vw, 14px)",fontFamily:"sans-serif",display:"flex",backgroundColor:t.background,color:t.foreground})),{"(max-width: 700px)":{flexDirection:"column"},"(max-width: 600px)":{fontSize:".9em"}}),v=b("div",(()=>({flex:"1 1 500px",display:"flex",flexDirection:"column",overflow:"auto",height:"100%"})),{"(max-width: 700px)":(e,t)=>({borderTop:`2px solid ${t.gray}`})}),k=b("button",((e,t)=>({appearance:"none",fontSize:".9em",fontWeight:"bold",background:t.gray,border:"0",borderRadius:".3em",color:"white",padding:".5em",opacity:e.disabled?".5":void 0,cursor:"pointer"}))),x=b("code",{fontSize:".9em"}),w=b("div",{fontFamily:"Menlo, monospace",fontSize:".7rem",lineHeight:"1.7",outline:"none",wordBreak:"break-word"}),S=b("span",{color:"white"}),R=b("button",{cursor:"pointer",color:"white"}),I=b("button",{cursor:"pointer",color:"inherit",font:"inherit",outline:"inherit",background:"transparent",border:"none",padding:0}),D=b("span",((e,t)=>({color:t.danger}))),T=b("div",{marginLeft:".1em",paddingLeft:"1em",borderLeft:"2px solid rgba(0,0,0,.15)"}),O=b("span",{color:"grey",fontSize:".7em"}),C=({expanded:e,style:t={}})=>r.createElement("span",{style:{display:"inline-block",transition:"all .1s ease",transform:`rotate(${e?90:0}deg) ${t.transform||""}`,...t}},"▶");const A=({handleEntry:e,label:t,value:n,subEntries:a=[],subEntryPages:l=[],type:o,expanded:i=!1,toggleExpanded:d,pageSize:u,renderer:c})=>{const[s,f]=r.useState([]),[m,p]=r.useState(void 0);return r.createElement(w,null,l.length?r.createElement(r.Fragment,null,r.createElement(I,{onClick:()=>d()},r.createElement(C,{expanded:i})," ",t," ",r.createElement(O,null,"iterable"===String(o).toLowerCase()?"(Iterable) ":"",a.length," ",a.length>1?"items":"item")),i?1===l.length?r.createElement(T,null,a.map(((t,n)=>e(t)))):r.createElement(T,null,l.map(((t,n)=>r.createElement("div",{key:n},r.createElement(w,null,r.createElement(R,{onClick:()=>f((e=>e.includes(n)?e.filter((e=>e!==n)):[...e,n]))},r.createElement(C,{expanded:i})," [",n*u," ..."," ",n*u+u-1,"]"),s.includes(n)?r.createElement(T,null,t.map((t=>e(t)))):null))))):null):"function"===o?r.createElement(r.Fragment,null,r.createElement(L,{renderer:c,label:r.createElement("button",{onClick:()=>{p(n())},style:{appearance:"none",border:"0",background:"transparent"}},r.createElement(S,null,t)," 🔄"," "),value:m,defaultExpanded:{}})):r.createElement(r.Fragment,null,r.createElement(S,null,t,":")," ",r.createElement(D,null,(e=>{const t=Object.getOwnPropertyNames(Object(e)),n="bigint"==typeof e?`${e.toString()}n`:e;return JSON.stringify(n,t)})(n))))};function L({value:e,defaultExpanded:t,renderer:n=A,pageSize:a=100,filterSubEntries:l,...i}){const[d,u]=r.useState(Boolean(t)),c=r.useCallback((()=>u((e=>!e))),[]);let s=typeof e,f=[];const m=e=>{const n=!0===t?{[e.label]:!0}:t?.[e.label];return{...e,defaultExpanded:n}};var p;Array.isArray(e)?(s="array",f=e.map(((e,t)=>m({label:t.toString(),value:e})))):null!==e&&"object"==typeof e&&(p=e,Symbol.iterator in p)&&"function"==typeof e[Symbol.iterator]?(s="Iterable",f=Array.from(e,((e,t)=>m({label:t.toString(),value:e})))):"object"==typeof e&&null!==e&&(s="object",f=Object.entries(e).map((([e,t])=>m({label:e,value:t})))),f=l?l(f):f;const g=function(e,t){if(t<1)return[];let n=0;const a=[];for(;n<e.length;)a.push(e.slice(n,n+t)),n+=t;return a}(f,a);return n({handleEntry:t=>r.createElement(L,o({key:t.label,value:e,renderer:n,filterSubEntries:l},i,t)),type:s,subEntries:f,subEntryPages:g,value:e,expanded:d,toggleExpanded:c,pageSize:a,...i})}const z="undefined"==typeof window;function P(e){return l.default.createElement("div",o({},e,{style:{...e.style??{},display:"flex",alignItems:"center",flexDirection:"column",fontSize:"0.8rem",fontWeight:"bolder",lineHeight:"1"}}),l.default.createElement("div",{style:{letterSpacing:"-0.05rem"}},"TANSTACK"),l.default.createElement("div",{style:{backgroundImage:"linear-gradient(to right, var(--tw-gradient-stops))","--tw-gradient-from":"#84cc16","--tw-gradient-stops":"var(--tw-gradient-from), var(--tw-gradient-to)","--tw-gradient-to":"#10b981",WebkitBackgroundClip:"text",color:"transparent",letterSpacing:"0.1rem",marginRight:"-0.2rem"}},"ROUTER"))}function j({route:e,isRoot:t,activeRouteId:n,setActiveRouteId:a}){const r=d(),o="pending"===r.state.status?r.state.pendingMatches:r.state.matches,i=r.state.matches.find((t=>t.routeId===e.id));return l.default.createElement("div",null,l.default.createElement("div",{role:"button","aria-label":`Open match details for ${e.id}`,onClick:()=>{i&&a(n===e.id?"":e.id)},style:{display:"flex",borderBottom:`solid 1px ${c.grayAlt}`,cursor:i?"pointer":"default",alignItems:"center",background:e.id===n?"rgba(255,255,255,.1)":void 0}},t?null:l.default.createElement("div",{style:{flex:"0 0 auto",width:".7rem",height:".7rem",margin:".5rem .75rem",alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:"100%",transition:"all .2s ease-out",background:g(o,e,c),opacity:i?1:.3}}),l.default.createElement(x,{style:{flex:"1 0 auto",display:"flex",justifyContent:"space-between",padding:".25rem .5rem .25rem 0",paddingLeft:t?".5rem":0,opacity:i?1:.7,fontSize:"0.7rem"}},l.default.createElement("span",null,e.path||function(e){return"/"===e?e:e.replace(/\/{1,}$/,"")}(
|
|
12
12
|
/**
|
|
13
13
|
* @tanstack/react-router/src/index.tsx
|
|
14
14
|
*
|
|
@@ -19,5 +19,5 @@
|
|
|
19
19
|
*
|
|
20
20
|
* @license MIT
|
|
21
21
|
*/
|
|
22
|
-
function(e){return"/"===e?e:e.replace(/^\/{1,}/,"")}(e.id))," "),s?l.default.createElement("span",{style:{opacity:.3}},s.id):null)),e.children?.length?l.default.createElement("div",{style:{marginLeft:t?0:"1rem",borderLeft:t?"":`solid 1px ${u.grayAlt}`}},[...e.children].sort(((e,t)=>e.rank-t.rank)).map((e=>l.default.createElement(j,{key:e.id,route:e,activeRouteId:n,activeMatchId:a,setActiveRouteId:r,setActiveMatchId:o})))):null)}const M=l.default.forwardRef((function(e,t){const{isOpen:n=!0,setIsOpen:a,handleDragStart:r,router:i,...s}=e,m=d(),g=[...m.state.pendingMatches,...m.state.matches];!function(e,t){if(!e)throw new Error("Invariant failed")}(m);const[b,y]=c("tanstackRouterDevtoolsShowMatches",!0),[h,k]=c("tanstackRouterDevtoolsActiveRouteId",""),[w,S]=c("tanstackRouterDevtoolsActiveMatchId",""),R=l.default.useMemo((()=>g.find((e=>e.id===h))||g.find((e=>e.id===w))),[h,w]),I=Object.keys(m.state.location.search||{}).length;return l.default.createElement(f,{theme:u},l.default.createElement(v,o({ref:t,className:"TanStackRouterDevtoolsPanel"},s),l.default.createElement("style",{dangerouslySetInnerHTML:{__html:`\n\n .TanStackRouterDevtoolsPanel * {\n scrollbar-color: ${u.backgroundAlt} ${u.gray};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n width: 1em;\n height: 1em;\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n background: ${u.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n background: ${u.gray};\n border-radius: .5em;\n border: 3px solid ${u.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel table {\n width: 100%;\n }\n\n .TanStackRouterDevtoolsPanel table tr {\n border-bottom: 2px dotted rgba(255, 255, 255, .2);\n }\n\n .TanStackRouterDevtoolsPanel table tr:last-child {\n border-bottom: none\n }\n\n .TanStackRouterDevtoolsPanel table td {\n padding: .25rem .5rem;\n border-right: 2px dotted rgba(255, 255, 255, .05);\n }\n\n .TanStackRouterDevtoolsPanel table td:last-child {\n border-right: none\n }\n\n `}}),l.default.createElement("div",{style:{position:"absolute",left:0,top:0,width:"100%",height:"4px",marginBottom:"-4px",cursor:"row-resize",zIndex:1e5},onMouseDown:r}),l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${u.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{display:"flex",justifyContent:"start",gap:"1rem",padding:"1rem",alignItems:"center",background:u.backgroundAlt}},l.default.createElement(z,{"aria-hidden":!0}),l.default.createElement("div",{style:{fontSize:"clamp(.8rem, 2vw, 1.3rem)",fontWeight:"bold"}},l.default.createElement("span",{style:{fontWeight:100}},"Devtools"))),l.default.createElement("div",{style:{overflowY:"auto",flex:"1"}},l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{label:"Router",value:m,defaultExpanded:{state:{},context:{}},filterSubEntries:e=>e.filter((e=>"function"!=typeof e.value))})))),l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${u.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{flex:"1 1 auto",overflowY:"auto"}},l.default.createElement("div",{style:{padding:".5em",background:u.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem",fontWeight:"bold"}},"Pathname"," ",m.state.location.maskedLocation?l.default.createElement("div",{style:{padding:".1rem .5rem",background:u.warning,color:"black",borderRadius:".5rem"}},"Masked"):null),l.default.createElement("div",{style:{padding:".5rem",display:"flex",gap:".5rem",alignItems:"center"}},l.default.createElement("code",{style:{opacity:.6}},m.state.location.pathname),m.state.location.maskedLocation?l.default.createElement("code",{style:{color:u.warning,fontWeight:"bold"}},m.state.location.maskedLocation.pathname):null),l.default.createElement("div",{style:{padding:".5em",background:u.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem",fontWeight:"bold"}},l.default.createElement("button",{type:"button",onClick:()=>{y(!1)},disabled:!b,style:{appearance:"none",opacity:b?.5:1,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Routes"),"/",l.default.createElement("button",{type:"button",onClick:()=>{y(!0)},disabled:b,style:{appearance:"none",opacity:b?1:.5,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Matches")),b?l.default.createElement("div",null,m.state.matches.map(((e,t)=>l.default.createElement("div",{key:e.routeId||t,role:"button","aria-label":`Open match details for ${e.routeId}`,onClick:()=>k(h===e.routeId?"":e.routeId),style:{display:"flex",borderBottom:`solid 1px ${u.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===R?"rgba(255,255,255,.1)":void 0}},l.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:p(e,u),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),l.default.createElement(x,{style:{padding:".5em",fontSize:"0.7rem"}},`${e.id}`))))):l.default.createElement(j,{route:m.routeTree,isRoot:!0,activeRouteId:h,activeMatchId:w,setActiveRouteId:k,setActiveMatchId:S}))),R?l.default.createElement(E,null,l.default.createElement("div",{style:{padding:".5em",background:u.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Match Details"),l.default.createElement("div",null,l.default.createElement("table",null,l.default.createElement("tbody",null,l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"ID"),l.default.createElement("td",null,l.default.createElement(x,{style:{lineHeight:"1.8em"}},JSON.stringify(R.id,null,2)))),l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"Status"),l.default.createElement("td",null,R.status)),l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"Last Updated"),l.default.createElement("td",null,R.updatedAt?new Date(R.updatedAt).toLocaleTimeString():"N/A"))))),l.default.createElement("div",{style:{background:u.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Explorer"),l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{label:"Match",value:R,defaultExpanded:{}}))):null,I?l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${u.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{padding:".5em",background:u.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1,fontWeight:"bold"}},"Search Params"),l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{value:m.state.location.search||{},defaultExpanded:Object.keys(m.state.location.search||{}).reduce(((e,t)=>(e[t]={},e)),{})}))):null))}));e.TanStackRouterDevtools=function({initialIsOpen:e,panelProps:t={},closeButtonProps:n={},toggleButtonProps:a={},position:r="bottom-left",containerElement:i="footer",router:d}){const s=l.default.useRef(null),m=l.default.useRef(null),[p,g]=c("tanstackRouterDevtoolsOpen",e),[b,v]=c("tanstackRouterDevtoolsHeight",null),[E,x]=h(!1),[w,S]=h(!1),R=y();l.default.useEffect((()=>{x(p??!1)}),[p,E,x]),l.default.useEffect((()=>{const e=m.current;if(e){const t=()=>{e&&E&&(e.style.visibility="visible")},n=()=>{e&&!E&&(e.style.visibility="hidden")};return e.addEventListener("transitionstart",t),e.addEventListener("transitionend",n),()=>{e.removeEventListener("transitionstart",t),e.removeEventListener("transitionend",n)}}}),[E]),l.default[P?"useEffect":"useLayoutEffect"]((()=>{if(E){const e=s.current?.parentElement?.style.paddingBottom,t=()=>{const e=m.current?.getBoundingClientRect().height;s.current?.parentElement&&(s.current.parentElement.style.paddingBottom=`${e}px`)};if(t(),"undefined"!=typeof window)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),s.current?.parentElement&&"string"==typeof e&&(s.current.parentElement.style.paddingBottom=e)}}}),[E]);const{style:I={},...T}=t,{style:D={},onClick:O,...C}=n,{style:A={},onClick:L,...j}=a;return R()?l.default.createElement(i,{ref:s,className:"TanStackRouterDevtools"},l.default.createElement(f,{theme:u},l.default.createElement(M,o({ref:m},T,{router:d,style:{position:"fixed",bottom:"0",right:"0",zIndex:99999,width:"100%",height:b??500,maxHeight:"90%",boxShadow:"0 0 20px rgba(0,0,0,.3)",borderTop:`1px solid ${u.gray}`,transformOrigin:"top",visibility:p?"visible":"hidden",...I,...w?{transition:"none"}:{transition:"all .2s ease"},...E?{opacity:1,pointerEvents:"all",transform:"translateY(0) scale(1)"}:{opacity:0,pointerEvents:"none",transform:"translateY(15px) scale(1.02)"}},isOpen:E,setIsOpen:g,handleDragStart:e=>((e,t)=>{if(0!==t.button)return;S(!0);const n=e?.getBoundingClientRect().height??0,a=t.pageY,r=e=>{const t=a-e.pageY,r=n+t;v(r),g(!(r<70))},l=()=>{S(!1),document.removeEventListener("mousemove",r),document.removeEventListener("mouseUp",l)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",l)})(m.current,e)})),E?l.default.createElement(k,o({type:"button","aria-label":"Close TanStack Router Devtools"},C,{onClick:e=>{g(!1),O&&O(e)},style:{position:"fixed",zIndex:99999,margin:".5em",bottom:0,..."top-right"===r?{right:"0"}:"top-left"===r?{left:"0"}:"bottom-right"===r?{right:"0"}:{left:"0"},...D}}),"Close"):null),E?null:l.default.createElement("button",o({type:"button"},j,{"aria-label":"Open TanStack Router Devtools",onClick:e=>{g(!0),L&&L(e)},style:{appearance:"none",background:"none",border:0,padding:0,position:"fixed",zIndex:99999,display:"inline-flex",fontSize:"1.5em",margin:".5em",cursor:"pointer",width:"fit-content",..."top-right"===r?{top:"0",right:"0"}:"top-left"===r?{top:"0",left:"0"}:"bottom-right"===r?{bottom:"0",right:"0"}:{bottom:"0",left:"0"},...A}}),l.default.createElement(z,{"aria-hidden":!0}))):null},e.TanStackRouterDevtoolsPanel=M,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
22
|
+
function(e){return"/"===e?e:e.replace(/^\/{1,}/,"")}(e.id))," "),i?l.default.createElement("span",{style:{opacity:.3}},i.id):null)),e.children?.length?l.default.createElement("div",{style:{marginLeft:t?0:"1rem",borderLeft:t?"":`solid 1px ${c.grayAlt}`}},[...e.children].sort(((e,t)=>e.rank-t.rank)).map((e=>l.default.createElement(j,{key:e.id,route:e,activeRouteId:n,setActiveRouteId:a})))):null)}const $=l.default.forwardRef((function(e,t){const{isOpen:n=!0,setIsOpen:a,handleDragStart:r,router:i,...s}=e,m=d(),g=[...m.state.pendingMatches,...m.state.matches];!function(e,t){if(!e)throw new Error("Invariant failed")}(m);const[b,y]=u("tanstackRouterDevtoolsShowMatches",!0),[E,k]=u("tanstackRouterDevtoolsActiveRouteId",""),w=l.default.useMemo((()=>g.find((e=>e.routeId===E))),[g,E]),S=Object.keys(m.state.location.search||{}).length;return l.default.createElement(f,{theme:c},l.default.createElement(h,o({ref:t,className:"TanStackRouterDevtoolsPanel"},s),l.default.createElement("style",{dangerouslySetInnerHTML:{__html:`\n\n .TanStackRouterDevtoolsPanel * {\n scrollbar-color: ${c.backgroundAlt} ${c.gray};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n width: 1em;\n height: 1em;\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n background: ${c.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n background: ${c.gray};\n border-radius: .5em;\n border: 3px solid ${c.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel table {\n width: 100%;\n }\n\n .TanStackRouterDevtoolsPanel table tr {\n border-bottom: 2px dotted rgba(255, 255, 255, .2);\n }\n\n .TanStackRouterDevtoolsPanel table tr:last-child {\n border-bottom: none\n }\n\n .TanStackRouterDevtoolsPanel table td {\n padding: .25rem .5rem;\n border-right: 2px dotted rgba(255, 255, 255, .05);\n }\n\n .TanStackRouterDevtoolsPanel table td:last-child {\n border-right: none\n }\n\n `}}),l.default.createElement("div",{style:{position:"absolute",left:0,top:0,width:"100%",height:"4px",marginBottom:"-4px",cursor:"row-resize",zIndex:1e5},onMouseDown:r}),l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${c.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{display:"flex",justifyContent:"start",gap:"1rem",padding:"1rem",alignItems:"center",background:c.backgroundAlt}},l.default.createElement(P,{"aria-hidden":!0}),l.default.createElement("div",{style:{fontSize:"clamp(.8rem, 2vw, 1.3rem)",fontWeight:"bold"}},l.default.createElement("span",{style:{fontWeight:100}},"Devtools"))),l.default.createElement("div",{style:{overflowY:"auto",flex:"1"}},l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{label:"Router",value:m,defaultExpanded:{state:{},context:{}},filterSubEntries:e=>e.filter((e=>"function"!=typeof e.value))})))),l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${c.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{flex:"1 1 auto",overflowY:"auto"}},l.default.createElement("div",{style:{padding:".5em",background:c.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem",fontWeight:"bold"}},"Pathname"," ",m.state.location.maskedLocation?l.default.createElement("div",{style:{padding:".1rem .5rem",background:c.warning,color:"black",borderRadius:".5rem"}},"Masked"):null),l.default.createElement("div",{style:{padding:".5rem",display:"flex",gap:".5rem",alignItems:"center"}},l.default.createElement("code",{style:{opacity:.6}},m.state.location.pathname),m.state.location.maskedLocation?l.default.createElement("code",{style:{color:c.warning,fontWeight:"bold"}},m.state.location.maskedLocation.pathname):null),l.default.createElement("div",{style:{padding:".5em",background:c.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem",fontWeight:"bold"}},l.default.createElement("button",{type:"button",onClick:()=>{y(!1)},disabled:!b,style:{appearance:"none",opacity:b?.5:1,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Routes"),"/",l.default.createElement("button",{type:"button",onClick:()=>{y(!0)},disabled:b,style:{appearance:"none",opacity:b?1:.5,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Matches")),b?l.default.createElement("div",null,("pending"===m.state.status?m.state.pendingMatches:m.state.matches).map(((e,t)=>l.default.createElement("div",{key:e.routeId||t,role:"button","aria-label":`Open match details for ${e.routeId}`,onClick:()=>k(E===e.routeId?"":e.routeId),style:{display:"flex",borderBottom:`solid 1px ${c.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===w?"rgba(255,255,255,.1)":void 0}},l.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:p(e,c),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),l.default.createElement(x,{style:{padding:".5em",fontSize:"0.7rem"}},`${e.id}`))))):l.default.createElement(j,{route:m.routeTree,isRoot:!0,activeRouteId:E,setActiveRouteId:k}))),w?l.default.createElement(v,null,l.default.createElement("div",{style:{padding:".5em",background:c.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Match Details"),l.default.createElement("div",null,l.default.createElement("table",null,l.default.createElement("tbody",null,l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"ID"),l.default.createElement("td",null,l.default.createElement(x,{style:{lineHeight:"1.8em"}},JSON.stringify(w.id,null,2)))),l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"Status"),l.default.createElement("td",null,w.status)),l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"Last Updated"),l.default.createElement("td",null,w.updatedAt?new Date(w.updatedAt).toLocaleTimeString():"N/A"))))),w.loaderData?l.default.createElement(l.default.Fragment,null,l.default.createElement("div",{style:{background:c.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Loader Data"),l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{label:"loaderData",value:w.loaderData,defaultExpanded:{}}))):null,l.default.createElement("div",{style:{background:c.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Explorer"),l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{label:"Match",value:w,defaultExpanded:{}}))):null,S?l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${c.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{padding:".5em",background:c.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1,fontWeight:"bold"}},"Search Params"),l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{value:m.state.location.search||{},defaultExpanded:Object.keys(m.state.location.search||{}).reduce(((e,t)=>(e[t]={},e)),{})}))):null))}));e.TanStackRouterDevtools=function({initialIsOpen:e,panelProps:t={},closeButtonProps:n={},toggleButtonProps:a={},position:r="bottom-left",containerElement:i="footer",router:d}){const s=l.default.useRef(null),m=l.default.useRef(null),[p,g]=u("tanstackRouterDevtoolsOpen",e),[b,h]=u("tanstackRouterDevtoolsHeight",null),[v,x]=E(!1),[w,S]=E(!1),R=y();l.default.useEffect((()=>{x(p??!1)}),[p,v,x]),l.default.useEffect((()=>{const e=m.current;if(e){const t=()=>{e&&v&&(e.style.visibility="visible")},n=()=>{e&&!v&&(e.style.visibility="hidden")};return e.addEventListener("transitionstart",t),e.addEventListener("transitionend",n),()=>{e.removeEventListener("transitionstart",t),e.removeEventListener("transitionend",n)}}}),[v]),l.default[z?"useEffect":"useLayoutEffect"]((()=>{if(v){const e=s.current?.parentElement?.style.paddingBottom,t=()=>{const e=m.current?.getBoundingClientRect().height;s.current?.parentElement&&(s.current.parentElement.style.paddingBottom=`${e}px`)};if(t(),"undefined"!=typeof window)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),s.current?.parentElement&&"string"==typeof e&&(s.current.parentElement.style.paddingBottom=e)}}}),[v]);const{style:I={},...D}=t,{style:T={},onClick:O,...C}=n,{style:A={},onClick:L,...j}=a;return R()?l.default.createElement(i,{ref:s,className:"TanStackRouterDevtools"},l.default.createElement(f,{theme:c},l.default.createElement($,o({ref:m},D,{router:d,style:{position:"fixed",bottom:"0",right:"0",zIndex:99999,width:"100%",height:b??500,maxHeight:"90%",boxShadow:"0 0 20px rgba(0,0,0,.3)",borderTop:`1px solid ${c.gray}`,transformOrigin:"top",visibility:p?"visible":"hidden",...I,...w?{transition:"none"}:{transition:"all .2s ease"},...v?{opacity:1,pointerEvents:"all",transform:"translateY(0) scale(1)"}:{opacity:0,pointerEvents:"none",transform:"translateY(15px) scale(1.02)"}},isOpen:v,setIsOpen:g,handleDragStart:e=>((e,t)=>{if(0!==t.button)return;S(!0);const n=e?.getBoundingClientRect().height??0,a=t.pageY,r=e=>{const t=a-e.pageY,r=n+t;h(r),g(!(r<70))},l=()=>{S(!1),document.removeEventListener("mousemove",r),document.removeEventListener("mouseUp",l)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",l)})(m.current,e)})),v?l.default.createElement(k,o({type:"button","aria-label":"Close TanStack Router Devtools"},C,{onClick:e=>{g(!1),O&&O(e)},style:{position:"fixed",zIndex:99999,margin:".5em",bottom:0,..."top-right"===r?{right:"0"}:"top-left"===r?{left:"0"}:"bottom-right"===r?{right:"0"}:{left:"0"},...T}}),"Close"):null),v?null:l.default.createElement("button",o({type:"button"},j,{"aria-label":"Open TanStack Router Devtools",onClick:e=>{g(!0),L&&L(e)},style:{appearance:"none",background:"none",border:0,padding:0,position:"fixed",zIndex:99999,display:"inline-flex",fontSize:"1.5em",margin:".5em",cursor:"pointer",width:"fit-content",..."top-right"===r?{top:"0",right:"0"}:"top-left"===r?{top:"0",left:"0"}:"bottom-right"===r?{bottom:"0",right:"0"}:{bottom:"0",left:"0"},...A}}),l.default.createElement(P,{"aria-hidden":!0}))):null},e.TanStackRouterDevtoolsPanel=$,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
23
23
|
//# sourceMappingURL=index.production.js.map
|