@pinia/colada-plugin-delay 0.1.4 → 0.2.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/dist/index.d.mts +53 -8
- package/dist/index.mjs +74 -31
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -16
- package/dist/index.cjs +0 -52
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -33
package/dist/index.d.mts
CHANGED
|
@@ -2,32 +2,77 @@ import { ShallowRef } from "vue";
|
|
|
2
2
|
import { PiniaColadaPlugin } from "@pinia/colada";
|
|
3
3
|
|
|
4
4
|
//#region src/delay.d.ts
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* Options for the {@link PiniaColadaDelay} plugin.
|
|
8
7
|
*/
|
|
9
8
|
interface PiniaColadaDelayOptions {
|
|
10
9
|
/**
|
|
11
|
-
* Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable.
|
|
10
|
+
* Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable.
|
|
12
11
|
* @default 200
|
|
13
12
|
*/
|
|
14
13
|
delay?: number | false;
|
|
14
|
+
/**
|
|
15
|
+
* Query-specific delay override. Overrides the top-level `delay` for queries only.
|
|
16
|
+
*/
|
|
17
|
+
query?: {
|
|
18
|
+
delay?: number | false;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Mutation-specific delay override. Overrides the top-level `delay` for mutations only.
|
|
22
|
+
*/
|
|
23
|
+
mutations?: {
|
|
24
|
+
delay?: number | false;
|
|
25
|
+
};
|
|
15
26
|
}
|
|
16
27
|
/**
|
|
17
|
-
* Delays the `asyncStatus` of
|
|
18
|
-
*
|
|
28
|
+
* Delays the `asyncStatus` of queries by a certain amount of time to avoid flickering between refreshes.
|
|
29
|
+
*
|
|
30
|
+
* @param options - Plugin options
|
|
31
|
+
*/
|
|
32
|
+
declare function PiniaColadaDelayQuery(options?: Pick<PiniaColadaDelayOptions, 'delay'>): PiniaColadaPlugin;
|
|
33
|
+
/**
|
|
34
|
+
* Delays the `asyncStatus` of mutations by a certain amount of time to avoid flickering.
|
|
35
|
+
*
|
|
36
|
+
* @param options - Plugin options
|
|
37
|
+
*/
|
|
38
|
+
declare function PiniaColadaDelayMutations(options?: Pick<PiniaColadaDelayOptions, 'delay'>): PiniaColadaPlugin;
|
|
39
|
+
/**
|
|
40
|
+
* Delays the `asyncStatus` of both queries and mutations by a certain amount of time to avoid flickering.
|
|
41
|
+
* Options apply to both, with optional `query` and `mutations` nested overrides.
|
|
42
|
+
*
|
|
43
|
+
* @param options - Plugin options
|
|
19
44
|
*/
|
|
20
45
|
declare function PiniaColadaDelay(options?: PiniaColadaDelayOptions): PiniaColadaPlugin;
|
|
21
46
|
declare module '@pinia/colada' {
|
|
22
|
-
interface UseQueryOptions<TData, TError, TDataInitial> extends PiniaColadaDelayOptions {}
|
|
23
|
-
interface UseQueryOptionsGlobal extends PiniaColadaDelayOptions {}
|
|
24
|
-
interface UseQueryEntryExtensions<TData, TError> {
|
|
47
|
+
interface UseQueryOptions<TData, TError, TDataInitial> extends Pick<PiniaColadaDelayOptions, 'delay'> {}
|
|
48
|
+
interface UseQueryOptionsGlobal extends Pick<PiniaColadaDelayOptions, 'delay'> {}
|
|
49
|
+
interface UseQueryEntryExtensions<TData, TError, TDataInitial> {
|
|
25
50
|
/**
|
|
26
51
|
* Returns whether the query is currently delaying its `asyncStatus` from becoming `'loading'`. Requires the {@link PiniaColadaDelay} plugin.
|
|
27
52
|
*/
|
|
28
53
|
isDelaying: ShallowRef<boolean>;
|
|
29
54
|
}
|
|
55
|
+
interface UseMutationOptions<TData, TVars, TError, TContext> {
|
|
56
|
+
/**
|
|
57
|
+
* Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.
|
|
58
|
+
* @default 200
|
|
59
|
+
*/
|
|
60
|
+
delay?: number | false;
|
|
61
|
+
}
|
|
62
|
+
interface UseMutationOptionsGlobal {
|
|
63
|
+
/**
|
|
64
|
+
* Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.
|
|
65
|
+
* @default 200
|
|
66
|
+
*/
|
|
67
|
+
delay?: number | false;
|
|
68
|
+
}
|
|
69
|
+
interface UseMutationEntryExtensions<TData, TVars, TError, TContext> {
|
|
70
|
+
/**
|
|
71
|
+
* Returns whether the mutation is currently delaying its `asyncStatus` from becoming `'loading'`. Requires the {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.
|
|
72
|
+
*/
|
|
73
|
+
isDelaying: ShallowRef<boolean>;
|
|
74
|
+
}
|
|
30
75
|
}
|
|
31
76
|
//#endregion
|
|
32
|
-
export { PiniaColadaDelay };
|
|
77
|
+
export { PiniaColadaDelay, PiniaColadaDelayMutations, type PiniaColadaDelayOptions, PiniaColadaDelayQuery };
|
|
33
78
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,42 @@
|
|
|
1
1
|
import { customRef, shallowRef } from "vue";
|
|
2
|
-
|
|
2
|
+
import { useMutationCache } from "@pinia/colada";
|
|
3
3
|
//#region src/delay.ts
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
* @param options - Pinia Colada Delay Loading plugin options
|
|
5
|
+
* Creates a delayed `asyncStatus` customRef that waits before switching to `'loading'`.
|
|
7
6
|
*/
|
|
8
|
-
function
|
|
7
|
+
function createDelayedAsyncStatus(initialValue, delay, isDelaying) {
|
|
8
|
+
return customRef((track, trigger) => {
|
|
9
|
+
let value = initialValue;
|
|
10
|
+
let timeout;
|
|
11
|
+
return {
|
|
12
|
+
get() {
|
|
13
|
+
track();
|
|
14
|
+
return value;
|
|
15
|
+
},
|
|
16
|
+
set(newValue) {
|
|
17
|
+
clearTimeout(timeout);
|
|
18
|
+
if (newValue === "loading") {
|
|
19
|
+
isDelaying.value = true;
|
|
20
|
+
timeout = setTimeout(() => {
|
|
21
|
+
isDelaying.value = false;
|
|
22
|
+
value = newValue;
|
|
23
|
+
trigger();
|
|
24
|
+
}, delay);
|
|
25
|
+
} else {
|
|
26
|
+
isDelaying.value = false;
|
|
27
|
+
value = newValue;
|
|
28
|
+
trigger();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Delays the `asyncStatus` of queries by a certain amount of time to avoid flickering between refreshes.
|
|
36
|
+
*
|
|
37
|
+
* @param options - Plugin options
|
|
38
|
+
*/
|
|
39
|
+
function PiniaColadaDelayQuery(options) {
|
|
9
40
|
return ({ queryCache, scope }) => {
|
|
10
41
|
queryCache.$onAction(({ name, args }) => {
|
|
11
42
|
if (name === "extend") {
|
|
@@ -16,37 +47,49 @@ function PiniaColadaDelay(options) {
|
|
|
16
47
|
entry.ext.isDelaying = isDelaying;
|
|
17
48
|
if (!delay) return;
|
|
18
49
|
const initialValue = entry.asyncStatus.value;
|
|
19
|
-
entry.asyncStatus =
|
|
20
|
-
let value = initialValue;
|
|
21
|
-
let timeout;
|
|
22
|
-
return {
|
|
23
|
-
get() {
|
|
24
|
-
track();
|
|
25
|
-
return value;
|
|
26
|
-
},
|
|
27
|
-
set(newValue) {
|
|
28
|
-
clearTimeout(timeout);
|
|
29
|
-
if (newValue === "loading") {
|
|
30
|
-
isDelaying.value = true;
|
|
31
|
-
timeout = setTimeout(() => {
|
|
32
|
-
isDelaying.value = false;
|
|
33
|
-
value = newValue;
|
|
34
|
-
trigger();
|
|
35
|
-
}, delay);
|
|
36
|
-
} else {
|
|
37
|
-
isDelaying.value = false;
|
|
38
|
-
value = newValue;
|
|
39
|
-
trigger();
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
});
|
|
50
|
+
entry.asyncStatus = createDelayedAsyncStatus(initialValue, delay, isDelaying);
|
|
44
51
|
});
|
|
45
52
|
}
|
|
46
53
|
});
|
|
47
54
|
};
|
|
48
55
|
}
|
|
49
|
-
|
|
56
|
+
/**
|
|
57
|
+
* Delays the `asyncStatus` of mutations by a certain amount of time to avoid flickering.
|
|
58
|
+
*
|
|
59
|
+
* @param options - Plugin options
|
|
60
|
+
*/
|
|
61
|
+
function PiniaColadaDelayMutations(options) {
|
|
62
|
+
return ({ pinia, scope }) => {
|
|
63
|
+
useMutationCache(pinia).$onAction(({ name, args }) => {
|
|
64
|
+
if (name === "extend") {
|
|
65
|
+
const [entry] = args;
|
|
66
|
+
const delay = entry.options?.delay ?? options?.delay ?? 200;
|
|
67
|
+
scope.run(() => {
|
|
68
|
+
const isDelaying = shallowRef(false);
|
|
69
|
+
entry.ext.isDelaying = isDelaying;
|
|
70
|
+
if (!delay) return;
|
|
71
|
+
const initialValue = entry.asyncStatus.value;
|
|
72
|
+
entry.asyncStatus = createDelayedAsyncStatus(initialValue, delay, isDelaying);
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Delays the `asyncStatus` of both queries and mutations by a certain amount of time to avoid flickering.
|
|
80
|
+
* Options apply to both, with optional `query` and `mutations` nested overrides.
|
|
81
|
+
*
|
|
82
|
+
* @param options - Plugin options
|
|
83
|
+
*/
|
|
84
|
+
function PiniaColadaDelay(options) {
|
|
85
|
+
const removeQueryDelays = PiniaColadaDelayQuery({ delay: options?.query?.delay ?? options?.delay });
|
|
86
|
+
const removeMutationDelays = PiniaColadaDelayMutations({ delay: options?.mutations?.delay ?? options?.delay });
|
|
87
|
+
return (context) => {
|
|
88
|
+
removeQueryDelays(context);
|
|
89
|
+
removeMutationDelays(context);
|
|
90
|
+
};
|
|
91
|
+
}
|
|
50
92
|
//#endregion
|
|
51
|
-
export { PiniaColadaDelay };
|
|
93
|
+
export { PiniaColadaDelay, PiniaColadaDelayMutations, PiniaColadaDelayQuery };
|
|
94
|
+
|
|
52
95
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/delay.ts"],"sourcesContent":["/**\n * Pinia Colada Delay Loading plugin.\n *\n * Allows delaying the `loading` value for `asyncStatus` to improve _perceived performance_.\n *\n * @module @pinia/colada-plugin-delay\n */\n\nimport type { ShallowRef } from 'vue'\nimport { customRef, shallowRef } from 'vue'\nimport type { PiniaColadaPlugin, AsyncStatus } from '@pinia/colada'\nimport { useMutationCache } from '@pinia/colada'\n\n/**\n * Options for the {@link PiniaColadaDelay} plugin.\n */\nexport interface PiniaColadaDelayOptions {\n /**\n * Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable.\n * @default 200\n */\n delay?: number | false\n\n /**\n * Query-specific delay override. Overrides the top-level `delay` for queries only.\n */\n query?: { delay?: number | false }\n\n /**\n * Mutation-specific delay override. Overrides the top-level `delay` for mutations only.\n */\n mutations?: { delay?: number | false }\n}\n\n/**\n * Creates a delayed `asyncStatus` customRef that waits before switching to `'loading'`.\n */\nfunction createDelayedAsyncStatus(\n initialValue: AsyncStatus,\n delay: number,\n isDelaying: ShallowRef<boolean>,\n) {\n return customRef<AsyncStatus>((track, trigger) => {\n let value = initialValue\n let timeout: ReturnType<typeof setTimeout> | undefined\n return {\n get() {\n track()\n return value\n },\n set(newValue) {\n clearTimeout(timeout)\n if (newValue === 'loading') {\n isDelaying.value = true\n timeout = setTimeout(() => {\n isDelaying.value = false\n value = newValue\n trigger()\n }, delay)\n } else {\n isDelaying.value = false\n value = newValue\n trigger()\n }\n },\n }\n })\n}\n\n/**\n * Delays the `asyncStatus` of queries by a certain amount of time to avoid flickering between refreshes.\n *\n * @param options - Plugin options\n */\nexport function PiniaColadaDelayQuery(\n options?: Pick<PiniaColadaDelayOptions, 'delay'>,\n): PiniaColadaPlugin {\n return ({ queryCache, scope }) => {\n queryCache.$onAction(({ name, args }) => {\n if (name === 'extend') {\n const [entry] = args\n const delay = entry.options?.delay ?? options?.delay ?? 200\n scope.run(() => {\n const isDelaying = shallowRef(false)\n entry.ext.isDelaying = isDelaying\n if (!delay) return\n\n const initialValue = entry.asyncStatus.value\n entry.asyncStatus = createDelayedAsyncStatus(initialValue, delay, isDelaying)\n })\n }\n })\n }\n}\n\n/**\n * Delays the `asyncStatus` of mutations by a certain amount of time to avoid flickering.\n *\n * @param options - Plugin options\n */\nexport function PiniaColadaDelayMutations(\n options?: Pick<PiniaColadaDelayOptions, 'delay'>,\n): PiniaColadaPlugin {\n return ({ pinia, scope }) => {\n const mutationCache = useMutationCache(pinia)\n mutationCache.$onAction(({ name, args }) => {\n if (name === 'extend') {\n const [entry] = args\n const delay = entry.options?.delay ?? options?.delay ?? 200\n scope.run(() => {\n const isDelaying = shallowRef(false)\n entry.ext.isDelaying = isDelaying\n if (!delay) return\n\n const initialValue = entry.asyncStatus.value\n entry.asyncStatus = createDelayedAsyncStatus(initialValue, delay, isDelaying)\n })\n }\n })\n }\n}\n\n/**\n * Delays the `asyncStatus` of both queries and mutations by a certain amount of time to avoid flickering.\n * Options apply to both, with optional `query` and `mutations` nested overrides.\n *\n * @param options - Plugin options\n */\nexport function PiniaColadaDelay(options?: PiniaColadaDelayOptions): PiniaColadaPlugin {\n const removeQueryDelays = PiniaColadaDelayQuery({\n delay: options?.query?.delay ?? options?.delay,\n })\n const removeMutationDelays = PiniaColadaDelayMutations({\n delay: options?.mutations?.delay ?? options?.delay,\n })\n return (context) => {\n removeQueryDelays(context)\n removeMutationDelays(context)\n }\n}\n\ndeclare module '@pinia/colada' {\n // eslint-disable-next-line unused-imports/no-unused-vars\n interface UseQueryOptions<TData, TError, TDataInitial> extends Pick<\n PiniaColadaDelayOptions,\n 'delay'\n > {}\n\n interface UseQueryOptionsGlobal extends Pick<PiniaColadaDelayOptions, 'delay'> {}\n\n // eslint-disable-next-line unused-imports/no-unused-vars\n interface UseQueryEntryExtensions<TData, TError, TDataInitial> {\n /**\n * Returns whether the query is currently delaying its `asyncStatus` from becoming `'loading'`. Requires the {@link PiniaColadaDelay} plugin.\n */\n isDelaying: ShallowRef<boolean>\n }\n\n // eslint-disable-next-line unused-imports/no-unused-vars\n interface UseMutationOptions<TData, TVars, TError, TContext> {\n /**\n * Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.\n * @default 200\n */\n delay?: number | false\n }\n\n interface UseMutationOptionsGlobal {\n /**\n * Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.\n * @default 200\n */\n delay?: number | false\n }\n\n // eslint-disable-next-line unused-imports/no-unused-vars\n interface UseMutationEntryExtensions<TData, TVars, TError, TContext> {\n /**\n * Returns whether the mutation is currently delaying its `asyncStatus` from becoming `'loading'`. Requires the {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.\n */\n isDelaying: ShallowRef<boolean>\n }\n}\n"],"mappings":";;;;;;AAqCA,SAAS,yBACP,cACA,OACA,YACA;AACA,QAAO,WAAwB,OAAO,YAAY;EAChD,IAAI,QAAQ;EACZ,IAAI;AACJ,SAAO;GACL,MAAM;AACJ,WAAO;AACP,WAAO;;GAET,IAAI,UAAU;AACZ,iBAAa,QAAQ;AACrB,QAAI,aAAa,WAAW;AAC1B,gBAAW,QAAQ;AACnB,eAAU,iBAAiB;AACzB,iBAAW,QAAQ;AACnB,cAAQ;AACR,eAAS;QACR,MAAM;WACJ;AACL,gBAAW,QAAQ;AACnB,aAAQ;AACR,cAAS;;;GAGd;GACD;;;;;;;AAQJ,SAAgB,sBACd,SACmB;AACnB,SAAQ,EAAE,YAAY,YAAY;AAChC,aAAW,WAAW,EAAE,MAAM,WAAW;AACvC,OAAI,SAAS,UAAU;IACrB,MAAM,CAAC,SAAS;IAChB,MAAM,QAAQ,MAAM,SAAS,SAAS,SAAS,SAAS;AACxD,UAAM,UAAU;KACd,MAAM,aAAa,WAAW,MAAM;AACpC,WAAM,IAAI,aAAa;AACvB,SAAI,CAAC,MAAO;KAEZ,MAAM,eAAe,MAAM,YAAY;AACvC,WAAM,cAAc,yBAAyB,cAAc,OAAO,WAAW;MAC7E;;IAEJ;;;;;;;;AASN,SAAgB,0BACd,SACmB;AACnB,SAAQ,EAAE,OAAO,YAAY;AACL,mBAAiB,MAAM,CAC/B,WAAW,EAAE,MAAM,WAAW;AAC1C,OAAI,SAAS,UAAU;IACrB,MAAM,CAAC,SAAS;IAChB,MAAM,QAAQ,MAAM,SAAS,SAAS,SAAS,SAAS;AACxD,UAAM,UAAU;KACd,MAAM,aAAa,WAAW,MAAM;AACpC,WAAM,IAAI,aAAa;AACvB,SAAI,CAAC,MAAO;KAEZ,MAAM,eAAe,MAAM,YAAY;AACvC,WAAM,cAAc,yBAAyB,cAAc,OAAO,WAAW;MAC7E;;IAEJ;;;;;;;;;AAUN,SAAgB,iBAAiB,SAAsD;CACrF,MAAM,oBAAoB,sBAAsB,EAC9C,OAAO,SAAS,OAAO,SAAS,SAAS,OAC1C,CAAC;CACF,MAAM,uBAAuB,0BAA0B,EACrD,OAAO,SAAS,WAAW,SAAS,SAAS,OAC9C,CAAC;AACF,SAAQ,YAAY;AAClB,oBAAkB,QAAQ;AAC1B,uBAAqB,QAAQ"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.2.0",
|
|
8
8
|
"description": "Delay async status in Pinia Colada",
|
|
9
9
|
"author": {
|
|
10
10
|
"name": "Eduardo San Martin Morote",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"funding": "https://github.com/sponsors/posva",
|
|
15
|
-
"homepage": "https://github.com/posva/pinia-colada/plugins/delay
|
|
15
|
+
"homepage": "https://github.com/posva/pinia-colada/blob/main/plugins/delay/README.md",
|
|
16
16
|
"repository": "posva/pinia-colada",
|
|
17
17
|
"bugs": {
|
|
18
18
|
"url": "https://github.com/posva/pinia-colada/issues"
|
|
@@ -29,18 +29,8 @@
|
|
|
29
29
|
"delay"
|
|
30
30
|
],
|
|
31
31
|
"sideEffects": false,
|
|
32
|
-
"exports":
|
|
33
|
-
|
|
34
|
-
"types": {
|
|
35
|
-
"import": "./dist/index.d.mts",
|
|
36
|
-
"require": "./dist/index.d.cts"
|
|
37
|
-
},
|
|
38
|
-
"import": "./dist/index.mjs",
|
|
39
|
-
"require": "./dist/index.cjs"
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
"main": "./dist/index.cjs",
|
|
43
|
-
"module": "./dist/index.mjs",
|
|
32
|
+
"exports": "./dist/index.mjs",
|
|
33
|
+
"main": "./dist/index.mjs",
|
|
44
34
|
"types": "./dist/index.d.mts",
|
|
45
35
|
"typesVersions": {
|
|
46
36
|
"*": {
|
|
@@ -56,10 +46,10 @@
|
|
|
56
46
|
"dist"
|
|
57
47
|
],
|
|
58
48
|
"peerDependencies": {
|
|
59
|
-
"@pinia/colada": ">=0.
|
|
49
|
+
"@pinia/colada": ">=1.0.0"
|
|
60
50
|
},
|
|
61
51
|
"devDependencies": {
|
|
62
|
-
"@pinia/colada": "^0.
|
|
52
|
+
"@pinia/colada": "^1.0.0"
|
|
63
53
|
},
|
|
64
54
|
"scripts": {
|
|
65
55
|
"build": "tsdown",
|
package/dist/index.cjs
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
let vue = require("vue");
|
|
2
|
-
|
|
3
|
-
//#region src/delay.ts
|
|
4
|
-
/**
|
|
5
|
-
* Delays the `asyncStatus` of a query by a certain amount of time to avoid flickering between refreshes.
|
|
6
|
-
* @param options - Pinia Colada Delay Loading plugin options
|
|
7
|
-
*/
|
|
8
|
-
function PiniaColadaDelay(options) {
|
|
9
|
-
return ({ queryCache, scope }) => {
|
|
10
|
-
queryCache.$onAction(({ name, args }) => {
|
|
11
|
-
if (name === "extend") {
|
|
12
|
-
const [entry] = args;
|
|
13
|
-
const delay = entry.options?.delay ?? options?.delay ?? 200;
|
|
14
|
-
scope.run(() => {
|
|
15
|
-
const isDelaying = (0, vue.shallowRef)(false);
|
|
16
|
-
entry.ext.isDelaying = isDelaying;
|
|
17
|
-
if (!delay) return;
|
|
18
|
-
const initialValue = entry.asyncStatus.value;
|
|
19
|
-
entry.asyncStatus = (0, vue.customRef)((track, trigger) => {
|
|
20
|
-
let value = initialValue;
|
|
21
|
-
let timeout;
|
|
22
|
-
return {
|
|
23
|
-
get() {
|
|
24
|
-
track();
|
|
25
|
-
return value;
|
|
26
|
-
},
|
|
27
|
-
set(newValue) {
|
|
28
|
-
clearTimeout(timeout);
|
|
29
|
-
if (newValue === "loading") {
|
|
30
|
-
isDelaying.value = true;
|
|
31
|
-
timeout = setTimeout(() => {
|
|
32
|
-
isDelaying.value = false;
|
|
33
|
-
value = newValue;
|
|
34
|
-
trigger();
|
|
35
|
-
}, delay);
|
|
36
|
-
} else {
|
|
37
|
-
isDelaying.value = false;
|
|
38
|
-
value = newValue;
|
|
39
|
-
trigger();
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
//#endregion
|
|
51
|
-
exports.PiniaColadaDelay = PiniaColadaDelay;
|
|
52
|
-
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["timeout: ReturnType<typeof setTimeout> | undefined"],"sources":["../src/delay.ts"],"sourcesContent":["/**\n * Pinia Colada Delay Loading plugin.\n *\n * Allows delaying the `loading` value for `asyncStatus` to improve _perceived performance_.\n *\n * @module @pinia/colada-plugin-delay\n */\n\nimport type { ShallowRef } from 'vue'\nimport { customRef, shallowRef } from 'vue'\nimport type { PiniaColadaPlugin, AsyncStatus } from '@pinia/colada'\n\n/**\n * Options for the {@link PiniaColadaDelay} plugin.\n */\ninterface PiniaColadaDelayOptions {\n /**\n * Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} plugin.\n * @default 200\n */\n delay?: number | false\n}\n\n/**\n * Delays the `asyncStatus` of a query by a certain amount of time to avoid flickering between refreshes.\n * @param options - Pinia Colada Delay Loading plugin options\n */\nexport function PiniaColadaDelay(options?: PiniaColadaDelayOptions): PiniaColadaPlugin {\n return ({ queryCache, scope }) => {\n queryCache.$onAction(({ name, args }) => {\n if (name === 'extend') {\n const [entry] = args\n const delay = entry.options?.delay ?? options?.delay ?? 200\n scope.run(() => {\n const isDelaying = shallowRef(false)\n entry.ext.isDelaying = isDelaying\n if (!delay) return\n\n const initialValue = entry.asyncStatus.value\n entry.asyncStatus = customRef<AsyncStatus>((track, trigger) => {\n let value = initialValue\n let timeout: ReturnType<typeof setTimeout> | undefined\n return {\n get() {\n track()\n return value\n },\n set(newValue) {\n clearTimeout(timeout)\n if (newValue === 'loading') {\n isDelaying.value = true\n timeout = setTimeout(() => {\n isDelaying.value = false\n value = newValue\n trigger()\n }, delay)\n } else {\n isDelaying.value = false\n value = newValue\n trigger()\n }\n },\n }\n })\n })\n }\n })\n }\n}\n\ndeclare module '@pinia/colada' {\n // eslint-disable-next-line unused-imports/no-unused-vars\n interface UseQueryOptions<TData, TError, TDataInitial> extends PiniaColadaDelayOptions {}\n\n interface UseQueryOptionsGlobal extends PiniaColadaDelayOptions {}\n\n interface UseQueryEntryExtensions<\n TData,\n // eslint-disable-next-line unused-imports/no-unused-vars\n TError,\n > {\n /**\n * Returns whether the query is currently delaying its `asyncStatus` from becoming `'loading'`. Requires the {@link PiniaColadaDelay} plugin.\n */\n isDelaying: ShallowRef<boolean>\n }\n}\n"],"mappings":";;;;;;;AA2BA,SAAgB,iBAAiB,SAAsD;AACrF,SAAQ,EAAE,YAAY,YAAY;AAChC,aAAW,WAAW,EAAE,MAAM,WAAW;AACvC,OAAI,SAAS,UAAU;IACrB,MAAM,CAAC,SAAS;IAChB,MAAM,QAAQ,MAAM,SAAS,SAAS,SAAS,SAAS;AACxD,UAAM,UAAU;KACd,MAAM,iCAAwB,MAAM;AACpC,WAAM,IAAI,aAAa;AACvB,SAAI,CAAC,MAAO;KAEZ,MAAM,eAAe,MAAM,YAAY;AACvC,WAAM,kCAAsC,OAAO,YAAY;MAC7D,IAAI,QAAQ;MACZ,IAAIA;AACJ,aAAO;OACL,MAAM;AACJ,eAAO;AACP,eAAO;;OAET,IAAI,UAAU;AACZ,qBAAa,QAAQ;AACrB,YAAI,aAAa,WAAW;AAC1B,oBAAW,QAAQ;AACnB,mBAAU,iBAAiB;AACzB,qBAAW,QAAQ;AACnB,kBAAQ;AACR,mBAAS;YACR,MAAM;eACJ;AACL,oBAAW,QAAQ;AACnB,iBAAQ;AACR,kBAAS;;;OAGd;OACD;MACF;;IAEJ"}
|
package/dist/index.d.cts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { ShallowRef } from "vue";
|
|
2
|
-
import { PiniaColadaPlugin } from "@pinia/colada";
|
|
3
|
-
|
|
4
|
-
//#region src/delay.d.ts
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Options for the {@link PiniaColadaDelay} plugin.
|
|
8
|
-
*/
|
|
9
|
-
interface PiniaColadaDelayOptions {
|
|
10
|
-
/**
|
|
11
|
-
* Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} plugin.
|
|
12
|
-
* @default 200
|
|
13
|
-
*/
|
|
14
|
-
delay?: number | false;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Delays the `asyncStatus` of a query by a certain amount of time to avoid flickering between refreshes.
|
|
18
|
-
* @param options - Pinia Colada Delay Loading plugin options
|
|
19
|
-
*/
|
|
20
|
-
declare function PiniaColadaDelay(options?: PiniaColadaDelayOptions): PiniaColadaPlugin;
|
|
21
|
-
declare module '@pinia/colada' {
|
|
22
|
-
interface UseQueryOptions<TData, TError, TDataInitial> extends PiniaColadaDelayOptions {}
|
|
23
|
-
interface UseQueryOptionsGlobal extends PiniaColadaDelayOptions {}
|
|
24
|
-
interface UseQueryEntryExtensions<TData, TError> {
|
|
25
|
-
/**
|
|
26
|
-
* Returns whether the query is currently delaying its `asyncStatus` from becoming `'loading'`. Requires the {@link PiniaColadaDelay} plugin.
|
|
27
|
-
*/
|
|
28
|
-
isDelaying: ShallowRef<boolean>;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
//#endregion
|
|
32
|
-
export { PiniaColadaDelay };
|
|
33
|
-
//# sourceMappingURL=index.d.cts.map
|