@tanstack/angular-pacer 0.20.0

package/dist/throttler/injectThrottler.d.cts

@@ -0,0 +1,79 @@
+import { Signal } from "@angular/core";
+import { Store } from "@tanstack/store";
+import { AnyFunction } from "@tanstack/pacer/types";
+import { Throttler, ThrottlerOptions, ThrottlerState } from "@tanstack/pacer/throttler";
+
+//#region src/throttler/injectThrottler.d.ts
+interface AngularThrottler<TFn extends AnyFunction, TSelected = {}> extends Omit<Throttler<TFn>, 'store'> {
+  /**
+   * Reactive state signal that will be updated when the throttler state changes
+   *
+   * Use this instead of `throttler.store.state`
+   */
+  readonly state: Signal<Readonly<TSelected>>;
+  /**
+   * @deprecated Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+   * The state on the store object is not reactive in Angular signals.
+   */
+  readonly store: Store<Readonly<ThrottlerState<TFn>>>;
+}
+/**
+ * An Angular function that creates and manages a Throttler instance.
+ *
+ * This is a lower-level function that provides direct access to the Throttler's functionality.
+ * This allows you to integrate it with any state management solution you prefer.
+ *
+ * This function provides throttling functionality to limit how often a function can be called,
+ * ensuring it executes at most once within a specified time window.
+ *
+ * The throttler will execute the function immediately (if leading is enabled) and then
+ * prevent further executions until the wait period has elapsed.
+ *
+ * ## State Management and Selector
+ *
+ * The function uses TanStack Store for state management and wraps it with Angular signals.
+ * The `selector` parameter allows you to specify which state changes will trigger signal updates,
+ * optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+ *
+ * **By default, there will be no reactive state subscriptions** and you must opt-in to state
+ * tracking by providing a selector function. This prevents unnecessary updates and gives you
+ * full control over when your component tracks state changes.
+ *
+ * Available state properties:
+ * - `canLeadingExecute`: Whether the throttler can execute on the leading edge
+ * - `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+ * - `executionCount`: Number of function executions that have been completed
+ * - `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+ * - `lastArgs`: The arguments from the most recent call to maybeExecute
+ * - `lastExecutionTime`: Timestamp of the last execution
+ * - `nextExecutionTime`: Timestamp of the next allowed execution
+ * - `status`: Current execution status ('disabled' | 'idle' | 'pending')
+ *
+ * @example
+ * ```ts
+ * // Default behavior - no reactive state subscriptions
+ * const throttler = injectThrottler(
+ *   (scrollY: number) => updateScrollPosition(scrollY),
+ *   { wait: 100 }
+ * );
+ *
+ * // Opt-in to track isPending changes (optimized for loading states)
+ * const throttler = injectThrottler(
+ *   (scrollY: number) => updateScrollPosition(scrollY),
+ *   { wait: 100 },
+ *   (state) => ({ isPending: state.isPending })
+ * );
+ *
+ * // In an event handler
+ * window.addEventListener('scroll', () => {
+ *   throttler.maybeExecute(window.scrollY);
+ * });
+ *
+ * // Access the selected state (will be empty object {} unless selector provided)
+ * const { isPending } = throttler.state();
+ * ```
+ */
+declare function injectThrottler<TFn extends AnyFunction, TSelected = {}>(fn: TFn, options: ThrottlerOptions<TFn>, selector?: (state: ThrottlerState<TFn>) => TSelected): AngularThrottler<TFn, TSelected>;
+//#endregion
+export { AngularThrottler, injectThrottler };
+//# sourceMappingURL=injectThrottler.d.cts.map

package/dist/throttler/injectThrottler.d.ts

