@tanstack/angular-pacer 0.20.0 → 0.21.0

package/dist/rate-limiter/injectRateLimiter.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectRateLimiter.js","names":[],"sources":["../../src/rate-limiter/injectRateLimiter.ts"],"sourcesContent":["import { injectStore } from '@tanstack/angular-store'\nimport { RateLimiter } from '@tanstack/pacer/rate-limiter'\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  RateLimiterOptions,\n  RateLimiterState,\n} from '@tanstack/pacer/rate-limiter'\n\nexport interface AngularRateLimiter<\n  TFn extends AnyFunction,\n  TSelected = {},\n> extends Omit<RateLimiter<TFn>, 'store'> {\n  /**\n   * Reactive state signal that will be updated when the rate limiter state changes\n   *\n   * Use this instead of `rateLimiter.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `rateLimiter.state` instead of `rateLimiter.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<RateLimiterState>>\n}\n\n/**\n * An Angular function that creates and manages a RateLimiter instance.\n *\n * This is a lower-level function that provides direct access to the RateLimiter's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * Rate limiting is a simple \"hard limit\" approach that allows executions until a maximum count is reached within\n * a time window, then blocks all subsequent calls until the window resets. Unlike throttling or debouncing,\n * it does not attempt to space out or collapse executions intelligently.\n *\n * The rate limiter supports two types of windows:\n * - 'fixed': A strict window that resets after the window period. All executions within the window count\n *   towards the limit, and the window resets completely after the period.\n * - 'sliding': A rolling window that allows executions as old ones expire. This provides a more\n *   consistent rate of execution over time.\n *\n * For smoother execution patterns:\n * - Use throttling when you want consistent spacing between executions (e.g. UI updates)\n * - Use debouncing when you want to collapse rapid-fire events (e.g. search input)\n * - Use rate limiting only when you need to enforce hard limits (e.g. API rate limits)\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 * - `executionCount`: Number of function executions that have been completed\n * - `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations\n * - `rejectionCount`: Number of function executions that have been rejected due to rate limiting\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const rateLimiter = injectRateLimiter(apiCall, {\n *   limit: 5,\n *   window: 60000,\n *   windowType: 'sliding',\n * });\n *\n * // Opt-in to track execution count changes\n * const rateLimiter = injectRateLimiter(\n *   apiCall,\n *   {\n *     limit: 5,\n *     window: 60000,\n *     windowType: 'sliding',\n *   },\n *   (state) => ({ executionCount: state.executionCount })\n * );\n *\n * // Monitor rate limit status\n * const handleClick = () => {\n *   const remaining = rateLimiter.getRemainingInWindow();\n *   if (remaining > 0) {\n *     rateLimiter.maybeExecute(data);\n *   } else {\n *     showRateLimitWarning();\n *   }\n * };\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { executionCount, rejectionCount } = rateLimiter.state();\n * ```\n */\nexport function injectRateLimiter<TFn extends AnyFunction, TSelected = {}>(\n  fn: TFn,\n  options: RateLimiterOptions<TFn>,\n  selector: (state: RateLimiterState) => TSelected = () => ({}) as TSelected,\n): AngularRateLimiter<TFn, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().rateLimiter,\n    ...options,\n  } as RateLimiterOptions<TFn>\n\n  const rateLimiter = new RateLimiter<TFn>(fn, mergedOptions)\n  const state = injectStore(rateLimiter.store, selector)\n\n  return {\n    ...rateLimiter,\n    state,\n  } as AngularRateLimiter<TFn, TSelected>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,SAAgB,kBACd,IACA,SACA,kBAA0D,EAAE,GACxB;CAMpC,MAAM,cAAc,IAAI,YAAiB,IALnB;EACpB,GAAG,oBAAoB,CAAC;EACxB,GAAG;EACJ,CAE0D;CAC3D,MAAM,QAAQ,YAAY,YAAY,OAAO,SAAS;AAEtD,QAAO;EACL,GAAG;EACH;EACD"}
+{"version":3,"file":"injectRateLimiter.js","names":[],"sources":["../../src/rate-limiter/injectRateLimiter.ts"],"sourcesContent":["import { DestroyRef, inject } from '@angular/core'\nimport { injectStore } from '@tanstack/angular-store'\nimport { RateLimiter } from '@tanstack/pacer/rate-limiter'\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  RateLimiterOptions,\n  RateLimiterState,\n} from '@tanstack/pacer/rate-limiter'\n\nexport interface AngularRateLimiterOptions<\n  TFn extends AnyFunction,\n  TSelected = {},\n> extends RateLimiterOptions<TFn> {\n  /**\n   * Optional callback invoked when the component is destroyed. Receives the rate limiter instance.\n   */\n  onUnmount?: (rateLimiter: AngularRateLimiter<TFn, TSelected>) => void\n}\n\nexport interface AngularRateLimiter<\n  TFn extends AnyFunction,\n  TSelected = {},\n> extends Omit<RateLimiter<TFn>, 'store'> {\n  /**\n   * Reactive state signal that will be updated when the rate limiter state changes\n   *\n   * Use this instead of `rateLimiter.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `rateLimiter.state` instead of `rateLimiter.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<RateLimiterState>>\n}\n\n/**\n * An Angular function that creates and manages a RateLimiter instance.\n *\n * This is a lower-level function that provides direct access to the RateLimiter's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * Rate limiting is a simple \"hard limit\" approach that allows executions until a maximum count is reached within\n * a time window, then blocks all subsequent calls until the window resets. Unlike throttling or debouncing,\n * it does not attempt to space out or collapse executions intelligently.\n *\n * The rate limiter supports two types of windows:\n * - 'fixed': A strict window that resets after the window period. All executions within the window count\n *   towards the limit, and the window resets completely after the period.\n * - 'sliding': A rolling window that allows executions as old ones expire. This provides a more\n *   consistent rate of execution over time.\n *\n * For smoother execution patterns:\n * - Use throttling when you want consistent spacing between executions (e.g. UI updates)\n * - Use debouncing when you want to collapse rapid-fire events (e.g. search input)\n * - Use rate limiting only when you need to enforce hard limits (e.g. API rate limits)\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 * - `executionCount`: Number of function executions that have been completed\n * - `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations\n * - `rejectionCount`: Number of function executions that have been rejected due to rate limiting\n *\n * ## Cleanup on Destroy\n *\n * Use the `onUnmount` option to run a callback when the component is destroyed.\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const rateLimiter = injectRateLimiter(apiCall, {\n *   limit: 5,\n *   window: 60000,\n *   windowType: 'sliding',\n * });\n *\n * // Opt-in to track execution count changes\n * const rateLimiter = injectRateLimiter(\n *   apiCall,\n *   {\n *     limit: 5,\n *     window: 60000,\n *     windowType: 'sliding',\n *   },\n *   (state) => ({ executionCount: state.executionCount })\n * );\n *\n * // Monitor rate limit status\n * const handleClick = () => {\n *   const remaining = rateLimiter.getRemainingInWindow();\n *   if (remaining > 0) {\n *     rateLimiter.maybeExecute(data);\n *   } else {\n *     showRateLimitWarning();\n *   }\n * };\n *\n * // Access the selected state (will be empty object {} unless selector provided)\n * const { executionCount, rejectionCount } = rateLimiter.state();\n * ```\n */\nexport function injectRateLimiter<TFn extends AnyFunction, TSelected = {}>(\n  fn: TFn,\n  options: AngularRateLimiterOptions<TFn, TSelected>,\n  selector: (state: RateLimiterState) => TSelected = () => ({}) as TSelected,\n): AngularRateLimiter<TFn, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().rateLimiter,\n    ...options,\n  } as AngularRateLimiterOptions<TFn, TSelected>\n\n  const rateLimiter = new RateLimiter<TFn>(fn, mergedOptions)\n  const state = injectStore(rateLimiter.store, selector)\n\n  const result = {\n    ...rateLimiter,\n    state,\n  } as AngularRateLimiter<TFn, TSelected>\n\n  const destroyRef = inject(DestroyRef, { optional: true })\n  destroyRef?.onDestroy(() => {\n    if (mergedOptions.onUnmount) {\n      mergedOptions.onUnmount(result)\n    }\n  })\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,SAAgB,kBACd,IACA,SACA,kBAA0D,EAAE,GACxB;CACpC,MAAM,gBAAgB;EACpB,GAAG,oBAAoB,CAAC;EACxB,GAAG;EACJ;CAED,MAAM,cAAc,IAAI,YAAiB,IAAI,cAAc;CAC3D,MAAM,QAAQ,YAAY,YAAY,OAAO,SAAS;CAEtD,MAAM,SAAS;EACb,GAAG;EACH;EACD;AAGD,CADmB,OAAO,YAAY,EAAE,UAAU,MAAM,CAAC,EAC7C,gBAAgB;AAC1B,MAAI,cAAc,UAChB,eAAc,UAAU,OAAO;GAEjC;AAEF,QAAO"}

package/dist/throttler/index.d.cts

@@ -1,6 +1,6 @@
 import { injectThrottledCallback } from "./injectThrottledCallback.cjs";
-import { AngularThrottler, injectThrottler } from "./injectThrottler.cjs";
+import { AngularThrottler, AngularThrottlerOptions, injectThrottler } from "./injectThrottler.cjs";
 import { ThrottledSignal, injectThrottledSignal } from "./injectThrottledSignal.cjs";
 import { injectThrottledValue } from "./injectThrottledValue.cjs";
 export * from "@tanstack/pacer/throttler";
-export { AngularThrottler, ThrottledSignal, injectThrottledCallback, injectThrottledSignal, injectThrottledValue, injectThrottler };
+export { AngularThrottler, AngularThrottlerOptions, ThrottledSignal, injectThrottledCallback, injectThrottledSignal, injectThrottledValue, injectThrottler };

package/dist/throttler/index.d.ts

@@ -1,6 +1,6 @@
 import { injectThrottledCallback } from "./injectThrottledCallback.js";
-import { AngularThrottler, injectThrottler } from "./injectThrottler.js";
+import { AngularThrottler, AngularThrottlerOptions, injectThrottler } from "./injectThrottler.js";
 import { ThrottledSignal, injectThrottledSignal } from "./injectThrottledSignal.js";
 import { injectThrottledValue } from "./injectThrottledValue.js";
 export * from "@tanstack/pacer/throttler";
-export { AngularThrottler, ThrottledSignal, injectThrottledCallback, injectThrottledSignal, injectThrottledValue, injectThrottler };
+export { AngularThrottler, AngularThrottlerOptions, ThrottledSignal, injectThrottledCallback, injectThrottledSignal, injectThrottledValue, injectThrottler };

package/dist/throttler/injectThrottler.cjs

@@ -1,4 +1,5 @@
 const require_pacer_context = require('../provider/pacer-context.cjs');
+let _angular_core = require("@angular/core");
 let _tanstack_angular_store = require("@tanstack/angular-store");
 let _tanstack_pacer_throttler = require("@tanstack/pacer/throttler");
 
@@ -35,6 +36,18 @@ let _tanstack_pacer_throttler = require("@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 @@ let _tanstack_pacer_throttler = require("@tanstack/pacer/throttler");
 * ```
 */
 function injectThrottler(fn, options, selector = () => ({})) {
-	const throttler = new _tanstack_pacer_throttler.Throttler(fn, {
+	const mergedOptions = {
 		...require_pacer_context.injectPacerOptions().throttler,
 		...options
-	});
+	};
+	const throttler = new _tanstack_pacer_throttler.Throttler(fn, mergedOptions);
 	const state = (0, _tanstack_angular_store.injectStore)(throttler.store, selector);
-	return {
+	const result = {
 		...throttler,
 		state
 	};
+	(0, _angular_core.inject)(_angular_core.DestroyRef, { optional: true })?.onDestroy(() => {
+		if (mergedOptions.onUnmount) mergedOptions.onUnmount(result);
+		else throttler.cancel();
+	});
+	return result;
 }
 
 //#endregion

package/dist/throttler/injectThrottler.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"injectThrottler.cjs","names":["Throttler","injectPacerOptions"],"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,IAAIA,oCAAe,IALf;EACpB,GAAGC,0CAAoB,CAAC;EACxB,GAAG;EACJ,CAEsD;CACvD,MAAM,iDAAoB,UAAU,OAAO,SAAS;AAEpD,QAAO;EACL,GAAG;EACH;EACD"}
+{"version":3,"file":"injectThrottler.cjs","names":["injectPacerOptions","Throttler","DestroyRef"],"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,GAAGA,0CAAoB,CAAC;EACxB,GAAG;EACJ;CAED,MAAM,YAAY,IAAIC,oCAAe,IAAI,cAAc;CACvD,MAAM,iDAAoB,UAAU,OAAO,SAAS;CAEpD,MAAM,SAAS;EACb,GAAG;EACH;EACD;AAGD,2BAD0BC,0BAAY,EAAE,UAAU,MAAM,CAAC,EAC7C,gBAAgB;AAC1B,MAAI,cAAc,UAChB,eAAc,UAAU,OAAO;MAE/B,WAAU,QAAQ;GAEpB;AAEF,QAAO"}

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.21.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.8.1",
+    "@tanstack/pacer": "0.19.0"
   },
   "devDependencies": {
-    "@angular/core": "^21.0.0",
-    "@types/node": "^25.0.10"
+    "@angular/core": "^21.1.4",
+    "@types/node": "^25.2.3"
   },
   "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/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
 }