@cycle/state
Version:
Wraps your Cycle.js main function with reducer-driven state management
95 lines (94 loc) • 4.19 kB
TypeScript
import { Stream } from 'xstream';
import { InternalInstances, ItemKeyFn, ItemScopeFn, ItemFactoryFn } from './types';
/**
* An object representing all instances in a collection of components. Has the
* methods pickCombine and pickMerge to get the combined sinks of all instances.
*/
export declare class Instances<Si> {
private _instances$;
constructor(instances$: Stream<InternalInstances<Si>>);
/**
* Like `merge` in xstream, this operator blends multiple streams together, but
* picks those streams from a collection of component instances.
*
* Use the `selector` string to pick a stream from the sinks object of each
* component instance, then pickMerge will merge all those picked streams.
*
* @param {String} selector a name of a channel in a sinks object belonging to
* each component in the collection of components.
* @return {Function} an operator to be used with xstream's `compose` method.
*/
pickMerge(selector: string): Stream<any>;
/**
* Like `combine` in xstream, this operator combines multiple streams together,
* but picks those streams from a collection of component instances.
*
* Use the `selector` string to pick a stream from the sinks object of each
* component instance, then pickCombine will combine all those picked streams.
*
* @param {String} selector a name of a channel in a sinks object belonging to
* each component in the collection of components.
* @return {Function} an operator to be used with xstream's `compose` method.
*/
pickCombine(selector: string): Stream<Array<any>>;
}
interface BaseOptions<S, So, Si> {
/**
* A function that describes how to collect all the sinks from all item
* instances. The instances argument is an object with two methods: pickMerge
* and pickCombine. These behave like xstream "merge" and "combine" operators,
* but are applied to the dynamic collection of all item instances.
*
* This function should return an object of sinks. This is what the collection
* component will output as its sinks.
*/
collectSinks(instances: Instances<Si>): any;
/**
* Specify, from the state object for each item in the collection, a key for
* that item. This avoids bugs when the collection grows or shrinks, as well
* as helps determine the isolation scope for each item, when specifying the
* `itemScope` option. This function also takes the index number (from the
* corresponding entry in the state array) as the second argument.
*
* Example:
*
* ```js
* itemKey: (itemState, index) => itemState.key
* ```
*/
itemKey?: ItemKeyFn<S>;
/**
* Specify each item's isolation scope, given the item's key.
*
* Pass a function which describes how to create the isolation scopes for each
* item component, given that item component's unique key. The unique key for
* each item was defined by the `itemKey` option.
*/
itemScope?: ItemScopeFn;
/**
* Choose the channel name where the StateSource exists. Typically this is
* 'state', but you can customize it if your app is using another name. It is
* used for referencing the correct source used for describing
* growing/shrinking of the collection of items.
*/
channel?: string;
}
interface HomogenousOptions<S, So, Si> extends BaseOptions<S, So, Si> {
/**
* The Cycle.js component for each item in this collection. Should be just a
* function from sources to sinks.
*/
item(so: So): Si;
itemFactory?: never;
}
interface HeterogenousOptions<S, So, Si> extends BaseOptions<S, So, Si> {
item?: never;
/**
* A factory function such that given the item's state object, returns
* the Cycle.js component for that item in this collection.
*/
itemFactory: ItemFactoryFn<S, So, Si>;
}
export declare type CollectionOptions<S, So, Si> = HomogenousOptions<S, So, Si> | HeterogenousOptions<S, So, Si>;
export declare function makeCollection<S, So = any, Si = any>(opts: CollectionOptions<S, So, Si>): (sources: any) => any;
export {};