@oscarpalmer/mora 0.12.0 → 0.14.0

package/src/value/array.ts

@@ -0,0 +1,170 @@
+import {emitArrayChanges, emitValue} from '../helpers/emit';
+import {arrayName} from '../helpers/is';
+import {getValue} from '../helpers/value';
+import {Reactive, type ReactiveState} from './reactive';
+import {type Signal, signal} from './signal';
+
+export class ReactiveArray<Item> extends Reactive<Item[]> {
+	#size = signal(0);
+
+	/**
+	 * The length of the array
+	 */
+	get length(): number {
+		return this.#size.get();
+	}
+
+	/**
+	 * Set the length of the array
+	 */
+	set length(value: number) {
+		if (
+			typeof value === 'number' &&
+			value >= 0 &&
+			value !== this.state.value.length
+		) {
+			this.get().length = value;
+		}
+	}
+
+	constructor(value: Item[]) {
+		super(
+			arrayName,
+			new Proxy(value, {
+				get: (target, property) =>
+					updateMethods.has(property as string)
+						? 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),
+			}),
+		);
+
+		this.#size.set(value.length);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	get(): Item[] {
+		return getValue(this.state);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	peek(): Item[];
+
+	/**
+	 * Get the length of the array _(without reactivity)_
+	 */
+	peek(length: true): number;
+
+	peek(length?: unknown): Item[] | number {
+		return length === true ? this.#size.peek() : [...this.state.value];
+	}
+
+	/**
+	 * Set the value
+	 */
+	set(value: Item[]): void;
+
+	/**
+	 * Set the value at an index
+	 */
+	set(index: number, value: Item): void;
+
+	/**
+	 * Set the length of the array
+	 */
+	set(property: 'length', value: number): void;
+
+	set(first: number | 'length' | Item[], second?: number | Item): void {
+		if (Array.isArray(first)) {
+			this.state.value.splice(0, this.state.value.length, ...first);
+		} else if (first === 'length') {
+			this.length = second as number;
+		} else if (typeof first === 'number') {
+			this.state.value[first] = second as 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;
+}
+
+function updateArray<Item>(
+	type: string,
+	array: Item[],
+	state: ReactiveState<Item[]>,
+	length: Signal<number>,
+): unknown {
+	const affectsLength = lengthAffectingMethods.has(type);
+	const previousArray = affectsLength ? [] : [...array];
+	const previousLength = array.length;
+
+	return (...args: unknown[]): unknown => {
+		const result = (array[type as never] as (...args: unknown[]) => unknown)(
+			...args,
+		);
+
+		if (
+			affectsLength
+				? array.length !== previousLength
+				: emitArrayChanges(previousArray, array)
+		) {
+			emitValue(state);
+
+			length.set(array.length);
+		}
+
+		return result;
+	};
+}
+
+const lengthAffectingMethods = new Set<string>([
+	'pop',
+	'push',
+	'shift',
+	'unshift',
+]);
+
+const updateMethods = new Set<string>([
+	...lengthAffectingMethods,
+	'copyWithin',
+	'fill',
+	'reverse',
+	'sort',
+	'splice',
+]);

package/src/{computed.ts → value/computed.ts}

@@ -1,5 +1,6 @@
-import {batchDepth, batchedHandlers} from './batch';
-import {type Effect, activeEffect, effect, runEffect} from './effect';
+import {batchDepth, batchedHandlers} from '../batch';
+import {type Effect, activeEffect, effect, runEffect} from '../effect';
+import {computedName} from '../helpers/is';
 import {Reactive, type ReactiveState} from './reactive';
 
 type ComputedEffect = {
@@ -21,7 +22,7 @@ export class Computed<Value> extends Reactive<Value> {
 	};
 
 	constructor(callback: () => Value) {
-		super('computed', undefined as never);
+		super(computedName, undefined as never);
 
 		this.effect.instance = effect(() => {
 			if (this.effect.dirty) {

package/src/{reactive.ts → value/reactive.ts}

@@ -1,11 +1,11 @@
-import type {Computed} from './computed';
-import type {Effect} from './effect';
+import type {Effect} from '../effect';
 import {
 	type Subscription,
 	type Unsubscribe,
 	subscribe,
 	unsubscribe,
-} from './subscription';
+} from '../subscription';
+import type {Computed} from './computed';
 
 export abstract class Reactive<Value> {
 	protected readonly state: ReactiveState<Value> = {
@@ -42,6 +42,20 @@ export abstract class Reactive<Value> {
 		return subscribe(this.state, callback);
 	}
 
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value {
+		return this.get();
+	}
+
+	/**
+	 * String representation of the value
+	 */
+	toString(): string {
+		return String(this.get());
+	}
+
 	/**
 	 * Unsubscribe from changes
 	 */

package/src/value/signal.ts

@@ -0,0 +1,37 @@
+import {signalName} from '../helpers/is';
+import {getValue, setValue} from '../helpers/value';
+import {Reactive} from './reactive';
+
+export class Signal<Value> extends Reactive<Value> {
+	constructor(value: Value) {
+		super(signalName, value);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	get(): Value {
+		return getValue(this.state);
+	}
+
+	/**
+	 * Set the value
+	 */
+	set(value: Value): void {
+		setValue(this.state, value);
+	}
+
+	/**
+	 * Update the value
+	 */
+	update(callback: (value: Value) => Value): void {
+		this.set(callback(this.state.value));
+	}
+}
+
+/**
+ * Create a reactive value
+ */
+export function signal<Value>(value: Value): Signal<Value> {
+	return new Signal(value);
+}

package/types/batch.d.cts

@@ -29,6 +29,14 @@ declare abstract class Reactive<Value> {
 	 * Subscribe to changes
 	 */
 	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value;
+	/**
+	 * String representation of the value
+	 */
+	toString(): string;
 	/**
 	 * Unsubscribe from changes
 	 */

package/types/{is.d.cts → helpers/emit.d.cts}

@@ -29,6 +29,14 @@ declare abstract class Reactive<Value> {
 	 * Subscribe to changes
 	 */
 	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value;
+	/**
+	 * String representation of the value
+	 */
+	toString(): string;
 	/**
 	 * Unsubscribe from changes
 	 */
@@ -49,33 +57,7 @@ declare class Subscription<Value> {
  * Unsubscribe from changes
  */
 export type Unsubscribe = () => void;
-declare class Signal<Value> extends Reactive<Value> {
-	constructor(value: Value);
-	/**
-	 * @inheritdoc
-	 */
-	get(): Value;
-	/**
-	 * Set the value
-	 */
-	set(value: Value): void;
-	/**
-	 * Update the value
-	 */
-	update(callback: (value: Value) => Value): void;
-}
-/**
- * Is the value a computed signal?
- */
-export declare function isComputed(value: unknown): value is Computed<unknown>;
-/**
- * Is the value an effect?
- */
-export declare function isEffect(value: unknown): value is Effect;
-export declare function isReactive(value: unknown): value is Reactive<unknown>;
-/**
- * Is the value a signal?
- */
-export declare function isSignal(value: unknown): value is Signal<unknown>;
+export declare function emitArrayChanges(first: unknown[], second: unknown[]): boolean;
+export declare function emitValue<Value>(state: ReactiveState<Value>): void;
 
 export {};

package/types/helpers/emit.d.ts

@@ -0,0 +1,3 @@
+import type { ReactiveState } from '../value/reactive';
+export declare function emitArrayChanges(first: unknown[], second: unknown[]): boolean;
+export declare function emitValue<Value>(state: ReactiveState<Value>): void;

package/types/helpers/is.d.cts

@@ -0,0 +1,133 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export type GenericCallback = (...args: any[]) => any;
+declare class Effect {
+	private readonly $mora;
+	private readonly state;
+	constructor(callback: GenericCallback);
+}
+declare class Computed<Value> extends Reactive<Value> {
+	private readonly effect;
+	constructor(callback: () => Value);
+	/**
+	 * @inheritdoc
+	 */
+	get(): Value;
+}
+declare abstract class Reactive<Value> {
+	protected readonly state: ReactiveState<Value>;
+	constructor(name: string, value: Value);
+	/**
+	 * Get the value
+	 */
+	abstract get(): Value;
+	/**
+	 * Get the value _(without reactivity)_
+	 */
+	peek(): Value;
+	/**
+	 * Subscribe to changes
+	 */
+	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value;
+	/**
+	 * String representation of the value
+	 */
+	toString(): string;
+	/**
+	 * Unsubscribe from changes
+	 */
+	unsubscribe(callback: (value: Value) => void): void;
+}
+export type ReactiveState<Value> = {
+	computeds: Set<Computed<unknown>>;
+	effects: Set<Effect>;
+	subscriptions: Map<(value: Value) => void, Subscription<Value>>;
+	value: Value;
+};
+declare class Subscription<Value> {
+	state: ReactiveState<Value>;
+	callback: GenericCallback;
+	constructor(state: ReactiveState<Value>, callback: GenericCallback);
+}
+/**
+ * Unsubscribe from changes
+ */
+export type Unsubscribe = () => void;
+declare class ReactiveArray<Item> extends Reactive<Item[]> {
+	#private;
+	/**
+	 * The length of the array
+	 */
+	get length(): number;
+	/**
+	 * Set the length of the array
+	 */
+	set length(value: number);
+	constructor(value: Item[]);
+	/**
+	 * @inheritdoc
+	 */
+	get(): Item[];
+	/**
+	 * @inheritdoc
+	 */
+	peek(): Item[];
+	/**
+	 * Get the length of the array _(without reactivity)_
+	 */
+	peek(length: true): number;
+	/**
+	 * Set the value
+	 */
+	set(value: Item[]): void;
+	/**
+	 * Set the value at an index
+	 */
+	set(index: number, value: Item): void;
+	/**
+	 * Set the length of the array
+	 */
+	set(property: "length", value: number): void;
+}
+declare class Signal<Value> extends Reactive<Value> {
+	constructor(value: Value);
+	/**
+	 * @inheritdoc
+	 */
+	get(): Value;
+	/**
+	 * Set the value
+	 */
+	set(value: Value): void;
+	/**
+	 * Update the value
+	 */
+	update(callback: (value: Value) => Value): void;
+}
+/**
+ * Is the value a reactive array?
+ */
+export declare function isArray(value: unknown): value is ReactiveArray<unknown>;
+/**
+ * Is the value a computed signal?
+ */
+export declare function isComputed(value: unknown): value is Computed<unknown>;
+/**
+ * Is the value an effect?
+ */
+export declare function isEffect(value: unknown): value is Effect;
+export declare function isReactive(value: unknown): value is Reactive<unknown>;
+/**
+ * Is the value a signal?
+ */
+export declare function isSignal(value: unknown): value is Signal<unknown>;
+export declare const arrayName = "array";
+export declare const computedName = "computed";
+export declare const effectName = "effect";
+export declare const signalName = "signal";
+
+export {};

package/types/helpers/is.d.ts

@@ -0,0 +1,26 @@
+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';
+/**
+ * Is the value a reactive array?
+ */
+export declare function isArray(value: unknown): value is ReactiveArray<unknown>;
+/**
+ * Is the value a computed signal?
+ */
+export declare function isComputed(value: unknown): value is Computed<unknown>;
+/**
+ * Is the value an effect?
+ */
+export declare function isEffect(value: unknown): value is Effect;
+export declare function isReactive(value: unknown): value is Reactive<unknown>;
+/**
+ * Is the value a signal?
+ */
+export declare function isSignal(value: unknown): value is Signal<unknown>;
+export declare const arrayName = "array";
+export declare const computedName = "computed";
+export declare const effectName = "effect";
+export declare const signalName = "signal";

package/types/helpers/value.d.cts

@@ -0,0 +1,63 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export type GenericCallback = (...args: any[]) => any;
+declare class Effect {
+	private readonly $mora;
+	private readonly state;
+	constructor(callback: GenericCallback);
+}
+declare class Computed<Value> extends Reactive<Value> {
+	private readonly effect;
+	constructor(callback: () => Value);
+	/**
+	 * @inheritdoc
+	 */
+	get(): Value;
+}
+declare abstract class Reactive<Value> {
+	protected readonly state: ReactiveState<Value>;
+	constructor(name: string, value: Value);
+	/**
+	 * Get the value
+	 */
+	abstract get(): Value;
+	/**
+	 * Get the value _(without reactivity)_
+	 */
+	peek(): Value;
+	/**
+	 * Subscribe to changes
+	 */
+	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value;
+	/**
+	 * String representation of the value
+	 */
+	toString(): string;
+	/**
+	 * Unsubscribe from changes
+	 */
+	unsubscribe(callback: (value: Value) => void): void;
+}
+export type ReactiveState<Value> = {
+	computeds: Set<Computed<unknown>>;
+	effects: Set<Effect>;
+	subscriptions: Map<(value: Value) => void, Subscription<Value>>;
+	value: Value;
+};
+declare class Subscription<Value> {
+	state: ReactiveState<Value>;
+	callback: GenericCallback;
+	constructor(state: ReactiveState<Value>, callback: GenericCallback);
+}
+/**
+ * Unsubscribe from changes
+ */
+export type Unsubscribe = () => void;
+export declare function getValue<Value>(state: ReactiveState<Value>): Value;
+export declare function setValue<Value>(state: ReactiveState<Value>, value: Value): void;
+
+export {};

package/types/helpers/value.d.ts

@@ -0,0 +1,3 @@
+import type { ReactiveState } from '../value/reactive';
+export declare function getValue<Value>(state: ReactiveState<Value>): Value;
+export declare function setValue<Value>(state: ReactiveState<Value>, value: Value): void;

package/types/index.d.cts

@@ -37,6 +37,14 @@ export declare abstract class Reactive<Value> {
 	 * Subscribe to changes
 	 */
 	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value;
+	/**
+	 * String representation of the value
+	 */
+	toString(): string;
 	/**
 	 * Unsubscribe from changes
 	 */
@@ -57,6 +65,54 @@ declare class Subscription<Value> {
  * Unsubscribe from changes
  */
 export type Unsubscribe = () => void;
+/**
+ * Start batching effects _(use `stopBatch` to flush and run batched effects)_
+ */
+export declare function startBatch(): void;
+/**
+ * Stop batching effects and flush _(run)_ them
+ */
+export declare function stopBatch(): void;
+export declare class ReactiveArray<Item> extends Reactive<Item[]> {
+	#private;
+	/**
+	 * The length of the array
+	 */
+	get length(): number;
+	/**
+	 * Set the length of the array
+	 */
+	set length(value: number);
+	constructor(value: Item[]);
+	/**
+	 * @inheritdoc
+	 */
+	get(): Item[];
+	/**
+	 * @inheritdoc
+	 */
+	peek(): Item[];
+	/**
+	 * Get the length of the array _(without reactivity)_
+	 */
+	peek(length: true): number;
+	/**
+	 * Set the value
+	 */
+	set(value: Item[]): void;
+	/**
+	 * Set the value at an index
+	 */
+	set(index: number, value: Item): void;
+	/**
+	 * Set the length of the array
+	 */
+	set(property: "length", value: number): void;
+}
+/**
+ * Create a reactive array
+ */
+export declare function array<Item>(value: Item[]): ReactiveArray<Item>;
 export declare class Signal<Value> extends Reactive<Value> {
 	constructor(value: Value);
 	/**
@@ -72,7 +128,14 @@ export declare class Signal<Value> extends Reactive<Value> {
 	 */
 	update(callback: (value: Value) => Value): void;
 }
+/**
+ * Create a reactive value
+ */
 export declare function signal<Value>(value: Value): Signal<Value>;
+/**
+ * Is the value a reactive array?
+ */
+export declare function isArray(value: unknown): value is ReactiveArray<unknown>;
 /**
  * Is the value a computed signal?
  */
@@ -86,13 +149,5 @@ export declare function isReactive(value: unknown): value is Reactive<unknown>;
  * Is the value a signal?
  */
 export declare function isSignal(value: unknown): value is Signal<unknown>;
-/**
- * Start batching effects _(use `stopBatch` to flush and run batched effects)_
- */
-export declare function startBatch(): void;
-/**
- * Stop batching effects and flush _(run)_ them
- */
-export declare function stopBatch(): void;
 
 export {};

package/types/index.d.ts

@@ -1,6 +1,7 @@
 export { startBatch, stopBatch } from './batch';
-export { computed, type Computed } from './computed';
 export { effect, type Effect } from './effect';
-export { isComputed, isEffect, isReactive, isSignal } from './is';
-export type { Reactive } from './reactive';
-export { signal, type Signal } from './signal';
+export { isArray, isComputed, isEffect, isReactive, isSignal, } from './helpers/is';
+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';

package/types/subscription.d.cts

@@ -29,6 +29,14 @@ declare abstract class Reactive<Value> {
 	 * Subscribe to changes
 	 */
 	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value;
+	/**
+	 * String representation of the value
+	 */
+	toString(): string;
 	/**
 	 * Unsubscribe from changes
 	 */

package/types/subscription.d.ts

@@ -1,5 +1,5 @@
 import type { GenericCallback } from '@oscarpalmer/atoms/models';
-import type { ReactiveState } from './reactive';
+import type { ReactiveState } from './value/reactive';
 export declare class Subscription<Value> {
     state: ReactiveState<Value>;
     callback: GenericCallback;