@oscarpalmer/mora 0.29.0 → 0.30.0

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;
-	}
-}

package/src/value/reactive.ts

@@ -1,85 +1,24 @@
-import {NAME_MORA} from '../constants';
-import type {ReactiveOptions, ReactiveState, Unsubscribe} from '../models';
-import {subscribe, unsubscribe} from '../subscription';
+import type {Reactive, ReactiveOptions, ReactiveState} from '../models';
 
-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> = {
+export function reactive<Value, Equal = Value>(
+	value: Value,
+	options?: ReactiveOptions<Equal>,
+): [Reactive<Value>, ReactiveState<Value, Equal>] {
+	const state: ReactiveState<Value, Equal> = {
 		computeds: new Set(),
 		effects: new Set(),
-		equal: Object.is,
+		equal:
+			typeof options === 'object' && typeof options?.equal === 'function'
+				? options.equal
+				: Object.is,
 		subscriptions: new Map(),
-		value: undefined as never,
+		value: value as Value,
 	};
 
-	constructor(name: string, value: Value, options?: ReactiveOptions<Equal>) {
-		this.state.value = value;
-
-		if (typeof options === 'object' && typeof options.equal === 'function') {
-			this.state.equal = options.equal;
-		}
-
-		Object.defineProperty(this, NAME_MORA, {
-			value: name,
-		});
-	}
-
-	/**
-	 * Get the value
-	 * @return Current value
-	 */
-	abstract get(): Value;
-
-	/**
-	 * Get the value _(without reactivity)_
-	 * @return Current value
-	 */
-	peek(): Value {
-		return this.state.value;
-	}
-
-	/**
-	 * Subscribe to changes
-	 * @param callback Callback for changes
-	 * @return Unsubscribe callback
-	 */
-	subscribe(callback: (value: Value) => void): Unsubscribe {
-		return subscribe(this.state, callback);
-	}
-
-	/**
-	 * JSON representation of the value
-	 * @return JSON value
-	 */
-	toJSON(): Value {
-		return this.get();
-	}
-
-	/**
-	 * String representation of the 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());
-	}
+	const instance = {
+		toJSON: () => state.value,
+		toString: () => String(state.value),
+	};
 
-	/**
-	 * Unsubscribe from changes
-	 * @param callback Callback to unsubscribe
-	 */
-	unsubscribe(callback: (value: Value) => void): void {
-		unsubscribe(this.state, callback);
-	}
+	return [instance, state];
 }

package/src/value/signal.ts

@@ -1,36 +1,8 @@
-import {NAME_SIGNAL} from '../constants';
-import {emitValue, getValue} from '../helpers/value';
-import type {ReactiveOptions, ReactiveState} from '../models';
-import {Reactive} from './reactive';
-
-export class Signal<Value> extends Reactive<Value> {
-	constructor(value: Value, options?: ReactiveOptions<Value>) {
-		super(NAME_SIGNAL, value, options);
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	get(): Value {
-		return getValue(this.state);
-	}
-
-	/**
-	 * Set the value
-	 * @param value New value
-	 */
-	set(value: Value | (() => Value | Promise<Value>) | Promise<Value>): void {
-		setValue<Value>(this.state, value);
-	}
-
-	/**
-	 * Update the value _(based on the current value)_
-	 * @param callback Callback to update the value
-	 */
-	update(callback: (value: Value) => Value): void {
-		this.set(callback(this.state.value));
-	}
-}
+import {NAME_MORA, NAME_SIGNAL} from '../constants';
+import {emitValue, getSimpleValue, handleSimpleValue} from '../helpers/value';
+import type {ReactiveOptions, ReactiveState, Signal} from '../models';
+import {subscribe} from '../subscription';
+import {reactive} from './reactive';
 
 function setAndEmit<Value>(state: ReactiveState<Value, Value>, value: Value): void {
 	if (!state.equal(state.value, value)) {
@@ -40,41 +12,9 @@ function setAndEmit<Value>(state: ReactiveState<Value, Value>, value: Value): vo
 	}
 }
 
-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
@@ -86,6 +26,7 @@ export function signal<Value>(
 
 /**
  * Create a reactive value from a promise
+ *
  * @param value Initial value
  * @param options Reactivity options
  * @returns Reactive value
@@ -97,6 +38,7 @@ export function signal<Value>(
 
 /**
  * Create a reactive value
+ *
  * @param value Initial value
  * @param options Reactivity options
  * @returns Reactive value
@@ -107,9 +49,30 @@ 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;
+	const [rx, state] = reactive<Value>(undefined as unknown as Value, options);
+
+	const instance = {
+		...rx,
+		get: () => getSimpleValue(state),
+		peek: () => state.value,
+		set: (value: Value | (() => Value | Promise<Value>) | Promise<Value>) => {
+			handleSimpleValue(state, value, setAndEmit);
+		},
+		update: (callback: (value: Value) => Value) => {
+			handleSimpleValue(state, callback(state.value), setAndEmit);
+		},
+		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_SIGNAL,
+	});
+
+	handleSimpleValue(state, value, setAndEmit);
+
+	return Object.freeze(instance) as Signal<Value>;
 }