@oscarpalmer/mora 0.16.0 → 0.18.0

package/package.json

@@ -54,5 +54,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.16.0"
+	"version": "0.18.0"
 }

package/src/helpers/is.ts

@@ -4,6 +4,7 @@ import type {ReactiveArray} from '../value/array';
 import type {Computed} from '../value/computed';
 import type {Reactive} from '../value/reactive';
 import type {Signal} from '../value/signal';
+import type {Store} from '../value/store';
 
 /**
  * Is the value a reactive array?
@@ -48,9 +49,14 @@ export function isSignal(value: unknown): value is Signal<unknown> {
 	return isMora<Signal<unknown>>(value, signalName);
 }
 
+export function isStore(value: unknown): value is Store<unknown> {
+	return isMora<Reactive<unknown>>(value, storeName);
+}
+
 export const arrayName = 'array';
 export const computedName = 'computed';
 export const effectName = 'effect';
 export const signalName = 'signal';
+export const storeName = 'store';
 
-const reactiveNames = new Set([arrayName, computedName, signalName]);
+const reactiveNames = new Set([arrayName, computedName, signalName, storeName]);

package/src/helpers/proxy.ts

@@ -0,0 +1,72 @@
+import {isArrayOrPlainObject} from '@oscarpalmer/atoms/is';
+import type {ArrayOrPlainObject, PlainObject} from '@oscarpalmer/atoms/models';
+import {startBatch, stopBatch} from '../batch';
+import type {ReactiveState} from '../value/reactive';
+import type {Signal} from '../value/signal';
+import {emitValue} from './value';
+
+export function setProxyValue(
+	proxy: ArrayOrPlainObject,
+	value: ArrayOrPlainObject,
+): void {
+	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 as PlainObject)[key] = valueKeys.includes(key)
+			? (value as PlainObject)[key]
+			: undefined;
+	}
+
+	length = valueKeys.length;
+
+	for (let index = 0; index < length; index += 1) {
+		const key = valueKeys[index];
+
+		if (!proxyKeys.includes(key)) {
+			const keyedValue = (value as PlainObject)[key];
+
+			(proxy as PlainObject)[key] = keyedValue;
+		}
+	}
+
+	stopBatch();
+}
+
+export function setValueInProxy<Value extends ArrayOrPlainObject, Equal>(
+	target: Value,
+	property: PropertyKey,
+	value: unknown,
+	state: ReactiveState<Value, Equal>,
+	isArray: boolean,
+	length?: Signal<number>,
+): boolean {
+	if (isArray) {
+		const isIndex = !Number.isNaN(Number(property));
+		const isLength = property === 'length';
+
+		if (!isIndex && !isLength) {
+			return Reflect.set(target, property, value);
+		}
+	}
+
+	const previous = Reflect.get(target, property);
+
+	if (!state.equal(previous as never, value as never)) {
+		Reflect.set(target, property, value);
+
+		emitValue(state);
+
+		if (isArray) {
+			length?.set((target as unknown[]).length);
+		}
+	}
+
+	return true;
+}

package/src/helpers/value.ts

@@ -3,11 +3,33 @@ import {activeEffect} from '../effect';
 import {type InternalComputed, activeComputed} from '../value/computed';
 import type {ReactiveState} from '../value/reactive';
 
-export function differentArrays(first: unknown[], second: unknown[]): boolean {
+export function emitValue<Value>(state: ReactiveState<Value, never>): void {
+	for (const computed of state.computeds) {
+		(computed as unknown as InternalComputed).effect.dirty = true;
+	}
+
+	for (const effect of state.effects) {
+		batchedHandlers.add(effect);
+	}
+
+	for (const [, subscription] of state.subscriptions) {
+		batchedHandlers.add(subscription as never);
+	}
+
+	if (batchDepth === 0) {
+		flushHandlers();
+	}
+}
+
+export function equalArrays<Value>(
+	state: ReactiveState<Value[], Value>,
+	first: Value[],
+	second: Value[],
+): boolean {
 	let {length} = first;
 
 	if (length !== second.length) {
-		return true;
+		return false;
 	}
 
 	let offset = 0;
@@ -17,8 +39,8 @@ export function differentArrays(first: unknown[], second: unknown[]): boolean {
 		offset = offset > 25 ? 25 : offset;
 
 		for (let index = 0; index < offset; index += 1) {
-			if (!Object.is(first[index], second[index])) {
-				return true;
+			if (!state.equal(first[index], second[index])) {
+				return false;
 			}
 		}
 	}
@@ -26,39 +48,15 @@ export function differentArrays(first: unknown[], second: unknown[]): boolean {
 	length -= offset;
 
 	for (let index = offset; index < length; index += 1) {
-		if (!Object.is(first[index], second[index])) {
-			return true;
+		if (!state.equal(first[index], second[index])) {
+			return false;
 		}
 	}
 
-	return false;
-}
-
-export function differentValues(first: unknown, second: unknown): boolean {
-	return Array.isArray(first) && Array.isArray(second)
-		? differentArrays(first, second)
-		: !Object.is(first, second);
-}
-
-export function emitValue<Value>(state: ReactiveState<Value>): void {
-	for (const computed of state.computeds) {
-		(computed as unknown as InternalComputed).effect.dirty = true;
-	}
-
-	for (const effect of state.effects) {
-		batchedHandlers.add(effect);
-	}
-
-	for (const [, subscription] of state.subscriptions) {
-		batchedHandlers.add(subscription as never);
-	}
-
-	if (batchDepth === 0) {
-		flushHandlers();
-	}
+	return true;
 }
 
-export function getValue<Value>(state: ReactiveState<Value>): Value {
+export function getValue<Value>(state: ReactiveState<Value, never>): Value {
 	if (activeComputed != null) {
 		state.computeds.add(activeComputed);
 	}

package/src/index.ts

@@ -11,3 +11,4 @@ export {array, type ReactiveArray} from './value/array';
 export {computed, type Computed} from './value/computed';
 export type {Reactive} from './value/reactive';
 export {signal, type Signal} from './value/signal';
+export {store, type Store} from './value/store';

package/src/subscription.ts

@@ -3,7 +3,7 @@ import type {ReactiveState} from './value/reactive';
 
 export class Subscription<Value> {
 	constructor(
-		public state: ReactiveState<Value>,
+		public state: ReactiveState<Value, never>,
 		public callback: GenericCallback,
 	) {
 		callback(state.value);
@@ -18,7 +18,7 @@ export type Unsubscribe = () => void;
 export function noop(): void {}
 
 export function subscribe<Value>(
-	state: ReactiveState<Value>,
+	state: ReactiveState<Value, never>,
 	callback: (value: Value) => void,
 ): Unsubscribe {
 	if (typeof callback !== 'function' || state.subscriptions.has(callback)) {
@@ -33,7 +33,7 @@ export function subscribe<Value>(
 }
 
 export function unsubscribe<Value>(
-	state: ReactiveState<Value>,
+	state: ReactiveState<Value, never>,
 	callback: (value: Value) => void,
 ): void {
 	const subscription = state.subscriptions.get(callback);

package/src/value/array.ts

@@ -1,10 +1,11 @@
 import {arrayName} from '../helpers/is';
-import {differentArrays, emitValue, getValue} from '../helpers/value';
+import {setValueInProxy} from '../helpers/proxy';
+import {emitValue, equalArrays, getValue} from '../helpers/value';
 import {type Computed, computed} from './computed';
-import {Reactive, type ReactiveState} from './reactive';
+import {Reactive, type ReactiveOptions, type ReactiveState} from './reactive';
 import {type Signal, signal} from './signal';
 
-export class ReactiveArray<Item> extends Reactive<Item[]> {
+export class ReactiveArray<Item> extends Reactive<Item[], Item> {
 	#size = signal(0);
 
 	/**
@@ -27,7 +28,7 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 		}
 	}
 
-	constructor(value: Item[]) {
+	constructor(value: Item[], options?: ReactiveOptions<Item>) {
 		super(
 			arrayName,
 			new Proxy(value, {
@@ -36,8 +37,16 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 						? updateArray(property as string, target, this.state, this.#size)
 						: Reflect.get(target, property),
 				set: (target, property, value) =>
-					setValue(target, property, value, this.state, this.#size),
+					setValueInProxy(
+						target,
+						property,
+						value,
+						this.state,
+						true,
+						this.#size,
+					),
 			}),
+			options,
 		);
 
 		this.#size.set(value.length);
@@ -164,41 +173,17 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 /**
  * Create a reactive array
  */