@@ -0,0 +1,79 @@
+import { Signal } from "@angular/core";
+import { Throttler, ThrottlerOptions, ThrottlerState } from "@tanstack/pacer/throttler";
+import { AnyFunction } from "@tanstack/pacer/types";
+import { Store } from "@tanstack/store";
+
+//#region src/throttler/injectThrottler.d.ts
+interface AngularThrottler<TFn extends AnyFunction, TSelected = {}> extends Omit<Throttler<TFn>, 'store'> {
+  /**
+   * Reactive state signal that will be updated when the throttler state changes
+   *
+   * Use this instead of `throttler.store.state`
+   */
+  readonly state: Signal<Readonly<TSelected>>;
+  /**
+   * @deprecated Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+   * The state on the store object is not reactive in Angular signals.
+   */
+  readonly store: Store<Readonly<ThrottlerState<TFn>>>;
+}
+/**
+ * An Angular function that creates and manages a Throttler instance.
+ *
+ * This is a lower-level function that provides direct access to the Throttler's functionality.
+ * This allows you to integrate it with any state management solution you prefer.
+ *
+ * This function provides throttling functionality to limit how often a function can be called,
+ * ensuring it executes at most once within a specified time window.
+ *
+ * The throttler will execute the function immediately (if leading is enabled) and then
+ * prevent further executions until the wait period has elapsed.
+ *
+ * ## State Management and Selector
+ *
+ * The function uses TanStack Store for state management and wraps it with Angular signals.
+ * The `selector` parameter allows you to specify which state changes will trigger signal updates,
+ * optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+ *
+ * **By default, there will be no reactive state subscriptions** and you must opt-in to state
+ * tracking by providing a selector function. This prevents unnecessary updates and gives you
+ * full control over when your component tracks state changes.
+ *
+ * Available state properties:
+ * - `canLeadingExecute`: Whether the throttler can execute on the leading edge
+ * - `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+ * - `executionCount`: Number of function executions that have been completed
+ * - `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+ * - `lastArgs`: The arguments from the most recent call to maybeExecute
+ * - `lastExecutionTime`: Timestamp of the last execution
+ * - `nextExecutionTime`: Timestamp of the next allowed execution
+ * - `status`: Current execution status ('disabled' | 'idle' | 'pending')
+ *
+ * @example
+ * ```ts
+ * // Default behavior - no reactive state subscriptions
+ * const throttler = injectThrottler(
+ *   (scrollY: number) => updateScrollPosition(scrollY),
+ *   { wait: 100 }
+ * );
+ *
+ * // Opt-in to track isPending changes (optimized for loading states)
+ * const throttler = injectThrottler(
+ *   (scrollY: number) => updateScrollPosition(scrollY),
+ *   { wait: 100 },
+ *   (state) => ({ isPending: state.isPending })
+ * );
+ *
+ * // In an event handler
+ * window.addEventListener('scroll', () => {
+ *   throttler.maybeExecute(window.scrollY);
+ * });
+ *
+ * // Access the selected state (will be empty object {} unless selector provided)
+ * const { isPending } = throttler.state();
+ * ```
+ */
+declare function injectThrottler<TFn extends AnyFunction, TSelected = {}>(fn: TFn, options: ThrottlerOptions<TFn>, selector?: (state: ThrottlerState<TFn>) => TSelected): AngularThrottler<TFn, TSelected>;
+//#endregion
+export { AngularThrottler, injectThrottler };
+//# sourceMappingURL=injectThrottler.d.ts.map

package/dist/throttler/injectThrottler.js

