@tanstack/preact-pacer 0.22.1 → 0.23.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/README.md +17 -2
- package/dist/async-batcher/useAsyncBatchedCallback.cjs.map +1 -1
- package/dist/async-batcher/useAsyncBatchedCallback.d.cts +0 -1
- package/dist/async-batcher/useAsyncBatchedCallback.d.ts +0 -1
- package/dist/async-batcher/useAsyncBatchedCallback.js.map +1 -1
- package/dist/async-batcher/useAsyncBatcher.cjs.map +1 -1
- package/dist/async-batcher/useAsyncBatcher.d.cts +0 -1
- package/dist/async-batcher/useAsyncBatcher.d.ts +0 -1
- package/dist/async-batcher/useAsyncBatcher.js.map +1 -1
- package/dist/async-debouncer/useAsyncDebouncedCallback.cjs +4 -2
- package/dist/async-debouncer/useAsyncDebouncedCallback.cjs.map +1 -1
- package/dist/async-debouncer/useAsyncDebouncedCallback.d.cts +5 -4
- package/dist/async-debouncer/useAsyncDebouncedCallback.d.ts +5 -4
- package/dist/async-debouncer/useAsyncDebouncedCallback.js +4 -2
- package/dist/async-debouncer/useAsyncDebouncedCallback.js.map +1 -1
- package/dist/async-debouncer/useAsyncDebouncer.cjs.map +1 -1
- package/dist/async-debouncer/useAsyncDebouncer.d.cts +0 -1
- package/dist/async-debouncer/useAsyncDebouncer.d.ts +0 -1
- package/dist/async-debouncer/useAsyncDebouncer.js.map +1 -1
- package/dist/async-queuer/useAsyncQueuedState.cjs.map +1 -1
- package/dist/async-queuer/useAsyncQueuedState.d.cts +0 -1
- package/dist/async-queuer/useAsyncQueuedState.d.ts +0 -1
- package/dist/async-queuer/useAsyncQueuedState.js.map +1 -1
- package/dist/async-queuer/useAsyncQueuer.cjs.map +1 -1
- package/dist/async-queuer/useAsyncQueuer.d.cts +0 -1
- package/dist/async-queuer/useAsyncQueuer.d.ts +0 -1
- package/dist/async-queuer/useAsyncQueuer.js.map +1 -1
- package/dist/async-rate-limiter/useAsyncRateLimitedCallback.cjs.map +1 -1
- package/dist/async-rate-limiter/useAsyncRateLimitedCallback.d.cts +1 -2
- package/dist/async-rate-limiter/useAsyncRateLimitedCallback.d.ts +1 -2
- package/dist/async-rate-limiter/useAsyncRateLimitedCallback.js.map +1 -1
- package/dist/async-rate-limiter/useAsyncRateLimiter.cjs.map +1 -1
- package/dist/async-rate-limiter/useAsyncRateLimiter.d.cts +0 -1
- package/dist/async-rate-limiter/useAsyncRateLimiter.d.ts +0 -1
- package/dist/async-rate-limiter/useAsyncRateLimiter.js.map +1 -1
- package/dist/async-retryer/index.cjs +0 -1
- package/dist/async-throttler/useAsyncThrottledCallback.cjs +5 -4
- package/dist/async-throttler/useAsyncThrottledCallback.cjs.map +1 -1
- package/dist/async-throttler/useAsyncThrottledCallback.d.cts +6 -6
- package/dist/async-throttler/useAsyncThrottledCallback.d.ts +6 -6
- package/dist/async-throttler/useAsyncThrottledCallback.js +5 -4
- package/dist/async-throttler/useAsyncThrottledCallback.js.map +1 -1
- package/dist/async-throttler/useAsyncThrottler.cjs.map +1 -1
- package/dist/async-throttler/useAsyncThrottler.d.cts +0 -1
- package/dist/async-throttler/useAsyncThrottler.d.ts +0 -1
- package/dist/async-throttler/useAsyncThrottler.js.map +1 -1
- package/dist/batcher/useBatchedCallback.cjs.map +1 -1
- package/dist/batcher/useBatchedCallback.d.cts +0 -1
- package/dist/batcher/useBatchedCallback.d.ts +0 -1
- package/dist/batcher/useBatchedCallback.js.map +1 -1
- package/dist/batcher/useBatcher.cjs.map +1 -1
- package/dist/batcher/useBatcher.d.cts +0 -1
- package/dist/batcher/useBatcher.d.ts +0 -1
- package/dist/batcher/useBatcher.js.map +1 -1
- package/dist/debouncer/useDebouncedCallback.cjs.map +1 -1
- package/dist/debouncer/useDebouncedCallback.d.cts +0 -1
- package/dist/debouncer/useDebouncedCallback.d.ts +0 -1
- package/dist/debouncer/useDebouncedCallback.js.map +1 -1
- package/dist/debouncer/useDebouncedState.cjs.map +1 -1
- package/dist/debouncer/useDebouncedState.d.cts +0 -1
- package/dist/debouncer/useDebouncedState.d.ts +0 -1
- package/dist/debouncer/useDebouncedState.js.map +1 -1
- package/dist/debouncer/useDebouncedValue.cjs.map +1 -1
- package/dist/debouncer/useDebouncedValue.d.cts +0 -1
- package/dist/debouncer/useDebouncedValue.d.ts +0 -1
- package/dist/debouncer/useDebouncedValue.js.map +1 -1
- package/dist/debouncer/useDebouncer.cjs.map +1 -1
- package/dist/debouncer/useDebouncer.d.cts +0 -1
- package/dist/debouncer/useDebouncer.d.ts +0 -1
- package/dist/debouncer/useDebouncer.js.map +1 -1
- package/dist/provider/PacerProvider.cjs.map +1 -1
- package/dist/provider/PacerProvider.d.cts +1 -6
- package/dist/provider/PacerProvider.d.ts +1 -6
- package/dist/provider/PacerProvider.js.map +1 -1
- package/dist/queuer/useQueuedState.cjs.map +1 -1
- package/dist/queuer/useQueuedState.d.cts +0 -1
- package/dist/queuer/useQueuedState.d.ts +0 -1
- package/dist/queuer/useQueuedState.js.map +1 -1
- package/dist/queuer/useQueuedValue.cjs.map +1 -1
- package/dist/queuer/useQueuedValue.d.cts +0 -1
- package/dist/queuer/useQueuedValue.d.ts +0 -1
- package/dist/queuer/useQueuedValue.js.map +1 -1
- package/dist/queuer/useQueuer.cjs.map +1 -1
- package/dist/queuer/useQueuer.d.cts +0 -1
- package/dist/queuer/useQueuer.d.ts +0 -1
- package/dist/queuer/useQueuer.js.map +1 -1
- package/dist/rate-limiter/useRateLimitedCallback.cjs.map +1 -1
- package/dist/rate-limiter/useRateLimitedCallback.d.cts +0 -1
- package/dist/rate-limiter/useRateLimitedCallback.d.ts +0 -1
- package/dist/rate-limiter/useRateLimitedCallback.js.map +1 -1
- package/dist/rate-limiter/useRateLimitedState.cjs.map +1 -1
- package/dist/rate-limiter/useRateLimitedState.d.cts +0 -1
- package/dist/rate-limiter/useRateLimitedState.d.ts +0 -1
- package/dist/rate-limiter/useRateLimitedState.js.map +1 -1
- package/dist/rate-limiter/useRateLimitedValue.cjs.map +1 -1
- package/dist/rate-limiter/useRateLimitedValue.d.cts +0 -1
- package/dist/rate-limiter/useRateLimitedValue.d.ts +0 -1
- package/dist/rate-limiter/useRateLimitedValue.js.map +1 -1
- package/dist/rate-limiter/useRateLimiter.cjs.map +1 -1
- package/dist/rate-limiter/useRateLimiter.d.cts +0 -1
- package/dist/rate-limiter/useRateLimiter.d.ts +0 -1
- package/dist/rate-limiter/useRateLimiter.js.map +1 -1
- package/dist/throttler/useThrottledCallback.cjs.map +1 -1
- package/dist/throttler/useThrottledCallback.d.cts +0 -1
- package/dist/throttler/useThrottledCallback.d.ts +0 -1
- package/dist/throttler/useThrottledCallback.js.map +1 -1
- package/dist/throttler/useThrottledState.cjs.map +1 -1
- package/dist/throttler/useThrottledState.d.cts +0 -1
- package/dist/throttler/useThrottledState.d.ts +0 -1
- package/dist/throttler/useThrottledState.js.map +1 -1
- package/dist/throttler/useThrottledValue.cjs.map +1 -1
- package/dist/throttler/useThrottledValue.d.cts +0 -1
- package/dist/throttler/useThrottledValue.d.ts +0 -1
- package/dist/throttler/useThrottledValue.js.map +1 -1
- package/dist/throttler/useThrottler.cjs.map +1 -1
- package/dist/throttler/useThrottler.d.cts +0 -1
- package/dist/throttler/useThrottler.d.ts +0 -1
- package/dist/throttler/useThrottler.js.map +1 -1
- package/dist/types/index.cjs +0 -1
- package/dist/utils/index.cjs +0 -1
- package/package.json +5 -5
- package/src/async-debouncer/useAsyncDebouncedCallback.ts +6 -5
- package/src/async-rate-limiter/useAsyncRateLimitedCallback.ts +2 -3
- package/src/async-throttler/useAsyncThrottledCallback.ts +7 -7
package/README.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
<
|
|
2
|
+
<picture>
|
|
3
|
+
<source
|
|
4
|
+
media="(prefers-color-scheme: dark)"
|
|
5
|
+
srcset="https://tanstack.com/api/readme/pacer.png?framework=preact&theme=dark"
|
|
6
|
+
/>
|
|
7
|
+
<source
|
|
8
|
+
media="(prefers-color-scheme: light)"
|
|
9
|
+
srcset="https://tanstack.com/api/readme/pacer.png?framework=preact"
|
|
10
|
+
/>
|
|
11
|
+
<img
|
|
12
|
+
src="https://tanstack.com/api/readme/pacer.png?framework=preact"
|
|
13
|
+
alt="TanStack Preact Pacer"
|
|
14
|
+
width="900"
|
|
15
|
+
/>
|
|
16
|
+
</picture>
|
|
3
17
|
</div>
|
|
4
18
|
|
|
5
19
|
<br />
|
|
@@ -29,8 +43,9 @@
|
|
|
29
43
|
</div>
|
|
30
44
|
|
|
31
45
|
<div align="center">
|
|
32
|
-
|
|
46
|
+
|
|
33
47
|
### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
|
|
48
|
+
|
|
34
49
|
</div>
|
|
35
50
|
|
|
36
51
|
# TanStack Pacer
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncBatchedCallback.cjs","names":["useAsyncBatcher"],"sources":["../../src/async-batcher/useAsyncBatchedCallback.ts"],"sourcesContent":["import { useCallback } from 'preact/hooks'\nimport { useAsyncBatcher } from './useAsyncBatcher'\nimport type { PreactAsyncBatcherOptions } from './useAsyncBatcher'\n\n/**\n * A Preact hook that creates a batched version of an async callback function.\n * This hook is a convenient wrapper around the `useAsyncBatcher` hook,\n * providing a stable, batched async function reference for use in Preact components.\n *\n * The batched async function will collect individual calls into batches and execute them\n * when batch conditions are met (max size reached, wait time elapsed, or custom logic).\n * The returned function always returns a promise that resolves with undefined (since the\n * batch function processes multiple items together).\n *\n * This hook provides a simpler API compared to `useAsyncBatcher`, making it ideal for basic\n * async batching needs. However, it does not expose the underlying AsyncBatcher instance.\n *\n * For advanced usage requiring features like:\n * - Manual batch execution\n * - Access to batch results and state\n * - Custom useCallback dependencies\n *\n * Consider using the `useAsyncBatcher` hook instead.\n *\n * @example\n * ```tsx\n * // Batch API requests\n * const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {\n * const results = await Promise.all(requests.map(req => fetch(req.url)));\n * return results.map(res => res.json());\n * }, {\n * maxSize: 10, // Process when 10 requests collected\n * wait: 1000 // Or after 1 second\n * });\n *\n * // Use in event handlers\n * <button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>\n * Track Event\n * </button>\n * ```\n */\nexport function useAsyncBatchedCallback<TValue>(\n fn: (items: Array<TValue>) => Promise<unknown>,\n options: PreactAsyncBatcherOptions<TValue, {}>,\n): (item: TValue) => Promise<void> {\n const asyncBatchedFn = useAsyncBatcher(fn, options).addItem\n return useCallback(\n async (item: TValue) => {\n await asyncBatchedFn(item)\n },\n [asyncBatchedFn],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,wBACd,IACA,SACiC;CACjC,MAAM,iBAAiBA,wCAAgB,IAAI,
|
|
1
|
+
{"version":3,"file":"useAsyncBatchedCallback.cjs","names":["useAsyncBatcher","useCallback"],"sources":["../../src/async-batcher/useAsyncBatchedCallback.ts"],"sourcesContent":["import { useCallback } from 'preact/hooks'\nimport { useAsyncBatcher } from './useAsyncBatcher'\nimport type { PreactAsyncBatcherOptions } from './useAsyncBatcher'\n\n/**\n * A Preact hook that creates a batched version of an async callback function.\n * This hook is a convenient wrapper around the `useAsyncBatcher` hook,\n * providing a stable, batched async function reference for use in Preact components.\n *\n * The batched async function will collect individual calls into batches and execute them\n * when batch conditions are met (max size reached, wait time elapsed, or custom logic).\n * The returned function always returns a promise that resolves with undefined (since the\n * batch function processes multiple items together).\n *\n * This hook provides a simpler API compared to `useAsyncBatcher`, making it ideal for basic\n * async batching needs. However, it does not expose the underlying AsyncBatcher instance.\n *\n * For advanced usage requiring features like:\n * - Manual batch execution\n * - Access to batch results and state\n * - Custom useCallback dependencies\n *\n * Consider using the `useAsyncBatcher` hook instead.\n *\n * @example\n * ```tsx\n * // Batch API requests\n * const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {\n * const results = await Promise.all(requests.map(req => fetch(req.url)));\n * return results.map(res => res.json());\n * }, {\n * maxSize: 10, // Process when 10 requests collected\n * wait: 1000 // Or after 1 second\n * });\n *\n * // Use in event handlers\n * <button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>\n * Track Event\n * </button>\n * ```\n */\nexport function useAsyncBatchedCallback<TValue>(\n fn: (items: Array<TValue>) => Promise<unknown>,\n options: PreactAsyncBatcherOptions<TValue, {}>,\n): (item: TValue) => Promise<void> {\n const asyncBatchedFn = useAsyncBatcher(fn, options).addItem\n return useCallback(\n async (item: TValue) => {\n await asyncBatchedFn(item)\n },\n [asyncBatchedFn],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,wBACd,IACA,SACiC;CACjC,MAAM,iBAAiBA,wCAAgB,IAAI,OAAO,CAAC,CAAC;CACpD,WAAOC,0BACL,OAAO,SAAiB;EACtB,MAAM,eAAe,IAAI;CAC3B,GACA,CAAC,cAAc,CACjB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncBatchedCallback.js","names":[],"sources":["../../src/async-batcher/useAsyncBatchedCallback.ts"],"sourcesContent":["import { useCallback } from 'preact/hooks'\nimport { useAsyncBatcher } from './useAsyncBatcher'\nimport type { PreactAsyncBatcherOptions } from './useAsyncBatcher'\n\n/**\n * A Preact hook that creates a batched version of an async callback function.\n * This hook is a convenient wrapper around the `useAsyncBatcher` hook,\n * providing a stable, batched async function reference for use in Preact components.\n *\n * The batched async function will collect individual calls into batches and execute them\n * when batch conditions are met (max size reached, wait time elapsed, or custom logic).\n * The returned function always returns a promise that resolves with undefined (since the\n * batch function processes multiple items together).\n *\n * This hook provides a simpler API compared to `useAsyncBatcher`, making it ideal for basic\n * async batching needs. However, it does not expose the underlying AsyncBatcher instance.\n *\n * For advanced usage requiring features like:\n * - Manual batch execution\n * - Access to batch results and state\n * - Custom useCallback dependencies\n *\n * Consider using the `useAsyncBatcher` hook instead.\n *\n * @example\n * ```tsx\n * // Batch API requests\n * const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {\n * const results = await Promise.all(requests.map(req => fetch(req.url)));\n * return results.map(res => res.json());\n * }, {\n * maxSize: 10, // Process when 10 requests collected\n * wait: 1000 // Or after 1 second\n * });\n *\n * // Use in event handlers\n * <button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>\n * Track Event\n * </button>\n * ```\n */\nexport function useAsyncBatchedCallback<TValue>(\n fn: (items: Array<TValue>) => Promise<unknown>,\n options: PreactAsyncBatcherOptions<TValue, {}>,\n): (item: TValue) => Promise<void> {\n const asyncBatchedFn = useAsyncBatcher(fn, options).addItem\n return useCallback(\n async (item: TValue) => {\n await asyncBatchedFn(item)\n },\n [asyncBatchedFn],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,wBACd,IACA,SACiC;CACjC,MAAM,iBAAiB,gBAAgB,IAAI,
|
|
1
|
+
{"version":3,"file":"useAsyncBatchedCallback.js","names":[],"sources":["../../src/async-batcher/useAsyncBatchedCallback.ts"],"sourcesContent":["import { useCallback } from 'preact/hooks'\nimport { useAsyncBatcher } from './useAsyncBatcher'\nimport type { PreactAsyncBatcherOptions } from './useAsyncBatcher'\n\n/**\n * A Preact hook that creates a batched version of an async callback function.\n * This hook is a convenient wrapper around the `useAsyncBatcher` hook,\n * providing a stable, batched async function reference for use in Preact components.\n *\n * The batched async function will collect individual calls into batches and execute them\n * when batch conditions are met (max size reached, wait time elapsed, or custom logic).\n * The returned function always returns a promise that resolves with undefined (since the\n * batch function processes multiple items together).\n *\n * This hook provides a simpler API compared to `useAsyncBatcher`, making it ideal for basic\n * async batching needs. However, it does not expose the underlying AsyncBatcher instance.\n *\n * For advanced usage requiring features like:\n * - Manual batch execution\n * - Access to batch results and state\n * - Custom useCallback dependencies\n *\n * Consider using the `useAsyncBatcher` hook instead.\n *\n * @example\n * ```tsx\n * // Batch API requests\n * const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {\n * const results = await Promise.all(requests.map(req => fetch(req.url)));\n * return results.map(res => res.json());\n * }, {\n * maxSize: 10, // Process when 10 requests collected\n * wait: 1000 // Or after 1 second\n * });\n *\n * // Use in event handlers\n * <button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>\n * Track Event\n * </button>\n * ```\n */\nexport function useAsyncBatchedCallback<TValue>(\n fn: (items: Array<TValue>) => Promise<unknown>,\n options: PreactAsyncBatcherOptions<TValue, {}>,\n): (item: TValue) => Promise<void> {\n const asyncBatchedFn = useAsyncBatcher(fn, options).addItem\n return useCallback(\n async (item: TValue) => {\n await asyncBatchedFn(item)\n },\n [asyncBatchedFn],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,wBACd,IACA,SACiC;CACjC,MAAM,iBAAiB,gBAAgB,IAAI,OAAO,CAAC,CAAC;CACpD,OAAO,YACL,OAAO,SAAiB;EACtB,MAAM,eAAe,IAAI;CAC3B,GACA,CAAC,cAAc,CACjB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncBatcher.cjs","names":["useDefaultPacerOptions","AsyncBatcher","shallow"],"sources":["../../src/async-batcher/useAsyncBatcher.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { AsyncBatcher } from '@tanstack/pacer/async-batcher'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { useDefaultPacerOptions } from '../provider/PacerProvider'\nimport type { Store } from '@tanstack/preact-store'\nimport type {\n AsyncBatcherOptions,\n AsyncBatcherState,\n} from '@tanstack/pacer/async-batcher'\nimport type { ComponentChildren } from 'preact'\n\nexport interface PreactAsyncBatcherOptions<\n TValue,\n TSelected = {},\n> extends AsyncBatcherOptions<TValue> {\n /**\n * Optional callback invoked when the component unmounts. Receives the batcher instance.\n * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.\n */\n onUnmount?: (batcher: PreactAsyncBatcher<TValue, TSelected>) => void\n}\n\nexport interface PreactAsyncBatcher<TValue, TSelected = {}> extends Omit<\n AsyncBatcher<TValue>,\n 'store'\n> {\n /**\n * A Preact HOC (Higher Order Component) that allows you to subscribe to the async batcher state.\n *\n * This is useful for opting into state re-renders for specific parts of the batcher state\n * deep in your component tree without needing to pass a selector to the hook.\n *\n * @example\n * <batcher.Subscribe selector={(state) => ({ size: state.size })}>\n * {({ size }) => (\n * <div>Batch Size: {size}</div>\n * )}\n * </batcher.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: AsyncBatcherState<TValue>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * Reactive state that will be updated and re-rendered when the batcher state changes\n *\n * Use this instead of `batcher.store.state`\n */\n readonly state: Readonly<TSelected>\n /**\n * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.\n * The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.\n * Although, you can make the state reactive by using the `useSelector` in your own usage.\n */\n readonly store: Store<Readonly<AsyncBatcherState<TValue>>>\n}\n\n/**\n * A Preact hook that creates an `AsyncBatcher` instance for managing asynchronous batches of items.\n *\n * This is the async version of the useBatcher hook. Unlike the sync version, this async batcher:\n * - Handles promises and returns results from batch executions\n * - Provides error handling with configurable error behavior\n * - Tracks success, error, and settle counts separately\n * - Has state tracking for when batches are executing\n * - Returns the result of the batch function execution\n *\n * Features:\n * - Configurable batch size and wait time\n * - Custom batch processing logic via getShouldExecute\n * - Event callbacks for monitoring batch operations\n * - Error handling for failed batch operations\n * - Automatic or manual batch processing\n *\n * The batcher collects items and processes them in batches based on:\n * - Maximum batch size (number of items per batch)\n * - Time-based batching (process after X milliseconds)\n * - Custom batch processing logic via getShouldExecute\n *\n * Error Handling:\n * - If an `onError` handler is provided, it will be called with the error and batcher instance\n * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown\n * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed\n * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown\n * - The error state can be checked using the underlying AsyncBatcher instance\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management. You can subscribe to state changes\n * in two ways:\n *\n * **1. Using `batcher.Subscribe` HOC (Recommended for component tree subscriptions)**\n *\n * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without\n * needing to pass a selector to the hook. This is ideal when you want to subscribe to state\n * in child components.\n *\n * **2. Using the `selector` parameter (For hook-level subscriptions)**\n *\n * The `selector` parameter allows you to specify which state changes will trigger a re-render\n * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant\n * state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary\n * re-renders and gives you full control over when your component updates.\n *\n * Available state properties:\n * - `errorCount`: Number of batch executions that have resulted in errors\n * - `failedItems`: Array of items that failed during batch processing\n * - `isEmpty`: Whether the batcher has no items to process\n * - `isExecuting`: Whether a batch is currently being processed asynchronously\n * - `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing\n * - `isRunning`: Whether the batcher is active and will process items automatically\n * - `items`: Array of items currently queued for batch processing\n * - `lastResult`: The result from the most recent batch execution\n * - `settleCount`: Number of batch executions that have completed (success or error)\n * - `size`: Number of items currently in the batch queue\n * - `status`: Current processing status ('idle' | 'pending' | 'executing' | 'populated')\n * - `successCount`: Number of batch executions that have completed successfully\n * - `totalItemsProcessed`: Total number of items processed across all batches\n * - `totalItemsFailed`: Total number of items that have failed processing\n *\n * ## Unmount behavior\n *\n * By default, the hook cancels any pending batch and aborts any in-flight execution when the component unmounts.\n * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```tsx\n * const batcher = useAsyncBatcher(fn, {\n * maxSize: 10,\n * wait: 2000,\n * onUnmount: (b) => b.flush()\n * });\n * ```\n *\n * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.\n * If your batch function updates Preact state, those updates may run after the component has\n * unmounted, which can cause \"setState on unmounted component\" warnings. Guard your callbacks\n * accordingly when using onUnmount with flush.\n *\n * @example\n * ```tsx\n * // Basic async batcher for API requests - no reactive state subscriptions\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 }\n * );\n *\n * // Subscribe to state changes deep in component tree using Subscribe HOC\n * <asyncBatcher.Subscribe selector={(state) => ({ size: state.size })}>\n * {({ size }) => (\n * <div>Batch Size: {size}</div>\n * )}\n * </asyncBatcher.Subscribe>\n *\n * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 },\n * (state) => ({\n * isExecuting: state.isExecuting,\n * isPending: state.isPending,\n * status: state.status\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount,\n * totalItemsProcessed: state.totalItemsProcessed\n * })\n * );\n *\n * // Opt-in to re-render when error state changes (optimized for error handling)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * {\n * maxSize: 10,\n * wait: 2000,\n * onError: (error) => console.error('Batch processing failed:', error)\n * },\n * (state) => ({\n * errorCount: state.errorCount,\n * failedItems: state.failedItems,\n * totalItemsFailed: state.totalItemsFailed\n * })\n * );\n *\n * // Complete example with all callbacks\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * {\n * maxSize: 10,\n * wait: 2000,\n * onSuccess: (result) => {\n * console.log('Batch processed successfully:', result);\n * },\n * onError: (error) => {\n * console.error('Batch processing failed:', error);\n * }\n * }\n * );\n *\n * // Add items to batch\n * asyncBatcher.addItem(newItem);\n *\n * // Manually execute batch\n * const result = await asyncBatcher.execute();\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isExecuting, lastResult, size } = asyncBatcher.state;\n * ```\n */\nexport function useAsyncBatcher<TValue, TSelected = {}>(\n fn: (items: Array<TValue>) => Promise<any>,\n options: PreactAsyncBatcherOptions<TValue, TSelected> = {},\n selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>\n ({}) as TSelected,\n): PreactAsyncBatcher<TValue, TSelected> {\n const mergedOptions = {\n ...useDefaultPacerOptions().asyncBatcher,\n ...options,\n } as PreactAsyncBatcherOptions<TValue, TSelected>\n const [asyncBatcher] = useState(() => {\n const batcherInstance = new AsyncBatcher<TValue>(\n fn,\n mergedOptions,\n ) as unknown as PreactAsyncBatcher<TValue, TSelected>\n\n batcherInstance.Subscribe = function Subscribe<TSelected>(props: {\n selector: (state: AsyncBatcherState<TValue>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) {\n const selected = useSelector(batcherInstance.store, props.selector, {\n compare: shallow,\n })\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n }\n\n return batcherInstance\n })\n\n asyncBatcher.fn = fn\n asyncBatcher.setOptions(mergedOptions)\n\n /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */\n useEffect(() => {\n return () => {\n if (mergedOptions.onUnmount) {\n mergedOptions.onUnmount(asyncBatcher)\n } else {\n asyncBatcher.cancel()\n asyncBatcher.abort()\n }\n }\n }, [])\n /* eslint-enable react-hooks/exhaustive-deps */\n\n const state = useSelector(asyncBatcher.store, selector, { compare: shallow })\n\n return useMemo(\n () =>\n ({\n ...asyncBatcher,\n state,\n }) as PreactAsyncBatcher<TValue, TSelected>, // omit `store` in favor of `state`\n [asyncBatcher, state],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0OA,SAAgB,gBACd,IACA,UAAwD,EAAE,EAC1D,kBACG,EAAE,GACkC;CACvC,MAAM,gBAAgB;EACpB,GAAGA,8CAAwB,CAAC;EAC5B,GAAG;EACJ;CACD,MAAM,CAAC,iDAA+B;EACpC,MAAM,kBAAkB,IAAIC,2CAC1B,IACA,cACD;EAED,gBAAgB,YAAY,SAAS,UAAqB,OAGvD;GACD,MAAM,mDAAuB,gBAAgB,OAAO,MAAM,UAAU,EAClE,SAASC,gCACV,CAAC;GAEF,OAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM;;EAGZ,OAAO;GACP;CAEF,aAAa,KAAK;CAClB,aAAa,WAAW,cAAc;CAGtC,kCAAgB;EACd,aAAa;GACX,IAAI,cAAc,WAChB,cAAc,UAAU,aAAa;QAChC;IACL,aAAa,QAAQ;IACrB,aAAa,OAAO;;;IAGvB,EAAE,CAAC;CAGN,MAAM,gDAAoB,aAAa,OAAO,UAAU,EAAE,SAASA,gCAAS,CAAC;CAE7E,wCAEK;EACC,GAAG;EACH;EACD,GACH,CAAC,cAAc,MAAM,CACtB"}
|
|
1
|
+
{"version":3,"file":"useAsyncBatcher.cjs","names":["useDefaultPacerOptions","useState","AsyncBatcher","useSelector","shallow","useMemo"],"sources":["../../src/async-batcher/useAsyncBatcher.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { AsyncBatcher } from '@tanstack/pacer/async-batcher'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { useDefaultPacerOptions } from '../provider/PacerProvider'\nimport type { Store } from '@tanstack/preact-store'\nimport type {\n AsyncBatcherOptions,\n AsyncBatcherState,\n} from '@tanstack/pacer/async-batcher'\nimport type { ComponentChildren } from 'preact'\n\nexport interface PreactAsyncBatcherOptions<\n TValue,\n TSelected = {},\n> extends AsyncBatcherOptions<TValue> {\n /**\n * Optional callback invoked when the component unmounts. Receives the batcher instance.\n * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.\n */\n onUnmount?: (batcher: PreactAsyncBatcher<TValue, TSelected>) => void\n}\n\nexport interface PreactAsyncBatcher<TValue, TSelected = {}> extends Omit<\n AsyncBatcher<TValue>,\n 'store'\n> {\n /**\n * A Preact HOC (Higher Order Component) that allows you to subscribe to the async batcher state.\n *\n * This is useful for opting into state re-renders for specific parts of the batcher state\n * deep in your component tree without needing to pass a selector to the hook.\n *\n * @example\n * <batcher.Subscribe selector={(state) => ({ size: state.size })}>\n * {({ size }) => (\n * <div>Batch Size: {size}</div>\n * )}\n * </batcher.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: AsyncBatcherState<TValue>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * Reactive state that will be updated and re-rendered when the batcher state changes\n *\n * Use this instead of `batcher.store.state`\n */\n readonly state: Readonly<TSelected>\n /**\n * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.\n * The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.\n * Although, you can make the state reactive by using the `useSelector` in your own usage.\n */\n readonly store: Store<Readonly<AsyncBatcherState<TValue>>>\n}\n\n/**\n * A Preact hook that creates an `AsyncBatcher` instance for managing asynchronous batches of items.\n *\n * This is the async version of the useBatcher hook. Unlike the sync version, this async batcher:\n * - Handles promises and returns results from batch executions\n * - Provides error handling with configurable error behavior\n * - Tracks success, error, and settle counts separately\n * - Has state tracking for when batches are executing\n * - Returns the result of the batch function execution\n *\n * Features:\n * - Configurable batch size and wait time\n * - Custom batch processing logic via getShouldExecute\n * - Event callbacks for monitoring batch operations\n * - Error handling for failed batch operations\n * - Automatic or manual batch processing\n *\n * The batcher collects items and processes them in batches based on:\n * - Maximum batch size (number of items per batch)\n * - Time-based batching (process after X milliseconds)\n * - Custom batch processing logic via getShouldExecute\n *\n * Error Handling:\n * - If an `onError` handler is provided, it will be called with the error and batcher instance\n * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown\n * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed\n * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown\n * - The error state can be checked using the underlying AsyncBatcher instance\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management. You can subscribe to state changes\n * in two ways:\n *\n * **1. Using `batcher.Subscribe` HOC (Recommended for component tree subscriptions)**\n *\n * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without\n * needing to pass a selector to the hook. This is ideal when you want to subscribe to state\n * in child components.\n *\n * **2. Using the `selector` parameter (For hook-level subscriptions)**\n *\n * The `selector` parameter allows you to specify which state changes will trigger a re-render\n * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant\n * state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary\n * re-renders and gives you full control over when your component updates.\n *\n * Available state properties:\n * - `errorCount`: Number of batch executions that have resulted in errors\n * - `failedItems`: Array of items that failed during batch processing\n * - `isEmpty`: Whether the batcher has no items to process\n * - `isExecuting`: Whether a batch is currently being processed asynchronously\n * - `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing\n * - `isRunning`: Whether the batcher is active and will process items automatically\n * - `items`: Array of items currently queued for batch processing\n * - `lastResult`: The result from the most recent batch execution\n * - `settleCount`: Number of batch executions that have completed (success or error)\n * - `size`: Number of items currently in the batch queue\n * - `status`: Current processing status ('idle' | 'pending' | 'executing' | 'populated')\n * - `successCount`: Number of batch executions that have completed successfully\n * - `totalItemsProcessed`: Total number of items processed across all batches\n * - `totalItemsFailed`: Total number of items that have failed processing\n *\n * ## Unmount behavior\n *\n * By default, the hook cancels any pending batch and aborts any in-flight execution when the component unmounts.\n * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```tsx\n * const batcher = useAsyncBatcher(fn, {\n * maxSize: 10,\n * wait: 2000,\n * onUnmount: (b) => b.flush()\n * });\n * ```\n *\n * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.\n * If your batch function updates Preact state, those updates may run after the component has\n * unmounted, which can cause \"setState on unmounted component\" warnings. Guard your callbacks\n * accordingly when using onUnmount with flush.\n *\n * @example\n * ```tsx\n * // Basic async batcher for API requests - no reactive state subscriptions\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 }\n * );\n *\n * // Subscribe to state changes deep in component tree using Subscribe HOC\n * <asyncBatcher.Subscribe selector={(state) => ({ size: state.size })}>\n * {({ size }) => (\n * <div>Batch Size: {size}</div>\n * )}\n * </asyncBatcher.Subscribe>\n *\n * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 },\n * (state) => ({\n * isExecuting: state.isExecuting,\n * isPending: state.isPending,\n * status: state.status\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount,\n * totalItemsProcessed: state.totalItemsProcessed\n * })\n * );\n *\n * // Opt-in to re-render when error state changes (optimized for error handling)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * {\n * maxSize: 10,\n * wait: 2000,\n * onError: (error) => console.error('Batch processing failed:', error)\n * },\n * (state) => ({\n * errorCount: state.errorCount,\n * failedItems: state.failedItems,\n * totalItemsFailed: state.totalItemsFailed\n * })\n * );\n *\n * // Complete example with all callbacks\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * {\n * maxSize: 10,\n * wait: 2000,\n * onSuccess: (result) => {\n * console.log('Batch processed successfully:', result);\n * },\n * onError: (error) => {\n * console.error('Batch processing failed:', error);\n * }\n * }\n * );\n *\n * // Add items to batch\n * asyncBatcher.addItem(newItem);\n *\n * // Manually execute batch\n * const result = await asyncBatcher.execute();\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isExecuting, lastResult, size } = asyncBatcher.state;\n * ```\n */\nexport function useAsyncBatcher<TValue, TSelected = {}>(\n fn: (items: Array<TValue>) => Promise<any>,\n options: PreactAsyncBatcherOptions<TValue, TSelected> = {},\n selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>\n ({}) as TSelected,\n): PreactAsyncBatcher<TValue, TSelected> {\n const mergedOptions = {\n ...useDefaultPacerOptions().asyncBatcher,\n ...options,\n } as PreactAsyncBatcherOptions<TValue, TSelected>\n const [asyncBatcher] = useState(() => {\n const batcherInstance = new AsyncBatcher<TValue>(\n fn,\n mergedOptions,\n ) as unknown as PreactAsyncBatcher<TValue, TSelected>\n\n batcherInstance.Subscribe = function Subscribe<TSelected>(props: {\n selector: (state: AsyncBatcherState<TValue>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) {\n const selected = useSelector(batcherInstance.store, props.selector, {\n compare: shallow,\n })\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n }\n\n return batcherInstance\n })\n\n asyncBatcher.fn = fn\n asyncBatcher.setOptions(mergedOptions)\n\n /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */\n useEffect(() => {\n return () => {\n if (mergedOptions.onUnmount) {\n mergedOptions.onUnmount(asyncBatcher)\n } else {\n asyncBatcher.cancel()\n asyncBatcher.abort()\n }\n }\n }, [])\n /* eslint-enable react-hooks/exhaustive-deps */\n\n const state = useSelector(asyncBatcher.store, selector, { compare: shallow })\n\n return useMemo(\n () =>\n ({\n ...asyncBatcher,\n state,\n }) as PreactAsyncBatcher<TValue, TSelected>, // omit `store` in favor of `state`\n [asyncBatcher, state],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0OA,SAAgB,gBACd,IACA,UAAwD,CAAC,GACzD,kBACG,CAAC,IACmC;CACvC,MAAM,gBAAgB;EACpB,GAAGA,6CAAuB,CAAC,CAAC;EAC5B,GAAG;CACL;CACA,MAAM,CAAC,oBAAgBC,6BAAe;EACpC,MAAM,kBAAkB,IAAIC,2CAC1B,IACA,aACF;EAEA,gBAAgB,YAAY,SAAS,UAAqB,OAGvD;GACD,MAAM,eAAWC,oCAAY,gBAAgB,OAAO,MAAM,UAAU,EAClE,SAASC,+BACX,CAAC;GAED,OAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,QAAQ,IACvB,MAAM;EACZ;EAEA,OAAO;CACT,CAAC;CAED,aAAa,KAAK;CAClB,aAAa,WAAW,aAAa;CAGrC,kCAAgB;EACd,aAAa;GACX,IAAI,cAAc,WAChB,cAAc,UAAU,YAAY;QAC/B;IACL,aAAa,OAAO;IACpB,aAAa,MAAM;GACrB;EACF;CACF,GAAG,CAAC,CAAC;CAGL,MAAM,YAAQD,oCAAY,aAAa,OAAO,UAAU,EAAE,SAASC,+BAAQ,CAAC;CAE5E,WAAOC,6BAEF;EACC,GAAG;EACH;CACF,IACF,CAAC,cAAc,KAAK,CACtB;AACF"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { AsyncBatcher, AsyncBatcherOptions, AsyncBatcherState } from "@tanstack/pacer/async-batcher";
|
|
2
2
|
import { Store } from "@tanstack/preact-store";
|
|
3
3
|
import { ComponentChildren } from "preact";
|
|
4
|
-
|
|
5
4
|
//#region src/async-batcher/useAsyncBatcher.d.ts
|
|
6
5
|
interface PreactAsyncBatcherOptions<TValue, TSelected = {}> extends AsyncBatcherOptions<TValue> {
|
|
7
6
|
/**
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { ComponentChildren } from "preact";
|
|
2
2
|
import { AsyncBatcher, AsyncBatcherOptions, AsyncBatcherState } from "@tanstack/pacer/async-batcher";
|
|
3
3
|
import { Store } from "@tanstack/preact-store";
|
|
4
|
-
|
|
5
4
|
//#region src/async-batcher/useAsyncBatcher.d.ts
|
|
6
5
|
interface PreactAsyncBatcherOptions<TValue, TSelected = {}> extends AsyncBatcherOptions<TValue> {
|
|
7
6
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncBatcher.js","names":[],"sources":["../../src/async-batcher/useAsyncBatcher.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { AsyncBatcher } from '@tanstack/pacer/async-batcher'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { useDefaultPacerOptions } from '../provider/PacerProvider'\nimport type { Store } from '@tanstack/preact-store'\nimport type {\n AsyncBatcherOptions,\n AsyncBatcherState,\n} from '@tanstack/pacer/async-batcher'\nimport type { ComponentChildren } from 'preact'\n\nexport interface PreactAsyncBatcherOptions<\n TValue,\n TSelected = {},\n> extends AsyncBatcherOptions<TValue> {\n /**\n * Optional callback invoked when the component unmounts. Receives the batcher instance.\n * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.\n */\n onUnmount?: (batcher: PreactAsyncBatcher<TValue, TSelected>) => void\n}\n\nexport interface PreactAsyncBatcher<TValue, TSelected = {}> extends Omit<\n AsyncBatcher<TValue>,\n 'store'\n> {\n /**\n * A Preact HOC (Higher Order Component) that allows you to subscribe to the async batcher state.\n *\n * This is useful for opting into state re-renders for specific parts of the batcher state\n * deep in your component tree without needing to pass a selector to the hook.\n *\n * @example\n * <batcher.Subscribe selector={(state) => ({ size: state.size })}>\n * {({ size }) => (\n * <div>Batch Size: {size}</div>\n * )}\n * </batcher.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: AsyncBatcherState<TValue>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * Reactive state that will be updated and re-rendered when the batcher state changes\n *\n * Use this instead of `batcher.store.state`\n */\n readonly state: Readonly<TSelected>\n /**\n * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.\n * The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.\n * Although, you can make the state reactive by using the `useSelector` in your own usage.\n */\n readonly store: Store<Readonly<AsyncBatcherState<TValue>>>\n}\n\n/**\n * A Preact hook that creates an `AsyncBatcher` instance for managing asynchronous batches of items.\n *\n * This is the async version of the useBatcher hook. Unlike the sync version, this async batcher:\n * - Handles promises and returns results from batch executions\n * - Provides error handling with configurable error behavior\n * - Tracks success, error, and settle counts separately\n * - Has state tracking for when batches are executing\n * - Returns the result of the batch function execution\n *\n * Features:\n * - Configurable batch size and wait time\n * - Custom batch processing logic via getShouldExecute\n * - Event callbacks for monitoring batch operations\n * - Error handling for failed batch operations\n * - Automatic or manual batch processing\n *\n * The batcher collects items and processes them in batches based on:\n * - Maximum batch size (number of items per batch)\n * - Time-based batching (process after X milliseconds)\n * - Custom batch processing logic via getShouldExecute\n *\n * Error Handling:\n * - If an `onError` handler is provided, it will be called with the error and batcher instance\n * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown\n * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed\n * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown\n * - The error state can be checked using the underlying AsyncBatcher instance\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management. You can subscribe to state changes\n * in two ways:\n *\n * **1. Using `batcher.Subscribe` HOC (Recommended for component tree subscriptions)**\n *\n * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without\n * needing to pass a selector to the hook. This is ideal when you want to subscribe to state\n * in child components.\n *\n * **2. Using the `selector` parameter (For hook-level subscriptions)**\n *\n * The `selector` parameter allows you to specify which state changes will trigger a re-render\n * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant\n * state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary\n * re-renders and gives you full control over when your component updates.\n *\n * Available state properties:\n * - `errorCount`: Number of batch executions that have resulted in errors\n * - `failedItems`: Array of items that failed during batch processing\n * - `isEmpty`: Whether the batcher has no items to process\n * - `isExecuting`: Whether a batch is currently being processed asynchronously\n * - `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing\n * - `isRunning`: Whether the batcher is active and will process items automatically\n * - `items`: Array of items currently queued for batch processing\n * - `lastResult`: The result from the most recent batch execution\n * - `settleCount`: Number of batch executions that have completed (success or error)\n * - `size`: Number of items currently in the batch queue\n * - `status`: Current processing status ('idle' | 'pending' | 'executing' | 'populated')\n * - `successCount`: Number of batch executions that have completed successfully\n * - `totalItemsProcessed`: Total number of items processed across all batches\n * - `totalItemsFailed`: Total number of items that have failed processing\n *\n * ## Unmount behavior\n *\n * By default, the hook cancels any pending batch and aborts any in-flight execution when the component unmounts.\n * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```tsx\n * const batcher = useAsyncBatcher(fn, {\n * maxSize: 10,\n * wait: 2000,\n * onUnmount: (b) => b.flush()\n * });\n * ```\n *\n * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.\n * If your batch function updates Preact state, those updates may run after the component has\n * unmounted, which can cause \"setState on unmounted component\" warnings. Guard your callbacks\n * accordingly when using onUnmount with flush.\n *\n * @example\n * ```tsx\n * // Basic async batcher for API requests - no reactive state subscriptions\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 }\n * );\n *\n * // Subscribe to state changes deep in component tree using Subscribe HOC\n * <asyncBatcher.Subscribe selector={(state) => ({ size: state.size })}>\n * {({ size }) => (\n * <div>Batch Size: {size}</div>\n * )}\n * </asyncBatcher.Subscribe>\n *\n * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 },\n * (state) => ({\n * isExecuting: state.isExecuting,\n * isPending: state.isPending,\n * status: state.status\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount,\n * totalItemsProcessed: state.totalItemsProcessed\n * })\n * );\n *\n * // Opt-in to re-render when error state changes (optimized for error handling)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * {\n * maxSize: 10,\n * wait: 2000,\n * onError: (error) => console.error('Batch processing failed:', error)\n * },\n * (state) => ({\n * errorCount: state.errorCount,\n * failedItems: state.failedItems,\n * totalItemsFailed: state.totalItemsFailed\n * })\n * );\n *\n * // Complete example with all callbacks\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * {\n * maxSize: 10,\n * wait: 2000,\n * onSuccess: (result) => {\n * console.log('Batch processed successfully:', result);\n * },\n * onError: (error) => {\n * console.error('Batch processing failed:', error);\n * }\n * }\n * );\n *\n * // Add items to batch\n * asyncBatcher.addItem(newItem);\n *\n * // Manually execute batch\n * const result = await asyncBatcher.execute();\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isExecuting, lastResult, size } = asyncBatcher.state;\n * ```\n */\nexport function useAsyncBatcher<TValue, TSelected = {}>(\n fn: (items: Array<TValue>) => Promise<any>,\n options: PreactAsyncBatcherOptions<TValue, TSelected> = {},\n selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>\n ({}) as TSelected,\n): PreactAsyncBatcher<TValue, TSelected> {\n const mergedOptions = {\n ...useDefaultPacerOptions().asyncBatcher,\n ...options,\n } as PreactAsyncBatcherOptions<TValue, TSelected>\n const [asyncBatcher] = useState(() => {\n const batcherInstance = new AsyncBatcher<TValue>(\n fn,\n mergedOptions,\n ) as unknown as PreactAsyncBatcher<TValue, TSelected>\n\n batcherInstance.Subscribe = function Subscribe<TSelected>(props: {\n selector: (state: AsyncBatcherState<TValue>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) {\n const selected = useSelector(batcherInstance.store, props.selector, {\n compare: shallow,\n })\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n }\n\n return batcherInstance\n })\n\n asyncBatcher.fn = fn\n asyncBatcher.setOptions(mergedOptions)\n\n /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */\n useEffect(() => {\n return () => {\n if (mergedOptions.onUnmount) {\n mergedOptions.onUnmount(asyncBatcher)\n } else {\n asyncBatcher.cancel()\n asyncBatcher.abort()\n }\n }\n }, [])\n /* eslint-enable react-hooks/exhaustive-deps */\n\n const state = useSelector(asyncBatcher.store, selector, { compare: shallow })\n\n return useMemo(\n () =>\n ({\n ...asyncBatcher,\n state,\n }) as PreactAsyncBatcher<TValue, TSelected>, // omit `store` in favor of `state`\n [asyncBatcher, state],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0OA,SAAgB,gBACd,IACA,UAAwD,EAAE,EAC1D,kBACG,EAAE,GACkC;CACvC,MAAM,gBAAgB;EACpB,GAAG,wBAAwB,CAAC;EAC5B,GAAG;EACJ;CACD,MAAM,CAAC,gBAAgB,eAAe;EACpC,MAAM,kBAAkB,IAAI,aAC1B,IACA,cACD;EAED,gBAAgB,YAAY,SAAS,UAAqB,OAGvD;GACD,MAAM,WAAW,YAAY,gBAAgB,OAAO,MAAM,UAAU,EAClE,SAAS,SACV,CAAC;GAEF,OAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM;;EAGZ,OAAO;GACP;CAEF,aAAa,KAAK;CAClB,aAAa,WAAW,cAAc;CAGtC,gBAAgB;EACd,aAAa;GACX,IAAI,cAAc,WAChB,cAAc,UAAU,aAAa;QAChC;IACL,aAAa,QAAQ;IACrB,aAAa,OAAO;;;IAGvB,EAAE,CAAC;CAGN,MAAM,QAAQ,YAAY,aAAa,OAAO,UAAU,EAAE,SAAS,SAAS,CAAC;CAE7E,OAAO,eAEF;EACC,GAAG;EACH;EACD,GACH,CAAC,cAAc,MAAM,CACtB"}
|
|
1
|
+
{"version":3,"file":"useAsyncBatcher.js","names":[],"sources":["../../src/async-batcher/useAsyncBatcher.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { AsyncBatcher } from '@tanstack/pacer/async-batcher'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { useDefaultPacerOptions } from '../provider/PacerProvider'\nimport type { Store } from '@tanstack/preact-store'\nimport type {\n AsyncBatcherOptions,\n AsyncBatcherState,\n} from '@tanstack/pacer/async-batcher'\nimport type { ComponentChildren } from 'preact'\n\nexport interface PreactAsyncBatcherOptions<\n TValue,\n TSelected = {},\n> extends AsyncBatcherOptions<TValue> {\n /**\n * Optional callback invoked when the component unmounts. Receives the batcher instance.\n * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.\n */\n onUnmount?: (batcher: PreactAsyncBatcher<TValue, TSelected>) => void\n}\n\nexport interface PreactAsyncBatcher<TValue, TSelected = {}> extends Omit<\n AsyncBatcher<TValue>,\n 'store'\n> {\n /**\n * A Preact HOC (Higher Order Component) that allows you to subscribe to the async batcher state.\n *\n * This is useful for opting into state re-renders for specific parts of the batcher state\n * deep in your component tree without needing to pass a selector to the hook.\n *\n * @example\n * <batcher.Subscribe selector={(state) => ({ size: state.size })}>\n * {({ size }) => (\n * <div>Batch Size: {size}</div>\n * )}\n * </batcher.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: AsyncBatcherState<TValue>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * Reactive state that will be updated and re-rendered when the batcher state changes\n *\n * Use this instead of `batcher.store.state`\n */\n readonly state: Readonly<TSelected>\n /**\n * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.\n * The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.\n * Although, you can make the state reactive by using the `useSelector` in your own usage.\n */\n readonly store: Store<Readonly<AsyncBatcherState<TValue>>>\n}\n\n/**\n * A Preact hook that creates an `AsyncBatcher` instance for managing asynchronous batches of items.\n *\n * This is the async version of the useBatcher hook. Unlike the sync version, this async batcher:\n * - Handles promises and returns results from batch executions\n * - Provides error handling with configurable error behavior\n * - Tracks success, error, and settle counts separately\n * - Has state tracking for when batches are executing\n * - Returns the result of the batch function execution\n *\n * Features:\n * - Configurable batch size and wait time\n * - Custom batch processing logic via getShouldExecute\n * - Event callbacks for monitoring batch operations\n * - Error handling for failed batch operations\n * - Automatic or manual batch processing\n *\n * The batcher collects items and processes them in batches based on:\n * - Maximum batch size (number of items per batch)\n * - Time-based batching (process after X milliseconds)\n * - Custom batch processing logic via getShouldExecute\n *\n * Error Handling:\n * - If an `onError` handler is provided, it will be called with the error and batcher instance\n * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown\n * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed\n * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown\n * - The error state can be checked using the underlying AsyncBatcher instance\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management. You can subscribe to state changes\n * in two ways:\n *\n * **1. Using `batcher.Subscribe` HOC (Recommended for component tree subscriptions)**\n *\n * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without\n * needing to pass a selector to the hook. This is ideal when you want to subscribe to state\n * in child components.\n *\n * **2. Using the `selector` parameter (For hook-level subscriptions)**\n *\n * The `selector` parameter allows you to specify which state changes will trigger a re-render\n * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant\n * state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary\n * re-renders and gives you full control over when your component updates.\n *\n * Available state properties:\n * - `errorCount`: Number of batch executions that have resulted in errors\n * - `failedItems`: Array of items that failed during batch processing\n * - `isEmpty`: Whether the batcher has no items to process\n * - `isExecuting`: Whether a batch is currently being processed asynchronously\n * - `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing\n * - `isRunning`: Whether the batcher is active and will process items automatically\n * - `items`: Array of items currently queued for batch processing\n * - `lastResult`: The result from the most recent batch execution\n * - `settleCount`: Number of batch executions that have completed (success or error)\n * - `size`: Number of items currently in the batch queue\n * - `status`: Current processing status ('idle' | 'pending' | 'executing' | 'populated')\n * - `successCount`: Number of batch executions that have completed successfully\n * - `totalItemsProcessed`: Total number of items processed across all batches\n * - `totalItemsFailed`: Total number of items that have failed processing\n *\n * ## Unmount behavior\n *\n * By default, the hook cancels any pending batch and aborts any in-flight execution when the component unmounts.\n * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```tsx\n * const batcher = useAsyncBatcher(fn, {\n * maxSize: 10,\n * wait: 2000,\n * onUnmount: (b) => b.flush()\n * });\n * ```\n *\n * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.\n * If your batch function updates Preact state, those updates may run after the component has\n * unmounted, which can cause \"setState on unmounted component\" warnings. Guard your callbacks\n * accordingly when using onUnmount with flush.\n *\n * @example\n * ```tsx\n * // Basic async batcher for API requests - no reactive state subscriptions\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 }\n * );\n *\n * // Subscribe to state changes deep in component tree using Subscribe HOC\n * <asyncBatcher.Subscribe selector={(state) => ({ size: state.size })}>\n * {({ size }) => (\n * <div>Batch Size: {size}</div>\n * )}\n * </asyncBatcher.Subscribe>\n *\n * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 },\n * (state) => ({\n * isExecuting: state.isExecuting,\n * isPending: state.isPending,\n * status: state.status\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * { maxSize: 10, wait: 2000 },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount,\n * totalItemsProcessed: state.totalItemsProcessed\n * })\n * );\n *\n * // Opt-in to re-render when error state changes (optimized for error handling)\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * {\n * maxSize: 10,\n * wait: 2000,\n * onError: (error) => console.error('Batch processing failed:', error)\n * },\n * (state) => ({\n * errorCount: state.errorCount,\n * failedItems: state.failedItems,\n * totalItemsFailed: state.totalItemsFailed\n * })\n * );\n *\n * // Complete example with all callbacks\n * const asyncBatcher = useAsyncBatcher(\n * async (items) => {\n * const results = await Promise.all(items.map(item => processItem(item)));\n * return results;\n * },\n * {\n * maxSize: 10,\n * wait: 2000,\n * onSuccess: (result) => {\n * console.log('Batch processed successfully:', result);\n * },\n * onError: (error) => {\n * console.error('Batch processing failed:', error);\n * }\n * }\n * );\n *\n * // Add items to batch\n * asyncBatcher.addItem(newItem);\n *\n * // Manually execute batch\n * const result = await asyncBatcher.execute();\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isExecuting, lastResult, size } = asyncBatcher.state;\n * ```\n */\nexport function useAsyncBatcher<TValue, TSelected = {}>(\n fn: (items: Array<TValue>) => Promise<any>,\n options: PreactAsyncBatcherOptions<TValue, TSelected> = {},\n selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>\n ({}) as TSelected,\n): PreactAsyncBatcher<TValue, TSelected> {\n const mergedOptions = {\n ...useDefaultPacerOptions().asyncBatcher,\n ...options,\n } as PreactAsyncBatcherOptions<TValue, TSelected>\n const [asyncBatcher] = useState(() => {\n const batcherInstance = new AsyncBatcher<TValue>(\n fn,\n mergedOptions,\n ) as unknown as PreactAsyncBatcher<TValue, TSelected>\n\n batcherInstance.Subscribe = function Subscribe<TSelected>(props: {\n selector: (state: AsyncBatcherState<TValue>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) {\n const selected = useSelector(batcherInstance.store, props.selector, {\n compare: shallow,\n })\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n }\n\n return batcherInstance\n })\n\n asyncBatcher.fn = fn\n asyncBatcher.setOptions(mergedOptions)\n\n /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */\n useEffect(() => {\n return () => {\n if (mergedOptions.onUnmount) {\n mergedOptions.onUnmount(asyncBatcher)\n } else {\n asyncBatcher.cancel()\n asyncBatcher.abort()\n }\n }\n }, [])\n /* eslint-enable react-hooks/exhaustive-deps */\n\n const state = useSelector(asyncBatcher.store, selector, { compare: shallow })\n\n return useMemo(\n () =>\n ({\n ...asyncBatcher,\n state,\n }) as PreactAsyncBatcher<TValue, TSelected>, // omit `store` in favor of `state`\n [asyncBatcher, state],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0OA,SAAgB,gBACd,IACA,UAAwD,CAAC,GACzD,kBACG,CAAC,IACmC;CACvC,MAAM,gBAAgB;EACpB,GAAG,uBAAuB,CAAC,CAAC;EAC5B,GAAG;CACL;CACA,MAAM,CAAC,gBAAgB,eAAe;EACpC,MAAM,kBAAkB,IAAI,aAC1B,IACA,aACF;EAEA,gBAAgB,YAAY,SAAS,UAAqB,OAGvD;GACD,MAAM,WAAW,YAAY,gBAAgB,OAAO,MAAM,UAAU,EAClE,SAAS,QACX,CAAC;GAED,OAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,QAAQ,IACvB,MAAM;EACZ;EAEA,OAAO;CACT,CAAC;CAED,aAAa,KAAK;CAClB,aAAa,WAAW,aAAa;CAGrC,gBAAgB;EACd,aAAa;GACX,IAAI,cAAc,WAChB,cAAc,UAAU,YAAY;QAC/B;IACL,aAAa,OAAO;IACpB,aAAa,MAAM;GACrB;EACF;CACF,GAAG,CAAC,CAAC;CAGL,MAAM,QAAQ,YAAY,aAAa,OAAO,UAAU,EAAE,SAAS,QAAQ,CAAC;CAE5E,OAAO,eAEF;EACC,GAAG;EACH;CACF,IACF,CAAC,cAAc,KAAK,CACtB;AACF"}
|
|
@@ -9,8 +9,10 @@ let preact_hooks = require("preact/hooks");
|
|
|
9
9
|
*
|
|
10
10
|
* The debounced async function will only execute after the specified wait time has elapsed
|
|
11
11
|
* since its last invocation. If called again before the wait time expires, the timer
|
|
12
|
-
* resets and starts waiting again. The returned function always returns a promise
|
|
13
|
-
* that resolves or rejects with
|
|
12
|
+
* resets and starts waiting again. The returned function always returns a promise. The call
|
|
13
|
+
* that triggers an execution resolves or rejects with that execution's result; superseded
|
|
14
|
+
* calls resolve with the most recent result (which may be `undefined` if nothing has executed
|
|
15
|
+
* yet), and calls made while the debouncer is disabled resolve with `undefined`.
|
|
14
16
|
*
|
|
15
17
|
* This hook provides a simpler API compared to `useAsyncDebouncer`, making it ideal for basic
|
|
16
18
|
* async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncDebouncedCallback.cjs","names":["useAsyncDebouncer"],"sources":["../../src/async-debouncer/useAsyncDebouncedCallback.ts"],"sourcesContent":["import { useCallback } from 'preact/hooks'\nimport { useAsyncDebouncer } from './useAsyncDebouncer'\nimport type { PreactAsyncDebouncerOptions } from './useAsyncDebouncer'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\n\n/**\n * A Preact hook that creates a debounced version of an async callback function.\n * This hook is a convenient wrapper around the `useAsyncDebouncer` hook,\n * providing a stable, debounced async function reference for use in Preact components.\n *\n * The debounced async function will only execute after the specified wait time has elapsed\n * since its last invocation. If called again before the wait time expires, the timer\n * resets and starts waiting again. The returned function always returns a promise\n * that resolves or rejects with the result
|
|
1
|
+
{"version":3,"file":"useAsyncDebouncedCallback.cjs","names":["useAsyncDebouncer","useCallback"],"sources":["../../src/async-debouncer/useAsyncDebouncedCallback.ts"],"sourcesContent":["import { useCallback } from 'preact/hooks'\nimport { useAsyncDebouncer } from './useAsyncDebouncer'\nimport type { PreactAsyncDebouncerOptions } from './useAsyncDebouncer'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\n\n/**\n * A Preact hook that creates a debounced version of an async callback function.\n * This hook is a convenient wrapper around the `useAsyncDebouncer` hook,\n * providing a stable, debounced async function reference for use in Preact components.\n *\n * The debounced async function will only execute after the specified wait time has elapsed\n * since its last invocation. If called again before the wait time expires, the timer\n * resets and starts waiting again. The returned function always returns a promise. The call\n * that triggers an execution resolves or rejects with that execution's result; superseded\n * calls resolve with the most recent result (which may be `undefined` if nothing has executed\n * yet), and calls made while the debouncer is disabled resolve with `undefined`.\n *\n * This hook provides a simpler API compared to `useAsyncDebouncer`, making it ideal for basic\n * async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.\n *\n * For advanced usage requiring features like:\n * - Manual cancellation\n * - Access to execution/error state\n * - Custom useCallback dependencies\n *\n * Consider using the `useAsyncDebouncer` hook instead.\n *\n *\n * @example\n * ```tsx\n * // Debounce an async search handler\n * const handleSearch = useAsyncDebouncedCallback(async (query: string) => {\n * const results = await fetchSearchResults(query);\n * return results;\n * }, {\n * wait: 500 // Wait 500ms between executions\n * });\n *\n * // Use in an input\n * <input\n * type=\"search\"\n * onChange={e => handleSearch(e.target.value)}\n * />\n * ```\n */\nexport function useAsyncDebouncedCallback<TFn extends AnyAsyncFunction>(\n fn: TFn,\n options: PreactAsyncDebouncerOptions<TFn, {}>,\n): (...args: Parameters<TFn>) => Promise<Awaited<ReturnType<TFn>> | undefined> {\n const asyncDebouncedFn = useAsyncDebouncer(fn, options).maybeExecute\n return useCallback(\n (...args: Parameters<TFn>) => asyncDebouncedFn(...args),\n [asyncDebouncedFn],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,0BACd,IACA,SAC6E;CAC7E,MAAM,mBAAmBA,4CAAkB,IAAI,OAAO,CAAC,CAAC;CACxD,WAAOC,2BACJ,GAAG,SAA0B,iBAAiB,GAAG,IAAI,GACtD,CAAC,gBAAgB,CACnB;AACF"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { PreactAsyncDebouncerOptions } from "./useAsyncDebouncer.cjs";
|
|
2
2
|
import { AnyAsyncFunction } from "@tanstack/pacer/types";
|
|
3
|
-
|
|
4
3
|
//#region src/async-debouncer/useAsyncDebouncedCallback.d.ts
|
|
5
4
|
/**
|
|
6
5
|
* A Preact hook that creates a debounced version of an async callback function.
|
|
@@ -9,8 +8,10 @@ import { AnyAsyncFunction } from "@tanstack/pacer/types";
|
|
|
9
8
|
*
|
|
10
9
|
* The debounced async function will only execute after the specified wait time has elapsed
|
|
11
10
|
* since its last invocation. If called again before the wait time expires, the timer
|
|
12
|
-
* resets and starts waiting again. The returned function always returns a promise
|
|
13
|
-
* that resolves or rejects with
|
|
11
|
+
* resets and starts waiting again. The returned function always returns a promise. The call
|
|
12
|
+
* that triggers an execution resolves or rejects with that execution's result; superseded
|
|
13
|
+
* calls resolve with the most recent result (which may be `undefined` if nothing has executed
|
|
14
|
+
* yet), and calls made while the debouncer is disabled resolve with `undefined`.
|
|
14
15
|
*
|
|
15
16
|
* This hook provides a simpler API compared to `useAsyncDebouncer`, making it ideal for basic
|
|
16
17
|
* async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.
|
|
@@ -40,7 +41,7 @@ import { AnyAsyncFunction } from "@tanstack/pacer/types";
|
|
|
40
41
|
* />
|
|
41
42
|
* ```
|
|
42
43
|
*/
|
|
43
|
-
declare function useAsyncDebouncedCallback<TFn extends AnyAsyncFunction>(fn: TFn, options: PreactAsyncDebouncerOptions<TFn, {}>): (...args: Parameters<TFn>) => Promise<ReturnType<TFn
|
|
44
|
+
declare function useAsyncDebouncedCallback<TFn extends AnyAsyncFunction>(fn: TFn, options: PreactAsyncDebouncerOptions<TFn, {}>): (...args: Parameters<TFn>) => Promise<Awaited<ReturnType<TFn>> | undefined>;
|
|
44
45
|
//#endregion
|
|
45
46
|
export { useAsyncDebouncedCallback };
|
|
46
47
|
//# sourceMappingURL=useAsyncDebouncedCallback.d.cts.map
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { PreactAsyncDebouncerOptions } from "./useAsyncDebouncer.js";
|
|
2
2
|
import { AnyAsyncFunction } from "@tanstack/pacer/types";
|
|
3
|
-
|
|
4
3
|
//#region src/async-debouncer/useAsyncDebouncedCallback.d.ts
|
|
5
4
|
/**
|
|
6
5
|
* A Preact hook that creates a debounced version of an async callback function.
|
|
@@ -9,8 +8,10 @@ import { AnyAsyncFunction } from "@tanstack/pacer/types";
|
|
|
9
8
|
*
|
|
10
9
|
* The debounced async function will only execute after the specified wait time has elapsed
|
|
11
10
|
* since its last invocation. If called again before the wait time expires, the timer
|
|
12
|
-
* resets and starts waiting again. The returned function always returns a promise
|
|
13
|
-
* that resolves or rejects with
|
|
11
|
+
* resets and starts waiting again. The returned function always returns a promise. The call
|
|
12
|
+
* that triggers an execution resolves or rejects with that execution's result; superseded
|
|
13
|
+
* calls resolve with the most recent result (which may be `undefined` if nothing has executed
|
|
14
|
+
* yet), and calls made while the debouncer is disabled resolve with `undefined`.
|
|
14
15
|
*
|
|
15
16
|
* This hook provides a simpler API compared to `useAsyncDebouncer`, making it ideal for basic
|
|
16
17
|
* async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.
|
|
@@ -40,7 +41,7 @@ import { AnyAsyncFunction } from "@tanstack/pacer/types";
|
|
|
40
41
|
* />
|
|
41
42
|
* ```
|
|
42
43
|
*/
|
|
43
|
-
declare function useAsyncDebouncedCallback<TFn extends AnyAsyncFunction>(fn: TFn, options: PreactAsyncDebouncerOptions<TFn, {}>): (...args: Parameters<TFn>) => Promise<ReturnType<TFn
|
|
44
|
+
declare function useAsyncDebouncedCallback<TFn extends AnyAsyncFunction>(fn: TFn, options: PreactAsyncDebouncerOptions<TFn, {}>): (...args: Parameters<TFn>) => Promise<Awaited<ReturnType<TFn>> | undefined>;
|
|
44
45
|
//#endregion
|
|
45
46
|
export { useAsyncDebouncedCallback };
|
|
46
47
|
//# sourceMappingURL=useAsyncDebouncedCallback.d.ts.map
|
|
@@ -9,8 +9,10 @@ import { useCallback } from "preact/hooks";
|
|
|
9
9
|
*
|
|
10
10
|
* The debounced async function will only execute after the specified wait time has elapsed
|
|
11
11
|
* since its last invocation. If called again before the wait time expires, the timer
|
|
12
|
-
* resets and starts waiting again. The returned function always returns a promise
|
|
13
|
-
* that resolves or rejects with
|
|
12
|
+
* resets and starts waiting again. The returned function always returns a promise. The call
|
|
13
|
+
* that triggers an execution resolves or rejects with that execution's result; superseded
|
|
14
|
+
* calls resolve with the most recent result (which may be `undefined` if nothing has executed
|
|
15
|
+
* yet), and calls made while the debouncer is disabled resolve with `undefined`.
|
|
14
16
|
*
|
|
15
17
|
* This hook provides a simpler API compared to `useAsyncDebouncer`, making it ideal for basic
|
|
16
18
|
* async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncDebouncedCallback.js","names":[],"sources":["../../src/async-debouncer/useAsyncDebouncedCallback.ts"],"sourcesContent":["import { useCallback } from 'preact/hooks'\nimport { useAsyncDebouncer } from './useAsyncDebouncer'\nimport type { PreactAsyncDebouncerOptions } from './useAsyncDebouncer'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\n\n/**\n * A Preact hook that creates a debounced version of an async callback function.\n * This hook is a convenient wrapper around the `useAsyncDebouncer` hook,\n * providing a stable, debounced async function reference for use in Preact components.\n *\n * The debounced async function will only execute after the specified wait time has elapsed\n * since its last invocation. If called again before the wait time expires, the timer\n * resets and starts waiting again. The returned function always returns a promise\n * that resolves or rejects with the result
|
|
1
|
+
{"version":3,"file":"useAsyncDebouncedCallback.js","names":[],"sources":["../../src/async-debouncer/useAsyncDebouncedCallback.ts"],"sourcesContent":["import { useCallback } from 'preact/hooks'\nimport { useAsyncDebouncer } from './useAsyncDebouncer'\nimport type { PreactAsyncDebouncerOptions } from './useAsyncDebouncer'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\n\n/**\n * A Preact hook that creates a debounced version of an async callback function.\n * This hook is a convenient wrapper around the `useAsyncDebouncer` hook,\n * providing a stable, debounced async function reference for use in Preact components.\n *\n * The debounced async function will only execute after the specified wait time has elapsed\n * since its last invocation. If called again before the wait time expires, the timer\n * resets and starts waiting again. The returned function always returns a promise. The call\n * that triggers an execution resolves or rejects with that execution's result; superseded\n * calls resolve with the most recent result (which may be `undefined` if nothing has executed\n * yet), and calls made while the debouncer is disabled resolve with `undefined`.\n *\n * This hook provides a simpler API compared to `useAsyncDebouncer`, making it ideal for basic\n * async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.\n *\n * For advanced usage requiring features like:\n * - Manual cancellation\n * - Access to execution/error state\n * - Custom useCallback dependencies\n *\n * Consider using the `useAsyncDebouncer` hook instead.\n *\n *\n * @example\n * ```tsx\n * // Debounce an async search handler\n * const handleSearch = useAsyncDebouncedCallback(async (query: string) => {\n * const results = await fetchSearchResults(query);\n * return results;\n * }, {\n * wait: 500 // Wait 500ms between executions\n * });\n *\n * // Use in an input\n * <input\n * type=\"search\"\n * onChange={e => handleSearch(e.target.value)}\n * />\n * ```\n */\nexport function useAsyncDebouncedCallback<TFn extends AnyAsyncFunction>(\n fn: TFn,\n options: PreactAsyncDebouncerOptions<TFn, {}>,\n): (...args: Parameters<TFn>) => Promise<Awaited<ReturnType<TFn>> | undefined> {\n const asyncDebouncedFn = useAsyncDebouncer(fn, options).maybeExecute\n return useCallback(\n (...args: Parameters<TFn>) => asyncDebouncedFn(...args),\n [asyncDebouncedFn],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,0BACd,IACA,SAC6E;CAC7E,MAAM,mBAAmB,kBAAkB,IAAI,OAAO,CAAC,CAAC;CACxD,OAAO,aACJ,GAAG,SAA0B,iBAAiB,GAAG,IAAI,GACtD,CAAC,gBAAgB,CACnB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncDebouncer.cjs","names":["useDefaultPacerOptions","AsyncDebouncer","shallow"],"sources":["../../src/async-debouncer/useAsyncDebouncer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { useDefaultPacerOptions } from '../provider/PacerProvider'\nimport type { Store } from '@tanstack/preact-store'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\nimport type {\n AsyncDebouncerOptions,\n AsyncDebouncerState,\n} from '@tanstack/pacer/async-debouncer'\nimport type { ComponentChildren } from 'preact'\n\nexport interface PreactAsyncDebouncerOptions<\n TFn extends AnyAsyncFunction,\n TSelected = {},\n> extends AsyncDebouncerOptions<TFn> {\n /**\n * Optional callback invoked when the component unmounts. Receives the debouncer instance.\n * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.\n */\n onUnmount?: (debouncer: PreactAsyncDebouncer<TFn, TSelected>) => void\n}\n\nexport interface PreactAsyncDebouncer<\n TFn extends AnyAsyncFunction,\n TSelected = {},\n> extends Omit<AsyncDebouncer<TFn>, 'store'> {\n /**\n * A Preact HOC (Higher Order Component) that allows you to subscribe to the async debouncer state.\n *\n * This is useful for opting into state re-renders for specific parts of the debouncer state\n * deep in your component tree without needing to pass a selector to the hook.\n *\n * @example\n * <debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>\n * {({ isPending }) => (\n * <div>{isPending ? 'Loading...' : 'Ready'}</div>\n * )}\n * </debouncer.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: AsyncDebouncerState<TFn>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * Reactive state that will be updated and re-rendered when the debouncer state changes\n *\n * Use this instead of `debouncer.store.state`\n */\n readonly state: Readonly<TSelected>\n /**\n * @deprecated Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.\n * The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.\n * Although, you can make the state reactive by using the `useSelector` in your own usage.\n */\n readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>\n}\n\n/**\n * A low-level Preact hook that creates an `AsyncDebouncer` instance to delay execution of an async function.\n *\n * This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that\n * you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).\n *\n * Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation.\n * Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing\n * or input changes where you only want to execute the handler after the events have stopped occurring.\n *\n * Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until\n * the function stops being called for the specified delay period.\n *\n * Unlike the non-async Debouncer, this async version supports returning values from the debounced function,\n * making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call\n * instead of setting the result on a state variable from within the debounced function.\n *\n * Error Handling:\n * - If an `onError` handler is provided, it will be called with the error and debouncer instance\n * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown\n * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed\n * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown\n * - The error state can be checked using the underlying AsyncDebouncer instance\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management. You can subscribe to state changes\n * in two ways:\n *\n * **1. Using `debouncer.Subscribe` HOC (Recommended for component tree subscriptions)**\n *\n * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without\n * needing to pass a selector to the hook. This is ideal when you want to subscribe to state\n * in child components.\n *\n * **2. Using the `selector` parameter (For hook-level subscriptions)**\n *\n * The `selector` parameter allows you to specify which state changes will trigger a re-render\n * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant\n * state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary\n * re-renders and gives you full control over when your component updates.\n *\n * Available state properties:\n * - `canLeadingExecute`: Whether the debouncer can execute on the leading edge\n * - `errorCount`: Number of function executions that have resulted in errors\n * - `isExecuting`: Whether the debounced function is currently executing asynchronously\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastResult`: The result from the most recent successful function execution\n * - `settleCount`: Number of function executions that have completed (success or error)\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')\n * - `successCount`: Number of function executions that have completed successfully\n *\n * ## Unmount behavior\n *\n * By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.\n * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```tsx\n * const debouncer = useAsyncDebouncer(fn, {\n * wait: 500,\n * onUnmount: (d) => d.flush()\n * });\n * ```\n *\n * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.\n * If your debounced function updates Preact state, those updates may run after the component has\n * unmounted, which can cause \"setState on unmounted component\" warnings. Guard your callbacks\n * accordingly when using onUnmount with flush.\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 }\n * );\n *\n * // Subscribe to state changes deep in component tree using Subscribe HOC\n * <searchDebouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>\n * {({ isPending }) => (\n * <div>{isPending ? 'Searching...' : 'Ready'}</div>\n * )}\n * </searchDebouncer.Subscribe>\n *\n * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 },\n * (state) => ({\n * isExecuting: state.isExecuting,\n * isPending: state.isPending\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount\n * })\n * );\n *\n * // Opt-in to re-render when error state changes (optimized for error handling)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * {\n * wait: 500,\n * onError: (error) => console.error('Search failed:', error)\n * },\n * (state) => ({\n * errorCount: state.errorCount,\n * status: state.status\n * })\n * );\n *\n * // With state management\n * const [results, setResults] = useState([]);\n * const { maybeExecute, state } = useAsyncDebouncer(\n * async (searchTerm) => {\n * const data = await searchAPI(searchTerm);\n * setResults(data);\n * },\n * {\n * wait: 300,\n * leading: true, // Execute immediately on first call\n * trailing: false, // Skip trailing edge updates\n * onError: (error) => {\n * console.error('API call failed:', error);\n * }\n * }\n * );\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isExecuting, lastResult } = state;\n * ```\n */\nexport function useAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}>(\n fn: TFn,\n options: PreactAsyncDebouncerOptions<TFn, TSelected>,\n selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>\n ({}) as TSelected,\n): PreactAsyncDebouncer<TFn, TSelected> {\n const mergedOptions = {\n ...useDefaultPacerOptions().asyncDebouncer,\n ...options,\n } as PreactAsyncDebouncerOptions<TFn, TSelected>\n const [asyncDebouncer] = useState(() => {\n const debouncerInstance = new AsyncDebouncer<TFn>(\n fn,\n mergedOptions,\n ) as unknown as PreactAsyncDebouncer<TFn, TSelected>\n\n debouncerInstance.Subscribe = function Subscribe<TSelected>(props: {\n selector: (state: AsyncDebouncerState<TFn>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) {\n const selected = useSelector(debouncerInstance.store, props.selector, {\n compare: shallow,\n })\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n }\n\n return debouncerInstance\n })\n\n asyncDebouncer.fn = fn\n asyncDebouncer.setOptions(mergedOptions)\n\n const state = useSelector(asyncDebouncer.store, selector, {\n compare: shallow,\n })\n\n /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */\n useEffect(() => {\n return () => {\n if (mergedOptions.onUnmount) {\n mergedOptions.onUnmount(asyncDebouncer)\n } else {\n asyncDebouncer.cancel()\n asyncDebouncer.abort()\n }\n }\n }, [])\n /* eslint-enable react-hooks/exhaustive-deps */\n\n return useMemo(\n () =>\n ({\n ...asyncDebouncer,\n state,\n }) as PreactAsyncDebouncer<TFn, TSelected>, // omit `store` in favor of `state`\n [asyncDebouncer, state],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqNA,SAAgB,kBACd,IACA,SACA,kBACG,EAAE,GACiC;CACtC,MAAM,gBAAgB;EACpB,GAAGA,8CAAwB,CAAC;EAC5B,GAAG;EACJ;CACD,MAAM,CAAC,mDAAiC;EACtC,MAAM,oBAAoB,IAAIC,+CAC5B,IACA,cACD;EAED,kBAAkB,YAAY,SAAS,UAAqB,OAGzD;GACD,MAAM,mDAAuB,kBAAkB,OAAO,MAAM,UAAU,EACpE,SAASC,gCACV,CAAC;GAEF,OAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM;;EAGZ,OAAO;GACP;CAEF,eAAe,KAAK;CACpB,eAAe,WAAW,cAAc;CAExC,MAAM,gDAAoB,eAAe,OAAO,UAAU,EACxD,SAASA,gCACV,CAAC;CAGF,kCAAgB;EACd,aAAa;GACX,IAAI,cAAc,WAChB,cAAc,UAAU,eAAe;QAClC;IACL,eAAe,QAAQ;IACvB,eAAe,OAAO;;;IAGzB,EAAE,CAAC;CAGN,wCAEK;EACC,GAAG;EACH;EACD,GACH,CAAC,gBAAgB,MAAM,CACxB"}
|
|
1
|
+
{"version":3,"file":"useAsyncDebouncer.cjs","names":["useDefaultPacerOptions","useState","AsyncDebouncer","useSelector","shallow","useMemo"],"sources":["../../src/async-debouncer/useAsyncDebouncer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { useDefaultPacerOptions } from '../provider/PacerProvider'\nimport type { Store } from '@tanstack/preact-store'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\nimport type {\n AsyncDebouncerOptions,\n AsyncDebouncerState,\n} from '@tanstack/pacer/async-debouncer'\nimport type { ComponentChildren } from 'preact'\n\nexport interface PreactAsyncDebouncerOptions<\n TFn extends AnyAsyncFunction,\n TSelected = {},\n> extends AsyncDebouncerOptions<TFn> {\n /**\n * Optional callback invoked when the component unmounts. Receives the debouncer instance.\n * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.\n */\n onUnmount?: (debouncer: PreactAsyncDebouncer<TFn, TSelected>) => void\n}\n\nexport interface PreactAsyncDebouncer<\n TFn extends AnyAsyncFunction,\n TSelected = {},\n> extends Omit<AsyncDebouncer<TFn>, 'store'> {\n /**\n * A Preact HOC (Higher Order Component) that allows you to subscribe to the async debouncer state.\n *\n * This is useful for opting into state re-renders for specific parts of the debouncer state\n * deep in your component tree without needing to pass a selector to the hook.\n *\n * @example\n * <debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>\n * {({ isPending }) => (\n * <div>{isPending ? 'Loading...' : 'Ready'}</div>\n * )}\n * </debouncer.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: AsyncDebouncerState<TFn>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * Reactive state that will be updated and re-rendered when the debouncer state changes\n *\n * Use this instead of `debouncer.store.state`\n */\n readonly state: Readonly<TSelected>\n /**\n * @deprecated Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.\n * The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.\n * Although, you can make the state reactive by using the `useSelector` in your own usage.\n */\n readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>\n}\n\n/**\n * A low-level Preact hook that creates an `AsyncDebouncer` instance to delay execution of an async function.\n *\n * This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that\n * you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).\n *\n * Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation.\n * Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing\n * or input changes where you only want to execute the handler after the events have stopped occurring.\n *\n * Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until\n * the function stops being called for the specified delay period.\n *\n * Unlike the non-async Debouncer, this async version supports returning values from the debounced function,\n * making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call\n * instead of setting the result on a state variable from within the debounced function.\n *\n * Error Handling:\n * - If an `onError` handler is provided, it will be called with the error and debouncer instance\n * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown\n * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed\n * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown\n * - The error state can be checked using the underlying AsyncDebouncer instance\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management. You can subscribe to state changes\n * in two ways:\n *\n * **1. Using `debouncer.Subscribe` HOC (Recommended for component tree subscriptions)**\n *\n * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without\n * needing to pass a selector to the hook. This is ideal when you want to subscribe to state\n * in child components.\n *\n * **2. Using the `selector` parameter (For hook-level subscriptions)**\n *\n * The `selector` parameter allows you to specify which state changes will trigger a re-render\n * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant\n * state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary\n * re-renders and gives you full control over when your component updates.\n *\n * Available state properties:\n * - `canLeadingExecute`: Whether the debouncer can execute on the leading edge\n * - `errorCount`: Number of function executions that have resulted in errors\n * - `isExecuting`: Whether the debounced function is currently executing asynchronously\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastResult`: The result from the most recent successful function execution\n * - `settleCount`: Number of function executions that have completed (success or error)\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')\n * - `successCount`: Number of function executions that have completed successfully\n *\n * ## Unmount behavior\n *\n * By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.\n * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```tsx\n * const debouncer = useAsyncDebouncer(fn, {\n * wait: 500,\n * onUnmount: (d) => d.flush()\n * });\n * ```\n *\n * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.\n * If your debounced function updates Preact state, those updates may run after the component has\n * unmounted, which can cause \"setState on unmounted component\" warnings. Guard your callbacks\n * accordingly when using onUnmount with flush.\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 }\n * );\n *\n * // Subscribe to state changes deep in component tree using Subscribe HOC\n * <searchDebouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>\n * {({ isPending }) => (\n * <div>{isPending ? 'Searching...' : 'Ready'}</div>\n * )}\n * </searchDebouncer.Subscribe>\n *\n * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 },\n * (state) => ({\n * isExecuting: state.isExecuting,\n * isPending: state.isPending\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount\n * })\n * );\n *\n * // Opt-in to re-render when error state changes (optimized for error handling)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * {\n * wait: 500,\n * onError: (error) => console.error('Search failed:', error)\n * },\n * (state) => ({\n * errorCount: state.errorCount,\n * status: state.status\n * })\n * );\n *\n * // With state management\n * const [results, setResults] = useState([]);\n * const { maybeExecute, state } = useAsyncDebouncer(\n * async (searchTerm) => {\n * const data = await searchAPI(searchTerm);\n * setResults(data);\n * },\n * {\n * wait: 300,\n * leading: true, // Execute immediately on first call\n * trailing: false, // Skip trailing edge updates\n * onError: (error) => {\n * console.error('API call failed:', error);\n * }\n * }\n * );\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isExecuting, lastResult } = state;\n * ```\n */\nexport function useAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}>(\n fn: TFn,\n options: PreactAsyncDebouncerOptions<TFn, TSelected>,\n selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>\n ({}) as TSelected,\n): PreactAsyncDebouncer<TFn, TSelected> {\n const mergedOptions = {\n ...useDefaultPacerOptions().asyncDebouncer,\n ...options,\n } as PreactAsyncDebouncerOptions<TFn, TSelected>\n const [asyncDebouncer] = useState(() => {\n const debouncerInstance = new AsyncDebouncer<TFn>(\n fn,\n mergedOptions,\n ) as unknown as PreactAsyncDebouncer<TFn, TSelected>\n\n debouncerInstance.Subscribe = function Subscribe<TSelected>(props: {\n selector: (state: AsyncDebouncerState<TFn>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) {\n const selected = useSelector(debouncerInstance.store, props.selector, {\n compare: shallow,\n })\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n }\n\n return debouncerInstance\n })\n\n asyncDebouncer.fn = fn\n asyncDebouncer.setOptions(mergedOptions)\n\n const state = useSelector(asyncDebouncer.store, selector, {\n compare: shallow,\n })\n\n /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */\n useEffect(() => {\n return () => {\n if (mergedOptions.onUnmount) {\n mergedOptions.onUnmount(asyncDebouncer)\n } else {\n asyncDebouncer.cancel()\n asyncDebouncer.abort()\n }\n }\n }, [])\n /* eslint-enable react-hooks/exhaustive-deps */\n\n return useMemo(\n () =>\n ({\n ...asyncDebouncer,\n state,\n }) as PreactAsyncDebouncer<TFn, TSelected>, // omit `store` in favor of `state`\n [asyncDebouncer, state],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqNA,SAAgB,kBACd,IACA,SACA,kBACG,CAAC,IACkC;CACtC,MAAM,gBAAgB;EACpB,GAAGA,6CAAuB,CAAC,CAAC;EAC5B,GAAG;CACL;CACA,MAAM,CAAC,sBAAkBC,6BAAe;EACtC,MAAM,oBAAoB,IAAIC,+CAC5B,IACA,aACF;EAEA,kBAAkB,YAAY,SAAS,UAAqB,OAGzD;GACD,MAAM,eAAWC,oCAAY,kBAAkB,OAAO,MAAM,UAAU,EACpE,SAASC,+BACX,CAAC;GAED,OAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,QAAQ,IACvB,MAAM;EACZ;EAEA,OAAO;CACT,CAAC;CAED,eAAe,KAAK;CACpB,eAAe,WAAW,aAAa;CAEvC,MAAM,YAAQD,oCAAY,eAAe,OAAO,UAAU,EACxD,SAASC,+BACX,CAAC;CAGD,kCAAgB;EACd,aAAa;GACX,IAAI,cAAc,WAChB,cAAc,UAAU,cAAc;QACjC;IACL,eAAe,OAAO;IACtB,eAAe,MAAM;GACvB;EACF;CACF,GAAG,CAAC,CAAC;CAGL,WAAOC,6BAEF;EACC,GAAG;EACH;CACF,IACF,CAAC,gBAAgB,KAAK,CACxB;AACF"}
|
|
@@ -2,7 +2,6 @@ import { Store } from "@tanstack/preact-store";
|
|
|
2
2
|
import { ComponentChildren } from "preact";
|
|
3
3
|
import { AsyncDebouncer, AsyncDebouncerOptions, AsyncDebouncerState } from "@tanstack/pacer/async-debouncer";
|
|
4
4
|
import { AnyAsyncFunction } from "@tanstack/pacer/types";
|
|
5
|
-
|
|
6
5
|
//#region src/async-debouncer/useAsyncDebouncer.d.ts
|
|
7
6
|
interface PreactAsyncDebouncerOptions<TFn extends AnyAsyncFunction, TSelected = {}> extends AsyncDebouncerOptions<TFn> {
|
|
8
7
|
/**
|
|
@@ -2,7 +2,6 @@ import { ComponentChildren } from "preact";
|
|
|
2
2
|
import { Store } from "@tanstack/preact-store";
|
|
3
3
|
import { AsyncDebouncer, AsyncDebouncerOptions, AsyncDebouncerState } from "@tanstack/pacer/async-debouncer";
|
|
4
4
|
import { AnyAsyncFunction } from "@tanstack/pacer/types";
|
|
5
|
-
|
|
6
5
|
//#region src/async-debouncer/useAsyncDebouncer.d.ts
|
|
7
6
|
interface PreactAsyncDebouncerOptions<TFn extends AnyAsyncFunction, TSelected = {}> extends AsyncDebouncerOptions<TFn> {
|
|
8
7
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncDebouncer.js","names":[],"sources":["../../src/async-debouncer/useAsyncDebouncer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { useDefaultPacerOptions } from '../provider/PacerProvider'\nimport type { Store } from '@tanstack/preact-store'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\nimport type {\n AsyncDebouncerOptions,\n AsyncDebouncerState,\n} from '@tanstack/pacer/async-debouncer'\nimport type { ComponentChildren } from 'preact'\n\nexport interface PreactAsyncDebouncerOptions<\n TFn extends AnyAsyncFunction,\n TSelected = {},\n> extends AsyncDebouncerOptions<TFn> {\n /**\n * Optional callback invoked when the component unmounts. Receives the debouncer instance.\n * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.\n */\n onUnmount?: (debouncer: PreactAsyncDebouncer<TFn, TSelected>) => void\n}\n\nexport interface PreactAsyncDebouncer<\n TFn extends AnyAsyncFunction,\n TSelected = {},\n> extends Omit<AsyncDebouncer<TFn>, 'store'> {\n /**\n * A Preact HOC (Higher Order Component) that allows you to subscribe to the async debouncer state.\n *\n * This is useful for opting into state re-renders for specific parts of the debouncer state\n * deep in your component tree without needing to pass a selector to the hook.\n *\n * @example\n * <debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>\n * {({ isPending }) => (\n * <div>{isPending ? 'Loading...' : 'Ready'}</div>\n * )}\n * </debouncer.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: AsyncDebouncerState<TFn>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * Reactive state that will be updated and re-rendered when the debouncer state changes\n *\n * Use this instead of `debouncer.store.state`\n */\n readonly state: Readonly<TSelected>\n /**\n * @deprecated Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.\n * The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.\n * Although, you can make the state reactive by using the `useSelector` in your own usage.\n */\n readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>\n}\n\n/**\n * A low-level Preact hook that creates an `AsyncDebouncer` instance to delay execution of an async function.\n *\n * This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that\n * you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).\n *\n * Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation.\n * Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing\n * or input changes where you only want to execute the handler after the events have stopped occurring.\n *\n * Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until\n * the function stops being called for the specified delay period.\n *\n * Unlike the non-async Debouncer, this async version supports returning values from the debounced function,\n * making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call\n * instead of setting the result on a state variable from within the debounced function.\n *\n * Error Handling:\n * - If an `onError` handler is provided, it will be called with the error and debouncer instance\n * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown\n * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed\n * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown\n * - The error state can be checked using the underlying AsyncDebouncer instance\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management. You can subscribe to state changes\n * in two ways:\n *\n * **1. Using `debouncer.Subscribe` HOC (Recommended for component tree subscriptions)**\n *\n * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without\n * needing to pass a selector to the hook. This is ideal when you want to subscribe to state\n * in child components.\n *\n * **2. Using the `selector` parameter (For hook-level subscriptions)**\n *\n * The `selector` parameter allows you to specify which state changes will trigger a re-render\n * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant\n * state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary\n * re-renders and gives you full control over when your component updates.\n *\n * Available state properties:\n * - `canLeadingExecute`: Whether the debouncer can execute on the leading edge\n * - `errorCount`: Number of function executions that have resulted in errors\n * - `isExecuting`: Whether the debounced function is currently executing asynchronously\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastResult`: The result from the most recent successful function execution\n * - `settleCount`: Number of function executions that have completed (success or error)\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')\n * - `successCount`: Number of function executions that have completed successfully\n *\n * ## Unmount behavior\n *\n * By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.\n * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```tsx\n * const debouncer = useAsyncDebouncer(fn, {\n * wait: 500,\n * onUnmount: (d) => d.flush()\n * });\n * ```\n *\n * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.\n * If your debounced function updates Preact state, those updates may run after the component has\n * unmounted, which can cause \"setState on unmounted component\" warnings. Guard your callbacks\n * accordingly when using onUnmount with flush.\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 }\n * );\n *\n * // Subscribe to state changes deep in component tree using Subscribe HOC\n * <searchDebouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>\n * {({ isPending }) => (\n * <div>{isPending ? 'Searching...' : 'Ready'}</div>\n * )}\n * </searchDebouncer.Subscribe>\n *\n * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 },\n * (state) => ({\n * isExecuting: state.isExecuting,\n * isPending: state.isPending\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount\n * })\n * );\n *\n * // Opt-in to re-render when error state changes (optimized for error handling)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * {\n * wait: 500,\n * onError: (error) => console.error('Search failed:', error)\n * },\n * (state) => ({\n * errorCount: state.errorCount,\n * status: state.status\n * })\n * );\n *\n * // With state management\n * const [results, setResults] = useState([]);\n * const { maybeExecute, state } = useAsyncDebouncer(\n * async (searchTerm) => {\n * const data = await searchAPI(searchTerm);\n * setResults(data);\n * },\n * {\n * wait: 300,\n * leading: true, // Execute immediately on first call\n * trailing: false, // Skip trailing edge updates\n * onError: (error) => {\n * console.error('API call failed:', error);\n * }\n * }\n * );\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isExecuting, lastResult } = state;\n * ```\n */\nexport function useAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}>(\n fn: TFn,\n options: PreactAsyncDebouncerOptions<TFn, TSelected>,\n selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>\n ({}) as TSelected,\n): PreactAsyncDebouncer<TFn, TSelected> {\n const mergedOptions = {\n ...useDefaultPacerOptions().asyncDebouncer,\n ...options,\n } as PreactAsyncDebouncerOptions<TFn, TSelected>\n const [asyncDebouncer] = useState(() => {\n const debouncerInstance = new AsyncDebouncer<TFn>(\n fn,\n mergedOptions,\n ) as unknown as PreactAsyncDebouncer<TFn, TSelected>\n\n debouncerInstance.Subscribe = function Subscribe<TSelected>(props: {\n selector: (state: AsyncDebouncerState<TFn>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) {\n const selected = useSelector(debouncerInstance.store, props.selector, {\n compare: shallow,\n })\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n }\n\n return debouncerInstance\n })\n\n asyncDebouncer.fn = fn\n asyncDebouncer.setOptions(mergedOptions)\n\n const state = useSelector(asyncDebouncer.store, selector, {\n compare: shallow,\n })\n\n /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */\n useEffect(() => {\n return () => {\n if (mergedOptions.onUnmount) {\n mergedOptions.onUnmount(asyncDebouncer)\n } else {\n asyncDebouncer.cancel()\n asyncDebouncer.abort()\n }\n }\n }, [])\n /* eslint-enable react-hooks/exhaustive-deps */\n\n return useMemo(\n () =>\n ({\n ...asyncDebouncer,\n state,\n }) as PreactAsyncDebouncer<TFn, TSelected>, // omit `store` in favor of `state`\n [asyncDebouncer, state],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqNA,SAAgB,kBACd,IACA,SACA,kBACG,EAAE,GACiC;CACtC,MAAM,gBAAgB;EACpB,GAAG,wBAAwB,CAAC;EAC5B,GAAG;EACJ;CACD,MAAM,CAAC,kBAAkB,eAAe;EACtC,MAAM,oBAAoB,IAAI,eAC5B,IACA,cACD;EAED,kBAAkB,YAAY,SAAS,UAAqB,OAGzD;GACD,MAAM,WAAW,YAAY,kBAAkB,OAAO,MAAM,UAAU,EACpE,SAAS,SACV,CAAC;GAEF,OAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM;;EAGZ,OAAO;GACP;CAEF,eAAe,KAAK;CACpB,eAAe,WAAW,cAAc;CAExC,MAAM,QAAQ,YAAY,eAAe,OAAO,UAAU,EACxD,SAAS,SACV,CAAC;CAGF,gBAAgB;EACd,aAAa;GACX,IAAI,cAAc,WAChB,cAAc,UAAU,eAAe;QAClC;IACL,eAAe,QAAQ;IACvB,eAAe,OAAO;;;IAGzB,EAAE,CAAC;CAGN,OAAO,eAEF;EACC,GAAG;EACH;EACD,GACH,CAAC,gBAAgB,MAAM,CACxB"}
|
|
1
|
+
{"version":3,"file":"useAsyncDebouncer.js","names":[],"sources":["../../src/async-debouncer/useAsyncDebouncer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { useDefaultPacerOptions } from '../provider/PacerProvider'\nimport type { Store } from '@tanstack/preact-store'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\nimport type {\n AsyncDebouncerOptions,\n AsyncDebouncerState,\n} from '@tanstack/pacer/async-debouncer'\nimport type { ComponentChildren } from 'preact'\n\nexport interface PreactAsyncDebouncerOptions<\n TFn extends AnyAsyncFunction,\n TSelected = {},\n> extends AsyncDebouncerOptions<TFn> {\n /**\n * Optional callback invoked when the component unmounts. Receives the debouncer instance.\n * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.\n */\n onUnmount?: (debouncer: PreactAsyncDebouncer<TFn, TSelected>) => void\n}\n\nexport interface PreactAsyncDebouncer<\n TFn extends AnyAsyncFunction,\n TSelected = {},\n> extends Omit<AsyncDebouncer<TFn>, 'store'> {\n /**\n * A Preact HOC (Higher Order Component) that allows you to subscribe to the async debouncer state.\n *\n * This is useful for opting into state re-renders for specific parts of the debouncer state\n * deep in your component tree without needing to pass a selector to the hook.\n *\n * @example\n * <debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>\n * {({ isPending }) => (\n * <div>{isPending ? 'Loading...' : 'Ready'}</div>\n * )}\n * </debouncer.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: AsyncDebouncerState<TFn>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * Reactive state that will be updated and re-rendered when the debouncer state changes\n *\n * Use this instead of `debouncer.store.state`\n */\n readonly state: Readonly<TSelected>\n /**\n * @deprecated Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.\n * The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.\n * Although, you can make the state reactive by using the `useSelector` in your own usage.\n */\n readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>\n}\n\n/**\n * A low-level Preact hook that creates an `AsyncDebouncer` instance to delay execution of an async function.\n *\n * This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that\n * you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).\n *\n * Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation.\n * Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing\n * or input changes where you only want to execute the handler after the events have stopped occurring.\n *\n * Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until\n * the function stops being called for the specified delay period.\n *\n * Unlike the non-async Debouncer, this async version supports returning values from the debounced function,\n * making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call\n * instead of setting the result on a state variable from within the debounced function.\n *\n * Error Handling:\n * - If an `onError` handler is provided, it will be called with the error and debouncer instance\n * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown\n * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed\n * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown\n * - The error state can be checked using the underlying AsyncDebouncer instance\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management. You can subscribe to state changes\n * in two ways:\n *\n * **1. Using `debouncer.Subscribe` HOC (Recommended for component tree subscriptions)**\n *\n * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without\n * needing to pass a selector to the hook. This is ideal when you want to subscribe to state\n * in child components.\n *\n * **2. Using the `selector` parameter (For hook-level subscriptions)**\n *\n * The `selector` parameter allows you to specify which state changes will trigger a re-render\n * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant\n * state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary\n * re-renders and gives you full control over when your component updates.\n *\n * Available state properties:\n * - `canLeadingExecute`: Whether the debouncer can execute on the leading edge\n * - `errorCount`: Number of function executions that have resulted in errors\n * - `isExecuting`: Whether the debounced function is currently executing asynchronously\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastResult`: The result from the most recent successful function execution\n * - `settleCount`: Number of function executions that have completed (success or error)\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')\n * - `successCount`: Number of function executions that have completed successfully\n *\n * ## Unmount behavior\n *\n * By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.\n * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```tsx\n * const debouncer = useAsyncDebouncer(fn, {\n * wait: 500,\n * onUnmount: (d) => d.flush()\n * });\n * ```\n *\n * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.\n * If your debounced function updates Preact state, those updates may run after the component has\n * unmounted, which can cause \"setState on unmounted component\" warnings. Guard your callbacks\n * accordingly when using onUnmount with flush.\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 }\n * );\n *\n * // Subscribe to state changes deep in component tree using Subscribe HOC\n * <searchDebouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>\n * {({ isPending }) => (\n * <div>{isPending ? 'Searching...' : 'Ready'}</div>\n * )}\n * </searchDebouncer.Subscribe>\n *\n * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 },\n * (state) => ({\n * isExecuting: state.isExecuting,\n * isPending: state.isPending\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * { wait: 500 },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount\n * })\n * );\n *\n * // Opt-in to re-render when error state changes (optimized for error handling)\n * const searchDebouncer = useAsyncDebouncer(\n * async (query: string) => {\n * const results = await api.search(query);\n * return results;\n * },\n * {\n * wait: 500,\n * onError: (error) => console.error('Search failed:', error)\n * },\n * (state) => ({\n * errorCount: state.errorCount,\n * status: state.status\n * })\n * );\n *\n * // With state management\n * const [results, setResults] = useState([]);\n * const { maybeExecute, state } = useAsyncDebouncer(\n * async (searchTerm) => {\n * const data = await searchAPI(searchTerm);\n * setResults(data);\n * },\n * {\n * wait: 300,\n * leading: true, // Execute immediately on first call\n * trailing: false, // Skip trailing edge updates\n * onError: (error) => {\n * console.error('API call failed:', error);\n * }\n * }\n * );\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isExecuting, lastResult } = state;\n * ```\n */\nexport function useAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}>(\n fn: TFn,\n options: PreactAsyncDebouncerOptions<TFn, TSelected>,\n selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>\n ({}) as TSelected,\n): PreactAsyncDebouncer<TFn, TSelected> {\n const mergedOptions = {\n ...useDefaultPacerOptions().asyncDebouncer,\n ...options,\n } as PreactAsyncDebouncerOptions<TFn, TSelected>\n const [asyncDebouncer] = useState(() => {\n const debouncerInstance = new AsyncDebouncer<TFn>(\n fn,\n mergedOptions,\n ) as unknown as PreactAsyncDebouncer<TFn, TSelected>\n\n debouncerInstance.Subscribe = function Subscribe<TSelected>(props: {\n selector: (state: AsyncDebouncerState<TFn>) => TSelected\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n }) {\n const selected = useSelector(debouncerInstance.store, props.selector, {\n compare: shallow,\n })\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n }\n\n return debouncerInstance\n })\n\n asyncDebouncer.fn = fn\n asyncDebouncer.setOptions(mergedOptions)\n\n const state = useSelector(asyncDebouncer.store, selector, {\n compare: shallow,\n })\n\n /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */\n useEffect(() => {\n return () => {\n if (mergedOptions.onUnmount) {\n mergedOptions.onUnmount(asyncDebouncer)\n } else {\n asyncDebouncer.cancel()\n asyncDebouncer.abort()\n }\n }\n }, [])\n /* eslint-enable react-hooks/exhaustive-deps */\n\n return useMemo(\n () =>\n ({\n ...asyncDebouncer,\n state,\n }) as PreactAsyncDebouncer<TFn, TSelected>, // omit `store` in favor of `state`\n [asyncDebouncer, state],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqNA,SAAgB,kBACd,IACA,SACA,kBACG,CAAC,IACkC;CACtC,MAAM,gBAAgB;EACpB,GAAG,uBAAuB,CAAC,CAAC;EAC5B,GAAG;CACL;CACA,MAAM,CAAC,kBAAkB,eAAe;EACtC,MAAM,oBAAoB,IAAI,eAC5B,IACA,aACF;EAEA,kBAAkB,YAAY,SAAS,UAAqB,OAGzD;GACD,MAAM,WAAW,YAAY,kBAAkB,OAAO,MAAM,UAAU,EACpE,SAAS,QACX,CAAC;GAED,OAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,QAAQ,IACvB,MAAM;EACZ;EAEA,OAAO;CACT,CAAC;CAED,eAAe,KAAK;CACpB,eAAe,WAAW,aAAa;CAEvC,MAAM,QAAQ,YAAY,eAAe,OAAO,UAAU,EACxD,SAAS,QACX,CAAC;CAGD,gBAAgB;EACd,aAAa;GACX,IAAI,cAAc,WAChB,cAAc,UAAU,cAAc;QACjC;IACL,eAAe,OAAO;IACtB,eAAe,MAAM;GACvB;EACF;CACF,GAAG,CAAC,CAAC;CAGL,OAAO,eAEF;EACC,GAAG;EACH;CACF,IACF,CAAC,gBAAgB,KAAK,CACxB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncQueuedState.cjs","names":["useAsyncQueuer"],"sources":["../../src/async-queuer/useAsyncQueuedState.ts"],"sourcesContent":["import { useAsyncQueuer } from './useAsyncQueuer'\nimport type {\n PreactAsyncQueuer,\n PreactAsyncQueuerOptions,\n} from './useAsyncQueuer'\nimport type { AsyncQueuerState } from '@tanstack/pacer/async-queuer'\n\n/**\n * A higher-level Preact hook that creates an `AsyncQueuer` instance with built-in state management.\n *\n * This hook combines an AsyncQueuer with Preact state to automatically track the queue items.\n * It returns a tuple containing:\n * - The current array of queued items as Preact state\n * - The queuer instance with methods to control the queue\n *\n * The queue can be configured with:\n * - Maximum concurrent operations\n * - Maximum queue size\n * - Processing function for queue items\n * - Various lifecycle callbacks\n *\n * The state will automatically update whenever items are:\n * - Added to the queue\n * - Removed from the queue\n * - Started processing\n * - Completed processing\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management via the underlying async queuer instance.\n * The `selector` parameter allows you to specify which async queuer state changes will trigger a re-render,\n * optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function. This prevents unnecessary re-renders and gives you\n * full control over when your component updates. Only when you provide a selector will the\n * component re-render when the selected state values change.\n *\n * Available async queuer state properties:\n * - `activeItems`: Items currently being processed by the queuer\n * - `errorCount`: Number of task executions that have resulted in errors\n * - `expirationCount`: Number of items that have been removed due to expiration\n * - `isEmpty`: Whether the queuer has no items to process\n * - `isFull`: Whether the queuer has reached its maximum capacity\n * - `isIdle`: Whether the queuer is not currently processing any items\n * - `isRunning`: Whether the queuer is active and will process items automatically\n * - `items`: Array of items currently waiting to be processed\n * - `itemTimestamps`: Timestamps when items were added for expiration tracking\n * - `lastResult`: The result from the most recent task execution\n * - `pendingTick`: Whether the queuer has a pending timeout for processing the next item\n * - `rejectionCount`: Number of items that have been rejected from being added\n * - `settledCount`: Number of task executions that have completed (success or error)\n * - `size`: Number of items currently in the queue\n * - `status`: Current processing status ('idle' | 'running' | 'stopped')\n * - `successCount`: Number of task executions that have completed successfully\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * {\n * concurrency: 2,\n * maxSize: 100,\n * started: true\n * }\n * );\n *\n * // Opt-in to re-render when queue contents change (optimized for displaying queue items)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * items: state.items,\n * size: state.size,\n * isEmpty: state.isEmpty,\n * isFull: state.isFull\n * })\n * );\n *\n * // Opt-in to re-render when processing state changes (optimized for loading indicators)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * isRunning: state.isRunning,\n * isIdle: state.isIdle,\n * status: state.status,\n * activeItems: state.activeItems,\n * pendingTick: state.pendingTick\n * })\n * );\n *\n * // Opt-in to re-render when execution metrics change (optimized for stats display)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * successCount: state.successCount,\n * errorCount: state.errorCount,\n * settledCount: state.settledCount,\n * expirationCount: state.expirationCount,\n * rejectionCount: state.rejectionCount\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount\n * })\n * );\n *\n * // Add items to queue - state updates automatically\n * asyncQueuer.addItem(async () => {\n * const result = await fetchData();\n * return result;\n * });\n *\n * // Start processing\n * asyncQueuer.start();\n *\n * // Stop processing\n * asyncQueuer.stop();\n *\n * // queueItems reflects current queue state\n * const pendingCount = asyncQueuer.peekPendingItems().length;\n *\n * // Access the selected async queuer state (will be empty object {} unless selector provided)\n * const { size, isRunning, activeItems } = asyncQueuer.state;\n * ```\n */\nexport function useAsyncQueuedState<\n TValue,\n TSelected extends Pick<AsyncQueuerState<TValue>, 'items'> = Pick<\n AsyncQueuerState<TValue>,\n 'items'\n >,\n>(\n fn: (value: TValue) => Promise<any>,\n options: PreactAsyncQueuerOptions<TValue, TSelected> = {},\n selector?: (state: AsyncQueuerState<TValue>) => TSelected,\n): [Array<TValue>, PreactAsyncQueuer<TValue, TSelected>] {\n const asyncQueuer = useAsyncQueuer(fn, options, selector)\n\n return [asyncQueuer.state.items, asyncQueuer]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsJA,SAAgB,oBAOd,IACA,UAAuD,
|
|
1
|
+
{"version":3,"file":"useAsyncQueuedState.cjs","names":["useAsyncQueuer"],"sources":["../../src/async-queuer/useAsyncQueuedState.ts"],"sourcesContent":["import { useAsyncQueuer } from './useAsyncQueuer'\nimport type {\n PreactAsyncQueuer,\n PreactAsyncQueuerOptions,\n} from './useAsyncQueuer'\nimport type { AsyncQueuerState } from '@tanstack/pacer/async-queuer'\n\n/**\n * A higher-level Preact hook that creates an `AsyncQueuer` instance with built-in state management.\n *\n * This hook combines an AsyncQueuer with Preact state to automatically track the queue items.\n * It returns a tuple containing:\n * - The current array of queued items as Preact state\n * - The queuer instance with methods to control the queue\n *\n * The queue can be configured with:\n * - Maximum concurrent operations\n * - Maximum queue size\n * - Processing function for queue items\n * - Various lifecycle callbacks\n *\n * The state will automatically update whenever items are:\n * - Added to the queue\n * - Removed from the queue\n * - Started processing\n * - Completed processing\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management via the underlying async queuer instance.\n * The `selector` parameter allows you to specify which async queuer state changes will trigger a re-render,\n * optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function. This prevents unnecessary re-renders and gives you\n * full control over when your component updates. Only when you provide a selector will the\n * component re-render when the selected state values change.\n *\n * Available async queuer state properties:\n * - `activeItems`: Items currently being processed by the queuer\n * - `errorCount`: Number of task executions that have resulted in errors\n * - `expirationCount`: Number of items that have been removed due to expiration\n * - `isEmpty`: Whether the queuer has no items to process\n * - `isFull`: Whether the queuer has reached its maximum capacity\n * - `isIdle`: Whether the queuer is not currently processing any items\n * - `isRunning`: Whether the queuer is active and will process items automatically\n * - `items`: Array of items currently waiting to be processed\n * - `itemTimestamps`: Timestamps when items were added for expiration tracking\n * - `lastResult`: The result from the most recent task execution\n * - `pendingTick`: Whether the queuer has a pending timeout for processing the next item\n * - `rejectionCount`: Number of items that have been rejected from being added\n * - `settledCount`: Number of task executions that have completed (success or error)\n * - `size`: Number of items currently in the queue\n * - `status`: Current processing status ('idle' | 'running' | 'stopped')\n * - `successCount`: Number of task executions that have completed successfully\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * {\n * concurrency: 2,\n * maxSize: 100,\n * started: true\n * }\n * );\n *\n * // Opt-in to re-render when queue contents change (optimized for displaying queue items)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * items: state.items,\n * size: state.size,\n * isEmpty: state.isEmpty,\n * isFull: state.isFull\n * })\n * );\n *\n * // Opt-in to re-render when processing state changes (optimized for loading indicators)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * isRunning: state.isRunning,\n * isIdle: state.isIdle,\n * status: state.status,\n * activeItems: state.activeItems,\n * pendingTick: state.pendingTick\n * })\n * );\n *\n * // Opt-in to re-render when execution metrics change (optimized for stats display)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * successCount: state.successCount,\n * errorCount: state.errorCount,\n * settledCount: state.settledCount,\n * expirationCount: state.expirationCount,\n * rejectionCount: state.rejectionCount\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount\n * })\n * );\n *\n * // Add items to queue - state updates automatically\n * asyncQueuer.addItem(async () => {\n * const result = await fetchData();\n * return result;\n * });\n *\n * // Start processing\n * asyncQueuer.start();\n *\n * // Stop processing\n * asyncQueuer.stop();\n *\n * // queueItems reflects current queue state\n * const pendingCount = asyncQueuer.peekPendingItems().length;\n *\n * // Access the selected async queuer state (will be empty object {} unless selector provided)\n * const { size, isRunning, activeItems } = asyncQueuer.state;\n * ```\n */\nexport function useAsyncQueuedState<\n TValue,\n TSelected extends Pick<AsyncQueuerState<TValue>, 'items'> = Pick<\n AsyncQueuerState<TValue>,\n 'items'\n >,\n>(\n fn: (value: TValue) => Promise<any>,\n options: PreactAsyncQueuerOptions<TValue, TSelected> = {},\n selector?: (state: AsyncQueuerState<TValue>) => TSelected,\n): [Array<TValue>, PreactAsyncQueuer<TValue, TSelected>] {\n const asyncQueuer = useAsyncQueuer(fn, options, selector)\n\n return [asyncQueuer.state.items, asyncQueuer]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsJA,SAAgB,oBAOd,IACA,UAAuD,CAAC,GACxD,UACuD;CACvD,MAAM,cAAcA,sCAAe,IAAI,SAAS,QAAQ;CAExD,OAAO,CAAC,YAAY,MAAM,OAAO,WAAW;AAC9C"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { PreactAsyncQueuer, PreactAsyncQueuerOptions } from "./useAsyncQueuer.cjs";
|
|
2
2
|
import { AsyncQueuerState } from "@tanstack/pacer/async-queuer";
|
|
3
|
-
|
|
4
3
|
//#region src/async-queuer/useAsyncQueuedState.d.ts
|
|
5
4
|
/**
|
|
6
5
|
* A higher-level Preact hook that creates an `AsyncQueuer` instance with built-in state management.
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { PreactAsyncQueuer, PreactAsyncQueuerOptions } from "./useAsyncQueuer.js";
|
|
2
2
|
import { AsyncQueuerState } from "@tanstack/pacer/async-queuer";
|
|
3
|
-
|
|
4
3
|
//#region src/async-queuer/useAsyncQueuedState.d.ts
|
|
5
4
|
/**
|
|
6
5
|
* A higher-level Preact hook that creates an `AsyncQueuer` instance with built-in state management.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncQueuedState.js","names":[],"sources":["../../src/async-queuer/useAsyncQueuedState.ts"],"sourcesContent":["import { useAsyncQueuer } from './useAsyncQueuer'\nimport type {\n PreactAsyncQueuer,\n PreactAsyncQueuerOptions,\n} from './useAsyncQueuer'\nimport type { AsyncQueuerState } from '@tanstack/pacer/async-queuer'\n\n/**\n * A higher-level Preact hook that creates an `AsyncQueuer` instance with built-in state management.\n *\n * This hook combines an AsyncQueuer with Preact state to automatically track the queue items.\n * It returns a tuple containing:\n * - The current array of queued items as Preact state\n * - The queuer instance with methods to control the queue\n *\n * The queue can be configured with:\n * - Maximum concurrent operations\n * - Maximum queue size\n * - Processing function for queue items\n * - Various lifecycle callbacks\n *\n * The state will automatically update whenever items are:\n * - Added to the queue\n * - Removed from the queue\n * - Started processing\n * - Completed processing\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management via the underlying async queuer instance.\n * The `selector` parameter allows you to specify which async queuer state changes will trigger a re-render,\n * optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function. This prevents unnecessary re-renders and gives you\n * full control over when your component updates. Only when you provide a selector will the\n * component re-render when the selected state values change.\n *\n * Available async queuer state properties:\n * - `activeItems`: Items currently being processed by the queuer\n * - `errorCount`: Number of task executions that have resulted in errors\n * - `expirationCount`: Number of items that have been removed due to expiration\n * - `isEmpty`: Whether the queuer has no items to process\n * - `isFull`: Whether the queuer has reached its maximum capacity\n * - `isIdle`: Whether the queuer is not currently processing any items\n * - `isRunning`: Whether the queuer is active and will process items automatically\n * - `items`: Array of items currently waiting to be processed\n * - `itemTimestamps`: Timestamps when items were added for expiration tracking\n * - `lastResult`: The result from the most recent task execution\n * - `pendingTick`: Whether the queuer has a pending timeout for processing the next item\n * - `rejectionCount`: Number of items that have been rejected from being added\n * - `settledCount`: Number of task executions that have completed (success or error)\n * - `size`: Number of items currently in the queue\n * - `status`: Current processing status ('idle' | 'running' | 'stopped')\n * - `successCount`: Number of task executions that have completed successfully\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * {\n * concurrency: 2,\n * maxSize: 100,\n * started: true\n * }\n * );\n *\n * // Opt-in to re-render when queue contents change (optimized for displaying queue items)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * items: state.items,\n * size: state.size,\n * isEmpty: state.isEmpty,\n * isFull: state.isFull\n * })\n * );\n *\n * // Opt-in to re-render when processing state changes (optimized for loading indicators)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * isRunning: state.isRunning,\n * isIdle: state.isIdle,\n * status: state.status,\n * activeItems: state.activeItems,\n * pendingTick: state.pendingTick\n * })\n * );\n *\n * // Opt-in to re-render when execution metrics change (optimized for stats display)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * successCount: state.successCount,\n * errorCount: state.errorCount,\n * settledCount: state.settledCount,\n * expirationCount: state.expirationCount,\n * rejectionCount: state.rejectionCount\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount\n * })\n * );\n *\n * // Add items to queue - state updates automatically\n * asyncQueuer.addItem(async () => {\n * const result = await fetchData();\n * return result;\n * });\n *\n * // Start processing\n * asyncQueuer.start();\n *\n * // Stop processing\n * asyncQueuer.stop();\n *\n * // queueItems reflects current queue state\n * const pendingCount = asyncQueuer.peekPendingItems().length;\n *\n * // Access the selected async queuer state (will be empty object {} unless selector provided)\n * const { size, isRunning, activeItems } = asyncQueuer.state;\n * ```\n */\nexport function useAsyncQueuedState<\n TValue,\n TSelected extends Pick<AsyncQueuerState<TValue>, 'items'> = Pick<\n AsyncQueuerState<TValue>,\n 'items'\n >,\n>(\n fn: (value: TValue) => Promise<any>,\n options: PreactAsyncQueuerOptions<TValue, TSelected> = {},\n selector?: (state: AsyncQueuerState<TValue>) => TSelected,\n): [Array<TValue>, PreactAsyncQueuer<TValue, TSelected>] {\n const asyncQueuer = useAsyncQueuer(fn, options, selector)\n\n return [asyncQueuer.state.items, asyncQueuer]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsJA,SAAgB,oBAOd,IACA,UAAuD,
|
|
1
|
+
{"version":3,"file":"useAsyncQueuedState.js","names":[],"sources":["../../src/async-queuer/useAsyncQueuedState.ts"],"sourcesContent":["import { useAsyncQueuer } from './useAsyncQueuer'\nimport type {\n PreactAsyncQueuer,\n PreactAsyncQueuerOptions,\n} from './useAsyncQueuer'\nimport type { AsyncQueuerState } from '@tanstack/pacer/async-queuer'\n\n/**\n * A higher-level Preact hook that creates an `AsyncQueuer` instance with built-in state management.\n *\n * This hook combines an AsyncQueuer with Preact state to automatically track the queue items.\n * It returns a tuple containing:\n * - The current array of queued items as Preact state\n * - The queuer instance with methods to control the queue\n *\n * The queue can be configured with:\n * - Maximum concurrent operations\n * - Maximum queue size\n * - Processing function for queue items\n * - Various lifecycle callbacks\n *\n * The state will automatically update whenever items are:\n * - Added to the queue\n * - Removed from the queue\n * - Started processing\n * - Completed processing\n *\n * ## State Management and Selector\n *\n * The hook uses TanStack Store for reactive state management via the underlying async queuer instance.\n * The `selector` parameter allows you to specify which async queuer state changes will trigger a re-render,\n * optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.\n *\n * **By default, there will be no reactive state subscriptions** and you must opt-in to state\n * tracking by providing a selector function. This prevents unnecessary re-renders and gives you\n * full control over when your component updates. Only when you provide a selector will the\n * component re-render when the selected state values change.\n *\n * Available async queuer state properties:\n * - `activeItems`: Items currently being processed by the queuer\n * - `errorCount`: Number of task executions that have resulted in errors\n * - `expirationCount`: Number of items that have been removed due to expiration\n * - `isEmpty`: Whether the queuer has no items to process\n * - `isFull`: Whether the queuer has reached its maximum capacity\n * - `isIdle`: Whether the queuer is not currently processing any items\n * - `isRunning`: Whether the queuer is active and will process items automatically\n * - `items`: Array of items currently waiting to be processed\n * - `itemTimestamps`: Timestamps when items were added for expiration tracking\n * - `lastResult`: The result from the most recent task execution\n * - `pendingTick`: Whether the queuer has a pending timeout for processing the next item\n * - `rejectionCount`: Number of items that have been rejected from being added\n * - `settledCount`: Number of task executions that have completed (success or error)\n * - `size`: Number of items currently in the queue\n * - `status`: Current processing status ('idle' | 'running' | 'stopped')\n * - `successCount`: Number of task executions that have completed successfully\n *\n * @example\n * ```tsx\n * // Default behavior - no reactive state subscriptions\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * {\n * concurrency: 2,\n * maxSize: 100,\n * started: true\n * }\n * );\n *\n * // Opt-in to re-render when queue contents change (optimized for displaying queue items)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * items: state.items,\n * size: state.size,\n * isEmpty: state.isEmpty,\n * isFull: state.isFull\n * })\n * );\n *\n * // Opt-in to re-render when processing state changes (optimized for loading indicators)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * isRunning: state.isRunning,\n * isIdle: state.isIdle,\n * status: state.status,\n * activeItems: state.activeItems,\n * pendingTick: state.pendingTick\n * })\n * );\n *\n * // Opt-in to re-render when execution metrics change (optimized for stats display)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * successCount: state.successCount,\n * errorCount: state.errorCount,\n * settledCount: state.settledCount,\n * expirationCount: state.expirationCount,\n * rejectionCount: state.rejectionCount\n * })\n * );\n *\n * // Opt-in to re-render when results are available (optimized for data display)\n * const [queueItems, asyncQueuer] = useAsyncQueuedState(\n * async (item) => {\n * const result = await processItem(item);\n * return result;\n * },\n * { concurrency: 2, maxSize: 100, started: true },\n * (state) => ({\n * lastResult: state.lastResult,\n * successCount: state.successCount\n * })\n * );\n *\n * // Add items to queue - state updates automatically\n * asyncQueuer.addItem(async () => {\n * const result = await fetchData();\n * return result;\n * });\n *\n * // Start processing\n * asyncQueuer.start();\n *\n * // Stop processing\n * asyncQueuer.stop();\n *\n * // queueItems reflects current queue state\n * const pendingCount = asyncQueuer.peekPendingItems().length;\n *\n * // Access the selected async queuer state (will be empty object {} unless selector provided)\n * const { size, isRunning, activeItems } = asyncQueuer.state;\n * ```\n */\nexport function useAsyncQueuedState<\n TValue,\n TSelected extends Pick<AsyncQueuerState<TValue>, 'items'> = Pick<\n AsyncQueuerState<TValue>,\n 'items'\n >,\n>(\n fn: (value: TValue) => Promise<any>,\n options: PreactAsyncQueuerOptions<TValue, TSelected> = {},\n selector?: (state: AsyncQueuerState<TValue>) => TSelected,\n): [Array<TValue>, PreactAsyncQueuer<TValue, TSelected>] {\n const asyncQueuer = useAsyncQueuer(fn, options, selector)\n\n return [asyncQueuer.state.items, asyncQueuer]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsJA,SAAgB,oBAOd,IACA,UAAuD,CAAC,GACxD,UACuD;CACvD,MAAM,cAAc,eAAe,IAAI,SAAS,QAAQ;CAExD,OAAO,CAAC,YAAY,MAAM,OAAO,WAAW;AAC9C"}
|