@oscarpalmer/mora 0.22.0 → 0.24.0

package/src/value/computed.ts

@@ -1,19 +1,7 @@
-import {batchDepth, batchedHandlers} from '../batch';
-import {type Effect, activeEffect, effect, runEffect} from '../effect';
-import {computedName} from '../helpers/is';
-import {Reactive, type ReactiveOptions, type ReactiveState} from './reactive';
-
-export type ComputedEffect = {
-	dirty: boolean;
-	instance: Effect;
-};
-
-export type InternalComputed = {
-	readonly effect: ComputedEffect;
-	readonly state: ReactiveState<unknown, unknown>;
-};
-
-export let activeComputed: Computed<unknown> | undefined;
+import {ACTIVE, BATCH, NAME_COMPUTED} from '../constants';
+import {effect, runEffect} from '../effect';
+import type {ComputedEffect, ReactiveOptions} from '../models';
+import {Reactive} from './reactive';
 
 export class Computed<Value> extends Reactive<Value> {
 	private readonly effect: ComputedEffect = {
@@ -22,36 +10,38 @@ export class Computed<Value> extends Reactive<Value> {
 	};
 
 	constructor(callback: () => Value, options?: ReactiveOptions<Value>) {
-		super(computedName, undefined as never, options);
+		super(NAME_COMPUTED, undefined as never, options);
 
 		this.effect.instance = effect(() => {
-			if (this.effect.dirty) {
-				const previousComputed = activeComputed;
+			if (!this.effect.dirty) {
+				return;
+			}
 
-				activeComputed = this as never;
+			const previousComputed = ACTIVE.computed;
 
-				const value = callback();
+			ACTIVE.computed = this as never;
 
-				activeComputed = previousComputed;
+			const value = callback();
 
-				if (!this.state.equal(this.state.value, value)) {
-					this.state.value = value;
+			ACTIVE.computed = previousComputed;
 
-					for (const computed of this.state.computeds) {
-						computed.effect.dirty = true;
-					}
+			if (!this.state.equal(this.state.value, value)) {
+				this.state.value = value;
 
-					for (const effect of this.state.effects) {
-						batchedHandlers.add(effect);
-					}
+				for (const computed of this.state.computeds) {
+					computed.effect.dirty = true;
+				}
 
-					for (const [, subscription] of this.state.subscriptions) {
-						subscription.callback(value);
-					}
+				for (const effect of this.state.effects) {
+					BATCH.handlers.add(effect);
 				}
 
-				this.effect.dirty = false;
+				for (const [, subscription] of this.state.subscriptions) {
+					subscription.callback(value);
+				}
 			}
+
+			this.effect.dirty = false;
 		});
 	}
 
@@ -59,15 +49,15 @@ export class Computed<Value> extends Reactive<Value> {
 	 * @inheritdoc
 	 */
 	get(): Value {
-		if (activeComputed != null && this !== activeComputed) {
-			this.state.computeds.add(activeComputed);
+		if (ACTIVE.computed != null && this !== ACTIVE.computed) {
+			this.state.computeds.add(ACTIVE.computed);
 		}
 
-		if (activeEffect != null && activeEffect !== this.effect.instance) {
-			this.state.effects.add(activeEffect);
+		if (ACTIVE.effect != null && ACTIVE.effect !== this.effect.instance) {
+			this.state.effects.add(ACTIVE.effect);
 		}
 
-		if (this.effect.dirty && batchDepth === 0) {
+		if (this.effect.dirty && BATCH.depth === 0) {
 			runEffect(this.effect.instance);
 		}
 

package/src/value/reactive.ts

@@ -1,12 +1,6 @@
-import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import type {Effect} from '../effect';
-import {
-	type Subscription,
-	type Unsubscribe,
-	subscribe,
-	unsubscribe,
-} from '../subscription';
-import type {Computed} from './computed';
+import {NAME_MORA} from '../constants';
+import type {ReactiveOptions, ReactiveState, Unsubscribe} from '../models';
+import {subscribe, unsubscribe} from '../subscription';
 
 export abstract class Reactive<Value, Equal = Value> {
 	protected readonly state: ReactiveState<Value, Equal> = {
@@ -24,18 +18,20 @@ export abstract class Reactive<Value, Equal = Value> {
 			this.state.equal = options.equal;
 		}
 
-		Object.defineProperty(this, '$mora', {
+		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;
@@ -43,6 +39,8 @@ export abstract class Reactive<Value, Equal = Value> {
 
 	/**
 	 * Subscribe to changes
+	 * @param callback Callback for changes
+	 * @return Unsubscribe callback
 	 */
 	subscribe(callback: (value: Value) => void): Unsubscribe {
 		return subscribe(this.state, callback);
@@ -50,6 +48,7 @@ export abstract class Reactive<Value, Equal = Value> {
 
 	/**
 	 * JSON representation of the value
+	 * @return JSON value
 	 */
 	toJSON(): Value {
 		return this.get();
@@ -57,6 +56,7 @@ export abstract class Reactive<Value, Equal = Value> {
 
 	/**
 	 * String representation of the value
+	 * @return Value as string
 	 */
 	toString(): string {
 		return String(this.get());
@@ -64,23 +64,9 @@ export abstract class Reactive<Value, Equal = Value> {
 
 	/**
 	 * Unsubscribe from changes
+	 * @param callback Callback to unsubscribe
 	 */
 	unsubscribe(callback: (value: Value) => void): void {
 		unsubscribe(this.state, callback);
 	}
 }
-
-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<GenericCallback, Subscription>;
-	value: Value;
-};

package/src/value/signal.ts

@@ -1,10 +1,11 @@
-import {signalName} from '../helpers/is';
+import {NAME_SIGNAL} from '../constants';
 import {emitValue, getValue} from '../helpers/value';
-import {Reactive, type ReactiveOptions} from './reactive';
+import type {ReactiveOptions} from '../models';
+import {Reactive} from './reactive';
 
 export class Signal<Value> extends Reactive<Value> {
 	constructor(value: Value, options?: ReactiveOptions<Value>) {
-		super(signalName, value, options);
+		super(NAME_SIGNAL, value, options);
 	}
 
 	/**
@@ -16,6 +17,7 @@ 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)) {
@@ -27,6 +29,7 @@ export class Signal<Value> extends Reactive<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));
@@ -35,6 +38,9 @@ export class Signal<Value> extends Reactive<Value> {
 
 /**
  * Create a reactive value
+ * @param value Initial value
+ * @param options Optional reactivity options
+ * @returns Reactive value
  */
 export function signal<Value>(
 	value: Value,

package/src/value/store.ts

@@ -4,26 +4,34 @@ import type {
 	Key,
 	PlainObject,
 } from '@oscarpalmer/atoms/models';
-import {storeName} from '../helpers/is';
+import {NAME_STORE} from '../constants';
 import {
 	getReactiveValueInProxy,
+	emityProxyValues,
 	setProxyValue,
 	setValueInProxy,
 } from '../helpers/proxy';
-import {getValue} from '../helpers/value';
-import {type Unsubscribe, noop, subscribe} from '../subscription';
+import {emitValue, getValue} from '../helpers/value';
+import type {InternalComputed, ReactiveOptions, Unsubscribe} from '../models';
+import {noop, subscribe} from '../subscription';
 import type {Computed} from './computed';
-import {Reactive, type ReactiveOptions} from './reactive';
+import {Reactive} from './reactive';
 
 export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
-	#keyed = new Map<Key, Computed<unknown>>();
+	readonly #keyed = new Map<Key, Computed<unknown>>();
 
 	constructor(value: Value, options?: ReactiveOptions<Value>) {
 		super(
-			storeName,
+			NAME_STORE,
 			new Proxy(value, {
-				set: (target, property, value) =>
-					setValueInProxy(target, property, value, this.state, false),
+				set: (target: Value, property: PropertyKey, value: unknown) =>
+					setValueInProxy({
+						target,
+						property,
+						value,
+						isArray: false,
+						state: this.state,
+					}),
 			}),
 			options,
 		);
@@ -35,12 +43,16 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 	get(): Value;
 
 	/**
-	 * Get a value by key _(without reactivity)_
+	 * Get a value by key
+	 * @param key Key of the value to get
+	 * @returns Value for the specified key, or `undefined` if it doesn't exist
 	 */
-	get(key: keyof Value): Value[keyof Value];
+	get<Key extends keyof Value>(key: Key): Value[Key];
 
 	/**
-	 * Get a value by key _(without reactivity)_
+	 * Get a value by key
+	 * @param key Key of the value to get
+	 * @returns Value for the specified key, or `undefined` if it doesn't exist
 	 */
 	get(key: Key): unknown;
 
@@ -50,18 +62,33 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 			: getValue(this.state);
 	}
 
+	/**
+	 * Notify dependents of changes
+	 *
+	 * _This bypasses equality checks and will immediately notify dependents.
+	 * Use this only if you're modifying nested data that would be ignored by equality checks._
+	 */
+	notify(): void {
+		emityProxyValues(this.state, this.#keyed);
+	}
+
 	/**
 	 * Get the value _(without reactivity)_
+	 * @returns The current value
 	 */
 	peek(): Value;
 
 	/**
 	 * Get a value by key _(without reactivity)_
+	 * @param key Key of the value to get
+	 * @returns Value for the specified key, or `undefined` if it doesn't exist
 	 */
-	peek(key: keyof Value): Value[keyof Value];
+	peek<Key extends keyof Value>(key: Key): Value[Key];
 
 	/**
 	 * Get a value by key _(without reactivity)_
+	 * @param key Key of the value to get
+	 * @returns Value for the specified key, or `undefined` if it doesn't exist
 	 */
 	peek(key: Key): unknown;
 
@@ -71,16 +98,21 @@ 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 a value by key
+	 * @param key Key of the value to set
+	 * @param value New value
 	 */
-	set(key: keyof Value, value: Value[keyof Value]): void;
+	set<Key extends keyof Value>(key: Key, value: Value[Key]): void;
 
 	/**
 	 * Set a value by key
+	 * @param key Key of the value to set
+	 * @param value New value
 	 */
 	set(key: Key, value: unknown): void;
 
@@ -99,6 +131,9 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 
 	/**
 	 * Subscribe to changes for a specific key
+	 * @param key Key of the value to subscribe to
+	 * @param callback Callback for changes
+	 * @returns Unsubscribe callback
 	 */
 	subscribe<Key extends keyof Value>(
 		key: Key,
@@ -107,6 +142,9 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 
 	/**
 	 * Subscribe to changes for a specific key
+	 * @param key Key of the value to subscribe to
+	 * @param callback Callback for changes
+	 * @returns Unsubscribe callback
 	 */
 	subscribe(key: Key, callback: (value: unknown) => void): Unsubscribe;
 
@@ -125,6 +163,7 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 
 	/**
 	 * Update the value _(based on the current value)_
+	 * @param callback Callback to update the value
 	 */
 	update(callback: (value: Value) => Value): void {
 		const updated = callback({...this.state.value});
@@ -137,6 +176,9 @@ export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
 
 /**
  * Create a reactive store
+ * @param value Initial object value
+ * @param options Optional reactivity options
+ * @returns Reactive store
  */
 export function store<Value extends PlainObject>(
 	value: Value,

package/types/batch.d.ts

@@ -1,13 +1,11 @@
-import { type Effect } from './effect';
-import type { Subscription } from './subscription';
 export declare function flushHandlers(): void;
 /**
- * Start batching effects _(use `stopBatch` to flush and run batched effects)_
+ * Start batching effects
+ *
+ * _(Use {@link 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 const batchedHandlers: Set<Subscription | Effect>;
-export declare let batchDepth: number;

package/types/constants.d.ts

@@ -0,0 +1,16 @@
+import type { Active, Batch } from './models';
+export declare const ACTIVE: Active;
+export declare const ARRAY_THRESHOLD = 100;
+export declare const ARRAY_OFFSET = 25;
+export declare const ARRAY_PEEK = 10;
+export declare const BATCH: Batch;
+export declare const METHODS_AFFECTING_LENGTH: Set<string>;
+export declare const METHODS_UPDATE: Set<string>;
+export declare const NAME_ARRAY = "array";
+export declare const NAME_COMPUTED = "computed";
+export declare const NAME_EFFECT = "effect";
+export declare const NAME_MORA = "$mora";
+export declare const NAME_SIGNAL = "signal";
+export declare const NAME_STORE = "store";
+export declare const NAMES: Set<string>;
+export declare const PROPERTY_LENGTH = "length";

package/types/effect.d.ts

@@ -7,6 +7,7 @@ export declare class Effect {
 export declare function runEffect(effect: Effect): void;
 /**
  * Create an effect
+ * @param callback Callback for handling signal effects
+ * @returns Effect
  */
 export declare function effect(callback: GenericCallback): Effect;
-export declare let activeEffect: Effect | undefined;

package/types/helpers/is.d.ts

@@ -7,24 +7,37 @@ import type { Signal } from '../value/signal';
 import type { Store } from '../value/store';
 /**
  * Is the value a reactive array?
+ * @param value Value to check
+ * @returns True if value is a {@link ReactiveArray}
  */
-export declare function isArray(value: unknown): value is ReactiveArray<unknown>;
+export declare function isArray<Item>(value: unknown): value is ReactiveArray<Item>;
 /**
  * Is the value a computed signal?
+ * @param value Value to check
+ * @returns True if value is a {@link Computed}
  */
-export declare function isComputed(value: unknown): value is Computed<unknown>;
+export declare function isComputed<Value>(value: unknown): value is Computed<Value>;
 /**
  * Is the value an effect?
+ * @param value Value to check
+ * @returns True if value is an {@link Effect}
  */
 export declare function isEffect(value: unknown): value is Effect;
-export declare function isReactive(value: unknown): value is Reactive<unknown>;
+/**
+ * Is the value reactive?
+ * @param value Value to check
+ * @returns True if value is a {@link Reactive}
+ */
+export declare function isReactive<Value, Equal = Value>(value: unknown): value is Reactive<Value, Equal>;
 /**
  * Is the value a signal?
+ * @param value Value to check
+ * @returns True if value is a {@link Signal}
+ */
+export declare function isSignal<Value>(value: unknown): value is Signal<Value>;
+/**
+ * Is the value a reactive store?
+ * @param value Value to check
+ * @returns True if value is a {@link Store}
  */
-export declare function isSignal(value: unknown): value is Signal<unknown>;
-export declare function isStore(value: unknown): value is Store<PlainObject>;
-export declare const arrayName = "array";
-export declare const computedName = "computed";
-export declare const effectName = "effect";
-export declare const signalName = "signal";
-export declare const storeName = "store";
+export declare function isStore<Value extends PlainObject>(value: unknown): value is Store<Value>;

package/types/helpers/proxy.d.ts

@@ -1,10 +1,11 @@
 import type { ArrayOrPlainObject, Key, PlainObject } from '@oscarpalmer/atoms/models';
+import type { ReactiveState, SetValueInProxyParameters } from '../models';
 import type { ReactiveArray } from '../value/array';
 import { type Computed } from '../value/computed';
-import type { ReactiveState } from '../value/reactive';
-import type { Signal } from '../value/signal';
 import type { Store } from '../value/store';
+export declare function emityProxyValues<Value>(state: ReactiveState<Value, Value>, mapped: Map<Key, Computed<unknown>>): void;
+export declare function emityProxyValues<Value>(state: ReactiveState<Value[], Value>, mapped: Map<Key, Computed<unknown>>): void;
 export declare function getReactiveValueInProxy<Value>(array: ReactiveArray<Value>, mapped: Map<Key, Computed<unknown>>, index: number, isArray: true): Computed<unknown>;
 export declare function getReactiveValueInProxy<Value extends PlainObject>(store: Store<Value>, mapped: Map<Key, Computed<unknown>>, key: Key, isArray: false): Computed<unknown>;
 export declare function setProxyValue(proxy: ArrayOrPlainObject, value: ArrayOrPlainObject): void;
-export declare function setValueInProxy<Value extends ArrayOrPlainObject, Equal>(target: Value, property: PropertyKey, value: unknown, state: ReactiveState<Value, Equal>, isArray: boolean, length?: Signal<number>): boolean;
+export declare function setValueInProxy<Value extends ArrayOrPlainObject, Equal>(parameters: SetValueInProxyParameters<Value, Equal>): boolean;

package/types/helpers/value.d.ts

@@ -1,4 +1,4 @@
-import type { ReactiveState } from '../value/reactive';
+import type { ReactiveState } from '../models';
 export declare function emitValue<Value>(state: ReactiveState<Value, never>): void;
 export declare function equalArrays<Value>(state: ReactiveState<Value[], Value>, first: Value[], second: Value[]): boolean;
 export declare function getValue<Value>(state: ReactiveState<Value, never>): Value;

package/types/index.d.ts

@@ -1,6 +1,7 @@
 export { startBatch, stopBatch } from './batch';
 export { effect, type Effect } from './effect';
 export { isArray, isComputed, isEffect, isReactive, isSignal, } from './helpers/is';
+export type { Unsubscribe } from './models';
 export { array, type ReactiveArray } from './value/array';
 export { computed, type Computed } from './value/computed';
 export type { Reactive } from './value/reactive';

package/types/models.d.ts

@@ -0,0 +1,56 @@
+import type { GenericCallback } from '@oscarpalmer/atoms/models';
+import type { Effect } from './effect';
+import type { Subscription } from './subscription';
+import type { Computed } from './value/computed';
+import type { Signal } from './value/signal';
+export type Active = {
+    computed?: Computed<unknown>;
+    effect?: Effect;
+};
+export type Batch = {
+    depth: number;
+    handlers: Set<Effect | Subscription>;
+};
+export type ComputedEffect = {
+    dirty: boolean;
+    instance: Effect;
+};
+export type EffectState = {
+    callback: GenericCallback;
+};
+export type InternalComputed = {
+    readonly effect: ComputedEffect;
+    readonly state: ReactiveState<unknown, unknown>;
+};
+export type InternalEffect = {
+    state: EffectState;
+};
+export type ReactiveOptions<Value> = {
+    /**
+     * Method for comparing values for equality
+     * @param first First value
+     * @param second Second value
+     * @returns Are the values equal?
+     * @default Object.is
+     */
+    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<GenericCallback, Subscription>;
+    value: Value;
+};
+export type SetValueInProxyParameters<Value, Equal> = {
+    target: Value;
+    property: PropertyKey;
+    value: unknown;
+    state: ReactiveState<Value, Equal>;
+    isArray: boolean;
+    length?: Signal<number>;
+};
+/**
+ * Unsubscribe from changes
+ */
+export type Unsubscribe = () => void;

package/types/subscription.d.ts

@@ -1,14 +1,11 @@
 import type { GenericCallback } from '@oscarpalmer/atoms/models';
-import type { ReactiveState } from './value/reactive';
+import type { ReactiveState, Unsubscribe } from './models';
 export declare class Subscription {
-    state: ReactiveState<unknown, never>;
     callback: GenericCallback;
+    state: ReactiveState<unknown, never>;
     constructor(state: ReactiveState<unknown, never>, callback: GenericCallback);
+    destroy(): void;
 }
-/**
- * Unsubscribe from changes
- */
-export type Unsubscribe = () => void;
 export declare function noop(): void;
 export declare function subscribe<Value>(state: ReactiveState<Value, never>, callback: (value: Value) => void): Unsubscribe;
 export declare function unsubscribe<Value>(state: ReactiveState<Value, never>, callback: (value: Value) => void): void;