-export function array<Item>(value: Item[]): ReactiveArray<Item> {
-	return new ReactiveArray(Array.isArray(value) ? value : []);
-}
-
-function setValue<Item>(
-	target: Item[],
-	property: PropertyKey,
-	value: unknown,
-	state: ReactiveState<Item[]>,
-	length: Signal<number>,
-): boolean {
-	const isIndex = !Number.isNaN(Number(property));
-	const isLength = property === 'length';
-
-	if (!isIndex && !isLength) {
-		return Reflect.set(target, property, value);
-	}
-
-	const previous = Reflect.get(target, property);
-
-	if (!Object.is(previous, value)) {
-		Reflect.set(target, property, value);
-
-		emitValue(state);
-
-		length.set(target.length);
-	}
-
-	return true;
+export function array<Item>(
+	value: Item[],
+	options?: ReactiveOptions<Item>,
+): ReactiveArray<Item> {
+	return new ReactiveArray(Array.isArray(value) ? value : [], options);
 }
 
 function updateArray<Item>(
 	type: string,
 	array: Item[],
-	state: ReactiveState<Item[]>,
+	state: ReactiveState<Item[], Item>,
 	length: Signal<number>,
 ): unknown {
 	const affectsLength = lengthAffectingMethods.has(type);
@@ -213,7 +198,7 @@ function updateArray<Item>(
 		if (
 			affectsLength
 				? array.length !== previousLength
-				: differentArrays(previousArray, array)
+				: !equalArrays(state, previousArray, array)
 		) {
 			emitValue(state);
 

package/src/value/computed.ts

@@ -1,7 +1,7 @@
 import {batchDepth, batchedHandlers} from '../batch';
 import {type Effect, activeEffect, effect, runEffect} from '../effect';
 import {computedName} from '../helpers/is';
-import {Reactive, type ReactiveState} from './reactive';
+import {Reactive, type ReactiveOptions, type ReactiveState} from './reactive';
 
 export type ComputedEffect = {
 	dirty: boolean;
@@ -10,7 +10,7 @@ export type ComputedEffect = {
 
 export type InternalComputed = {
 	readonly effect: ComputedEffect;
-	readonly state: ReactiveState<unknown>;
+	readonly state: ReactiveState<unknown, unknown>;
 };
 
 export let activeComputed: Computed<unknown> | undefined;
@@ -21,8 +21,8 @@ export class Computed<Value> extends Reactive<Value> {
 		instance: undefined as never,
 	};
 
-	constructor(callback: () => Value) {
-		super(computedName, undefined as never);
+	constructor(callback: () => Value, options?: ReactiveOptions<Value>) {
+		super(computedName, undefined as never, options);
 
 		this.effect.instance = effect(() => {
 			if (this.effect.dirty) {
@@ -34,7 +34,7 @@ export class Computed<Value> extends Reactive<Value> {
 
 				activeComputed = previousComputed;
 
-				if (!Object.is(this.state.value, value)) {
+				if (!this.state.equal(this.state.value, value)) {
 					this.state.value = value;
 
 					for (const computed of this.state.computeds) {
@@ -78,6 +78,9 @@ export class Computed<Value> extends Reactive<Value> {
 /**
  * Create a computed value
  */
-export function computed<Value>(callback: () => Value): Computed<Value> {
-	return new Computed(callback);
+export function computed<Value>(
+	callback: () => Value,
+	options?: ReactiveOptions<Value>,
+): Computed<Value> {
+	return new Computed(callback, options);
 }

package/src/value/reactive.ts

@@ -7,17 +7,22 @@ import {
 } from '../subscription';
 import type {Computed} from './computed';
 
-export abstract class Reactive<Value> {
-	protected readonly state: ReactiveState<Value> = {
+export abstract class Reactive<Value, Equal = Value> {
+	protected readonly state: ReactiveState<Value, Equal> = {
 		computeds: new Set(),
 		effects: new Set(),
+		equal: Object.is,
 		subscriptions: new Map(),
 		value: undefined as never,
 	};
 
-	constructor(name: string, value: 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, '$mora', {
 			value: name,
 		});
@@ -64,9 +69,17 @@ export abstract class Reactive<Value> {
 	}
 }
 
-export type ReactiveState<Value> = {
+export type ReactiveOptions<Value> = {
+	/**
+	 * Method to compare values for equality
+	 */
+	equal?: (first: Value, second: Value) => boolean;
+};
+
+export type ReactiveState<Value, Equal> = {
 	computeds: Set<Computed<unknown>>;
 	effects: Set<Effect>;
+	equal: (first: Equal, second: Equal) => boolean;
 	subscriptions: Map<(value: Value) => void, Subscription<Value>>;
 	value: Value;
 };

package/src/value/signal.ts

@@ -1,10 +1,10 @@
 import {signalName} from '../helpers/is';
-import {differentValues, emitValue, getValue} from '../helpers/value';
-import {Reactive} from './reactive';
+import {emitValue, getValue} from '../helpers/value';
+import {Reactive, type ReactiveOptions} from './reactive';
 
 export class Signal<Value> extends Reactive<Value> {
-	constructor(value: Value) {
-		super(signalName, value);
+	constructor(value: Value, options?: ReactiveOptions<Value>) {
+		super(signalName, value, options);
 	}
 
 	/**
@@ -18,7 +18,7 @@ export class Signal<Value> extends Reactive<Value> {
 	 * Set the value
 	 */
 	set(value: Value): void {
-		if (differentValues(this.state.value, value)) {
+		if (!this.state.equal(this.state.value, value)) {
 			this.state.value = value;
 
 			emitValue(this.state);
@@ -36,6 +36,9 @@ export class Signal<Value> extends Reactive<Value> {
 /**
  * Create a reactive value
  */
-export function signal<Value>(value: Value): Signal<Value> {
-	return new Signal(value);
+export function signal<Value>(
+	value: Value,
+	options?: ReactiveOptions<Value>,
+): Signal<Value> {
+	return new Signal<Value>(value, options);
 }

package/src/value/store.ts

@@ -0,0 +1,90 @@
+import {isKey, isPlainObject} from '@oscarpalmer/atoms/is';
+import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
+import {storeName} from '../helpers/is';
+import {setProxyValue, setValueInProxy} from '../helpers/proxy';
+import {getValue} from '../helpers/value';
+import {Reactive, type ReactiveOptions} from './reactive';
+
+export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
+	constructor(value: Value, options?: ReactiveOptions<Value>) {
+		super(
+			storeName,
+			new Proxy(value, {
+				set: (target, property, value) =>
+					setValueInProxy(target, property, value, this.state, false),
+			}),
+			options,
+		);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	get(): Value;
+
+	/**
+	 * Get a value by key _(without reactivity)_
+	 */
+	get(key: keyof Value): Value[keyof Value];
+
+	/**
+	 * Get a value by key _(without reactivity)_
+	 */
+	get(key: Key): unknown;
+
+	get(key?: unknown): unknown {
+		return isKey(key) ? this.state.value[key] : getValue(this.state);
+	}
+
+	/**
+	 * Get the value _(without reactivity)_
+	 */
+	peek(): Value;
+
+	/**
+	 * Get a value by key _(without reactivity)_
+	 */
+	peek(key: keyof Value): Value[keyof Value];
+
+	/**
+	 * Get a value by key _(without reactivity)_
+	 */
+	peek(key: Key): unknown;
+
+	peek(key?: unknown): unknown {
+		return isKey(key) ? this.state.value[key] : {...this.state.value};
+	}
+
+	/**
+	 * Set the value
+	 */
+	set(value?: Value): void;
+
+	/**
+	 * Set a value by key
+	 */
+	set(key: keyof Value, value: Value[keyof Value]): void;
+
+	/**
+	 * Set a value by key
+	 */
+	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 ?? {});
+		}
+	}
+}
+
+/**
+ * Create a reactive store
+ */
+export function store<Value extends PlainObject>(
+	value: Value,
+	options?: ReactiveOptions<Value>,
+): Store<Value> {
+	return new Store((isPlainObject(value) ? value : {}) as Value, options);
+}