SnapshotController

SnapshotController subscribes to a State<T> container (the reactive primitive that backs a store) and triggers host updates when state changes. It has two overloads:

Without a selector — returns the entire state object. Re-renders on any state change.
With a selector — returns a derived slice of state. Re-renders only when the selected value changes (shallow equality).

Signature

import { SnapshotController } from '@videojs/store/html';

class SnapshotController<T extends object, R = T>
  implements ReactiveController

Constructor

Without selector
With selector

new SnapshotController(host, state)

host

ReactiveControllerHost

required

The host element that owns this controller. Typically this inside a custom element class.

state

State<T>

required

The State container to subscribe to. Usually accessed as store.$state.

new SnapshotController(host, state, selector)

host

ReactiveControllerHost

required

The host element that owns this controller. Typically this inside a custom element class.

state

State<T>

required

The State container to subscribe to. Usually accessed as store.$state.

selector

Selector<T, R>

required

A function that derives a value from the state. The host is re-rendered only when the derived value changes (shallow equality).

Properties

value

The current state value:

Without a selector: the full state object (T).
With a selector: the return value of the selector applied to the current state (R).

Unlike StoreController.value, this property never throws — the state container is provided at construction time.

Methods

track(state)

void

Switch to a different State<T> container at runtime. Tears down the previous subscription and sets up a new one immediately.

#state = new SnapshotController(this, initialState);

switchState(nextState: State<T>) {
  this.#state.track(nextState);
}

Usage

Full state subscription

import { SnapshotController } from '@videojs/store/html';

class SliderDisplay extends HTMLElement {
  readonly #state = new SnapshotController(this, sliderState);

  render() {
    const { value, min, max } = this.#state.value;
    this.textContent = `${value} / ${max}`;
  }
}

customElements.define('slider-display', SliderDisplay);

Selector-based subscription

import { SnapshotController } from '@videojs/store/html';

class SliderValue extends HTMLElement {
  readonly #value = new SnapshotController(
    this,
    sliderState,
    (s) => s.value
  );

  render() {
    // Only re-renders when s.value changes
    this.textContent = String(this.#value.value);
  }
}

customElements.define('slider-value', SliderValue);

Lifecycle

hostConnected() — subscribes to the State container.
hostDisconnected() — unsubscribes and clears the cached value.

The cached selector result is invalidated on disconnect, so reconnection always recomputes from the current state.