@tanstack/angular-pacer 0.20.0 → 0.22.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -106,21 +106,21 @@ A lightweight timing and scheduling library for debouncing, throttling, rate lim
 
 <table align="center">
   <tr>
-    <td>
+        <td>
       <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
         <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
-          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
-          <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" />
+          <img src="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" height="40" alt="CodeRabbit" />
         </picture>
       </a>
     </td>
     <td>
       <a href="https://www.cloudflare.com?utm_source=tanstack">
         <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
-          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
-          <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" />
+          <img src="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" height="60" alt="Cloudflare" />
         </picture>
       </a>
     </td>

package/dist/async-batcher/index.d.cts

@@ -1,4 +1,4 @@
 import { injectAsyncBatchedCallback } from "./injectAsyncBatchedCallback.cjs";
-import { AngularAsyncBatcher, injectAsyncBatcher } from "./injectAsyncBatcher.cjs";
+import { AngularAsyncBatcher, AngularAsyncBatcherOptions, injectAsyncBatcher } from "./injectAsyncBatcher.cjs";
 export * from "@tanstack/pacer/async-batcher";
-export { AngularAsyncBatcher, injectAsyncBatchedCallback, injectAsyncBatcher };
+export { AngularAsyncBatcher, AngularAsyncBatcherOptions, injectAsyncBatchedCallback, injectAsyncBatcher };

package/dist/async-batcher/index.d.ts

@@ -1,4 +1,4 @@
 import { injectAsyncBatchedCallback } from "./injectAsyncBatchedCallback.js";
-import { AngularAsyncBatcher, injectAsyncBatcher } from "./injectAsyncBatcher.js";
+import { AngularAsyncBatcher, AngularAsyncBatcherOptions, injectAsyncBatcher } from "./injectAsyncBatcher.js";
 export * from "@tanstack/pacer/async-batcher";
-export { AngularAsyncBatcher, injectAsyncBatchedCallback, injectAsyncBatcher };
+export { AngularAsyncBatcher, AngularAsyncBatcherOptions, injectAsyncBatchedCallback, injectAsyncBatcher };

package/dist/async-batcher/injectAsyncBatcher.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_async_batcher = require("@tanstack/pacer/async-batcher");
 
@@ -22,6 +23,20 @@ let _tanstack_pacer_async_batcher = require("@tanstack/pacer/async-batcher");
 * 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
