Fix angular input + API consistency

.changeset/big-jobs-call.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/angular-pacer': minor
+---
+
+injectQueuedValue returns queued value instead of array

docs/framework/angular/reference/functions/injectQueuedValue.md

@@ -11,10 +11,10 @@ title: injectQueuedValue
 function injectQueuedValue<TValue, TSelected>(
    value, 
    options?, 
-selector?): QueuedSignal<TValue, TSelected>;
+selector?): QueuedValueSignal<TValue, TSelected>;
 ```
 
-Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:31](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L31)
+Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:38](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L38)
 
 An Angular function that creates a queued value that processes state changes in order with an optional delay.
 This function uses injectQueuedSignal internally to manage a queue of state changes and apply them sequentially.
@@ -23,9 +23,10 @@ The queued value will process changes in the order they are received, with optio
 processing each change. This is useful for handling state updates that need to be processed
 in a specific order, like animations or sequential UI updates.
 
-The function returns a tuple containing:
-- A Signal that provides the current queued value
-- The queuer instance with control methods
+The function returns a callable object containing:
+- `queued()`: A signal-like function that provides the current queued value
+- `queued.addItem(...)`: A method to enqueue additional values
+- `queued.queuer`: The queuer instance with control methods and state
 
 ### Type Parameters
 
@@ -53,7 +54,7 @@ The function returns a tuple containing:
 
 ### Returns
 
-[`QueuedSignal`](../interfaces/QueuedSignal.md)\<`TValue`, `TSelected`\>
+[`QueuedValueSignal`](../interfaces/QueuedValueSignal.md)\<`TValue`, `TSelected`\>
 
 ### Example
 
@@ -75,10 +76,10 @@ function injectQueuedValue<TValue, TSelected>(
    value, 
    initialValue, 
    options?, 
-selector?): QueuedSignal<TValue, TSelected>;
+selector?): QueuedValueSignal<TValue, TSelected>;
 ```
 
-Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:42](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L42)
+Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:49](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L49)
 
 An Angular function that creates a queued value that processes state changes in order with an optional delay.
 This function uses injectQueuedSignal internally to manage a queue of state changes and apply them sequentially.
@@ -87,9 +88,10 @@ The queued value will process changes in the order they are received, with optio
 processing each change. This is useful for handling state updates that need to be processed
 in a specific order, like animations or sequential UI updates.
 
-The function returns a tuple containing:
-- A Signal that provides the current queued value
-- The queuer instance with control methods
+The function returns a callable object containing:
+- `queued()`: A signal-like function that provides the current queued value
+- `queued.addItem(...)`: A method to enqueue additional values
+- `queued.queuer`: The queuer instance with control methods and state
 
 ### Type Parameters
 
@@ -121,7 +123,7 @@ The function returns a tuple containing:
 
 ### Returns
 
-[`QueuedSignal`](../interfaces/QueuedSignal.md)\<`TValue`, `TSelected`\>
+[`QueuedValueSignal`](../interfaces/QueuedValueSignal.md)\<`TValue`, `TSelected`\>
 
 ### Example
 

docs/framework/angular/reference/index.md

@@ -30,6 +30,7 @@ title: "@tanstack/angular-pacer"
 - [AsyncQueuedSignal](interfaces/AsyncQueuedSignal.md)
 - [DebouncedSignal](interfaces/DebouncedSignal.md)
 - [QueuedSignal](interfaces/QueuedSignal.md)
+- [QueuedValueSignal](interfaces/QueuedValueSignal.md)
 - [RateLimitedSignal](interfaces/RateLimitedSignal.md)
 - [ThrottledSignal](interfaces/ThrottledSignal.md)
 

docs/framework/angular/reference/interfaces/AsyncQueuedSignal.md

