Extended Map/Set for SvelteKit

Why?

In SvelteKit, whenever data is changed in a Set or Map, it will not trigger reactivity unless the Map or Set is reassigned to the variable. Consider the following example:

let changes = new Set();

function addChanges(change: string) {
  changes.add(change);
}

This will not trigger Svelte’s reactivity. However, with this change, it will:

let changes = new Set();

function addChanges(change: string) {
  changes = changes.add(change);
}

The Custom Classes

That’s great. However, there are two methods in Sets and Maps which do not return the Set/Map - delete(): boolean and clear(): void. The following extended classes SvelteMap and SvelteSet modifies those methods to return the Set/Map.

/**
 * `SvelteMap` class, a subclass of JavaScript's `Map` class
 * with modified methods for remove and clear operations that return the `Map` itself for chain invocations.
 */
export class SvelteMap<TKey, TVal> extends Map<TKey, TVal> {
	constructor(iterable?: Iterable<readonly [TKey, TVal]> | null) {
		super(iterable);
	}

	/**
	 * `remove` method for `SvelteMap`, deletes an element with the specified key from the Map.
	 * @param key - Key of the element to remove from the Map.
	 * @returns `this` - Returns the `Map` itself after removal for chain invocations.
	 */
	public remove(key: TKey) {
		super.delete(key);
		return this;
	}

	/**
	 * `clear` method for `SvelteMap`, removes all elements from the Map.
	 * @returns `this` - Returns the `Map` itself after the operation for chain invocations.
	 */
	public clear() {
		super.clear();
		return this;
	}
}

/**
 * `SvelteSet` class, a subclass of JavaScript's `Set` class
 * with modified methods for remove and clear operations that return the `Set` itself for chain invocations.
 */
export class SvelteSet<TVal> extends Set<TVal> {
	constructor(iterable?: Iterable<TVal> | null) {
		super(iterable);
	}

	/**
	 * `remove` method for `SvelteSet`, deletes a value from the Set.
	 * @param val - Value to remove from the Set.
	 * @returns `this` - Returns the `Set` itself after removal for chain invocations.
	 */
	public remove(val: TVal) {
		super.delete(val);
		return this;
	}

	/**
	 * `clear` method for `SvelteSet`, removes all elements from the Set.
	 * @returns `this` - Returns the `Set` itself after the operation for chain invocations.
	 */
	public clear() {
		super.clear();
		return this;
	}
}