@@ -45,15 +60,24 @@ let _tanstack_pacer_async_batcher = require("@tanstack/pacer/async-batcher");
 * ```
 */
 function injectAsyncBatcher(fn, options = {}, selector = () => ({})) {
-	const batcher = new _tanstack_pacer_async_batcher.AsyncBatcher(fn, {
+	const mergedOptions = {
 		...require_pacer_context.injectPacerOptions().asyncBatcher,
 		...options
-	});
+	};
+	const batcher = new _tanstack_pacer_async_batcher.AsyncBatcher(fn, mergedOptions);
 	const state = (0, _tanstack_angular_store.injectStore)(batcher.store, selector);
-	return {
+	const result = {
 		...batcher,
 		state
 	};
+	(0, _angular_core.inject)(_angular_core.DestroyRef, { optional: true })?.onDestroy(() => {
+		if (mergedOptions.onUnmount) mergedOptions.onUnmount(result);
+		else {
+			batcher.cancel();
+			batcher.abort();
+		}
+	});
+	return result;
 }
 
 //#endregion

package/dist/async-batcher/injectAsyncBatcher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"injectAsyncBatcher.cjs","names":["AsyncBatcher","injectPacerOptions"],"sources":["../../src/async-batcher/injectAsyncBatcher.ts"],"sourcesContent":["import { injectStore } from '@tanstack/angular-store'\nimport { AsyncBatcher } from '@tanstack/pacer/async-batcher'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/store'\nimport type {\n  AsyncBatcherOptions,\n  AsyncBatcherState,\n} from '@tanstack/pacer/async-batcher'\n\nexport interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<\n  AsyncBatcher<TValue>,\n  'store'\n> {\n  /**\n   * Reactive state signal that will be updated when the async batcher state changes\n   *\n   * Use this instead of `batcher.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<AsyncBatcherState<TValue>>>\n}\n\n/**\n * An Angular function that creates and manages an AsyncBatcher instance.\n *\n * This is a lower-level function that provides direct access to the AsyncBatcher's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * The AsyncBatcher collects items and processes them in batches asynchronously with support for\n * promise-based processing, error handling, retry capabilities, and abort support.\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 * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const batcher = injectAsyncBatcher(\n *   async (items: Array<Data>) => {\n *     const response = await fetch('/api/batch', {\n *       method: 'POST',\n *       body: JSON.stringify(items)\n *     });\n *     return response.json();\n *   },\n *   { maxSize: 10, wait: 2000 }\n * );\n *\n * // Add items\n * batcher.addItem(data1);\n * batcher.addItem(data2);\n *\n * // Access the selected state\n * const { items, isExecuting } = batcher.state();\n * ```\n */\nexport function injectAsyncBatcher<TValue, TSelected = {}>(\n  fn: (items: Array<TValue>) => Promise<any>,\n  options: AsyncBatcherOptions<TValue> = {},\n  selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>\n    ({}) as TSelected,\n): AngularAsyncBatcher<TValue, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().asyncBatcher,\n    ...options,\n  } as AsyncBatcherOptions<TValue>\n\n  const batcher = new AsyncBatcher<TValue>(fn, mergedOptions)\n  const state = injectStore(batcher.store, selector)\n\n  return {\n    ...batcher,\n    state,\n  } as AngularAsyncBatcher<TValue, TSelected>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,SAAgB,mBACd,IACA,UAAuC,EAAE,EACzC,kBACG,EAAE,GACmC;CAMxC,MAAM,UAAU,IAAIA,2CAAqB,IALnB;EACpB,GAAGC,0CAAoB,CAAC;EACxB,GAAG;EACJ,CAE0D;CAC3D,MAAM,iDAAoB,QAAQ,OAAO,SAAS;AAElD,QAAO;EACL,GAAG;EACH;EACD"}
+{"version":3,"file":"injectAsyncBatcher.cjs","names":["injectPacerOptions","AsyncBatcher","DestroyRef"],"sources":["../../src/async-batcher/injectAsyncBatcher.ts"],"sourcesContent":["import { DestroyRef, inject } from '@angular/core'\nimport { injectStore } from '@tanstack/angular-store'\nimport { AsyncBatcher } from '@tanstack/pacer/async-batcher'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/angular-store'\nimport type {\n  AsyncBatcherOptions,\n  AsyncBatcherState,\n} from '@tanstack/pacer/async-batcher'\n\nexport interface AngularAsyncBatcherOptions<\n  TValue,\n  TSelected = {},\n> extends AsyncBatcherOptions<TValue> {\n  /**\n   * Optional callback invoked when the component is destroyed. Receives the batcher instance.\n   * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.\n   * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.\n   */\n  onUnmount?: (batcher: AngularAsyncBatcher<TValue, TSelected>) => void\n}\n\nexport interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<\n  AsyncBatcher<TValue>,\n  'store'\n> {\n  /**\n   * Reactive state signal that will be updated when the async batcher state changes\n   *\n   * Use this instead of `batcher.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<AsyncBatcherState<TValue>>>\n}\n\n/**\n * An Angular function that creates and manages an AsyncBatcher instance.\n *\n * This is a lower-level function that provides direct access to the AsyncBatcher's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * The AsyncBatcher collects items and processes them in batches asynchronously with support for\n * promise-based processing, error handling, retry capabilities, and abort support.\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 * ## Cleanup on Destroy\n *\n * By default, the function cancels any pending batch and aborts in-flight work 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 batcher = injectAsyncBatcher(fn, {\n *   maxSize: 10,\n *   onUnmount: (b) => b.flush()\n * });\n * ```\n *\n * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const batcher = injectAsyncBatcher(\n *   async (items: Array<Data>) => {\n *     const response = await fetch('/api/batch', {\n *       method: 'POST',\n *       body: JSON.stringify(items)\n *     });\n *     return response.json();\n *   },\n *   { maxSize: 10, wait: 2000 }\n * );\n *\n * // Add items\n * batcher.addItem(data1);\n * batcher.addItem(data2);\n *\n * // Access the selected state\n * const { items, isExecuting } = batcher.state();\n * ```\n */\nexport function injectAsyncBatcher<TValue, TSelected = {}>(\n  fn: (items: Array<TValue>) => Promise<any>,\n  options: AngularAsyncBatcherOptions<TValue, TSelected> = {},\n  selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>\n    ({}) as TSelected,\n): AngularAsyncBatcher<TValue, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().asyncBatcher,\n    ...options,\n  } as AngularAsyncBatcherOptions<TValue, TSelected>\n\n  const batcher = new AsyncBatcher<TValue>(fn, mergedOptions)\n  const state = injectStore(batcher.store, selector)\n\n  const result = {\n    ...batcher,\n    state,\n  } as AngularAsyncBatcher<TValue, TSelected>\n\n  const destroyRef = inject(DestroyRef, { optional: true })\n  destroyRef?.onDestroy(() => {\n    if (mergedOptions.onUnmount) {\n      mergedOptions.onUnmount(result)\n    } else {\n      batcher.cancel()\n      batcher.abort()\n    }\n  })\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAgB,mBACd,IACA,UAAyD,EAAE,EAC3D,kBACG,EAAE,GACmC;CACxC,MAAM,gBAAgB;EACpB,GAAGA,0CAAoB,CAAC;EACxB,GAAG;EACJ;CAED,MAAM,UAAU,IAAIC,2CAAqB,IAAI,cAAc;CAC3D,MAAM,iDAAoB,QAAQ,OAAO,SAAS;CAElD,MAAM,SAAS;EACb,GAAG;EACH;EACD;AAGD,2BAD0BC,0BAAY,EAAE,UAAU,MAAM,CAAC,EAC7C,gBAAgB;AAC1B,MAAI,cAAc,UAChB,eAAc,UAAU,OAAO;OAC1B;AACL,WAAQ,QAAQ;AAChB,WAAQ,OAAO;;GAEjB;AAEF,QAAO"}

package/dist/async-batcher/injectAsyncBatcher.d.cts

@@ -1,8 +1,16 @@
 import { AsyncBatcher, AsyncBatcherOptions, AsyncBatcherState } from "@tanstack/pacer/async-batcher";
 import { Signal } from "@angular/core";
-import { Store } from "@tanstack/store";
+import { Store } from "@tanstack/angular-store";
 
 //#region src/async-batcher/injectAsyncBatcher.d.ts
+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;
+}
 interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<AsyncBatcher<TValue>, 'store'> {
   /**
    * Reactive state signal that will be updated when the async batcher state changes
@@ -35,6 +43,20 @@ interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<AsyncBatcher<
  * 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
@@ -57,7 +79,7 @@ interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<AsyncBatcher<
  * const { items, isExecuting } = batcher.state();
  * ```
  */
-declare function injectAsyncBatcher<TValue, TSelected = {}>(fn: (items: Array<TValue>) => Promise<any>, options?: AsyncBatcherOptions<TValue>, selector?: (state: AsyncBatcherState<TValue>) => TSelected): AngularAsyncBatcher<TValue, TSelected>;
+declare function injectAsyncBatcher<TValue, TSelected = {}>(fn: (items: Array<TValue>) => Promise<any>, options?: AngularAsyncBatcherOptions<TValue, TSelected>, selector?: (state: AsyncBatcherState<TValue>) => TSelected): AngularAsyncBatcher<TValue, TSelected>;
 //#endregion
-export { AngularAsyncBatcher, injectAsyncBatcher };
+export { AngularAsyncBatcher, AngularAsyncBatcherOptions, injectAsyncBatcher };
 //# sourceMappingURL=injectAsyncBatcher.d.cts.map

package/dist/async-batcher/injectAsyncBatcher.d.ts

@@ -1,8 +1,16 @@
 import { Signal } from "@angular/core";
+import { Store } from "@tanstack/angular-store";
 import { AsyncBatcher, AsyncBatcherOptions, AsyncBatcherState } from "@tanstack/pacer/async-batcher";
-import { Store } from "@tanstack/store";
 
 //#region src/async-batcher/injectAsyncBatcher.d.ts
+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;
+}
 interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<AsyncBatcher<TValue>, 'store'> {
   /**
    * Reactive state signal that will be updated when the async batcher state changes
@@ -35,6 +43,20 @@ interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<AsyncBatcher<
  * 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
@@ -57,7 +79,7 @@ interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<AsyncBatcher<
  * const { items, isExecuting } = batcher.state();
  * ```
  */
-declare function injectAsyncBatcher<TValue, TSelected = {}>(fn: (items: Array<TValue>) => Promise<any>, options?: AsyncBatcherOptions<TValue>, selector?: (state: AsyncBatcherState<TValue>) => TSelected): AngularAsyncBatcher<TValue, TSelected>;
+declare function injectAsyncBatcher<TValue, TSelected = {}>(fn: (items: Array<TValue>) => Promise<any>, options?: AngularAsyncBatcherOptions<TValue, TSelected>, selector?: (state: AsyncBatcherState<TValue>) => TSelected): AngularAsyncBatcher<TValue, TSelected>;
 //#endregion
-export { AngularAsyncBatcher, injectAsyncBatcher };
+export { AngularAsyncBatcher, AngularAsyncBatcherOptions, injectAsyncBatcher };
 //# sourceMappingURL=injectAsyncBatcher.d.ts.map

package/dist/async-batcher/injectAsyncBatcher.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 { AsyncBatcher } from "@tanstack/pacer/async-batcher";
 
@@ -22,6 +23,20 @@ import { AsyncBatcher } from "@tanstack/pacer/async-batcher";
 * 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
@@ -45,15 +60,24 @@ import { AsyncBatcher } from "@tanstack/pacer/async-batcher";
 * ```
 */
 function injectAsyncBatcher(fn, options = {}, selector = () => ({})) {
-	const batcher = new AsyncBatcher(fn, {
+	const mergedOptions = {
 		...injectPacerOptions().asyncBatcher,
 		...options
-	});
+	};
+	const batcher = new AsyncBatcher(fn, mergedOptions);
 	const state = injectStore(batcher.store, selector);
-	return {
+	const result = {
 		...batcher,
 		state
 	};
+	inject(DestroyRef, { optional: true })?.onDestroy(() => {
+		if (mergedOptions.onUnmount) mergedOptions.onUnmount(result);
+		else {
+			batcher.cancel();
+			batcher.abort();
+		}
+	});
+	return result;
 }
 
 //#endregion

package/dist/async-batcher/injectAsyncBatcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectAsyncBatcher.js","names":[],"sources":["../../src/async-batcher/injectAsyncBatcher.ts"],"sourcesContent":["import { injectStore } from '@tanstack/angular-store'\nimport { AsyncBatcher } from '@tanstack/pacer/async-batcher'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/store'\nimport type {\n  AsyncBatcherOptions,\n  AsyncBatcherState,\n} from '@tanstack/pacer/async-batcher'\n\nexport interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<\n  AsyncBatcher<TValue>,\n  'store'\n> {\n  /**\n   * Reactive state signal that will be updated when the async batcher state changes\n   *\n   * Use this instead of `batcher.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<AsyncBatcherState<TValue>>>\n}\n\n/**\n * An Angular function that creates and manages an AsyncBatcher instance.\n *\n * This is a lower-level function that provides direct access to the AsyncBatcher's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * The AsyncBatcher collects items and processes them in batches asynchronously with support for\n * promise-based processing, error handling, retry capabilities, and abort support.\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 * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const batcher = injectAsyncBatcher(\n *   async (items: Array<Data>) => {\n *     const response = await fetch('/api/batch', {\n *       method: 'POST',\n *       body: JSON.stringify(items)\n *     });\n *     return response.json();\n *   },\n *   { maxSize: 10, wait: 2000 }\n * );\n *\n * // Add items\n * batcher.addItem(data1);\n * batcher.addItem(data2);\n *\n * // Access the selected state\n * const { items, isExecuting } = batcher.state();\n * ```\n */\nexport function injectAsyncBatcher<TValue, TSelected = {}>(\n  fn: (items: Array<TValue>) => Promise<any>,\n  options: AsyncBatcherOptions<TValue> = {},\n  selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>\n    ({}) as TSelected,\n): AngularAsyncBatcher<TValue, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().asyncBatcher,\n    ...options,\n  } as AsyncBatcherOptions<TValue>\n\n  const batcher = new AsyncBatcher<TValue>(fn, mergedOptions)\n  const state = injectStore(batcher.store, selector)\n\n  return {\n    ...batcher,\n    state,\n  } as AngularAsyncBatcher<TValue, TSelected>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,SAAgB,mBACd,IACA,UAAuC,EAAE,EACzC,kBACG,EAAE,GACmC;CAMxC,MAAM,UAAU,IAAI,aAAqB,IALnB;EACpB,GAAG,oBAAoB,CAAC;EACxB,GAAG;EACJ,CAE0D;CAC3D,MAAM,QAAQ,YAAY,QAAQ,OAAO,SAAS;AAElD,QAAO;EACL,GAAG;EACH;EACD"}
+{"version":3,"file":"injectAsyncBatcher.js","names":[],"sources":["../../src/async-batcher/injectAsyncBatcher.ts"],"sourcesContent":["import { DestroyRef, inject } from '@angular/core'\nimport { injectStore } from '@tanstack/angular-store'\nimport { AsyncBatcher } from '@tanstack/pacer/async-batcher'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/angular-store'\nimport type {\n  AsyncBatcherOptions,\n  AsyncBatcherState,\n} from '@tanstack/pacer/async-batcher'\n\nexport interface AngularAsyncBatcherOptions<\n  TValue,\n  TSelected = {},\n> extends AsyncBatcherOptions<TValue> {\n  /**\n   * Optional callback invoked when the component is destroyed. Receives the batcher instance.\n   * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.\n   * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.\n   */\n  onUnmount?: (batcher: AngularAsyncBatcher<TValue, TSelected>) => void\n}\n\nexport interface AngularAsyncBatcher<TValue, TSelected = {}> extends Omit<\n  AsyncBatcher<TValue>,\n  'store'\n> {\n  /**\n   * Reactive state signal that will be updated when the async batcher state changes\n   *\n   * Use this instead of `batcher.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<AsyncBatcherState<TValue>>>\n}\n\n/**\n * An Angular function that creates and manages an AsyncBatcher instance.\n *\n * This is a lower-level function that provides direct access to the AsyncBatcher's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * The AsyncBatcher collects items and processes them in batches asynchronously with support for\n * promise-based processing, error handling, retry capabilities, and abort support.\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 * ## Cleanup on Destroy\n *\n * By default, the function cancels any pending batch and aborts in-flight work 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 batcher = injectAsyncBatcher(fn, {\n *   maxSize: 10,\n *   onUnmount: (b) => b.flush()\n * });\n * ```\n *\n * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const batcher = injectAsyncBatcher(\n *   async (items: Array<Data>) => {\n *     const response = await fetch('/api/batch', {\n *       method: 'POST',\n *       body: JSON.stringify(items)\n *     });\n *     return response.json();\n *   },\n *   { maxSize: 10, wait: 2000 }\n * );\n *\n * // Add items\n * batcher.addItem(data1);\n * batcher.addItem(data2);\n *\n * // Access the selected state\n * const { items, isExecuting } = batcher.state();\n * ```\n */\nexport function injectAsyncBatcher<TValue, TSelected = {}>(\n  fn: (items: Array<TValue>) => Promise<any>,\n  options: AngularAsyncBatcherOptions<TValue, TSelected> = {},\n  selector: (state: AsyncBatcherState<TValue>) => TSelected = () =>\n    ({}) as TSelected,\n): AngularAsyncBatcher<TValue, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().asyncBatcher,\n    ...options,\n  } as AngularAsyncBatcherOptions<TValue, TSelected>\n\n  const batcher = new AsyncBatcher<TValue>(fn, mergedOptions)\n  const state = injectStore(batcher.store, selector)\n\n  const result = {\n    ...batcher,\n    state,\n  } as AngularAsyncBatcher<TValue, TSelected>\n\n  const destroyRef = inject(DestroyRef, { optional: true })\n  destroyRef?.onDestroy(() => {\n    if (mergedOptions.onUnmount) {\n      mergedOptions.onUnmount(result)\n    } else {\n      batcher.cancel()\n      batcher.abort()\n    }\n  })\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAgB,mBACd,IACA,UAAyD,EAAE,EAC3D,kBACG,EAAE,GACmC;CACxC,MAAM,gBAAgB;EACpB,GAAG,oBAAoB,CAAC;EACxB,GAAG;EACJ;CAED,MAAM,UAAU,IAAI,aAAqB,IAAI,cAAc;CAC3D,MAAM,QAAQ,YAAY,QAAQ,OAAO,SAAS;CAElD,MAAM,SAAS;EACb,GAAG;EACH;EACD;AAGD,CADmB,OAAO,YAAY,EAAE,UAAU,MAAM,CAAC,EAC7C,gBAAgB;AAC1B,MAAI,cAAc,UAChB,eAAc,UAAU,OAAO;OAC1B;AACL,WAAQ,QAAQ;AAChB,WAAQ,OAAO;;GAEjB;AAEF,QAAO"}

package/dist/async-debouncer/index.d.cts

@@ -1,4 +1,4 @@
 import { injectAsyncDebouncedCallback } from "./injectAsyncDebouncedCallback.cjs";
-import { AngularAsyncDebouncer, injectAsyncDebouncer } from "./injectAsyncDebouncer.cjs";
+import { AngularAsyncDebouncer, AngularAsyncDebouncerOptions, injectAsyncDebouncer } from "./injectAsyncDebouncer.cjs";
 export * from "@tanstack/pacer/async-debouncer";
-export { AngularAsyncDebouncer, injectAsyncDebouncedCallback, injectAsyncDebouncer };
+export { AngularAsyncDebouncer, AngularAsyncDebouncerOptions, injectAsyncDebouncedCallback, injectAsyncDebouncer };

package/dist/async-debouncer/index.d.ts

@@ -1,4 +1,4 @@
 import { injectAsyncDebouncedCallback } from "./injectAsyncDebouncedCallback.js";
-import { AngularAsyncDebouncer, injectAsyncDebouncer } from "./injectAsyncDebouncer.js";
+import { AngularAsyncDebouncer, AngularAsyncDebouncerOptions, injectAsyncDebouncer } from "./injectAsyncDebouncer.js";
 export * from "@tanstack/pacer/async-debouncer";
-export { AngularAsyncDebouncer, injectAsyncDebouncedCallback, injectAsyncDebouncer };
+export { AngularAsyncDebouncer, AngularAsyncDebouncerOptions, injectAsyncDebouncedCallback, injectAsyncDebouncer };

package/dist/async-debouncer/injectAsyncDebouncer.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_async_debouncer = require("@tanstack/pacer/async-debouncer");
 
@@ -37,6 +38,20 @@ let _tanstack_pacer_async_debouncer = require("@tanstack/pacer/async-debouncer")
 * - `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
@@ -67,15 +82,24 @@ let _tanstack_pacer_async_debouncer = require("@tanstack/pacer/async-debouncer")
 * ```
 */
 function injectAsyncDebouncer(fn, options, selector = () => ({})) {
-	const debouncer = new _tanstack_pacer_async_debouncer.AsyncDebouncer(fn, {
+	const mergedOptions = {
 		...require_pacer_context.injectPacerOptions().asyncDebouncer,
 		...options
-	});
+	};
+	const debouncer = new _tanstack_pacer_async_debouncer.AsyncDebouncer(fn, mergedOptions);
 	const state = (0, _tanstack_angular_store.injectStore)(debouncer.store, selector);
-	return {
+	const result = {
 		...debouncer,
 		state
 	};
+	(0, _angular_core.inject)(_angular_core.DestroyRef, { optional: true })?.onDestroy(() => {
+		if (mergedOptions.onUnmount) mergedOptions.onUnmount(result);
+		else {
+			debouncer.cancel();
+			debouncer.abort();
+		}
+	});
+	return result;
 }
 
 //#endregion

package/dist/async-debouncer/injectAsyncDebouncer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"injectAsyncDebouncer.cjs","names":["AsyncDebouncer","injectPacerOptions"],"sources":["../../src/async-debouncer/injectAsyncDebouncer.ts"],"sourcesContent":["import { injectStore } from '@tanstack/angular-store'\nimport { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/store'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\nimport type {\n  AsyncDebouncerOptions,\n  AsyncDebouncerState,\n} from '@tanstack/pacer/async-debouncer'\n\nexport interface AngularAsyncDebouncer<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n> extends Omit<AsyncDebouncer<TFn>, 'store'> {\n  /**\n   * Reactive state signal that will be updated when the async debouncer state changes\n   *\n   * Use this instead of `debouncer.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>\n}\n\n/**\n * An Angular function that creates and manages an AsyncDebouncer instance.\n *\n * This is a lower-level function that provides direct access to the AsyncDebouncer's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * This function provides async debouncing functionality with promise support, error handling,\n * retry capabilities, and abort support.\n *\n * The debouncer will only execute the function after the specified wait time has elapsed\n * since the last call. If the function is called again before the wait time expires, the\n * timer resets and starts waiting again.\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 debouncer can execute on the leading edge\n * - `errorCount`: Number of function executions that have resulted in errors\n * - `isExecuting`: Whether the debounced function is currently executing asynchronously\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastResult`: The result from the most recent successful function execution\n * - `settleCount`: Number of function executions that have completed (either successfully or with errors)\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')\n * - `successCount`: Number of function executions that have completed successfully\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const debouncer = injectAsyncDebouncer(\n *   async (query: string) => {\n *     const response = await fetch(`/api/search?q=${query}`);\n *     return response.json();\n *   },\n *   { wait: 500 }\n * );\n *\n * // Opt-in to track isExecuting changes (optimized for loading states)\n * const debouncer = injectAsyncDebouncer(\n *   async (query: string) => fetchSearchResults(query),\n *   { wait: 500 },\n *   (state) => ({ isExecuting: state.isExecuting, isPending: state.isPending })\n * );\n *\n * // In an event handler\n * const handleChange = async (e: Event) => {\n *   const target = e.target as HTMLInputElement;\n *   const result = await debouncer.maybeExecute(target.value);\n *   console.log('Search results:', result);\n * };\n *\n * // Access the selected state\n * const { isExecuting, errorCount } = debouncer.state();\n * ```\n */\nexport function injectAsyncDebouncer<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n>(\n  fn: TFn,\n  options: AsyncDebouncerOptions<TFn>,\n  selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>\n    ({}) as TSelected,\n): AngularAsyncDebouncer<TFn, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().asyncDebouncer,\n    ...options,\n  } as AsyncDebouncerOptions<TFn>\n\n  const debouncer = new AsyncDebouncer<TFn>(fn, mergedOptions)\n  const state = injectStore(debouncer.store, selector)\n\n  return {\n    ...debouncer,\n    state,\n  } as AngularAsyncDebouncer<TFn, TSelected>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2FA,SAAgB,qBAId,IACA,SACA,kBACG,EAAE,GACkC;CAMvC,MAAM,YAAY,IAAIA,+CAAoB,IALpB;EACpB,GAAGC,0CAAoB,CAAC;EACxB,GAAG;EACJ,CAE2D;CAC5D,MAAM,iDAAoB,UAAU,OAAO,SAAS;AAEpD,QAAO;EACL,GAAG;EACH;EACD"}
+{"version":3,"file":"injectAsyncDebouncer.cjs","names":["injectPacerOptions","AsyncDebouncer","DestroyRef"],"sources":["../../src/async-debouncer/injectAsyncDebouncer.ts"],"sourcesContent":["import { DestroyRef, inject } from '@angular/core'\nimport { injectStore } from '@tanstack/angular-store'\nimport { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/angular-store'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\nimport type {\n  AsyncDebouncerOptions,\n  AsyncDebouncerState,\n} from '@tanstack/pacer/async-debouncer'\n\nexport interface AngularAsyncDebouncerOptions<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n> extends AsyncDebouncerOptions<TFn> {\n  /**\n   * Optional callback invoked when the component is destroyed. Receives the debouncer instance.\n   * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.\n   * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.\n   */\n  onUnmount?: (debouncer: AngularAsyncDebouncer<TFn, TSelected>) => void\n}\n\nexport interface AngularAsyncDebouncer<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n> extends Omit<AsyncDebouncer<TFn>, 'store'> {\n  /**\n   * Reactive state signal that will be updated when the async debouncer state changes\n   *\n   * Use this instead of `debouncer.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>\n}\n\n/**\n * An Angular function that creates and manages an AsyncDebouncer instance.\n *\n * This is a lower-level function that provides direct access to the AsyncDebouncer's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * This function provides async debouncing functionality with promise support, error handling,\n * retry capabilities, and abort support.\n *\n * The debouncer will only execute the function after the specified wait time has elapsed\n * since the last call. If the function is called again before the wait time expires, the\n * timer resets and starts waiting again.\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 debouncer can execute on the leading edge\n * - `errorCount`: Number of function executions that have resulted in errors\n * - `isExecuting`: Whether the debounced function is currently executing asynchronously\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastResult`: The result from the most recent successful function execution\n * - `settleCount`: Number of function executions that have completed (either successfully or with errors)\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')\n * - `successCount`: Number of function executions that have completed successfully\n *\n * ## Cleanup on Destroy\n *\n * By default, the function cancels any pending execution and aborts in-flight work 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 debouncer = injectAsyncDebouncer(fn, {\n *   wait: 500,\n *   onUnmount: (d) => d.flush()\n * });\n * ```\n *\n * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const debouncer = injectAsyncDebouncer(\n *   async (query: string) => {\n *     const response = await fetch(`/api/search?q=${query}`);\n *     return response.json();\n *   },\n *   { wait: 500 }\n * );\n *\n * // Opt-in to track isExecuting changes (optimized for loading states)\n * const debouncer = injectAsyncDebouncer(\n *   async (query: string) => fetchSearchResults(query),\n *   { wait: 500 },\n *   (state) => ({ isExecuting: state.isExecuting, isPending: state.isPending })\n * );\n *\n * // In an event handler\n * const handleChange = async (e: Event) => {\n *   const target = e.target as HTMLInputElement;\n *   const result = await debouncer.maybeExecute(target.value);\n *   console.log('Search results:', result);\n * };\n *\n * // Access the selected state\n * const { isExecuting, errorCount } = debouncer.state();\n * ```\n */\nexport function injectAsyncDebouncer<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n>(\n  fn: TFn,\n  options: AngularAsyncDebouncerOptions<TFn, TSelected>,\n  selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>\n    ({}) as TSelected,\n): AngularAsyncDebouncer<TFn, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().asyncDebouncer,\n    ...options,\n  } as AngularAsyncDebouncerOptions<TFn, TSelected>\n\n  const debouncer = new AsyncDebouncer<TFn>(fn, mergedOptions)\n  const state = injectStore(debouncer.store, selector)\n\n  const result = {\n    ...debouncer,\n    state,\n  } as AngularAsyncDebouncer<TFn, TSelected>\n\n  const destroyRef = inject(DestroyRef, { optional: true })\n  destroyRef?.onDestroy(() => {\n    if (mergedOptions.onUnmount) {\n      mergedOptions.onUnmount(result)\n    } else {\n      debouncer.cancel()\n      debouncer.abort()\n    }\n  })\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,SAAgB,qBAId,IACA,SACA,kBACG,EAAE,GACkC;CACvC,MAAM,gBAAgB;EACpB,GAAGA,0CAAoB,CAAC;EACxB,GAAG;EACJ;CAED,MAAM,YAAY,IAAIC,+CAAoB,IAAI,cAAc;CAC5D,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;OAC1B;AACL,aAAU,QAAQ;AAClB,aAAU,OAAO;;GAEnB;AAEF,QAAO"}

package/dist/async-debouncer/injectAsyncDebouncer.d.cts

@@ -1,9 +1,17 @@
 import { Signal } from "@angular/core";
-import { Store } from "@tanstack/store";
+import { Store } from "@tanstack/angular-store";
 import { AsyncDebouncer, AsyncDebouncerOptions, AsyncDebouncerState } from "@tanstack/pacer/async-debouncer";
 import { AnyAsyncFunction } from "@tanstack/pacer/types";
 
 //#region src/async-debouncer/injectAsyncDebouncer.d.ts
+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;
+}
 interface AngularAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}> extends Omit<AsyncDebouncer<TFn>, 'store'> {
   /**
    * Reactive state signal that will be updated when the async debouncer state changes
@@ -51,6 +59,20 @@ interface AngularAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}> ex
  * - `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
@@ -80,7 +102,7 @@ interface AngularAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}> ex
  * const { isExecuting, errorCount } = debouncer.state();
  * ```
  */
-declare function injectAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}>(fn: TFn, options: AsyncDebouncerOptions<TFn>, selector?: (state: AsyncDebouncerState<TFn>) => TSelected): AngularAsyncDebouncer<TFn, TSelected>;
+declare function injectAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}>(fn: TFn, options: AngularAsyncDebouncerOptions<TFn, TSelected>, selector?: (state: AsyncDebouncerState<TFn>) => TSelected): AngularAsyncDebouncer<TFn, TSelected>;
 //#endregion
