Reactivity on extended array

[FabrizioFerrari-ILS]

Describe the problem

Not sure if it's a bug, but I encountered a really strange behaviour. I am trying to make a reloadable state to contain arrays. I ended up with

export class ReloadableArray<T> extends Array<T> {
	private loading = $state(false);
	private updateFn: () => T[] | Promise<T[]> = () => [];

	constructor(initialValue: T[], updateFn: () => T[] | Promise<T[]>) {
		super();

		if (Array.isArray(initialValue)) {
			initialValue.forEach((item) => this.push(item));
		}

		if (typeof updateFn === "function") {
			this.updateFn = updateFn;

			setTimeout(() => {
				void this.reload();
			}, 0);
		}
	}

	async reload(): Promise<void> {
		this.loading = true;
		try {
			const updatedValues = await this.updateFn();
			this.length = 0;
			updatedValues.forEach((value) => this.push(value));
		} catch (error) {
			console.error("Error reloading data:", error);
		} finally {
			this.loading = false;
		}
	}

	get isLoading(): boolean {
		return this.loading;
	}
}

then it is used in this way

let items = $derived(customSort(new ReloadableArray<MyType>([emptyItem], () => { [call to API] })));

and the items are used in a component that draws a combobox. The component uses Svelte 4 and uses {#each}.
The weird behavior is this: items are loaded and the combobox is updated, but customSort() is called only the first time on the empty element. Note that customSort() return its argument if the length is <=1. So, i think the component maintains a reference to the original array, and this is reactive, but $derived() is working only on initialization. I would expect it to work always, or not to work at all.

Describe the proposed solution

I'd like to have reactivity on extended arrays.

Importance

nice to have

[geodask]

The array class you extended is not reactive. For arrays and objects to be deeply reactive in svelte, a proxy object is created when using the $state rune during definition. When an object or array is defined with $state, it becomes a deeply reactive proxy that triggers updates for operations like push. Without this proxy, changes to a plain object or array go undetected. Additionally, I would say that the use of $derived here is semantically incorrect. The $derived rune is intended for reactively calculating a value based on other reactive values from $state, $derived , or $props runes

I would suggest something like this to create a reloadable array:

export function reloadableArray<T>(initialValue: T[], updateFn: () => T[] | Promise<T[]>) {
	const current = $state(initialValue);
	let loading = $state(false);

	async function reload() {
		loading = true;
		try {
			const updatedValues = await updateFn();
			current.splice(0, current.length, ...updatedValues);
		} catch (error) {
			console.error('Error reloading data:', error);
		} finally {
			loading = false;
		}
	}

	return {
		get current() {
			return current;
		},
		get loading() {
			return loading;
		},
		reload
	};
}

Then you can use it like this:

const array = reloadableArray([], () => {
	// Call to api here and return new items
});

// array.current is reative and contains the latest value of your array

Using current is the recommended approach to access the latest value of the array. You can then define getters to return any reactive state and include methods to operate on the data.

[dummdidumm]

Closing since this works as expected - only the built-in object/array prototypes are deeply proxified, all other classes are left as-is.