@tanstack/solid-pacer 0.17.0 → 0.18.1

package/src/async-queuer/createAsyncQueuer.ts

@@ -2,7 +2,7 @@ import { AsyncQueuer } from '@tanstack/pacer/async-queuer'
 import { useStore } from '@tanstack/solid-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/solid-store'
-import type { Accessor } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
 import type {
   AsyncQueuerOptions,
   AsyncQueuerState,
@@ -12,6 +12,23 @@ export interface SolidAsyncQueuer<TValue, TSelected = {}> extends Omit<
   AsyncQueuer<TValue>,
   'store'
 > {
+  /**
+   * A Solid component that allows you to subscribe to the queuer state.
+   *
+   * This is useful for tracking specific parts of the queuer state
+   * deep in your component tree without needing to pass a selector to the hook.
+   *
+   * @example
+   * <queuer.Subscribe selector={(state) => ({ pendingItems: state.pendingItems, activeItems: state.activeItems })}>
+   *   {(state) => (
+   *     <div>Pending: {state().pendingItems.length}, Active: {state().activeItems.length}</div>
+   *   )}
+   * </queuer.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: AsyncQueuerState<TValue>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) => JSX.Element
   /**
    * Reactive state that will be updated when the queuer state changes
    *
@@ -51,14 +68,24 @@ export interface SolidAsyncQueuer<TValue, TSelected = {}> extends Omit<
  *
  * ## State Management and Selector
  *
- * The hook uses TanStack Store for reactive state management. The `selector` parameter allows you
- * to specify which state changes will trigger a re-render, optimizing performance by preventing
- * unnecessary re-renders when irrelevant state changes occur.
+ * The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+ * in two ways:
+ *
+ * **1. Using `queuer.Subscribe` component (Recommended for component tree subscriptions)**
+ *
+ * Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+ * needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+ * in child components.
+ *
+ * **2. Using the `selector` parameter (For hook-level subscriptions)**
+ *
+ * The `selector` parameter allows you to specify which state changes will trigger reactive updates
+ * at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+ * state changes occur.
  *
  * **By default, there will be no reactive state subscriptions** and you must opt-in to state
- * tracking by providing a selector function. This prevents unnecessary re-renders and gives you
- * full control over when your component updates. Only when you provide a selector will the
- * component re-render when the selected state values change.
+ * tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+ * updates and gives you full control over when your component tracks state changes.
  *
  * Available state properties:
  * - `activeItems`: Array of items currently being processed
@@ -88,7 +115,7 @@ export interface SolidAsyncQueuer<TValue, TSelected = {}> extends Omit<
  *   }
  * });
  *
- * // Opt-in to re-render when queue state changes (optimized for UI updates)
+ * // Opt-in to track queue state changes (optimized for UI updates)
  * const asyncQueuer = createAsyncQueuer(
  *   async (item) => await fetchData(item),
  *   { concurrency: 2, started: true },
@@ -99,7 +126,7 @@ export interface SolidAsyncQueuer<TValue, TSelected = {}> extends Omit<
  *   })
  * );
  *
- * // Opt-in to re-render when processing metrics change (optimized for tracking progress)
+ * // Opt-in to track processing metrics changes (optimized for tracking progress)
  * const asyncQueuer = createAsyncQueuer(
  *   async (item) => await fetchData(item),
  *   { concurrency: 2, started: true },
@@ -131,7 +158,21 @@ export function createAsyncQueuer<TValue, TSelected = {}>(
     ...options,
   } as AsyncQueuerOptions<TValue>
 
-  const asyncQueuer = new AsyncQueuer<TValue>(fn, mergedOptions)
+  const asyncQueuer = new AsyncQueuer<TValue>(
+    fn,
+    mergedOptions,
+  ) as unknown as SolidAsyncQueuer<TValue, TSelected>
+
+  asyncQueuer.Subscribe = function Subscribe<TSelected>(props: {
+    selector: (state: AsyncQueuerState<TValue>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) {
+    const selected = useStore(asyncQueuer.store, props.selector)
+
+    return typeof props.children === 'function'
+      ? props.children(selected)
+      : props.children
+  }
 
   const state = useStore(asyncQueuer.store, selector)
 

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

@@ -2,7 +2,7 @@ import { AsyncRateLimiter } from '@tanstack/pacer/async-rate-limiter'
 import { useStore } from '@tanstack/solid-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/solid-store'
-import type { Accessor } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
 import type { AnyAsyncFunction } from '@tanstack/pacer/types'
 import type {
   AsyncRateLimiterOptions,
@@ -13,6 +13,23 @@ export interface SolidAsyncRateLimiter<
   TFn extends AnyAsyncFunction,
   TSelected = {},
 > extends Omit<AsyncRateLimiter<TFn>, 'store'> {
+  /**
+   * A Solid component that allows you to subscribe to the rate limiter state.
+   *
+   * This is useful for tracking specific parts of the rate limiter state
+   * deep in your component tree without needing to pass a selector to the hook.
+   *
+   * @example
+   * <rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount, isExecuting: state.isExecuting })}>
+   *   {(state) => (
+   *     <div>Rejected: {state().rejectionCount}, {state().isExecuting ? 'Executing' : 'Idle'}</div>
+   *   )}
+   * </rateLimiter.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: AsyncRateLimiterState<TFn>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) => JSX.Element
   /**
    * Reactive state that will be updated when the rate limiter state changes
    *
@@ -64,14 +81,24 @@ export interface SolidAsyncRateLimiter<
  *
  * ## State Management and Selector
  *
- * The hook uses TanStack Store for reactive state management. The `selector` parameter allows you
- * to specify which state changes will trigger a re-render, optimizing performance by preventing
- * unnecessary re-renders when irrelevant state changes occur.
+ * The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+ * in two ways:
+ *
+ * **1. Using `rateLimiter.Subscribe` component (Recommended for component tree subscriptions)**
+ *
+ * Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+ * needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+ * in child components.
+ *
+ * **2. Using the `selector` parameter (For hook-level subscriptions)**
+ *
+ * The `selector` parameter allows you to specify which state changes will trigger reactive updates
+ * at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+ * state changes occur.
  *
  * **By default, there will be no reactive state subscriptions** and you must opt-in to state
- * tracking by providing a selector function. This prevents unnecessary re-renders and gives you
- * full control over when your component updates. Only when you provide a selector will the
- * component re-render when the selected state values change.
+ * tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+ * updates and gives you full control over when your component tracks state changes.
  *
  * Available state properties:
  * - `currentWindowStart`: Timestamp when the current window started
@@ -87,7 +114,7 @@ export interface SolidAsyncRateLimiter<
  * @example
  * ```tsx
  * // Default behavior - no reactive state subscriptions
- * const { maybeExecute } = createAsyncRateLimiter(
+ * const asyncRateLimiter = createAsyncRateLimiter(
  *   async (id: string) => {
  *     const data = await api.fetchData(id);
  *     return data; // Return value is preserved
@@ -95,36 +122,81 @@ export interface SolidAsyncRateLimiter<
  *   { limit: 5, window: 1000 } // 5 calls per second
  * );
  *
- * // Opt-in to re-render when rate limit and execution state changes (optimized for UI feedback)
- * const rateLimiter = createAsyncRateLimiter(
- *   async (query) => {
- *     const result = await searchAPI(query);
- *     return result;
+ * // Subscribe to state changes deep in component tree using Subscribe component
+ * <asyncRateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount, isExecuting: state.isExecuting })}>
+ *   {(state) => (
+ *     <div>Rejected: {state().rejectionCount}, {state().isExecuting ? 'Executing' : 'Idle'}</div>
+ *   )}
+ * </asyncRateLimiter.Subscribe>
+ *
+ * // Opt-in to track execution state changes at hook level (optimized for loading indicators)
+ * const asyncRateLimiter = createAsyncRateLimiter(
+ *   async (id: string) => {
+ *     const data = await api.fetchData(id);
+ *     return data;
  *   },
- *   { limit: 10, window: 60000 },
+ *   { limit: 5, window: 1000 },
+ *   (state) => ({ isExecuting: state.isExecuting })
+ * );
+ *
+ * // Opt-in to track results when available (optimized for data display)
+ * const asyncRateLimiter = createAsyncRateLimiter(
+ *   async (id: string) => {
+ *     const data = await api.fetchData(id);
+ *     return data;
+ *   },
+ *   { limit: 5, window: 1000 },
  *   (state) => ({
- *     remainingInWindow: state.remainingInWindow,
- *     isExecuting: state.isExecuting,
- *     rejectionCount: state.rejectionCount
+ *     lastResult: state.lastResult,
+ *     successCount: state.successCount
  *   })
  * );
  *
- * // Opt-in to re-render when error state changes (optimized for error handling)
- * const rateLimiter = createAsyncRateLimiter(
- *   async (query) => {
- *     const result = await searchAPI(query);
- *     return result;
+ * // Opt-in to track error/rejection state changes (optimized for error handling)
+ * const asyncRateLimiter = createAsyncRateLimiter(
+ *   async (id: string) => {
+ *     const data = await api.fetchData(id);
+ *     return data;
  *   },
  *   {
- *     limit: 10,
- *     window: 60000, // 10 calls per minute
- *     onReject: (info) => console.log(`Rate limit exceeded: ${info.nextValidTime - Date.now()}ms until next window`)
+ *     limit: 5,
+ *     window: 1000,
+ *     onError: (error) => console.error('API call failed:', error),
+ *     onReject: (rateLimiter) => console.log('Rate limit exceeded')
  *   },
- *   (state) => ({ hasError: state.hasError, lastError: state.lastError })
+ *   (state) => ({
+ *     errorCount: state.errorCount,
+ *     rejectionCount: state.rejectionCount
+ *   })
+ * );
+ *
+ * // Opt-in to track execution metrics changes (optimized for stats display)
+ * const asyncRateLimiter = createAsyncRateLimiter(
+ *   async (id: string) => {
+ *     const data = await api.fetchData(id);
+ *     return data;
+ *   },
+ *   { limit: 5, window: 1000 },
+ *   (state) => ({
+ *     successCount: state.successCount,
+ *     errorCount: state.errorCount,
+ *     settleCount: state.settleCount,
+ *     rejectionCount: state.rejectionCount
+ *   })
+ * );
+ *
+ * // Opt-in to track execution times changes (optimized for window calculations)
+ * const asyncRateLimiter = createAsyncRateLimiter(
+ *   async (id: string) => {
+ *     const data = await api.fetchData(id);
+ *     return data;
+ *   },
+ *   { limit: 5, window: 1000 },
+ *   (state) => ({ executionTimes: state.executionTimes })
  * );
  *
  * // Access the selected state (will be empty object {} unless selector provided)
- * const { remainingInWindow, isExecuting } = rateLimiter.state();
+ * const { isExecuting, lastResult, rejectionCount } = asyncRateLimiter.state();
  * ```
  */
 export function createAsyncRateLimiter<
@@ -141,7 +213,21 @@ export function createAsyncRateLimiter<
     ...options,
   } as AsyncRateLimiterOptions<TFn>
 
-  const asyncRateLimiter = new AsyncRateLimiter<TFn>(fn, mergedOptions)
+  const asyncRateLimiter = new AsyncRateLimiter<TFn>(
+    fn,
+    mergedOptions,
+  ) as unknown as SolidAsyncRateLimiter<TFn, TSelected>
+
+  asyncRateLimiter.Subscribe = function Subscribe<TSelected>(props: {
+    selector: (state: AsyncRateLimiterState<TFn>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) {
+    const selected = useStore(asyncRateLimiter.store, props.selector)
+
+    return typeof props.children === 'function'
+      ? props.children(selected)
+      : props.children
+  }
 
   const state = useStore(asyncRateLimiter.store, selector)
 

package/src/async-throttler/createAsyncThrottler.ts

@@ -2,7 +2,7 @@ import { AsyncThrottler } from '@tanstack/pacer/async-throttler'
 import { useStore } from '@tanstack/solid-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/solid-store'
-import type { Accessor } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
 import type { AnyAsyncFunction } from '@tanstack/pacer/types'
 import type {
   AsyncThrottlerOptions,
@@ -13,6 +13,23 @@ export interface SolidAsyncThrottler<
   TFn extends AnyAsyncFunction,
   TSelected = {},
 > extends Omit<AsyncThrottler<TFn>, 'store'> {
+  /**
+   * A Solid component that allows you to subscribe to the throttler state.
+   *
+   * This is useful for tracking specific parts of the throttler state
+   * deep in your component tree without needing to pass a selector to the hook.
+   *
+   * @example
+   * <throttler.Subscribe selector={(state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })}>
+   *   {(state) => (
+   *     <div>{state().isPending ? 'Pending...' : state().isExecuting ? 'Executing...' : 'Ready'}</div>
+   *   )}
+   * </throttler.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: AsyncThrottlerState<TFn>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) => JSX.Element
   /**
    * Reactive state that will be updated when the throttler state changes
    *
@@ -50,14 +67,24 @@ export interface SolidAsyncThrottler<
  *
  * ## State Management and Selector
  *
- * The hook uses TanStack Store for reactive state management. The `selector` parameter allows you
- * to specify which state changes will trigger a re-render, optimizing performance by preventing
- * unnecessary re-renders when irrelevant state changes occur.
+ * The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+ * in two ways:
+ *
+ * **1. Using `throttler.Subscribe` component (Recommended for component tree subscriptions)**
+ *
+ * Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+ * needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+ * in child components.
+ *
+ * **2. Using the `selector` parameter (For hook-level subscriptions)**
+ *
+ * The `selector` parameter allows you to specify which state changes will trigger reactive updates
+ * at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+ * state changes occur.
  *
  * **By default, there will be no reactive state subscriptions** and you must opt-in to state
- * tracking by providing a selector function. This prevents unnecessary re-renders and gives you
- * full control over when your component updates. Only when you provide a selector will the
- * component re-render when the selected state values change.
+ * tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+ * updates and gives you full control over when your component tracks state changes.
  *
  * Available state properties:
  * - `canLeadingExecute`: Whether the throttler can execute on the leading edge
@@ -84,7 +111,7 @@ export interface SolidAsyncThrottler<
  *   { wait: 1000 }
  * );
  *
- * // Opt-in to re-render when isPending or isExecuting changes (optimized for loading states)
+ * // Opt-in to track isPending or isExecuting changes (optimized for loading states)
  * const throttler = createAsyncThrottler(
  *   async (query) => {
  *     const result = await searchAPI(query);
@@ -94,7 +121,7 @@ export interface SolidAsyncThrottler<
  *   (state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })
  * );
  *
- * // Opt-in to re-render when error state changes (optimized for error handling)
+ * // Opt-in to track error state changes (optimized for error handling)
  * const throttler = createAsyncThrottler(
  *   async (query) => {
  *     const result = await searchAPI(query);
@@ -129,7 +156,21 @@ export function createAsyncThrottler<
     ...options,
   } as AsyncThrottlerOptions<TFn>
 
-  const asyncThrottler = new AsyncThrottler(fn, mergedOptions)
+  const asyncThrottler = new AsyncThrottler(
+    fn,
+    mergedOptions,
+  ) as unknown as SolidAsyncThrottler<TFn, TSelected>
+
+  asyncThrottler.Subscribe = function Subscribe<TSelected>(props: {
+    selector: (state: AsyncThrottlerState<TFn>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) {
+    const selected = useStore(asyncThrottler.store, props.selector)
+
+    return typeof props.children === 'function'
+      ? props.children(selected)
+      : props.children
+  }
 
   const state = useStore(asyncThrottler.store, selector)
 

package/src/batcher/createBatcher.ts

@@ -2,13 +2,30 @@ import { Batcher } from '@tanstack/pacer/batcher'
 import { useStore } from '@tanstack/solid-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/solid-store'
-import type { Accessor } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
 import type { BatcherOptions, BatcherState } from '@tanstack/pacer/batcher'
 
 export interface SolidBatcher<TValue, TSelected = {}> extends Omit<
   Batcher<TValue>,
   'store'
 > {
+  /**
+   * A Solid component that allows you to subscribe to the batcher state.
+   *
+   * This is useful for tracking specific parts of the batcher state
+   * deep in your component tree without needing to pass a selector to the hook.
+   *
+   * @example
+   * <batcher.Subscribe selector={(state) => ({ size: state.size, isRunning: state.isRunning })}>
+   *   {(state) => (
+   *     <div>Batch: {state().size} items, {state().isRunning ? 'Processing' : 'Idle'}</div>
+   *   )}
+   * </batcher.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: BatcherState<TValue>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) => JSX.Element
   /**
    * Reactive state that will be updated when the batcher state changes
    *
@@ -40,14 +57,24 @@ export interface SolidBatcher<TValue, TSelected = {}> extends Omit<
  *
  * ## State Management and Selector
  *
- * The hook uses TanStack Store for reactive state management. The `selector` parameter allows you
- * to specify which state changes will trigger a re-render, optimizing performance by preventing
- * unnecessary re-renders when irrelevant state changes occur.
+ * The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+ * in two ways:
+ *
+ * **1. Using `batcher.Subscribe` component (Recommended for component tree subscriptions)**
+ *
+ * Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+ * needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+ * in child components.
+ *
+ * **2. Using the `selector` parameter (For hook-level subscriptions)**
+ *
+ * The `selector` parameter allows you to specify which state changes will trigger reactive updates
+ * at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+ * state changes occur.
  *
  * **By default, there will be no reactive state subscriptions** and you must opt-in to state
- * tracking by providing a selector function. This prevents unnecessary re-renders and gives you
- * full control over when your component updates. Only when you provide a selector will the
- * component re-render when the selected state values change.
+ * tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+ * updates and gives you full control over when your component tracks state changes.
  *
  * Available state properties:
  * - `executionCount`: Number of batch executions that have been completed
@@ -71,14 +98,14 @@ export interface SolidBatcher<TValue, TSelected = {}> extends Omit<
  *   }
  * );
  *
- * // Opt-in to re-render when items or isRunning changes (optimized for UI updates)
+ * // Opt-in to track items or isRunning changes (optimized for UI updates)
  * const batcher = createBatcher(
  *   (items) => console.log('Processing batch:', items),
  *   { maxSize: 5, wait: 2000 },
  *   (state) => ({ items: state.items, isRunning: state.isRunning })
  * );
  *
- * // Opt-in to re-render when execution metrics change (optimized for tracking progress)
+ * // Opt-in to track execution metrics changes (optimized for tracking progress)
  * const batcher = createBatcher(
  *   (items) => console.log('Processing batch:', items),
  *   { maxSize: 5, wait: 2000 },
@@ -111,7 +138,21 @@ export function createBatcher<TValue, TSelected = {}>(
     ...options,
   } as BatcherOptions<TValue>
 
-  const batcher = new Batcher(fn, mergedOptions)
+  const batcher = new Batcher(fn, mergedOptions) as unknown as SolidBatcher<
+    TValue,
+    TSelected
+  >
+
+  batcher.Subscribe = function Subscribe<TSelected>(props: {
+    selector: (state: BatcherState<TValue>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) {
+    const selected = useStore(batcher.store, props.selector)
+
+    return typeof props.children === 'function'
+      ? props.children(selected)
+      : props.children
+  }
 
   const state = useStore(batcher.store, selector)
   return {

package/src/debouncer/createDebouncer.ts

@@ -3,7 +3,7 @@ import { createEffect, onCleanup } from 'solid-js'
 import { useStore } from '@tanstack/solid-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/solid-store'
-import type { Accessor } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
 import type { AnyFunction } from '@tanstack/pacer/types'
 import type {
   DebouncerOptions,
@@ -14,6 +14,23 @@ export interface SolidDebouncer<
   TFn extends AnyFunction,
   TSelected = {},
 > extends Omit<Debouncer<TFn>, 'store'> {
+  /**
+   * A Solid component that allows you to subscribe to the debouncer state.
+   *
+   * This is useful for tracking specific parts of the debouncer state
+   * deep in your component tree without needing to pass a selector to the hook.
+   *
+   * @example
+   * <debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+   *   {(state) => (
+   *     <div>{state().isPending ? 'Waiting...' : 'Ready'}</div>
+   *   )}
+   * </debouncer.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: DebouncerState<TFn>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) => JSX.Element
   /**
    * Reactive state that will be updated when the debouncer state changes
    *
@@ -45,14 +62,24 @@ export interface SolidDebouncer<
  *
  * ## State Management and Selector
  *
- * The hook uses TanStack Store for reactive state management. The `selector` parameter allows you
- * to specify which state changes will trigger a re-render, optimizing performance by preventing
- * unnecessary re-renders when irrelevant state changes occur.
+ * The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+ * in two ways:
+ *
+ * **1. Using `debouncer.Subscribe` component (Recommended for component tree subscriptions)**
+ *
+ * Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+ * needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+ * in child components.
+ *
+ * **2. Using the `selector` parameter (For hook-level subscriptions)**
+ *
+ * The `selector` parameter allows you to specify which state changes will trigger reactive updates
+ * at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+ * state changes occur.
  *
  * **By default, there will be no reactive state subscriptions** and you must opt-in to state
- * tracking by providing a selector function. This prevents unnecessary re-renders and gives you
- * full control over when your component updates. Only when you provide a selector will the
- * component re-render when the selected state values change.
+ * tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+ * updates and gives you full control over when your component tracks state changes.
  *
  * Available state properties:
  * - `canLeadingExecute`: Whether the debouncer can execute on the leading edge
@@ -69,21 +96,21 @@ export interface SolidDebouncer<
  *   { wait: 500 }
  * );
  *
- * // Opt-in to re-render when isPending changes (optimized for loading states)
+ * // Opt-in to track isPending changes (optimized for loading states)
  * const debouncer = createDebouncer(
  *   (query: string) => fetchSearchResults(query),
  *   { wait: 500 },
  *   (state) => ({ isPending: state.isPending })
  * );
  *
- * // Opt-in to re-render when executionCount changes (optimized for tracking execution)
+ * // Opt-in to track executionCount changes (optimized for tracking execution)
  * const debouncer = createDebouncer(
  *   (query: string) => fetchSearchResults(query),
  *   { wait: 500 },
  *   (state) => ({ executionCount: state.executionCount })
  * );
  *
- * // Multiple state properties - re-render when any of these change
+ * // Multiple state properties - track when any of these change
  * const debouncer = createDebouncer(
  *   (query: string) => fetchSearchResults(query),
  *   { wait: 500 },
@@ -113,7 +140,21 @@ export function createDebouncer<TFn extends AnyFunction, TSelected = {}>(
     ...options,
   } as DebouncerOptions<TFn>
 
-  const asyncDebouncer = new Debouncer<TFn>(fn, mergedOptions)
+  const asyncDebouncer = new Debouncer<TFn>(
+    fn,
+    mergedOptions,
+  ) as unknown as SolidDebouncer<TFn, TSelected>
+
+  asyncDebouncer.Subscribe = function Subscribe<TSelected>(props: {
+    selector: (state: DebouncerState<TFn>) => TSelected
+    children: ((state: Accessor<TSelected>) => JSX.Element) | JSX.Element
+  }) {
+    const selected = useStore(asyncDebouncer.store, props.selector)
+
+    return typeof props.children === 'function'
+      ? props.children(selected)
+      : props.children
+  }
 
   const state = useStore(asyncDebouncer.store, selector)
 

package/src/queuer/createQueuedSignal.ts

@@ -20,13 +20,13 @@ import type { QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
  * ## State Management and Selector
  *
  * The primitive uses Solid's reactive state management via the underlying queuer instance.
- * The `selector` parameter allows you to specify which queuer state changes will trigger a re-render,
- * optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+ * The `selector` parameter allows you to specify which queuer state changes will trigger reactive updates,
+ * optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
  *
  * **By default, there will be no reactive state subscriptions** and you must opt-in to state
- * tracking by providing a selector function. This prevents unnecessary re-renders and gives you
- * full control over when your component updates. Only when you provide a selector will the
- * component re-render when the selected state values change.
+ * tracking by providing a selector function. This prevents unnecessary updates and gives you
+ * full control over when your component tracks state changes. Only when you provide a selector will the
+ * component track changes to the selected state values.
  *
  * Available queuer state properties:
  * - `executionCount`: Number of items that have been processed by the queuer
@@ -55,7 +55,7 @@ import type { QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
  *   }
  * );
  *
- * // Opt-in to re-render when queue contents change (optimized for displaying queue items)
+ * // Opt-in to track queue contents changes (optimized for displaying queue items)
  * const [items, addItem, queue] = createQueuedSignal(
  *   (item) => console.log('Processing:', item),
  *   { started: true, wait: 1000 },
@@ -66,7 +66,7 @@ import type { QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
  *   })
  * );
  *
- * // Opt-in to re-render when processing state changes (optimized for loading indicators)
+ * // Opt-in to track processing state changes (optimized for loading indicators)
  * const [items, addItem, queue] = createQueuedSignal(
  *   (item) => console.log('Processing:', item),
  *   { started: true, wait: 1000 },
@@ -78,7 +78,7 @@ import type { QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
  *   })
  * );
  *
- * // Opt-in to re-render when execution metrics change (optimized for stats display)
+ * // Opt-in to track execution metrics changes (optimized for stats display)
  * const [items, addItem, queue] = createQueuedSignal(
  *   (item) => console.log('Processing:', item),
  *   { started: true, wait: 1000 },