-export { AngularAsyncDebouncer, injectAsyncDebouncer };
+export { AngularAsyncDebouncer, AngularAsyncDebouncerOptions, injectAsyncDebouncer };
 //# sourceMappingURL=injectAsyncDebouncer.d.cts.map

package/dist/async-debouncer/injectAsyncDebouncer.d.ts

@@ -1,9 +1,17 @@
 import { Signal } from "@angular/core";
+import { Store } from "@tanstack/angular-store";
 import { AsyncDebouncer, AsyncDebouncerOptions, AsyncDebouncerState } from "@tanstack/pacer/async-debouncer";
 import { AnyAsyncFunction } from "@tanstack/pacer/types";
-import { Store } from "@tanstack/store";
 
 //#region src/async-debouncer/injectAsyncDebouncer.d.ts
+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;
+}
 interface AngularAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}> extends Omit<AsyncDebouncer<TFn>, 'store'> {
   /**
    * Reactive state signal that will be updated when the async debouncer state changes
@@ -51,6 +59,20 @@ interface AngularAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}> ex
  * - `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
@@ -80,7 +102,7 @@ interface AngularAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}> ex
  * const { isExecuting, errorCount } = debouncer.state();
  * ```
  */
-declare function injectAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}>(fn: TFn, options: AsyncDebouncerOptions<TFn>, selector?: (state: AsyncDebouncerState<TFn>) => TSelected): AngularAsyncDebouncer<TFn, TSelected>;
+declare function injectAsyncDebouncer<TFn extends AnyAsyncFunction, TSelected = {}>(fn: TFn, options: AngularAsyncDebouncerOptions<TFn, TSelected>, selector?: (state: AsyncDebouncerState<TFn>) => TSelected): AngularAsyncDebouncer<TFn, TSelected>;
 //#endregion
