@cloudcome/utils-vue 1.15.0 → 1.16.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/async.cjs +25 -2
- package/dist/async.cjs.map +1 -1
- package/dist/async.d.ts +0 -12
- package/dist/async.mjs +25 -2
- package/dist/async.mjs.map +1 -1
- package/dist/component.cjs.map +1 -1
- package/dist/component.mjs.map +1 -1
- package/dist/event.cjs.map +1 -1
- package/dist/event.mjs.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/request.cjs +13 -0
- package/dist/request.cjs.map +1 -1
- package/dist/request.d.ts +1 -12
- package/dist/request.mjs +13 -0
- package/dist/request.mjs.map +1 -1
- package/dist/shared.cjs.map +1 -1
- package/dist/shared.mjs.map +1 -1
- package/dist/state.cjs.map +1 -1
- package/dist/state.mjs.map +1 -1
- package/dist/time.cjs.map +1 -1
- package/dist/time.mjs.map +1 -1
- package/package.json +2 -2
package/dist/async.cjs
CHANGED
|
@@ -1,11 +1,34 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
2
|
let vue = require("vue");
|
|
3
3
|
//#region src/async.ts
|
|
4
|
+
/**
|
|
5
|
+
* 用于处理异步操作的组合式函数。
|
|
6
|
+
* 提供加载状态、数据、错误信息以及执行方法。
|
|
7
|
+
* @template O 异步函数返回的数据类型
|
|
8
|
+
* @template I 异步函数的入参类型
|
|
9
|
+
* @param fn 异步函数,接收参数并返回 Promise。
|
|
10
|
+
* @param options 异步操作的配置选项。
|
|
11
|
+
* @returns 包含状态和操作方法的对象:
|
|
12
|
+
* - loading: 是否正在加载。
|
|
13
|
+
* - data: 异步操作返回的数据。
|
|
14
|
+
* - error: 异步操作抛出的错误。
|
|
15
|
+
* - runAsync: 执行异步操作并返回 Promise。
|
|
16
|
+
* - run: 执行异步操作但不返回 Promise。
|
|
17
|
+
* @example
|
|
18
|
+
* const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {
|
|
19
|
+
* const response = await fetch(`/api/user/${id}`);
|
|
20
|
+
* return response.json();
|
|
21
|
+
* }, {
|
|
22
|
+
* onBefore: () => console.log('Fetching user data...'),
|
|
23
|
+
* onSuccess: (data) => console.log('User data fetched:', data),
|
|
24
|
+
* onError: (err) => console.error('Failed to fetch user data:', err),
|
|
25
|
+
* onFinally: () => console.log('Fetch operation completed.'),
|
|
26
|
+
* });
|
|
27
|
+
*/
|
|
4
28
|
function useAsync(fn, options) {
|
|
5
29
|
const _times = (0, vue.ref)(0);
|
|
6
30
|
const _loading = (0, vue.ref)(false);
|
|
7
|
-
const
|
|
8
|
-
const _data = (0, vue.shallowRef)(placeholder ? placeholder() : null);
|
|
31
|
+
const _data = (0, vue.shallowRef)(null);
|
|
9
32
|
const _error = (0, vue.ref)(null);
|
|
10
33
|
const times = (0, vue.computed)(() => _times.value);
|
|
11
34
|
const loading = (0, vue.computed)(() => _loading.value);
|
package/dist/async.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"async.cjs","names":[],"sources":["../src/async.ts"],"sourcesContent":["import type { AnyArray } from '@cloudcome/utils-core/types';\nimport { computed, type ComputedRef, ref,
|
|
1
|
+
{"version":3,"file":"async.cjs","names":[],"sources":["../src/async.ts"],"sourcesContent":["import type { AnyArray } from '@cloudcome/utils-core/types';\nimport { computed, type ComputedRef, ref, shallowRef } from 'vue';\n\n/**\n * 异步操作的配置选项\n * @template T 异步操作返回的数据类型\n * @template P 异步操作的参数类型\n */\nexport type UseAsyncOptions<I extends AnyArray, O> = {\n /**\n * 异步操作开始前的回调函数,可用于执行初始化逻辑或显示加载状态,抛出错误则中断操作\n */\n onBefore?: (...inputs: I) => unknown;\n\n /**\n * 异步操作成功后的回调函数,可用于处理成功后的数据更新或通知。\n * @param data 异步操作返回的数据。\n */\n onSuccess?: (data: O, ...inputs: I) => unknown;\n\n /**\n * 异步操作失败后的回调函数,可用于记录错误日志或显示错误提示。\n * @param err 异步操作抛出的错误。\n */\n onError?: (err: unknown, ...inputs: I) => unknown;\n\n /**\n * 异步操作结束后的回调函数(无论成功或失败),可用于清理操作或触发后续逻辑。\n */\n onAfter?: (...inputs: I) => unknown;\n};\n\nexport type UseAsyncState = {\n times: number;\n loading: boolean;\n error: unknown;\n};\n\nexport type UseAsyncOutput<I extends AnyArray, O> = {\n state: ComputedRef<UseAsyncState>;\n loading: ComputedRef<boolean>;\n data: ComputedRef<O | null>;\n error: ComputedRef<unknown>;\n run: (...inputs: I) => void;\n runAsync: (...inputs: I) => Promise<O>;\n};\n\n/**\n * 用于处理异步操作的组合式函数。\n * 提供加载状态、数据、错误信息以及执行方法。\n * @template O 异步函数返回的数据类型\n * @template I 异步函数的入参类型\n * @param fn 异步函数,接收参数并返回 Promise。\n * @param options 异步操作的配置选项。\n * @returns 包含状态和操作方法的对象:\n * - loading: 是否正在加载。\n * - data: 异步操作返回的数据。\n * - error: 异步操作抛出的错误。\n * - runAsync: 执行异步操作并返回 Promise。\n * - run: 执行异步操作但不返回 Promise。\n * @example\n * const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {\n * const response = await fetch(`/api/user/${id}`);\n * return response.json();\n * }, {\n * onBefore: () => console.log('Fetching user data...'),\n * onSuccess: (data) => console.log('User data fetched:', data),\n * onError: (err) => console.error('Failed to fetch user data:', err),\n * onFinally: () => console.log('Fetch operation completed.'),\n * });\n */\nexport function useAsync<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options?: UseAsyncOptions<I, O>,\n): UseAsyncOutput<I, O> {\n const _times = ref(0);\n const _loading = ref(false);\n const _data = shallowRef<O | null>(null);\n const _error = ref<unknown>(null);\n const times = computed(() => _times.value);\n const loading = computed(() => _loading.value);\n const data = computed(() => _data.value);\n const error = computed(() => _error.value);\n const state = computed(() => ({\n times: times.value,\n loading: loading.value,\n error: error.value,\n }));\n\n const runAsync = async (...inputs: I): Promise<O> => {\n _loading.value = true;\n _error.value = null;\n\n try {\n await options?.onBefore?.(...inputs);\n _times.value++;\n _data.value = await fn(...inputs);\n await options?.onSuccess?.(_data.value, ...inputs);\n return _data.value;\n } catch (err) {\n _error.value = err;\n try {\n options?.onError?.(err, ...inputs);\n } catch {\n //\n }\n throw err;\n } finally {\n _loading.value = false;\n await options?.onAfter?.(...inputs);\n }\n };\n\n const run = (...inputs: I) => {\n runAsync(...inputs).then();\n };\n\n return {\n state,\n\n /**\n * 是否正在加载。\n */\n loading,\n\n /**\n * 异步操作返回的数据。\n */\n data,\n\n /**\n * 异步操作抛出的错误。\n */\n error,\n\n /**\n * 执行异步操作并返回 Promise。\n * @param inputs 异步函数的参数。\n * @returns 异步操作的结果。\n */\n runAsync,\n\n /**\n * 执行异步操作但不返回 Promise。\n * @param inputs 异步函数的参数。\n */\n run,\n };\n}\n\n// const { run: run1 } = useAsync(() => Promise.resolve(1));\n// run1();\n\n// const { run: run2 } = useAsync((a: number) => Promise.resolve(1));\n// run2(2);\n\n// const { run: run3 } = useAsync((a: number, b: string) => Promise.resolve(1));\n// run3(2, '2');\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,SACd,IACA,SACsB;CACtB,MAAM,UAAA,GAAA,IAAA,KAAa,CAAC;CACpB,MAAM,YAAA,GAAA,IAAA,KAAe,KAAK;CAC1B,MAAM,SAAA,GAAA,IAAA,YAA6B,IAAI;CACvC,MAAM,UAAA,GAAA,IAAA,KAAsB,IAAI;CAChC,MAAM,SAAA,GAAA,IAAA,gBAAuB,OAAO,KAAK;CACzC,MAAM,WAAA,GAAA,IAAA,gBAAyB,SAAS,KAAK;CAC7C,MAAM,QAAA,GAAA,IAAA,gBAAsB,MAAM,KAAK;CACvC,MAAM,SAAA,GAAA,IAAA,gBAAuB,OAAO,KAAK;CACzC,MAAM,SAAA,GAAA,IAAA,iBAAwB;EAC5B,OAAO,MAAM;EACb,SAAS,QAAQ;EACjB,OAAO,MAAM;CACf,EAAE;CAEF,MAAM,WAAW,OAAO,GAAG,WAA0B;EACnD,SAAS,QAAQ;EACjB,OAAO,QAAQ;EAEf,IAAI;GACF,MAAM,SAAS,WAAW,GAAG,MAAM;GACnC,OAAO;GACP,MAAM,QAAQ,MAAM,GAAG,GAAG,MAAM;GAChC,MAAM,SAAS,YAAY,MAAM,OAAO,GAAG,MAAM;GACjD,OAAO,MAAM;EACf,SAAS,KAAK;GACZ,OAAO,QAAQ;GACf,IAAI;IACF,SAAS,UAAU,KAAK,GAAG,MAAM;GACnC,QAAQ,CAER;GACA,MAAM;EACR,UAAU;GACR,SAAS,QAAQ;GACjB,MAAM,SAAS,UAAU,GAAG,MAAM;EACpC;CACF;CAEA,MAAM,OAAO,GAAG,WAAc;EAC5B,SAAS,GAAG,MAAM,EAAE,KAAK;CAC3B;CAEA,OAAO;EACL;;;;EAKA;;;;EAKA;;;;EAKA;;;;;;EAOA;;;;;EAMA;CACF;AACF"}
|
package/dist/async.d.ts
CHANGED
|
@@ -6,7 +6,6 @@ import { ComputedRef } from 'vue';
|
|
|
6
6
|
* @template P 异步操作的参数类型
|
|
7
7
|
*/
|
|
8
8
|
export type UseAsyncOptions<I extends AnyArray, O> = {
|
|
9
|
-
placeholder?: () => O;
|
|
10
9
|
/**
|
|
11
10
|
* 异步操作开始前的回调函数,可用于执行初始化逻辑或显示加载状态,抛出错误则中断操作
|
|
12
11
|
*/
|
|
@@ -39,14 +38,6 @@ export type UseAsyncOutput<I extends AnyArray, O> = {
|
|
|
39
38
|
run: (...inputs: I) => void;
|
|
40
39
|
runAsync: (...inputs: I) => Promise<O>;
|
|
41
40
|
};
|
|
42
|
-
export type UseAsyncOutputFilled<I extends AnyArray, O> = {
|
|
43
|
-
state: ComputedRef<UseAsyncState>;
|
|
44
|
-
loading: ComputedRef<boolean>;
|
|
45
|
-
data: ComputedRef<O>;
|
|
46
|
-
error: ComputedRef<unknown>;
|
|
47
|
-
run: (...inputs: I) => void;
|
|
48
|
-
runAsync: (...inputs: I) => Promise<O>;
|
|
49
|
-
};
|
|
50
41
|
/**
|
|
51
42
|
* 用于处理异步操作的组合式函数。
|
|
52
43
|
* 提供加载状态、数据、错误信息以及执行方法。
|
|
@@ -71,7 +62,4 @@ export type UseAsyncOutputFilled<I extends AnyArray, O> = {
|
|
|
71
62
|
* onFinally: () => console.log('Fetch operation completed.'),
|
|
72
63
|
* });
|
|
73
64
|
*/
|
|
74
|
-
export declare function useAsync<I extends AnyArray, O>(fn: (...inputs: I) => Promise<O>, options: Omit<UseAsyncOptions<I, O>, 'placeholder'> & {
|
|
75
|
-
placeholder: () => O;
|
|
76
|
-
}): UseAsyncOutputFilled<I, O>;
|
|
77
65
|
export declare function useAsync<I extends AnyArray, O>(fn: (...inputs: I) => Promise<O>, options?: UseAsyncOptions<I, O>): UseAsyncOutput<I, O>;
|
package/dist/async.mjs
CHANGED
|
@@ -1,10 +1,33 @@
|
|
|
1
1
|
import { computed, ref, shallowRef } from "vue";
|
|
2
2
|
//#region src/async.ts
|
|
3
|
+
/**
|
|
4
|
+
* 用于处理异步操作的组合式函数。
|
|
5
|
+
* 提供加载状态、数据、错误信息以及执行方法。
|
|
6
|
+
* @template O 异步函数返回的数据类型
|
|
7
|
+
* @template I 异步函数的入参类型
|
|
8
|
+
* @param fn 异步函数,接收参数并返回 Promise。
|
|
9
|
+
* @param options 异步操作的配置选项。
|
|
10
|
+
* @returns 包含状态和操作方法的对象:
|
|
11
|
+
* - loading: 是否正在加载。
|
|
12
|
+
* - data: 异步操作返回的数据。
|
|
13
|
+
* - error: 异步操作抛出的错误。
|
|
14
|
+
* - runAsync: 执行异步操作并返回 Promise。
|
|
15
|
+
* - run: 执行异步操作但不返回 Promise。
|
|
16
|
+
* @example
|
|
17
|
+
* const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {
|
|
18
|
+
* const response = await fetch(`/api/user/${id}`);
|
|
19
|
+
* return response.json();
|
|
20
|
+
* }, {
|
|
21
|
+
* onBefore: () => console.log('Fetching user data...'),
|
|
22
|
+
* onSuccess: (data) => console.log('User data fetched:', data),
|
|
23
|
+
* onError: (err) => console.error('Failed to fetch user data:', err),
|
|
24
|
+
* onFinally: () => console.log('Fetch operation completed.'),
|
|
25
|
+
* });
|
|
26
|
+
*/
|
|
3
27
|
function useAsync(fn, options) {
|
|
4
28
|
const _times = ref(0);
|
|
5
29
|
const _loading = ref(false);
|
|
6
|
-
const
|
|
7
|
-
const _data = shallowRef(placeholder ? placeholder() : null);
|
|
30
|
+
const _data = shallowRef(null);
|
|
8
31
|
const _error = ref(null);
|
|
9
32
|
const times = computed(() => _times.value);
|
|
10
33
|
const loading = computed(() => _loading.value);
|
package/dist/async.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"async.mjs","names":[],"sources":["../src/async.ts"],"sourcesContent":["import type { AnyArray } from '@cloudcome/utils-core/types';\nimport { computed, type ComputedRef, ref,
|
|
1
|
+
{"version":3,"file":"async.mjs","names":[],"sources":["../src/async.ts"],"sourcesContent":["import type { AnyArray } from '@cloudcome/utils-core/types';\nimport { computed, type ComputedRef, ref, shallowRef } from 'vue';\n\n/**\n * 异步操作的配置选项\n * @template T 异步操作返回的数据类型\n * @template P 异步操作的参数类型\n */\nexport type UseAsyncOptions<I extends AnyArray, O> = {\n /**\n * 异步操作开始前的回调函数,可用于执行初始化逻辑或显示加载状态,抛出错误则中断操作\n */\n onBefore?: (...inputs: I) => unknown;\n\n /**\n * 异步操作成功后的回调函数,可用于处理成功后的数据更新或通知。\n * @param data 异步操作返回的数据。\n */\n onSuccess?: (data: O, ...inputs: I) => unknown;\n\n /**\n * 异步操作失败后的回调函数,可用于记录错误日志或显示错误提示。\n * @param err 异步操作抛出的错误。\n */\n onError?: (err: unknown, ...inputs: I) => unknown;\n\n /**\n * 异步操作结束后的回调函数(无论成功或失败),可用于清理操作或触发后续逻辑。\n */\n onAfter?: (...inputs: I) => unknown;\n};\n\nexport type UseAsyncState = {\n times: number;\n loading: boolean;\n error: unknown;\n};\n\nexport type UseAsyncOutput<I extends AnyArray, O> = {\n state: ComputedRef<UseAsyncState>;\n loading: ComputedRef<boolean>;\n data: ComputedRef<O | null>;\n error: ComputedRef<unknown>;\n run: (...inputs: I) => void;\n runAsync: (...inputs: I) => Promise<O>;\n};\n\n/**\n * 用于处理异步操作的组合式函数。\n * 提供加载状态、数据、错误信息以及执行方法。\n * @template O 异步函数返回的数据类型\n * @template I 异步函数的入参类型\n * @param fn 异步函数,接收参数并返回 Promise。\n * @param options 异步操作的配置选项。\n * @returns 包含状态和操作方法的对象:\n * - loading: 是否正在加载。\n * - data: 异步操作返回的数据。\n * - error: 异步操作抛出的错误。\n * - runAsync: 执行异步操作并返回 Promise。\n * - run: 执行异步操作但不返回 Promise。\n * @example\n * const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {\n * const response = await fetch(`/api/user/${id}`);\n * return response.json();\n * }, {\n * onBefore: () => console.log('Fetching user data...'),\n * onSuccess: (data) => console.log('User data fetched:', data),\n * onError: (err) => console.error('Failed to fetch user data:', err),\n * onFinally: () => console.log('Fetch operation completed.'),\n * });\n */\nexport function useAsync<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options?: UseAsyncOptions<I, O>,\n): UseAsyncOutput<I, O> {\n const _times = ref(0);\n const _loading = ref(false);\n const _data = shallowRef<O | null>(null);\n const _error = ref<unknown>(null);\n const times = computed(() => _times.value);\n const loading = computed(() => _loading.value);\n const data = computed(() => _data.value);\n const error = computed(() => _error.value);\n const state = computed(() => ({\n times: times.value,\n loading: loading.value,\n error: error.value,\n }));\n\n const runAsync = async (...inputs: I): Promise<O> => {\n _loading.value = true;\n _error.value = null;\n\n try {\n await options?.onBefore?.(...inputs);\n _times.value++;\n _data.value = await fn(...inputs);\n await options?.onSuccess?.(_data.value, ...inputs);\n return _data.value;\n } catch (err) {\n _error.value = err;\n try {\n options?.onError?.(err, ...inputs);\n } catch {\n //\n }\n throw err;\n } finally {\n _loading.value = false;\n await options?.onAfter?.(...inputs);\n }\n };\n\n const run = (...inputs: I) => {\n runAsync(...inputs).then();\n };\n\n return {\n state,\n\n /**\n * 是否正在加载。\n */\n loading,\n\n /**\n * 异步操作返回的数据。\n */\n data,\n\n /**\n * 异步操作抛出的错误。\n */\n error,\n\n /**\n * 执行异步操作并返回 Promise。\n * @param inputs 异步函数的参数。\n * @returns 异步操作的结果。\n */\n runAsync,\n\n /**\n * 执行异步操作但不返回 Promise。\n * @param inputs 异步函数的参数。\n */\n run,\n };\n}\n\n// const { run: run1 } = useAsync(() => Promise.resolve(1));\n// run1();\n\n// const { run: run2 } = useAsync((a: number) => Promise.resolve(1));\n// run2(2);\n\n// const { run: run3 } = useAsync((a: number, b: string) => Promise.resolve(1));\n// run3(2, '2');\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,SACd,IACA,SACsB;CACtB,MAAM,SAAS,IAAI,CAAC;CACpB,MAAM,WAAW,IAAI,KAAK;CAC1B,MAAM,QAAQ,WAAqB,IAAI;CACvC,MAAM,SAAS,IAAa,IAAI;CAChC,MAAM,QAAQ,eAAe,OAAO,KAAK;CACzC,MAAM,UAAU,eAAe,SAAS,KAAK;CAC7C,MAAM,OAAO,eAAe,MAAM,KAAK;CACvC,MAAM,QAAQ,eAAe,OAAO,KAAK;CACzC,MAAM,QAAQ,gBAAgB;EAC5B,OAAO,MAAM;EACb,SAAS,QAAQ;EACjB,OAAO,MAAM;CACf,EAAE;CAEF,MAAM,WAAW,OAAO,GAAG,WAA0B;EACnD,SAAS,QAAQ;EACjB,OAAO,QAAQ;EAEf,IAAI;GACF,MAAM,SAAS,WAAW,GAAG,MAAM;GACnC,OAAO;GACP,MAAM,QAAQ,MAAM,GAAG,GAAG,MAAM;GAChC,MAAM,SAAS,YAAY,MAAM,OAAO,GAAG,MAAM;GACjD,OAAO,MAAM;EACf,SAAS,KAAK;GACZ,OAAO,QAAQ;GACf,IAAI;IACF,SAAS,UAAU,KAAK,GAAG,MAAM;GACnC,QAAQ,CAER;GACA,MAAM;EACR,UAAU;GACR,SAAS,QAAQ;GACjB,MAAM,SAAS,UAAU,GAAG,MAAM;EACpC;CACF;CAEA,MAAM,OAAO,GAAG,WAAc;EAC5B,SAAS,GAAG,MAAM,EAAE,KAAK;CAC3B;CAEA,OAAO;EACL;;;;EAKA;;;;EAKA;;;;EAKA;;;;;;EAOA;;;;;EAMA;CACF;AACF"}
|
package/dist/component.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.cjs","names":[],"sources":["../src/component/life.ts","../src/component/self.ts"],"sourcesContent":["import type { MaybePromise } from '@cloudcome/utils-core/types';\nimport { onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, onUnmounted } from 'vue';\nimport { _runLifeHook } from '@/shared';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<undefined | HookListener>;\n\n/**\n * 页面挂载前生命周期钩子\n *\n * @param beforeMount - 在组件挂载前执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMount(() => {\n * console.log('组件即将挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMount(beforeMount: HookListenerWithDispose) {\n _runLifeHook(onBeforeMount, onBeforeUnmount, beforeMount);\n}\n\n/**\n * 页面挂载后生命周期钩子\n *\n * @param mounted - 在组件挂载后执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMounted(() => {\n * console.log('组件已挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMounted(mounted: HookListenerWithDispose) {\n _runLifeHook(onMounted, onUnmounted, mounted);\n}\n\n/**\n * 页面激活时生命周期钩子\n *\n * @param activated - 在组件被激活时执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useActivated(() => {\n * console.log('组件已激活');\n * // 可以返回一个清理函数,在组件失活前执行\n * return () => {\n * console.log('组件即将失活');\n * };\n * });\n * ```\n */\nexport function useActivated(activated: HookListenerWithDispose) {\n _runLifeHook(onActivated, onDeactivated, activated);\n}\n","import { type Ref, ref } from 'vue';\nimport type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';\n\n/**\n * 创建一个响应式引用,用于暴露组件实例\n * @template T 组件类型\n * @param {T} Comp 组件定义\n * @returns 返回一个可响应式访问的组件实例引用\n * @example\n * const compRef = useExpose(MyComponent)\n */\nexport function useExpose<T>(_Comp: T) {\n // 这里必须类型断言,否则构建会失败\n return ref<ComponentExposed<T> | null>(null) as Ref<ComponentExposed<T> | null>;\n}\n\n/**\n * 将字符串的首字母转换为小写\n * @template S 字符串类型\n * @typedef {S extends `${infer First}${infer Rest}` ? `${Lowercase<First>}${Rest}` : S} LowercaseFirst\n */\ntype LowercaseFirst<S extends string> = S extends `${infer First}${infer Rest}` ? `${Lowercase<First>}${Rest}` : S;\n\n/**\n * 从组件props中提取事件类型\n * @template T 组件props类型\n * @typedef {Object} PickEmits\n * @property {Object} [K in keyof T as K extends `on${infer Rest}`...] 转换后的emit事件名\n * - @property {Function} [...args: P] 事件回调函数\n */\ntype PickEmits<T> = {\n [K in keyof T as K extends `on${infer Rest}`\n ? // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n T[K] extends (...args: any[]) => any\n ? LowercaseFirst<Rest>\n : never\n : // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n never]: T[K] extends (...args: infer P) => any ? (...args: P) => unknown : never;\n};\n\n/**\n * 创建一个组件emit事件监听器\n * @template T 组件类型\n * @template E 从组件props中提取的事件类型\n * @template K 事件名\n * @param {T} Comp 组件定义\n * @param {K} event 事件名称\n * @param {E[K]} listener 事件监听函数\n * @returns {E[K]} 返回传入的事件监听函数\n * @example\n * const handleClick = useEmit(MyComponent, 'click', (payload) => {\n * console.log('click event', payload)\n * })\n */\nexport function useEmit<T, E extends PickEmits<Required<ComponentProps<T>>>, K extends keyof E>(\n _Comp: T,\n _event: K,\n listener: E[K],\n) {\n return listener;\n}\n\ntype PickMethods<T> = {\n // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n [K in keyof T]: T[K] extends (...args: unknown[]) => any ? T[K] : never;\n};\n\n/**\n * 从组件props中提取方法并返回指定方法\n * @template T 组件类型\n * @template M 从组件props中提取的方法类型\n * @template K 方法名类型\n * @param {T} Comp 组件定义\n * @param {K} name 方法名称\n * @param {M[K]} method 要返回的方法\n * @returns {M[K]} 返回传入的方法\n * @example\n * const handleUpdate = useMethod(MyComponent, 'update', (value) => {\n * console.log('update value', value)\n * })\n */\nexport function useMethod<T, M extends PickMethods<Required<ComponentProps<T>>>, K extends keyof M>(\n _Comp: T,\n _name: K,\n method: M[K],\n) {\n return method;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,SAAS,aAAsC;CAC7D,eAAA,aAAa,IAAA,eAAe,IAAA,iBAAiB,
|
|
1
|
+
{"version":3,"file":"component.cjs","names":[],"sources":["../src/component/life.ts","../src/component/self.ts"],"sourcesContent":["import type { MaybePromise } from '@cloudcome/utils-core/types';\nimport { onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, onUnmounted } from 'vue';\nimport { _runLifeHook } from '@/shared';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<undefined | HookListener>;\n\n/**\n * 页面挂载前生命周期钩子\n *\n * @param beforeMount - 在组件挂载前执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMount(() => {\n * console.log('组件即将挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMount(beforeMount: HookListenerWithDispose) {\n _runLifeHook(onBeforeMount, onBeforeUnmount, beforeMount);\n}\n\n/**\n * 页面挂载后生命周期钩子\n *\n * @param mounted - 在组件挂载后执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMounted(() => {\n * console.log('组件已挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMounted(mounted: HookListenerWithDispose) {\n _runLifeHook(onMounted, onUnmounted, mounted);\n}\n\n/**\n * 页面激活时生命周期钩子\n *\n * @param activated - 在组件被激活时执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useActivated(() => {\n * console.log('组件已激活');\n * // 可以返回一个清理函数,在组件失活前执行\n * return () => {\n * console.log('组件即将失活');\n * };\n * });\n * ```\n */\nexport function useActivated(activated: HookListenerWithDispose) {\n _runLifeHook(onActivated, onDeactivated, activated);\n}\n","import { type Ref, ref } from 'vue';\nimport type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';\n\n/**\n * 创建一个响应式引用,用于暴露组件实例\n * @template T 组件类型\n * @param {T} Comp 组件定义\n * @returns 返回一个可响应式访问的组件实例引用\n * @example\n * const compRef = useExpose(MyComponent)\n */\nexport function useExpose<T>(_Comp: T) {\n // 这里必须类型断言,否则构建会失败\n return ref<ComponentExposed<T> | null>(null) as Ref<ComponentExposed<T> | null>;\n}\n\n/**\n * 将字符串的首字母转换为小写\n * @template S 字符串类型\n * @typedef {S extends `${infer First}${infer Rest}` ? `${Lowercase<First>}${Rest}` : S} LowercaseFirst\n */\ntype LowercaseFirst<S extends string> = S extends `${infer First}${infer Rest}` ? `${Lowercase<First>}${Rest}` : S;\n\n/**\n * 从组件props中提取事件类型\n * @template T 组件props类型\n * @typedef {Object} PickEmits\n * @property {Object} [K in keyof T as K extends `on${infer Rest}`...] 转换后的emit事件名\n * - @property {Function} [...args: P] 事件回调函数\n */\ntype PickEmits<T> = {\n [K in keyof T as K extends `on${infer Rest}`\n ? // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n T[K] extends (...args: any[]) => any\n ? LowercaseFirst<Rest>\n : never\n : // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n never]: T[K] extends (...args: infer P) => any ? (...args: P) => unknown : never;\n};\n\n/**\n * 创建一个组件emit事件监听器\n * @template T 组件类型\n * @template E 从组件props中提取的事件类型\n * @template K 事件名\n * @param {T} Comp 组件定义\n * @param {K} event 事件名称\n * @param {E[K]} listener 事件监听函数\n * @returns {E[K]} 返回传入的事件监听函数\n * @example\n * const handleClick = useEmit(MyComponent, 'click', (payload) => {\n * console.log('click event', payload)\n * })\n */\nexport function useEmit<T, E extends PickEmits<Required<ComponentProps<T>>>, K extends keyof E>(\n _Comp: T,\n _event: K,\n listener: E[K],\n) {\n return listener;\n}\n\ntype PickMethods<T> = {\n // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n [K in keyof T]: T[K] extends (...args: unknown[]) => any ? T[K] : never;\n};\n\n/**\n * 从组件props中提取方法并返回指定方法\n * @template T 组件类型\n * @template M 从组件props中提取的方法类型\n * @template K 方法名类型\n * @param {T} Comp 组件定义\n * @param {K} name 方法名称\n * @param {M[K]} method 要返回的方法\n * @returns {M[K]} 返回传入的方法\n * @example\n * const handleUpdate = useMethod(MyComponent, 'update', (value) => {\n * console.log('update value', value)\n * })\n */\nexport function useMethod<T, M extends PickMethods<Required<ComponentProps<T>>>, K extends keyof M>(\n _Comp: T,\n _name: K,\n method: M[K],\n) {\n return method;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,SAAS,aAAsC;CAC7D,eAAA,aAAa,IAAA,eAAe,IAAA,iBAAiB,WAAW;AAC1D;;;;;;;;;;;;;;;;;AAkBA,SAAgB,WAAW,SAAkC;CAC3D,eAAA,aAAa,IAAA,WAAW,IAAA,aAAa,OAAO;AAC9C;;;;;;;;;;;;;;;;;AAkBA,SAAgB,aAAa,WAAoC;CAC/D,eAAA,aAAa,IAAA,aAAa,IAAA,eAAe,SAAS;AACpD;;;;;;;;;;;ACtDA,SAAgB,UAAa,OAAU;CAErC,QAAA,GAAA,IAAA,KAAuC,IAAI;AAC7C;;;;;;;;;;;;;;;AAwCA,SAAgB,QACd,OACA,QACA,UACA;CACA,OAAO;AACT;;;;;;;;;;;;;;;AAqBA,SAAgB,UACd,OACA,OACA,QACA;CACA,OAAO;AACT"}
|
package/dist/component.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.mjs","names":[],"sources":["../src/component/life.ts","../src/component/self.ts"],"sourcesContent":["import type { MaybePromise } from '@cloudcome/utils-core/types';\nimport { onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, onUnmounted } from 'vue';\nimport { _runLifeHook } from '@/shared';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<undefined | HookListener>;\n\n/**\n * 页面挂载前生命周期钩子\n *\n * @param beforeMount - 在组件挂载前执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMount(() => {\n * console.log('组件即将挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMount(beforeMount: HookListenerWithDispose) {\n _runLifeHook(onBeforeMount, onBeforeUnmount, beforeMount);\n}\n\n/**\n * 页面挂载后生命周期钩子\n *\n * @param mounted - 在组件挂载后执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMounted(() => {\n * console.log('组件已挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMounted(mounted: HookListenerWithDispose) {\n _runLifeHook(onMounted, onUnmounted, mounted);\n}\n\n/**\n * 页面激活时生命周期钩子\n *\n * @param activated - 在组件被激活时执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useActivated(() => {\n * console.log('组件已激活');\n * // 可以返回一个清理函数,在组件失活前执行\n * return () => {\n * console.log('组件即将失活');\n * };\n * });\n * ```\n */\nexport function useActivated(activated: HookListenerWithDispose) {\n _runLifeHook(onActivated, onDeactivated, activated);\n}\n","import { type Ref, ref } from 'vue';\nimport type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';\n\n/**\n * 创建一个响应式引用,用于暴露组件实例\n * @template T 组件类型\n * @param {T} Comp 组件定义\n * @returns 返回一个可响应式访问的组件实例引用\n * @example\n * const compRef = useExpose(MyComponent)\n */\nexport function useExpose<T>(_Comp: T) {\n // 这里必须类型断言,否则构建会失败\n return ref<ComponentExposed<T> | null>(null) as Ref<ComponentExposed<T> | null>;\n}\n\n/**\n * 将字符串的首字母转换为小写\n * @template S 字符串类型\n * @typedef {S extends `${infer First}${infer Rest}` ? `${Lowercase<First>}${Rest}` : S} LowercaseFirst\n */\ntype LowercaseFirst<S extends string> = S extends `${infer First}${infer Rest}` ? `${Lowercase<First>}${Rest}` : S;\n\n/**\n * 从组件props中提取事件类型\n * @template T 组件props类型\n * @typedef {Object} PickEmits\n * @property {Object} [K in keyof T as K extends `on${infer Rest}`...] 转换后的emit事件名\n * - @property {Function} [...args: P] 事件回调函数\n */\ntype PickEmits<T> = {\n [K in keyof T as K extends `on${infer Rest}`\n ? // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n T[K] extends (...args: any[]) => any\n ? LowercaseFirst<Rest>\n : never\n : // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n never]: T[K] extends (...args: infer P) => any ? (...args: P) => unknown : never;\n};\n\n/**\n * 创建一个组件emit事件监听器\n * @template T 组件类型\n * @template E 从组件props中提取的事件类型\n * @template K 事件名\n * @param {T} Comp 组件定义\n * @param {K} event 事件名称\n * @param {E[K]} listener 事件监听函数\n * @returns {E[K]} 返回传入的事件监听函数\n * @example\n * const handleClick = useEmit(MyComponent, 'click', (payload) => {\n * console.log('click event', payload)\n * })\n */\nexport function useEmit<T, E extends PickEmits<Required<ComponentProps<T>>>, K extends keyof E>(\n _Comp: T,\n _event: K,\n listener: E[K],\n) {\n return listener;\n}\n\ntype PickMethods<T> = {\n // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n [K in keyof T]: T[K] extends (...args: unknown[]) => any ? T[K] : never;\n};\n\n/**\n * 从组件props中提取方法并返回指定方法\n * @template T 组件类型\n * @template M 从组件props中提取的方法类型\n * @template K 方法名类型\n * @param {T} Comp 组件定义\n * @param {K} name 方法名称\n * @param {M[K]} method 要返回的方法\n * @returns {M[K]} 返回传入的方法\n * @example\n * const handleUpdate = useMethod(MyComponent, 'update', (value) => {\n * console.log('update value', value)\n * })\n */\nexport function useMethod<T, M extends PickMethods<Required<ComponentProps<T>>>, K extends keyof M>(\n _Comp: T,\n _name: K,\n method: M[K],\n) {\n return method;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,SAAS,aAAsC;CAC7D,aAAa,eAAe,iBAAiB,
|
|
1
|
+
{"version":3,"file":"component.mjs","names":[],"sources":["../src/component/life.ts","../src/component/self.ts"],"sourcesContent":["import type { MaybePromise } from '@cloudcome/utils-core/types';\nimport { onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, onUnmounted } from 'vue';\nimport { _runLifeHook } from '@/shared';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<undefined | HookListener>;\n\n/**\n * 页面挂载前生命周期钩子\n *\n * @param beforeMount - 在组件挂载前执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMount(() => {\n * console.log('组件即将挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMount(beforeMount: HookListenerWithDispose) {\n _runLifeHook(onBeforeMount, onBeforeUnmount, beforeMount);\n}\n\n/**\n * 页面挂载后生命周期钩子\n *\n * @param mounted - 在组件挂载后执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMounted(() => {\n * console.log('组件已挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMounted(mounted: HookListenerWithDispose) {\n _runLifeHook(onMounted, onUnmounted, mounted);\n}\n\n/**\n * 页面激活时生命周期钩子\n *\n * @param activated - 在组件被激活时执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useActivated(() => {\n * console.log('组件已激活');\n * // 可以返回一个清理函数,在组件失活前执行\n * return () => {\n * console.log('组件即将失活');\n * };\n * });\n * ```\n */\nexport function useActivated(activated: HookListenerWithDispose) {\n _runLifeHook(onActivated, onDeactivated, activated);\n}\n","import { type Ref, ref } from 'vue';\nimport type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';\n\n/**\n * 创建一个响应式引用,用于暴露组件实例\n * @template T 组件类型\n * @param {T} Comp 组件定义\n * @returns 返回一个可响应式访问的组件实例引用\n * @example\n * const compRef = useExpose(MyComponent)\n */\nexport function useExpose<T>(_Comp: T) {\n // 这里必须类型断言,否则构建会失败\n return ref<ComponentExposed<T> | null>(null) as Ref<ComponentExposed<T> | null>;\n}\n\n/**\n * 将字符串的首字母转换为小写\n * @template S 字符串类型\n * @typedef {S extends `${infer First}${infer Rest}` ? `${Lowercase<First>}${Rest}` : S} LowercaseFirst\n */\ntype LowercaseFirst<S extends string> = S extends `${infer First}${infer Rest}` ? `${Lowercase<First>}${Rest}` : S;\n\n/**\n * 从组件props中提取事件类型\n * @template T 组件props类型\n * @typedef {Object} PickEmits\n * @property {Object} [K in keyof T as K extends `on${infer Rest}`...] 转换后的emit事件名\n * - @property {Function} [...args: P] 事件回调函数\n */\ntype PickEmits<T> = {\n [K in keyof T as K extends `on${infer Rest}`\n ? // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n T[K] extends (...args: any[]) => any\n ? LowercaseFirst<Rest>\n : never\n : // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n never]: T[K] extends (...args: infer P) => any ? (...args: P) => unknown : never;\n};\n\n/**\n * 创建一个组件emit事件监听器\n * @template T 组件类型\n * @template E 从组件props中提取的事件类型\n * @template K 事件名\n * @param {T} Comp 组件定义\n * @param {K} event 事件名称\n * @param {E[K]} listener 事件监听函数\n * @returns {E[K]} 返回传入的事件监听函数\n * @example\n * const handleClick = useEmit(MyComponent, 'click', (payload) => {\n * console.log('click event', payload)\n * })\n */\nexport function useEmit<T, E extends PickEmits<Required<ComponentProps<T>>>, K extends keyof E>(\n _Comp: T,\n _event: K,\n listener: E[K],\n) {\n return listener;\n}\n\ntype PickMethods<T> = {\n // biome-ignore lint/suspicious/noExplicitAny: 必须使用 any\n [K in keyof T]: T[K] extends (...args: unknown[]) => any ? T[K] : never;\n};\n\n/**\n * 从组件props中提取方法并返回指定方法\n * @template T 组件类型\n * @template M 从组件props中提取的方法类型\n * @template K 方法名类型\n * @param {T} Comp 组件定义\n * @param {K} name 方法名称\n * @param {M[K]} method 要返回的方法\n * @returns {M[K]} 返回传入的方法\n * @example\n * const handleUpdate = useMethod(MyComponent, 'update', (value) => {\n * console.log('update value', value)\n * })\n */\nexport function useMethod<T, M extends PickMethods<Required<ComponentProps<T>>>, K extends keyof M>(\n _Comp: T,\n _name: K,\n method: M[K],\n) {\n return method;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,SAAS,aAAsC;CAC7D,aAAa,eAAe,iBAAiB,WAAW;AAC1D;;;;;;;;;;;;;;;;;AAkBA,SAAgB,WAAW,SAAkC;CAC3D,aAAa,WAAW,aAAa,OAAO;AAC9C;;;;;;;;;;;;;;;;;AAkBA,SAAgB,aAAa,WAAoC;CAC/D,aAAa,aAAa,eAAe,SAAS;AACpD;;;;;;;;;;;ACtDA,SAAgB,UAAa,OAAU;CAErC,OAAO,IAAgC,IAAI;AAC7C;;;;;;;;;;;;;;;AAwCA,SAAgB,QACd,OACA,QACA,UACA;CACA,OAAO;AACT;;;;;;;;;;;;;;;AAqBA,SAAgB,UACd,OACA,OACA,QACA;CACA,OAAO;AACT"}
|
package/dist/event.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"event.cjs","names":[],"sources":["../src/event.ts"],"sourcesContent":["import { Emitter, type EmitterListener, type EmitterMap } from '@cloudcome/utils-core/emitter';\nimport { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from 'vue';\n\nexport type EventEmitter = {\n on: (event: string, listener: (...payloads: unknown[]) => unknown) => unknown;\n off: (event: string, listener: (...payloads: unknown[]) => unknown) => unknown;\n emit: (event: string, ...payloads: unknown[]) => unknown;\n};\n\nexport type CreateEventCenterOptions = {\n emitter?: EventEmitter;\n stage?: 'mount' | 'mounted';\n};\n\nexport function createEventHook<E extends EmitterMap>(options: CreateEventCenterOptions = {}) {\n const emitter = options.emitter || new Emitter();\n\n const on = <K extends keyof E>(event: K, listener: EmitterListener<E, K>) => {\n // @ts-expect-error\n emitter.on(event as string, listener);\n };\n\n const off = <K extends keyof E>(event: K, listener: EmitterListener<E, K>) => {\n // @ts-expect-error\n emitter.off(event as string, listener);\n };\n\n const emit = <K extends keyof E>(event: K, ...payloads: E[K]) => {\n emitter.emit(event as string, ...payloads);\n };\n\n const useEvent = <K extends keyof E>(event: K, fn: (...payloads: E[K]) => unknown) => {\n if (options.stage === 'mounted') {\n onMounted(() => {\n on(event, fn);\n });\n onUnmounted(() => {\n off(event, fn);\n });\n } else {\n onBeforeMount(() => {\n on(event, fn);\n });\n onBeforeUnmount(() => {\n off(event, fn);\n });\n }\n };\n\n return { on, off, emit, useEvent };\n}\n"],"mappings":";;;;AAcA,SAAgB,gBAAsC,UAAoC,
|
|
1
|
+
{"version":3,"file":"event.cjs","names":[],"sources":["../src/event.ts"],"sourcesContent":["import { Emitter, type EmitterListener, type EmitterMap } from '@cloudcome/utils-core/emitter';\nimport { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from 'vue';\n\nexport type EventEmitter = {\n on: (event: string, listener: (...payloads: unknown[]) => unknown) => unknown;\n off: (event: string, listener: (...payloads: unknown[]) => unknown) => unknown;\n emit: (event: string, ...payloads: unknown[]) => unknown;\n};\n\nexport type CreateEventCenterOptions = {\n emitter?: EventEmitter;\n stage?: 'mount' | 'mounted';\n};\n\nexport function createEventHook<E extends EmitterMap>(options: CreateEventCenterOptions = {}) {\n const emitter = options.emitter || new Emitter();\n\n const on = <K extends keyof E>(event: K, listener: EmitterListener<E, K>) => {\n // @ts-expect-error\n emitter.on(event as string, listener);\n };\n\n const off = <K extends keyof E>(event: K, listener: EmitterListener<E, K>) => {\n // @ts-expect-error\n emitter.off(event as string, listener);\n };\n\n const emit = <K extends keyof E>(event: K, ...payloads: E[K]) => {\n emitter.emit(event as string, ...payloads);\n };\n\n const useEvent = <K extends keyof E>(event: K, fn: (...payloads: E[K]) => unknown) => {\n if (options.stage === 'mounted') {\n onMounted(() => {\n on(event, fn);\n });\n onUnmounted(() => {\n off(event, fn);\n });\n } else {\n onBeforeMount(() => {\n on(event, fn);\n });\n onBeforeUnmount(() => {\n off(event, fn);\n });\n }\n };\n\n return { on, off, emit, useEvent };\n}\n"],"mappings":";;;;AAcA,SAAgB,gBAAsC,UAAoC,CAAC,GAAG;CAC5F,MAAM,UAAU,QAAQ,WAAW,IAAI,8BAAA,QAAQ;CAE/C,MAAM,MAAyB,OAAU,aAAoC;EAE3E,QAAQ,GAAG,OAAiB,QAAQ;CACtC;CAEA,MAAM,OAA0B,OAAU,aAAoC;EAE5E,QAAQ,IAAI,OAAiB,QAAQ;CACvC;CAEA,MAAM,QAA2B,OAAU,GAAG,aAAmB;EAC/D,QAAQ,KAAK,OAAiB,GAAG,QAAQ;CAC3C;CAEA,MAAM,YAA+B,OAAU,OAAuC;EACpF,IAAI,QAAQ,UAAU,WAAW;GAC/B,CAAA,GAAA,IAAA,iBAAgB;IACd,GAAG,OAAO,EAAE;GACd,CAAC;GACD,CAAA,GAAA,IAAA,mBAAkB;IAChB,IAAI,OAAO,EAAE;GACf,CAAC;EACH,OAAO;GACL,CAAA,GAAA,IAAA,qBAAoB;IAClB,GAAG,OAAO,EAAE;GACd,CAAC;GACD,CAAA,GAAA,IAAA,uBAAsB;IACpB,IAAI,OAAO,EAAE;GACf,CAAC;EACH;CACF;CAEA,OAAO;EAAE;EAAI;EAAK;EAAM;CAAS;AACnC"}
|
package/dist/event.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"event.mjs","names":[],"sources":["../src/event.ts"],"sourcesContent":["import { Emitter, type EmitterListener, type EmitterMap } from '@cloudcome/utils-core/emitter';\nimport { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from 'vue';\n\nexport type EventEmitter = {\n on: (event: string, listener: (...payloads: unknown[]) => unknown) => unknown;\n off: (event: string, listener: (...payloads: unknown[]) => unknown) => unknown;\n emit: (event: string, ...payloads: unknown[]) => unknown;\n};\n\nexport type CreateEventCenterOptions = {\n emitter?: EventEmitter;\n stage?: 'mount' | 'mounted';\n};\n\nexport function createEventHook<E extends EmitterMap>(options: CreateEventCenterOptions = {}) {\n const emitter = options.emitter || new Emitter();\n\n const on = <K extends keyof E>(event: K, listener: EmitterListener<E, K>) => {\n // @ts-expect-error\n emitter.on(event as string, listener);\n };\n\n const off = <K extends keyof E>(event: K, listener: EmitterListener<E, K>) => {\n // @ts-expect-error\n emitter.off(event as string, listener);\n };\n\n const emit = <K extends keyof E>(event: K, ...payloads: E[K]) => {\n emitter.emit(event as string, ...payloads);\n };\n\n const useEvent = <K extends keyof E>(event: K, fn: (...payloads: E[K]) => unknown) => {\n if (options.stage === 'mounted') {\n onMounted(() => {\n on(event, fn);\n });\n onUnmounted(() => {\n off(event, fn);\n });\n } else {\n onBeforeMount(() => {\n on(event, fn);\n });\n onBeforeUnmount(() => {\n off(event, fn);\n });\n }\n };\n\n return { on, off, emit, useEvent };\n}\n"],"mappings":";;;AAcA,SAAgB,gBAAsC,UAAoC,
|
|
1
|
+
{"version":3,"file":"event.mjs","names":[],"sources":["../src/event.ts"],"sourcesContent":["import { Emitter, type EmitterListener, type EmitterMap } from '@cloudcome/utils-core/emitter';\nimport { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from 'vue';\n\nexport type EventEmitter = {\n on: (event: string, listener: (...payloads: unknown[]) => unknown) => unknown;\n off: (event: string, listener: (...payloads: unknown[]) => unknown) => unknown;\n emit: (event: string, ...payloads: unknown[]) => unknown;\n};\n\nexport type CreateEventCenterOptions = {\n emitter?: EventEmitter;\n stage?: 'mount' | 'mounted';\n};\n\nexport function createEventHook<E extends EmitterMap>(options: CreateEventCenterOptions = {}) {\n const emitter = options.emitter || new Emitter();\n\n const on = <K extends keyof E>(event: K, listener: EmitterListener<E, K>) => {\n // @ts-expect-error\n emitter.on(event as string, listener);\n };\n\n const off = <K extends keyof E>(event: K, listener: EmitterListener<E, K>) => {\n // @ts-expect-error\n emitter.off(event as string, listener);\n };\n\n const emit = <K extends keyof E>(event: K, ...payloads: E[K]) => {\n emitter.emit(event as string, ...payloads);\n };\n\n const useEvent = <K extends keyof E>(event: K, fn: (...payloads: E[K]) => unknown) => {\n if (options.stage === 'mounted') {\n onMounted(() => {\n on(event, fn);\n });\n onUnmounted(() => {\n off(event, fn);\n });\n } else {\n onBeforeMount(() => {\n on(event, fn);\n });\n onBeforeUnmount(() => {\n off(event, fn);\n });\n }\n };\n\n return { on, off, emit, useEvent };\n}\n"],"mappings":";;;AAcA,SAAgB,gBAAsC,UAAoC,CAAC,GAAG;CAC5F,MAAM,UAAU,QAAQ,WAAW,IAAI,QAAQ;CAE/C,MAAM,MAAyB,OAAU,aAAoC;EAE3E,QAAQ,GAAG,OAAiB,QAAQ;CACtC;CAEA,MAAM,OAA0B,OAAU,aAAoC;EAE5E,QAAQ,IAAI,OAAiB,QAAQ;CACvC;CAEA,MAAM,QAA2B,OAAU,GAAG,aAAmB;EAC/D,QAAQ,KAAK,OAAiB,GAAG,QAAQ;CAC3C;CAEA,MAAM,YAA+B,OAAU,OAAuC;EACpF,IAAI,QAAQ,UAAU,WAAW;GAC/B,gBAAgB;IACd,GAAG,OAAO,EAAE;GACd,CAAC;GACD,kBAAkB;IAChB,IAAI,OAAO,EAAE;GACf,CAAC;EACH,OAAO;GACL,oBAAoB;IAClB,GAAG,OAAO,EAAE;GACd,CAAC;GACD,sBAAsB;IACpB,IAAI,OAAO,EAAE;GACf,CAAC;EACH;CACF;CAEA,OAAO;EAAE;EAAI;EAAK;EAAM;CAAS;AACnC"}
|
package/dist/index.cjs
CHANGED
package/dist/index.mjs
CHANGED
package/dist/request.cjs
CHANGED
|
@@ -7,6 +7,19 @@ let _cloudcome_utils_core_try = require("@cloudcome/utils-core/try");
|
|
|
7
7
|
//#region src/request.ts
|
|
8
8
|
var defaultCacheStorage = new _cloudcome_utils_core_cache.MemoryCache();
|
|
9
9
|
var defaultShareStorage = new _cloudcome_utils_core_cache.MemoryCache();
|
|
10
|
+
/**
|
|
11
|
+
* 使用请求功能的组合式函数。
|
|
12
|
+
* 支持缓存和异步操作的封装。
|
|
13
|
+
*
|
|
14
|
+
* @template O 请求返回的数据类型。
|
|
15
|
+
* @template I 请求参数的类型。
|
|
16
|
+
* @param {() => Promise<O>} fn 实际的请求函数,返回一个 Promise。
|
|
17
|
+
* @param {UseRequestOptions<I, O>} [options] 请求选项,包括缓存和回调配置。
|
|
18
|
+
* @returns 返回一个对象,包含以下内容:
|
|
19
|
+
* - 异步操作的状态(如 loading、error 等)。
|
|
20
|
+
* - 是否命中缓存(hitCache)。
|
|
21
|
+
* - 是否命中共享请求(hitShare)。
|
|
22
|
+
*/
|
|
10
23
|
function useRequest(fn, options) {
|
|
11
24
|
const { id, cache, share, onCacheHit } = options || {};
|
|
12
25
|
const shareStorage = defaultShareStorage;
|
package/dist/request.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"request.cjs","names":[],"sources":["../src/request.ts"],"sourcesContent":["import { type Cache, type Cached, type CacheOptions, MemoryCache } from '@cloudcome/utils-core/cache';\nimport type { DateValue } from '@cloudcome/utils-core/date';\nimport { tryFlatten } from '@cloudcome/utils-core/try';\nimport { isFunction, isObject } from '@cloudcome/utils-core/type';\nimport type { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';\nimport type { ComputedRef, Ref } from 'vue';\nimport { computed, ref } from 'vue';\nimport {
|
|
1
|
+
{"version":3,"file":"request.cjs","names":[],"sources":["../src/request.ts"],"sourcesContent":["import { type Cache, type Cached, type CacheOptions, MemoryCache } from '@cloudcome/utils-core/cache';\nimport type { DateValue } from '@cloudcome/utils-core/date';\nimport { tryFlatten } from '@cloudcome/utils-core/try';\nimport { isFunction, isObject } from '@cloudcome/utils-core/type';\nimport type { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';\nimport type { ComputedRef, Ref } from 'vue';\nimport { computed, ref } from 'vue';\nimport { type UseAsyncOptions, type UseAsyncOutput, type UseAsyncState, useAsync } from './async';\n\n/**\n * 请求缓存配置选项。\n * @template T 缓存数据的类型。\n */\nexport type RequestCacheOptions<T> = CacheOptions & {\n /**\n * 是否禁用缓存,默认为 false。\n * 如果设置为 true,则不会使用缓存。\n */\n disabled?: boolean;\n\n /**\n * 自定义缓存存储实现。\n * 可以传入自定义的缓存类来替代默认的内存缓存。\n */\n storage?: Cache<T>;\n};\n\nexport type RequestShareOptions = {\n /**\n * 是否禁用共享请求,默认为 false。\n * 如果设置为 true,则不会共享请求结果。\n */\n disabled?: boolean;\n\n /**\n * 共享的最大时长(毫秒),为 0 时表示永久共享。\n * 超过该时长后,共享的请求结果将被清除。\n */\n maxAge?: number;\n\n /**\n * 共享的过期时间(时间戳、日期字符串、日期对象等)。\n * 优先级比 maxAge 更高,指定具体的过期时间。\n */\n expiredAt?: DateValue;\n};\n\nexport type RetryOptions = {\n /**\n * 是否禁用重试,默认为 false。\n * 如果设置为 true,则不会重试。\n */\n disabled?: boolean;\n};\n\n/**\n * 请求选项,扩展了异步操作的选项。\n * @template T 请求返回的数据类型。\n * @template I 请求参数的类型。\n */\nexport type UseRequestOptions<I extends AnyArray, O> = UseAsyncOptions<I, O> & {\n /**\n * 请求的唯一标识符,可以是字符串或函数返回的字符串。\n * 用于缓存和共享的键值。\n */\n id?: MaybeCallable<string>;\n\n /**\n * 缓存配置,可以是布尔值或完整的缓存选项。\n * 如果为 true,则启用默认缓存;如果为对象,则可以自定义缓存行为。\n */\n cache?: boolean | RequestCacheOptions<O>;\n\n /**\n * 共享配置,可以是布尔值或完整的共享选项。\n * 共享时,相同的请求 ID 会复用第一次发出且没有响应完成的请求。\n *\n * 例如,10 组件同时或先后发起 10 次请求用于获取用户信息,\n * 那么这 10 个组件会共同等待第一次发起的请求,直到完成。\n *\n * 共享与缓存是不同的概念,共享是进行时,缓存是过去时,即:\n * - 共享是共享**正在发送**的请求\n * - 缓存是缓存**已经发送**的请求\n *\n * 如果为 true,则启用默认共享;如果为对象,则可以自定义共享行为。\n */\n share?: boolean | RequestShareOptions;\n\n /**\n * 当命中缓存时的回调函数。\n * 在缓存命中时触发,接收缓存的数据作为参数。\n */\n onCacheHit?: (cached: Cached<O>) => unknown;\n};\n\nexport type UseRequestState = UseAsyncState & {\n /**\n * 是否命中共享数据\n */\n hitShare: boolean;\n\n /**\n * 是否命中缓存\n */\n hitCache: boolean;\n};\n\nexport type UseRequestOutput<I extends AnyArray, O> = Omit<UseAsyncOutput<I, O>, 'run' | 'runAsync' | 'state'> & {\n state: ComputedRef<UseRequestState>;\n send: (...inputs: I) => void;\n sendAsync: (...inputs: I) => Promise<O>;\n hitShare: Ref<boolean>;\n hitCache: Ref<boolean>;\n};\n\nconst defaultCacheStorage = new MemoryCache();\nconst defaultShareStorage = new MemoryCache();\n\n/**\n * 使用请求功能的组合式函数。\n * 支持缓存和异步操作的封装。\n *\n * @template O 请求返回的数据类型。\n * @template I 请求参数的类型。\n * @param {() => Promise<O>} fn 实际的请求函数,返回一个 Promise。\n * @param {UseRequestOptions<I, O>} [options] 请求选项,包括缓存和回调配置。\n * @returns 返回一个对象,包含以下内容:\n * - 异步操作的状态(如 loading、error 等)。\n * - 是否命中缓存(hitCache)。\n * - 是否命中共享请求(hitShare)。\n */\nexport function useRequest<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options?: UseRequestOptions<I, O>,\n): UseRequestOutput<I, O> {\n const { id, cache, share, onCacheHit } = options || {};\n\n const shareStorage = defaultShareStorage as MemoryCache<Promise<O>>;\n const shareAble = isObject(share) ? !share.disabled : share;\n const shareOptions = isObject(share) ? share : {};\n const hitShare = ref(false);\n\n const _cached = defaultCacheStorage as Cache<O>;\n const cacheStorage = isObject(cache) ? cache.storage || _cached : _cached;\n const cacheAble = isObject(cache) ? !cache.disabled : cache;\n const cacheOptions = isObject(cache) ? cache : {};\n const hitCache = ref(false);\n\n const cacheableFn = async (...inputs: I) => {\n const requestId = isFunction(id) ? id() : id;\n\n hitShare.value = false;\n hitCache.value = false;\n\n if (requestId && shareAble) {\n const shared = shareStorage.get(requestId);\n if (shared) {\n hitShare.value = true;\n const [err, data] = await tryFlatten(shared.data);\n if (err) {\n shareStorage.del(requestId);\n throw err;\n }\n\n return data;\n }\n }\n\n // 这里不能先执行,因为如果要缓存的话,必须用缓存结果\n const { promise, resolve, reject } = Promise.withResolvers<O>();\n\n if (requestId && shareAble) {\n shareStorage.set(requestId, promise, shareOptions);\n }\n\n if (requestId && cacheAble) {\n const cached = await cacheStorage.get(requestId);\n\n if (cached) {\n const data = cached.data;\n resolve(data);\n hitCache.value = true;\n await onCacheHit?.(cached);\n return promise;\n }\n } else if (cacheAble) {\n console.warn('[useRequest] 缓存功能启用但未提供 requestId,无法使用缓存');\n }\n\n const [err, data] = await tryFlatten(fn(...inputs));\n\n if (err) {\n reject(err);\n return promise;\n }\n\n if (requestId && cacheAble) {\n cacheStorage.set(requestId, data, cacheOptions);\n }\n\n resolve(data);\n return promise;\n };\n const { state: asyncState, run: send, runAsync: sendAsync, ...async } = useAsync(cacheableFn, options);\n\n const state = computed(() => ({\n ...asyncState.value,\n hitShare: hitShare.value,\n hitCache: hitCache.value,\n }));\n\n return {\n ...async,\n state,\n send,\n sendAsync,\n hitShare,\n hitCache,\n };\n}\n"],"mappings":";;;;;;;AAmHA,IAAM,sBAAsB,IAAI,4BAAA,YAAY;AAC5C,IAAM,sBAAsB,IAAI,4BAAA,YAAY;;;;;;;;;;;;;;AAe5C,SAAgB,WACd,IACA,SACwB;CACxB,MAAM,EAAE,IAAI,OAAO,OAAO,eAAe,WAAW,CAAC;CAErD,MAAM,eAAe;CACrB,MAAM,aAAA,GAAA,2BAAA,UAAqB,KAAK,IAAI,CAAC,MAAM,WAAW;CACtD,MAAM,gBAAA,GAAA,2BAAA,UAAwB,KAAK,IAAI,QAAQ,CAAC;CAChD,MAAM,YAAA,GAAA,IAAA,KAAe,KAAK;CAE1B,MAAM,UAAU;CAChB,MAAM,gBAAA,GAAA,2BAAA,UAAwB,KAAK,IAAI,MAAM,WAAW,UAAU;CAClE,MAAM,aAAA,GAAA,2BAAA,UAAqB,KAAK,IAAI,CAAC,MAAM,WAAW;CACtD,MAAM,gBAAA,GAAA,2BAAA,UAAwB,KAAK,IAAI,QAAQ,CAAC;CAChD,MAAM,YAAA,GAAA,IAAA,KAAe,KAAK;CAE1B,MAAM,cAAc,OAAO,GAAG,WAAc;EAC1C,MAAM,aAAA,GAAA,2BAAA,YAAuB,EAAE,IAAI,GAAG,IAAI;EAE1C,SAAS,QAAQ;EACjB,SAAS,QAAQ;EAEjB,IAAI,aAAa,WAAW;GAC1B,MAAM,SAAS,aAAa,IAAI,SAAS;GACzC,IAAI,QAAQ;IACV,SAAS,QAAQ;IACjB,MAAM,CAAC,KAAK,QAAQ,OAAA,GAAA,0BAAA,YAAiB,OAAO,IAAI;IAChD,IAAI,KAAK;KACP,aAAa,IAAI,SAAS;KAC1B,MAAM;IACR;IAEA,OAAO;GACT;EACF;EAGA,MAAM,EAAE,SAAS,SAAS,WAAW,QAAQ,cAAiB;EAE9D,IAAI,aAAa,WACf,aAAa,IAAI,WAAW,SAAS,YAAY;EAGnD,IAAI,aAAa,WAAW;GAC1B,MAAM,SAAS,MAAM,aAAa,IAAI,SAAS;GAE/C,IAAI,QAAQ;IACV,MAAM,OAAO,OAAO;IACpB,QAAQ,IAAI;IACZ,SAAS,QAAQ;IACjB,MAAM,aAAa,MAAM;IACzB,OAAO;GACT;EACF,OAAO,IAAI,WACT,QAAQ,KAAK,0CAA0C;EAGzD,MAAM,CAAC,KAAK,QAAQ,OAAA,GAAA,0BAAA,YAAiB,GAAG,GAAG,MAAM,CAAC;EAElD,IAAI,KAAK;GACP,OAAO,GAAG;GACV,OAAO;EACT;EAEA,IAAI,aAAa,WACf,aAAa,IAAI,WAAW,MAAM,YAAY;EAGhD,QAAQ,IAAI;EACZ,OAAO;CACT;CACA,MAAM,EAAE,OAAO,YAAY,KAAK,MAAM,UAAU,WAAW,GAAG,UAAU,cAAA,SAAS,aAAa,OAAO;CAErG,MAAM,SAAA,GAAA,IAAA,iBAAwB;EAC5B,GAAG,WAAW;EACd,UAAU,SAAS;EACnB,UAAU,SAAS;CACrB,EAAE;CAEF,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;CACF;AACF"}
|
package/dist/request.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { Cache, Cached, CacheOptions } from '@cloudcome/utils-core/cache';
|
|
|
2
2
|
import { DateValue } from '@cloudcome/utils-core/date';
|
|
3
3
|
import { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';
|
|
4
4
|
import { ComputedRef, Ref } from 'vue';
|
|
5
|
-
import { UseAsyncOptions, UseAsyncOutput,
|
|
5
|
+
import { UseAsyncOptions, UseAsyncOutput, UseAsyncState } from './async';
|
|
6
6
|
/**
|
|
7
7
|
* 请求缓存配置选项。
|
|
8
8
|
* @template T 缓存数据的类型。
|
|
@@ -89,7 +89,6 @@ export type UseRequestState = UseAsyncState & {
|
|
|
89
89
|
*/
|
|
90
90
|
hitCache: boolean;
|
|
91
91
|
};
|
|
92
|
-
export type UseRequestStateFilled = UseRequestState;
|
|
93
92
|
export type UseRequestOutput<I extends AnyArray, O> = Omit<UseAsyncOutput<I, O>, 'run' | 'runAsync' | 'state'> & {
|
|
94
93
|
state: ComputedRef<UseRequestState>;
|
|
95
94
|
send: (...inputs: I) => void;
|
|
@@ -97,13 +96,6 @@ export type UseRequestOutput<I extends AnyArray, O> = Omit<UseAsyncOutput<I, O>,
|
|
|
97
96
|
hitShare: Ref<boolean>;
|
|
98
97
|
hitCache: Ref<boolean>;
|
|
99
98
|
};
|
|
100
|
-
export type UseRequestOutputFilled<I extends AnyArray, O> = Omit<UseAsyncOutputFilled<I, O>, 'run' | 'runAsync' | 'state'> & {
|
|
101
|
-
state: ComputedRef<UseRequestStateFilled>;
|
|
102
|
-
send: (...inputs: I) => void;
|
|
103
|
-
sendAsync: (...inputs: I) => Promise<O>;
|
|
104
|
-
hitShare: Ref<boolean>;
|
|
105
|
-
hitCache: Ref<boolean>;
|
|
106
|
-
};
|
|
107
99
|
/**
|
|
108
100
|
* 使用请求功能的组合式函数。
|
|
109
101
|
* 支持缓存和异步操作的封装。
|
|
@@ -117,7 +109,4 @@ export type UseRequestOutputFilled<I extends AnyArray, O> = Omit<UseAsyncOutputF
|
|
|
117
109
|
* - 是否命中缓存(hitCache)。
|
|
118
110
|
* - 是否命中共享请求(hitShare)。
|
|
119
111
|
*/
|
|
120
|
-
export declare function useRequest<I extends AnyArray, O>(fn: (...inputs: I) => Promise<O>, options: Omit<UseRequestOptions<I, O>, 'placeholder'> & {
|
|
121
|
-
placeholder: () => O;
|
|
122
|
-
}): UseRequestOutputFilled<I, O>;
|
|
123
112
|
export declare function useRequest<I extends AnyArray, O>(fn: (...inputs: I) => Promise<O>, options?: UseRequestOptions<I, O>): UseRequestOutput<I, O>;
|
package/dist/request.mjs
CHANGED
|
@@ -6,6 +6,19 @@ import { tryFlatten } from "@cloudcome/utils-core/try";
|
|
|
6
6
|
//#region src/request.ts
|
|
7
7
|
var defaultCacheStorage = new MemoryCache();
|
|
8
8
|
var defaultShareStorage = new MemoryCache();
|
|
9
|
+
/**
|
|
10
|
+
* 使用请求功能的组合式函数。
|
|
11
|
+
* 支持缓存和异步操作的封装。
|
|
12
|
+
*
|
|
13
|
+
* @template O 请求返回的数据类型。
|
|
14
|
+
* @template I 请求参数的类型。
|
|
15
|
+
* @param {() => Promise<O>} fn 实际的请求函数,返回一个 Promise。
|
|
16
|
+
* @param {UseRequestOptions<I, O>} [options] 请求选项,包括缓存和回调配置。
|
|
17
|
+
* @returns 返回一个对象,包含以下内容:
|
|
18
|
+
* - 异步操作的状态(如 loading、error 等)。
|
|
19
|
+
* - 是否命中缓存(hitCache)。
|
|
20
|
+
* - 是否命中共享请求(hitShare)。
|
|
21
|
+
*/
|
|
9
22
|
function useRequest(fn, options) {
|
|
10
23
|
const { id, cache, share, onCacheHit } = options || {};
|
|
11
24
|
const shareStorage = defaultShareStorage;
|
package/dist/request.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"request.mjs","names":[],"sources":["../src/request.ts"],"sourcesContent":["import { type Cache, type Cached, type CacheOptions, MemoryCache } from '@cloudcome/utils-core/cache';\nimport type { DateValue } from '@cloudcome/utils-core/date';\nimport { tryFlatten } from '@cloudcome/utils-core/try';\nimport { isFunction, isObject } from '@cloudcome/utils-core/type';\nimport type { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';\nimport type { ComputedRef, Ref } from 'vue';\nimport { computed, ref } from 'vue';\nimport {
|
|
1
|
+
{"version":3,"file":"request.mjs","names":[],"sources":["../src/request.ts"],"sourcesContent":["import { type Cache, type Cached, type CacheOptions, MemoryCache } from '@cloudcome/utils-core/cache';\nimport type { DateValue } from '@cloudcome/utils-core/date';\nimport { tryFlatten } from '@cloudcome/utils-core/try';\nimport { isFunction, isObject } from '@cloudcome/utils-core/type';\nimport type { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';\nimport type { ComputedRef, Ref } from 'vue';\nimport { computed, ref } from 'vue';\nimport { type UseAsyncOptions, type UseAsyncOutput, type UseAsyncState, useAsync } from './async';\n\n/**\n * 请求缓存配置选项。\n * @template T 缓存数据的类型。\n */\nexport type RequestCacheOptions<T> = CacheOptions & {\n /**\n * 是否禁用缓存,默认为 false。\n * 如果设置为 true,则不会使用缓存。\n */\n disabled?: boolean;\n\n /**\n * 自定义缓存存储实现。\n * 可以传入自定义的缓存类来替代默认的内存缓存。\n */\n storage?: Cache<T>;\n};\n\nexport type RequestShareOptions = {\n /**\n * 是否禁用共享请求,默认为 false。\n * 如果设置为 true,则不会共享请求结果。\n */\n disabled?: boolean;\n\n /**\n * 共享的最大时长(毫秒),为 0 时表示永久共享。\n * 超过该时长后,共享的请求结果将被清除。\n */\n maxAge?: number;\n\n /**\n * 共享的过期时间(时间戳、日期字符串、日期对象等)。\n * 优先级比 maxAge 更高,指定具体的过期时间。\n */\n expiredAt?: DateValue;\n};\n\nexport type RetryOptions = {\n /**\n * 是否禁用重试,默认为 false。\n * 如果设置为 true,则不会重试。\n */\n disabled?: boolean;\n};\n\n/**\n * 请求选项,扩展了异步操作的选项。\n * @template T 请求返回的数据类型。\n * @template I 请求参数的类型。\n */\nexport type UseRequestOptions<I extends AnyArray, O> = UseAsyncOptions<I, O> & {\n /**\n * 请求的唯一标识符,可以是字符串或函数返回的字符串。\n * 用于缓存和共享的键值。\n */\n id?: MaybeCallable<string>;\n\n /**\n * 缓存配置,可以是布尔值或完整的缓存选项。\n * 如果为 true,则启用默认缓存;如果为对象,则可以自定义缓存行为。\n */\n cache?: boolean | RequestCacheOptions<O>;\n\n /**\n * 共享配置,可以是布尔值或完整的共享选项。\n * 共享时,相同的请求 ID 会复用第一次发出且没有响应完成的请求。\n *\n * 例如,10 组件同时或先后发起 10 次请求用于获取用户信息,\n * 那么这 10 个组件会共同等待第一次发起的请求,直到完成。\n *\n * 共享与缓存是不同的概念,共享是进行时,缓存是过去时,即:\n * - 共享是共享**正在发送**的请求\n * - 缓存是缓存**已经发送**的请求\n *\n * 如果为 true,则启用默认共享;如果为对象,则可以自定义共享行为。\n */\n share?: boolean | RequestShareOptions;\n\n /**\n * 当命中缓存时的回调函数。\n * 在缓存命中时触发,接收缓存的数据作为参数。\n */\n onCacheHit?: (cached: Cached<O>) => unknown;\n};\n\nexport type UseRequestState = UseAsyncState & {\n /**\n * 是否命中共享数据\n */\n hitShare: boolean;\n\n /**\n * 是否命中缓存\n */\n hitCache: boolean;\n};\n\nexport type UseRequestOutput<I extends AnyArray, O> = Omit<UseAsyncOutput<I, O>, 'run' | 'runAsync' | 'state'> & {\n state: ComputedRef<UseRequestState>;\n send: (...inputs: I) => void;\n sendAsync: (...inputs: I) => Promise<O>;\n hitShare: Ref<boolean>;\n hitCache: Ref<boolean>;\n};\n\nconst defaultCacheStorage = new MemoryCache();\nconst defaultShareStorage = new MemoryCache();\n\n/**\n * 使用请求功能的组合式函数。\n * 支持缓存和异步操作的封装。\n *\n * @template O 请求返回的数据类型。\n * @template I 请求参数的类型。\n * @param {() => Promise<O>} fn 实际的请求函数,返回一个 Promise。\n * @param {UseRequestOptions<I, O>} [options] 请求选项,包括缓存和回调配置。\n * @returns 返回一个对象,包含以下内容:\n * - 异步操作的状态(如 loading、error 等)。\n * - 是否命中缓存(hitCache)。\n * - 是否命中共享请求(hitShare)。\n */\nexport function useRequest<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options?: UseRequestOptions<I, O>,\n): UseRequestOutput<I, O> {\n const { id, cache, share, onCacheHit } = options || {};\n\n const shareStorage = defaultShareStorage as MemoryCache<Promise<O>>;\n const shareAble = isObject(share) ? !share.disabled : share;\n const shareOptions = isObject(share) ? share : {};\n const hitShare = ref(false);\n\n const _cached = defaultCacheStorage as Cache<O>;\n const cacheStorage = isObject(cache) ? cache.storage || _cached : _cached;\n const cacheAble = isObject(cache) ? !cache.disabled : cache;\n const cacheOptions = isObject(cache) ? cache : {};\n const hitCache = ref(false);\n\n const cacheableFn = async (...inputs: I) => {\n const requestId = isFunction(id) ? id() : id;\n\n hitShare.value = false;\n hitCache.value = false;\n\n if (requestId && shareAble) {\n const shared = shareStorage.get(requestId);\n if (shared) {\n hitShare.value = true;\n const [err, data] = await tryFlatten(shared.data);\n if (err) {\n shareStorage.del(requestId);\n throw err;\n }\n\n return data;\n }\n }\n\n // 这里不能先执行,因为如果要缓存的话,必须用缓存结果\n const { promise, resolve, reject } = Promise.withResolvers<O>();\n\n if (requestId && shareAble) {\n shareStorage.set(requestId, promise, shareOptions);\n }\n\n if (requestId && cacheAble) {\n const cached = await cacheStorage.get(requestId);\n\n if (cached) {\n const data = cached.data;\n resolve(data);\n hitCache.value = true;\n await onCacheHit?.(cached);\n return promise;\n }\n } else if (cacheAble) {\n console.warn('[useRequest] 缓存功能启用但未提供 requestId,无法使用缓存');\n }\n\n const [err, data] = await tryFlatten(fn(...inputs));\n\n if (err) {\n reject(err);\n return promise;\n }\n\n if (requestId && cacheAble) {\n cacheStorage.set(requestId, data, cacheOptions);\n }\n\n resolve(data);\n return promise;\n };\n const { state: asyncState, run: send, runAsync: sendAsync, ...async } = useAsync(cacheableFn, options);\n\n const state = computed(() => ({\n ...asyncState.value,\n hitShare: hitShare.value,\n hitCache: hitCache.value,\n }));\n\n return {\n ...async,\n state,\n send,\n sendAsync,\n hitShare,\n hitCache,\n };\n}\n"],"mappings":";;;;;;AAmHA,IAAM,sBAAsB,IAAI,YAAY;AAC5C,IAAM,sBAAsB,IAAI,YAAY;;;;;;;;;;;;;;AAe5C,SAAgB,WACd,IACA,SACwB;CACxB,MAAM,EAAE,IAAI,OAAO,OAAO,eAAe,WAAW,CAAC;CAErD,MAAM,eAAe;CACrB,MAAM,YAAY,SAAS,KAAK,IAAI,CAAC,MAAM,WAAW;CACtD,MAAM,eAAe,SAAS,KAAK,IAAI,QAAQ,CAAC;CAChD,MAAM,WAAW,IAAI,KAAK;CAE1B,MAAM,UAAU;CAChB,MAAM,eAAe,SAAS,KAAK,IAAI,MAAM,WAAW,UAAU;CAClE,MAAM,YAAY,SAAS,KAAK,IAAI,CAAC,MAAM,WAAW;CACtD,MAAM,eAAe,SAAS,KAAK,IAAI,QAAQ,CAAC;CAChD,MAAM,WAAW,IAAI,KAAK;CAE1B,MAAM,cAAc,OAAO,GAAG,WAAc;EAC1C,MAAM,YAAY,WAAW,EAAE,IAAI,GAAG,IAAI;EAE1C,SAAS,QAAQ;EACjB,SAAS,QAAQ;EAEjB,IAAI,aAAa,WAAW;GAC1B,MAAM,SAAS,aAAa,IAAI,SAAS;GACzC,IAAI,QAAQ;IACV,SAAS,QAAQ;IACjB,MAAM,CAAC,KAAK,QAAQ,MAAM,WAAW,OAAO,IAAI;IAChD,IAAI,KAAK;KACP,aAAa,IAAI,SAAS;KAC1B,MAAM;IACR;IAEA,OAAO;GACT;EACF;EAGA,MAAM,EAAE,SAAS,SAAS,WAAW,QAAQ,cAAiB;EAE9D,IAAI,aAAa,WACf,aAAa,IAAI,WAAW,SAAS,YAAY;EAGnD,IAAI,aAAa,WAAW;GAC1B,MAAM,SAAS,MAAM,aAAa,IAAI,SAAS;GAE/C,IAAI,QAAQ;IACV,MAAM,OAAO,OAAO;IACpB,QAAQ,IAAI;IACZ,SAAS,QAAQ;IACjB,MAAM,aAAa,MAAM;IACzB,OAAO;GACT;EACF,OAAO,IAAI,WACT,QAAQ,KAAK,0CAA0C;EAGzD,MAAM,CAAC,KAAK,QAAQ,MAAM,WAAW,GAAG,GAAG,MAAM,CAAC;EAElD,IAAI,KAAK;GACP,OAAO,GAAG;GACV,OAAO;EACT;EAEA,IAAI,aAAa,WACf,aAAa,IAAI,WAAW,MAAM,YAAY;EAGhD,QAAQ,IAAI;EACZ,OAAO;CACT;CACA,MAAM,EAAE,OAAO,YAAY,KAAK,MAAM,UAAU,WAAW,GAAG,UAAU,SAAS,aAAa,OAAO;CAErG,MAAM,QAAQ,gBAAgB;EAC5B,GAAG,WAAW;EACd,UAAU,SAAS;EACnB,UAAU,SAAS;CACrB,EAAE;CAEF,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;CACF;AACF"}
|
package/dist/shared.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.cjs","names":[],"sources":["../src/shared.ts"],"sourcesContent":["import { isFunction } from '@cloudcome/utils-core/type';\nimport type { AnyFunction, MaybePromise } from '@cloudcome/utils-core/types';\nimport { effectScope, onScopeDispose } from 'vue';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<unknown | HookListener>;\n\n/**\n * 运行生命周期钩子函数的工具函数\n *\n * @protected 内部方法\n * @template T - 泛型参数(未在函数中使用)\n * @param enterHook - 进入时执行的钩子函数,接收一个回调函数作为参数\n * @param leaveHook - 离开时执行的钩子函数,接收一个回调函数作为参数\n * @param onEnter - 进入时的监听器,可以返回一个清理函数\n *\n * @example\n * _runLifeHook(\n * (hook) => onMounted(hook), // 在组件挂载时执行进入逻辑\n * (hook) => onUnmounted(hook), // 在组件卸载时执行离开逻辑\n * () => {\n * // 执行进入时的逻辑\n * console.log('组件已挂载');\n *\n * // 返回一个清理函数,在离开时执行\n * return () => {\n * console.log('组件将要卸载');\n * };\n * }\n * );\n */\nexport function _runLifeHook<_T>(\n enterHook: (hook: AnyFunction) => unknown,\n leaveHook: (hook: AnyFunction) => unknown,\n onEnter: HookListenerWithDispose,\n) {\n // 存储离开时需要执行的清理函数\n let onLeave: HookListener | undefined;\n\n // 注册进入钩子,在 enterHook 触发时执行\n enterHook(async () => {\n // 执行进入时的监听器逻辑\n const enterResult = await onEnter();\n\n // 如果返回结果是一个函数,则将其作为离开时的清理函数保存\n if (isFunction(enterResult)) {\n onLeave = enterResult;\n }\n });\n\n // 注册离开钩子,在 leaveHook 触发时执行\n leaveHook(() => {\n // 如果存在清理函数,则执行它\n onLeave?.();\n });\n}\n\n/**\n * 运行作用域钩子函数的工具函数\n *\n * 该函数创建一个独立的响应式作用域,在该作用域内执行传入的回调函数,\n * 并在适当的时机自动清理资源。这确保了响应式副作用的隔离和自动回收。\n *\n * @protected 内部方法\n * @param runner - 需要在作用域内执行的回调函数,可以返回一个清理函数\n *\n * @example\n * // 基本用法\n * _runScope(() => {\n * // 在这里创建的响应式副作用会被限制在当前作用域内\n * const stop = watch(someRef, (val) => {\n * console.log(val);\n * });\n *\n * // 返回一个清理函数,在作用域销毁时执行\n * return () => {\n * stop();\n * };\n * });\n *\n * @example\n * // 异步用法\n * _runScope(async () => {\n * const data = await fetchData();\n *\n * // 根据获取的数据创建响应式监听\n * const stop = watch(() => data.value, (val) => {\n * console.log(val);\n * });\n *\n * // 返回清理函数\n * return () => {\n * stop();\n * };\n * });\n */\nexport function _runScope(runner: HookListenerWithDispose) {\n // 创建一个独立的响应式作用域,用于收集和管理响应式副作用\n const scope = effectScope();\n // 存储用户提供的清理函数\n let dispose: HookListener | undefined;\n\n // 在创建的作用域内执行回调函数\n scope.run(async () => {\n // 执行传入的回调函数并等待其完成(支持异步操作)\n const result = await runner();\n\n // 如果回调函数返回了一个函数,则将其作为清理函数保存\n if (isFunction(result)) {\n dispose = result;\n }\n });\n\n // 注册作用域销毁时的回调函数\n onScopeDispose(() => {\n // 如果存在用户提供的清理函数,则执行它\n dispose?.();\n // 停止并清理整个作用域内的所有响应式副作用\n scope.stop();\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,aACd,WACA,WACA,SACA;CAEA,IAAI;CAGJ,UAAU,YAAY;EAEpB,MAAM,cAAc,MAAM,
|
|
1
|
+
{"version":3,"file":"shared.cjs","names":[],"sources":["../src/shared.ts"],"sourcesContent":["import { isFunction } from '@cloudcome/utils-core/type';\nimport type { AnyFunction, MaybePromise } from '@cloudcome/utils-core/types';\nimport { effectScope, onScopeDispose } from 'vue';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<unknown | HookListener>;\n\n/**\n * 运行生命周期钩子函数的工具函数\n *\n * @protected 内部方法\n * @template T - 泛型参数(未在函数中使用)\n * @param enterHook - 进入时执行的钩子函数,接收一个回调函数作为参数\n * @param leaveHook - 离开时执行的钩子函数,接收一个回调函数作为参数\n * @param onEnter - 进入时的监听器,可以返回一个清理函数\n *\n * @example\n * _runLifeHook(\n * (hook) => onMounted(hook), // 在组件挂载时执行进入逻辑\n * (hook) => onUnmounted(hook), // 在组件卸载时执行离开逻辑\n * () => {\n * // 执行进入时的逻辑\n * console.log('组件已挂载');\n *\n * // 返回一个清理函数,在离开时执行\n * return () => {\n * console.log('组件将要卸载');\n * };\n * }\n * );\n */\nexport function _runLifeHook<_T>(\n enterHook: (hook: AnyFunction) => unknown,\n leaveHook: (hook: AnyFunction) => unknown,\n onEnter: HookListenerWithDispose,\n) {\n // 存储离开时需要执行的清理函数\n let onLeave: HookListener | undefined;\n\n // 注册进入钩子,在 enterHook 触发时执行\n enterHook(async () => {\n // 执行进入时的监听器逻辑\n const enterResult = await onEnter();\n\n // 如果返回结果是一个函数,则将其作为离开时的清理函数保存\n if (isFunction(enterResult)) {\n onLeave = enterResult;\n }\n });\n\n // 注册离开钩子,在 leaveHook 触发时执行\n leaveHook(() => {\n // 如果存在清理函数,则执行它\n onLeave?.();\n });\n}\n\n/**\n * 运行作用域钩子函数的工具函数\n *\n * 该函数创建一个独立的响应式作用域,在该作用域内执行传入的回调函数,\n * 并在适当的时机自动清理资源。这确保了响应式副作用的隔离和自动回收。\n *\n * @protected 内部方法\n * @param runner - 需要在作用域内执行的回调函数,可以返回一个清理函数\n *\n * @example\n * // 基本用法\n * _runScope(() => {\n * // 在这里创建的响应式副作用会被限制在当前作用域内\n * const stop = watch(someRef, (val) => {\n * console.log(val);\n * });\n *\n * // 返回一个清理函数,在作用域销毁时执行\n * return () => {\n * stop();\n * };\n * });\n *\n * @example\n * // 异步用法\n * _runScope(async () => {\n * const data = await fetchData();\n *\n * // 根据获取的数据创建响应式监听\n * const stop = watch(() => data.value, (val) => {\n * console.log(val);\n * });\n *\n * // 返回清理函数\n * return () => {\n * stop();\n * };\n * });\n */\nexport function _runScope(runner: HookListenerWithDispose) {\n // 创建一个独立的响应式作用域,用于收集和管理响应式副作用\n const scope = effectScope();\n // 存储用户提供的清理函数\n let dispose: HookListener | undefined;\n\n // 在创建的作用域内执行回调函数\n scope.run(async () => {\n // 执行传入的回调函数并等待其完成(支持异步操作)\n const result = await runner();\n\n // 如果回调函数返回了一个函数,则将其作为清理函数保存\n if (isFunction(result)) {\n dispose = result;\n }\n });\n\n // 注册作用域销毁时的回调函数\n onScopeDispose(() => {\n // 如果存在用户提供的清理函数,则执行它\n dispose?.();\n // 停止并清理整个作用域内的所有响应式副作用\n scope.stop();\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,aACd,WACA,WACA,SACA;CAEA,IAAI;CAGJ,UAAU,YAAY;EAEpB,MAAM,cAAc,MAAM,QAAQ;EAGlC,KAAA,GAAA,2BAAA,YAAe,WAAW,GACxB,UAAU;CAEd,CAAC;CAGD,gBAAgB;EAEd,UAAU;CACZ,CAAC;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,UAAU,QAAiC;CAEzD,MAAM,SAAA,GAAA,IAAA,aAAoB;CAE1B,IAAI;CAGJ,MAAM,IAAI,YAAY;EAEpB,MAAM,SAAS,MAAM,OAAO;EAG5B,KAAA,GAAA,2BAAA,YAAe,MAAM,GACnB,UAAU;CAEd,CAAC;CAGD,CAAA,GAAA,IAAA,sBAAqB;EAEnB,UAAU;EAEV,MAAM,KAAK;CACb,CAAC;AACH"}
|
package/dist/shared.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.mjs","names":[],"sources":["../src/shared.ts"],"sourcesContent":["import { isFunction } from '@cloudcome/utils-core/type';\nimport type { AnyFunction, MaybePromise } from '@cloudcome/utils-core/types';\nimport { effectScope, onScopeDispose } from 'vue';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<unknown | HookListener>;\n\n/**\n * 运行生命周期钩子函数的工具函数\n *\n * @protected 内部方法\n * @template T - 泛型参数(未在函数中使用)\n * @param enterHook - 进入时执行的钩子函数,接收一个回调函数作为参数\n * @param leaveHook - 离开时执行的钩子函数,接收一个回调函数作为参数\n * @param onEnter - 进入时的监听器,可以返回一个清理函数\n *\n * @example\n * _runLifeHook(\n * (hook) => onMounted(hook), // 在组件挂载时执行进入逻辑\n * (hook) => onUnmounted(hook), // 在组件卸载时执行离开逻辑\n * () => {\n * // 执行进入时的逻辑\n * console.log('组件已挂载');\n *\n * // 返回一个清理函数,在离开时执行\n * return () => {\n * console.log('组件将要卸载');\n * };\n * }\n * );\n */\nexport function _runLifeHook<_T>(\n enterHook: (hook: AnyFunction) => unknown,\n leaveHook: (hook: AnyFunction) => unknown,\n onEnter: HookListenerWithDispose,\n) {\n // 存储离开时需要执行的清理函数\n let onLeave: HookListener | undefined;\n\n // 注册进入钩子,在 enterHook 触发时执行\n enterHook(async () => {\n // 执行进入时的监听器逻辑\n const enterResult = await onEnter();\n\n // 如果返回结果是一个函数,则将其作为离开时的清理函数保存\n if (isFunction(enterResult)) {\n onLeave = enterResult;\n }\n });\n\n // 注册离开钩子,在 leaveHook 触发时执行\n leaveHook(() => {\n // 如果存在清理函数,则执行它\n onLeave?.();\n });\n}\n\n/**\n * 运行作用域钩子函数的工具函数\n *\n * 该函数创建一个独立的响应式作用域,在该作用域内执行传入的回调函数,\n * 并在适当的时机自动清理资源。这确保了响应式副作用的隔离和自动回收。\n *\n * @protected 内部方法\n * @param runner - 需要在作用域内执行的回调函数,可以返回一个清理函数\n *\n * @example\n * // 基本用法\n * _runScope(() => {\n * // 在这里创建的响应式副作用会被限制在当前作用域内\n * const stop = watch(someRef, (val) => {\n * console.log(val);\n * });\n *\n * // 返回一个清理函数,在作用域销毁时执行\n * return () => {\n * stop();\n * };\n * });\n *\n * @example\n * // 异步用法\n * _runScope(async () => {\n * const data = await fetchData();\n *\n * // 根据获取的数据创建响应式监听\n * const stop = watch(() => data.value, (val) => {\n * console.log(val);\n * });\n *\n * // 返回清理函数\n * return () => {\n * stop();\n * };\n * });\n */\nexport function _runScope(runner: HookListenerWithDispose) {\n // 创建一个独立的响应式作用域,用于收集和管理响应式副作用\n const scope = effectScope();\n // 存储用户提供的清理函数\n let dispose: HookListener | undefined;\n\n // 在创建的作用域内执行回调函数\n scope.run(async () => {\n // 执行传入的回调函数并等待其完成(支持异步操作)\n const result = await runner();\n\n // 如果回调函数返回了一个函数,则将其作为清理函数保存\n if (isFunction(result)) {\n dispose = result;\n }\n });\n\n // 注册作用域销毁时的回调函数\n onScopeDispose(() => {\n // 如果存在用户提供的清理函数,则执行它\n dispose?.();\n // 停止并清理整个作用域内的所有响应式副作用\n scope.stop();\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,aACd,WACA,WACA,SACA;CAEA,IAAI;CAGJ,UAAU,YAAY;EAEpB,MAAM,cAAc,MAAM,
|
|
1
|
+
{"version":3,"file":"shared.mjs","names":[],"sources":["../src/shared.ts"],"sourcesContent":["import { isFunction } from '@cloudcome/utils-core/type';\nimport type { AnyFunction, MaybePromise } from '@cloudcome/utils-core/types';\nimport { effectScope, onScopeDispose } from 'vue';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<unknown | HookListener>;\n\n/**\n * 运行生命周期钩子函数的工具函数\n *\n * @protected 内部方法\n * @template T - 泛型参数(未在函数中使用)\n * @param enterHook - 进入时执行的钩子函数,接收一个回调函数作为参数\n * @param leaveHook - 离开时执行的钩子函数,接收一个回调函数作为参数\n * @param onEnter - 进入时的监听器,可以返回一个清理函数\n *\n * @example\n * _runLifeHook(\n * (hook) => onMounted(hook), // 在组件挂载时执行进入逻辑\n * (hook) => onUnmounted(hook), // 在组件卸载时执行离开逻辑\n * () => {\n * // 执行进入时的逻辑\n * console.log('组件已挂载');\n *\n * // 返回一个清理函数,在离开时执行\n * return () => {\n * console.log('组件将要卸载');\n * };\n * }\n * );\n */\nexport function _runLifeHook<_T>(\n enterHook: (hook: AnyFunction) => unknown,\n leaveHook: (hook: AnyFunction) => unknown,\n onEnter: HookListenerWithDispose,\n) {\n // 存储离开时需要执行的清理函数\n let onLeave: HookListener | undefined;\n\n // 注册进入钩子,在 enterHook 触发时执行\n enterHook(async () => {\n // 执行进入时的监听器逻辑\n const enterResult = await onEnter();\n\n // 如果返回结果是一个函数,则将其作为离开时的清理函数保存\n if (isFunction(enterResult)) {\n onLeave = enterResult;\n }\n });\n\n // 注册离开钩子,在 leaveHook 触发时执行\n leaveHook(() => {\n // 如果存在清理函数,则执行它\n onLeave?.();\n });\n}\n\n/**\n * 运行作用域钩子函数的工具函数\n *\n * 该函数创建一个独立的响应式作用域,在该作用域内执行传入的回调函数,\n * 并在适当的时机自动清理资源。这确保了响应式副作用的隔离和自动回收。\n *\n * @protected 内部方法\n * @param runner - 需要在作用域内执行的回调函数,可以返回一个清理函数\n *\n * @example\n * // 基本用法\n * _runScope(() => {\n * // 在这里创建的响应式副作用会被限制在当前作用域内\n * const stop = watch(someRef, (val) => {\n * console.log(val);\n * });\n *\n * // 返回一个清理函数,在作用域销毁时执行\n * return () => {\n * stop();\n * };\n * });\n *\n * @example\n * // 异步用法\n * _runScope(async () => {\n * const data = await fetchData();\n *\n * // 根据获取的数据创建响应式监听\n * const stop = watch(() => data.value, (val) => {\n * console.log(val);\n * });\n *\n * // 返回清理函数\n * return () => {\n * stop();\n * };\n * });\n */\nexport function _runScope(runner: HookListenerWithDispose) {\n // 创建一个独立的响应式作用域,用于收集和管理响应式副作用\n const scope = effectScope();\n // 存储用户提供的清理函数\n let dispose: HookListener | undefined;\n\n // 在创建的作用域内执行回调函数\n scope.run(async () => {\n // 执行传入的回调函数并等待其完成(支持异步操作)\n const result = await runner();\n\n // 如果回调函数返回了一个函数,则将其作为清理函数保存\n if (isFunction(result)) {\n dispose = result;\n }\n });\n\n // 注册作用域销毁时的回调函数\n onScopeDispose(() => {\n // 如果存在用户提供的清理函数,则执行它\n dispose?.();\n // 停止并清理整个作用域内的所有响应式副作用\n scope.stop();\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,aACd,WACA,WACA,SACA;CAEA,IAAI;CAGJ,UAAU,YAAY;EAEpB,MAAM,cAAc,MAAM,QAAQ;EAGlC,IAAI,WAAW,WAAW,GACxB,UAAU;CAEd,CAAC;CAGD,gBAAgB;EAEd,UAAU;CACZ,CAAC;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,UAAU,QAAiC;CAEzD,MAAM,QAAQ,YAAY;CAE1B,IAAI;CAGJ,MAAM,IAAI,YAAY;EAEpB,MAAM,SAAS,MAAM,OAAO;EAG5B,IAAI,WAAW,MAAM,GACnB,UAAU;CAEd,CAAC;CAGD,qBAAqB;EAEnB,UAAU;EAEV,MAAM,KAAK;CACb,CAAC;AACH"}
|
package/dist/state.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.cjs","names":[],"sources":["../src/state.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport type UseOnceValueOptions<T> = {\n equal?: (a: T, b: T) => boolean;\n};\n\n/**\n * 只改变一次的值\n * @param value 初始值\n * @param options 选项\n * @returns 包含 change 方法和 value 响应式值的对象\n */\nexport function useOnceState<T>(value: T, options?: UseOnceValueOptions<T>) {\n let lastValue = value;\n const changed = ref(false);\n const { equal = Object.is } = options || {};\n\n return {\n change(newValue: T) {\n if (equal(newValue, lastValue)) {\n return;\n }\n\n if (changed.value) {\n return;\n }\n\n changed.value = true;\n lastValue = newValue;\n },\n // 这里需要使用 computed 确保返回的是原始值,而不是 reactive 包装后的对象\n state: computed(() => {\n // changed 使用响应式是为确保 computed 能够响应式更新\n if (!changed.value) {\n return value;\n }\n\n return lastValue;\n }),\n };\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,aAAgB,OAAU,SAAkC;CAC1E,IAAI,YAAY;CAChB,MAAM,WAAA,GAAA,IAAA,KAAc,
|
|
1
|
+
{"version":3,"file":"state.cjs","names":[],"sources":["../src/state.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport type UseOnceValueOptions<T> = {\n equal?: (a: T, b: T) => boolean;\n};\n\n/**\n * 只改变一次的值\n * @param value 初始值\n * @param options 选项\n * @returns 包含 change 方法和 value 响应式值的对象\n */\nexport function useOnceState<T>(value: T, options?: UseOnceValueOptions<T>) {\n let lastValue = value;\n const changed = ref(false);\n const { equal = Object.is } = options || {};\n\n return {\n change(newValue: T) {\n if (equal(newValue, lastValue)) {\n return;\n }\n\n if (changed.value) {\n return;\n }\n\n changed.value = true;\n lastValue = newValue;\n },\n // 这里需要使用 computed 确保返回的是原始值,而不是 reactive 包装后的对象\n state: computed(() => {\n // changed 使用响应式是为确保 computed 能够响应式更新\n if (!changed.value) {\n return value;\n }\n\n return lastValue;\n }),\n };\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,aAAgB,OAAU,SAAkC;CAC1E,IAAI,YAAY;CAChB,MAAM,WAAA,GAAA,IAAA,KAAc,KAAK;CACzB,MAAM,EAAE,QAAQ,OAAO,OAAO,WAAW,CAAC;CAE1C,OAAO;EACL,OAAO,UAAa;GAClB,IAAI,MAAM,UAAU,SAAS,GAC3B;GAGF,IAAI,QAAQ,OACV;GAGF,QAAQ,QAAQ;GAChB,YAAY;EACd;EAEA,QAAA,GAAA,IAAA,gBAAsB;GAEpB,IAAI,CAAC,QAAQ,OACX,OAAO;GAGT,OAAO;EACT,CAAC;CACH;AACF"}
|
package/dist/state.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.mjs","names":[],"sources":["../src/state.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport type UseOnceValueOptions<T> = {\n equal?: (a: T, b: T) => boolean;\n};\n\n/**\n * 只改变一次的值\n * @param value 初始值\n * @param options 选项\n * @returns 包含 change 方法和 value 响应式值的对象\n */\nexport function useOnceState<T>(value: T, options?: UseOnceValueOptions<T>) {\n let lastValue = value;\n const changed = ref(false);\n const { equal = Object.is } = options || {};\n\n return {\n change(newValue: T) {\n if (equal(newValue, lastValue)) {\n return;\n }\n\n if (changed.value) {\n return;\n }\n\n changed.value = true;\n lastValue = newValue;\n },\n // 这里需要使用 computed 确保返回的是原始值,而不是 reactive 包装后的对象\n state: computed(() => {\n // changed 使用响应式是为确保 computed 能够响应式更新\n if (!changed.value) {\n return value;\n }\n\n return lastValue;\n }),\n };\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,aAAgB,OAAU,SAAkC;CAC1E,IAAI,YAAY;CAChB,MAAM,UAAU,IAAI,
|
|
1
|
+
{"version":3,"file":"state.mjs","names":[],"sources":["../src/state.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport type UseOnceValueOptions<T> = {\n equal?: (a: T, b: T) => boolean;\n};\n\n/**\n * 只改变一次的值\n * @param value 初始值\n * @param options 选项\n * @returns 包含 change 方法和 value 响应式值的对象\n */\nexport function useOnceState<T>(value: T, options?: UseOnceValueOptions<T>) {\n let lastValue = value;\n const changed = ref(false);\n const { equal = Object.is } = options || {};\n\n return {\n change(newValue: T) {\n if (equal(newValue, lastValue)) {\n return;\n }\n\n if (changed.value) {\n return;\n }\n\n changed.value = true;\n lastValue = newValue;\n },\n // 这里需要使用 computed 确保返回的是原始值,而不是 reactive 包装后的对象\n state: computed(() => {\n // changed 使用响应式是为确保 computed 能够响应式更新\n if (!changed.value) {\n return value;\n }\n\n return lastValue;\n }),\n };\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,aAAgB,OAAU,SAAkC;CAC1E,IAAI,YAAY;CAChB,MAAM,UAAU,IAAI,KAAK;CACzB,MAAM,EAAE,QAAQ,OAAO,OAAO,WAAW,CAAC;CAE1C,OAAO;EACL,OAAO,UAAa;GAClB,IAAI,MAAM,UAAU,SAAS,GAC3B;GAGF,IAAI,QAAQ,OACV;GAGF,QAAQ,QAAQ;GAChB,YAAY;EACd;EAEA,OAAO,eAAe;GAEpB,IAAI,CAAC,QAAQ,OACX,OAAO;GAGT,OAAO;EACT,CAAC;CACH;AACF"}
|
package/dist/time.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time.cjs","names":[],"sources":["../src/time.ts"],"sourcesContent":["import { computed, type Ref, ref, toValue, watch } from 'vue';\nimport { useMount } from './component';\nimport { _runScope } from './shared';\n\n/**\n * 创建一个延迟更新的响应式值\n *\n * 该函数创建一个基于原始响应式值的延迟更新值,当原始值发生变化时,\n * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化,\n * 则会重新计算延迟时间。\n *\n * @param initialValue 原始响应式值,类型为Ref<T>\n * @param delay 延迟时间,可以是数字或响应式数字,默认为100毫秒\n * @returns 返回一个计算属性,其值会在延迟后更新为原始值\n */\nexport function useLazyValue<T>(initialValue: Ref<T>, delay?: number | Ref<number>) {\n const lazyValue = ref(initialValue.value);\n let changedAt = 0;\n\n _runScope(() => {\n // biome-ignore lint/suspicious/noExplicitAny: 内部使用 any\n let t: any;\n\n watch(initialValue, (value) => {\n const delayValue = toValue(delay) || 100;\n clearTimeout(t);\n\n if (changedAt > 0 && Date.now() - changedAt > delayValue) {\n lazyValue.value = value;\n } else {\n t = setTimeout(() => {\n lazyValue.value = value;\n }, delayValue);\n }\n\n changedAt = Date.now();\n });\n\n return () => {\n clearTimeout(t);\n };\n });\n\n return computed<T>(() => {\n return lazyValue.value;\n });\n}\n\nexport function useInterval(callback: () => void, delay?: number | Ref<number>) {\n useMount(() => {\n const delayValue = toValue(delay) || 100;\n const t = setInterval(callback, delayValue);\n\n return () => {\n clearInterval(t);\n };\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,aAAgB,cAAsB,OAA8B;CAClF,MAAM,aAAA,GAAA,IAAA,KAAgB,aAAa,
|
|
1
|
+
{"version":3,"file":"time.cjs","names":[],"sources":["../src/time.ts"],"sourcesContent":["import { computed, type Ref, ref, toValue, watch } from 'vue';\nimport { useMount } from './component';\nimport { _runScope } from './shared';\n\n/**\n * 创建一个延迟更新的响应式值\n *\n * 该函数创建一个基于原始响应式值的延迟更新值,当原始值发生变化时,\n * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化,\n * 则会重新计算延迟时间。\n *\n * @param initialValue 原始响应式值,类型为Ref<T>\n * @param delay 延迟时间,可以是数字或响应式数字,默认为100毫秒\n * @returns 返回一个计算属性,其值会在延迟后更新为原始值\n */\nexport function useLazyValue<T>(initialValue: Ref<T>, delay?: number | Ref<number>) {\n const lazyValue = ref(initialValue.value);\n let changedAt = 0;\n\n _runScope(() => {\n // biome-ignore lint/suspicious/noExplicitAny: 内部使用 any\n let t: any;\n\n watch(initialValue, (value) => {\n const delayValue = toValue(delay) || 100;\n clearTimeout(t);\n\n if (changedAt > 0 && Date.now() - changedAt > delayValue) {\n lazyValue.value = value;\n } else {\n t = setTimeout(() => {\n lazyValue.value = value;\n }, delayValue);\n }\n\n changedAt = Date.now();\n });\n\n return () => {\n clearTimeout(t);\n };\n });\n\n return computed<T>(() => {\n return lazyValue.value;\n });\n}\n\nexport function useInterval(callback: () => void, delay?: number | Ref<number>) {\n useMount(() => {\n const delayValue = toValue(delay) || 100;\n const t = setInterval(callback, delayValue);\n\n return () => {\n clearInterval(t);\n };\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,aAAgB,cAAsB,OAA8B;CAClF,MAAM,aAAA,GAAA,IAAA,KAAgB,aAAa,KAAK;CACxC,IAAI,YAAY;CAEhB,eAAA,gBAAgB;EAEd,IAAI;EAEJ,CAAA,GAAA,IAAA,OAAM,eAAe,UAAU;GAC7B,MAAM,cAAA,GAAA,IAAA,SAAqB,KAAK,KAAK;GACrC,aAAa,CAAC;GAEd,IAAI,YAAY,KAAK,KAAK,IAAI,IAAI,YAAY,YAC5C,UAAU,QAAQ;QAElB,IAAI,iBAAiB;IACnB,UAAU,QAAQ;GACpB,GAAG,UAAU;GAGf,YAAY,KAAK,IAAI;EACvB,CAAC;EAED,aAAa;GACX,aAAa,CAAC;EAChB;CACF,CAAC;CAED,QAAA,GAAA,IAAA,gBAAyB;EACvB,OAAO,UAAU;CACnB,CAAC;AACH;AAEA,SAAgB,YAAY,UAAsB,OAA8B;CAC9E,kBAAA,eAAe;EACb,MAAM,cAAA,GAAA,IAAA,SAAqB,KAAK,KAAK;EACrC,MAAM,IAAI,YAAY,UAAU,UAAU;EAE1C,aAAa;GACX,cAAc,CAAC;EACjB;CACF,CAAC;AACH"}
|
package/dist/time.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time.mjs","names":[],"sources":["../src/time.ts"],"sourcesContent":["import { computed, type Ref, ref, toValue, watch } from 'vue';\nimport { useMount } from './component';\nimport { _runScope } from './shared';\n\n/**\n * 创建一个延迟更新的响应式值\n *\n * 该函数创建一个基于原始响应式值的延迟更新值,当原始值发生变化时,\n * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化,\n * 则会重新计算延迟时间。\n *\n * @param initialValue 原始响应式值,类型为Ref<T>\n * @param delay 延迟时间,可以是数字或响应式数字,默认为100毫秒\n * @returns 返回一个计算属性,其值会在延迟后更新为原始值\n */\nexport function useLazyValue<T>(initialValue: Ref<T>, delay?: number | Ref<number>) {\n const lazyValue = ref(initialValue.value);\n let changedAt = 0;\n\n _runScope(() => {\n // biome-ignore lint/suspicious/noExplicitAny: 内部使用 any\n let t: any;\n\n watch(initialValue, (value) => {\n const delayValue = toValue(delay) || 100;\n clearTimeout(t);\n\n if (changedAt > 0 && Date.now() - changedAt > delayValue) {\n lazyValue.value = value;\n } else {\n t = setTimeout(() => {\n lazyValue.value = value;\n }, delayValue);\n }\n\n changedAt = Date.now();\n });\n\n return () => {\n clearTimeout(t);\n };\n });\n\n return computed<T>(() => {\n return lazyValue.value;\n });\n}\n\nexport function useInterval(callback: () => void, delay?: number | Ref<number>) {\n useMount(() => {\n const delayValue = toValue(delay) || 100;\n const t = setInterval(callback, delayValue);\n\n return () => {\n clearInterval(t);\n };\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAgB,aAAgB,cAAsB,OAA8B;CAClF,MAAM,YAAY,IAAI,aAAa,
|
|
1
|
+
{"version":3,"file":"time.mjs","names":[],"sources":["../src/time.ts"],"sourcesContent":["import { computed, type Ref, ref, toValue, watch } from 'vue';\nimport { useMount } from './component';\nimport { _runScope } from './shared';\n\n/**\n * 创建一个延迟更新的响应式值\n *\n * 该函数创建一个基于原始响应式值的延迟更新值,当原始值发生变化时,\n * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化,\n * 则会重新计算延迟时间。\n *\n * @param initialValue 原始响应式值,类型为Ref<T>\n * @param delay 延迟时间,可以是数字或响应式数字,默认为100毫秒\n * @returns 返回一个计算属性,其值会在延迟后更新为原始值\n */\nexport function useLazyValue<T>(initialValue: Ref<T>, delay?: number | Ref<number>) {\n const lazyValue = ref(initialValue.value);\n let changedAt = 0;\n\n _runScope(() => {\n // biome-ignore lint/suspicious/noExplicitAny: 内部使用 any\n let t: any;\n\n watch(initialValue, (value) => {\n const delayValue = toValue(delay) || 100;\n clearTimeout(t);\n\n if (changedAt > 0 && Date.now() - changedAt > delayValue) {\n lazyValue.value = value;\n } else {\n t = setTimeout(() => {\n lazyValue.value = value;\n }, delayValue);\n }\n\n changedAt = Date.now();\n });\n\n return () => {\n clearTimeout(t);\n };\n });\n\n return computed<T>(() => {\n return lazyValue.value;\n });\n}\n\nexport function useInterval(callback: () => void, delay?: number | Ref<number>) {\n useMount(() => {\n const delayValue = toValue(delay) || 100;\n const t = setInterval(callback, delayValue);\n\n return () => {\n clearInterval(t);\n };\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAgB,aAAgB,cAAsB,OAA8B;CAClF,MAAM,YAAY,IAAI,aAAa,KAAK;CACxC,IAAI,YAAY;CAEhB,gBAAgB;EAEd,IAAI;EAEJ,MAAM,eAAe,UAAU;GAC7B,MAAM,aAAa,QAAQ,KAAK,KAAK;GACrC,aAAa,CAAC;GAEd,IAAI,YAAY,KAAK,KAAK,IAAI,IAAI,YAAY,YAC5C,UAAU,QAAQ;QAElB,IAAI,iBAAiB;IACnB,UAAU,QAAQ;GACpB,GAAG,UAAU;GAGf,YAAY,KAAK,IAAI;EACvB,CAAC;EAED,aAAa;GACX,aAAa,CAAC;EAChB;CACF,CAAC;CAED,OAAO,eAAkB;EACvB,OAAO,UAAU;CACnB,CAAC;AACH;AAEA,SAAgB,YAAY,UAAsB,OAA8B;CAC9E,eAAe;EACb,MAAM,aAAa,QAAQ,KAAK,KAAK;EACrC,MAAM,IAAI,YAAY,UAAU,UAAU;EAE1C,aAAa;GACX,cAAc,CAAC;EACjB;CACF,CAAC;AACH"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudcome/utils-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.16.0",
|
|
4
4
|
"description": "cloudcome utils for vue",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"dependencies": {
|
|
92
92
|
"@cloudcome/utils-core": "~1.22.0",
|
|
93
93
|
"vue": "^3.5.34",
|
|
94
|
-
"vue-component-type-helpers": "^3.
|
|
94
|
+
"vue-component-type-helpers": "^3.3.0"
|
|
95
95
|
},
|
|
96
96
|
"keywords": [
|
|
97
97
|
"cloudcome",
|