npm - @pinia/colada-devtools - Versions diffs - 0.0.3 → 0.0.4 - Mend

@pinia/colada-devtools 0.0.3 → 0.0.4

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.

Files changed (24) hide show

package/dist-panel/{_queryId_-dahx0N-a.js → _queryId_-SBAeSmfh.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { _ as N } from "./mouse-pointer-click-BRg0nGpd.js";
-import { m, c as l, o as n, a as e, d as j, P as A, l as U, p as F, Q, C as M, O as v, g as w, h as b, R as W, t as u, _ as Y, S as G, M as P, b as X, T as Z, U as J, y as I, z as K, F as q, k as r, w as d, i as a, V as B, W as ee, j as te } from "./index-Covr4drg.js";
-import { _ as oe, a as se } from "./loader-CuAz6irK.js";
+import { _ as N } from "./mouse-pointer-click-BHnWXkC_.js";
+import { m, c as l, o as n, a as e, d as j, P as A, l as U, p as F, Q, C as M, O as v, g as w, h as b, R as W, t as u, _ as Y, S as G, M as P, b as X, T as Z, U as J, y as I, z as K, F as q, k as r, w as d, i as a, V as B, W as ee, j as te } from "./index-BdIpA-g4.js";
+import { _ as oe, a as se } from "./loader-DHLcbUhz.js";
 const ne = {
   viewBox: "0 0 24 24",
   width: "1.2em",
@@ -611,4 +611,4 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
 export {
   qt as default
 };
-//# sourceMappingURL=_queryId_-dahx0N-a.js.map
+//# sourceMappingURL=_queryId_-SBAeSmfh.js.map

package/dist-panel/{_queryId_-dahx0N-a.js.map → _queryId_-SBAeSmfh.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_queryId_-dahx0N-a.js","sources":["../src/panel/components/UCollapse.ce.vue","../src/panel/utils/time.ts","../src/panel/pages/queries/[queryId].vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component } from 'vue'\n\ndefineProps<{\n title?: string\n icon?: Component\n}>()\n\nconst open = defineModel<boolean>('open', {\n default: true,\n})\n\nfunction scrollIfNeeded(event: TransitionEvent) {\n if (event.target instanceof HTMLElement) {\n const scrollOptions: ScrollIntoViewOptions = {\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n }\n event.target.scrollIntoView(scrollOptions)\n }\n}\n</script>\n\n<template>\n <div class=\"collapse collapse-arrow\">\n <input v-model=\"open\" type=\"checkbox\">\n <div class=\"collapse-title px-2 py-0.5 bg-neutral-200 dark:bg-neutral-800 theme-neutral\">\n <slot name=\"title\" :open :title>\n <h3 class=\"font-semibold text-sm flex gap-x-1 items-center\">\n <slot name=\"icon\">\n <component :is=\"icon\" v-if=\"icon\" class=\"size-4\" />\n </slot>\n {{ title ?? 'Group' }}\n </h3>\n </slot>\n </div>\n <div class=\"collapse-content px-2 text-sm overflow-hidden\" @transitionend=\"scrollIfNeeded\">\n <slot :open />\n </div>\n </div>\n</template>\n\n<style scoped>\n.collapse:not(td, tr, colgroup) {\n visibility: visible;\n}\n\n.collapse {\n position: relative;\n display: grid;\n overflow: hidden;\n width: 100%;\n grid-template-rows: max-content 0fr;\n transition: grid-template-rows 0.2s;\n isolation: isolate;\n\n > input:is([type='checkbox'], [type='radio']) {\n grid-column-start: 1;\n grid-row-start: 1;\n appearance: none;\n opacity: 0;\n }\n\n &:is([open], :focus),\n &:has(> input:is([type='checkbox'], [type='radio']):checked) {\n grid-template-rows: max-content 1fr;\n }\n\n &:is([open], :focus) > .collapse-content,\n &:not(.collapse-close)\n > :where(input:is([type='checkbox'], [type='radio']):checked ~ .collapse-content) {\n visibility: visible;\n min-height: fit-content;\n }\n &:focus-visible,\n &:has(> input:is([type='checkbox'], [type='radio']):focus-visible) {\n outline-color: var(--ui-text);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n\n &:not(.collapse-close) {\n > input[type='checkbox'],\n > input[type='radio']:not(:checked),\n > .collapse-title {\n cursor: pointer;\n }\n }\n\n &:focus:not(.collapse-close, .collapse[open]) > .collapse-title {\n cursor: unset;\n }\n\n &:is([open]) {\n &.collapse-arrow {\n > .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n }\n\n &.collapse-arrow:focus {\n > .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n\n &.collapse-arrow {\n > input:is([type='checkbox'], [type='radio']):checked ~ .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n\n > input:is([type='checkbox'], [type='radio']) {\n z-index: 1;\n width: 100%;\n }\n}\n\n.collapse-title,\n.collapse-content {\n grid-column-start: 1;\n grid-row-start: 1;\n}\n\n.collapse-content {\n visibility: hidden;\n grid-column-start: 1;\n grid-row-start: 2;\n min-height: 0;\n cursor: unset;\n transition: visibility 0.2s;\n}\n\n.collapse-arrow {\n > .collapse-title:after {\n position: absolute;\n display: block;\n height: 0.5rem;\n width: 0.5rem;\n transform: translateY(-100%) rotate(45deg);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.2s;\n top: 50%;\n right: 0.8em;\n inset-inline-end: 0.75rem;\n content: '';\n transform-origin: 75% 75%;\n box-shadow: 2px 2px;\n pointer-events: none;\n }\n}\n\n.collapse-title {\n position: relative;\n width: 100%;\n transition: background-color 0.2s ease-out;\n}\n</style>\n","export function formatDuration(timeInMs: number): string {\n if (timeInMs < 1000) {\n return `${Math.round(timeInMs)} ms`\n }\n\n const seconds = timeInMs / 1000\n if (timeInMs < 10_000) {\n return `${seconds.toFixed(3)} seconds`\n }\n\n if (timeInMs < 60_000) {\n return `${Math.floor(seconds)} seconds`\n }\n\n const minutes = Math.floor(seconds / 60)\n\n if (timeInMs < 3_600_000) {\n return `${minutes} minute${minutes > 1 ? 's' : ''}`\n }\n\n const hours = Math.floor(minutes / 60)\n\n return `${hours}h${minutes % 60}m${seconds % 60}s`\n}\n","<script setup lang=\"ts\">\nimport type { UseQueryEntryPayload } from '@pinia/colada-devtools/shared'\nimport { computed, ref, watch } from 'vue'\nimport { useDuplexChannel, useQueryEntries } from '../../composables/duplex-channel'\nimport { formatDuration } from '../../utils/time'\nimport { useRoute } from 'vue-router'\nimport type { DataStateStatus } from '@pinia/colada'\n\nimport IWrench from '~icons/lucide/wrench'\nimport IInfoCircle from '~icons/lucide/info'\nimport IFileText from '~icons/lucide/file-text'\nimport ICircleX from '~icons/lucide/circle-x'\nimport IBraces from '~icons/lucide/braces'\nimport IHistory from '~icons/lucide/history'\nimport ISigmaSquare from '~icons/lucide/sigma-square'\nimport { useTimeAgo, formatTimeAgo } from '@vueuse/core'\nimport type { FormatTimeAgoOptions } from '@vueuse/core'\n\nconst route = useRoute('/queries/[queryId]')\nconst queries = useQueryEntries()\n\nconst selectedQuery = computed<UseQueryEntryPayload \| null>(() => {\n return queries.value.find((entry) => entry.id === route.params.queryId) ?? null\n})\n\nconst TIME_AGO_OPTIONS: FormatTimeAgoOptions = {\n showSecond: true,\n rounding: 'floor',\n max: 1000 * 60 * 5, // 5 minutes\n}\n\nconst lastUpdate = useTimeAgo(() => selectedQuery.value?.devtools.updatedAt ?? 0, {\n ...TIME_AGO_OPTIONS,\n updateInterval: 3_000,\n})\n\n// TODO: we should be able to highlight components using this query\n// const el = useTemplateRef('me')\n// TODO: add ref=\"me\" to the div\n// watch(\n// // also trigger if the selectedQuery changes\n// () => [el.value, selectedQuery.value?.id] as const,\n// ([el]) => {\n// if (!el \|\| !selectedQuery.value) return\n//\n// const observingComponents = findVueComponents(\n// el,\n// selectedQuery.value.deps.filter((c) => c.type === 'component').map((c) => c.uid) ?? [],\n// )\n//\n// console.log('elements', observingComponents)\n// },\n// )\n\nconst channel = useDuplexChannel()\n\nconst isDataOpen = ref(false)\nlet wasDataOpen = isDataOpen.value\nlet lastStatus: DataStateStatus \| null = null\nconst isErrorOpen = ref(false)\nwatch(\n () => selectedQuery.value?.state,\n (state) => {\n if (!state \|\| lastStatus === state.status) return\n lastStatus = state.status\n if (state.status === 'error') {\n isErrorOpen.value = true\n // preserve it for later\n wasDataOpen = isDataOpen.value\n isDataOpen.value = false\n } else if (state.status === 'success') {\n isDataOpen.value = wasDataOpen\n isErrorOpen.value = false\n }\n },\n)\n</script>\n\n<template>\n <div class=\"flex flex-col divide-y dark:divide-(--ui-border) divide-(--ui-border-accented)\">\n <template v-if=\"selectedQuery\">\n <UCollapse title=\"Details\" :icon=\"IInfoCircle\">\n <div class=\"py-1 text-sm\">\n <p class=\"grid grid-cols-[auto_1fr] gap-1\">\n <span>key:</span>\n <span>\n <code class=\"rounded bg-neutral-500/20 p-0.5\">{{ selectedQuery.key }}</code>\n </span>\n </p>\n\n <p\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When was the query entry last updated\"\n >\n <span>Last update:</span>\n <span class=\"font-bold\">{{ lastUpdate }}</span>\n </p>\n\n <p\n v-if=\"selectedQuery.devtools.history.at(0)?.fetchTime\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When was the last time the query was fetched\"\n >\n <span>Last fetch:</span>\n <span class=\"font-bold\">{{\n formatTimeAgo(new Date(selectedQuery.devtools.history.at(0)!.fetchTime!.start), {\n ...TIME_AGO_OPTIONS,\n max: undefined,\n })\n }}</span>\n </p>\n\n <p\n v-if=\"selectedQuery.devtools.history.at(0)?.fetchTime?.end\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"How long did the last query take to fetch\"\n >\n <span>Fetch duration:</span>\n <span class=\"font-bold\">{{\n formatDuration(\n selectedQuery.devtools.history.at(0)!.fetchTime!.end!\n - selectedQuery.devtools.history.at(0)!.fetchTime!.start,\n )\n }}</span>\n </p>\n\n <p\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"How many components and effects are using this query\"\n >\n <span>Observers: <span class=\"font-bold\">{{ selectedQuery.deps.length }}</span></span>\n </p>\n\n <p\n v-if=\"!selectedQuery.active && selectedQuery.options\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When is this query entry garbace collected\"\n >\n <template\n v-if=\"\n typeof selectedQuery.options.gcTime === 'number'\n && Number.isFinite(selectedQuery.options.gcTime)\n \"\n >\n <span>Will be <i>gced</i></span>\n <span class=\"font-bold\">{{\n formatTimeAgo(\n new Date(selectedQuery.devtools.inactiveAt + selectedQuery.options.gcTime),\n {\n ...TIME_AGO_OPTIONS,\n max: undefined,\n },\n )\n }}</span>\n </template>\n </p>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Actions\" :icon=\"IWrench\">\n <div class=\"py-2 gap-2 flex flex-wrap items-center justify-items-start\">\n <UButton\n class=\"theme-info\"\n size=\"sm\"\n title=\"Refetch this query\"\n :disabled=\"selectedQuery.options?.enabled === false\"\n @click=\"channel.emit('queries:refetch', selectedQuery.key)\"\n >\n <i-lucide-refresh-cw class=\"size-3.5\" /> Refetch\n </UButton>\n\n <UButton\n class=\"theme-neutral\"\n size=\"sm\"\n title=\"Invalidate this query\"\n @click=\"channel.emit('queries:invalidate', selectedQuery.key)\"\n >\n <i-lucide-timer-reset /> Invalidate\n </UButton>\n\n <UButton\n v-if=\"selectedQuery.devtools.simulate !== 'loading'\"\n class=\"theme-purple\"\n size=\"sm\"\n title=\"Restore the previous state\"\n @click=\"channel.emit('queries:simulate:loading', selectedQuery.key)\"\n >\n <i-lucide-loader />\n Simulate loading\n </UButton>\n <UButton\n v-else\n class=\"theme-purple\"\n size=\"sm\"\n title=\"Simulate a loading state\"\n @click=\"channel.emit('queries:simulate:loading:stop', selectedQuery.key)\"\n >\n <i-lucide-loader class=\"animate-spin\" />\n Stop loading\n </UButton>\n\n <UButton\n v-if=\"selectedQuery.devtools.simulate !== 'error'\"\n class=\"theme-error\"\n size=\"sm\"\n title=\"Simulate an Error state\"\n @click=\"channel.emit('queries:simulate:error', selectedQuery.key)\"\n >\n <i-lucide-x-octagon /> Simulate error\n </UButton>\n <UButton\n v-else\n class=\"theme-error\"\n size=\"sm\"\n title=\"Restore the previous state\"\n @click=\"channel.emit('queries:simulate:error:stop', selectedQuery.key)\"\n >\n <i-lucide-rotate-ccw /> Remove error\n </UButton>\n\n <UButton\n class=\"theme-warning\"\n size=\"sm\"\n title=\"Reset this query to its initial (pending) state\"\n @click=\"channel.emit('queries:reset', selectedQuery.key)\"\n >\n <i-lucide-trash /> Reset\n </UButton>\n </div>\n </UCollapse>\n\n <UCollapse v-model:open=\"isDataOpen\" title=\"Data\" :icon=\"IFileText\">\n <div class=\"py-1\">\n <pre\n v-if=\"selectedQuery.state.data !== undefined\"\n class=\"rounded p-1 overflow-auto max-h-[1200px]\"\n >{{ selectedQuery.state.data }}</pre>\n <p v-else class=\"text-neutral-500/50\">\n No data\n </p>\n </div>\n </UCollapse>\n\n <UCollapse\n v-model:open=\"isErrorOpen\"\n :title=\"`Error${selectedQuery.state.status === 'error' ? ' (!)' : ''}`\"\n :icon=\"ICircleX\"\n >\n <div class=\"py-1\">\n <pre v-if=\"selectedQuery.state.error\" class=\"rounded p-1 overflow-auto max-h-[1200px]\">{{\n selectedQuery.state.error\n }}</pre>\n <p v-else class=\"text-neutral-500/50\">\n No error\n </p>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Call count\" :icon=\"ISigmaSquare\" :open=\"false\">\n <div class=\"py-1\">\n <p class=\"grid grid-cols-[auto_1fr] gap-1\">\n <span>Calls:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.total }}</code>\n </span>\n <span>Success:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.succeed }}</code>\n </span>\n <span>Errors:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.errored }}</code>\n </span>\n <span>Cancelled:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.cancelled }}</code>\n </span>\n </p>\n </div>\n </UCollapse>\n\n <UCollapse\n :title=\"`History (${selectedQuery.devtools.history.length})`\"\n :icon=\"IHistory\"\n :open=\"false\"\n >\n <div class=\"py-1\">\n <UCollapse\n v-for=\"entry of selectedQuery.devtools.history\"\n :key=\"entry.updatedAt\"\n :title=\"`Entry nº${entry.id} (${formatTimeAgo(new Date(entry.updatedAt), TIME_AGO_OPTIONS)})`\"\n :open=\"false\"\n >\n <pre class=\"rounded p-1 overflow-auto max-h-[1200px]\">{{ entry }}</pre>\n </UCollapse>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Options\" :open=\"false\" :icon=\"IBraces\">\n <div class=\"py-1\">\n <pre\n v-if=\"selectedQuery.options\"\n class=\"rounded bg-neutral-500/20 p-1 overflow-auto max-h-[1200px]\"\n >{{ selectedQuery.options }}</pre>\n <p v-else>\n This Query entry has no options. It might have been created from the server or manually set with\n <code>queryCache.setQueryData()</code> for prefetching.\n </p>\n </div>\n </UCollapse>\n </template>\n\n <template v-else>\n <div class=\"py-6 mx-auto\">\n <p class=\"flex flex-col text-center items-center gap-2 text-lg px-2\">\n Select a Query to inspect\n <i-lucide-mouse-pointer-click />\n </p>\n </div>\n </template>\n </div>\n</template>\n"],"names":["open","_useModel","__props","scrollIfNeeded","event","scrollOptions","formatDuration","timeInMs","seconds","minutes","route","useRoute","queries","useQueryEntries","selectedQuery","computed","entry","TIME_AGO_OPTIONS","lastUpdate","useTimeAgo","_a","channel","useDuplexChannel","isDataOpen","ref","wasDataOpen","lastStatus","isErrorOpen","watch","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQM,UAAAA,IAAOC,EAAqBC,GAAA,MAEjC;AAED,aAASC,EAAeC,GAAwB;AAC1C,UAAAA,EAAM,kBAAkB,aAAa;AACvC,cAAMC,IAAuC;AAAA,UAC3C,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAU;AAAA,QACZ;AACM,QAAAD,EAAA,OAAO,eAAeC,CAAa;AAAA,MAAA;AAAA,IAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACpBK,SAASC,GAAeC,GAA0B;AACvD,MAAIA,IAAW;AACb,WAAO,GAAG,KAAK,MAAMA,CAAQ,CAAC;AAGhC,QAAMC,IAAUD,IAAW;AAC3B,MAAIA,IAAW;AACb,WAAO,GAAGC,EAAQ,QAAQ,CAAC,CAAC;AAG9B,MAAID,IAAW;AACb,WAAO,GAAG,KAAK,MAAMC,CAAO,CAAC;AAG/B,QAAMC,IAAU,KAAK,MAAMD,IAAU,EAAE;AAEvC,SAAID,IAAW,OACN,GAAGE,CAAO,UAAUA,IAAU,IAAI,MAAM,EAAE,KAK5C,GAFO,KAAK,MAAMA,IAAU,EAAE,CAEtB,IAAIA,IAAU,EAAE,IAAID,IAAU,EAAE;AACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACLM,UAAAE,IAAQC,EAA6B,GACrCC,IAAUC,EAAgB,GAE1BC,IAAgBC,EAAsC,MACnDH,EAAQ,MAAM,KAAK,CAACI,MAAUA,EAAM,OAAON,EAAM,OAAO,OAAO,KAAK,IAC5E,GAEKO,IAAyC;AAAA,MAC7C,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,MAAO,KAAK;AAAA;AAAA,IACnB,GAEMC,IAAaC,EAAW,MAAM;;AAAA,eAAAC,IAAAN,EAAc,UAAd,gBAAAM,EAAqB,SAAS,cAAa;AAAA,OAAG;AAAA,MAChF,GAAGH;AAAA,MACH,gBAAgB;AAAA,IAAA,CACjB,GAoBKI,IAAUC,EAAiB,GAE3BC,IAAaC,EAAI,EAAK;AAC5B,QAAIC,IAAcF,EAAW,OACzBG,IAAqC;AACnC,UAAAC,IAAcH,EAAI,EAAK;AAC7B,WAAAI;AAAA,MACE,MAAM;;AAAA,gBAAAR,IAAAN,EAAc,UAAd,gBAAAM,EAAqB;AAAA;AAAA,MAC3B,CAACS,MAAU;AACT,QAAI,CAACA,KAASH,MAAeG,EAAM,WACnCH,IAAaG,EAAM,QACfA,EAAM,WAAW,WACnBF,EAAY,QAAQ,IAEpBF,IAAcF,EAAW,OACzBA,EAAW,QAAQ,MACVM,EAAM,WAAW,cAC1BN,EAAW,QAAQE,GACnBE,EAAY,QAAQ;AAAA,MACtB;AAAA,IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"_queryId_-SBAeSmfh.js","sources":["../src/panel/components/UCollapse.ce.vue","../src/panel/utils/time.ts","../src/panel/pages/queries/[queryId].vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component } from 'vue'\n\ndefineProps<{\n title?: string\n icon?: Component\n}>()\n\nconst open = defineModel<boolean>('open', {\n default: true,\n})\n\nfunction scrollIfNeeded(event: TransitionEvent) {\n if (event.target instanceof HTMLElement) {\n const scrollOptions: ScrollIntoViewOptions = {\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n }\n event.target.scrollIntoView(scrollOptions)\n }\n}\n</script>\n\n<template>\n <div class=\"collapse collapse-arrow\">\n <input v-model=\"open\" type=\"checkbox\">\n <div class=\"collapse-title px-2 py-0.5 bg-neutral-200 dark:bg-neutral-800 theme-neutral\">\n <slot name=\"title\" :open :title>\n <h3 class=\"font-semibold text-sm flex gap-x-1 items-center\">\n <slot name=\"icon\">\n <component :is=\"icon\" v-if=\"icon\" class=\"size-4\" />\n </slot>\n {{ title ?? 'Group' }}\n </h3>\n </slot>\n </div>\n <div class=\"collapse-content px-2 text-sm overflow-hidden\" @transitionend=\"scrollIfNeeded\">\n <slot :open />\n </div>\n </div>\n</template>\n\n<style scoped>\n.collapse:not(td, tr, colgroup) {\n visibility: visible;\n}\n\n.collapse {\n position: relative;\n display: grid;\n overflow: hidden;\n width: 100%;\n grid-template-rows: max-content 0fr;\n transition: grid-template-rows 0.2s;\n isolation: isolate;\n\n > input:is([type='checkbox'], [type='radio']) {\n grid-column-start: 1;\n grid-row-start: 1;\n appearance: none;\n opacity: 0;\n }\n\n &:is([open], :focus),\n &:has(> input:is([type='checkbox'], [type='radio']):checked) {\n grid-template-rows: max-content 1fr;\n }\n\n &:is([open], :focus) > .collapse-content,\n &:not(.collapse-close)\n > :where(input:is([type='checkbox'], [type='radio']):checked ~ .collapse-content) {\n visibility: visible;\n min-height: fit-content;\n }\n &:focus-visible,\n &:has(> input:is([type='checkbox'], [type='radio']):focus-visible) {\n outline-color: var(--ui-text);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n\n &:not(.collapse-close) {\n > input[type='checkbox'],\n > input[type='radio']:not(:checked),\n > .collapse-title {\n cursor: pointer;\n }\n }\n\n &:focus:not(.collapse-close, .collapse[open]) > .collapse-title {\n cursor: unset;\n }\n\n &:is([open]) {\n &.collapse-arrow {\n > .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n }\n\n &.collapse-arrow:focus {\n > .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n\n &.collapse-arrow {\n > input:is([type='checkbox'], [type='radio']):checked ~ .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n\n > input:is([type='checkbox'], [type='radio']) {\n z-index: 1;\n width: 100%;\n }\n}\n\n.collapse-title,\n.collapse-content {\n grid-column-start: 1;\n grid-row-start: 1;\n}\n\n.collapse-content {\n visibility: hidden;\n grid-column-start: 1;\n grid-row-start: 2;\n min-height: 0;\n cursor: unset;\n transition: visibility 0.2s;\n}\n\n.collapse-arrow {\n > .collapse-title:after {\n position: absolute;\n display: block;\n height: 0.5rem;\n width: 0.5rem;\n transform: translateY(-100%) rotate(45deg);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.2s;\n top: 50%;\n right: 0.8em;\n inset-inline-end: 0.75rem;\n content: '';\n transform-origin: 75% 75%;\n box-shadow: 2px 2px;\n pointer-events: none;\n }\n}\n\n.collapse-title {\n position: relative;\n width: 100%;\n transition: background-color 0.2s ease-out;\n}\n</style>\n","export function formatDuration(timeInMs: number): string {\n if (timeInMs < 1000) {\n return `${Math.round(timeInMs)} ms`\n }\n\n const seconds = timeInMs / 1000\n if (timeInMs < 10_000) {\n return `${seconds.toFixed(3)} seconds`\n }\n\n if (timeInMs < 60_000) {\n return `${Math.floor(seconds)} seconds`\n }\n\n const minutes = Math.floor(seconds / 60)\n\n if (timeInMs < 3_600_000) {\n return `${minutes} minute${minutes > 1 ? 's' : ''}`\n }\n\n const hours = Math.floor(minutes / 60)\n\n return `${hours}h${minutes % 60}m${seconds % 60}s`\n}\n","<script setup lang=\"ts\">\nimport type { UseQueryEntryPayload } from '@pinia/colada-devtools/shared'\nimport { computed, ref, watch } from 'vue'\nimport { useDuplexChannel, useQueryEntries } from '../../composables/duplex-channel'\nimport { formatDuration } from '../../utils/time'\nimport { useRoute } from 'vue-router'\nimport type { DataStateStatus } from '@pinia/colada'\n\nimport IWrench from '~icons/lucide/wrench'\nimport IInfoCircle from '~icons/lucide/info'\nimport IFileText from '~icons/lucide/file-text'\nimport ICircleX from '~icons/lucide/circle-x'\nimport IBraces from '~icons/lucide/braces'\nimport IHistory from '~icons/lucide/history'\nimport ISigmaSquare from '~icons/lucide/sigma-square'\nimport { useTimeAgo, formatTimeAgo } from '@vueuse/core'\nimport type { FormatTimeAgoOptions } from '@vueuse/core'\n\nconst route = useRoute('/queries/[queryId]')\nconst queries = useQueryEntries()\n\nconst selectedQuery = computed<UseQueryEntryPayload \| null>(() => {\n return queries.value.find((entry) => entry.id === route.params.queryId) ?? null\n})\n\nconst TIME_AGO_OPTIONS: FormatTimeAgoOptions = {\n showSecond: true,\n rounding: 'floor',\n max: 1000 * 60 * 5, // 5 minutes\n}\n\nconst lastUpdate = useTimeAgo(() => selectedQuery.value?.devtools.updatedAt ?? 0, {\n ...TIME_AGO_OPTIONS,\n updateInterval: 3_000,\n})\n\n// TODO: we should be able to highlight components using this query\n// const el = useTemplateRef('me')\n// TODO: add ref=\"me\" to the div\n// watch(\n// // also trigger if the selectedQuery changes\n// () => [el.value, selectedQuery.value?.id] as const,\n// ([el]) => {\n// if (!el \|\| !selectedQuery.value) return\n//\n// const observingComponents = findVueComponents(\n// el,\n// selectedQuery.value.deps.filter((c) => c.type === 'component').map((c) => c.uid) ?? [],\n// )\n//\n// console.log('elements', observingComponents)\n// },\n// )\n\nconst channel = useDuplexChannel()\n\nconst isDataOpen = ref(false)\nlet wasDataOpen = isDataOpen.value\nlet lastStatus: DataStateStatus \| null = null\nconst isErrorOpen = ref(false)\nwatch(\n () => selectedQuery.value?.state,\n (state) => {\n if (!state \|\| lastStatus === state.status) return\n lastStatus = state.status\n if (state.status === 'error') {\n isErrorOpen.value = true\n // preserve it for later\n wasDataOpen = isDataOpen.value\n isDataOpen.value = false\n } else if (state.status === 'success') {\n isDataOpen.value = wasDataOpen\n isErrorOpen.value = false\n }\n },\n)\n</script>\n\n<template>\n <div class=\"flex flex-col divide-y dark:divide-(--ui-border) divide-(--ui-border-accented)\">\n <template v-if=\"selectedQuery\">\n <UCollapse title=\"Details\" :icon=\"IInfoCircle\">\n <div class=\"py-1 text-sm\">\n <p class=\"grid grid-cols-[auto_1fr] gap-1\">\n <span>key:</span>\n <span>\n <code class=\"rounded bg-neutral-500/20 p-0.5\">{{ selectedQuery.key }}</code>\n </span>\n </p>\n\n <p\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When was the query entry last updated\"\n >\n <span>Last update:</span>\n <span class=\"font-bold\">{{ lastUpdate }}</span>\n </p>\n\n <p\n v-if=\"selectedQuery.devtools.history.at(0)?.fetchTime\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When was the last time the query was fetched\"\n >\n <span>Last fetch:</span>\n <span class=\"font-bold\">{{\n formatTimeAgo(new Date(selectedQuery.devtools.history.at(0)!.fetchTime!.start), {\n ...TIME_AGO_OPTIONS,\n max: undefined,\n })\n }}</span>\n </p>\n\n <p\n v-if=\"selectedQuery.devtools.history.at(0)?.fetchTime?.end\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"How long did the last query take to fetch\"\n >\n <span>Fetch duration:</span>\n <span class=\"font-bold\">{{\n formatDuration(\n selectedQuery.devtools.history.at(0)!.fetchTime!.end!\n - selectedQuery.devtools.history.at(0)!.fetchTime!.start,\n )\n }}</span>\n </p>\n\n <p\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"How many components and effects are using this query\"\n >\n <span>Observers: <span class=\"font-bold\">{{ selectedQuery.deps.length }}</span></span>\n </p>\n\n <p\n v-if=\"!selectedQuery.active && selectedQuery.options\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When is this query entry garbace collected\"\n >\n <template\n v-if=\"\n typeof selectedQuery.options.gcTime === 'number'\n && Number.isFinite(selectedQuery.options.gcTime)\n \"\n >\n <span>Will be <i>gced</i></span>\n <span class=\"font-bold\">{{\n formatTimeAgo(\n new Date(selectedQuery.devtools.inactiveAt + selectedQuery.options.gcTime),\n {\n ...TIME_AGO_OPTIONS,\n max: undefined,\n },\n )\n }}</span>\n </template>\n </p>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Actions\" :icon=\"IWrench\">\n <div class=\"py-2 gap-2 flex flex-wrap items-center justify-items-start\">\n <UButton\n class=\"theme-info\"\n size=\"sm\"\n title=\"Refetch this query\"\n :disabled=\"selectedQuery.options?.enabled === false\"\n @click=\"channel.emit('queries:refetch', selectedQuery.key)\"\n >\n <i-lucide-refresh-cw class=\"size-3.5\" /> Refetch\n </UButton>\n\n <UButton\n class=\"theme-neutral\"\n size=\"sm\"\n title=\"Invalidate this query\"\n @click=\"channel.emit('queries:invalidate', selectedQuery.key)\"\n >\n <i-lucide-timer-reset /> Invalidate\n </UButton>\n\n <UButton\n v-if=\"selectedQuery.devtools.simulate !== 'loading'\"\n class=\"theme-purple\"\n size=\"sm\"\n title=\"Restore the previous state\"\n @click=\"channel.emit('queries:simulate:loading', selectedQuery.key)\"\n >\n <i-lucide-loader />\n Simulate loading\n </UButton>\n <UButton\n v-else\n class=\"theme-purple\"\n size=\"sm\"\n title=\"Simulate a loading state\"\n @click=\"channel.emit('queries:simulate:loading:stop', selectedQuery.key)\"\n >\n <i-lucide-loader class=\"animate-spin\" />\n Stop loading\n </UButton>\n\n <UButton\n v-if=\"selectedQuery.devtools.simulate !== 'error'\"\n class=\"theme-error\"\n size=\"sm\"\n title=\"Simulate an Error state\"\n @click=\"channel.emit('queries:simulate:error', selectedQuery.key)\"\n >\n <i-lucide-x-octagon /> Simulate error\n </UButton>\n <UButton\n v-else\n class=\"theme-error\"\n size=\"sm\"\n title=\"Restore the previous state\"\n @click=\"channel.emit('queries:simulate:error:stop', selectedQuery.key)\"\n >\n <i-lucide-rotate-ccw /> Remove error\n </UButton>\n\n <UButton\n class=\"theme-warning\"\n size=\"sm\"\n title=\"Reset this query to its initial (pending) state\"\n @click=\"channel.emit('queries:reset', selectedQuery.key)\"\n >\n <i-lucide-trash /> Reset\n </UButton>\n </div>\n </UCollapse>\n\n <UCollapse v-model:open=\"isDataOpen\" title=\"Data\" :icon=\"IFileText\">\n <div class=\"py-1\">\n <pre\n v-if=\"selectedQuery.state.data !== undefined\"\n class=\"rounded p-1 overflow-auto max-h-[1200px]\"\n >{{ selectedQuery.state.data }}</pre>\n <p v-else class=\"text-neutral-500/50\">\n No data\n </p>\n </div>\n </UCollapse>\n\n <UCollapse\n v-model:open=\"isErrorOpen\"\n :title=\"`Error${selectedQuery.state.status === 'error' ? ' (!)' : ''}`\"\n :icon=\"ICircleX\"\n >\n <div class=\"py-1\">\n <pre v-if=\"selectedQuery.state.error\" class=\"rounded p-1 overflow-auto max-h-[1200px]\">{{\n selectedQuery.state.error\n }}</pre>\n <p v-else class=\"text-neutral-500/50\">\n No error\n </p>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Call count\" :icon=\"ISigmaSquare\" :open=\"false\">\n <div class=\"py-1\">\n <p class=\"grid grid-cols-[auto_1fr] gap-1\">\n <span>Calls:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.total }}</code>\n </span>\n <span>Success:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.succeed }}</code>\n </span>\n <span>Errors:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.errored }}</code>\n </span>\n <span>Cancelled:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.cancelled }}</code>\n </span>\n </p>\n </div>\n </UCollapse>\n\n <UCollapse\n :title=\"`History (${selectedQuery.devtools.history.length})`\"\n :icon=\"IHistory\"\n :open=\"false\"\n >\n <div class=\"py-1\">\n <UCollapse\n v-for=\"entry of selectedQuery.devtools.history\"\n :key=\"entry.updatedAt\"\n :title=\"`Entry nº${entry.id} (${formatTimeAgo(new Date(entry.updatedAt), TIME_AGO_OPTIONS)})`\"\n :open=\"false\"\n >\n <pre class=\"rounded p-1 overflow-auto max-h-[1200px]\">{{ entry }}</pre>\n </UCollapse>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Options\" :open=\"false\" :icon=\"IBraces\">\n <div class=\"py-1\">\n <pre\n v-if=\"selectedQuery.options\"\n class=\"rounded bg-neutral-500/20 p-1 overflow-auto max-h-[1200px]\"\n >{{ selectedQuery.options }}</pre>\n <p v-else>\n This Query entry has no options. It might have been created from the server or manually set with\n <code>queryCache.setQueryData()</code> for prefetching.\n </p>\n </div>\n </UCollapse>\n </template>\n\n <template v-else>\n <div class=\"py-6 mx-auto\">\n <p class=\"flex flex-col text-center items-center gap-2 text-lg px-2\">\n Select a Query to inspect\n <i-lucide-mouse-pointer-click />\n </p>\n </div>\n </template>\n </div>\n</template>\n"],"names":["open","_useModel","__props","scrollIfNeeded","event","scrollOptions","formatDuration","timeInMs","seconds","minutes","route","useRoute","queries","useQueryEntries","selectedQuery","computed","entry","TIME_AGO_OPTIONS","lastUpdate","useTimeAgo","_a","channel","useDuplexChannel","isDataOpen","ref","wasDataOpen","lastStatus","isErrorOpen","watch","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQM,UAAAA,IAAOC,EAAqBC,GAAA,MAEjC;AAED,aAASC,EAAeC,GAAwB;AAC1C,UAAAA,EAAM,kBAAkB,aAAa;AACvC,cAAMC,IAAuC;AAAA,UAC3C,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAU;AAAA,QACZ;AACM,QAAAD,EAAA,OAAO,eAAeC,CAAa;AAAA,MAAA;AAAA,IAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACpBK,SAASC,GAAeC,GAA0B;AACvD,MAAIA,IAAW;AACb,WAAO,GAAG,KAAK,MAAMA,CAAQ,CAAC;AAGhC,QAAMC,IAAUD,IAAW;AAC3B,MAAIA,IAAW;AACb,WAAO,GAAGC,EAAQ,QAAQ,CAAC,CAAC;AAG9B,MAAID,IAAW;AACb,WAAO,GAAG,KAAK,MAAMC,CAAO,CAAC;AAG/B,QAAMC,IAAU,KAAK,MAAMD,IAAU,EAAE;AAEvC,SAAID,IAAW,OACN,GAAGE,CAAO,UAAUA,IAAU,IAAI,MAAM,EAAE,KAK5C,GAFO,KAAK,MAAMA,IAAU,EAAE,CAEtB,IAAIA,IAAU,EAAE,IAAID,IAAU,EAAE;AACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACLM,UAAAE,IAAQC,EAA6B,GACrCC,IAAUC,EAAgB,GAE1BC,IAAgBC,EAAsC,MACnDH,EAAQ,MAAM,KAAK,CAACI,MAAUA,EAAM,OAAON,EAAM,OAAO,OAAO,KAAK,IAC5E,GAEKO,IAAyC;AAAA,MAC7C,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,MAAO,KAAK;AAAA;AAAA,IACnB,GAEMC,IAAaC,EAAW,MAAM;;AAAA,eAAAC,IAAAN,EAAc,UAAd,gBAAAM,EAAqB,SAAS,cAAa;AAAA,OAAG;AAAA,MAChF,GAAGH;AAAA,MACH,gBAAgB;AAAA,IAAA,CACjB,GAoBKI,IAAUC,EAAiB,GAE3BC,IAAaC,EAAI,EAAK;AAC5B,QAAIC,IAAcF,EAAW,OACzBG,IAAqC;AACnC,UAAAC,IAAcH,EAAI,EAAK;AAC7B,WAAAI;AAAA,MACE,MAAM;;AAAA,gBAAAR,IAAAN,EAAc,UAAd,gBAAAM,EAAqB;AAAA;AAAA,MAC3B,CAACS,MAAU;AACT,QAAI,CAACA,KAASH,MAAeG,EAAM,WACnCH,IAAaG,EAAM,QACfA,EAAM,WAAW,WACnBF,EAAY,QAAQ,IAEpBF,IAAcF,EAAW,OACzBA,EAAW,QAAQ,MACVM,EAAM,WAAW,cAC1BN,EAAW,QAAQE,GACnBE,EAAY,QAAQ;AAAA,MACtB;AAAA,IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-panel/{index-Covr4drg.js → index-BdIpA-g4.js} RENAMED Viewed

@@ -6046,7 +6046,9 @@ const Gf = { class: "w-full h-full grid grid-rows-[auto_1fr] bg-ui-bg text-ui-te
     ), Tr(() => {
       r.stop();
     }), jo(() => {
-      o("ready"), r.emit("ping");
+      requestAnimationFrame(() => {
+        o("ready");
+      }), r.emit("ping");
     });
     const n = Dt([]);
     return oo(Ml, n), r.on("queries:all", (i) => {
@@ -7918,30 +7920,30 @@ const Vp = [
   {
     path: "/",
     name: "/",
-    component: () => import("./index-BoUh47CR.js")
+    component: () => import("./index-CAv-3vCR.js")
     /* no children */
   },
   {
     path: "/mutations",
     name: "/mutations",
-    component: () => import("./mutations-ComK9mEg.js")
+    component: () => import("./mutations-BfqfXeMY.js")
     /* no children */
   },
   {
     path: "/queries",
     name: "/queries",
-    component: () => import("./queries-C8H8bbDX.js"),
+    component: () => import("./queries-CE8W5p_h.js"),
     children: [
       {
         path: "",
         name: "/queries/",
-        component: () => import("./index-BkrEntNA.js")
+        component: () => import("./index-DZwqU9e-.js")
         /* no children */
       },
       {
         path: ":queryId",
         name: "/queries/[queryId]",
-        component: () => import("./_queryId_-dahx0N-a.js")
+        component: () => import("./_queryId_-SBAeSmfh.js")
         /* no children */
       }
     ]
@@ -7949,7 +7951,7 @@ const Vp = [
   {
     path: "/settings",
     name: "/settings",
-    component: () => import("./settings-DoijmHf7.js")
+    component: () => import("./settings-DIqJoCBU.js")
     /* no children */
   }
 ];
@@ -8021,4 +8023,4 @@ export {
   Dt as y,
   Be as z
 };
-//# sourceMappingURL=index-Covr4drg.js.map
+//# sourceMappingURL=index-BdIpA-g4.js.map