-export { AngularAsyncDebouncer, injectAsyncDebouncer };
+export { AngularAsyncDebouncer, AngularAsyncDebouncerOptions, injectAsyncDebouncer };
 //# sourceMappingURL=injectAsyncDebouncer.d.ts.map

package/dist/async-debouncer/injectAsyncDebouncer.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 { AsyncDebouncer } from "@tanstack/pacer/async-debouncer";
 
@@ -37,6 +38,20 @@ import { AsyncDebouncer } from "@tanstack/pacer/async-debouncer";
 * - `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
@@ -67,15 +82,24 @@ import { AsyncDebouncer } from "@tanstack/pacer/async-debouncer";
 * ```
 */
 function injectAsyncDebouncer(fn, options, selector = () => ({})) {
-	const debouncer = new AsyncDebouncer(fn, {
+	const mergedOptions = {
 		...injectPacerOptions().asyncDebouncer,
 		...options
-	});
+	};
+	const debouncer = new AsyncDebouncer(fn, mergedOptions);
 	const state = injectStore(debouncer.store, selector);
-	return {
+	const result = {
 		...debouncer,
 		state
 	};
+	inject(DestroyRef, { optional: true })?.onDestroy(() => {
+		if (mergedOptions.onUnmount) mergedOptions.onUnmount(result);
+		else {
+			debouncer.cancel();
+			debouncer.abort();
+		}
+	});
+	return result;
 }
 
 //#endregion

package/dist/async-debouncer/injectAsyncDebouncer.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectAsyncDebouncer.js","names":[],"sources":["../../src/async-debouncer/injectAsyncDebouncer.ts"],"sourcesContent":["import { injectStore } from '@tanstack/angular-store'\nimport { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/store'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\nimport type {\n  AsyncDebouncerOptions,\n  AsyncDebouncerState,\n} from '@tanstack/pacer/async-debouncer'\n\nexport interface AngularAsyncDebouncer<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n> extends Omit<AsyncDebouncer<TFn>, 'store'> {\n  /**\n   * Reactive state signal that will be updated when the async debouncer state changes\n   *\n   * Use this instead of `debouncer.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>\n}\n\n/**\n * An Angular function that creates and manages an AsyncDebouncer instance.\n *\n * This is a lower-level function that provides direct access to the AsyncDebouncer's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * This function provides async debouncing functionality with promise support, error handling,\n * retry capabilities, and abort support.\n *\n * The debouncer will only execute the function after the specified wait time has elapsed\n * since the last call. If the function is called again before the wait time expires, the\n * timer resets and starts waiting again.\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 debouncer can execute on the leading edge\n * - `errorCount`: Number of function executions that have resulted in errors\n * - `isExecuting`: Whether the debounced function is currently executing asynchronously\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastResult`: The result from the most recent successful function execution\n * - `settleCount`: Number of function executions that have completed (either successfully or with errors)\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')\n * - `successCount`: Number of function executions that have completed successfully\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const debouncer = injectAsyncDebouncer(\n *   async (query: string) => {\n *     const response = await fetch(`/api/search?q=${query}`);\n *     return response.json();\n *   },\n *   { wait: 500 }\n * );\n *\n * // Opt-in to track isExecuting changes (optimized for loading states)\n * const debouncer = injectAsyncDebouncer(\n *   async (query: string) => fetchSearchResults(query),\n *   { wait: 500 },\n *   (state) => ({ isExecuting: state.isExecuting, isPending: state.isPending })\n * );\n *\n * // In an event handler\n * const handleChange = async (e: Event) => {\n *   const target = e.target as HTMLInputElement;\n *   const result = await debouncer.maybeExecute(target.value);\n *   console.log('Search results:', result);\n * };\n *\n * // Access the selected state\n * const { isExecuting, errorCount } = debouncer.state();\n * ```\n */\nexport function injectAsyncDebouncer<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n>(\n  fn: TFn,\n  options: AsyncDebouncerOptions<TFn>,\n  selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>\n    ({}) as TSelected,\n): AngularAsyncDebouncer<TFn, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().asyncDebouncer,\n    ...options,\n  } as AsyncDebouncerOptions<TFn>\n\n  const debouncer = new AsyncDebouncer<TFn>(fn, mergedOptions)\n  const state = injectStore(debouncer.store, selector)\n\n  return {\n    ...debouncer,\n    state,\n  } as AngularAsyncDebouncer<TFn, TSelected>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2FA,SAAgB,qBAId,IACA,SACA,kBACG,EAAE,GACkC;CAMvC,MAAM,YAAY,IAAI,eAAoB,IALpB;EACpB,GAAG,oBAAoB,CAAC;EACxB,GAAG;EACJ,CAE2D;CAC5D,MAAM,QAAQ,YAAY,UAAU,OAAO,SAAS;AAEpD,QAAO;EACL,GAAG;EACH;EACD"}
+{"version":3,"file":"injectAsyncDebouncer.js","names":[],"sources":["../../src/async-debouncer/injectAsyncDebouncer.ts"],"sourcesContent":["import { DestroyRef, inject } from '@angular/core'\nimport { injectStore } from '@tanstack/angular-store'\nimport { AsyncDebouncer } from '@tanstack/pacer/async-debouncer'\nimport { injectPacerOptions } from '../provider/pacer-context'\nimport type { Signal } from '@angular/core'\nimport type { Store } from '@tanstack/angular-store'\nimport type { AnyAsyncFunction } from '@tanstack/pacer/types'\nimport type {\n  AsyncDebouncerOptions,\n  AsyncDebouncerState,\n} from '@tanstack/pacer/async-debouncer'\n\nexport interface AngularAsyncDebouncerOptions<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n> extends AsyncDebouncerOptions<TFn> {\n  /**\n   * Optional callback invoked when the component is destroyed. Receives the debouncer instance.\n   * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.\n   * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.\n   */\n  onUnmount?: (debouncer: AngularAsyncDebouncer<TFn, TSelected>) => void\n}\n\nexport interface AngularAsyncDebouncer<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n> extends Omit<AsyncDebouncer<TFn>, 'store'> {\n  /**\n   * Reactive state signal that will be updated when the async debouncer state changes\n   *\n   * Use this instead of `debouncer.store.state`\n   */\n  readonly state: Signal<Readonly<TSelected>>\n  /**\n   * @deprecated Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.\n   * The state on the store object is not reactive in Angular signals.\n   */\n  readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>\n}\n\n/**\n * An Angular function that creates and manages an AsyncDebouncer instance.\n *\n * This is a lower-level function that provides direct access to the AsyncDebouncer's functionality.\n * This allows you to integrate it with any state management solution you prefer.\n *\n * This function provides async debouncing functionality with promise support, error handling,\n * retry capabilities, and abort support.\n *\n * The debouncer will only execute the function after the specified wait time has elapsed\n * since the last call. If the function is called again before the wait time expires, the\n * timer resets and starts waiting again.\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 debouncer can execute on the leading edge\n * - `errorCount`: Number of function executions that have resulted in errors\n * - `isExecuting`: Whether the debounced function is currently executing asynchronously\n * - `isPending`: Whether the debouncer is waiting for the timeout to trigger execution\n * - `lastArgs`: The arguments from the most recent call to maybeExecute\n * - `lastResult`: The result from the most recent successful function execution\n * - `settleCount`: Number of function executions that have completed (either successfully or with errors)\n * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')\n * - `successCount`: Number of function executions that have completed successfully\n *\n * ## Cleanup on Destroy\n *\n * By default, the function cancels any pending execution and aborts in-flight work 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 debouncer = injectAsyncDebouncer(fn, {\n *   wait: 500,\n *   onUnmount: (d) => d.flush()\n * });\n * ```\n *\n * When using onUnmount with flush, guard your callbacks since the component may already be destroyed.\n *\n * @example\n * ```ts\n * // Default behavior - no reactive state subscriptions\n * const debouncer = injectAsyncDebouncer(\n *   async (query: string) => {\n *     const response = await fetch(`/api/search?q=${query}`);\n *     return response.json();\n *   },\n *   { wait: 500 }\n * );\n *\n * // Opt-in to track isExecuting changes (optimized for loading states)\n * const debouncer = injectAsyncDebouncer(\n *   async (query: string) => fetchSearchResults(query),\n *   { wait: 500 },\n *   (state) => ({ isExecuting: state.isExecuting, isPending: state.isPending })\n * );\n *\n * // In an event handler\n * const handleChange = async (e: Event) => {\n *   const target = e.target as HTMLInputElement;\n *   const result = await debouncer.maybeExecute(target.value);\n *   console.log('Search results:', result);\n * };\n *\n * // Access the selected state\n * const { isExecuting, errorCount } = debouncer.state();\n * ```\n */\nexport function injectAsyncDebouncer<\n  TFn extends AnyAsyncFunction,\n  TSelected = {},\n>(\n  fn: TFn,\n  options: AngularAsyncDebouncerOptions<TFn, TSelected>,\n  selector: (state: AsyncDebouncerState<TFn>) => TSelected = () =>\n    ({}) as TSelected,\n): AngularAsyncDebouncer<TFn, TSelected> {\n  const mergedOptions = {\n    ...injectPacerOptions().asyncDebouncer,\n    ...options,\n  } as AngularAsyncDebouncerOptions<TFn, TSelected>\n\n  const debouncer = new AsyncDebouncer<TFn>(fn, mergedOptions)\n  const state = injectStore(debouncer.store, selector)\n\n  const result = {\n    ...debouncer,\n    state,\n  } as AngularAsyncDebouncer<TFn, TSelected>\n\n  const destroyRef = inject(DestroyRef, { optional: true })\n  destroyRef?.onDestroy(() => {\n    if (mergedOptions.onUnmount) {\n      mergedOptions.onUnmount(result)\n    } else {\n      debouncer.cancel()\n      debouncer.abort()\n    }\n  })\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,SAAgB,qBAId,IACA,SACA,kBACG,EAAE,GACkC;CACvC,MAAM,gBAAgB;EACpB,GAAG,oBAAoB,CAAC;EACxB,GAAG;EACJ;CAED,MAAM,YAAY,IAAI,eAAoB,IAAI,cAAc;CAC5D,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;OAC1B;AACL,aAAU,QAAQ;AAClB,aAAU,OAAO;;GAEnB;AAEF,QAAO"}

package/dist/async-queuer/index.d.cts

@@ -1,4 +1,4 @@
-import { AngularAsyncQueuer, injectAsyncQueuer } from "./injectAsyncQueuer.cjs";
+import { AngularAsyncQueuer, AngularAsyncQueuerOptions, injectAsyncQueuer } from "./injectAsyncQueuer.cjs";
 import { AsyncQueuedSignal, injectAsyncQueuedSignal } from "./injectAsyncQueuedSignal.cjs";
 export * from "@tanstack/pacer/async-queuer";
-export { AngularAsyncQueuer, AsyncQueuedSignal, injectAsyncQueuedSignal, injectAsyncQueuer };
+export { AngularAsyncQueuer, AngularAsyncQueuerOptions, AsyncQueuedSignal, injectAsyncQueuedSignal, injectAsyncQueuer };