@tanstack/vue-query 4.9.0
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/LICENSE +21 -0
- package/README.md +83 -0
- package/build/lib/__mocks__/useBaseQuery.d.ts +2 -0
- package/build/lib/__mocks__/useQueryClient.d.ts +3 -0
- package/build/lib/__tests__/mutationCache.test.d.ts +1 -0
- package/build/lib/__tests__/queryCache.test.d.ts +1 -0
- package/build/lib/__tests__/queryClient.test.d.ts +1 -0
- package/build/lib/__tests__/test-utils.d.ts +9 -0
- package/build/lib/__tests__/useInfiniteQuery.test.d.ts +1 -0
- package/build/lib/__tests__/useIsFetching.test.d.ts +1 -0
- package/build/lib/__tests__/useIsMutating.test.d.ts +1 -0
- package/build/lib/__tests__/useMutation.test.d.ts +1 -0
- package/build/lib/__tests__/useQueries.test.d.ts +1 -0
- package/build/lib/__tests__/useQuery.test.d.ts +1 -0
- package/build/lib/__tests__/useQueryClient.test.d.ts +1 -0
- package/build/lib/__tests__/utils.test.d.ts +1 -0
- package/build/lib/__tests__/vueQueryPlugin.test.d.ts +1 -0
- package/build/lib/devtools/devtools.d.ts +2 -0
- package/build/lib/devtools/devtools.esm.js +163 -0
- package/build/lib/devtools/devtools.esm.js.map +1 -0
- package/build/lib/devtools/devtools.js +167 -0
- package/build/lib/devtools/devtools.js.map +1 -0
- package/build/lib/devtools/devtools.mjs +163 -0
- package/build/lib/devtools/devtools.mjs.map +1 -0
- package/build/lib/devtools/utils.d.ts +15 -0
- package/build/lib/devtools/utils.esm.js +103 -0
- package/build/lib/devtools/utils.esm.js.map +1 -0
- package/build/lib/devtools/utils.js +111 -0
- package/build/lib/devtools/utils.js.map +1 -0
- package/build/lib/devtools/utils.mjs +103 -0
- package/build/lib/devtools/utils.mjs.map +1 -0
- package/build/lib/index.d.ts +21 -0
- package/build/lib/index.esm.js +14 -0
- package/build/lib/index.esm.js.map +1 -0
- package/build/lib/index.js +39 -0
- package/build/lib/index.js.map +1 -0
- package/build/lib/index.mjs +14 -0
- package/build/lib/index.mjs.map +1 -0
- package/build/lib/mutationCache.d.ts +7 -0
- package/build/lib/mutationCache.esm.js +16 -0
- package/build/lib/mutationCache.esm.js.map +1 -0
- package/build/lib/mutationCache.js +20 -0
- package/build/lib/mutationCache.js.map +1 -0
- package/build/lib/mutationCache.mjs +16 -0
- package/build/lib/mutationCache.mjs.map +1 -0
- package/build/lib/queryCache.d.ts +9 -0
- package/build/lib/queryCache.esm.js +25 -0
- package/build/lib/queryCache.esm.js.map +1 -0
- package/build/lib/queryCache.js +29 -0
- package/build/lib/queryCache.js.map +1 -0
- package/build/lib/queryCache.mjs +25 -0
- package/build/lib/queryCache.mjs.map +1 -0
- package/build/lib/queryClient.d.ts +43 -0
- package/build/lib/queryClient.esm.js +173 -0
- package/build/lib/queryClient.esm.js.map +1 -0
- package/build/lib/queryClient.js +177 -0
- package/build/lib/queryClient.js.map +1 -0
- package/build/lib/queryClient.mjs +173 -0
- package/build/lib/queryClient.mjs.map +1 -0
- package/build/lib/types.d.ts +17 -0
- package/build/lib/useBaseQuery.d.ts +10 -0
- package/build/lib/useBaseQuery.esm.js +80 -0
- package/build/lib/useBaseQuery.esm.js.map +1 -0
- package/build/lib/useBaseQuery.js +84 -0
- package/build/lib/useBaseQuery.js.map +1 -0
- package/build/lib/useBaseQuery.mjs +80 -0
- package/build/lib/useBaseQuery.mjs.map +1 -0
- package/build/lib/useInfiniteQuery.d.ts +16 -0
- package/build/lib/useInfiniteQuery.esm.js +15 -0
- package/build/lib/useInfiniteQuery.esm.js.map +1 -0
- package/build/lib/useInfiniteQuery.js +19 -0
- package/build/lib/useInfiniteQuery.js.map +1 -0
- package/build/lib/useInfiniteQuery.mjs +15 -0
- package/build/lib/useInfiniteQuery.mjs.map +1 -0
- package/build/lib/useIsFetching.d.ts +7 -0
- package/build/lib/useIsFetching.esm.js +40 -0
- package/build/lib/useIsFetching.esm.js.map +1 -0
- package/build/lib/useIsFetching.js +45 -0
- package/build/lib/useIsFetching.js.map +1 -0
- package/build/lib/useIsFetching.mjs +40 -0
- package/build/lib/useIsFetching.mjs.map +1 -0
- package/build/lib/useIsMutating.d.ts +7 -0
- package/build/lib/useIsMutating.esm.js +40 -0
- package/build/lib/useIsMutating.esm.js.map +1 -0
- package/build/lib/useIsMutating.js +45 -0
- package/build/lib/useIsMutating.js.map +1 -0
- package/build/lib/useIsMutating.mjs +40 -0
- package/build/lib/useIsMutating.mjs.map +1 -0
- package/build/lib/useMutation.d.ts +17 -0
- package/build/lib/useMutation.esm.js +64 -0
- package/build/lib/useMutation.esm.js.map +1 -0
- package/build/lib/useMutation.js +69 -0
- package/build/lib/useMutation.js.map +1 -0
- package/build/lib/useMutation.mjs +64 -0
- package/build/lib/useMutation.mjs.map +1 -0
- package/build/lib/useQueries.d.ts +49 -0
- package/build/lib/useQueries.esm.js +38 -0
- package/build/lib/useQueries.esm.js.map +1 -0
- package/build/lib/useQueries.js +42 -0
- package/build/lib/useQueries.js.map +1 -0
- package/build/lib/useQueries.mjs +38 -0
- package/build/lib/useQueries.mjs.map +1 -0
- package/build/lib/useQuery.d.ts +36 -0
- package/build/lib/useQuery.esm.js +13 -0
- package/build/lib/useQuery.esm.js.map +1 -0
- package/build/lib/useQuery.js +17 -0
- package/build/lib/useQuery.js.map +1 -0
- package/build/lib/useQuery.mjs +13 -0
- package/build/lib/useQuery.mjs.map +1 -0
- package/build/lib/useQueryClient.d.ts +2 -0
- package/build/lib/useQueryClient.esm.js +24 -0
- package/build/lib/useQueryClient.esm.js.map +1 -0
- package/build/lib/useQueryClient.js +28 -0
- package/build/lib/useQueryClient.js.map +1 -0
- package/build/lib/useQueryClient.mjs +24 -0
- package/build/lib/useQueryClient.mjs.map +1 -0
- package/build/lib/utils.d.ts +8 -0
- package/build/lib/utils.esm.js +55 -0
- package/build/lib/utils.esm.js.map +1 -0
- package/build/lib/utils.js +64 -0
- package/build/lib/utils.js.map +1 -0
- package/build/lib/utils.mjs +55 -0
- package/build/lib/utils.mjs.map +1 -0
- package/build/lib/vueQueryPlugin.d.ts +27 -0
- package/build/lib/vueQueryPlugin.esm.js +80 -0
- package/build/lib/vueQueryPlugin.esm.js.map +1 -0
- package/build/lib/vueQueryPlugin.js +84 -0
- package/build/lib/vueQueryPlugin.js.map +1 -0
- package/build/lib/vueQueryPlugin.mjs +80 -0
- package/build/lib/vueQueryPlugin.mjs.map +1 -0
- package/build/umd/index.development.js +5024 -0
- package/build/umd/index.development.js.map +1 -0
- package/build/umd/index.production.js +2 -0
- package/build/umd/index.production.js.map +1 -0
- package/package.json +55 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Tanner Linsley
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[](https://github.com/TanStack/query/tree/main/packages/vue-query)
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@tanstack/vue-query)
|
|
4
|
+
[](https://github.com/TanStack/query/blob/main/LICENSE)
|
|
5
|
+
[](https://bundlephobia.com/package/@tanstack/vue-query)
|
|
6
|
+
[](https://www.npmjs.com/package/@tanstack/vue-query)
|
|
7
|
+
|
|
8
|
+
# Vue Query
|
|
9
|
+
|
|
10
|
+
Hooks for fetching, caching and updating asynchronous data in Vue.
|
|
11
|
+
|
|
12
|
+
Support for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi)
|
|
13
|
+
|
|
14
|
+
# Documentation
|
|
15
|
+
|
|
16
|
+
Visit https://tanstack.com/query/v4/docs/adapters/vue-query
|
|
17
|
+
|
|
18
|
+
# Quick Features
|
|
19
|
+
|
|
20
|
+
- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
|
|
21
|
+
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
|
|
22
|
+
- Parallel + Dependent Queries
|
|
23
|
+
- Mutations + Reactive Query Refetching
|
|
24
|
+
- Multi-layer Cache + Automatic Garbage Collection
|
|
25
|
+
- Paginated + Cursor-based Queries
|
|
26
|
+
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
|
|
27
|
+
- Request Cancellation
|
|
28
|
+
- (experimental) [Suspense](https://v3.vuejs.org/guide/migration/suspense.html#introduction) + Fetch-As-You-Render Query Prefetching
|
|
29
|
+
- (experimental) SSR support
|
|
30
|
+
- Dedicated Devtools
|
|
31
|
+
- [](https://bundlephobia.com/package/@tanstack/vue-query) (depending on features imported)
|
|
32
|
+
|
|
33
|
+
# Quick Start
|
|
34
|
+
|
|
35
|
+
1. Install `vue-query`
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
$ npm i @tanstack/vue-query
|
|
39
|
+
# or
|
|
40
|
+
$ pnpm add @tanstack/vue-query
|
|
41
|
+
# or
|
|
42
|
+
$ yarn add @tanstack/vue-query
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
> If you are using Vue 2.6, make sure to also setup [@vue/composition-api](https://github.com/vuejs/composition-api)
|
|
46
|
+
|
|
47
|
+
2. Initialize **Vue Query** via **VueQueryPlugin**
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
import { createApp } from "vue";
|
|
51
|
+
import { VueQueryPlugin } from "vue-query";
|
|
52
|
+
|
|
53
|
+
import App from "./App.vue";
|
|
54
|
+
|
|
55
|
+
createApp(App).use(VueQueryPlugin).mount("#app");
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
3. Use query
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import { defineComponent } from "vue";
|
|
62
|
+
import { useQuery } from "vue-query";
|
|
63
|
+
|
|
64
|
+
export default defineComponent({
|
|
65
|
+
name: "MyComponent",
|
|
66
|
+
setup() {
|
|
67
|
+
const query = useQuery(["todos"], getTodos);
|
|
68
|
+
|
|
69
|
+
return {
|
|
70
|
+
query,
|
|
71
|
+
};
|
|
72
|
+
},
|
|
73
|
+
});
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
4. If you need to update options on your query dynamically, make sure to pass them as reactive variables
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
const id = ref(1);
|
|
80
|
+
const enabled = ref(false);
|
|
81
|
+
|
|
82
|
+
const query = useQuery(["todos", id], () => getTodos(id), { enabled });
|
|
83
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare function flushPromises(timeout?: number): Promise<unknown>;
|
|
2
|
+
export declare function simpleFetcher(): Promise<string>;
|
|
3
|
+
export declare function getSimpleFetcherWithReturnData(returnData: unknown): () => Promise<unknown>;
|
|
4
|
+
export declare function infiniteFetcher({ pageParam, }: {
|
|
5
|
+
pageParam?: number;
|
|
6
|
+
}): Promise<string>;
|
|
7
|
+
export declare function rejectFetcher(): Promise<Error>;
|
|
8
|
+
export declare function successMutator<T>(param: T): Promise<T>;
|
|
9
|
+
export declare function errorMutator<T>(_: T): Promise<Error>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { setupDevtoolsPlugin } from '@vue/devtools-api';
|
|
2
|
+
import { matchSorter } from 'match-sorter';
|
|
3
|
+
import { sortFns, getQueryStateLabel, getQueryStatusFg, getQueryStatusBg } from './utils.esm.js';
|
|
4
|
+
|
|
5
|
+
/* istanbul ignore file */
|
|
6
|
+
const pluginId = 'vue-query';
|
|
7
|
+
const pluginName = 'Vue Query';
|
|
8
|
+
function setupDevtools(app, queryClient) {
|
|
9
|
+
setupDevtoolsPlugin({
|
|
10
|
+
id: pluginId,
|
|
11
|
+
label: pluginName,
|
|
12
|
+
packageName: 'vue-query',
|
|
13
|
+
homepage: 'https://github.com/DamianOsipiuk/vue-query',
|
|
14
|
+
logo: 'https://vue-query.vercel.app/vue-query.svg',
|
|
15
|
+
app,
|
|
16
|
+
settings: {
|
|
17
|
+
baseSort: {
|
|
18
|
+
type: 'choice',
|
|
19
|
+
component: 'button-group',
|
|
20
|
+
label: 'Sort Cache Entries',
|
|
21
|
+
options: [{
|
|
22
|
+
label: 'ASC',
|
|
23
|
+
value: 1
|
|
24
|
+
}, {
|
|
25
|
+
label: 'DESC',
|
|
26
|
+
value: -1
|
|
27
|
+
}],
|
|
28
|
+
defaultValue: 1
|
|
29
|
+
},
|
|
30
|
+
sortFn: {
|
|
31
|
+
type: 'choice',
|
|
32
|
+
label: 'Sort Function',
|
|
33
|
+
options: Object.keys(sortFns).map(key => ({
|
|
34
|
+
label: key,
|
|
35
|
+
value: key
|
|
36
|
+
})),
|
|
37
|
+
defaultValue: Object.keys(sortFns)[0]
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}, api => {
|
|
41
|
+
const queryCache = queryClient.getQueryCache();
|
|
42
|
+
api.addInspector({
|
|
43
|
+
id: pluginId,
|
|
44
|
+
label: pluginName,
|
|
45
|
+
icon: 'api',
|
|
46
|
+
nodeActions: [{
|
|
47
|
+
icon: 'cloud_download',
|
|
48
|
+
tooltip: 'Refetch',
|
|
49
|
+
action: queryHash => {
|
|
50
|
+
var _queryCache$get;
|
|
51
|
+
|
|
52
|
+
(_queryCache$get = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get.fetch();
|
|
53
|
+
}
|
|
54
|
+
}, {
|
|
55
|
+
icon: 'alarm',
|
|
56
|
+
tooltip: 'Invalidate',
|
|
57
|
+
action: queryHash => {
|
|
58
|
+
const query = queryCache.get(queryHash);
|
|
59
|
+
queryClient.invalidateQueries(query.queryKey);
|
|
60
|
+
}
|
|
61
|
+
}, {
|
|
62
|
+
icon: 'settings_backup_restore',
|
|
63
|
+
tooltip: 'Reset',
|
|
64
|
+
action: queryHash => {
|
|
65
|
+
var _queryCache$get2;
|
|
66
|
+
|
|
67
|
+
(_queryCache$get2 = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get2.reset();
|
|
68
|
+
}
|
|
69
|
+
}, {
|
|
70
|
+
icon: 'delete',
|
|
71
|
+
tooltip: 'Remove',
|
|
72
|
+
action: queryHash => {
|
|
73
|
+
const query = queryCache.get(queryHash);
|
|
74
|
+
queryCache.remove(query);
|
|
75
|
+
}
|
|
76
|
+
}]
|
|
77
|
+
});
|
|
78
|
+
api.addTimelineLayer({
|
|
79
|
+
id: pluginId,
|
|
80
|
+
label: pluginName,
|
|
81
|
+
color: 0xffd94c
|
|
82
|
+
});
|
|
83
|
+
queryCache.subscribe(event => {
|
|
84
|
+
api.sendInspectorTree(pluginId);
|
|
85
|
+
api.sendInspectorState(pluginId);
|
|
86
|
+
|
|
87
|
+
if ( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
88
|
+
event && ['queryAdded', 'queryRemoved', 'queryUpdated'].includes(event.type)) {
|
|
89
|
+
api.addTimelineEvent({
|
|
90
|
+
layerId: pluginId,
|
|
91
|
+
event: {
|
|
92
|
+
title: event.type,
|
|
93
|
+
subtitle: event.query.queryHash,
|
|
94
|
+
time: api.now(),
|
|
95
|
+
data: {
|
|
96
|
+
queryHash: event.query.queryHash,
|
|
97
|
+
...event
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
api.on.getInspectorTree(payload => {
|
|
104
|
+
if (payload.inspectorId === pluginId) {
|
|
105
|
+
const queries = queryCache.getAll();
|
|
106
|
+
const settings = api.getSettings();
|
|
107
|
+
const filtered = matchSorter(queries, payload.filter, {
|
|
108
|
+
keys: ['queryHash'],
|
|
109
|
+
baseSort: (a, b) => sortFns[settings.sortFn](a.item, b.item) * settings.baseSort
|
|
110
|
+
});
|
|
111
|
+
const nodes = filtered.map(query => {
|
|
112
|
+
const stateLabel = getQueryStateLabel(query);
|
|
113
|
+
return {
|
|
114
|
+
id: query.queryHash,
|
|
115
|
+
label: query.queryHash,
|
|
116
|
+
tags: [{
|
|
117
|
+
label: stateLabel + " [" + query.getObserversCount() + "]",
|
|
118
|
+
textColor: getQueryStatusFg(query),
|
|
119
|
+
backgroundColor: getQueryStatusBg(query)
|
|
120
|
+
}]
|
|
121
|
+
};
|
|
122
|
+
});
|
|
123
|
+
payload.rootNodes = nodes;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
api.on.getInspectorState(payload => {
|
|
127
|
+
if (payload.inspectorId === pluginId) {
|
|
128
|
+
const query = queryCache.get(payload.nodeId);
|
|
129
|
+
|
|
130
|
+
if (!query) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
payload.state = {
|
|
135
|
+
' Query Details': [{
|
|
136
|
+
key: 'Query key',
|
|
137
|
+
value: query.queryHash
|
|
138
|
+
}, {
|
|
139
|
+
key: 'Query status',
|
|
140
|
+
value: getQueryStateLabel(query)
|
|
141
|
+
}, {
|
|
142
|
+
key: 'Observers',
|
|
143
|
+
value: query.getObserversCount()
|
|
144
|
+
}, {
|
|
145
|
+
key: 'Last Updated',
|
|
146
|
+
value: new Date(query.state.dataUpdatedAt).toLocaleTimeString()
|
|
147
|
+
}],
|
|
148
|
+
'Data Explorer': [{
|
|
149
|
+
key: 'Data',
|
|
150
|
+
value: query.state.data
|
|
151
|
+
}],
|
|
152
|
+
'Query Explorer': [{
|
|
153
|
+
key: 'Query',
|
|
154
|
+
value: query
|
|
155
|
+
}]
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
export { setupDevtools };
|
|
163
|
+
//# sourceMappingURL=devtools.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"devtools.esm.js","sources":["../../../src/devtools/devtools.ts"],"sourcesContent":["/* istanbul ignore file */\n\nimport { setupDevtoolsPlugin } from '@vue/devtools-api'\nimport type { CustomInspectorNode } from '@vue/devtools-api'\nimport { matchSorter } from 'match-sorter'\nimport type { Query } from '@tanstack/query-core'\nimport type { QueryClient } from '../queryClient'\nimport {\n getQueryStateLabel,\n getQueryStatusBg,\n getQueryStatusFg,\n sortFns,\n} from './utils'\n\nconst pluginId = 'vue-query'\nconst pluginName = 'Vue Query'\n\nexport function setupDevtools(app: any, queryClient: QueryClient) {\n setupDevtoolsPlugin(\n {\n id: pluginId,\n label: pluginName,\n packageName: 'vue-query',\n homepage: 'https://github.com/DamianOsipiuk/vue-query',\n logo: 'https://vue-query.vercel.app/vue-query.svg',\n app,\n settings: {\n baseSort: {\n type: 'choice',\n component: 'button-group',\n label: 'Sort Cache Entries',\n options: [\n {\n label: 'ASC',\n value: 1,\n },\n {\n label: 'DESC',\n value: -1,\n },\n ],\n defaultValue: 1,\n },\n sortFn: {\n type: 'choice',\n label: 'Sort Function',\n options: Object.keys(sortFns).map((key) => ({\n label: key,\n value: key,\n })),\n defaultValue: Object.keys(sortFns)[0]!,\n },\n },\n },\n (api) => {\n const queryCache = queryClient.getQueryCache()\n\n api.addInspector({\n id: pluginId,\n label: pluginName,\n icon: 'api',\n nodeActions: [\n {\n icon: 'cloud_download',\n tooltip: 'Refetch',\n action: (queryHash: string) => {\n queryCache.get(queryHash)?.fetch()\n },\n },\n {\n icon: 'alarm',\n tooltip: 'Invalidate',\n action: (queryHash: string) => {\n const query = queryCache.get(queryHash) as Query\n queryClient.invalidateQueries(query.queryKey)\n },\n },\n {\n icon: 'settings_backup_restore',\n tooltip: 'Reset',\n action: (queryHash: string) => {\n queryCache.get(queryHash)?.reset()\n },\n },\n {\n icon: 'delete',\n tooltip: 'Remove',\n action: (queryHash: string) => {\n const query = queryCache.get(queryHash) as Query\n queryCache.remove(query)\n },\n },\n ],\n })\n\n api.addTimelineLayer({\n id: pluginId,\n label: pluginName,\n color: 0xffd94c,\n })\n\n queryCache.subscribe((event) => {\n api.sendInspectorTree(pluginId)\n api.sendInspectorState(pluginId)\n\n if (\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n event &&\n ['queryAdded', 'queryRemoved', 'queryUpdated'].includes(event.type)\n ) {\n api.addTimelineEvent({\n layerId: pluginId,\n event: {\n title: event.type,\n subtitle: event.query.queryHash,\n time: api.now(),\n data: {\n queryHash: event.query.queryHash,\n ...event,\n },\n },\n })\n }\n })\n\n api.on.getInspectorTree((payload) => {\n if (payload.inspectorId === pluginId) {\n const queries: Query[] = queryCache.getAll()\n const settings = api.getSettings()\n const filtered = matchSorter(queries, payload.filter, {\n keys: ['queryHash'],\n baseSort: (a, b) =>\n sortFns[settings.sortFn]!(a.item, b.item) * settings.baseSort,\n })\n\n const nodes: CustomInspectorNode[] = filtered.map((query) => {\n const stateLabel = getQueryStateLabel(query)\n\n return {\n id: query.queryHash,\n label: query.queryHash,\n tags: [\n {\n label: `${stateLabel} [${query.getObserversCount()}]`,\n textColor: getQueryStatusFg(query),\n backgroundColor: getQueryStatusBg(query),\n },\n ],\n }\n })\n payload.rootNodes = nodes\n }\n })\n\n api.on.getInspectorState((payload) => {\n if (payload.inspectorId === pluginId) {\n const query = queryCache.get(payload.nodeId)\n\n if (!query) {\n return\n }\n\n payload.state = {\n ' Query Details': [\n {\n key: 'Query key',\n value: query.queryHash as string,\n },\n {\n key: 'Query status',\n value: getQueryStateLabel(query),\n },\n {\n key: 'Observers',\n value: query.getObserversCount(),\n },\n {\n key: 'Last Updated',\n value: new Date(query.state.dataUpdatedAt).toLocaleTimeString(),\n },\n ],\n 'Data Explorer': [\n {\n key: 'Data',\n value: query.state.data,\n },\n ],\n 'Query Explorer': [\n {\n key: 'Query',\n value: query,\n },\n ],\n }\n }\n })\n },\n )\n}\n"],"names":["pluginId","pluginName","setupDevtools","app","queryClient","setupDevtoolsPlugin","id","label","packageName","homepage","logo","settings","baseSort","type","component","options","value","defaultValue","sortFn","Object","keys","sortFns","map","key","api","queryCache","getQueryCache","addInspector","icon","nodeActions","tooltip","action","queryHash","get","fetch","query","invalidateQueries","queryKey","reset","remove","addTimelineLayer","color","subscribe","event","sendInspectorTree","sendInspectorState","includes","addTimelineEvent","layerId","title","subtitle","time","now","data","on","getInspectorTree","payload","inspectorId","queries","getAll","getSettings","filtered","matchSorter","filter","a","b","item","nodes","stateLabel","getQueryStateLabel","tags","getObserversCount","textColor","getQueryStatusFg","backgroundColor","getQueryStatusBg","rootNodes","getInspectorState","nodeId","state","Date","dataUpdatedAt","toLocaleTimeString"],"mappings":"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"}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var devtoolsApi = require('@vue/devtools-api');
|
|
6
|
+
var matchSorter = require('match-sorter');
|
|
7
|
+
var utils = require('./utils.js');
|
|
8
|
+
|
|
9
|
+
/* istanbul ignore file */
|
|
10
|
+
const pluginId = 'vue-query';
|
|
11
|
+
const pluginName = 'Vue Query';
|
|
12
|
+
function setupDevtools(app, queryClient) {
|
|
13
|
+
devtoolsApi.setupDevtoolsPlugin({
|
|
14
|
+
id: pluginId,
|
|
15
|
+
label: pluginName,
|
|
16
|
+
packageName: 'vue-query',
|
|
17
|
+
homepage: 'https://github.com/DamianOsipiuk/vue-query',
|
|
18
|
+
logo: 'https://vue-query.vercel.app/vue-query.svg',
|
|
19
|
+
app,
|
|
20
|
+
settings: {
|
|
21
|
+
baseSort: {
|
|
22
|
+
type: 'choice',
|
|
23
|
+
component: 'button-group',
|
|
24
|
+
label: 'Sort Cache Entries',
|
|
25
|
+
options: [{
|
|
26
|
+
label: 'ASC',
|
|
27
|
+
value: 1
|
|
28
|
+
}, {
|
|
29
|
+
label: 'DESC',
|
|
30
|
+
value: -1
|
|
31
|
+
}],
|
|
32
|
+
defaultValue: 1
|
|
33
|
+
},
|
|
34
|
+
sortFn: {
|
|
35
|
+
type: 'choice',
|
|
36
|
+
label: 'Sort Function',
|
|
37
|
+
options: Object.keys(utils.sortFns).map(key => ({
|
|
38
|
+
label: key,
|
|
39
|
+
value: key
|
|
40
|
+
})),
|
|
41
|
+
defaultValue: Object.keys(utils.sortFns)[0]
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}, api => {
|
|
45
|
+
const queryCache = queryClient.getQueryCache();
|
|
46
|
+
api.addInspector({
|
|
47
|
+
id: pluginId,
|
|
48
|
+
label: pluginName,
|
|
49
|
+
icon: 'api',
|
|
50
|
+
nodeActions: [{
|
|
51
|
+
icon: 'cloud_download',
|
|
52
|
+
tooltip: 'Refetch',
|
|
53
|
+
action: queryHash => {
|
|
54
|
+
var _queryCache$get;
|
|
55
|
+
|
|
56
|
+
(_queryCache$get = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get.fetch();
|
|
57
|
+
}
|
|
58
|
+
}, {
|
|
59
|
+
icon: 'alarm',
|
|
60
|
+
tooltip: 'Invalidate',
|
|
61
|
+
action: queryHash => {
|
|
62
|
+
const query = queryCache.get(queryHash);
|
|
63
|
+
queryClient.invalidateQueries(query.queryKey);
|
|
64
|
+
}
|
|
65
|
+
}, {
|
|
66
|
+
icon: 'settings_backup_restore',
|
|
67
|
+
tooltip: 'Reset',
|
|
68
|
+
action: queryHash => {
|
|
69
|
+
var _queryCache$get2;
|
|
70
|
+
|
|
71
|
+
(_queryCache$get2 = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get2.reset();
|
|
72
|
+
}
|
|
73
|
+
}, {
|
|
74
|
+
icon: 'delete',
|
|
75
|
+
tooltip: 'Remove',
|
|
76
|
+
action: queryHash => {
|
|
77
|
+
const query = queryCache.get(queryHash);
|
|
78
|
+
queryCache.remove(query);
|
|
79
|
+
}
|
|
80
|
+
}]
|
|
81
|
+
});
|
|
82
|
+
api.addTimelineLayer({
|
|
83
|
+
id: pluginId,
|
|
84
|
+
label: pluginName,
|
|
85
|
+
color: 0xffd94c
|
|
86
|
+
});
|
|
87
|
+
queryCache.subscribe(event => {
|
|
88
|
+
api.sendInspectorTree(pluginId);
|
|
89
|
+
api.sendInspectorState(pluginId);
|
|
90
|
+
|
|
91
|
+
if ( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
92
|
+
event && ['queryAdded', 'queryRemoved', 'queryUpdated'].includes(event.type)) {
|
|
93
|
+
api.addTimelineEvent({
|
|
94
|
+
layerId: pluginId,
|
|
95
|
+
event: {
|
|
96
|
+
title: event.type,
|
|
97
|
+
subtitle: event.query.queryHash,
|
|
98
|
+
time: api.now(),
|
|
99
|
+
data: {
|
|
100
|
+
queryHash: event.query.queryHash,
|
|
101
|
+
...event
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
api.on.getInspectorTree(payload => {
|
|
108
|
+
if (payload.inspectorId === pluginId) {
|
|
109
|
+
const queries = queryCache.getAll();
|
|
110
|
+
const settings = api.getSettings();
|
|
111
|
+
const filtered = matchSorter.matchSorter(queries, payload.filter, {
|
|
112
|
+
keys: ['queryHash'],
|
|
113
|
+
baseSort: (a, b) => utils.sortFns[settings.sortFn](a.item, b.item) * settings.baseSort
|
|
114
|
+
});
|
|
115
|
+
const nodes = filtered.map(query => {
|
|
116
|
+
const stateLabel = utils.getQueryStateLabel(query);
|
|
117
|
+
return {
|
|
118
|
+
id: query.queryHash,
|
|
119
|
+
label: query.queryHash,
|
|
120
|
+
tags: [{
|
|
121
|
+
label: stateLabel + " [" + query.getObserversCount() + "]",
|
|
122
|
+
textColor: utils.getQueryStatusFg(query),
|
|
123
|
+
backgroundColor: utils.getQueryStatusBg(query)
|
|
124
|
+
}]
|
|
125
|
+
};
|
|
126
|
+
});
|
|
127
|
+
payload.rootNodes = nodes;
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
api.on.getInspectorState(payload => {
|
|
131
|
+
if (payload.inspectorId === pluginId) {
|
|
132
|
+
const query = queryCache.get(payload.nodeId);
|
|
133
|
+
|
|
134
|
+
if (!query) {
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
payload.state = {
|
|
139
|
+
' Query Details': [{
|
|
140
|
+
key: 'Query key',
|
|
141
|
+
value: query.queryHash
|
|
142
|
+
}, {
|
|
143
|
+
key: 'Query status',
|
|
144
|
+
value: utils.getQueryStateLabel(query)
|
|
145
|
+
}, {
|
|
146
|
+
key: 'Observers',
|
|
147
|
+
value: query.getObserversCount()
|
|
148
|
+
}, {
|
|
149
|
+
key: 'Last Updated',
|
|
150
|
+
value: new Date(query.state.dataUpdatedAt).toLocaleTimeString()
|
|
151
|
+
}],
|
|
152
|
+
'Data Explorer': [{
|
|
153
|
+
key: 'Data',
|
|
154
|
+
value: query.state.data
|
|
155
|
+
}],
|
|
156
|
+
'Query Explorer': [{
|
|
157
|
+
key: 'Query',
|
|
158
|
+
value: query
|
|
159
|
+
}]
|
|
160
|
+
};
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
exports.setupDevtools = setupDevtools;
|
|
167
|
+
//# sourceMappingURL=devtools.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"devtools.js","sources":["../../../src/devtools/devtools.ts"],"sourcesContent":["/* istanbul ignore file */\n\nimport { setupDevtoolsPlugin } from '@vue/devtools-api'\nimport type { CustomInspectorNode } from '@vue/devtools-api'\nimport { matchSorter } from 'match-sorter'\nimport type { Query } from '@tanstack/query-core'\nimport type { QueryClient } from '../queryClient'\nimport {\n getQueryStateLabel,\n getQueryStatusBg,\n getQueryStatusFg,\n sortFns,\n} from './utils'\n\nconst pluginId = 'vue-query'\nconst pluginName = 'Vue Query'\n\nexport function setupDevtools(app: any, queryClient: QueryClient) {\n setupDevtoolsPlugin(\n {\n id: pluginId,\n label: pluginName,\n packageName: 'vue-query',\n homepage: 'https://github.com/DamianOsipiuk/vue-query',\n logo: 'https://vue-query.vercel.app/vue-query.svg',\n app,\n settings: {\n baseSort: {\n type: 'choice',\n component: 'button-group',\n label: 'Sort Cache Entries',\n options: [\n {\n label: 'ASC',\n value: 1,\n },\n {\n label: 'DESC',\n value: -1,\n },\n ],\n defaultValue: 1,\n },\n sortFn: {\n type: 'choice',\n label: 'Sort Function',\n options: Object.keys(sortFns).map((key) => ({\n label: key,\n value: key,\n })),\n defaultValue: Object.keys(sortFns)[0]!,\n },\n },\n },\n (api) => {\n const queryCache = queryClient.getQueryCache()\n\n api.addInspector({\n id: pluginId,\n label: pluginName,\n icon: 'api',\n nodeActions: [\n {\n icon: 'cloud_download',\n tooltip: 'Refetch',\n action: (queryHash: string) => {\n queryCache.get(queryHash)?.fetch()\n },\n },\n {\n icon: 'alarm',\n tooltip: 'Invalidate',\n action: (queryHash: string) => {\n const query = queryCache.get(queryHash) as Query\n queryClient.invalidateQueries(query.queryKey)\n },\n },\n {\n icon: 'settings_backup_restore',\n tooltip: 'Reset',\n action: (queryHash: string) => {\n queryCache.get(queryHash)?.reset()\n },\n },\n {\n icon: 'delete',\n tooltip: 'Remove',\n action: (queryHash: string) => {\n const query = queryCache.get(queryHash) as Query\n queryCache.remove(query)\n },\n },\n ],\n })\n\n api.addTimelineLayer({\n id: pluginId,\n label: pluginName,\n color: 0xffd94c,\n })\n\n queryCache.subscribe((event) => {\n api.sendInspectorTree(pluginId)\n api.sendInspectorState(pluginId)\n\n if (\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n event &&\n ['queryAdded', 'queryRemoved', 'queryUpdated'].includes(event.type)\n ) {\n api.addTimelineEvent({\n layerId: pluginId,\n event: {\n title: event.type,\n subtitle: event.query.queryHash,\n time: api.now(),\n data: {\n queryHash: event.query.queryHash,\n ...event,\n },\n },\n })\n }\n })\n\n api.on.getInspectorTree((payload) => {\n if (payload.inspectorId === pluginId) {\n const queries: Query[] = queryCache.getAll()\n const settings = api.getSettings()\n const filtered = matchSorter(queries, payload.filter, {\n keys: ['queryHash'],\n baseSort: (a, b) =>\n sortFns[settings.sortFn]!(a.item, b.item) * settings.baseSort,\n })\n\n const nodes: CustomInspectorNode[] = filtered.map((query) => {\n const stateLabel = getQueryStateLabel(query)\n\n return {\n id: query.queryHash,\n label: query.queryHash,\n tags: [\n {\n label: `${stateLabel} [${query.getObserversCount()}]`,\n textColor: getQueryStatusFg(query),\n backgroundColor: getQueryStatusBg(query),\n },\n ],\n }\n })\n payload.rootNodes = nodes\n }\n })\n\n api.on.getInspectorState((payload) => {\n if (payload.inspectorId === pluginId) {\n const query = queryCache.get(payload.nodeId)\n\n if (!query) {\n return\n }\n\n payload.state = {\n ' Query Details': [\n {\n key: 'Query key',\n value: query.queryHash as string,\n },\n {\n key: 'Query status',\n value: getQueryStateLabel(query),\n },\n {\n key: 'Observers',\n value: query.getObserversCount(),\n },\n {\n key: 'Last Updated',\n value: new Date(query.state.dataUpdatedAt).toLocaleTimeString(),\n },\n ],\n 'Data Explorer': [\n {\n key: 'Data',\n value: query.state.data,\n },\n ],\n 'Query Explorer': [\n {\n key: 'Query',\n value: query,\n },\n ],\n }\n }\n })\n },\n )\n}\n"],"names":["pluginId","pluginName","setupDevtools","app","queryClient","setupDevtoolsPlugin","id","label","packageName","homepage","logo","settings","baseSort","type","component","options","value","defaultValue","sortFn","Object","keys","sortFns","map","key","api","queryCache","getQueryCache","addInspector","icon","nodeActions","tooltip","action","queryHash","get","fetch","query","invalidateQueries","queryKey","reset","remove","addTimelineLayer","color","subscribe","event","sendInspectorTree","sendInspectorState","includes","addTimelineEvent","layerId","title","subtitle","time","now","data","on","getInspectorTree","payload","inspectorId","queries","getAll","getSettings","filtered","matchSorter","filter","a","b","item","nodes","stateLabel","getQueryStateLabel","tags","getObserversCount","textColor","getQueryStatusFg","backgroundColor","getQueryStatusBg","rootNodes","getInspectorState","nodeId","state","Date","dataUpdatedAt","toLocaleTimeString"],"mappings":";;;;;;;;AAAA;AAcA,MAAMA,QAAQ,GAAG,WAAjB,CAAA;AACA,MAAMC,UAAU,GAAG,WAAnB,CAAA;AAEO,SAASC,aAAT,CAAuBC,GAAvB,EAAiCC,WAAjC,EAA2D;AAChEC,EAAAA,+BAAmB,CACjB;AACEC,IAAAA,EAAE,EAAEN,QADN;AAEEO,IAAAA,KAAK,EAAEN,UAFT;AAGEO,IAAAA,WAAW,EAAE,WAHf;AAIEC,IAAAA,QAAQ,EAAE,4CAJZ;AAKEC,IAAAA,IAAI,EAAE,4CALR;IAMEP,GANF;AAOEQ,IAAAA,QAAQ,EAAE;AACRC,MAAAA,QAAQ,EAAE;AACRC,QAAAA,IAAI,EAAE,QADE;AAERC,QAAAA,SAAS,EAAE,cAFH;AAGRP,QAAAA,KAAK,EAAE,oBAHC;AAIRQ,QAAAA,OAAO,EAAE,CACP;AACER,UAAAA,KAAK,EAAE,KADT;AAEES,UAAAA,KAAK,EAAE,CAAA;AAFT,SADO,EAKP;AACET,UAAAA,KAAK,EAAE,MADT;AAEES,UAAAA,KAAK,EAAE,CAAC,CAAA;AAFV,SALO,CAJD;AAcRC,QAAAA,YAAY,EAAE,CAAA;OAfR;AAiBRC,MAAAA,MAAM,EAAE;AACNL,QAAAA,IAAI,EAAE,QADA;AAENN,QAAAA,KAAK,EAAE,eAFD;QAGNQ,OAAO,EAAEI,MAAM,CAACC,IAAP,CAAYC,aAAZ,CAAqBC,CAAAA,GAArB,CAA0BC,GAAD,KAAU;AAC1ChB,UAAAA,KAAK,EAAEgB,GADmC;AAE1CP,UAAAA,KAAK,EAAEO,GAAAA;AAFmC,SAAV,CAAzB,CAHH;AAONN,QAAAA,YAAY,EAAEE,MAAM,CAACC,IAAP,CAAYC,aAAZ,EAAqB,CAArB,CAAA;AAPR,OAAA;AAjBA,KAAA;GARK,EAoChBG,GAAD,IAAS;AACP,IAAA,MAAMC,UAAU,GAAGrB,WAAW,CAACsB,aAAZ,EAAnB,CAAA;IAEAF,GAAG,CAACG,YAAJ,CAAiB;AACfrB,MAAAA,EAAE,EAAEN,QADW;AAEfO,MAAAA,KAAK,EAAEN,UAFQ;AAGf2B,MAAAA,IAAI,EAAE,KAHS;AAIfC,MAAAA,WAAW,EAAE,CACX;AACED,QAAAA,IAAI,EAAE,gBADR;AAEEE,QAAAA,OAAO,EAAE,SAFX;QAGEC,MAAM,EAAGC,SAAD,IAAuB;AAAA,UAAA,IAAA,eAAA,CAAA;;AAC7B,UAAA,CAAA,eAAA,GAAAP,UAAU,CAACQ,GAAX,CAAeD,SAAf,sCAA2BE,KAA3B,EAAA,CAAA;AACD,SAAA;AALH,OADW,EAQX;AACEN,QAAAA,IAAI,EAAE,OADR;AAEEE,QAAAA,OAAO,EAAE,YAFX;QAGEC,MAAM,EAAGC,SAAD,IAAuB;AAC7B,UAAA,MAAMG,KAAK,GAAGV,UAAU,CAACQ,GAAX,CAAeD,SAAf,CAAd,CAAA;AACA5B,UAAAA,WAAW,CAACgC,iBAAZ,CAA8BD,KAAK,CAACE,QAApC,CAAA,CAAA;AACD,SAAA;AANH,OARW,EAgBX;AACET,QAAAA,IAAI,EAAE,yBADR;AAEEE,QAAAA,OAAO,EAAE,OAFX;QAGEC,MAAM,EAAGC,SAAD,IAAuB;AAAA,UAAA,IAAA,gBAAA,CAAA;;AAC7B,UAAA,CAAA,gBAAA,GAAAP,UAAU,CAACQ,GAAX,CAAeD,SAAf,uCAA2BM,KAA3B,EAAA,CAAA;AACD,SAAA;AALH,OAhBW,EAuBX;AACEV,QAAAA,IAAI,EAAE,QADR;AAEEE,QAAAA,OAAO,EAAE,QAFX;QAGEC,MAAM,EAAGC,SAAD,IAAuB;AAC7B,UAAA,MAAMG,KAAK,GAAGV,UAAU,CAACQ,GAAX,CAAeD,SAAf,CAAd,CAAA;UACAP,UAAU,CAACc,MAAX,CAAkBJ,KAAlB,CAAA,CAAA;AACD,SAAA;OA7BQ,CAAA;KAJf,CAAA,CAAA;IAsCAX,GAAG,CAACgB,gBAAJ,CAAqB;AACnBlC,MAAAA,EAAE,EAAEN,QADe;AAEnBO,MAAAA,KAAK,EAAEN,UAFY;AAGnBwC,MAAAA,KAAK,EAAE,QAAA;KAHT,CAAA,CAAA;AAMAhB,IAAAA,UAAU,CAACiB,SAAX,CAAsBC,KAAD,IAAW;MAC9BnB,GAAG,CAACoB,iBAAJ,CAAsB5C,QAAtB,CAAA,CAAA;MACAwB,GAAG,CAACqB,kBAAJ,CAAuB7C,QAAvB,CAAA,CAAA;;MAEA;AAEE2C,MAAAA,KAAK,IACL,CAAC,YAAD,EAAe,cAAf,EAA+B,cAA/B,CAA+CG,CAAAA,QAA/C,CAAwDH,KAAK,CAAC9B,IAA9D,CAHF,EAIE;QACAW,GAAG,CAACuB,gBAAJ,CAAqB;AACnBC,UAAAA,OAAO,EAAEhD,QADU;AAEnB2C,UAAAA,KAAK,EAAE;YACLM,KAAK,EAAEN,KAAK,CAAC9B,IADR;AAELqC,YAAAA,QAAQ,EAAEP,KAAK,CAACR,KAAN,CAAYH,SAFjB;AAGLmB,YAAAA,IAAI,EAAE3B,GAAG,CAAC4B,GAAJ,EAHD;AAILC,YAAAA,IAAI,EAAE;AACJrB,cAAAA,SAAS,EAAEW,KAAK,CAACR,KAAN,CAAYH,SADnB;cAEJ,GAAGW,KAAAA;AAFC,aAAA;AAJD,WAAA;SAFT,CAAA,CAAA;AAYD,OAAA;KArBH,CAAA,CAAA;AAwBAnB,IAAAA,GAAG,CAAC8B,EAAJ,CAAOC,gBAAP,CAAyBC,OAAD,IAAa;AACnC,MAAA,IAAIA,OAAO,CAACC,WAAR,KAAwBzD,QAA5B,EAAsC;AACpC,QAAA,MAAM0D,OAAgB,GAAGjC,UAAU,CAACkC,MAAX,EAAzB,CAAA;AACA,QAAA,MAAMhD,QAAQ,GAAGa,GAAG,CAACoC,WAAJ,EAAjB,CAAA;QACA,MAAMC,QAAQ,GAAGC,uBAAW,CAACJ,OAAD,EAAUF,OAAO,CAACO,MAAlB,EAA0B;UACpD3C,IAAI,EAAE,CAAC,WAAD,CAD8C;UAEpDR,QAAQ,EAAE,CAACoD,CAAD,EAAIC,CAAJ,KACR5C,aAAO,CAACV,QAAQ,CAACO,MAAV,CAAP,CAA0B8C,CAAC,CAACE,IAA5B,EAAkCD,CAAC,CAACC,IAApC,CAA4CvD,GAAAA,QAAQ,CAACC,QAAAA;AAHH,SAA1B,CAA5B,CAAA;AAMA,QAAA,MAAMuD,KAA4B,GAAGN,QAAQ,CAACvC,GAAT,CAAca,KAAD,IAAW;AAC3D,UAAA,MAAMiC,UAAU,GAAGC,wBAAkB,CAAClC,KAAD,CAArC,CAAA;UAEA,OAAO;YACL7B,EAAE,EAAE6B,KAAK,CAACH,SADL;YAELzB,KAAK,EAAE4B,KAAK,CAACH,SAFR;AAGLsC,YAAAA,IAAI,EAAE,CACJ;AACE/D,cAAAA,KAAK,EAAK6D,UAAL,GAAA,IAAA,GAAoBjC,KAAK,CAACoC,iBAAN,EAApB,GADP,GAAA;AAEEC,cAAAA,SAAS,EAAEC,sBAAgB,CAACtC,KAAD,CAF7B;cAGEuC,eAAe,EAAEC,sBAAgB,CAACxC,KAAD,CAAA;aAJ/B,CAAA;WAHR,CAAA;AAWD,SAdoC,CAArC,CAAA;QAeAqB,OAAO,CAACoB,SAAR,GAAoBT,KAApB,CAAA;AACD,OAAA;KA1BH,CAAA,CAAA;AA6BA3C,IAAAA,GAAG,CAAC8B,EAAJ,CAAOuB,iBAAP,CAA0BrB,OAAD,IAAa;AACpC,MAAA,IAAIA,OAAO,CAACC,WAAR,KAAwBzD,QAA5B,EAAsC;QACpC,MAAMmC,KAAK,GAAGV,UAAU,CAACQ,GAAX,CAAeuB,OAAO,CAACsB,MAAvB,CAAd,CAAA;;QAEA,IAAI,CAAC3C,KAAL,EAAY;AACV,UAAA,OAAA;AACD,SAAA;;QAEDqB,OAAO,CAACuB,KAAR,GAAgB;AACd,UAAA,gBAAA,EAAkB,CAChB;AACExD,YAAAA,GAAG,EAAE,WADP;YAEEP,KAAK,EAAEmB,KAAK,CAACH,SAAAA;AAFf,WADgB,EAKhB;AACET,YAAAA,GAAG,EAAE,cADP;YAEEP,KAAK,EAAEqD,wBAAkB,CAAClC,KAAD,CAAA;AAF3B,WALgB,EAShB;AACEZ,YAAAA,GAAG,EAAE,WADP;YAEEP,KAAK,EAAEmB,KAAK,CAACoC,iBAAN,EAAA;AAFT,WATgB,EAahB;AACEhD,YAAAA,GAAG,EAAE,cADP;YAEEP,KAAK,EAAE,IAAIgE,IAAJ,CAAS7C,KAAK,CAAC4C,KAAN,CAAYE,aAArB,CAAA,CAAoCC,kBAApC,EAAA;AAFT,WAbgB,CADJ;AAmBd,UAAA,eAAA,EAAiB,CACf;AACE3D,YAAAA,GAAG,EAAE,MADP;AAEEP,YAAAA,KAAK,EAAEmB,KAAK,CAAC4C,KAAN,CAAY1B,IAAAA;AAFrB,WADe,CAnBH;AAyBd,UAAA,gBAAA,EAAkB,CAChB;AACE9B,YAAAA,GAAG,EAAE,OADP;AAEEP,YAAAA,KAAK,EAAEmB,KAAAA;WAHO,CAAA;SAzBpB,CAAA;AAgCD,OAAA;KAxCH,CAAA,CAAA;AA0CD,GAlLgB,CAAnB,CAAA;AAoLD;;;;"}
|