v0.3.0-preview-7

Experimental APIs for version 0.3.0-preview-7

ArrayStore()

export declare function ArrayStore<type>(initial: type[]): ArrayStoreType<type>;

The ArrayStoreFunction works analogously with arrays as well as state. This is the new store for array based state. All the values stored in here caches the real index, hence it stores value of type kv<type>[] for convenience.

Type dependencies:

export interface ArrayStoreType<type> extends state<kv<type>[]> {
    push: (value: type) => void;
    pop: () => void;
    sync: () => void;
    addToSync: (callback: (udiff: Diff<any>[]) => void) => void;
    getArray: () => kv<type>[];
    insertBefore: (value: type, index: number) => void;
    insertAfter: (value: type, index: number) => void;
    filter: (callback: (value: type, index: number) => Boolean) => void;
    alter: (index: number, value: type) => void;
}
export interface Diff<type> {
    operationName: "push" | "pop" | "insertBefore" | "insertAfter" | "alterAt" | "removeAt";
    operationValue: type;
}
export interface kv<type> {
    key: number;
    value: type;
}

The above is all the function exported by this API, and it's type dependence.

ListView()

export declare function ListView<type>(array: ArrayStoreType<type>, builder: (value: type, index: number) => WebLabsElement, parent?: WebLabsElement): WebLabsElement;

The ListView function is capable of rendering arrays; as in 'syncing' UI with the array using the new ArrayStore. It does that without re-rendering the entire DOM node containing the array, but only update what needs to be updated.

It is to be noted that ListView can reflect the operations defined by ArrayStore only, since it also stores the type of diff that was occurred, which means external mutation will create UN-intended effects.