> For the complete documentation index, see [llms.txt](https://creatorlabs.gitbook.io/weblabs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://creatorlabs.gitbook.io/weblabs/api-reference/core-experimental.js/v0.3.0-preview-7.md).

# v0.3.0-preview-7

Experimental APIs for version 0.3.0-preview-7

## ArrayStore()

```typescript
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:

```typescript
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()

```typescript
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.

{% hint style="info" %}
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.
{% endhint %}