@oscarpalmer/mora 0.27.0 → 0.29.0

package/src/value/array.ts

@@ -1,6 +1,11 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
 import {METHODS_AFFECTING_LENGTH, METHODS_UPDATE, NAME_ARRAY, PROPERTY_LENGTH} from '../constants';
-import {emityProxyValues, getReactiveValueInProxy, setValueInProxy} from '../helpers/proxy';
+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';
@@ -137,7 +142,7 @@ export class ReactiveArray<Item> extends Reactive<Item[], Item> {
 			return this.#size.peek();
 		}
 
-		return typeof value === 'number' ? this.state.value.at(value) : [...this.state.value];
+		return typeof value === 'number' ? this.state.value.at(value) : this.state.value.slice();
 	}
 
 	/**
@@ -161,14 +166,19 @@ export class ReactiveArray<Item> extends Reactive<Item[], Item> {
 	 * Set the value
 	 * @param value New array of items _(defaults to an empty array)_
 	 */
-	set(value?: Item[]): void;
+	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): void;
+	set(index: number, value: Item | (() => Item | Promise<Item>) | Promise<Item>): void;
 
 	/**
 	 * Set the length of the array
@@ -176,14 +186,17 @@ export class ReactiveArray<Item> extends Reactive<Item[], Item> {
 	 */
 	set(property: typeof PROPERTY_LENGTH, value: number): void;
 
