@oscarpalmer/mora 0.29.0 → 0.31.0

package/src/value/array.ts

@@ -1,268 +1,40 @@
+import {select} from '@oscarpalmer/atoms/array';
+import {filter} from '@oscarpalmer/atoms/array/filter';
+import {noop} from '@oscarpalmer/atoms/function';
+import {isPlainObject} from '@oscarpalmer/atoms/is';
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {METHODS_AFFECTING_LENGTH, METHODS_UPDATE, NAME_ARRAY, PROPERTY_LENGTH} from '../constants';
+import {
+	METHODS_AFFECTING_LENGTH,
+	METHODS_UPDATE,
+	NAME_ARRAY,
+	NAME_MORA,
+	PROPERTY_LENGTH,
+} from '../constants';
 import {
 	emityProxyValues,
 	getReactiveValueInProxy,
 	setProxyValue,
 	setValueInProxy,
 } from '../helpers/proxy';
-import {emitValue, equalArrays, getValue} from '../helpers/value';
-import type {ReactiveOptions, ReactiveState, Unsubscribe} from '../models';
-import {noop, subscribe} from '../subscription';
-import {type Computed, computed} from './computed';
-import {Reactive} from './reactive';
-import {type Signal, signal} from './signal';
-
-export class ReactiveArray<Item> extends Reactive<Item[], Item> {
-	readonly #indiced = new Map<number, Computed<unknown>>();
-
-	readonly #size = signal(0);
-
-	/**
-	 * The length of the array
-	 */
-	get length(): number {
-		return this.#size.get();
-	}
-
-	/**
-	 * Set the length of the array
-	 */
-	set length(value: number) {
-		if (typeof value === 'number' && value >= 0 && value !== this.state.value.length) {
-			this.get().length = value;
-		}
-	}
-
-	constructor(value: Item[], options?: ReactiveOptions<Item>) {
-		super(
-			NAME_ARRAY,
-			new Proxy(value, {
-				get: (target: Item[], property: PropertyKey) =>
-					METHODS_UPDATE.has(property as string)
-						? updateArray(property as string, target, this.state, this.#size)
-						: Reflect.get(target, property),
-				set: (target: Item[], property: PropertyKey, value: Item) =>
-					setValueInProxy({
-						property,
-						target,
-						value,
-						isArray: true,
-						state: this.state,
-						length: this.#size,
-					}),
-			}),
-			options,
-		);
-
-		this.#size.set(value.length);
-	}
-
-	/**
-	 * Clear the array
-	 */
-	clear(): void {
-		this.length = 0;
-	}
-
-	/**
-	 * Create a computed, filtered array
-	 * @param callback Callback to evaluate each item
-	 * @return Computed array of filtered items
-	 */
-	filter(callback: (item: Item, index: number, array: Item[]) => boolean): Computed<Item[]> {
-		return computed(() => this.get().filter(callback));
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	get(): Item[];
-
-	/**
-	 * Get the value at an index
-	 * @param index Index of item to get _(if negative, starts from the end)_
-	 * @returns Item at index, or `undefined` if it doesn't exist
-	 */
-	get(index: number): Item | undefined;
-
-	/**
-	 * Get the length of the array
-	 * @returns Length of the array
-	 */
-	get(property: typeof PROPERTY_LENGTH): number;
-
-	get(first?: unknown): unknown {
-		if (typeof first === 'number') {
-			return getReactiveValueInProxy(this, this.#indiced, first, true).get();
-		}
-
-		return first === PROPERTY_LENGTH ? this.length : getValue(this.state);
-	}
-
-	/**
-	 * Create a computed, mapped array
-	 * @param callback Callback to transform each item
-	 * @return Computed array of mapped items
-	 */
-	map<Mapped>(callback: (item: Item, index: number, array: Item[]) => Mapped): Computed<Mapped[]> {
-		return computed(() => this.get().map(callback));
-	}
-
-	/**
-	 * Notify dependents of changes
-	 *
-	 * _This bypasses equality checks and will immediately notify dependents.
-	 * Use this only if you're modifying nested data that would be ignored by equality checks._
-	 */
-	notify(): void {
-		emityProxyValues(this.state, this.#indiced);
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	override peek(): Item[];
-
-	/**
-	 * Get the value at an index _(without reactivity)_
-	 * @param index Index of item to get _(if negative, starts from the end)_
-	 * @returns Item at index, or `undefined` if it doesn't exist
-	 */
-	override peek(index: number): Item | undefined;
-
-	/**
-	 * Get the length of the array _(without reactivity)_
-	 * @returns Length of the array
-	 */
-	override peek(property: typeof PROPERTY_LENGTH): number;
-
-	override peek(value?: unknown): unknown {
-		if (value === PROPERTY_LENGTH) {
-			return this.#size.peek();
-		}
-
-		return typeof value === 'number' ? this.state.value.at(value) : this.state.value.slice();
-	}
-
-	/**
-	 * Remove and return the last item of the array
-	 * @returns Removed item, or `undefined` if the array is empty
-	 */
-	pop(): Item | undefined {
-		return this.state.value.pop();
-	}
-
-	/**
-	 * Add items to the end of the array
-	 * @param items Items to add
-	 * @returns New array length
-	 */
-	push(...items: Item[]): number {
-		return this.state.value.push(...items);
-	}
-
-	/**
-	 * Set the value
-	 * @param value New array of items _(defaults to an empty array)_
-	 */
-	set(
-		value?:
-			| Item[]
-			| (() => null | undefined | Item[] | Promise<null | undefined | Item[]>)
-			| Promise<null | undefined | Item[]>,
-	): void;
-
-	/**
-	 * Set the value at an index
-	 * @param index Index of item to set __(if negative, starts from the end)_
-	 * @param value New item
-	 */
-	set(index: number, value: Item | (() => Item | Promise<Item>) | Promise<Item>): void;
-
-	/**
-	 * Set the length of the array
-	 * @param value New array length
-	 */
-	set(property: typeof PROPERTY_LENGTH, value: number): void;
-
-	set(first?: unknown, second?: unknown): void {
-		setProxyValue<Item[], Item>(
-			true,
-			this.state,
-			isArrayValue,
-			isArrayIndex,
-			setArray,
-			setAtIndex,
-			first,
-			second,
-		);
-	}
-
-	/**
-	 * Remove and return the first item of the array
-	 * @returns Removed item, or `undefined` if the array is empty
-	 */
-	shift(): Item | undefined {
-		return this.state.value.shift();
-	}
-
-	/**
-	 * Remove and return items from the array _(and optionally add new items)_
-	 * @param from Index to start removing items from
-	 * @param to Index to stop removing items at _(defaults to the end of the array)_
-	 * @param items Optional items to add
-	 * @returns Removed items
-	 */
-	splice(from: number, to?: number, ...items: Item[]): Item[] {
-		return this.state.value.splice(from, to ?? this.state.value.length, ...items);
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	override subscribe(callback: (value: Item[]) => void): Unsubscribe;
-
-	/**
-	 * Subscribe to changes at a specific index
-	 * @param index Index of item to subscribe to
-	 * @param callback Callback for changes
-	 * @returns Unsubscribe callback
-	 */
-	override subscribe(index: number, callback: (value: Item | undefined) => void): Unsubscribe;
-
-	override subscribe(first: number | GenericCallback, second?: GenericCallback): Unsubscribe {
-		if (typeof first === 'number' && typeof second === 'function') {
-			return getReactiveValueInProxy(this, this.#indiced, first, true).subscribe(second);
-		}
-
-		return typeof first === 'function' ? subscribe(this.state, first) : noop;
-	}
-
-	/**
-	 * Add items to the beginning of the array
-	 * @param items Items to add
-	 * @returns New array length
-	 */
-	unshift(...items: Item[]): number {
-		return this.state.value.unshift(...items);
-	}
-
-	/**
-	 * Update the value _(based on the current value)_
-	 * @param callback Callback to update the value
-	 */
-	update(callback: (value: Item[]) => Item[]): void {
-		const updated = callback(this.state.value);
-
-		if (updated == null || Array.isArray(updated)) {
-			this.set(updated);
-		}
-	}
-}
+import {emitValue, equalArrays, getSimpleValue} from '../helpers/value';
+import type {
+	Computed,
+	ComputedEffect,
+	ReactiveArray,
+	ReactiveOptions,
+	ReactiveState,
+	ReadonlyInstances,
+	Signal,
+} from '../models';
+import {subscribe, unsubscribe} from '../subscription';
+import {computed} from './computed';
+import {reactive} from './reactive';
+import {getReadonlyInstance} from './readonly';
+import {signal} from './signal';
 
 /**
  * Create a reactive array from a function result
+ *
  * @param value Initial array of items
  * @param options Reactivity options
  * @returns Reactive array
@@ -274,6 +46,7 @@ export function array<Item>(
 
 /**
  * Create a reactive array from a promise
+ *
  * @param value Initial array of items
  * @param options Reactivity options
  * @returns Reactive array
@@ -285,6 +58,7 @@ export function array<Item>(
 
 /**
  * Create a reactive array
+ *
  * @param value Initial array of items
  * @param options Reactivity options
  * @returns Reactive array
@@ -295,11 +69,140 @@ export function array<Item>(
 	value: Item[] | (() => Item[] | Promise<Item[]>) | Promise<Item[]>,
 	options?: ReactiveOptions<Item>,
 ): ReactiveArray<Item> {
-	const instance = new ReactiveArray([], options);
+	const [rx, state] = reactive<Item[], Item>([], options);
+
+	const indiced = new Map<number, [Computed<unknown>, ComputedEffect]>();
+	const length = signal(0);
+	const readonlies: ReadonlyInstances<Item[]> = {};
+
+	let instance: Record<string, unknown> = {};
+
+	state.value = new Proxy([], {
+		get: (target: Item[], property: PropertyKey) =>
+			METHODS_UPDATE.has(property as string)
+				? updateArray(property as string, target, state, length)
+				: Reflect.get(target, property),
+		set: (target: Item[], property: PropertyKey, value: Item) =>
+			setValueInProxy({
+				length,
+				property,
+				state,
+				target,
+				value,
+				isArray: true,
+			}),
+	});
 
-	instance.set(value);
+	function get(): Item[];
+	function get(index: number): Item | undefined;
+	function get(property: typeof PROPERTY_LENGTH): number;
+	function get(value?: unknown): number | Item | Item[] | undefined;
 
-	return instance;
+	function get(value?: unknown): number | Item | Item[] | undefined {
+		return getArrayValue(instance as ReactiveArray<Item>, indiced, state, length, value);
+	}
+
+	function set(first?: unknown, second?: unknown): void {
+		setProxyValue<Item[], Item>(
+			true,
+			state,
+			isArrayValue,
+			isArrayIndex,
+			setArray,
+			setAtIndex,
+			first,
+			second,
+		);
+	}
+
+	const handlers = {
+		...rx,
+		get: (value?: number | typeof PROPERTY_LENGTH) => get(value),
+		peek: (first?: unknown, second?: boolean) => peekArrayValue(state, length, first, second),
+		subscribe: (first: number | GenericCallback, second?: GenericCallback) => {
+			if (typeof first === 'number' && typeof second === 'function') {
+				return getReactiveValueInProxy(
+					instance as ReactiveArray<Item>,
+					indiced,
+					first,
+					true,
+				).subscribe(second);
+			}
+
+			return typeof first === 'function' ? subscribe(state, first) : noop;
+		},
+		unsubscribe: (first: number | GenericCallback, second?: GenericCallback) => {
+			if (typeof first === 'number' && typeof second === 'function') {
+				getReactiveValueInProxy(instance as ReactiveArray<Item>, indiced, first, true)?.unsubscribe(
+					second,
+				);
+			} else if (typeof first === 'function') {
+				unsubscribe(state, first);
+			}
+		},
+	};
+
+	instance = {
+		...handlers,
+		asReadonly: (frozen?: unknown) =>
+			getReadonlyInstance(state, readonlies, handlers, frozen === true),
+		at: (index: number): Item | undefined => get(index),
+		clear: () => {
+			state.value.length = 0;
+		},
+		filter: (callback: (item: Item, index: number, array: Item[]) => boolean) =>
+			computed(() => filter(get(), callback)),
+		map: <Mapped>(callback: (item: Item, index: number, array: Item[]) => Mapped) =>
+			computed(() => get().map(callback)),
+		notify: () => {
+			emityProxyValues(state, indiced);
+		},
+		pop: () => state.value.pop(),
+		push: (...items: Item[]) => state.value.push(...items),
+		select: <Mapped>(
+			filter: (item: Item, index: number, array: Item[]) => boolean,
+			map: (item: Item, index: number, array: Item[]) => Mapped,
+		) => computed(() => select(get() as Item[], filter, map)),
+		set: (first?: unknown, second?: unknown) => {
+			set(first, second);
+		},
+		shift: () => state.value.shift(),
+		splice: (from: number, to?: number, ...items: Item[]) =>
+			state.value.splice(from, to ?? state.value.length, ...items),
+		unshift: (...items: Item[]) => state.value.unshift(...items),
+		update: (callback: (value: Item[]) => Item[]) =>
+			updateArrayValue(instance as ReactiveArray<Item>, state, callback),
+	};
+
+	Object.defineProperties(instance, {
+		[NAME_MORA]: {
+			enumerable: false,
+			value: NAME_ARRAY,
+		},
+		length: {
+			enumerable: true,
+			get: () => length.get(),
+			set: (value: number) => setArrayLength(state, value),
+		},
+	});
+
+	set(value);
+
+	return Object.freeze(instance) as ReactiveArray<Item>;
+}
+
+function getArrayValue<Item>(
+	instance: ReactiveArray<Item>,
+	indiced: Map<number, [Computed<unknown>, ComputedEffect]>,
+	state: ReactiveState<Item[], Item>,
+	length: Signal<number>,
+	first?: unknown,
+): number | Item | Item[] | undefined {
+	if (typeof first === 'number') {
+		return getReactiveValueInProxy(instance, indiced, first, true).get();
+	}
+
+	return first === PROPERTY_LENGTH ? length.get() : getSimpleValue(state);
 }
 
 function isArrayIndex(value: unknown): boolean {
@@ -310,6 +213,57 @@ function isArrayValue<Item>(value: unknown): value is Item[] | undefined {
 	return value == null || Array.isArray(value);
 }
 
+function peekArrayValue<Item>(
+	state: ReactiveState<Item[], Item>,
+	length: Signal<number>,
+	first?: unknown,
+	second?: boolean,
+): number | Item | Item[] | undefined {
+	if (first === PROPERTY_LENGTH) {
+		return length.peek();
+	}
+
+	let value: Item | Item[] | undefined;
+
+	if (typeof first === 'number') {
+		value = state.value.at(first);
+	} else {
+		value = state.value;
+	}
+
+	if (!(first === true || second === true)) {
+		return value;
+	}
+
+	if (Array.isArray(value)) {
+		return value.slice();
+	}
+
+	if (isPlainObject(value)) {
+		return {...value};
+	}
+
+	return value;
+}
+
+function setArray<Item>(state: ReactiveState<Item[], Item>, value: Item[] | undefined): void {
+	state.value.splice(0, state.value.length, ...(value ?? []));
+}
+
+function setArrayLength<Item>(state: ReactiveState<Item[], Item>, value: number): void {
+	if (typeof value === 'number' && value >= 0 && value !== state.value.length) {
+		state.value.length = value;
+	}
+}
+
+function setAtIndex<Item>(state: ReactiveState<Item[], Item>, index: unknown, value: Item): void {
+	const actual = (index as number) < 0 ? state.value.length + (index as number) : (index as number);
+
+	if (actual > -1) {
+		state.value[actual] = value;
+	}
+}
+
 function updateArray<Item>(
 	type: string,
 	array: Item[],
@@ -335,14 +289,14 @@ function updateArray<Item>(
 	};
 }
 
-function setArray<Item>(state: ReactiveState<Item[], Item>, value: Item[] | undefined): void {
-	state.value.splice(0, state.value.length, ...(value ?? []));
-}
-
-function setAtIndex<Item>(state: ReactiveState<Item[], Item>, index: unknown, value: Item): void {
-	const actual = (index as number) < 0 ? state.value.length + (index as number) : (index as number);
+function updateArrayValue<Item>(
+	instance: ReactiveArray<Item>,
+	state: ReactiveState<Item[], Item>,
+	callback: (value: Item[]) => Item[],
+): void {
+	const updated = callback(state.value);
 
-	if (actual > -1) {
-		state.value[actual] = value;
+	if (updated == null || Array.isArray(updated)) {
+		instance.set(updated);
 	}
 }