@@ -0,0 +1,76 @@
+import { injectPacerOptions } from "../provider/pacer-context.js";
+import { injectStore } from "@tanstack/angular-store";
+import { Throttler } from "@tanstack/pacer/throttler";
+
+//#region src/throttler/injectThrottler.ts
+/**
+* An Angular function that creates and manages a Throttler instance.
+*
+* This is a lower-level function that provides direct access to the Throttler's functionality.
+* This allows you to integrate it with any state management solution you prefer.
+*
+* This function provides throttling functionality to limit how often a function can be called,
+* ensuring it executes at most once within a specified time window.
+*
+* The throttler will execute the function immediately (if leading is enabled) and then
+* prevent further executions until the wait period has elapsed.
+*
+* ## State Management and Selector
+*
+* The function uses TanStack Store for state management and wraps it with Angular signals.
+* The `selector` parameter allows you to specify which state changes will trigger signal updates,
+* optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+*
+* **By default, there will be no reactive state subscriptions** and you must opt-in to state
+* tracking by providing a selector function. This prevents unnecessary updates and gives you
+* full control over when your component tracks state changes.
+*
+* Available state properties:
+* - `canLeadingExecute`: Whether the throttler can execute on the leading edge
+* - `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+* - `executionCount`: Number of function executions that have been completed
+* - `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+* - `lastArgs`: The arguments from the most recent call to maybeExecute
+* - `lastExecutionTime`: Timestamp of the last execution
+* - `nextExecutionTime`: Timestamp of the next allowed execution
+* - `status`: Current execution status ('disabled' | 'idle' | 'pending')
+*
+* @example
+* ```ts
+* // Default behavior - no reactive state subscriptions
+* const throttler = injectThrottler(
+*   (scrollY: number) => updateScrollPosition(scrollY),
+*   { wait: 100 }
+* );
+*
+* // Opt-in to track isPending changes (optimized for loading states)
+* const throttler = injectThrottler(
+*   (scrollY: number) => updateScrollPosition(scrollY),
+*   { wait: 100 },
+*   (state) => ({ isPending: state.isPending })
+* );
+*
+* // In an event handler
+* window.addEventListener('scroll', () => {
+*   throttler.maybeExecute(window.scrollY);
+* });
+*
+* // Access the selected state (will be empty object {} unless selector provided)
+* const { isPending } = throttler.state();
+* ```
+*/
+function injectThrottler(fn, options, selector = () => ({})) {
+	const throttler = new Throttler(fn, {
+		...injectPacerOptions().throttler,
+		...options
+	});
+	const state = injectStore(throttler.store, selector);
+	return {
+		...throttler,
+		state
+	};
+}
+
+//#endregion
+export { injectThrottler };
+//# sourceMappingURL=injectThrottler.js.map

package/dist/throttler/injectThrottler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectThrottler.js","names":[],"sources":["../../src/throttler/injectThrottler.ts"],"sourcesContent":["import { injectStore } from '@tanstack/angular-store'\nimport { Throttler } from '@tanstack/pacer/throttler'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/store'\nimport type { AnyFunction } from '@tanstack/pacer/types'\nimport type {\n  ThrottlerOptions,\n  ThrottlerState,\n} from '@tanstack/pacer/throttler'\n\nexport interface AngularThrottler<\n  TFn extends AnyFunction,\n  TSelected = {},\n> extends Omit<Throttler<TFn>, 'store'> {\n  /**\n   * Reactive state signal that will be updated when the throttler state changes\n   *\n   * Use this instead of `throttler.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<ThrottlerState<TFn>>>\n}\n\n/**\n * An Angular function that creates and manages a Throttler instance.\n *\n * This is a lower-level function that provides direct access to the Throttler's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * This function provides throttling functionality to limit how often a function can be called,\n * ensuring it executes at most once within a specified time window.\n *\n * The throttler will execute the function immediately (if leading is enabled) and then\n * prevent further executions until the wait period has elapsed.\n *\n * ## State Management and Selector\n *\n * The function uses TanStack Store for state management and wraps it with Angular signals.\n * The `selector` parameter allows you to specify which state changes will trigger signal updates,\n * optimizing performance by preventing unnecessary updates 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 updates and gives you\n * full control over when your component tracks state changes.\n *\n * Available state properties:\n * - `canLeadingExecute`: Whether the throttler can execute on the leading edge\n * - `canTrailingExecute`: Whether the throttler can execute on the trailing edge\n * - `executionCount`: Number of function executions that have been completed\n * - `isPending`: Whether the throttler is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastExecutionTime`: Timestamp of the last execution\n * - `nextExecutionTime`: Timestamp of the next allowed execution\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending')\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const throttler = injectThrottler(\n *   (scrollY: number) => updateScrollPosition(scrollY),\n *   { wait: 100 }\n * );\n *\n * // Opt-in to track isPending changes (optimized for loading states)\n * const throttler = injectThrottler(\n *   (scrollY: number) => updateScrollPosition(scrollY),\n *   { wait: 100 },\n *   (state) => ({ isPending: state.isPending })\n * );\n *\n * // In an event handler\n * window.addEventListener('scroll', () => {\n *   throttler.maybeExecute(window.scrollY);\n * });\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { isPending } = throttler.state();\n * ```\n */\nexport function injectThrottler<TFn extends AnyFunction, TSelected = {}>(\n  fn: TFn,\n  options: ThrottlerOptions<TFn>,\n  selector: (state: ThrottlerState<TFn>) => TSelected = () => ({}) as TSelected,\n): AngularThrottler<TFn, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().throttler,\n    ...options,\n  } as ThrottlerOptions<TFn>\n\n  const throttler = new Throttler<TFn>(fn, mergedOptions)\n  const state = injectStore(throttler.store, selector)\n\n  return {\n    ...throttler,\n    state,\n  } as AngularThrottler<TFn, TSelected>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,SAAgB,gBACd,IACA,SACA,kBAA6D,EAAE,GAC7B;CAMlC,MAAM,YAAY,IAAI,UAAe,IALf;EACpB,GAAG,oBAAoB,CAAC;EACxB,GAAG;EACJ,CAEsD;CACvD,MAAM,QAAQ,YAAY,UAAU,OAAO,SAAS;AAEpD,QAAO;EACL,GAAG;EACH;EACD"}