-	set(first?: number | typeof PROPERTY_LENGTH | Item[], second?: number | Item): void {
-		if (first == null || Array.isArray(first)) {
-			this.state.value.splice(0, this.state.value.length, ...(first ?? []));
-		} else if (first === PROPERTY_LENGTH) {
-			this.length = second as number;
-		} else if (typeof first === 'number' && !Number.isNaN(first)) {
-			setAtIndex(this.state.value, first, second as Item);
-		}
+	set(first?: unknown, second?: unknown): void {
+		setProxyValue<Item[], Item>(
+			true,
+			this.state,
+			isArrayValue,
+			isArrayIndex,
+			setArray,
+			setAtIndex,
+			first,
+			second,
+		);
 	}
 
 	/**
@@ -248,14 +261,53 @@ export class ReactiveArray<Item> extends Reactive<Item[], Item> {
 	}
 }
 
+/**
+ * Create a reactive array from a function result
+ * @param value Initial array of items
+ * @param options Reactivity options
+ * @returns Reactive array
+ */
+export function array<Item>(
+	value: () => Item[] | Promise<Item[]>,
+	options?: ReactiveOptions<Item>,
+): ReactiveArray<Item>;
+
+/**
+ * Create a reactive array from a promise
+ * @param value Initial array of items
+ * @param options Reactivity options
+ * @returns Reactive array
+ */
+export function array<Item>(
+	value: Promise<Item[]>,
+	options?: ReactiveOptions<Item>,
+): ReactiveArray<Item>;
+
 /**
  * Create a reactive array
  * @param value Initial array of items
  * @param options Reactivity options
  * @returns Reactive array
  */
-export function array<Item>(value: Item[], options?: ReactiveOptions<Item>): ReactiveArray<Item> {
-	return new ReactiveArray(Array.isArray(value) ? value : [], options);
+export function array<Item>(value: Item[], options?: ReactiveOptions<Item>): ReactiveArray<Item>;
+
+export function array<Item>(
+	value: Item[] | (() => Item[] | Promise<Item[]>) | Promise<Item[]>,
+	options?: ReactiveOptions<Item>,
+): ReactiveArray<Item> {
+	const instance = new ReactiveArray([], options);
+
+	instance.set(value);
+
+	return instance;
+}
+
+function isArrayIndex(value: unknown): boolean {
+	return typeof value === 'number';
+}
+
+function isArrayValue<Item>(value: unknown): value is Item[] | undefined {
+	return value == null || Array.isArray(value);
 }
 
 function updateArray<Item>(
@@ -265,7 +317,7 @@ function updateArray<Item>(
 	length: Signal<number>,
 ): unknown {
 	const affectsLength = METHODS_AFFECTING_LENGTH.has(type);
-	const previousArray = affectsLength ? [] : [...array];
+	const previousArray = affectsLength ? [] : array.slice();
 	const previousLength = array.length;
 
 	return (...args: unknown[]): unknown => {
@@ -283,10 +335,14 @@ function updateArray<Item>(
 	};
 }
 
-function setAtIndex<Item>(array: Item[], index: number, value: Item): void {
-	const actual = index < 0 ? array.length + index : index;
+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);
 
 	if (actual > -1) {
-		array[actual] = value;
+		state.value[actual] = value;
 	}
 }

package/src/value/computed.ts

@@ -1,6 +1,7 @@
+import {flushHandlers} from '../batch';
 import {ACTIVE, BATCH, NAME_COMPUTED} from '../constants';
 import {effect, runEffect} from '../effect';
-import type {ComputedEffect, ReactiveOptions} from '../models';
+import type {ComputedEffect, InternalComputed, ReactiveOptions, ReactiveState} from '../models';
 import {Reactive} from './reactive';
 
 export class Computed<Value> extends Reactive<Value> {
@@ -9,39 +10,15 @@ export class Computed<Value> extends Reactive<Value> {
 		instance: undefined as never,
 	};
 
-	constructor(callback: () => Value, options?: ReactiveOptions<Value>) {
+	constructor(callback: () => Value | Promise<Value>, options?: ReactiveOptions<Value>) {
 		super(NAME_COMPUTED, undefined as never, options);
 
 		this.effect.instance = effect(() => {
-			if (!this.effect.dirty) {
-				return;
-			}
-
-			const previousComputed = ACTIVE.computed;
-
-			ACTIVE.computed = this as never;
-
-			const value = callback();
-
-			ACTIVE.computed = previousComputed;
-
-			if (!this.state.equal(this.state.value, value)) {
-				this.state.value = value;
+			if (this.effect.dirty) {
+				setValue(this, this.state, callback);
 
-				for (const computed of this.state.computeds) {
-					computed.effect.dirty = true;
-				}
-
-				for (const effect of this.state.effects) {
-					BATCH.handlers.add(effect);
-				}
-
-				for (const [, subscription] of this.state.subscriptions) {
-					subscription.callback(value);
-				}
+				this.effect.dirty = false;
 			}
-
-			this.effect.dirty = false;
 		});
 	}
 
@@ -72,8 +49,66 @@ export class Computed<Value> extends Reactive<Value> {
  * @returns Computed value
  */
 export function computed<Value>(
-	callback: () => Value,
+	callback: () => Value | Promise<Value>,
 	options?: ReactiveOptions<Value>,
 ): Computed<Value> {
 	return new Computed(callback, options);
 }
+
+function setAndEmit<Value>(state: ReactiveState<Value, Value>, value: Value): void {
+	if (state.equal(state.value, value)) {
+		return;
+	}
+
+	state.value = value;
+
+	for (const computed of state.computeds) {
+		(computed as unknown as InternalComputed).effect.dirty = true;
+	}
+
+	for (const effect of state.effects) {
+		BATCH.handlers.add(effect);
+	}
+
+	for (const [, subscription] of state.subscriptions) {
+		subscription.callback(value);
+	}
+
+	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;
+	}
+}

package/src/value/reactive.ts

@@ -3,6 +3,18 @@ import type {ReactiveOptions, ReactiveState, Unsubscribe} from '../models';
 import {subscribe, unsubscribe} from '../subscription';
 
 export abstract class Reactive<Value, Equal = Value> {
+	/**
+	 * Internal name of the reactive value
+	 *
+	 * @internal
+	 */
+	declare protected readonly $mora: string;
+
+	/**
+	 * Internal state of the reactive value
+	 *
+	 * @internal
+	 */
 	protected readonly state: ReactiveState<Value, Equal> = {
 		computeds: new Set(),
 		effects: new Set(),
@@ -59,6 +71,7 @@ export abstract class Reactive<Value, Equal = Value> {
 	 * @return Value as string
 	 */
 	toString(): string {
+		// oxlint-disable-next-line @oscarpalmer/atoms/string.getString: base toString is expected; allow custom toString in options?
 		return String(this.get());
 	}
 

package/src/value/signal.ts

@@ -1,6 +1,6 @@
 import {NAME_SIGNAL} from '../constants';
 import {emitValue, getValue} from '../helpers/value';
-import type {ReactiveOptions} from '../models';
+import type {ReactiveOptions, ReactiveState} from '../models';
 import {Reactive} from './reactive';
 
 export class Signal<Value> extends Reactive<Value> {
@@ -19,12 +19,8 @@ export class Signal<Value> extends Reactive<Value> {
 	 * Set the value
 	 * @param value New value
 	 */
-	set(value: Value): void {
-		if (!this.state.equal(this.state.value, value)) {
-			this.state.value = value;
-
-			emitValue(this.state);
-		}
+	set(value: Value | (() => Value | Promise<Value>) | Promise<Value>): void {
+		setValue<Value>(this.state, value);
 	}
 
 	/**
@@ -36,12 +32,84 @@ export class Signal<Value> extends Reactive<Value> {
 	}
 }
 
+function setAndEmit<Value>(state: ReactiveState<Value, Value>, value: Value): void {
+	if (!state.equal(state.value, value)) {
+		state.value = value;
+
+		emitValue(state);
+	}
+}
+
+function setValue<Value>(
+	state: ReactiveState<Value, Value>,
+	value: Value | (() => Value | Promise<Value>) | Promise<Value>,
+): void {
+	try {
+		let actual = value;
+
+		if (typeof value === 'function') {
+			actual = (value as () => Value | Promise<Value>)() as Value | Promise<Value>;
+		}
+
+		if (actual instanceof Promise) {
+			state.promise = actual;
+
+			void actual
+				.then(value => {
+					if (actual === state.promise) {
+						state.promise = undefined;
+
+						setAndEmit(state, value);
+					}
+				})
+				.catch(() => {
+					if (actual === state.promise) {
+						state.promise = undefined;
+					}
+				});
+		} else {
+			setAndEmit(state, actual as Value);
+		}
+	} catch {}
+}
+
+/**
+ * Create a reactive value from a function result
+ * @param value Initial value
+ * @param options Reactivity options
+ * @returns Reactive value
+ */
+export function signal<Value>(
+	value: () => Value | Promise<Value>,
+	options?: ReactiveOptions<Value>,
+): Signal<Value>;
+
+/**
+ * Create a reactive value from a promise
+ * @param value Initial value
+ * @param options Reactivity options
+ * @returns Reactive value
+ */
+export function signal<Value>(
+	value: Promise<Value>,
+	options?: ReactiveOptions<Value>,
+): Signal<Value>;
+
 /**
  * Create a reactive value
  * @param value Initial value
  * @param options Reactivity options
  * @returns Reactive value
  */
-export function signal<Value>(value: Value, options?: ReactiveOptions<Value>): Signal<Value> {
-	return new Signal<Value>(value, options);
+export function signal<Value>(value: Value, options?: ReactiveOptions<Value>): Signal<Value>;
+
+export function signal<Value>(
+	value: Value | (() => Value | Promise<Value>) | Promise<Value>,
+	options?: ReactiveOptions<Value>,
+): Signal<Value> {
+	const instance = new Signal<Value>(undefined as unknown as Value, options);
+
+	instance.set(value);
+
+	return instance;
 }

package/src/value/store.ts

@@ -1,5 +1,6 @@
 import {isKey, isPlainObject} from '@oscarpalmer/atoms/is';
 import type {GenericCallback, Key, PlainObject} from '@oscarpalmer/atoms/models';
+import {startBatch, stopBatch} from '../batch';
 import {NAME_STORE} from '../constants';
 import {
 	emityProxyValues,
@@ -8,7 +9,7 @@ import {
 	setValueInProxy,
 } from '../helpers/proxy';
 import {getValue} from '../helpers/value';
-import type {ReactiveOptions, Unsubscribe} from '../models';
+import type {ReactiveOptions, ReactiveState, Unsubscribe} from '../models';
 import {noop, subscribe} from '../subscription';
 import type {Computed} from './computed';
 import {Reactive} from './reactive';
@@ -96,14 +97,22 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 	 * Set the value
 	 * @param value New value _(defaults to an empty object)_
 	 */
-	set(value?: Value): void;
+	set(
+		value?:
+			| Value
+			| (() => null | undefined | Value | Promise<null | undefined | Value>)
+			| Promise<null | undefined | Value>,
+	): void;
 
 	/**
 	 * Set a value by key
 	 * @param key Key of the value to set
 	 * @param value New value
 	 */
-	set<Key extends keyof Value>(key: Key, value: Value[Key]): void;
+	set<Key extends keyof Value>(
+		key: Key,
+		value: Value[Key] | (() => Value[Key] | Promise<Value[Key]>) | Promise<Value[Key]>,
+	): void;
 
 	/**
 	 * Set a value by key
@@ -113,11 +122,16 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 	set(key: Key, value: unknown): void;
 
 	set(first?: unknown, second?: unknown): void {
-		if (isKey(first)) {
-			(this.state.value as PlainObject)[first] = second;
-		} else if (first == null || isPlainObject(first)) {
-			setProxyValue(this.state.value, first ?? {});
-		}
+		setProxyValue<Value>(
+			false,
+			this.state,
+			isStoreObject,
+			isKey,
+			setObject,
+			setProperty,
+			first,
+			second,
+		);
 	}
 
 	/**
@@ -157,14 +171,80 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 	 * @param callback Callback to update the value
 	 */
 	update(callback: (value: Value) => Value): void {
-		const updated = callback({...this.state.value});
+		const updated = callback(this.state.value);
 
 		if (updated == null || isPlainObject(updated)) {
-			setProxyValue(this.state.value, updated ?? {});
+			setObject(this.state, updated);
+		}
+	}
+}
+
+function isStoreObject<Value extends PlainObject>(value: unknown): value is Value | undefined {
+	return value == null || isPlainObject(value);
+}
+
+function setObject(state: ReactiveState<PlainObject, never>, value: PlainObject | undefined): void {
+	startBatch();
+
+	const actual = value ?? {};
+	const proxy = state.value as PlainObject;
+
+	const proxyKeys = Object.keys(proxy);
+	const actualKeys = Object.keys(actual);
+
+	let {length} = proxyKeys;
+
+	for (let index = 0; index < length; index += 1) {
+		const key = proxyKeys[index];
+
+		proxy[key] = actualKeys.includes(key) ? actual[key] : undefined;
+	}
+
+	length = actualKeys.length;
+
+	for (let index = 0; index < length; index += 1) {
+		const key = actualKeys[index];
+
+		if (!proxyKeys.includes(key)) {
+			const keyedValue = actual[key];
+
+			proxy[key] = keyedValue;
 		}
 	}
+
+	stopBatch();
+}
+
+function setProperty<Value extends PlainObject>(
+	state: ReactiveState<Value, Value>,
+	key: unknown,
+	value: unknown,
+): void {
+	(state.value as PlainObject)[key as Key] = value;
 }
 
+/**
+ * Create a reactive store from a function result
+ * @param value Initial object value
+ * @param options Reactivity options
+ * @returns Reactive store
+ */
+export function store<Value extends PlainObject>(
+	value: () => Value | Promise<Value>,
+	options?: ReactiveOptions<Value>,
+): Store<Value>;
+
+/**
+ * Create a reactive store from a promise
+ * @param value Initial object value
+ * @param options Reactivity options
+ * @returns Reactive store
+ */
+export function store<Value extends PlainObject>(
+	value: Promise<Value>,
+	options?: ReactiveOptions<Value>,
+): Store<Value>;
+
 /**
  * Create a reactive store
  * @param value Initial object value
@@ -174,6 +254,15 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 export function store<Value extends PlainObject>(
 	value: Value,
 	options?: ReactiveOptions<Value>,
+): Store<Value>;
+
+export function store<Value extends PlainObject>(
+	value: Value | (() => Value | Promise<Value>) | Promise<Value>,
+	options?: ReactiveOptions<Value>,
 ): Store<Value> {
-	return new Store((isPlainObject(value) ? value : {}) as Value, options);
+	const instance = new Store({} as unknown as Value, options);
+
+	instance.set(value);
+
+	return instance;
 }

package/types/constants.d.ts

@@ -12,5 +12,5 @@ export declare const NAME_EFFECT = "effect";
 export declare const NAME_MORA = "$mora";
 export declare const NAME_SIGNAL = "signal";
 export declare const NAME_STORE = "store";
-export declare const NAME_ALL: Set<string>;
+export declare const NAMES: Set<string>;
 export declare const PROPERTY_LENGTH = "length";

package/types/index.d.ts

@@ -1,6 +1,6 @@
 export { startBatch, stopBatch } from './batch';
 export { effect, type Effect } from './effect';
-export { isArray, isComputed, isEffect, isReactive, isSignal } from './helpers/is';
+export { isArray, isComputed, isEffect, isReactive, isSignal, } from './helpers/is';
 export type { Unsubscribe } from './models';
 export { array, type ReactiveArray } from './value/array';
 export { computed, type Computed } from './value/computed';

package/types/value/array.d.ts

@@ -131,7 +131,7 @@ export declare class ReactiveArray<Item> extends Reactive<Item[], Item> {
 /**
  * Create a reactive array
  * @param value Initial array of items
- * @param options Reactivity options
+ * @param options Optional reactivity options
  * @returns Reactive array
  */
 export declare function array<Item>(value: Item[], options?: ReactiveOptions<Item>): ReactiveArray<Item>;

package/types/value/computed.d.ts

@@ -10,8 +10,5 @@ export declare class Computed<Value> extends Reactive<Value> {
 }
 /**
  * Create a computed value
- * @param callback Callback to compute the value
- * @param options Reactivity options
- * @returns Computed value
  */
 export declare function computed<Value>(callback: () => Value, options?: ReactiveOptions<Value>): Computed<Value>;

package/types/value/signal.d.ts

@@ -20,7 +20,7 @@ export declare class Signal<Value> extends Reactive<Value> {
 /**
  * Create a reactive value
  * @param value Initial value
- * @param options Reactivity options
+ * @param options Optional reactivity options
  * @returns Reactive value
  */
 export declare function signal<Value>(value: Value, options?: ReactiveOptions<Value>): Signal<Value>;

package/types/value/store.d.ts

@@ -88,7 +88,7 @@ export declare class Store<Value extends PlainObject> extends Reactive<Value, Va
 /**
  * Create a reactive store
  * @param value Initial object value
- * @param options Reactivity options
+ * @param options Optional reactivity options
  * @returns Reactive store
  */
 export declare function store<Value extends PlainObject>(value: Value, options?: ReactiveOptions<Value>): Store<Value>;

package/dist/constants-Cy6_M9Vk.d.mts

@@ -1,20 +0,0 @@
-import { n as Batch, t as Active } from "./models-QwNga87R.mjs";
-
-//#region src/constants.d.ts
-declare const ACTIVE: Active;
-declare const ARRAY_THRESHOLD = 100;
-declare const ARRAY_OFFSET = 25;
-declare const ARRAY_PEEK = 10;
-declare const BATCH: Batch;
-declare const METHODS_AFFECTING_LENGTH: Set<string>;
-declare const METHODS_UPDATE: Set<string>;
-declare const NAME_ARRAY = "array";
-declare const NAME_COMPUTED = "computed";
-declare const NAME_EFFECT = "effect";
-declare const NAME_MORA = "$mora";
-declare const NAME_SIGNAL = "signal";
-declare const NAME_STORE = "store";
-declare const NAME_ALL: Set<string>;
-declare const PROPERTY_LENGTH = "length";
-//#endregion
-export { BATCH as a, NAME_ALL as c, NAME_EFFECT as d, NAME_MORA as f, PROPERTY_LENGTH as h, ARRAY_THRESHOLD as i, NAME_ARRAY as l, NAME_STORE as m, ARRAY_OFFSET as n, METHODS_AFFECTING_LENGTH as o, NAME_SIGNAL as p, ARRAY_PEEK as r, METHODS_UPDATE as s, ACTIVE as t, NAME_COMPUTED as u };

package/dist/effect-BkupB1p9.d.mts

@@ -1,17 +0,0 @@
-import { GenericCallback } from "@oscarpalmer/atoms/models";
-
-//#region src/effect.d.ts
-declare class Effect {
-  private readonly $mora;
-  private readonly state;
-  constructor(callback: GenericCallback);
-}
-declare function runEffect(effect: Effect): void;
-/**
- * Create an effect
- * @param callback Callback for handling signal effects
- * @returns Effect
- */
-declare function effect(callback: GenericCallback): Effect;
-//#endregion
-export { effect as n, runEffect as r, Effect as t };