@tanstack/angular-pacer 0.20.0 → 0.22.0

package/dist/throttler/injectThrottler.d.cts

@@ -1,9 +1,16 @@
 import { Signal } from "@angular/core";
-import { Store } from "@tanstack/store";
+import { Store } from "@tanstack/angular-store";
 import { AnyFunction } from "@tanstack/pacer/types";
 import { Throttler, ThrottlerOptions, ThrottlerState } from "@tanstack/pacer/throttler";
 
 //#region src/throttler/injectThrottler.d.ts
+interface AngularThrottlerOptions<TFn extends AnyFunction, TSelected = {}> extends ThrottlerOptions<TFn> {
+  /**
+   * Optional callback invoked when the component is destroyed. Receives the throttler instance.
+   * When provided, replaces the default cleanup (cancel); use it to call flush(), cancel(), add logging, etc.
+   */
+  onUnmount?: (throttler: AngularThrottler<TFn, TSelected>) => void;
+}
 interface AngularThrottler<TFn extends AnyFunction, TSelected = {}> extends Omit<Throttler<TFn>, 'store'> {
   /**
    * Reactive state signal that will be updated when the throttler state changes
@@ -49,6 +56,18 @@ interface AngularThrottler<TFn extends AnyFunction, TSelected = {}> extends Omit
  * - `nextExecutionTime`: Timestamp of the next allowed execution
  * - `status`: Current execution status ('disabled' | 'idle' | 'pending')
  *
+ * ## Cleanup on Destroy
+ *
+ * By default, the function cancels any pending execution when the component is destroyed.
+ * Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+ *
+ * ```ts
+ * const throttler = injectThrottler(fn, {
+ *   wait: 100,
+ *   onUnmount: (t) => t.flush()
+ * });
+ * ```
+ *
  * @example
  * ```ts
  * // Default behavior - no reactive state subscriptions
@@ -73,7 +92,7 @@ interface AngularThrottler<TFn extends AnyFunction, TSelected = {}> extends Omit
  * const { isPending } = throttler.state();
  * ```
  */
-declare function injectThrottler<TFn extends AnyFunction, TSelected = {}>(fn: TFn, options: ThrottlerOptions<TFn>, selector?: (state: ThrottlerState<TFn>) => TSelected): AngularThrottler<TFn, TSelected>;
+declare function injectThrottler<TFn extends AnyFunction, TSelected = {}>(fn: TFn, options: AngularThrottlerOptions<TFn, TSelected>, selector?: (state: ThrottlerState<TFn>) => TSelected): AngularThrottler<TFn, TSelected>;
 //#endregion
-export { AngularThrottler, injectThrottler };
+export { AngularThrottler, AngularThrottlerOptions, injectThrottler };
 //# sourceMappingURL=injectThrottler.d.cts.map

package/dist/throttler/injectThrottler.d.ts

@@ -1,9 +1,16 @@
 import { Signal } from "@angular/core";
+import { Store } from "@tanstack/angular-store";
 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 AngularThrottlerOptions<TFn extends AnyFunction, TSelected = {}> extends ThrottlerOptions<TFn> {
+  /**
+   * Optional callback invoked when the component is destroyed. Receives the throttler instance.
+   * When provided, replaces the default cleanup (cancel); use it to call flush(), cancel(), add logging, etc.
+   */
+  onUnmount?: (throttler: AngularThrottler<TFn, TSelected>) => void;
+}
 interface AngularThrottler<TFn extends AnyFunction, TSelected = {}> extends Omit<Throttler<TFn>, 'store'> {
   /**
    * Reactive state signal that will be updated when the throttler state changes
@@ -49,6 +56,18 @@ interface AngularThrottler<TFn extends AnyFunction, TSelected = {}> extends Omit
  * - `nextExecutionTime`: Timestamp of the next allowed execution
  * - `status`: Current execution status ('disabled' | 'idle' | 'pending')
  *
+ * ## Cleanup on Destroy
+ *
+ * By default, the function cancels any pending execution when the component is destroyed.
+ * Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+ *
+ * ```ts
+ * const throttler = injectThrottler(fn, {
+ *   wait: 100,
+ *   onUnmount: (t) => t.flush()
+ * });
+ * ```
+ *
  * @example
  * ```ts
  * // Default behavior - no reactive state subscriptions
@@ -73,7 +92,7 @@ interface AngularThrottler<TFn extends AnyFunction, TSelected = {}> extends Omit
  * const { isPending } = throttler.state();
  * ```
  */
-declare function injectThrottler<TFn extends AnyFunction, TSelected = {}>(fn: TFn, options: ThrottlerOptions<TFn>, selector?: (state: ThrottlerState<TFn>) => TSelected): AngularThrottler<TFn, TSelected>;
+declare function injectThrottler<TFn extends AnyFunction, TSelected = {}>(fn: TFn, options: AngularThrottlerOptions<TFn, TSelected>, selector?: (state: ThrottlerState<TFn>) => TSelected): AngularThrottler<TFn, TSelected>;
 //#endregion
-export { AngularThrottler, injectThrottler };
+export { AngularThrottler, AngularThrottlerOptions, injectThrottler };
 //# sourceMappingURL=injectThrottler.d.ts.map

package/dist/throttler/injectThrottler.js

@@ -1,4 +1,5 @@
 import { injectPacerOptions } from "../provider/pacer-context.js";
+import { DestroyRef, inject } from "@angular/core";
 import { injectStore } from "@tanstack/angular-store";
 import { Throttler } from "@tanstack/pacer/throttler";
 
@@ -35,6 +36,18 @@ import { Throttler } from "@tanstack/pacer/throttler";
 * - `nextExecutionTime`: Timestamp of the next allowed execution
 * - `status`: Current execution status ('disabled' | 'idle' | 'pending')
 *
+* ## Cleanup on Destroy
+*
+* By default, the function cancels any pending execution when the component is destroyed.
+* Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+*
+* ```ts
+* const throttler = injectThrottler(fn, {
+*   wait: 100,
+*   onUnmount: (t) => t.flush()
+* });
+* ```
+*
 * @example
 * ```ts
 * // Default behavior - no reactive state subscriptions
@@ -60,15 +73,21 @@ import { Throttler } from "@tanstack/pacer/throttler";
 * ```
 */
 function injectThrottler(fn, options, selector = () => ({})) {
-	const throttler = new Throttler(fn, {
+	const mergedOptions = {
 		...injectPacerOptions().throttler,
 		...options
-	});
+	};
+	const throttler = new Throttler(fn, mergedOptions);
 	const state = injectStore(throttler.store, selector);
-	return {
+	const result = {
 		...throttler,
 		state
 	};
+	inject(DestroyRef, { optional: true })?.onDestroy(() => {
+		if (mergedOptions.onUnmount) mergedOptions.onUnmount(result);
+		else throttler.cancel();
+	});
+	return result;
 }
 
 //#endregion

package/dist/throttler/injectThrottler.js.map

@@ -1 +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"}
+{"version":3,"file":"injectThrottler.js","names":[],"sources":["../../src/throttler/injectThrottler.ts"],"sourcesContent":["import { DestroyRef, inject } from '@angular/core'\nimport { 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/angular-store'\nimport type { AnyFunction } from '@tanstack/pacer/types'\nimport type {\n  ThrottlerOptions,\n  ThrottlerState,\n} from '@tanstack/pacer/throttler'\n\nexport interface AngularThrottlerOptions<\n  TFn extends AnyFunction,\n  TSelected = {},\n> extends ThrottlerOptions<TFn> {\n  /**\n   * Optional callback invoked when the component is destroyed. Receives the throttler instance.\n   * When provided, replaces the default cleanup (cancel); use it to call flush(), cancel(), add logging, etc.\n   */\n  onUnmount?: (throttler: AngularThrottler<TFn, TSelected>) => void\n}\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 * ## Cleanup on Destroy\n *\n * By default, the function cancels any pending execution when the component is destroyed.\n * Use the `onUnmount` option to customize this. For example, to flush pending work instead:\n *\n * ```ts\n * const throttler = injectThrottler(fn, {\n *   wait: 100,\n *   onUnmount: (t) => t.flush()\n * });\n * ```\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: AngularThrottlerOptions<TFn, TSelected>,\n  selector: (state: ThrottlerState<TFn>) => TSelected = () => ({}) as TSelected,\n): AngularThrottler<TFn, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().throttler,\n    ...options,\n  } as AngularThrottlerOptions<TFn, TSelected>\n\n  const throttler = new Throttler<TFn>(fn, mergedOptions)\n  const state = injectStore(throttler.store, selector)\n\n  const result = {\n    ...throttler,\n    state,\n  } as AngularThrottler<TFn, TSelected>\n\n  const destroyRef = inject(DestroyRef, { optional: true })\n  destroyRef?.onDestroy(() => {\n    if (mergedOptions.onUnmount) {\n      mergedOptions.onUnmount(result)\n    } else {\n      throttler.cancel()\n    }\n  })\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GA,SAAgB,gBACd,IACA,SACA,kBAA6D,EAAE,GAC7B;CAClC,MAAM,gBAAgB;EACpB,GAAG,oBAAoB,CAAC;EACxB,GAAG;EACJ;CAED,MAAM,YAAY,IAAI,UAAe,IAAI,cAAc;CACvD,MAAM,QAAQ,YAAY,UAAU,OAAO,SAAS;CAEpD,MAAM,SAAS;EACb,GAAG;EACH;EACD;AAGD,CADmB,OAAO,YAAY,EAAE,UAAU,MAAM,CAAC,EAC7C,gBAAgB;AAC1B,MAAI,cAAc,UAChB,eAAc,UAAU,OAAO;MAE/B,WAAU,QAAQ;GAEpB;AAEF,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-pacer",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Utilities for debouncing and throttling functions in Angular.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -23,14 +23,6 @@
     "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",
@@ -107,15 +99,23 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/angular-store": "^0.8.0",
-    "@tanstack/pacer": "workspace:*",
-    "@tanstack/store": "^0.8.0"
+    "@tanstack/angular-store": "^0.9.2",
+    "@tanstack/pacer": "0.20.0"
   },
   "devDependencies": {
-    "@angular/core": "^21.0.0",
-    "@types/node": "^25.0.10"
+    "@angular/core": "^21.2.5",
+    "@types/node": "^25.5.0"
   },
   "peerDependencies": {
     "@angular/core": ">=17.0.0"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "build": "tsdown"
   }
-}
+}

package/src/async-batcher/injectAsyncBatcher.ts

@@ -1,13 +1,26 @@
+import { DestroyRef, inject } from '@angular/core'
 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 { Store } from '@tanstack/angular-store'
 import type {
   AsyncBatcherOptions,
   AsyncBatcherState,
 } from '@tanstack/pacer/async-batcher'
 
+export interface AngularAsyncBatcherOptions<
+  TValue,
+  TSelected = {},
+> extends AsyncBatcherOptions<TValue> {
+  /**
+   * Optional callback invoked when the component is destroyed. Receives the batcher instance.
+   * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.
+   * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+   */
+  onUnmount?: (batcher: AngularAsyncBatcher<TValue, TSelected>) => void
+}
+
 export interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<
   AsyncBatcher<TValue>,
   'store'
@@ -44,6 +57,20 @@ export interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<
  * tracking by providing a selector function. This prevents unnecessary updates and gives you
  * full control over when your component tracks state changes.
  *
+ * ## Cleanup on Destroy
+ *
+ * By default, the function cancels any pending batch and aborts in-flight work when the component is destroyed.
+ * Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+ *
+ * ```ts
+ * const batcher = injectAsyncBatcher(fn, {
+ *   maxSize: 10,
+ *   onUnmount: (b) => b.flush()
+ * });
+ * ```
+ *
+ * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+ *
  * @example
  * ```ts
  * // Default behavior - no reactive state subscriptions
@@ -68,20 +95,32 @@ export interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<
  */
 export function injectAsyncBatcher<TValue, TSelected = {}>(
   fn: (items: Array<TValue>) => Promise<any>,
-  options: AsyncBatcherOptions<TValue> = {},
+  options: AngularAsyncBatcherOptions<TValue, TSelected> = {},
   selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>
     ({}) as TSelected,
 ): AngularAsyncBatcher<TValue, TSelected> {
   const mergedOptions = {
     ...injectPacerOptions().asyncBatcher,
     ...options,
-  } as AsyncBatcherOptions<TValue>
+  } as AngularAsyncBatcherOptions<TValue, TSelected>
 
   const batcher = new AsyncBatcher<TValue>(fn, mergedOptions)
   const state = injectStore(batcher.store, selector)
 
-  return {
+  const result = {
     ...batcher,
     state,
   } as AngularAsyncBatcher<TValue, TSelected>
+
+  const destroyRef = inject(DestroyRef, { optional: true })
+  destroyRef?.onDestroy(() => {
+    if (mergedOptions.onUnmount) {
+      mergedOptions.onUnmount(result)
+    } else {
+      batcher.cancel()
+      batcher.abort()
+    }
+  })
+
+  return result
 }

package/src/async-debouncer/injectAsyncDebouncer.ts

@@ -1,14 +1,27 @@
+import { DestroyRef, inject } from '@angular/core'
 import { injectStore } from '@tanstack/angular-store'
 import { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'
 import { injectPacerOptions } from '../provider/pacer-context'
 import type { Signal } from '@angular/core'
-import type { Store } from '@tanstack/store'
+import type { Store } from '@tanstack/angular-store'
 import type { AnyAsyncFunction } from '@tanstack/pacer/types'
 import type {
   AsyncDebouncerOptions,
   AsyncDebouncerState,
 } from '@tanstack/pacer/async-debouncer'
 
+export interface AngularAsyncDebouncerOptions<
+  TFn extends AnyAsyncFunction,
+  TSelected = {},
+> extends AsyncDebouncerOptions<TFn> {
+  /**
+   * Optional callback invoked when the component is destroyed. Receives the debouncer instance.
+   * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.
+   * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+   */
+  onUnmount?: (debouncer: AngularAsyncDebouncer<TFn, TSelected>) => void
+}
+
 export interface AngularAsyncDebouncer<
   TFn extends AnyAsyncFunction,
   TSelected = {},
@@ -60,6 +73,20 @@ export interface AngularAsyncDebouncer<
  * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
  * - `successCount`: Number of function executions that have completed successfully
  *
+ * ## Cleanup on Destroy
+ *
+ * By default, the function cancels any pending execution and aborts in-flight work when the component is destroyed.
+ * Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+ *
+ * ```ts
+ * const debouncer = injectAsyncDebouncer(fn, {
+ *   wait: 500,
+ *   onUnmount: (d) => d.flush()
+ * });
+ * ```
+ *
+ * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+ *
  * @example
  * ```ts
  * // Default behavior - no reactive state subscriptions
@@ -94,20 +121,32 @@ export function injectAsyncDebouncer<
   TSelected = {},
 >(
   fn: TFn,
-  options: AsyncDebouncerOptions<TFn>,
+  options: AngularAsyncDebouncerOptions<TFn, TSelected>,
   selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>
     ({}) as TSelected,
 ): AngularAsyncDebouncer<TFn, TSelected> {
   const mergedOptions = {
     ...injectPacerOptions().asyncDebouncer,
     ...options,
-  } as AsyncDebouncerOptions<TFn>
+  } as AngularAsyncDebouncerOptions<TFn, TSelected>
 
   const debouncer = new AsyncDebouncer<TFn>(fn, mergedOptions)
   const state = injectStore(debouncer.store, selector)
 
-  return {
+  const result = {
     ...debouncer,
     state,
   } as AngularAsyncDebouncer<TFn, TSelected>
+
+  const destroyRef = inject(DestroyRef, { optional: true })
+  destroyRef?.onDestroy(() => {
+    if (mergedOptions.onUnmount) {
+      mergedOptions.onUnmount(result)
+    } else {
+      debouncer.cancel()
+      debouncer.abort()
+    }
+  })
+
+  return result
 }

package/src/async-queuer/injectAsyncQueuedSignal.ts

@@ -6,18 +6,10 @@ import type {
   AsyncQueuerState,
 } from '@tanstack/pacer/async-queuer'
 
-export type AsyncQueuedSignal<
-  TValue,
-  TSelected = {},
-> = (() => Array<TValue>) & {
-  /**
-   * Add an item to the queue.
-   */
-  readonly addItem: AngularAsyncQueuer<TValue, TSelected>['addItem']
-  /**
-   * The queuer instance with additional control methods and state signals.
-   */
-  readonly queuer: AngularAsyncQueuer<TValue, TSelected>
+export interface AsyncQueuedSignal<TValue, TSelected = {}> {
+  (): Array<TValue>
+  addItem: AngularAsyncQueuer<TValue, TSelected>['addItem']
+  queuer: AngularAsyncQueuer<TValue, TSelected>
 }
 
 /**

package/src/async-queuer/injectAsyncQueuer.ts

@@ -1,13 +1,26 @@
+import { DestroyRef, inject } from '@angular/core'
 import { injectStore } from '@tanstack/angular-store'
 import { AsyncQueuer } from '@tanstack/pacer/async-queuer'
 import { injectPacerOptions } from '../provider/pacer-context'
 import type { Signal } from '@angular/core'
-import type { Store } from '@tanstack/store'
+import type { Store } from '@tanstack/angular-store'
 import type {
   AsyncQueuerOptions,
   AsyncQueuerState,
 } from '@tanstack/pacer/async-queuer'
 
+export interface AngularAsyncQueuerOptions<
+  TValue,
+  TSelected = {},
+> extends AsyncQueuerOptions<TValue> {
+  /**
+   * Optional callback invoked when the component is destroyed. Receives the queuer instance.
+   * When provided, replaces the default cleanup (stop + abort); use it to call flush(), stop(), add logging, etc.
+   * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+   */
+  onUnmount?: (queuer: AngularAsyncQueuer<TValue, TSelected>) => void
+}
+
 export interface AngularAsyncQueuer<TValue, TSelected = {}> extends Omit<
   AsyncQueuer<TValue>,
   'store'
@@ -44,6 +57,20 @@ export interface AngularAsyncQueuer<TValue, TSelected = {}> extends Omit<
  * tracking by providing a selector function. This prevents unnecessary updates and gives you
  * full control over when your component tracks state changes.
  *
+ * ## Cleanup on Destroy
+ *
+ * By default, the function stops the queuer and aborts in-flight work when the component is destroyed.
+ * Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+ *
+ * ```ts
+ * const queuer = injectAsyncQueuer(fn, {
+ *   concurrency: 2,
+ *   onUnmount: (q) => q.flush()
+ * });
+ * ```
+ *
+ * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+ *
  * @example
  * ```ts
  * // Default behavior - no reactive state subscriptions
@@ -68,20 +95,32 @@ export interface AngularAsyncQueuer<TValue, TSelected = {}> extends Omit<
  */
 export function injectAsyncQueuer<TValue, TSelected = {}>(
   fn: (value: TValue) => Promise<any>,
-  options: AsyncQueuerOptions<TValue> = {},
+  options: AngularAsyncQueuerOptions<TValue, TSelected> = {},
   selector: (state: AsyncQueuerState<TValue>) => TSelected = () =>
     ({}) as TSelected,
 ): AngularAsyncQueuer<TValue, TSelected> {
   const mergedOptions = {
     ...injectPacerOptions().asyncQueuer,
     ...options,
-  } as AsyncQueuerOptions<TValue>
+  } as AngularAsyncQueuerOptions<TValue, TSelected>
 
   const queuer = new AsyncQueuer<TValue>(fn, mergedOptions)
   const state = injectStore(queuer.store, selector)
 
-  return {
+  const result = {
     ...queuer,
     state,
   } as AngularAsyncQueuer<TValue, TSelected>
+
+  const destroyRef = inject(DestroyRef, { optional: true })
+  destroyRef?.onDestroy(() => {
+    if (mergedOptions.onUnmount) {
+      mergedOptions.onUnmount(result)
+    } else {
+      queuer.stop()
+      queuer.abort()
+    }
+  })
+
+  return result
 }

package/src/async-rate-limiter/injectAsyncRateLimiter.ts

@@ -1,14 +1,26 @@
+import { DestroyRef, inject } from '@angular/core'
 import { injectStore } from '@tanstack/angular-store'
 import { AsyncRateLimiter } from '@tanstack/pacer/async-rate-limiter'
 import { injectPacerOptions } from '../provider/pacer-context'
 import type { Signal } from '@angular/core'
-import type { Store } from '@tanstack/store'
+import type { Store } from '@tanstack/angular-store'
 import type { AnyAsyncFunction } from '@tanstack/pacer/types'
 import type {
   AsyncRateLimiterOptions,
   AsyncRateLimiterState,
 } from '@tanstack/pacer/async-rate-limiter'
 
+export interface AngularAsyncRateLimiterOptions<
+  TFn extends AnyAsyncFunction,
+  TSelected = {},
+> extends AsyncRateLimiterOptions<TFn> {
+  /**
+   * Optional callback invoked when the component is destroyed. Receives the rate limiter instance.
+   * When provided, replaces the default cleanup (abort).
+   */
+  onUnmount?: (rateLimiter: AngularAsyncRateLimiter<TFn, TSelected>) => void
+}
+
 export interface AngularAsyncRateLimiter<
   TFn extends AnyAsyncFunction,
   TSelected = {},
@@ -45,6 +57,11 @@ export interface AngularAsyncRateLimiter<
  * tracking by providing a selector function. This prevents unnecessary updates and gives you
  * full control over when your component tracks state changes.
  *
+ * ## Cleanup on Destroy
+ *
+ * By default, the function aborts in-flight work when the component is destroyed.
+ * Use the `onUnmount` option to customize this.
+ *
  * @example
  * ```ts
  * // Default behavior - no reactive state subscriptions
@@ -68,20 +85,31 @@ export function injectAsyncRateLimiter<
   TSelected = {},
 >(
   fn: TFn,
-  options: AsyncRateLimiterOptions<TFn>,
+  options: AngularAsyncRateLimiterOptions<TFn, TSelected>,
   selector: (state: AsyncRateLimiterState<TFn>) => TSelected = () =>
     ({}) as TSelected,
 ): AngularAsyncRateLimiter<TFn, TSelected> {
   const mergedOptions = {
     ...injectPacerOptions().asyncRateLimiter,
     ...options,
-  } as AsyncRateLimiterOptions<TFn>
+  } as AngularAsyncRateLimiterOptions<TFn, TSelected>
 
   const rateLimiter = new AsyncRateLimiter<TFn>(fn, mergedOptions)
   const state = injectStore(rateLimiter.store, selector)
 
-  return {
+  const result = {
     ...rateLimiter,
     state,
   } as AngularAsyncRateLimiter<TFn, TSelected>
+
+  const destroyRef = inject(DestroyRef, { optional: true })
+  destroyRef?.onDestroy(() => {
+    if (mergedOptions.onUnmount) {
+      mergedOptions.onUnmount(result)
+    } else {
+      rateLimiter.abort()
+    }
+  })
+
+  return result
 }

package/src/async-throttler/injectAsyncThrottler.ts

@@ -1,14 +1,27 @@
+import { DestroyRef, inject } from '@angular/core'
 import { injectStore } from '@tanstack/angular-store'
 import { AsyncThrottler } from '@tanstack/pacer/async-throttler'
 import { injectPacerOptions } from '../provider/pacer-context'
 import type { Signal } from '@angular/core'
-import type { Store } from '@tanstack/store'
+import type { Store } from '@tanstack/angular-store'
 import type { AnyAsyncFunction } from '@tanstack/pacer/types'
 import type {
   AsyncThrottlerOptions,
   AsyncThrottlerState,
 } from '@tanstack/pacer/async-throttler'
 
+export interface AngularAsyncThrottlerOptions<
+  TFn extends AnyAsyncFunction,
+  TSelected = {},
+> extends AsyncThrottlerOptions<TFn> {
+  /**
+   * Optional callback invoked when the component is destroyed. Receives the throttler instance.
+   * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.
+   * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+   */
+  onUnmount?: (throttler: AngularAsyncThrottler<TFn, TSelected>) => void
+}
+
 export interface AngularAsyncThrottler<
   TFn extends AnyAsyncFunction,
   TSelected = {},
@@ -47,6 +60,20 @@ export interface AngularAsyncThrottler<
  * tracking by providing a selector function. This prevents unnecessary updates and gives you
  * full control over when your component tracks state changes.
  *
+ * ## Cleanup on Destroy
+ *
+ * By default, the function cancels any pending execution and aborts in-flight work when the component is destroyed.
+ * Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+ *
+ * ```ts
+ * const throttler = injectAsyncThrottler(fn, {
+ *   wait: 1000,
+ *   onUnmount: (t) => t.flush()
+ * });
+ * ```
+ *
+ * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+ *
  * @example
  * ```ts
  * // Default behavior - no reactive state subscriptions
@@ -73,20 +100,32 @@ export function injectAsyncThrottler<
   TSelected = {},
 >(
   fn: TFn,
-  options: AsyncThrottlerOptions<TFn>,
+  options: AngularAsyncThrottlerOptions<TFn, TSelected>,
   selector: (state: AsyncThrottlerState<TFn>) => TSelected = () =>
     ({}) as TSelected,
 ): AngularAsyncThrottler<TFn, TSelected> {
   const mergedOptions = {
     ...injectPacerOptions().asyncThrottler,
     ...options,
-  } as AsyncThrottlerOptions<TFn>
+  } as AngularAsyncThrottlerOptions<TFn, TSelected>
 
   const throttler = new AsyncThrottler<TFn>(fn, mergedOptions)
   const state = injectStore(throttler.store, selector)
 
-  return {
+  const result = {
     ...throttler,
     state,
   } as AngularAsyncThrottler<TFn, TSelected>
+
+  const destroyRef = inject(DestroyRef, { optional: true })
+  destroyRef?.onDestroy(() => {
+    if (mergedOptions.onUnmount) {
+      mergedOptions.onUnmount(result)
+    } else {
+      throttler.cancel()
+      throttler.abort()
+    }
+  })
+
+  return result
 }