package/dist/types/index.cjs

@@ -0,0 +1,9 @@
+
+
+var _tanstack_pacer_types = require("@tanstack/pacer/types");
+Object.keys(_tanstack_pacer_types).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _tanstack_pacer_types[k]; }
+  });
+});

package/dist/types/index.d.cts

@@ -0,0 +1 @@
+export * from "@tanstack/pacer/types";

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from "@tanstack/pacer/types";

package/dist/types/index.js

@@ -0,0 +1,3 @@
+export * from "@tanstack/pacer/types"
+
+export {  };

package/dist/utils/index.cjs

@@ -0,0 +1,9 @@
+
+
+var _tanstack_pacer_utils = require("@tanstack/pacer/utils");
+Object.keys(_tanstack_pacer_utils).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _tanstack_pacer_utils[k]; }
+  });
+});

package/dist/utils/index.d.cts

@@ -0,0 +1 @@
+export * from "@tanstack/pacer/utils";

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "@tanstack/pacer/utils";

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from "@tanstack/pacer/utils"
+
+export {  };

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@tanstack/angular-pacer",
+  "version": "0.20.0",
+  "description": "Utilities for debouncing and throttling functions in Angular.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/pacer.git",
+    "directory": "packages/angular-pacer"
+  },
+  "homepage": "https://tanstack.com/pacer",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "angular",
+    "debounce",
+    "throttle",
+    "rate-limit",
+    "queue",
+    "async",
+    "signals"
+  ],
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "build": "tsdown"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./async-batcher": {
+      "import": "./dist/async-batcher/index.js",
+      "require": "./dist/async-batcher/index.cjs"
+    },
+    "./async-debouncer": {
+      "import": "./dist/async-debouncer/index.js",
+      "require": "./dist/async-debouncer/index.cjs"
+    },
+    "./async-queuer": {
+      "import": "./dist/async-queuer/index.js",
+      "require": "./dist/async-queuer/index.cjs"
+    },
+    "./async-rate-limiter": {
+      "import": "./dist/async-rate-limiter/index.js",
+      "require": "./dist/async-rate-limiter/index.cjs"
+    },
+    "./async-retryer": {
+      "import": "./dist/async-retryer/index.js",
+      "require": "./dist/async-retryer/index.cjs"
+    },
+    "./async-throttler": {
+      "import": "./dist/async-throttler/index.js",
+      "require": "./dist/async-throttler/index.cjs"
+    },
+    "./batcher": {
+      "import": "./dist/batcher/index.js",
+      "require": "./dist/batcher/index.cjs"
+    },
+    "./debouncer": {
+      "import": "./dist/debouncer/index.js",
+      "require": "./dist/debouncer/index.cjs"
+    },
+    "./provider": {
+      "import": "./dist/provider/index.js",
+      "require": "./dist/provider/index.cjs"
+    },
+    "./queuer": {
+      "import": "./dist/queuer/index.js",
+      "require": "./dist/queuer/index.cjs"
+    },
+    "./rate-limiter": {
+      "import": "./dist/rate-limiter/index.js",
+      "require": "./dist/rate-limiter/index.cjs"
+    },
+    "./throttler": {
+      "import": "./dist/throttler/index.js",
+      "require": "./dist/throttler/index.cjs"
+    },
+    "./types": {
+      "import": "./dist/types/index.js",
+      "require": "./dist/types/index.cjs"
+    },
+    "./utils": {
+      "import": "./dist/utils/index.js",
+      "require": "./dist/utils/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/angular-store": "^0.8.0",
+    "@tanstack/pacer": "workspace:*",
+    "@tanstack/store": "^0.8.0"
+  },
+  "devDependencies": {
+    "@angular/core": "^21.0.0",
+    "@types/node": "^25.0.10"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=17.0.0"
+  }
+}

