Class ReactiveList<T>

ReactiveList is a class that represents a reactive list of items. It allows adding, removing, and updating items in the list while maintaining reactivity.

Example

const list = new ReactiveList();
const item1 = { name: "item1" };
const item2 = { name: "item2" };
const item3 = { name: "item3" };

list.subscribe((updates) => {
    console.log("updates: ", Array.from(updates.keys()));
    console.log("list.length = ", list.length);
    console.log("list.items = ", list.getItems());
    console.log("=====================================");
});

list.setItems([item1, item2, item3]);
// Outputs:
// updates:  [ '0.name', '1.name', '2.name', 'length' ]
// list.length =  3
// list.items =  [ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ]

list.setItems([item1]);
// Outputs:
// updates:  [ '1', '2', 'length' ]
// list.length =  1
// list.items =  [ { name: 'item1' } ]

list.setItem(0, { name: "updated" });
// Outputs:
// updates:  [ '0.name' ]
// list.length =  1
// list.items =  [ { name: 'updated' } ]

Type Parameters

  • T

Constructors

constructor

Properties

#lengthAtom #store

Accessors

isDestroyed length

Methods

add clear destroy getItem getItems removeFirstItem removeItem removeLastItem setItem setItems splice subscribe

Constructors

constructor

Properties

Private #lengthAtom

#lengthAtom: Atom<number>

Private #store

#store: Store

Accessors

isDestroyed

  • get isDestroyed(): boolean

  • Returns true if the reactive list has been destroyed, and false otherwise. This property is useful for determining whether it is safe to interact with the reactive list. A destroyed reactive list will not respond to any methods or properties except for this one.

    Returns boolean

length

Methods

add

  • add(...values): void

  • Adds the given values to the reactive list as ReactiveProps items. Updates the internal store and the length atom accordingly.

    Parameters

    • Rest ...values: T[]

      The values to add to the list.

    Returns void

clear

  • clear(): void

  • Clears all items from the reactive list. This method removes all items from the list using the splice operation, effectively resetting the list to an empty state.

    Returns void

destroy

  • destroy(): void

  • Cleans up the reactive list by destroying all items in the internal store. This method is useful when the reactive list is no longer needed and resources should be freed.

    Returns void

getItem

  • getItem(index): T

  • Retrieves the value of the ReactiveProps item at the specified index.

    Parameters

    • index: number

      The index of the item to retrieve from the reactive list.

    Returns T

    The value of the item at the specified index, or undefined if no item exists at that index.

getItems

  • getItems(): T[]

  • Retrieves all items from the reactive list as an array of values. The order of the items in the array matches the order of the items in the reactive list. If the reactive list has been destroyed, an empty array is returned.

    Returns T[]

    An array of values from the reactive list.

removeFirstItem

removeItem

  • removeItem(index): void

  • Removes the item at the given index from the reactive list.

    Parameters

    • index: number

      The index of the item to remove.

    Returns void

removeLastItem

setItem

  • setItem(index, value): void

  • Sets the value of the ReactiveProps item at the specified index. If the item exists at the given index, its value is updated.

    Parameters

    • index: number

      The index of the item to update in the reactive list.

    • value: T

      The new value to set for the item at the specified index.

    Returns void

setItems

  • setItems(values): void

  • Sets multiple items in the reactive list, updating existing items or adding new ones as necessary. If the new number of items is less than the current length of the list, the excess items are destroyed. Operates within a batch to optimize performance and prevent unnecessary reactivity triggers.

    Parameters

    • values: T[]

      The new values to set in the reactive list.

    Returns void

splice

  • splice(startIndex, count): void

  • Removes a specified number of items from the reactive list, starting at a given index. The function operates within a batch to optimize performance and prevent unnecessary reactivity triggers.

    Parameters

    • startIndex: number

      The index at which to start removing items from the list.

    • count: number

      The number of items to remove from the list.

    Returns void

subscribe

  • subscribe(fn): (() => void)

  • Subscribes a function to be called whenever the value of this reactive list changes. The function is called with a Map of updates, where the keys are the names of the items that changed, and the values are UpdateDataRecord objects.

    Parameters

    • fn: ((update) => void)

      The function to be called whenever the value of this reactive list changes.

    Returns (() => void)

    A function that unsubscribes the given function.

      • (): void

      • Returns void

Settings

Member Visibility

Theme

On This Page

constructor#lengthAtom#storeisDestroyedlengthaddcleardestroygetItemgetItemsremoveFirstItemremoveItemremoveLastItemsetItemsetItemssplicesubscribe