@tanstack/lit-table/dist/subscribe-directive.d.ts

Headless UI for building powerful tables & datagrids for Lit.

import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/lit-store";
import { AsyncDirective, DirectiveResult } from "lit/async-directive.js";
import { Part } from "lit";
//#region src/subscribe-directive.d.ts
type SelectionSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
/**
 * A function that selects a specific slice of state from the source.
 * @template TSource - The complete state type from the store/atom.
 * @template TSelected - The extracted or derived state type.
 */
type Selector<TSource, TSelected> = (state: TSource) => TSelected;
/**
 * A render function that takes the selected state and returns content
 * (typically a `TemplateResult`) to be rendered by Lit.
 * @template TSelected - The selected state passed into the template.
 */
type TemplateFunction<TSelected> = (value: TSelected) => unknown;
/**
 * An asynchronous Lit directive that subscribes to a `@tanstack/lit-store`
 * source and triggers re-renders specifically for the template portion it wraps.
 * * It uses a "fake" `ReactiveControllerHost` to bridge the gap between
 * TanStack's standard controller requirements and the `AsyncDirective` lifecycle.
 */
declare class SubscribeDirective extends AsyncDirective {
  /** The `TanStackStoreSelector` controller that manages the subscription to the store/atom */
  private controller?;
  /** The latest source and selector used to determine if a new subscription is needed on updates */
  private latestSource?;
  private latestSelector?;
  private resolvedTemplate?;
  private initialized;
  /**
   * Renders the entire state of the source without a selector.
   * @param source - The store or atom to subscribe to.
   * @param template - The render function receiving the full state.
   */
  render<TSource>(source: SelectionSource<TSource>, template: TemplateFunction<TSource>): unknown;
  /**
   * Renders a specific slice of state derived via a selector function.
   * @param source - The store or atom to subscribe to.
   * @param selector - A function to extract the relevant slice of state.
   * @param template - The render function receiving the selected state slice.
   */
  render<TSource, TSelected>(source: SelectionSource<TSource>, selector: Selector<TSource, TSelected>, template: TemplateFunction<TSelected>): unknown;
  update(_part: Part, args: [SelectionSource<any>, TemplateFunction<any>] | [SelectionSource<any>, Selector<any, any>, TemplateFunction<any>]): unknown;
  /** Cleans up the controller subscription when the directive is removed from the DOM. */
  disconnected(): void;
  /** Restores the controller subscription when the directive is re-attached to the DOM. */
  reconnected(): void;
  /**
   * Creates a mock `ReactiveControllerHost` allowing the `TanStackStoreSelector`
   * to plug into the `AsyncDirective`'s update cycle using `setValue()`.
   */
  private createFakeHost;
}
/**
 * A Lit directive that subscribes to a source (Store or Atom)
 * and efficiently updates only the wrapped template
 * when the state or selected slice changes.
 * @example
 * ```ts
 * // Without a selector (subscribes to entire state)
 * html`<div>${subscribe(myStore, (state) => html`<span>${state.count}</span>`)}</div>`
 * * // With a selector (only updates when `count` changes)
 * html`<div>${subscribe(myStore, state => state.count, (count) => html`<span>${count}</span>`)}</div>`
 * ```
 */
declare const subscribe: {
  /** Subscribes to the entire source state without filtering. */
  <TSource>(source: SelectionSource<TSource>, template: TemplateFunction<TSource>): DirectiveResult<typeof SubscribeDirective>;
  /**
   * Subscribes to a specific slice of the source state via a selector,
   * preventing unnecessary re-renders when other parts of the state change.
   */
  <TSource, TSelected>(source: SelectionSource<TSource>, selector: Selector<TSource, TSelected>, template: TemplateFunction<TSelected>): DirectiveResult<typeof SubscribeDirective>;
};
//#endregion
export { SelectionSource, SubscribeDirective, subscribe };