package/src/async-batcher/index.ts

@@ -0,0 +1,4 @@
+export * from '@tanstack/pacer/async-batcher'
+
+export * from './injectAsyncBatchedCallback'
+export * from './injectAsyncBatcher'

package/src/async-batcher/injectAsyncBatchedCallback.ts

@@ -0,0 +1,48 @@
+import { injectAsyncBatcher } from './injectAsyncBatcher'
+import type { AsyncBatcherOptions } from '@tanstack/pacer/async-batcher'
+
+/**
+ * An Angular function that creates an async batched version of a callback function.
+ * This function is essentially a wrapper around `injectAsyncBatcher` that provides
+ * a simplified API for basic async batching needs.
+ *
+ * The batched function will collect items and process them in batches asynchronously based on
+ * the configured conditions (maxSize, wait time, etc.).
+ *
+ * This function provides a simpler API compared to `injectAsyncBatcher`, making it ideal for basic
+ * async batching needs. However, it does not expose the underlying AsyncBatcher instance.
+ *
+ * For advanced usage requiring features like:
+ * - Manual flushing
+ * - Access to batch state
+ * - Error handling callbacks
+ * - Retry support
+ *
+ * Consider using the `injectAsyncBatcher` function instead.
+ *
+ * @example
+ * ```ts
+ * // Batch async API calls
+ * const batchApiCall = injectAsyncBatchedCallback(
+ *   async (items: Array<Data>) => {
+ *     const response = await fetch('/api/batch', {
+ *       method: 'POST',
+ *       body: JSON.stringify(items)
+ *     });
+ *     return response.json();
+ *   },
+ *   { maxSize: 10, wait: 1000 }
+ * );
+ *
+ * // Items will be batched and sent together
+ * await batchApiCall(data1);
+ * await batchApiCall(data2);
+ * ```
+ */
+export function injectAsyncBatchedCallback<TValue>(
+  fn: (items: Array<TValue>) => Promise<any>,
+  options: AsyncBatcherOptions<TValue>,
+): (item: TValue) => Promise<void> {
+  const batcher = injectAsyncBatcher(fn, options)
+  return (item: TValue) => batcher.addItem(item)
+}

package/src/async-batcher/injectAsyncBatcher.ts

