@oscarpalmer/mora 0.28.0 → 0.30.0

package/src/value/array.ts

@@ -1,268 +1,37 @@
+import {select} from '@oscarpalmer/atoms/array';
+import {filter} from '@oscarpalmer/atoms/array/filter';
+import {noop} from '@oscarpalmer/atoms/function';
 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,
+	Signal,
+} from '../models';
+import {subscribe, unsubscribe} from '../subscription';
+import {computed} from './computed';
+import {reactive} from './reactive';
+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 +43,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 +55,7 @@ export function array<Item>(
 
 /**
  * Create a reactive array
+ *
  * @param value Initial array of items
  * @param options Reactivity options
  * @returns Reactive array
@@ -295,11 +66,128 @@ 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);
+
+	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,
+			}),
+	});
+
+	function get(): Item[];
+	function get(index: number): Item | undefined;
+	function get(property: typeof PROPERTY_LENGTH): number;
+	function get(value?: unknown): number | Item | Item[] | undefined;
+
+	function get(value?: unknown): number | Item | Item[] | undefined {
+		return getArrayValue(instance as ReactiveArray<Item>, indiced, state, length, value);
+	}
+
+	const instance = {
+		...rx,
+		length: state.value.length,
+		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)),
+		get: (value?: number | typeof PROPERTY_LENGTH) => get(value),
+		map: <Mapped>(callback: (item: Item, index: number, array: Item[]) => Mapped) =>
+			computed(() => (get() as Item[]).map(callback)),
+		notify: () => {
+			emityProxyValues(state, indiced);
+		},
+		peek: (value?: unknown) => peekArrayValue(state, length, value),
+		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) => {
+			setProxyValue<Item[], Item>(
+				true,
+				state,
+				isArrayValue,
+				isArrayIndex,
+				setArray,
+				setAtIndex,
+				first,
+				second,
+			);
+		},
+		shift: () => state.value.shift(),
+		splice: (from: number, to?: number, ...items: Item[]) =>
+			state.value.splice(from, to ?? state.value.length, ...items),
+		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;
+		},
+		unshift: (...items: Item[]) => state.value.unshift(...items),
+		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);
+			}
+		},
+		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),
+		},
+	});
 
 	instance.set(value);
 
-	return instance;
+	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 +198,36 @@ 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>,
+	value?: unknown,
+): number | Item | Item[] | undefined {
+	if (value === PROPERTY_LENGTH) {
+		return length.peek();
+	}
+
+	return typeof value === 'number' ? state.value.at(value) : state.value.slice();
+}
+
+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 +253,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);
 	}
 }

package/src/value/computed.ts

@@ -1,58 +1,100 @@
 import {flushHandlers} from '../batch';
-import {ACTIVE, BATCH, NAME_COMPUTED} from '../constants';
-import {effect, runEffect} from '../effect';
-import type {ComputedEffect, InternalComputed, ReactiveOptions, ReactiveState} from '../models';
-import {Reactive} from './reactive';
+import {ACTIVE, BATCH, NAME_COMPUTED, NAME_MORA} from '../constants';
+import {internalEffect, runEffect} from '../effect';
+import {handleSimpleValue} from '../helpers/value';
+import type {Computed, ComputedEffect, ReactiveOptions, ReactiveState} from '../models';
+import {subscribe} from '../subscription';
+import {reactive} from './reactive';
 
-export class Computed<Value> extends Reactive<Value> {
-	private readonly effect: ComputedEffect = {
+/**
+ * Create a computed value
+ *
+ * @param callback Callback to compute the value
+ * @param options Reactivity options
+ * @returns Computed value
+ */
+export function computed<Value>(
+	callback: () => Value | Promise<Value>,
+	options?: ReactiveOptions<Value>,
+): Computed<Value> {
+	return getComputed(callback, options)[0];
+}
+
+function getComputed<Value>(
+	callback: () => Value | Promise<Value>,
+	options?: ReactiveOptions<Value>,
+): [Computed<Value>, ComputedEffect] {
+	const [rx, state] = reactive<Value>(undefined as never, options);
+
+	let fx: ComputedEffect;
+
+	const instance = {
+		...rx,
+		get: () => getValue(state, fx),
+		peek: () => state.value,
+		subscribe: (callback: (value: Value) => void) => subscribe(state, callback),
+		unsubscribe: (callback: (value: Value) => void) => {
+			state.subscriptions.delete(callback);
+		},
+	};
+
+	Object.defineProperty(instance, NAME_MORA, {
+		enumerable: false,
+		value: NAME_COMPUTED,
+	});
+
+	fx = getComputedEffect(state, callback);
+
+	return [Object.freeze(instance), fx];
+}
+
+function getComputedEffect<Value>(
+	state: ReactiveState<Value, Value>,
+	callback: () => Value | Promise<Value>,
+): ComputedEffect {
+	const fx: ComputedEffect = {
 		dirty: true,
 		instance: undefined as never,
 	};
 
-	constructor(callback: () => Value | Promise<Value>, options?: ReactiveOptions<Value>) {
-		super(NAME_COMPUTED, undefined as never, options);
+	fx.instance = internalEffect(() => {
+		if (fx.dirty) {
+			const previousComputed = ACTIVE.computed;
 
-		this.effect.instance = effect(() => {
-			if (this.effect.dirty) {
-				setValue(this, this.state, callback);
+			ACTIVE.computed = fx;
 
-				this.effect.dirty = false;
-			}
-		});
-	}
+			handleSimpleValue(state, callback, setAndEmit, () => {
+				ACTIVE.computed = previousComputed;
+			});
 
-	/**
-	 * @inheritdoc
-	 */
-	get(): Value {
-		if (ACTIVE.computed != null && this !== ACTIVE.computed) {
-			this.state.computeds.add(ACTIVE.computed);
+			fx.dirty = false;
 		}
+	});
 
-		if (ACTIVE.effect != null && ACTIVE.effect !== this.effect.instance) {
-			this.state.effects.add(ACTIVE.effect);
-		}
+	return fx;
+}
 
-		if (this.effect.dirty && BATCH.depth === 0) {
-			runEffect(this.effect.instance);
-		}
+function getValue<Value>(state: ReactiveState<Value, Value>, fx: ComputedEffect): Value {
+	if (ACTIVE.computed != null && fx !== ACTIVE.computed) {
+		state.computeds.add(ACTIVE.computed);
+	}
 
-		return this.state.value;
+	if (ACTIVE.effect != null && ACTIVE.effect !== fx.instance) {
+		state.effects.add(ACTIVE.effect);
 	}
+
+	if (fx.dirty && BATCH.depth === 0) {
+		runEffect(fx.instance);
+	}
+
+	return state.value;
 }
 
-/**
- * Create a computed value
- * @param callback Callback to compute the value
- * @param options Reactivity options
- * @returns Computed value
- */
-export function computed<Value>(
+export function internalComputed<Value>(
 	callback: () => Value | Promise<Value>,
 	options?: ReactiveOptions<Value>,
-): Computed<Value> {
-	return new Computed(callback, options);
+): [Computed<Value>, ComputedEffect] {
+	return getComputed(callback, options);
 }
 
 function setAndEmit<Value>(state: ReactiveState<Value, Value>, value: Value): void {
@@ -63,7 +105,7 @@ function setAndEmit<Value>(state: ReactiveState<Value, Value>, value: Value): vo
 	state.value = value;
 
 	for (const computed of state.computeds) {
-		(computed as unknown as InternalComputed).effect.dirty = true;
+		computed.dirty = true;
 	}
 
 	for (const effect of state.effects) {
@@ -76,39 +118,3 @@ function setAndEmit<Value>(state: ReactiveState<Value, Value>, value: Value): vo
 
 	flushHandlers();
 }
-
-function setValue<Value>(
-	instance: Computed<Value>,
-	state: ReactiveState<Value, Value>,
-	callback: () => Value | Promise<Value>,
-): void {
-	const previousComputed = ACTIVE.computed;
-
-	ACTIVE.computed = instance as never;
-
-	try {
-		const value = callback();
-
-		if (value instanceof Promise) {
-			state.promise = value;
-
-			value
-				.then(resolvedValue => {
-					if (state.promise === value) {
-						state.promise = undefined;
-
-						setAndEmit(state, resolvedValue);
-					}
-				})
-				.catch(() => {
-					if (state.promise === value) {
-						state.promise = undefined;
-					}
-				});
-		} else {
-			setAndEmit(state, value);
-		}
-	} finally {
-		ACTIVE.computed = previousComputed;
-	}
-}