@firsthandjs/devtools 0.7.0 → 0.7.1

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.
@@ -1,7 +1,7 @@
1
- var m=new WeakMap,L=new WeakMap,s=new WeakMap,v=new WeakMap,w=new WeakMap,d=[],i=[],T=100,l=null,j=200,p=new Set,a=null,b=null,u=null,f=null,c=null,_=1,y=/@firsthandjs|[\\/]node_modules[\\/]|[\\/]packages[\\/](core|dom|deep|devtools|jsx-runtime|data|router|styled|testing)[\\/]src[\\/]/;function D(){let t=(new Error().stack??"").split(`
2
- `).slice(1),e=[];for(let n of t){if(y.test(n))continue;let o=n.trim().replace(/^at\s+/,"");if(o!==""&&e.push(o),e.length===6)break}return e}function E(){let e=(new Error().stack??"").split(`
3
- `).slice(1).find(o=>!y.test(o))??"unknown",n=/\(?([^()\s]+:\d+:\d+)\)?$/.exec(e.trim());return n===null?e.trim():n[1]}function U(){if(c!==null)return;let t={attached:!0,label(e,n,o){m.set(e,{kind:n,name:o===""?E():o})},cause(e){f=e,l={update:{at:Math.round(performance.now()),source:h(e),ran:[],stack:D()},effects:[]},i.push(l),i.length>T&&i.shift()},root(e){p.add(new WeakRef(e))},component(e,n){w.set(e,n)},running(e){a=e,e===null&&b?.(),e!==null&&f!==null&&(v.set(e,f),l?.update.ran.push(h(e)),l?.effects.push(e))},query(e,n,o){d.push({event:e,key:n,tags:o}),d.length>j&&d.shift()},part(e,n){if(a===null)return;L.set(a,{node:e,property:n});let o=s.get(e);o===void 0&&(o=new Set,s.set(e,o)),o.add(a)}};globalThis.__FIRSTHAND_DEVTOOLS__=t,c=t,u=e=>{e.ctrlKey&&e.shiftKey&&e.key.toLowerCase()==="f"&&(e.preventDefault(),import("./chunk-LR7RSYJF.js").then(n=>{n.toggle()}))},globalThis.addEventListener("keydown",u),console.info("[firsthand] devtools attached \u2014 press Ctrl+Shift+F for the panel, or call __FIRSTHAND__.panel()"),globalThis.__FIRSTHAND__={chain:A,inspect:C,causeOf:K,stack:F,timeline:W,cells:I,queries:M,detach:S,panel:e=>{import("./chunk-LR7RSYJF.js").then(n=>{e===void 0?n.open():n.show(e)})}}}function S(){c!==null&&(c.attached=!1),globalThis.__FIRSTHAND_DEVTOOLS__=void 0,delete globalThis.__FIRSTHAND__,u!==null&&(globalThis.removeEventListener("keydown",u),u=null),c=null,a=null,f=null,l=null,i.length=0,b=null,d.length=0,p.clear()}function h(t){let e=L.get(t);if(e!==void 0){let o=e.node;return`${(o.tagName??o.nodeName??"node").toLowerCase()}.${e.property}`}let n=m.get(t);return n===void 0?(t.flags&_)===0?"signal":"computed":n.name}function G(t){return L.has(t)?"part":m.get(t)?.kind??((t.flags&_)===0?"signal":"computed")}function g(t,e,n){let o={kind:G(t),name:h(t),value:t.v,dependencies:[],dependents:[]};if(e>0)for(let r=t.deps;r!==void 0;r=r.nextDep)o.dependencies.push(g(r.dep,e-1,0));if(n>0)for(let r=t.subs;r!==void 0;r=r.nextSub)o.dependents.push(g(r.sub,0,n-1));return o}function R(){let t=[];for(let e of p){let n=e.deref();n===void 0?p.delete(e):t.push(n)}return t}function x(t,e){t.cells!==null&&e.push(...t.cells);for(let n=t.head;n!==null;n=n.next)x(n,e)}function I(){let t=[];for(let e of R())x(e,t);return t.map(e=>g(e,1,1))}function C(t,e=8){let n=s.get(t);return n===void 0?[]:[...n].map(o=>g(o,e,0))}function A(t){let e=C(t);return e.length===0?"Nothing reactive writes this node.":e.map(n=>H(O(n)).join(`
1
+ var m=new WeakMap,L=new WeakMap,i=new WeakMap,N=new WeakMap,v=new WeakMap,d=[],r=[],T=100,l=null,j=200,p=new Set,a=null,b=null,u=null,f=null,c=null,w=1,_=/@firsthandjs|[\\/]node_modules[\\/]|[\\/]packages[\\/](core|dom|deep|devtools|jsx-runtime|data|router|styled|testing)[\\/]src[\\/]/;function D(){let t=(new Error().stack??"").split(`
2
+ `).slice(1),e=[];for(let n of t){if(_.test(n))continue;let o=n.trim().replace(/^at\s+/,"");if(o!==""&&e.push(o),e.length===6)break}return e}function E(){let e=(new Error().stack??"").split(`
3
+ `).slice(1).find(o=>!_.test(o))??"unknown",n=/\(?([^()\s]+:\d+:\d+)\)?$/.exec(e.trim());return n===null?e.trim():n[1]}function U(){if(c!==null)return;let t={attached:!0,label(e,n,o){m.set(e,{kind:n,name:o===""?E():o})},cause(e){f=e,l={update:{at:Math.round(performance.now()),source:h(e),ran:[],stack:D()},effects:[]},r.push(l),r.length>T&&r.shift()},root(e){p.add(new WeakRef(e))},component(e,n){v.set(e,n)},running(e){a=e,e===null&&b?.(),e!==null&&f!==null&&(N.set(e,f),l?.update.ran.push(h(e)),l?.effects.push(e))},query(e,n,o){d.push({event:e,key:n,tags:o}),d.length>j&&d.shift()},part(e,n){if(a===null)return;L.set(a,{node:e,property:n});let o=i.get(e);o===void 0&&(o=new Set,i.set(e,o)),o.add(a)}};globalThis.__FIRSTHAND_DEVTOOLS__=t,c=t,u=e=>{e.ctrlKey&&e.shiftKey&&e.key.toLowerCase()==="f"&&(e.preventDefault(),import("./chunk-BCXJOY33.js").then(n=>{n.toggle()}))},globalThis.addEventListener("keydown",u),console.info("[firsthand] devtools attached \u2014 press Ctrl+Shift+F for the panel, or call __FIRSTHAND__.panel()"),globalThis.__FIRSTHAND__={chain:A,inspect:C,causeOf:K,stack:F,timeline:W,cells:I,queries:M,detach:S,panel:e=>{import("./chunk-BCXJOY33.js").then(n=>{e===void 0?n.open():n.show(e)})}}}function S(){c!==null&&(c.attached=!1),globalThis.__FIRSTHAND_DEVTOOLS__=void 0,delete globalThis.__FIRSTHAND__,u!==null&&(globalThis.removeEventListener("keydown",u),u=null),c=null,a=null,f=null,l=null,r.length=0,b=null,d.length=0,p.clear()}function h(t){let e=L.get(t);if(e!==void 0){let o=e.node;return`${(o.tagName??o.nodeName??"node").toLowerCase()}.${e.property}`}let n=m.get(t);return n===void 0?(t.flags&w)===0?"signal":"computed":n.name}function G(t){return L.has(t)?"part":m.get(t)?.kind??((t.flags&w)===0?"signal":"computed")}function g(t,e,n){let o={kind:G(t),name:h(t),value:t.v,dependencies:[],dependents:[]};if(e>0)for(let s=t.deps;s!==void 0;s=s.nextDep)o.dependencies.push(g(s.dep,e-1,0));if(n>0)for(let s=t.subs;s!==void 0;s=s.nextSub)o.dependents.push(g(s.sub,0,n-1));return o}function R(){let t=[];for(let e of p){let n=e.deref();n===void 0?p.delete(e):t.push(n)}return t}function x(t,e){t.cells!==null&&e.push(...t.cells);for(let n=t.head;n!==null;n=n.next)x(n,e)}function I(){let t=[];for(let e of R())x(e,t);return t.map(e=>g(e,1,1))}function C(t,e=8){let n=i.get(t);return n===void 0?[]:[...n].map(o=>g(o,e,0))}function A(t){let e=C(t);return e.length===0?"Nothing reactive writes this node.":e.map(n=>H(O(n)).join(`
4
4
  \u2193
5
5
  `)).join(`
6
6
 
7
- `)}function O(t){let e=[];for(let n of t.dependencies){let o=O(n);o.length>e.length&&(e=o)}return[...e,t]}function H(t){return t.map(e=>e.kind==="computed"?`computed(${e.name})`:e.name)}function K(t){let e=s.get(t);if(e===void 0)return null;for(let n of e){let o=v.get(n);if(o!==void 0)return h(o)}return null}function M(){return[...d]}function q(t){b=t}function F(t){let e=s.get(t);if(e===void 0)return[];let n=[];for(let o of e){let r=o.scope??null,k=[];for(;r!==null;){let N=w.get(r);N!==void 0&&k.unshift(N),r=r.parent}k.length>n.length&&(n.length=0,n.push(...k))}return n}function W(t){if(t===void 0)return i.map(n=>n.update);let e=s.get(t);return e===void 0?[]:i.filter(n=>n.effects.some(o=>e.has(o))).map(n=>n.update)}export{U as a,S as b,I as c,C as d,A as e,O as f,K as g,M as h,q as i,F as j,W as k};
7
+ `)}function O(t){let e=[];for(let n of t.dependencies){let o=O(n);o.length>e.length&&(e=o)}return[...e,t]}function H(t){return t.map(e=>e.kind==="computed"?`computed(${e.name})`:e.name)}function K(t){let e=i.get(t);if(e===void 0)return null;for(let n of e){let o=N.get(n);if(o!==void 0)return h(o)}return null}function M(){return[...d]}function q(t){b=t}function F(t){let e=i.get(t);if(e===void 0)return[];let n=[];for(let o of e){let s=o.scope??null,k=[];for(;s!==null;){let y=v.get(s);y!==void 0&&k.unshift(y),s=s.parent}k.length>n.length&&(n.length=0,n.push(...k))}return n}function W(t){if(t===void 0)return r.map(n=>n.update);let e=i.get(t);return e===void 0?[]:r.filter(n=>n.effects.some(o=>e.has(o))).map(n=>n.update)}export{U as a,S as b,I as c,C as d,A as e,O as f,K as g,M as h,q as i,F as j,W as k};
@@ -1,4 +1,4 @@
1
- import{d as $,f as H,g as q,h as C,i as L,j as A,k as T}from"./chunk-HDNA4SLC.js";var J="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";function Q(e){let t=[],r=0,n=0;for(let o of e){let a=J.indexOf(o),i=a&32;if(n+=(a&31)<<r,i===0){let s=n&1;n>>=1,t.push(s===1?-n:n),r=0,n=0}else r+=5}return t}function W(e){let t=[],r=0,n=0,o=0;for(let[a,i]of e.mappings.split(";").entries()){let s=0;for(let u of i.split(",")){if(u==="")continue;let p=Q(u);if(s+=p[0],p.length<4)continue;r+=p[1],n+=p[2],o+=p[3];let m=e.sources[r];m!=null&&t.push({generatedLine:a,generatedColumn:s,source:m,originalLine:n,originalColumn:o})}}return t}var P=new Map,B=/\/\/[#@]\s*sourceMappingURL=data:application\/json;(?:charset=[^;]+;)?base64,([\w+/=]+)/;async function D(e){let t=P.get(e);if(t!==void 0)return t;let r=(async()=>{try{let o=await(await fetch(e)).text(),a=B.exec(o);if(a===null)return null;let i=JSON.parse(atob(a[1]));return W(i)}catch{return null}})();return P.set(e,r),r}function Y(e,t,r){let n=null;for(let o of e){if(o.generatedLine>t||o.generatedLine===t&&o.generatedColumn>r)break;o.generatedLine===t&&(n=o)}return n}async function O(e){let t=/^(.*?)\(?([^\s()]+):(\d+):(\d+)\)?$/.exec(e.trim().replace(/^at\s+/,""));if(t===null)return e;let[,r,n,o,a]=t;if(!/^https?:\/\//.test(n))return e;let i=await D(n);if(i===null)return e;let s=Y(i,Number(o)-1,Number(a)-1);if(s===null)return e;let p=`${s.source.slice(Math.max(s.source.lastIndexOf("/"),s.source.lastIndexOf("\\"))+1)}:${String(s.originalLine+1)}:${String(s.originalColumn+1)}`;return r.trim()===""?p:`${r.trim()} (${p})`}var K=`
1
+ import{d as $,f as H,g as q,h as C,i as L,j as A,k as T}from"./chunk-7MQSJYVB.js";var J="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";function Q(e){let t=[],r=0,n=0;for(let o of e){let a=J.indexOf(o),i=a&32;if(n+=(a&31)<<r,i===0){let s=n&1;n>>=1,t.push(s===1?-n:n),r=0,n=0}else r+=5}return t}function W(e){let t=[],r=0,n=0,o=0;for(let[a,i]of e.mappings.split(";").entries()){let s=0;for(let u of i.split(",")){if(u==="")continue;let p=Q(u);if(s+=p[0],p.length<4)continue;r+=p[1],n+=p[2],o+=p[3];let m=e.sources[r];m!=null&&t.push({generatedLine:a,generatedColumn:s,source:m,originalLine:n,originalColumn:o})}}return t}var P=new Map,B=/\/\/[#@]\s*sourceMappingURL=data:application\/json;(?:charset=[^;]+;)?base64,([\w+/=]+)/;async function D(e){let t=P.get(e);if(t!==void 0)return t;let r=(async()=>{try{let o=await(await fetch(e)).text(),a=B.exec(o);if(a===null)return null;let i=JSON.parse(atob(a[1]));return W(i)}catch{return null}})();return P.set(e,r),r}function Y(e,t,r){let n=null;for(let o of e){if(o.generatedLine>t||o.generatedLine===t&&o.generatedColumn>r)break;o.generatedLine===t&&(n=o)}return n}async function O(e){let t=/^(.*?)\(?([^\s()]+):(\d+):(\d+)\)?$/.exec(e.trim().replace(/^at\s+/,""));if(t===null)return e;let[,r,n,o,a]=t;if(!/^https?:\/\//.test(n))return e;let i=await D(n);if(i===null)return e;let s=Y(i,Number(o)-1,Number(a)-1);if(s===null)return e;let p=`${s.source.slice(Math.max(s.source.lastIndexOf("/"),s.source.lastIndexOf("\\"))+1)}:${String(s.originalLine+1)}:${String(s.originalColumn+1)}`;return r.trim()===""?p:`${r.trim()} (${p})`}var K=`
2
2
  :host { all: initial; }
3
3
  .panel {
4
4
  position: fixed; right: 16px; bottom: 16px; z-index: 2147483647;
@@ -83,4 +83,4 @@ button[aria-pressed='true'] { background: #3d5afe; border-color: #3d5afe; color:
83
83
  .event .invalidated { color: #ffcb6b; }
84
84
  .event .dropped { color: #f07178; }
85
85
  .event .tags { color: #9ecbff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
86
- `,b="firsthand-devtools-outline",d=null,E=null,h=null,v=!1,g="graph",k=null,c=null,M=new Map,w=null;function y(e,t){let r=document.createElement("button");return r.textContent=e,r.setAttribute("aria-pressed","false"),r.addEventListener("click",t),r}function l(e,t,r){let n=document.createElement(e);return n.className=t,n.textContent=r,n}function V(e,t){let r=document.createElement("div");r.className=`box ${e.kind}${t?" trigger":""}`,r.append(l("span","tag",e.kind)),r.append(x("span","label",e.name));let n=e.value;return n!==void 0&&(typeof n!="object"||n===null)&&r.append(l("span","val",JSON.stringify(n))),r}function X(e,t,r){let n=H(e),o=document.createElement("div");o.className="flow";for(let[a,i]of n.entries())o.append(V(i,i.name===t)),a<n.length-1&&o.append(l("div","arrow","\u2193"));r.append(o)}function Z(e){let t=document.createElement("div");if(t.className="scroll",e.append(t),h===null){t.append(l("p","empty","Nothing selected."),l("p","hint","Press \u201CPick\u201D and click an element."));return}let r=A(h);if(r.length>0){t.append(l("p","hint","Component"));let i=document.createElement("div");i.className="crumbs";for(let s of r)i.append(l("span","crumb",s));t.append(i)}let n=$(h);if(n.length===0){t.append(l("p","empty","Nothing reactive writes this node."));return}let o=q(h);t.append(l("p","hint","Path"));for(let i of n)X(i,o,t);t.append(l("p","cause",o===null?"Has not run since anything changed.":`Triggered by ${o}`));let a=T(h).slice(-6).reverse();a.length>0&&(t.append(l("p","hint",`Last ${String(a.length)} updates`)),t.append(F(a))),c!==null&&e.append(N(S(c)))}function F(e){M.clear();let t=Math.max(1,...e.map(n=>n.ran.length)),r=document.createElement("div");r.className="track";for(let n of e){let o=document.createElement("div");o.className="tick",o.setAttribute("aria-selected",String(n===c)),M.set(o,n),o.append(l("span","when",`${String(n.at)}ms`)),o.append(x("span","who",n.source));let a=document.createElement("span");a.className=n.ran.length===0?"bar none":"bar",a.style.width=`${String(Math.round(n.ran.length/t*60)+6)}px`,a.title=`woke ${String(n.ran.length)} of ${String(t)}`,o.append(a);let i=n.stack[0];i!==void 0&&o.append(x("span","where",i,_)),o.addEventListener("click",()=>{I(n)}),r.append(o)}return r}function U(e){let t=/^(.*?)\(?([^()\s]+):(\d+):(\d+)\)?$/.exec(e);if(t===null)return e;let[,r,n,o,a]=t,i=Math.max(n.lastIndexOf("/"),n.lastIndexOf("\\")),s=n.slice(i+1),u=s.indexOf("?"),m=`${(u===-1?s:s.slice(0,u)).trim()}:${o}:${a}`;return r.trim()===""?m:`${r.trim()} (${m})`}function _(e){let t=/\(([^()]+)\)\s*$/.exec(e);return(t===null?e:t[1]).trim()}function x(e,t,r,n=o=>o){let o=l(e,t,n(U(r)));return O(r).then(a=>{o.textContent=n(U(a))}),o}function N(e){return e.classList.add("pinned"),e}function S(e){let t=document.createElement("div");t.className="detail";let r=document.createElement("div");r.className="detail-head",r.append(x("p","hint",e.source,o=>`${o} woke ${String(e.ran.length)}`));let n=y("\xD7",()=>{I(e)});n.setAttribute("aria-label","Close detail"),r.append(n),t.append(r);for(let o of e.ran)t.append(x("div","ran",o));if(e.stack.length>0){t.append(l("p","hint","Written from"));let o=document.createElement("div");o.className="stack";for(let a of e.stack)o.append(x("div","",a));t.append(o)}return t}function I(e){c=c===e?null:e;for(let[r,n]of M)r.setAttribute("aria-selected",String(n===c));let t=E?.body;t!==void 0&&(t.querySelector(".pinned")?.remove(),c!==null&&t.append(N(S(c))))}function ee(e){let t=T();if(t.length===0){e.append(l("p","empty","Nothing has changed yet."));return}let r=document.createElement("div");r.className="scroll",e.append(r);let n=[...new Set(t.map(a=>a.source))];if(n.length>1){let a=document.createElement("div");a.className="filters";for(let i of n){let s=x("span","chip",i);s.setAttribute("aria-pressed",String(w===i)),s.addEventListener("click",()=>{w=w===i?null:i,c=null,f()}),a.append(s)}r.append(a)}let o=w===null?t:t.filter(a=>a.source===w);r.append(l("p","hint",`${String(o.length)} of ${String(t.length)} updates`)),r.append(F([...o].reverse())),c!==null&&e.append(N(S(c)))}function te(e){let t=document.createElement("div");t.className="scroll",e.append(t);let r=C();if(r.length===0){t.append(l("p","empty","No resource has done anything yet."));return}for(let n of[...r].reverse()){let o=document.createElement("div");o.className="event",o.append(l("span",n.event,n.event)),o.append(l("span","tags",n.tags.join(", "))),t.append(o)}}function f(){if(E===null)return;let{body:e,pick:t,graphTab:r,queryTab:n,timelineTab:o}=E,a=e.querySelector(".scroll")?.scrollTop??0;r.setAttribute("aria-pressed",String(g==="graph")),n.setAttribute("aria-pressed",String(g==="queries")),o.setAttribute("aria-pressed",String(g==="timeline")),t.setAttribute("aria-pressed",String(v)),e.textContent="",g==="graph"?Z(e):g==="queries"?te(e):ee(e);let i=e.querySelector(".scroll");i!==null&&(i.scrollTop=a)}function G(e){!v||d===null||e.composedPath().includes(d)||(e.preventDefault(),e.stopPropagation(),h=e.target,v=!1,document.querySelector(`.${b}`)?.classList.remove(b),f())}function z(e){if(!v)return;document.querySelector(`.${b}`)?.classList.remove(b);let t=e.target;t!==null&&t!==d&&t.classList.add(b)}function j(){if(d!==null)return;d=document.createElement("div"),d.setAttribute("data-firsthand-devtools","");let e=d.attachShadow({mode:"open"}),t=document.createElement("style");t.textContent=K;let r=document.createElement("style");r.textContent=`.${b} { outline: 2px solid #3d5afe !important; outline-offset: 1px; }`,document.head.append(r);let n=document.createElement("div");n.className="panel";let o=document.createElement("header");o.append(l("strong","","Firsthand"));let a=y("Pick",()=>{v=!v,f()});a.dataset.pick="";let i=y("Graph",()=>{g="graph",f()});i.dataset.tab="graph";let s=y("Queries",()=>{g="queries",f()});s.dataset.tab="queries";let u=y("Timeline",()=>{g="timeline",f()});u.dataset.tab="timeline";let p=y("\xD7",R);p.setAttribute("aria-label","Close"),o.append(a,i,s,u,p);let m=document.createElement("div");m.className="body",n.append(o,m),e.append(t,n),document.body.append(d),E={body:m,pick:a,graphTab:i,queryTab:s,timelineTab:u},document.addEventListener("click",G,!0),document.addEventListener("mouseover",z,!0),L(()=>{c!==null||k!==null||(k=requestAnimationFrame(()=>{k=null,f()}))}),f()}function R(){L(null),k!==null&&(cancelAnimationFrame(k),k=null),document.removeEventListener("click",G,!0),document.removeEventListener("mouseover",z,!0),document.querySelector(`.${b}`)?.classList.remove(b),d?.remove(),d=null,E=null,c=null,w=null,v=!1,h=null,g="graph"}function ae(){d===null?j():R()}function ie(e){j(),h=e,g="graph",f()}function se(){f()}export{R as close,j as open,se as refresh,ie as show,ae as toggle};
86
+ `,b="firsthand-devtools-outline",d=null,E=null,h=null,v=!1,f="graph",k=null,c=null,M=new Map,w=null;function y(e,t){let r=document.createElement("button");return r.textContent=e,r.setAttribute("aria-pressed","false"),r.addEventListener("click",t),r}function l(e,t,r){let n=document.createElement(e);return n.className=t,n.textContent=r,n}function V(e,t){let r=document.createElement("div");r.className=`box ${e.kind}${t?" trigger":""}`,r.append(l("span","tag",e.kind)),r.append(x("span","label",e.name));let n=e.value;return n!==void 0&&(typeof n!="object"||n===null)&&r.append(l("span","val",JSON.stringify(n))),r}function X(e,t,r){let n=H(e),o=document.createElement("div");o.className="flow";for(let[a,i]of n.entries())o.append(V(i,i.name===t)),a<n.length-1&&o.append(l("div","arrow","\u2193"));r.append(o)}function Z(e){let t=document.createElement("div");if(t.className="scroll",e.append(t),h===null){t.append(l("p","empty","Nothing selected."),l("p","hint","Press \u201CPick\u201D and click an element."));return}let r=A(h);if(r.length>0){t.append(l("p","hint","Component"));let i=document.createElement("div");i.className="crumbs";for(let s of r)i.append(l("span","crumb",s));t.append(i)}let n=$(h);if(n.length===0){t.append(l("p","empty","Nothing reactive writes this node."));return}let o=q(h);t.append(l("p","hint","Path"));for(let i of n)X(i,o,t);t.append(l("p","cause",o===null?"Has not run since anything changed.":`Triggered by ${o}`));let a=T(h).slice(-6).reverse();a.length>0&&(t.append(l("p","hint",`Last ${String(a.length)} updates`)),t.append(F(a))),c!==null&&e.append(N(S(c)))}function F(e){M.clear();let t=Math.max(1,...e.map(n=>n.ran.length)),r=document.createElement("div");r.className="track";for(let n of e){let o=document.createElement("div");o.className="tick",o.setAttribute("aria-selected",String(n===c)),M.set(o,n),o.append(l("span","when",`${String(n.at)}ms`)),o.append(x("span","who",n.source));let a=document.createElement("span");a.className=n.ran.length===0?"bar none":"bar",a.style.width=`${String(Math.round(n.ran.length/t*60)+6)}px`,a.title=`woke ${String(n.ran.length)} of ${String(t)}`,o.append(a);let i=n.stack[0];i!==void 0&&o.append(x("span","where",i,_)),o.addEventListener("click",()=>{I(n)}),r.append(o)}return r}function U(e){let t=/^(.*?)\(?([^()\s]+):(\d+):(\d+)\)?$/.exec(e);if(t===null)return e;let[,r,n,o,a]=t,i=Math.max(n.lastIndexOf("/"),n.lastIndexOf("\\")),s=n.slice(i+1),u=s.indexOf("?"),m=`${(u===-1?s:s.slice(0,u)).trim()}:${o}:${a}`;return r.trim()===""?m:`${r.trim()} (${m})`}function _(e){let t=/\(([^()]+)\)\s*$/.exec(e);return(t===null?e:t[1]).trim()}function x(e,t,r,n=o=>o){let o=l(e,t,n(U(r)));return O(r).then(a=>{o.textContent=n(U(a))}),o}function N(e){return e.classList.add("pinned"),e}function S(e){let t=document.createElement("div");t.className="detail";let r=document.createElement("div");r.className="detail-head",r.append(x("p","hint",e.source,o=>`${o} woke ${String(e.ran.length)}`));let n=y("\xD7",()=>{I(e)});n.setAttribute("aria-label","Close detail"),r.append(n),t.append(r);for(let o of e.ran)t.append(x("div","ran",o));if(e.stack.length>0){t.append(l("p","hint","Written from"));let o=document.createElement("div");o.className="stack";for(let a of e.stack)o.append(x("div","",a));t.append(o)}return t}function I(e){c=c===e?null:e;for(let[r,n]of M)r.setAttribute("aria-selected",String(n===c));let t=E?.body;t!==void 0&&(t.querySelector(".pinned")?.remove(),c!==null&&t.append(N(S(c))))}function ee(e){let t=T();if(t.length===0){e.append(l("p","empty","Nothing has changed yet."));return}let r=document.createElement("div");r.className="scroll",e.append(r);let n=[...new Set(t.map(a=>a.source))];if(n.length>1){let a=document.createElement("div");a.className="filters";for(let i of n){let s=x("span","chip",i);s.setAttribute("aria-pressed",String(w===i)),s.addEventListener("click",()=>{w=w===i?null:i,c=null,g()}),a.append(s)}r.append(a)}let o=w===null?t:t.filter(a=>a.source===w);r.append(l("p","hint",`${String(o.length)} of ${String(t.length)} updates`)),r.append(F([...o].reverse())),c!==null&&e.append(N(S(c)))}function te(e){let t=document.createElement("div");t.className="scroll",e.append(t);let r=C();if(r.length===0){t.append(l("p","empty","No resource has done anything yet."));return}for(let n of[...r].reverse()){let o=document.createElement("div");o.className="event",o.append(l("span",n.event,n.event)),o.append(l("span","tags",n.tags.join(", "))),t.append(o)}}function g(){if(E===null)return;let{body:e,pick:t,graphTab:r,queryTab:n,timelineTab:o}=E,a=e.querySelector(".scroll")?.scrollTop??0;r.setAttribute("aria-pressed",String(f==="graph")),n.setAttribute("aria-pressed",String(f==="queries")),o.setAttribute("aria-pressed",String(f==="timeline")),t.setAttribute("aria-pressed",String(v)),e.textContent="",f==="graph"?Z(e):f==="queries"?te(e):ee(e);let i=e.querySelector(".scroll");i!==null&&(i.scrollTop=a)}function G(e){!v||d===null||e.composedPath().includes(d)||(e.preventDefault(),e.stopPropagation(),h=e.target,v=!1,document.querySelector(`.${b}`)?.classList.remove(b),g())}function z(e){if(!v)return;document.querySelector(`.${b}`)?.classList.remove(b);let t=e.target;t!==null&&t!==d&&t.classList.add(b)}function j(){if(d!==null)return;d=document.createElement("div"),d.setAttribute("data-firsthand-devtools","");let e=d.attachShadow({mode:"open"}),t=document.createElement("style");t.textContent=K;let r=document.createElement("style");r.textContent=`.${b} { outline: 2px solid #3d5afe !important; outline-offset: 1px; }`,document.head.append(r);let n=document.createElement("div");n.className="panel";let o=document.createElement("header");o.append(l("strong","","Firsthand"));let a=y("Pick",()=>{v=!v,g()});a.dataset.pick="";let i=y("Graph",()=>{f="graph",g()});i.dataset.tab="graph";let s=y("Queries",()=>{f="queries",g()});s.dataset.tab="queries";let u=y("Timeline",()=>{f="timeline",g()});u.dataset.tab="timeline";let p=y("\xD7",R);p.setAttribute("aria-label","Close"),o.append(a,i,s,u,p);let m=document.createElement("div");m.className="body",n.append(o,m),e.append(t,n),document.body.append(d),E={body:m,pick:a,graphTab:i,queryTab:s,timelineTab:u},document.addEventListener("click",G,!0),document.addEventListener("mouseover",z,!0),L(()=>{c!==null||k!==null||(k=requestAnimationFrame(()=>{k=null,g()}))}),g()}function R(){L(null),k!==null&&(cancelAnimationFrame(k),k=null),document.removeEventListener("click",G,!0),document.removeEventListener("mouseover",z,!0),document.querySelector(`.${b}`)?.classList.remove(b),d?.remove(),d=null,E=null,c=null,w=null,v=!1,h=null,f="graph"}function ae(){d===null?j():R()}function ie(e){j(),h=e,f="graph",g()}function se(){g()}export{R as close,j as open,se as refresh,ie as show,ae as toggle};
package/dist/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export type NodeKind = 'signal' | 'computed' | 'effect' | 'part';
6
6
  * This is the thing the graph cannot answer on its own. The graph says what
7
7
  * depends on what; an update says what actually happened, in order, at a time.
8
8
  */
9
- export interface Update {
9
+ export type Update = {
10
10
  /** Milliseconds since the page loaded, so entries can be read as a sequence. */
11
11
  at: number;
12
12
  /** What was written. */
@@ -26,17 +26,17 @@ export interface Update {
26
26
  * else reading this should do the same.
27
27
  */
28
28
  stack: string[];
29
- }
29
+ };
30
30
  /** Something a resource did. */
31
- export interface QueryEvent {
31
+ export type QueryEvent = {
32
32
  event: 'created' | 'invalidated' | 'dropped';
33
33
  /** The cache key: its tags and variables, as the client derived them. */
34
34
  key: string;
35
35
  /** The tags the entry carries, which is what an invalidation matches on. */
36
36
  tags: readonly string[];
37
- }
37
+ };
38
38
  /** One node of the graph, as devtools describe it. */
39
- export interface GraphNode {
39
+ export type GraphNode = {
40
40
  kind: NodeKind;
41
41
  /** `order.status`, `isEditable`, `button.disabled`, or a creation site. */
42
42
  name: string;
@@ -46,7 +46,7 @@ export interface GraphNode {
46
46
  dependencies: GraphNode[];
47
47
  /** What reads this node. */
48
48
  dependents: GraphNode[];
49
- }
49
+ };
50
50
  /**
51
51
  * Starts recording.
52
52
  *
@@ -57,7 +57,7 @@ export interface GraphNode {
57
57
  */
58
58
  export declare function attach(): void;
59
59
  /** What `attach()` puts on `globalThis` for the browser console to use. */
60
- export interface Console {
60
+ export type Console = {
61
61
  chain: typeof chain;
62
62
  inspect: typeof inspect;
63
63
  causeOf: typeof causeOf;
@@ -68,7 +68,7 @@ export interface Console {
68
68
  detach: typeof detach;
69
69
  /** Opens the panel, or shows it for a node you already have. */
70
70
  panel: (node?: Node) => void;
71
- }
71
+ };
72
72
  /** Stops recording and forgets everything. Mostly for tests. */
73
73
  export declare function detach(): void;
74
74
  /** Every computed and effect currently alive, in owner order. */
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAeA,mCAAmC;AACnC,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,WAAW,MAAM;IACrB,gFAAgF;IAChF,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,GAAG,EAAE,MAAM,EAAE,CAAC;IACd;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,gCAAgC;AAChC,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7C,yEAAyE;IACzE,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CACzB;AAED,sDAAsD;AACtD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,EAAE,SAAS,EAAE,CAAC;CACzB;AA0ID;;;;;;;GAOG;AACH,wBAAgB,MAAM,IAAI,IAAI,CAuH7B;AAED,2EAA2E;AAC3E,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,gEAAgE;IAChE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9B;AAED,gEAAgE;AAChE,wBAAgB,MAAM,IAAI,IAAI,CAkB7B;AA8ED,iEAAiE;AACjE,wBAAgB,KAAK,IAAI,SAAS,EAAE,CAMnC;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,SAAI,GAAG,SAAS,EAAE,CAM1D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAMxC;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,CASjD;AAMD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAYjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,IAAI,UAAU,EAAE,CAEtC;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,CAE1D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,CAsB1C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,CAW9C"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAeA,mCAAmC;AACnC,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,gFAAgF;IAChF,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,GAAG,EAAE,MAAM,EAAE,CAAC;IACd;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,gCAAgC;AAChC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7C,yEAAyE;IACzE,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,sDAAsD;AACtD,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,EAAE,SAAS,EAAE,CAAC;CACzB,CAAC;AA0IF;;;;;;;GAOG;AACH,wBAAgB,MAAM,IAAI,IAAI,CAuH7B;AAED,2EAA2E;AAC3E,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,gEAAgE;IAChE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,gEAAgE;AAChE,wBAAgB,MAAM,IAAI,IAAI,CAkB7B;AA8ED,iEAAiE;AACjE,wBAAgB,KAAK,IAAI,SAAS,EAAE,CAMnC;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,SAAI,GAAG,SAAS,EAAE,CAM1D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAMxC;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,CASjD;AAMD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAYjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,IAAI,UAAU,EAAE,CAEtC;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,CAE1D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,CAsB1C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,CAW9C"}
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{a,b,c,d,e,f,g,h,i,j,k}from"./chunk-HDNA4SLC.js";export{a as attach,g as causeOf,c as cells,e as chain,b as detach,d as inspect,f as path,h as queries,j as stack,k as timeline,i as watch};
1
+ import{a,b,c,d,e,f,g,h,i,j,k}from"./chunk-7MQSJYVB.js";export{a as attach,g as causeOf,c as cells,e as chain,b as detach,d as inspect,f as path,h as queries,j as stack,k as timeline,i as watch};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@firsthandjs/devtools",
3
- "version": "0.7.0",
3
+ "version": "0.7.1",
4
4
  "description": "Experimental devtools for Firsthand: see what updates what, why it ran, and when.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -19,7 +19,7 @@
19
19
  "LICENSE"
20
20
  ],
21
21
  "dependencies": {
22
- "@firsthandjs/core": "0.7.0"
22
+ "@firsthandjs/core": "0.7.1"
23
23
  },
24
24
  "engines": {
25
25
  "node": ">=20.11.0"