@gluonjs/store


@gluonjs/store / packages/store/src / StoreManager

Class: StoreManager

Constructors

Constructor

new StoreManager(options?): StoreManager

Parameters

options?

StoreManagerOptions = {}

Returns

StoreManager

Methods

addPlugin()

addPlugin(plugin): () => void

Parameters

plugin

StorePlugin

Returns

() => void


dehydrate()

dehydrate(): StoreSnapshot

Returns

StoreSnapshot


deserialize()

deserialize(serialized): void

Parameters

serialized

string

Returns

void


dispose()

dispose(): void

Returns

void


hotUpdate()

hotUpdate<Id, State, Getters, Actions>(definition, metadata?): Store<Id, State, Getters, Actions>

Type Parameters

Id

Id extends string

State

State extends StateTree

Getters

Getters extends StoreGetterTree<State>

Actions

Actions extends StoreActionTree

Parameters

definition

StoreDefinition<Id, State, Getters, Actions>

metadata?

StoreTransactionMetadata = {}

Returns

Store<Id, State, Getters, Actions>


hydrate()

hydrate(snapshot): void

Parameters

snapshot

StoreSnapshot

Returns

void


serialize()

serialize(): string

Returns

string


subscribe()

subscribe(callback): () => void

Parameters

callback

StoreSubscription

Returns

() => void


use()

use<Id, State, Getters, Actions>(definition): Store<Id, State, Getters, Actions>

Type Parameters

Id

Id extends string

State

State extends StateTree

Getters

Getters extends StoreGetterTree<State>

Actions

Actions extends StoreActionTree

Parameters

definition

StoreDefinition<Id, State, Getters, Actions>

Returns

Store<Id, State, Getters, Actions>


withMetadata()

withMetadata<Result>(metadata, callback): Result

Type Parameters

Result

Result

Parameters

metadata

StoreTransactionMetadata

callback

() => Result

Returns

Result

Example

Own Store instances, plugins, transaction observation, metadata, hydration, HMR, serialization, and deterministic disposal for one application or test:

ts
import {
  StoreManager,
  createStoreManager,
  createTestingStoreManager,
  defineStore,
  type JsonPrimitive,
  type JsonValue,
  type StateTree,
  type Store,
  type StoreActionContext,
  type StoreActionSubscription,
  type StoreActionTree,
  type StoreGetterTree,
  type StoreGetterValues,
  type StoreManagerOptions,
  type StorePlugin,
  type StorePluginDefinition,
  type StorePluginResult,
  type StorePluginStore,
  type StoreProperties,
  type StoreSnapshot,
  type StoreSubscription,
  type StoreTransaction,
  type StoreTransactionMetadata,
  type StoreTransactionStatus,
  type StoreTransactionType,
  type TestingStoreManagerOptions,
} from '@gluonjs/store';

type CartState = { items: string[]; open: boolean };
type CartGetters = { count: number };
type CartActions = { add(item: string): number };
const stateTree: StateTree = { items: [], open: false };
const getterTree: StoreGetterTree<CartState> = { count: 0 };
const getterValues: StoreGetterValues<CartGetters> = { count: 0 };
const actionTree: StoreActionTree = { add: (_item: string) => 1 };
const transactionType: StoreTransactionType = 'action';
const transactionStatus: StoreTransactionStatus = 'fulfilled';
const metadata: StoreTransactionMetadata = { source: 'product-page' };
const primitive: JsonPrimitive = 'lamp';
const json: JsonValue = { items: [primitive] };
const records: StoreTransaction[] = [];
const subscription: StoreSubscription = (transaction) => records.push(transaction);
const options = { onTransaction: subscription } satisfies StoreManagerOptions;
const manager: StoreManager = createStoreManager(options);

const definition = defineStore({
  id: 'cart',
  state: (): CartState => ({ items: [], open: false }),
  getters: (state): CartGetters => ({ count: state.items.length }),
  actions: (store): CartActions => ({ add(item) { store.items.push(item); return store.items.length; } }),
});
const cart: Store<'cart', CartState, CartGetters, CartActions> = definition.use(manager);
const properties: StoreProperties<'cart', CartState> = cart;
const actionSubscription: StoreActionSubscription = (context: StoreActionContext) =>
  context.after((result) => console.log('action result', result));
const stopAction = cart.$onAction(actionSubscription);
manager.withMetadata(metadata, () => cart.add('lamp'));
const snapshot: StoreSnapshot = manager.dehydrate();

const plugin: StorePlugin = ({ definition: pluginDefinition, store }) => {
  const typedDefinition: StorePluginDefinition = pluginDefinition;
  const typedStore: StorePluginStore = store;
  const result: StorePluginResult = { inspectionId: `${typedDefinition.id}:${typedStore.$id}` };
  return result;
};
manager.addPlugin(plugin);
const testingOptions = { initialState: snapshot, plugins: [plugin] } satisfies TestingStoreManagerOptions;
const testing = createTestingStoreManager(testingOptions);
console.log(stateTree, getterTree, getterValues, actionTree, transactionType, transactionStatus, json, properties.$state, testing.use(definition).items);
stopAction();
testing.dispose();
manager.dispose();