@@ -0,0 +1,87 @@
+import { injectStore } from '@tanstack/angular-store'
+import { AsyncBatcher } from '@tanstack/pacer/async-batcher'
+import { injectPacerOptions } from '../provider/pacer-context'
+import type { Signal } from '@angular/core'
+import type { Store } from '@tanstack/store'
+import type {
+  AsyncBatcherOptions,
+  AsyncBatcherState,
+} from '@tanstack/pacer/async-batcher'
+
+export interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<
+  AsyncBatcher<TValue>,
+  'store'
+> {
+  /**
+   * Reactive state signal that will be updated when the async batcher state changes
+   *
+   * Use this instead of `batcher.store.state`
+   */
+  readonly state: Signal<Readonly<TSelected>>
+  /**
+   * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+   * The state on the store object is not reactive in Angular signals.
+   */
+  readonly store: Store<Readonly<AsyncBatcherState<TValue>>>
+}
+
+/**
+ * An Angular function that creates and manages an AsyncBatcher instance.
+ *
+ * This is a lower-level function that provides direct access to the AsyncBatcher's functionality.
+ * This allows you to integrate it with any state management solution you prefer.
+ *
+ * The AsyncBatcher collects items and processes them in batches asynchronously with support for
+ * promise-based processing, error handling, retry capabilities, and abort support.
+ *
+ * ## State Management and Selector
+ *
+ * The function uses TanStack Store for state management and wraps it with Angular signals.
+ * The `selector` parameter allows you to specify which state changes will trigger signal updates,
+ * optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+ *
+ * **By default, there will be no reactive state subscriptions** and you must opt-in to state
+ * tracking by providing a selector function. This prevents unnecessary updates and gives you
+ * full control over when your component tracks state changes.
+ *
+ * @example
+ * ```ts
+ * // Default behavior - no reactive state subscriptions
+ * const batcher = injectAsyncBatcher(
+ *   async (items: Array<Data>) => {
+ *     const response = await fetch('/api/batch', {
+ *       method: 'POST',
+ *       body: JSON.stringify(items)
+ *     });
+ *     return response.json();
+ *   },
+ *   { maxSize: 10, wait: 2000 }
+ * );
+ *
+ * // Add items
+ * batcher.addItem(data1);
+ * batcher.addItem(data2);
+ *
+ * // Access the selected state
+ * const { items, isExecuting } = batcher.state();
+ * ```
+ */
+export function injectAsyncBatcher<TValue, TSelected = {}>(
+  fn: (items: Array<TValue>) => Promise<any>,
+  options: AsyncBatcherOptions<TValue> = {},
+  selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>
+    ({}) as TSelected,
+): AngularAsyncBatcher<TValue, TSelected> {
+  const mergedOptions = {
+    ...injectPacerOptions().asyncBatcher,
+    ...options,
+  } as AsyncBatcherOptions<TValue>
+
+  const batcher = new AsyncBatcher<TValue>(fn, mergedOptions)
+  const state = injectStore(batcher.store, selector)
+
+  return {
+    ...batcher,
+    state,
+  } as AngularAsyncBatcher<TValue, TSelected>
+}

package/src/async-debouncer/index.ts

@@ -0,0 +1,4 @@
+export * from '@tanstack/pacer/async-debouncer'
+
+export * from './injectAsyncDebouncedCallback'
+export * from './injectAsyncDebouncer'

package/src/async-debouncer/injectAsyncDebouncedCallback.ts

@@ -0,0 +1,50 @@
+import { injectAsyncDebouncer } from './injectAsyncDebouncer'
+import type { AsyncDebouncerOptions } from '@tanstack/pacer/async-debouncer'
+import type { AnyAsyncFunction } from '@tanstack/pacer/types'
+
+/**
+ * An Angular function that creates an async debounced version of a callback function.
+ * This function is essentially a wrapper around `injectAsyncDebouncer` that provides
+ * a simplified API for basic async debouncing needs.
+ *
+ * The debounced function will only execute after the specified wait time has elapsed
+ * since its last invocation. If called again before the wait time expires, the timer
+ * resets and starts waiting again.
+ *
+ * This function provides a simpler API compared to `injectAsyncDebouncer`, making it ideal for basic
+ * async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.
+ *
+ * For advanced usage requiring features like:
+ * - Manual cancellation
+ * - Access to execution counts
+ * - Error handling callbacks
+ * - Retry support
+ *
+ * Consider using the `injectAsyncDebouncer` function instead.
+ *
+ * @example
+ * ```ts
+ * // Debounce an async search handler
+ * const handleSearch = injectAsyncDebouncedCallback(
+ *   async (query: string) => {
+ *     const response = await fetch(`/api/search?q=${query}`);
+ *     return response.json();
+ *   },
+ *   { wait: 500 }
+ * );
+ *
+ * // Use in an input
+ * const results = await handleSearch(searchQuery);
+ * ```
+ */
+export function injectAsyncDebouncedCallback<TFn extends AnyAsyncFunction>(
+  fn: TFn,
+  options: AsyncDebouncerOptions<TFn>,
+): (...args: Parameters<TFn>) => Promise<Awaited<ReturnType<TFn>> | undefined> {
+  const debouncer = injectAsyncDebouncer(fn, options)
+  return async (...args: Parameters<TFn>) => {
+    const result = await debouncer.maybeExecute(...args)
+    // Not sure if this is the best way to handle this,
+    return result !== undefined ? await result : undefined
+  }
+}