@oscarpalmer/mora 0.15.0 → 0.17.0

package/dist/value/signal.cjs

@@ -4,8 +4,8 @@ const helpers_is = require("../helpers/is.cjs");
 const helpers_value = require("../helpers/value.cjs");
 const value_reactive = require("./reactive.cjs");
 class Signal extends value_reactive.Reactive {
-  constructor(value) {
-    super(helpers_is.signalName, value);
+  constructor(value, options) {
+    super(helpers_is.signalName, value, options);
   }
   /**
    * @inheritdoc
@@ -17,7 +17,10 @@ class Signal extends value_reactive.Reactive {
    * Set the value
    */
   set(value) {
-    helpers_value.setValue(this.state, value);
+    if (helpers_value.differentValues(this.state, this.state.value, value)) {
+      this.state.value = value;
+      helpers_value.emitValue(this.state);
+    }
   }
   /**
    * Update the value
@@ -26,8 +29,8 @@ class Signal extends value_reactive.Reactive {
     this.set(callback(this.state.value));
   }
 }
-function signal(value) {
-  return new Signal(value);
+function signal(value, options) {
+  return new Signal(value, options);
 }
 exports.Signal = Signal;
 exports.signal = signal;

package/dist/value/signal.js

@@ -1,9 +1,9 @@
 import { signalName } from "../helpers/is.js";
-import { getValue, setValue } from "../helpers/value.js";
+import { getValue, differentValues, emitValue } from "../helpers/value.js";
 import { Reactive } from "./reactive.js";
 class Signal extends Reactive {
-  constructor(value) {
-    super(signalName, value);
+  constructor(value, options) {
+    super(signalName, value, options);
   }
   /**
    * @inheritdoc
@@ -15,7 +15,10 @@ class Signal extends Reactive {
    * Set the value
    */
   set(value) {
-    setValue(this.state, value);
+    if (differentValues(this.state, this.state.value, value)) {
+      this.state.value = value;
+      emitValue(this.state);
+    }
   }
   /**
    * Update the value
@@ -24,8 +27,8 @@ class Signal extends Reactive {
     this.set(callback(this.state.value));
   }
 }
-function signal(value) {
-  return new Signal(value);
+function signal(value, options) {
+  return new Signal(value, options);
 }
 export {
   Signal,

package/package.json

@@ -12,14 +12,14 @@
 		"@rollup/plugin-node-resolve": "^16",
 		"@rollup/plugin-typescript": "^12.1",
 		"@types/node": "^22.15",
-		"@vitest/coverage-istanbul": "^3.1",
+		"@vitest/coverage-istanbul": "^3.2",
 		"dts-bundle-generator": "^9.5",
 		"glob": "^11",
 		"jsdom": "^26.1",
 		"tslib": "^2.8",
 		"typescript": "^5.8",
 		"vite": "^6.3",
-		"vitest": "^3.1"
+		"vitest": "^3.2"
 	},
 	"exports": {
 		".": {
@@ -54,5 +54,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.15.0"
+	"version": "0.17.0"
 }

package/src/batch.ts

@@ -2,7 +2,7 @@ import {type Effect, runEffect} from './effect';
 import {isEffect} from './helpers/is';
 import type {Subscription} from './subscription';
 
-export function flushEffects(): void {
+export function flushHandlers(): void {
 	while (batchDepth === 0 && batchedHandlers.size > 0) {
 		const handlers = [...batchedHandlers];
 
@@ -33,7 +33,7 @@ export function stopBatch(): void {
 		batchDepth -= 1;
 	}
 
-	flushEffects();
+	flushHandlers();
 }
 
 export const batchedHandlers = new Set<Effect | Subscription<unknown>>();

package/src/helpers/is.ts

@@ -3,7 +3,7 @@ import type {Effect} from '../effect';
 import type {ReactiveArray} from '../value/array';
 import type {Computed} from '../value/computed';
 import type {Reactive} from '../value/reactive';
-import {signal, type Signal} from '../value/signal';
+import type {Signal} from '../value/signal';
 
 /**
  * Is the value a reactive array?

package/src/helpers/value.ts

@@ -1,9 +1,72 @@
+import {batchDepth, batchedHandlers, flushHandlers} from '../batch';
 import {activeEffect} from '../effect';
-import {activeComputed} from '../value/computed';
+import {type InternalComputed, activeComputed} from '../value/computed';
 import type {ReactiveState} from '../value/reactive';
-import {emitValue} from './emit';
 
-export function getValue<Value>(state: ReactiveState<Value>): Value {
+export function differentArrays<Value>(
+	state: ReactiveState<Value[], Value>,
+	first: Value[],
+	second: Value[],
+): boolean {
+	let {length} = first;
+
+	if (length !== second.length) {
+		return true;
+	}
+
+	let offset = 0;
+
+	if (length >= 100) {
+		offset = Math.round(length / 10);
+		offset = offset > 25 ? 25 : offset;
+
+		for (let index = 0; index < offset; index += 1) {
+			if (!state.equal(first[index], second[index])) {
+				return true;
+			}
+		}
+	}
+
+	length -= offset;
+
+	for (let index = offset; index < length; index += 1) {
+		if (!state.equal(first[index], second[index])) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+export function differentValues<Value>(
+	state: ReactiveState<Value, Value>,
+	first: Value,
+	second: Value,
+): boolean {
+	return Array.isArray(first) && Array.isArray(second)
+		? differentArrays(state as never, first, second)
+		: !state.equal(first, second);
+}
+
+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 getValue<Value>(state: ReactiveState<Value, never>): Value {
 	if (activeComputed != null) {
 		state.computeds.add(activeComputed);
 	}
@@ -14,14 +77,3 @@ export function getValue<Value>(state: ReactiveState<Value>): Value {
 
 	return state.value;
 }
-
-export function setValue<Value>(
-	state: ReactiveState<Value>,
-	value: Value,
-): void {
-	if (!Object.is(state.value, value)) {
-		state.value = value;
-
-		emitValue(state);
-	}
-}

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,11 +1,10 @@
-import {emitArrayChanges, emitValue} from '../helpers/emit';
 import {arrayName} from '../helpers/is';
-import {getValue} from '../helpers/value';
+import {differentArrays, emitValue, 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);
 
 	/**
@@ -28,7 +27,7 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 		}
 	}
 
-	constructor(value: Item[]) {
+	constructor(value: Item[], options?: ReactiveOptions<Item>) {
 		super(
 			arrayName,
 			new Proxy(value, {
@@ -39,6 +38,7 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 				set: (target, property, value) =>
 					setValue(target, property, value, this.state, this.#size),
 			}),
+			options,
 		);
 
 		this.#size.set(value.length);
@@ -51,6 +51,13 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 		return this.get().at(index);
 	}
 
+	/**
+	 * Clear the array
+	 */
+	clear(): void {
+		this.length = 0;
+	}
+
 	/**
 	 * @inheritdoc
 	 */
@@ -158,15 +165,18 @@ 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 : []);
+export function array<Item>(
+	value: Item[],
+	options?: ReactiveOptions<Item>,
+): ReactiveArray<Item> {
+	return new ReactiveArray(Array.isArray(value) ? value : [], options);
 }
 
 function setValue<Item>(
 	target: Item[],
 	property: PropertyKey,
-	value: unknown,
-	state: ReactiveState<Item[]>,
+	value: Item,
+	state: ReactiveState<Item[], Item>,
 	length: Signal<number>,
 ): boolean {
 	const isIndex = !Number.isNaN(Number(property));
@@ -178,7 +188,7 @@ function setValue<Item>(
 
 	const previous = Reflect.get(target, property);
 
-	if (!Object.is(previous, value)) {
+	if (!state.equal(previous, value)) {
 		Reflect.set(target, property, value);
 
 		emitValue(state);
@@ -192,7 +202,7 @@ function setValue<Item>(
 function updateArray<Item>(
 	type: string,
 	array: Item[],
-	state: ReactiveState<Item[]>,
+	state: ReactiveState<Item[], Item>,
 	length: Signal<number>,
 ): unknown {
 	const affectsLength = lengthAffectingMethods.has(type);
@@ -207,7 +217,7 @@ function updateArray<Item>(
 		if (
 			affectsLength
 				? array.length !== previousLength
-				: emitArrayChanges(previousArray, array)
+				: differentArrays(state, previousArray, array)
 		) {
 			emitValue(state);
 

package/src/value/computed.ts

@@ -1,16 +1,16 @@
 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';
 
-type ComputedEffect = {
+export type ComputedEffect = {
 	dirty: boolean;
 	instance: Effect;
 };
 
 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) {
@@ -59,7 +59,7 @@ export class Computed<Value> extends Reactive<Value> {
 	 * @inheritdoc
 	 */
 	get(): Value {
-		if (activeComputed != null && activeComputed !== this) {
+		if (activeComputed != null && this !== activeComputed) {
 			this.state.computeds.add(activeComputed);
 		}
 
@@ -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 {getValue, setValue} from '../helpers/value';
-import {Reactive} from './reactive';
+import {differentValues, 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,11 @@ export class Signal<Value> extends Reactive<Value> {
 	 * Set the value
 	 */
 	set(value: Value): void {
-		setValue(this.state, value);
+		if (differentValues(this.state, this.state.value, value)) {
+			this.state.value = value;
+
+			emitValue(this.state);
+		}
 	}
 
 	/**
@@ -32,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/types/batch.d.cts

@@ -8,15 +8,15 @@ declare class Effect {
 }
 declare class Computed<Value> extends Reactive<Value> {
 	private readonly effect;
-	constructor(callback: () => Value);
+	constructor(callback: () => Value, options?: ReactiveOptions<Value>);
 	/**
 	 * @inheritdoc
 	 */
 	get(): Value;
 }
-declare abstract class Reactive<Value> {
-	protected readonly state: ReactiveState<Value>;
-	constructor(name: string, value: Value);
+declare abstract class Reactive<Value, Equal = Value> {
+	protected readonly state: ReactiveState<Value, Equal>;
+	constructor(name: string, value: Value, options?: ReactiveOptions<Equal>);
 	/**
 	 * Get the value
 	 */
@@ -42,22 +42,29 @@ declare abstract class Reactive<Value> {
 	 */
 	unsubscribe(callback: (value: Value) => void): void;
 }
-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;
 };
 declare class Subscription<Value> {
-	state: ReactiveState<Value>;
+	state: ReactiveState<Value, never>;
 	callback: GenericCallback;
-	constructor(state: ReactiveState<Value>, callback: GenericCallback);
+	constructor(state: ReactiveState<Value, never>, callback: GenericCallback);
 }
 /**
  * Unsubscribe from changes
  */
 export type Unsubscribe = () => void;
-export declare function flushEffects(): void;
+export declare function flushHandlers(): void;
 /**
  * Start batching effects _(use `stopBatch` to flush and run batched effects)_
  */

package/types/batch.d.ts

@@ -1,6 +1,6 @@
 import { type Effect } from './effect';
 import type { Subscription } from './subscription';
-export declare function flushEffects(): void;
+export declare function flushHandlers(): void;
 /**
  * Start batching effects _(use `stopBatch` to flush and run batched effects)_
  */

package/types/helpers/is.d.cts

@@ -8,15 +8,15 @@ declare class Effect {
 }
 declare class Computed<Value> extends Reactive<Value> {
 	private readonly effect;
-	constructor(callback: () => Value);
+	constructor(callback: () => Value, options?: ReactiveOptions<Value>);
 	/**
 	 * @inheritdoc
 	 */
 	get(): Value;
 }
-declare abstract class Reactive<Value> {
-	protected readonly state: ReactiveState<Value>;
-	constructor(name: string, value: Value);
+declare abstract class Reactive<Value, Equal = Value> {
+	protected readonly state: ReactiveState<Value, Equal>;
+	constructor(name: string, value: Value, options?: ReactiveOptions<Equal>);
 	/**
 	 * Get the value
 	 */
@@ -42,22 +42,29 @@ declare abstract class Reactive<Value> {
 	 */
 	unsubscribe(callback: (value: Value) => void): void;
 }
-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;
 };
 declare class Subscription<Value> {
-	state: ReactiveState<Value>;
+	state: ReactiveState<Value, never>;
 	callback: GenericCallback;
-	constructor(state: ReactiveState<Value>, callback: GenericCallback);
+	constructor(state: ReactiveState<Value, never>, callback: GenericCallback);
 }
 /**
  * Unsubscribe from changes
  */
 export type Unsubscribe = () => void;
-declare class ReactiveArray<Item> extends Reactive<Item[]> {
+declare class ReactiveArray<Item> extends Reactive<Item[], Item> {
 	#private;
 	/**
 	 * The length of the array
@@ -67,11 +74,15 @@ declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 * Set the length of the array
 	 */
 	set length(value: number);
-	constructor(value: Item[]);
+	constructor(value: Item[], options?: ReactiveOptions<Item>);
 	/**
 	 * Get an indexed item
 	 */
 	at(index: number): Item | undefined;
+	/**
+	 * Clear the array
+	 */
+	clear(): void;
 	/**
 	 * @inheritdoc
 	 */
@@ -126,7 +137,7 @@ declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	unshift(...items: Item[]): number;
 }
 declare class Signal<Value> extends Reactive<Value> {
-	constructor(value: Value);
+	constructor(value: Value, options?: ReactiveOptions<Value>);
 	/**
 	 * @inheritdoc
 	 */

package/types/helpers/is.d.ts

@@ -2,7 +2,7 @@ import type { Effect } from '../effect';
 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 { Signal } from '../value/signal';
 /**
  * Is the value a reactive array?
  */