@nuxt/devtools
Version:
<a href="https://devtools.nuxt.com"><img width="1200" alt="Nuxt DevTools" src="https://github-production-user-asset-6210df.s3.amazonaws.com/904724/261577617-a10567bd-ad33-48cc-9bda-9e37dbe1929f.png"></a> <br>
31 lines (30 loc) • 23.6 kB
JavaScript
import{d as B,a as w,aJ as V,o,m as p,k as t,a7 as T,f as l,t as k,ab as O,F as h,n as E,h as _,r as C,w as Y,aA as Z,Z as j,cn as U,p as x,i as m,D as z,q as X,am as q,e as K,as as J,j as v,aw as Q,v as F,_ as G,aL as ee,ak as se,aZ as ne,co as te,a9 as oe,L as ae,aa as le,y as re,J as R,a3 as ie,X as pe}from"./Bysyzw-g.js";import{_ as W}from"./BpWWOd5v.js";import{_ as P}from"./CpQX28Pm.js";import{_ as ce}from"./BK2fI3On.js";import{s as de}from"./B4nba3hY.js";import{_ as ue}from"./C_HkoMG5.js";import{_ as me}from"./dPiMYs67.js";import{_ as ke}from"./COjmv9fs.js";import{_ as fe}from"./DxQMSSvi.js";import{_ as ye}from"./DByNSuIM.js";import{_ as he}from"./WFxqX3Wd.js";import"./goeoWIau.js";import"./DK4YETzW.js";import"./CQTsRCSt.js";import"./BcJws1i5.js";import"./3LqotSTl.js";import"./CdlRa3-_.js";const _e=B({__name:"TimelineItemFunction",props:{item:{}},setup(y){const u=y,c=w(()=>V(u.item.name,50,60,"_op_")),n=w(()=>c.value.replace(/_op_/,"1")),e=w(()=>V(u.item.name,50,40)),r=w(()=>c.value.replace(/_op_/,"0.2"));return(a,i)=>(o(),p("button",{class:"group",style:T({color:l(n),borderLeft:`2px solid ${l(n)}`}),relative:"","text-sm":"",transition:"","hover:z-1000":"","bg-base":""},[t("div",{style:T({backgroundColor:l(r)}),absolute:"","bottom-0":"","left--1px":"","top-0":"","w-full":"","text-sm":"","transition-all":"","duration-300":""},null,4),t("div",{style:T({color:l(e),"--c":l(n)}),border:"r-2 t-2 y-2 transparent","min-w-max":"",px1:"","text-left":"","group-hover":"border-$c"},k(a.item.name),5)],4))}}),ve={relative:"","h-full":""},be={absolute:"","left-2":"","top-2.3em":"","text-xs":"",op50:""},ge=B({__name:"TimelineSegment",props:{segment:{}},emits:["select"],setup(y,{emit:u}){const c=y,n=u,e=O(()=>c.segment.start,{updateInterval:1e3,showSecond:!0,controls:!1,messages:{justNow:"",past:r=>r,future:r=>r,invalid:"-",second:r=>r?`${r}s`:"",minute:r=>`${r}m`,hour:r=>`${r}h`,week:r=>`${r}w`,day:r=>`${r}d`,month:r=>`${r}mo`,year:r=>`${r}y`}});return(r,a)=>{const i=_e;return o(),p("div",ve,[t("button",{absolute:"","left-0":"","right-0":"","top-0":"","bg-green:5":"",px2:"",py1:"","text-left":"","text-xs":"","text-green6":"","font-mono":"",onClick:a[0]||(a[0]=s=>r.segment.route?n("select",r.segment.route):void 0)},k(r.segment.route?.event.to),1),t("div",be,k(l(e))+" ago ",1),t("div",null,[(o(!0),p(h,null,E(r.segment.functions,(s,d)=>(o(),_(i,{key:d,item:s.event,style:T({position:"absolute",minWidth:`${s.relativeWidth*100}%`,maxWidth:`${s.relativeWidth*100}%`,top:`${4+s.layer*1.6}em`,left:`${s.relativeStart*100}%`}),onClick:f=>n("select",s)},null,8,["item","style","onClick"]))),128))])])}}}),xe=3e3,$e=50;function Ae(y){const u=[];let c={start:0,end:0,events:[],functions:[],duration:0};for(const n of y){const e=n.end||n.start;(n.start-c.end>xe||n.type==="route")&&(c={start:n.start,end:e,events:[],functions:[],duration:0},u.push(c)),c.events.push(n),c.end=e+$e}return u.forEach((n,e)=>{const r=n.end-n.start,a=[];n.duration=r,n.previousGap=e>0?n.start-u[e-1].end:0,n.events.forEach(i=>{const s=i.end||i.start;let d=0;i.type!=="route"&&(d=a.findIndex($=>$<=i.start),d===-1?(d=a.length,a.push(s+1e3)):a[d]=s+1e3);const f={event:i,segment:n,relativeStart:(i.start-n.start)/r,relativeWidth:(s-i.start)/r,layer:d};i.type==="function"?n.functions.push(f):n.route=f})}),u}const De={relative:""},Ce={key:0,border:"x base","h-full":"","flex-inline":"","bg-true-gray-1":"",py15:"","text-xs":"","write-vertical-left":"",op50:"","dark:bg-true-gray-9":""},Be=B({__name:"TimelineTable",props:{data:{}},emits:["select"],setup(y,{emit:u}){const c=y,n=u,e=C(),r=C(),a=C(),i=C(),s=C(!0),d=C(1.5),f=w(()=>Ae(c.data.events)),$=w(()=>(c.data.events.length,e.value?.scrollWidth||window.innerWidth));function A(){i.value&&(i.value.style.width=`${$.value}px`)}function S(){s.value&&e.value&&(e.value.scrollTo({left:e.value.scrollWidth-e.value.clientWidth,behavior:"smooth"}),a.value.scrollTo({left:e.value.scrollWidth-e.value.clientWidth,behavior:"smooth"}))}return Y(()=>c.data.events.length,async()=>{await Z(),A(),S()},{flush:"post"}),j(e,"scroll",()=>{a.value.scrollLeft!==e.value.scrollLeft&&(A(),a.value.scrollLeft=e.value.scrollLeft,s.value=e.value.scrollLeft>=e.value.scrollWidth-e.value.clientWidth)}),j(a,"scroll",()=>{a.value.scrollLeft!==e.value.scrollLeft&&(A(),e.value.scrollLeft=a.value.scrollLeft)}),j(e,"wheel",b=>{b.altKey?(d.value=U(d.value+b.deltaY/200,.5,3),A()):e.value.scrollLeft+=b.deltaY}),(b,L)=>{const D=W,M=ge;return o(),p(h,null,[t("div",De,[t("div",{ref_key:"minimap",ref:r,border:"t b base",relative:"","h-50px":"","ws-nowrap":"","border-base":""},[(o(!0),p(h,null,E(l(f),(g,N)=>(o(),p("div",{key:N,relative:"","h-full":"","flex-inline":"",style:T({width:`${Math.max(100,g.duration/10)/l($)*100}%`})},[(o(!0),p(h,null,E(g.functions,(I,H)=>(o(),p("div",{key:H,"h-3px":"",rounded:"",style:T({width:`max(${I.relativeWidth*100}%, 10px)`,position:"absolute",top:`${I.layer*4}px`,left:`${I.relativeStart*100}%`,backgroundColor:("getHashColorFromString"in b?b.getHashColorFromString:l(V))(I.event.name,50,60)})},null,4))),128)),g.route?(o(),p("div",{key:0,absolute:"","top-0":"","h-full":"","w-px":"","border-l":"","border-green6":"",op10:"",style:T({left:`${g.route.relativeStart*100}%`})},null,4)):x("",!0)],4))),128))],512),t("div",{ref_key:"minimapScroller",ref:a,class:"timeline-scroller",absolute:"","inset-0":"","h-full":"","w-full":"","of-x-scroll":""},[t("div",{ref_key:"minimapScrollerInner",ref:i,"h-1px":""},null,512)],512)]),t("div",{ref_key:"scroller",ref:e,relative:"","h-full":"","w-full":"","of-x-scroll":"","of-y-hidden":"","ws-nowrap":"","n-panel-grids":""},[(o(!0),p(h,null,E(l(f),(g,N)=>(o(),p(h,{key:N},[g.previousGap&&g.previousGap>=200?(o(),p("div",Ce,[m(D,{op50:"",duration:g.previousGap,color:!1},null,8,["duration"])])):x("",!0),m(M,{"flex-inline":"","of-x-hidden":"","hover:of-x-visible":"","bg-base":"",class:z(N===l(f).length-1?"border-r border-base":""),segment:g,style:T({width:`${Math.max(50,g.duration/10)*l(d)}px`}),onSelect:L[0]||(L[0]=I=>n("select",I))},null,8,["class","segment","style"])],64))),128))],512)],64)}}}),we=X(Be,[["__scopeId","data-v-a65e0716"]]),Te={border:"t base",flex:"~ col","h-full":"","of-y-auto":"","text-sm":""},Se=["onClick"],Ne={flex:"~","ml--1":"","font-mono":""},Fe={key:0,mr2:"",op30:""},Ee={op75:""},Le={flex:"~ col items-start"},Ie={"text-xs":"","font-mono":"",op30:""},Me={"text-green":"","font-bold":"","font-mono":""},Ve=B({__name:"TimelineList",props:{data:{}},emits:["select"],setup(y,{emit:u}){const c=u;return(n,e)=>{const r=W;return o(),p("div",Te,[(o(!0),p(h,null,E(n.data.events,(a,i)=>(o(),p("button",{key:i,border:"b base",px3:"",py2:"",flex:"~ items-center gap-2",hover:"bg-active",onClick:s=>c("select",a)},[a.type==="function"?(o(),p(h,{key:0},[e[2]||(e[2]=t("div",{"i-carbon-function":"",op50:""},null,-1)),t("div",{"font-mono":"",style:T({color:a.type==="function"?("getHashColorFromString"in n?n.getHashColorFromString:l(V))(a.name,50,60):""})},k(a.name),5),t("div",Ne,[e[0]||(e[0]=t("div",{op30:""}," ( ",-1)),(o(!0),p(h,null,E(a.args,(s,d)=>(o(),p(h,{key:d},[d?(o(),p("div",Fe," , ")):x("",!0),t("div",Ee,k(s===null?"null":s===void 0?"undefined":typeof s=="function"?"[function]":Array.isArray(s)?"[Array]":typeof s=="object"?"[object]":JSON.stringify(s)),1)],64))),128)),e[1]||(e[1]=t("div",{op30:""}," ) ",-1))])],64)):(o(),p(h,{key:1},[e[3]||(e[3]=t("div",{"mr-1":"","h-7":"","w-7":"",flex:"","rounded-lg":"","bg-primary:5":"",p1:"","text-green6":""},[t("div",{"i-carbon-direction-rotary-right":"",ma:"","text-lg":""})],-1)),t("div",Le,[t("div",Ie,k(a.from),1),t("div",Me,k(a.to),1)])],64)),e[4]||(e[4]=t("div",{"flex-auto":""},null,-1)),a.end?(o(),_(r,{key:2,duration:a.end-a.start,color:a.type==="function"},null,8,["duration","color"])):x("",!0)],8,Se))),128)),e[5]||(e[5]=t("div",{"min-h-100":""},null,-1))])}}}),We={key:0,"text-blue":""},je={key:1,"text-purple":""},Oe={key:2,"text-green":""},ze={key:3,"text-gray":""},Ge={key:4,"text-gray":""},Re={key:5,"text-gray":""},Je={key:0,"bg-red:10":"",px2:"",py1:"","text-red":""},Pe={key:1},He={p2:"","text-sm":"",border:"t base"},Ye=B({__name:"TimelineArgumentView",props:{value:{}},setup(y){const u=y,c=C(),n=C();function e(){try{c.value=JSON.parse(JSON.stringify(u.value))}catch(s){console.error(s),n.value=s}}const r=B({emits:["setup"],setup(s,{emit:d}){return d("setup"),()=>null}}),a=q(),i=K();return(s,d)=>{const f=G,$=J("VMenu");return typeof s.value=="string"?(o(),p("div",We,k(JSON.stringify(s.value)),1)):typeof s.value=="number"?(o(),p("div",je,k(s.value),1)):typeof s.value=="boolean"?(o(),p("div",Oe,k(s.value),1)):typeof s.value>"u"?(o(),p("div",ze," undefined ")):typeof s.value=="function"?(o(),p("div",Ge," [Function"+k(s.value.name?`: ${s.value.name}`:"")+"] ",1)):s.value===null?(o(),p("div",Re," null ")):(o(),_($,{key:6,placement:"top"},{popper:v(()=>[m(l(r),{onSetup:e}),l(n)?(o(),p("div",Je," Failed to display object: "+k(l(n)),1)):l(c)?(o(),p("div",Pe,[m(l(de),Q({"model-value":l(c)},s.$attrs,{class:["json-editor-vue",[l(a)==="dark"?"jse-theme-dark":""]],"main-menu-bar":!1,"navigation-bar":!1,"status-bar":!1,"read-only":!0,indentation:2,"tab-size":2}),null,16,["model-value","class"]),t("div",He,[m(f,{title:"Copy to clipboard",icon:"carbon-copy",onClick:d[0]||(d[0]=A=>l(i)(JSON.stringify(l(c),null,2),"timeline-argument"))},{default:v(()=>d[1]||(d[1]=[F(" Copy ")])),_:1})])])):x("",!0)]),default:v(()=>[t("span",{"rounded-sm":"",px1:"","py0.5":"","text-sm":"",class:z([Array.isArray(s.value)?"text-amber bg-amber:10":"text-orange bg-orange:10"])},k(Array.isArray(s.value)?`[Array(${s.value.length})]`:"[Object]"),3)]),_:1}))}}}),Ze={key:0,"p-4":"",flex:"~ col gap-2","text-base":""},Ue={"mx--1":""},Xe={flex:"~ gap-1","font-mono":""},qe={key:1},Ke={key:0,op30:""},Qe={flex:"~ gap-1","text-sm":""},es={class:"text-sm text-gray-400"},ss=B({__name:"TimelineDetailsFunction",props:{record:{}},setup(y){const u=y,c=O(()=>u.record.start,{showSecond:!0}),n=ee(),e=w(()=>n.value?.metadata),r=w(()=>n.value?.imports.find(a=>a.as===u.record.name));return(a,i)=>{const s=P,d=ce,f=Ye,$=W,A=ue;return a.record?(o(),p("div",Ze,[t("div",Ue,[m(s,{n:"yellow",textContent:"Function call"})]),t("div",Xe,[l(r)?(o(),_(d,{key:0,item:l(r),metadata:l(e),counter:!1,classes:"px2 py1","mx--2":""},null,8,["item","metadata"])):(o(),p("span",qe,k(a.record.name),1)),i[0]||(i[0]=t("span",{ml1:"",op30:""},"(",-1)),(o(!0),p(h,null,E(a.record.args,(S,b)=>(o(),p(h,{key:b},[b?(o(),p("span",Ke,", ")):x("",!0),m(f,{value:S},null,8,["value"])],64))),128)),i[1]||(i[1]=t("span",{op30:""},")",-1))]),t("div",Qe,[a.record.end?(o(),_($,{key:0,duration:a.record.end-a.record.start},null,8,["duration"])):x("",!0),i[2]||(i[2]=t("span",{mx1:"",op50:""},"·",-1)),t("div",es,k(l(c)),1)]),a.record.stacktrace?(o(),_(A,{key:0,stacktrace:a.record.stacktrace,class:"text-xs text-gray-400"},null,8,["stacktrace"])):x("",!0)])):x("",!0)}}}),ns={key:0,"p-4":"",flex:"~ col gap-2"},ts={"mx--1":""},os={flex:"~ gap-1 items-center","font-mono":""},as={op50:""},ls={flex:"~ gap-1","text-sm":""},rs={class:"text-sm text-gray-400"},is=B({__name:"TimelineDetailsRoute",props:{record:{}},setup(y){const u=y,c=O(()=>u.record.start,{showSecond:!0});return(n,e)=>{const r=P,a=W;return n.record?(o(),p("div",ns,[t("div",ts,[m(r,{n:"green",textContent:"Route Change"})]),t("div",os,[t("span",as,k(n.record.from),1),e[0]||(e[0]=t("span",{"i-carbon-arrow-right":"",op50:""},null,-1)),t("span",null,k(n.record.to),1)]),t("div",ls,[n.record.end?(o(),_(a,{key:0,duration:n.record.end-n.record.start},null,8,["duration"])):x("",!0),e[1]||(e[1]=t("span",{mx1:"",op50:""},"·",-1)),t("div",rs,k(l(c)),1)])])):x("",!0)}}}),ps={key:0,"h-screen":"","of-hidden":""},cs={"h-screen":"","w-full":"",flex:"","flex-col":""},ds={"h-10":"",flex:"~ gap-2 items-center justify-end",p2:"",px3:""},us={"text-sm":""},ms={"min-h-50":"",px3:"",py2:""},ks=B({__name:"TimelineView",setup(y){const u=se(),c=C("table"),n=C(),e=w(()=>u.value?.metrics.clientTimeline());function r(){e.value&&(e.value.events=[])}function a(){c.value=c.value==="table"?"list":"table"}return(i,s)=>{const d=J("VTooltip"),f=G,$=we,A=Ve,S=ss,b=is,L=me;return l(e)?(o(),p("div",ps,[t("div",cs,[t("div",ds,[m(d,{flex:""},{popper:v(()=>[t("div",us,k(l(e).options.enabled?"Recording...":"Paused"),1)]),default:v(()=>[t("div",{"text-lg":"",class:z(l(e).options.enabled?"i-carbon-radio-button-checked text-primary animate-pulse":"i-carbon-pause-outline op30")},null,2)]),_:1}),l(e).options.enabled?(o(),_(f,{key:1,size:"small",ml1:"","text-sm":"",n:"orange",icon:"i-carbon-stop",onClick:s[1]||(s[1]=D=>l(e).options.enabled=!1)},{default:v(()=>s[6]||(s[6]=[F(" Stop Tracking ")])),_:1})):(o(),_(f,{key:0,size:"small",ml1:"","text-sm":"",n:"primary",icon:"i-carbon-play",onClick:s[0]||(s[0]=D=>l(e).options.enabled=!0)},{default:v(()=>s[5]||(s[5]=[F(" Start Tracking ")])),_:1})),s[7]||(s[7]=t("div",{"flex-auto":""},null,-1)),m(f,{icon:l(c)==="table"?"i-carbon-roadmap":"i-carbon-list",class:"ml-2",title:"Toggle View",border:!1,onClick:a},null,8,["icon"]),m(f,{icon:"i-carbon-trash-can","hover-text-red":"",class:"ml-2",border:!1,onClick:r})]),l(c)==="table"?(o(),_($,{key:0,data:{...l(e)},onSelect:s[2]||(s[2]=D=>n.value=D.event)},null,8,["data"])):(o(),_(A,{key:1,data:{...l(e)},onSelect:s[3]||(s[3]=D=>n.value=D)},null,8,["data"]))]),m(L,{"model-value":!!l(n),"auto-close":"",transition:"bottom",left:"#nuxt-devtools-side-nav",onClose:s[4]||(s[4]=D=>n.value=void 0)},{default:v(()=>[t("div",ms,[l(n)?.type==="function"?(o(),_(S,{key:0,record:l(n)},null,8,["record"])):l(n)?.type==="route"?(o(),_(b,{key:1,record:l(n)},null,8,["record"])):x("",!0)])]),_:1},8,["model-value"])])):x("",!0)}}}),fs={class:"markdown-body"},ys={__name:"timeline",setup(y,{expose:u}){return u({frontmatter:{}}),(n,e)=>(o(),p("div",fs,e[0]||(e[0]=[ne(`<p>Timeline tracks your route navigations and functions calls in your Nuxt application. It can be used to debug performance issues and to understand how your application works.</p><h2>Function calls</h2><p>Nuxt DevTools tracks function calls by wrapping them in the build time. It works for functions referenced by auto-imports, or explicit imports through <code>import {} from '#imports'</code>.</p><pre class="shiki shiki-themes vitesse-light vitesse-dark" style="background-color:#ffffff;--shiki-dark-bg:#121212;color:#393a34;--shiki-dark:#dbd7caee;" tabindex="0"><code><span class="line"><span style="color:#999999;--shiki-dark:#666666;"><</span><span style="color:#1E754F;--shiki-dark:#4D9375;">script</span><span style="color:#B07D48;--shiki-dark:#BD976A;"> setup</span><span style="color:#999999;--shiki-dark:#666666;">></span></span>
<span class="line"><span style="color:#1E754F;--shiki-dark:#4D9375;">import</span><span style="color:#999999;--shiki-dark:#666666;"> {</span><span style="color:#B07D48;--shiki-dark:#BD976A;"> useNuxtApp</span><span style="color:#999999;--shiki-dark:#666666;"> }</span><span style="color:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="color:#B56959;--shiki-dark:#C98A7D;">#imports</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
<span class="line"><span style="color:#1E754F;--shiki-dark:#4D9375;">import</span><span style="color:#999999;--shiki-dark:#666666;"> {</span><span style="color:#B07D48;--shiki-dark:#BD976A;"> useMouse</span><span style="color:#999999;--shiki-dark:#666666;"> }</span><span style="color:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="color:#B56959;--shiki-dark:#C98A7D;">@vueuse/core</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#AB5959;--shiki-dark:#CB7676;">const</span><span style="color:#B07D48;--shiki-dark:#BD976A;"> route</span><span style="color:#999999;--shiki-dark:#666666;"> =</span><span style="color:#59873A;--shiki-dark:#80A665;"> useRoute</span><span style="color:#999999;--shiki-dark:#666666;">()</span><span style="color:#A0ADA0;--shiki-dark:#758575DD;"> // tracked</span></span>
<span class="line"><span style="color:#AB5959;--shiki-dark:#CB7676;">const</span><span style="color:#B07D48;--shiki-dark:#BD976A;"> app</span><span style="color:#999999;--shiki-dark:#666666;"> =</span><span style="color:#59873A;--shiki-dark:#80A665;"> useNuxtApp</span><span style="color:#999999;--shiki-dark:#666666;">()</span><span style="color:#A0ADA0;--shiki-dark:#758575DD;"> // tracked</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A0ADA0;--shiki-dark:#758575DD;">// NOT tracked because it's directly imported</span></span>
<span class="line"><span style="color:#AB5959;--shiki-dark:#CB7676;">const</span><span style="color:#B07D48;--shiki-dark:#BD976A;"> mouse</span><span style="color:#999999;--shiki-dark:#666666;"> =</span><span style="color:#59873A;--shiki-dark:#80A665;"> useMouse</span><span style="color:#999999;--shiki-dark:#666666;">()</span></span>
<span class="line"><span style="color:#999999;--shiki-dark:#666666;"></</span><span style="color:#1E754F;--shiki-dark:#4D9375;">script</span><span style="color:#999999;--shiki-dark:#666666;">></span></span>
<span class="line"></span></code></pre><p>By default, it tracks Nuxt provided composables as well as user defined functions. You can include/exclude functions by using the <code>include</code> and <code>exclude</code> options in the <code>nuxt.config.js</code> file.</p><pre class="shiki shiki-themes vitesse-light vitesse-dark" style="background-color:#ffffff;--shiki-dark-bg:#121212;color:#393a34;--shiki-dark:#dbd7caee;" tabindex="0"><code><span class="line"><span style="color:#1E754F;--shiki-dark:#4D9375;">export</span><span style="color:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="color:#59873A;--shiki-dark:#80A665;"> defineNuxtConfig</span><span style="color:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="color:#998418;--shiki-dark:#B8A965;"> devtools</span><span style="color:#999999;--shiki-dark:#666666;">:</span><span style="color:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="color:#998418;--shiki-dark:#B8A965;"> timeline</span><span style="color:#999999;--shiki-dark:#666666;">:</span><span style="color:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="color:#998418;--shiki-dark:#B8A965;"> functions</span><span style="color:#999999;--shiki-dark:#666666;">:</span><span style="color:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="color:#998418;--shiki-dark:#B8A965;"> include</span><span style="color:#999999;--shiki-dark:#666666;">:</span><span style="color:#999999;--shiki-dark:#666666;"> [</span></span>
<span class="line"><span style="color:#A0ADA0;--shiki-dark:#758575DD;"> // track \`useMouse\`</span></span>
<span class="line"><span style="color:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="color:#B56959;--shiki-dark:#C98A7D;">useMouse</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="color:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="color:#A0ADA0;--shiki-dark:#758575DD;"> // track all functions starting with \`use\`</span></span>
<span class="line"><span style="color:#B5695977;--shiki-dark:#C98A7D77;"> /</span><span style="color:#1E754F;--shiki-dark:#4D9375;">^</span><span style="color:#AB5E3F;--shiki-dark:#C4704F;">use</span><span style="color:#999999;--shiki-dark:#666666;">[</span><span style="color:#A65E2B;--shiki-dark:#C99076;">A-Z</span><span style="color:#999999;--shiki-dark:#666666;">]</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;">/</span><span style="color:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="color:#A0ADA0;--shiki-dark:#758575DD;"> // track all functions from @vueuse/core</span></span>
<span class="line"><span style="color:#B07D48;--shiki-dark:#BD976A;"> entry</span><span style="color:#999999;--shiki-dark:#666666;"> =></span><span style="color:#B07D48;--shiki-dark:#BD976A;"> entry</span><span style="color:#999999;--shiki-dark:#666666;">.</span><span style="color:#B07D48;--shiki-dark:#BD976A;">from</span><span style="color:#AB5959;--shiki-dark:#CB7676;"> ===</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="color:#B56959;--shiki-dark:#C98A7D;">@vueuse/core</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="color:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="color:#999999;--shiki-dark:#666666;"> ],</span></span>
<span class="line"><span style="color:#998418;--shiki-dark:#B8A965;"> exclude</span><span style="color:#999999;--shiki-dark:#666666;">:</span><span style="color:#999999;--shiki-dark:#666666;"> [</span></span>
<span class="line"><span style="color:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="color:#B56959;--shiki-dark:#C98A7D;">useRouter</span><span style="color:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
<span class="line"><span style="color:#999999;--shiki-dark:#666666;"> ]</span></span>
<span class="line"><span style="color:#999999;--shiki-dark:#666666;"> }</span></span>
<span class="line"><span style="color:#999999;--shiki-dark:#666666;"> }</span></span>
<span class="line"><span style="color:#999999;--shiki-dark:#666666;"> }</span></span>
<span class="line"><span style="color:#999999;--shiki-dark:#666666;">})</span></span>
<span class="line"></span></code></pre>`,6)])))}},hs=ys,_s={flex:"~ col gap-2","w-150":"",p4:"",border:"t base"},vs={op50:""},bs={flex:"~ gap-3",mt2:"","justify-end":""},Ws=B({__name:"timeline",setup(y){const u=te(),c=oe(),n=ae(),e=le();async function r(){try{const[a,i]=await R.enableTimeline(!0);if(!await n.start(a,i))return;await R.enableTimeline(!1)}catch{ie({message:"Failed to enable timeline automatically. Check the terminal for more details.",icon:"i-carbon-warning",classes:"text-red"})}}return(a,i)=>{const s=ks,d=ke,f=re,$=fe,A=ye,S=G,b=pe,L=hs,D=he;return o(),p(h,null,[l(u)?.timeline?.enabled?(o(),_(s,{key:0})):(o(),p(h,{key:1},[m(f,null,{default:v(()=>[m(d,{icon:"i-carbon-roadmap",name:"feature-timeline",title:"Timeline",description:"Timeline enables the inspection of when composable being executed and the route changes.",actions:[{label:"Enable"}],onAction:r})]),_:1}),m(l(n),null,{default:v(({resolve:M,args:g})=>[m(b,{"model-value":!0,onClose:N=>M(!1)},{default:v(()=>[t("div",_s,[i[5]||(i[5]=t("h2",{"text-xl":""},[t("span",{capitalize:""},"Enable Timeline?")],-1)),t("p",vs,[i[1]||(i[1]=F(" Your ")),m($,{role:"button",n:"primary",underline:"",onClick:i[0]||(i[0]=N=>l(e)(l(c)?._nuxtConfigFile)),textContent:"Nuxt config"}),i[2]||(i[2]=F(" will be updated as: "))]),m(A,{from:g[0],to:g[1],"max-h-80":"","of-auto":"",py2:"",border:"~ base rounded",lang:"ts"},null,8,["from","to"]),i[6]||(i[6]=t("p",null,[t("span",{op50:""},"Then Nuxt will "),t("span",{"text-orange":""},"restart automatically"),F(". ")],-1)),t("div",bs,[m(S,{onClick:N=>M(!1)},{default:v(()=>i[3]||(i[3]=[F(" Cancel ")])),_:2},1032,["onClick"]),m(S,{n:"solid primary",capitalize:"",onClick:N=>M(!0)},{default:v(()=>i[4]||(i[4]=[F(" Enable ")])),_:2},1032,["onClick"])])])]),_:2},1032,["onClose"])]),_:1})],64)),m(D,null,{default:v(()=>[m(L)]),_:1})],64)}}});export{Ws as default};