@@ -33,7 +33,7 @@ Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts:10](https
 ### addItem()
 
 ```ts
-addItem: (item, position?, runOnItemsChange?) => boolean;
+addItem: (item, position, runOnItemsChange) => boolean;
 ```
 
 Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts:11](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts#L11)
@@ -47,13 +47,13 @@ Items can be inserted based on priority or at the front/back depending on config
 
 `TValue`
 
-##### position?
+##### position
 
-`QueuePosition`
+`QueuePosition` = `...`
 
-##### runOnItemsChange?
+##### runOnItemsChange
 
-`boolean`
+`boolean` = `true`
 
 #### Returns
 

docs/framework/angular/reference/interfaces/QueuedSignal.md

@@ -33,7 +33,7 @@ Defined in: [angular-pacer/src/queuer/injectQueuedSignal.ts:7](https://github.co
 ### addItem()
 
 ```ts
-addItem: (item, position?, runOnItemsChange?) => boolean;
+addItem: (item, position, runOnItemsChange) => boolean;
 ```
 
 Defined in: [angular-pacer/src/queuer/injectQueuedSignal.ts:8](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedSignal.ts#L8)
@@ -55,13 +55,13 @@ queuer.addItem('task2', 'front');
 
 `TValue`
 
-##### position?
+##### position
 
-`QueuePosition`
+`QueuePosition` = `...`
 
-##### runOnItemsChange?
+##### runOnItemsChange
 
-`boolean`
+`boolean` = `true`
 
 #### Returns
 

docs/framework/angular/reference/interfaces/QueuedValueSignal.md

@@ -0,0 +1,78 @@
+---
+id: QueuedValueSignal
+title: QueuedValueSignal
+---
+
+# Interface: QueuedValueSignal()\<TValue, TSelected\>
+
+Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:7](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L7)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \{
+\}
+
+```ts
+QueuedValueSignal(): TValue;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:8](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L8)
+
+## Returns
+
+`TValue`
+
+## Properties
+
+### addItem()
+
+```ts
+addItem: (item, position, runOnItemsChange) => boolean;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:9](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L9)
+
+Adds an item to the queue. If the queue is full, the item is rejected and onReject is called.
+Items can be inserted based on priority or at the front/back depending on configuration.
+
+Returns true if the item was added, false if the queue is full.
+
+Example usage:
+```ts
+queuer.addItem('task');
+queuer.addItem('task2', 'front');
+```
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### position
+
+`QueuePosition` = `...`
+
+##### runOnItemsChange
+
+`boolean` = `true`
+
+#### Returns
+
+`boolean`
+
+***
+
+### queuer
+
+```ts
+queuer: AngularQueuer<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:10](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L10)

examples/angular/injectQueuedValue/src/app/app.html

@@ -4,7 +4,7 @@ <h1>injectQueuedValue</h1>
 
 <p>Source (instant): {{ source() }}</p>
 <p>Value (queued): {{ queued() }}</p>
-<p>Queue length: {{ queued().length }}</p>
+<p>Queue length: {{ queued.queuer.state().items.length }}</p>
 
 <button (click)="enqueueRandom()">Enqueue random</button>
 <button (click)="clear()">Clear</button>

examples/angular/injectQueuedValue/src/app/app.ts

@@ -12,7 +12,7 @@ export class App {
   protected readonly source = signal('')
 
   // A queued value: changes are applied in-order, with an optional delay between items.
-  // `value()` is the current processed value, and `items()` exposes the pending queue.
+  // `queued()` is the current processed value, and `queued.queuer.state().items` exposes the pending queue.
   protected readonly queued = injectQueuedValue(this.source, { wait: 500 }, (state) => ({
     items: state.items,
   }))

examples/angular/injectQueuedValue/src/app/inputapp.ts

@@ -8,7 +8,7 @@ import { injectQueuedValue } from '@tanstack/angular-pacer'
     <h1>NG0950</h1>
     <p>value: {{ value() }}</p>
     <p>Value (queued): {{ queued() }}</p>
-    <p>Queue length: {{ queued().length }}</p>
+    <p>Queue length: {{ queued.queuer.state().items.length }}</p>
     <button (click)="enqueueRandom()">Enqueue random</button>
   `,
 })

packages/angular-pacer/eslint.config.js

@@ -1,6 +1,21 @@
 // @ts-check
 
 import rootConfig from '../../eslint.config.js'
+import { fileURLToPath } from 'node:url'
+
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url))
 
 /** @type {import('eslint').Linter.Config[]} */
-export default [...rootConfig]
+export default [
+  ...rootConfig,
+  {
+    name: 'angular-pacer/typescript-projects',
+    files: ['**/*.ts'],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.lib.json', './tsconfig.spec.json'],
+        tsconfigRootDir,
+      },
+    },
+  },
+]

packages/angular-pacer/package.json

@@ -112,8 +112,12 @@
     "@tanstack/pacer": "workspace:*"
   },
   "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.2.3",
