@pinia/colada-plugin-delay 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +25 -10
- package/dist/index.mjs +9 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.d.mts
CHANGED
|
@@ -8,37 +8,43 @@ import { PiniaColadaPlugin } from "@pinia/colada";
|
|
|
8
8
|
interface PiniaColadaDelayOptions {
|
|
9
9
|
/**
|
|
10
10
|
* Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable.
|
|
11
|
+
*
|
|
11
12
|
* @default 200
|
|
12
13
|
*/
|
|
13
14
|
delay?: number | false;
|
|
14
15
|
/**
|
|
15
|
-
* Query-specific delay override. Overrides the top-level `delay` for queries
|
|
16
|
+
* Query-specific delay override. Overrides the top-level `delay` for queries
|
|
17
|
+
* only.
|
|
16
18
|
*/
|
|
17
19
|
query?: {
|
|
18
20
|
delay?: number | false;
|
|
19
21
|
};
|
|
20
22
|
/**
|
|
21
|
-
* Mutation-specific delay override. Overrides the top-level `delay` for
|
|
23
|
+
* Mutation-specific delay override. Overrides the top-level `delay` for
|
|
24
|
+
* mutations only.
|
|
22
25
|
*/
|
|
23
26
|
mutations?: {
|
|
24
27
|
delay?: number | false;
|
|
25
28
|
};
|
|
26
29
|
}
|
|
27
30
|
/**
|
|
28
|
-
* Delays the `asyncStatus` of queries by a certain amount of time to avoid
|
|
31
|
+
* Delays the `asyncStatus` of queries by a certain amount of time to avoid
|
|
32
|
+
* flickering between refreshes.
|
|
29
33
|
*
|
|
30
34
|
* @param options - Plugin options
|
|
31
35
|
*/
|
|
32
36
|
declare function PiniaColadaDelayQuery(options?: Pick<PiniaColadaDelayOptions, 'delay'>): PiniaColadaPlugin;
|
|
33
37
|
/**
|
|
34
|
-
* Delays the `asyncStatus` of mutations by a certain amount of time to avoid
|
|
38
|
+
* Delays the `asyncStatus` of mutations by a certain amount of time to avoid
|
|
39
|
+
* flickering.
|
|
35
40
|
*
|
|
36
41
|
* @param options - Plugin options
|
|
37
42
|
*/
|
|
38
43
|
declare function PiniaColadaDelayMutations(options?: Pick<PiniaColadaDelayOptions, 'delay'>): PiniaColadaPlugin;
|
|
39
44
|
/**
|
|
40
|
-
* Delays the `asyncStatus` of both queries and mutations by a certain amount
|
|
41
|
-
* Options apply to both, with optional `query`
|
|
45
|
+
* Delays the `asyncStatus` of both queries and mutations by a certain amount
|
|
46
|
+
* of time to avoid flickering. Options apply to both, with optional `query`
|
|
47
|
+
* and `mutations` nested overrides.
|
|
42
48
|
*
|
|
43
49
|
* @param options - Plugin options
|
|
44
50
|
*/
|
|
@@ -48,27 +54,36 @@ declare module '@pinia/colada' {
|
|
|
48
54
|
interface UseQueryOptionsGlobal extends Pick<PiniaColadaDelayOptions, 'delay'> {}
|
|
49
55
|
interface UseQueryEntryExtensions<TData, TError, TDataInitial> {
|
|
50
56
|
/**
|
|
51
|
-
* Returns whether the query is currently delaying its `asyncStatus` from
|
|
57
|
+
* Returns whether the query is currently delaying its `asyncStatus` from
|
|
58
|
+
* becoming `'loading'`. Requires the {@link PiniaColadaDelay} plugin.
|
|
52
59
|
*/
|
|
53
60
|
isDelaying: ShallowRef<boolean>;
|
|
54
61
|
}
|
|
55
62
|
interface UseMutationOptions<TData, TVars, TError, TContext> {
|
|
56
63
|
/**
|
|
57
|
-
* Delay in milliseconds to wait before letting the `asyncStatus` become
|
|
64
|
+
* Delay in milliseconds to wait before letting the `asyncStatus` become
|
|
65
|
+
* `'loading'`. Set to `false` or 0 to disable. Requires the
|
|
66
|
+
* {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.
|
|
67
|
+
*
|
|
58
68
|
* @default 200
|
|
59
69
|
*/
|
|
60
70
|
delay?: number | false;
|
|
61
71
|
}
|
|
62
72
|
interface UseMutationOptionsGlobal {
|
|
63
73
|
/**
|
|
64
|
-
* Delay in milliseconds to wait before letting the `asyncStatus` become
|
|
74
|
+
* Delay in milliseconds to wait before letting the `asyncStatus` become
|
|
75
|
+
* `'loading'`. Set to `false` or 0 to disable. Requires the
|
|
76
|
+
* {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.
|
|
77
|
+
*
|
|
65
78
|
* @default 200
|
|
66
79
|
*/
|
|
67
80
|
delay?: number | false;
|
|
68
81
|
}
|
|
69
82
|
interface UseMutationEntryExtensions<TData, TVars, TError, TContext> {
|
|
70
83
|
/**
|
|
71
|
-
* Returns whether the mutation is currently delaying its `asyncStatus`
|
|
84
|
+
* Returns whether the mutation is currently delaying its `asyncStatus`
|
|
85
|
+
* from becoming `'loading'`. Requires the {@link PiniaColadaDelay} or
|
|
86
|
+
* {@link PiniaColadaDelayMutations} plugin.
|
|
72
87
|
*/
|
|
73
88
|
isDelaying: ShallowRef<boolean>;
|
|
74
89
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -2,7 +2,8 @@ import { customRef, shallowRef } from "vue";
|
|
|
2
2
|
import { useMutationCache } from "@pinia/colada";
|
|
3
3
|
//#region src/delay.ts
|
|
4
4
|
/**
|
|
5
|
-
* Creates a delayed `asyncStatus` customRef that waits before switching to
|
|
5
|
+
* Creates a delayed `asyncStatus` customRef that waits before switching to
|
|
6
|
+
* `'loading'`.
|
|
6
7
|
*/
|
|
7
8
|
function createDelayedAsyncStatus(initialValue, delay, isDelaying) {
|
|
8
9
|
return customRef((track, trigger) => {
|
|
@@ -32,7 +33,8 @@ function createDelayedAsyncStatus(initialValue, delay, isDelaying) {
|
|
|
32
33
|
});
|
|
33
34
|
}
|
|
34
35
|
/**
|
|
35
|
-
* Delays the `asyncStatus` of queries by a certain amount of time to avoid
|
|
36
|
+
* Delays the `asyncStatus` of queries by a certain amount of time to avoid
|
|
37
|
+
* flickering between refreshes.
|
|
36
38
|
*
|
|
37
39
|
* @param options - Plugin options
|
|
38
40
|
*/
|
|
@@ -54,7 +56,8 @@ function PiniaColadaDelayQuery(options) {
|
|
|
54
56
|
};
|
|
55
57
|
}
|
|
56
58
|
/**
|
|
57
|
-
* Delays the `asyncStatus` of mutations by a certain amount of time to avoid
|
|
59
|
+
* Delays the `asyncStatus` of mutations by a certain amount of time to avoid
|
|
60
|
+
* flickering.
|
|
58
61
|
*
|
|
59
62
|
* @param options - Plugin options
|
|
60
63
|
*/
|
|
@@ -76,8 +79,9 @@ function PiniaColadaDelayMutations(options) {
|
|
|
76
79
|
};
|
|
77
80
|
}
|
|
78
81
|
/**
|
|
79
|
-
* Delays the `asyncStatus` of both queries and mutations by a certain amount
|
|
80
|
-
* Options apply to both, with optional `query`
|
|
82
|
+
* Delays the `asyncStatus` of both queries and mutations by a certain amount
|
|
83
|
+
* of time to avoid flickering. Options apply to both, with optional `query`
|
|
84
|
+
* and `mutations` nested overrides.
|
|
81
85
|
*
|
|
82
86
|
* @param options - Plugin options
|
|
83
87
|
*/
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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 *\n * @default 200\n */\n delay?: number | false\n\n /**\n * Query-specific delay override. Overrides the top-level `delay` for queries\n * only.\n */\n query?: { delay?: number | false }\n\n /**\n * Mutation-specific delay override. Overrides the top-level `delay` for\n * mutations only.\n */\n mutations?: { delay?: number | false }\n}\n\n/**\n * Creates a delayed `asyncStatus` customRef that waits before switching to\n * `'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\n * 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\n * 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\n * of time to avoid flickering. Options apply to both, with optional `query`\n * 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\n * 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\n * `'loading'`. Set to `false` or 0 to disable. Requires the\n * {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.\n *\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\n * `'loading'`. Set to `false` or 0 to disable. Requires the\n * {@link PiniaColadaDelay} or {@link PiniaColadaDelayMutations} plugin.\n *\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`\n * from becoming `'loading'`. Requires the {@link PiniaColadaDelay} or\n * {@link PiniaColadaDelayMutations} plugin.\n */\n isDelaying: ShallowRef<boolean>\n }\n}\n"],"mappings":";;;;;;;AAyCA,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;;;;;;;;AASJ,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;;;;;;;;;AAUN,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;;;;;;;;;;AAWN,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.2.
|
|
7
|
+
"version": "0.2.1",
|
|
8
8
|
"description": "Delay async status in Pinia Colada",
|
|
9
9
|
"author": {
|
|
10
10
|
"name": "Eduardo San Martin Morote",
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
"dist"
|
|
47
47
|
],
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"@pinia/colada": ">=1.
|
|
49
|
+
"@pinia/colada": ">=1.1.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@pinia/colada": "^1.
|
|
52
|
+
"@pinia/colada": "^1.1.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "tsdown",
|