@oscarpalmer/mora 0.26.0 → 0.28.0

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/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,14 +1,15 @@
 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 {
-	getReactiveValueInProxy,
 	emityProxyValues,
+	getReactiveValueInProxy,
 	setProxyValue,
 	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/dist/helpers/is.js

@@ -1,23 +0,0 @@
-import { NAME_ALL, NAME_ARRAY, NAME_COMPUTED, NAME_EFFECT, NAME_MORA, NAME_SIGNAL, NAME_STORE } from "../constants.js";
-function isArray(value) {
-	return isMora(value, NAME_ARRAY);
-}
-function isComputed(value) {
-	return isMora(value, NAME_COMPUTED);
-}
-function isEffect(value) {
-	return isMora(value, NAME_EFFECT);
-}
-function isMora(value, name) {
-	return typeof value === "object" && value != null && "$mora" in value && (typeof name === "string" ? value["$mora"] === name : name.has(value["$mora"]));
-}
-function isReactive(value) {
-	return isMora(value, NAME_ALL);
-}
-function isSignal(value) {
-	return isMora(value, NAME_SIGNAL);
-}
-function isStore(value) {
-	return isMora(value, NAME_STORE);
-}
-export { isArray, isComputed, isEffect, isReactive, isSignal, isStore };

package/dist/helpers/proxy.js

@@ -1,48 +0,0 @@
-import { PROPERTY_LENGTH } from "../constants.js";
-import { startBatch, stopBatch } from "../batch.js";
-import { computed } from "../value/computed.js";
-import { emitValue } from "./value.js";
-function emityProxyValues(state, mapped) {
-	const values = [...mapped.values()];
-	const { length } = values;
-	for (let index = 0; index < length; index += 1) values[index].effect.dirty = true;
-	emitValue(state);
-}
-function getReactiveValueInProxy(reactive, mapped, key, isArray) {
-	let item = mapped.get(key);
-	if (item == null) {
-		item = computed(() => isArray ? reactive.get().at(key) : reactive.get()[key]);
-		mapped.set(key, item);
-	}
-	return item;
-}
-function setProxyValue(proxy, value) {
-	startBatch();
-	const proxyKeys = Object.keys(proxy);
-	const valueKeys = Object.keys(value);
-	let { length } = proxyKeys;
-	for (let index = 0; index < length; index += 1) {
-		const key = proxyKeys[index];
-		proxy[key] = valueKeys.includes(key) ? value[key] : void 0;
-	}
-	length = valueKeys.length;
-	for (let index = 0; index < length; index += 1) {
-		const key = valueKeys[index];
-		if (!proxyKeys.includes(key)) proxy[key] = value[key];
-	}
-	stopBatch();
-}
-function setValueInProxy(parameters) {
-	const { isArray, length, property, state, target, value } = parameters;
-	if (isArray) {
-		if (!(!Number.isNaN(Number(property)) || property === "length")) return Reflect.set(target, property, value);
-	}
-	const previous = Reflect.get(target, property);
-	if (!state.equal(previous, value)) {
-		Reflect.set(target, property, value);
-		emitValue(state);
-		if (isArray) length?.set(target.length);
-	}
-	return true;
-}
-export { emityProxyValues, getReactiveValueInProxy, setProxyValue, setValueInProxy };

package/dist/index.js

@@ -1,8 +0,0 @@
-import { effect } from "./effect.js";
-import { isArray, isComputed, isEffect, isReactive, isSignal } from "./helpers/is.js";
-import { startBatch, stopBatch } from "./batch.js";
-import { computed } from "./value/computed.js";
-import { signal } from "./value/signal.js";
-import { array } from "./value/array.js";
-import { store } from "./value/store.js";
-export { array, computed, effect, isArray, isComputed, isEffect, isReactive, isSignal, signal, startBatch, stopBatch, store };

package/dist/value/array.js

@@ -1,100 +0,0 @@
-import { METHODS_AFFECTING_LENGTH, METHODS_UPDATE, NAME_ARRAY, PROPERTY_LENGTH } from "../constants.js";
-import { noop, subscribe } from "../subscription.js";
-import { Reactive } from "./reactive.js";
-import { computed } from "./computed.js";
-import { emitValue, equalArrays, getValue } from "../helpers/value.js";
-import { emityProxyValues, getReactiveValueInProxy, setValueInProxy } from "../helpers/proxy.js";
-import { signal } from "./signal.js";
-var ReactiveArray = class extends Reactive {
-	#indiced = /* @__PURE__ */ new Map();
-	#size = signal(0);
-	get length() {
-		return this.#size.get();
-	}
-	set length(value) {
-		if (typeof value === "number" && value >= 0 && value !== this.state.value.length) this.get().length = value;
-	}
-	constructor(value, options) {
-		super(NAME_ARRAY, new Proxy(value, {
-			get: (target, property) => METHODS_UPDATE.has(property) ? updateArray(property, target, this.state, this.#size) : Reflect.get(target, property),
-			set: (target, property, value$1) => setValueInProxy({
-				property,
-				target,
-				value: value$1,
-				isArray: true,
-				state: this.state,
-				length: this.#size
-			})
-		}), options);
-		this.#size.set(value.length);
-	}
-	clear() {
-		this.length = 0;
-	}
-	filter(callback) {
-		return computed(() => this.get().filter(callback));
-	}
-	get(first) {
-		if (typeof first === "number") return getReactiveValueInProxy(this, this.#indiced, first, true).get();
-		return first === "length" ? this.length : getValue(this.state);
-	}
-	map(callback) {
-		return computed(() => this.get().map(callback));
-	}
-	notify() {
-		emityProxyValues(this.state, this.#indiced);
-	}
-	peek(value) {
-		if (value === "length") return this.#size.peek();
-		return typeof value === "number" ? this.state.value.at(value) : [...this.state.value];
-	}
-	pop() {
-		return this.state.value.pop();
-	}
-	push(...items) {
-		return this.state.value.push(...items);
-	}
-	set(first, second) {
-		if (first == null || Array.isArray(first)) this.state.value.splice(0, this.state.value.length, ...first ?? []);
-		else if (first === "length") this.length = second;
-		else if (typeof first === "number" && !Number.isNaN(first)) setAtIndex(this.state.value, first, second);
-	}
-	shift() {
-		return this.state.value.shift();
-	}
-	splice(from, to, ...items) {
-		return this.state.value.splice(from, to ?? this.state.value.length, ...items);
-	}
-	subscribe(first, second) {
-		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;
-	}
-	unshift(...items) {
-		return this.state.value.unshift(...items);
-	}
-	update(callback) {
-		const updated = callback(this.state.value);
-		if (updated == null || Array.isArray(updated)) this.set(updated);
-	}
-};
-function array(value, options) {
-	return new ReactiveArray(Array.isArray(value) ? value : [], options);
-}
-function updateArray(type, array$1, state, length) {
-	const affectsLength = METHODS_AFFECTING_LENGTH.has(type);
-	const previousArray = affectsLength ? [] : [...array$1];
-	const previousLength = array$1.length;
-	return (...args) => {
-		const result = array$1[type](...args);
-		if (affectsLength ? array$1.length !== previousLength : !equalArrays(state, previousArray, array$1)) {
-			emitValue(state);
-			length.set(array$1.length);
-		}
-		return result;
-	};
-}
-function setAtIndex(array$1, index, value) {
-	const actual = index < 0 ? array$1.length + index : index;
-	if (actual > -1) array$1[actual] = value;
-}
-export { ReactiveArray, array };

package/dist/value/computed.js

@@ -1,36 +0,0 @@
-import { ACTIVE, BATCH, NAME_COMPUTED } from "../constants.js";
-import { effect, runEffect } from "../effect.js";
-import { Reactive } from "./reactive.js";
-var Computed = class extends Reactive {
-	effect = {
-		dirty: true,
-		instance: void 0
-	};
-	constructor(callback, options) {
-		super(NAME_COMPUTED, void 0, options);
-		this.effect.instance = effect(() => {
-			if (!this.effect.dirty) return;
-			const previousComputed = ACTIVE.computed;
-			ACTIVE.computed = this;
-			const value = callback();
-			ACTIVE.computed = previousComputed;
-			if (!this.state.equal(this.state.value, value)) {
-				this.state.value = value;
-				for (const computed$1 of this.state.computeds) computed$1.effect.dirty = true;
-				for (const effect$1 of this.state.effects) BATCH.handlers.add(effect$1);
-				for (const [, subscription] of this.state.subscriptions) subscription.callback(value);
-			}
-			this.effect.dirty = false;
-		});
-	}
-	get() {
-		if (ACTIVE.computed != null && this !== ACTIVE.computed) this.state.computeds.add(ACTIVE.computed);
-		if (ACTIVE.effect != null && ACTIVE.effect !== this.effect.instance) this.state.effects.add(ACTIVE.effect);
-		if (this.effect.dirty && BATCH.depth === 0) runEffect(this.effect.instance);
-		return this.state.value;
-	}
-};
-function computed(callback, options) {
-	return new Computed(callback, options);
-}
-export { Computed, computed };

package/dist/value/signal.js

@@ -1,24 +0,0 @@
-import { NAME_SIGNAL } from "../constants.js";
-import { Reactive } from "./reactive.js";
-import { emitValue, getValue } from "../helpers/value.js";
-var Signal = class extends Reactive {
-	constructor(value, options) {
-		super(NAME_SIGNAL, value, options);
-	}
-	get() {
-		return getValue(this.state);
-	}
-	set(value) {
-		if (!this.state.equal(this.state.value, value)) {
-			this.state.value = value;
-			emitValue(this.state);
-		}
-	}
-	update(callback) {
-		this.set(callback(this.state.value));
-	}
-};
-function signal(value, options) {
-	return new Signal(value, options);
-}
-export { Signal, signal };

package/dist/value/store.js

@@ -1,43 +0,0 @@
-import { NAME_STORE } from "../constants.js";
-import { noop, subscribe } from "../subscription.js";
-import { Reactive } from "./reactive.js";
-import { getValue } from "../helpers/value.js";
-import { emityProxyValues, getReactiveValueInProxy, setProxyValue, setValueInProxy } from "../helpers/proxy.js";
-import { isKey, isPlainObject } from "@oscarpalmer/atoms/is";
-var Store = class extends Reactive {
-	#keyed = /* @__PURE__ */ new Map();
-	constructor(value, options) {
-		super(NAME_STORE, new Proxy(value, { set: (target, property, value$1) => setValueInProxy({
-			target,
-			property,
-			value: value$1,
-			isArray: false,
-			state: this.state
-		}) }), options);
-	}
-	get(key) {
-		return isKey(key) ? getReactiveValueInProxy(this, this.#keyed, key, false).get() : getValue(this.state);
-	}
-	notify() {
-		emityProxyValues(this.state, this.#keyed);
-	}
-	peek(key) {
-		return isKey(key) ? this.state.value[key] : { ...this.state.value };
-	}
-	set(first, second) {
-		if (isKey(first)) this.state.value[first] = second;
-		else if (first == null || isPlainObject(first)) setProxyValue(this.state.value, first ?? {});
-	}
-	subscribe(first, second) {
-		if (isKey(first) && typeof second === "function") return getReactiveValueInProxy(this, this.#keyed, first, false).subscribe(second);
-		return typeof first === "function" ? subscribe(this.state, first) : noop;
-	}
-	update(callback) {
-		const updated = callback({ ...this.state.value });
-		if (updated == null || isPlainObject(updated)) setProxyValue(this.state.value, updated ?? {});
-	}
-};
-function store(value, options) {
-	return new Store(isPlainObject(value) ? value : {}, options);
-}
-export { Store, store };