mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { AnyStore, InferStoreState } from "../../core/store.js";
|
|
import { Selector } from "../../core/shallow-equal.js";
|
|
import { StoreSource } from "../store-accessor.js";
|
|
import { ReactiveController, ReactiveControllerHost } from "@videojs/element";
|
|
//#region src/html/controllers/store-controller.d.ts
|
|
type StoreControllerHost = ReactiveControllerHost & HTMLElement;
|
|
/**
|
|
* Access store state and actions.
|
|
*
|
|
* Without selector: Returns the store, does NOT subscribe to changes.
|
|
* With selector: Returns selected state, triggers update when selected state changes (shallowEqual).
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* // Store access (no subscription) - access actions
|
|
* class Controls extends LitElement {
|
|
* #store = new StoreController(this, storeSource);
|
|
*
|
|
* handleClick() {
|
|
* this.#store.value.setVolume(0.5);
|
|
* }
|
|
* }
|
|
*
|
|
* // Selector-based subscription - re-renders when playback changes
|
|
* class PlayButton extends LitElement {
|
|
* #playback = new StoreController(this, storeSource, selectPlayback);
|
|
*
|
|
* render() {
|
|
* const playback = this.#playback.value;
|
|
* if (!playback) return nothing;
|
|
* return html`<button @click=${playback.toggle}>
|
|
* ${playback.paused ? 'Play' : 'Pause'}
|
|
* </button>`;
|
|
* }
|
|
* }
|
|
* ```
|
|
*/
|
|
declare class StoreController<Store extends AnyStore, Result = Store> implements ReactiveController {
|
|
#private;
|
|
/**
|
|
* @label Without Selector
|
|
* @param host - The host element that owns this controller.
|
|
* @param source - Store instance or context to resolve the store from.
|
|
*/
|
|
constructor(host: StoreControllerHost, source: StoreSource<Store>);
|
|
/**
|
|
* @label With Selector
|
|
* @param host - The host element that owns this controller.
|
|
* @param source - Store instance or context to resolve the store from.
|
|
* @param selector - Derives a value from the store state.
|
|
*/
|
|
constructor(host: StoreControllerHost, source: StoreSource<Store>, selector: Selector<InferStoreState<Store>, Result>);
|
|
get value(): Result;
|
|
hostConnected(): void;
|
|
}
|
|
declare namespace StoreController {
|
|
type Host = StoreControllerHost;
|
|
}
|
|
//#endregion
|
|
export { StoreController, StoreControllerHost };
|
|
//# sourceMappingURL=store-controller.d.ts.map
|