+    "@analogjs/vitest-angular": "^2.2.3",
+    "@angular/compiler": "^21.1.4",
     "@angular/core": "^21.1.4",
-    "@types/node": "^25.2.3"
+    "@types/node": "^25.2.3",
+    "jsdom": "^28.1.0"
   },
   "peerDependencies": {
     "@angular/core": ">=17.0.0"

packages/angular-pacer/src/queuer/injectQueuedValue.ts

@@ -1,8 +1,14 @@
-import { effect, linkedSignal, signal } from '@angular/core'
+import { effect, linkedSignal, untracked } from '@angular/core'
 import { injectQueuedSignal } from './injectQueuedSignal'
-import type { QueuedSignal } from './injectQueuedSignal'
 import type { Signal } from '@angular/core'
 import type { QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
+import type { AngularQueuer } from './injectQueuer'
+
+export interface QueuedValueSignal<TValue, TSelected = {}> {
+  (): TValue
+  addItem: AngularQueuer<TValue, TSelected>['addItem']
+  queuer: AngularQueuer<TValue, TSelected>
+}
 
 /**
  * An Angular function that creates a queued value that processes state changes in order with an optional delay.
@@ -12,9 +18,10 @@ import type { QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
  * processing each change. This is useful for handling state updates that need to be processed
  * in a specific order, like animations or sequential UI updates.
  *
- * The function returns a tuple containing:
- * - A Signal that provides the current queued value
- * - The queuer instance with control methods
+ * The function returns a callable object containing:
+ * - `queued()`: A signal-like function that provides the current queued value
+ * - `queued.addItem(...)`: A method to enqueue additional values
+ * - `queued.queuer`: The queuer instance with control methods and state
  *
  * @example
  * ```ts
@@ -38,7 +45,7 @@ export function injectQueuedValue<
   value: Signal<TValue>,
   options?: QueuerOptions<TValue>,
   selector?: (state: QueuerState<TValue>) => TSelected,
-): QueuedSignal<TValue, TSelected>
+): QueuedValueSignal<TValue, TSelected>
 export function injectQueuedValue<
   TValue,
   TSelected extends Pick<QueuerState<TValue>, 'items'> = Pick<
@@ -50,7 +57,7 @@ export function injectQueuedValue<
   initialValue: TValue,
   options?: QueuerOptions<TValue>,
   selector?: (state: QueuerState<TValue>) => TSelected,
-): QueuedSignal<TValue, TSelected>
+): QueuedValueSignal<TValue, TSelected>
 export function injectQueuedValue<
   TValue,
   TSelected extends Pick<QueuerState<TValue>, 'items'> = Pick<
@@ -64,15 +71,11 @@ export function injectQueuedValue<
     | QueuerOptions<TValue>
     | ((state: QueuerState<TValue>) => TSelected),
   maybeSelector?: (state: QueuerState<TValue>) => TSelected,
-): QueuedSignal<TValue, TSelected> {
+): QueuedValueSignal<TValue, TSelected> {
   const hasSelector = typeof initialOptionsOrSelector === 'function'
   const hasInitialValue =
     (initialOptionsOrSelector !== undefined && !hasSelector) ||
     maybeSelector !== undefined
-
-  const initialValue = hasInitialValue
-    ? (initialValueOrOptions as TValue)
-    : value()
   const initialOptions = hasInitialValue
     ? (initialOptionsOrSelector as QueuerOptions<TValue>)
     : (initialValueOrOptions as QueuerOptions<TValue>)
@@ -82,8 +85,11 @@ export function injectQueuedValue<
         | ((state: QueuerState<TValue>) => TSelected)
         | undefined)
 
-  const linkedValue = linkedSignal(() => value())
-  const queuedValue = signal<TValue>(initialValue)
+  const queuedValue = linkedSignal<TValue>(() => {
+    return hasInitialValue
+      ? (initialValueOrOptions as TValue)
+      : untracked(value)
+  })
 
   const queued = injectQueuedSignal(
     (item) => {
@@ -94,8 +100,11 @@ export function injectQueuedValue<
   )
 
   effect(() => {
-    queued.addItem(linkedValue())
+    queued.addItem(value())
   })
 
-  return queued
+  return Object.assign(queuedValue, {
+    addItem: queued.addItem.bind(queued),
+    queuer: queued.queuer,
+  }) as QueuedValueSignal<TValue, TSelected>
 }