@oscarpalmer/mora 0.9.0 → 0.10.0

package/src/computed.ts

@@ -1,17 +1,19 @@
-import {batchDepth} from './batch';
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {batchDepth, batchedHandlers} from './batch';
+import {type Effect, activeEffect, effect, runEffect} from './effect';
 import {
-	type Effect,
-	activeEffect,
-	dirtyEffects,
-	effect,
-	runEffect,
-} from './effect';
-
-type ComputedState<Value> = {
+	type Subscription,
+	type Unsubscribe,
+	subscribe,
+	unsubscribe,
+} from './subscription';
+
+export type ComputedState<Value> = {
 	computeds: Set<Computed<unknown>>;
 	dirty: boolean;
 	effect: Effect;
 	effects: Set<Effect>;
+	subscriptions: Map<GenericCallback, Subscription>;
 	value: Value;
 };
 
@@ -22,76 +24,95 @@ export type InternalComputed = {
 export let activeComputed: Computed<unknown> | undefined;
 
 export class Computed<Value> {
-		private declare readonly $mora: string;
+	private declare readonly $mora: string;
 
-		private readonly state: ComputedState<Value>;
+	private readonly state: ComputedState<Value>;
 
-		constructor(callback: () => Value) {
-			Object.defineProperty(this, '$mora', {
-				value: 'computed',
-			});
+	constructor(callback: () => Value) {
+		Object.defineProperty(this, '$mora', {
+			value: 'computed',
+		});
 
-			this.state = {
-				computeds: new Set(),
-				dirty: true,
-				effect: undefined as never,
-				effects: new Set(),
-				value: undefined as never,
-			};
+		this.state = {
+			computeds: new Set(),
+			dirty: true,
+			effect: undefined as never,
+			effects: new Set(),
+			subscriptions: new Map(),
+			value: undefined as never,
+		};
 
-			this.state.effect = effect(() => {
-				if (this.state.dirty) {
-					const previousComputed = activeComputed;
+		this.state.effect = effect(() => {
+			if (this.state.dirty) {
+				const previousComputed = activeComputed;
 
-					activeComputed = this;
+				activeComputed = this;
 
-					const value = callback();
+				const value = callback();
 
-					activeComputed = previousComputed;
+				activeComputed = previousComputed;
 
-					if (!Object.is(this.state.value, value)) {
-						this.state.value = value;
+				if (!Object.is(this.state.value, value)) {
+					this.state.value = value;
 
-						for (const computed of this.state.computeds) {
-							computed.state.dirty = true;
-						}
+					for (const computed of this.state.computeds) {
+						computed.state.dirty = true;
+					}
 
-						for (const effect of this.state.effects) {
-							dirtyEffects.add(effect);
-						}
+					for (const effect of this.state.effects) {
+						batchedHandlers.add(effect);
 					}
 
-					this.state.dirty = false;
+					for (const [, subscription] of this.state.subscriptions) {
+						subscription.callback(value);
+					}
 				}
-			});
-		}
 
-		/**
-		 * Get the value
-		 */
-		get(): Value {
-			if (activeComputed != null && activeComputed !== this) {
-				this.state.computeds.add(activeComputed);
-			}
-
-			if (activeEffect != null && activeEffect !== this.state.effect) {
-				this.state.effects.add(activeEffect);
+				this.state.dirty = false;
 			}
+		});
+	}
 
-			if (this.state.dirty && batchDepth === 0) {
-				runEffect(this.state.effect);
-			}
+	/**
+	 * Get the value
+	 */
+	get(): Value {
+		if (activeComputed != null && activeComputed !== this) {
+			this.state.computeds.add(activeComputed);
+		}
 
-			return this.state.value;
+		if (activeEffect != null && activeEffect !== this.state.effect) {
+			this.state.effects.add(activeEffect);
 		}
 
-		/**
-		 * Get the value _(without reactivity)_
-		 */
-		peek(): Value {
-			return this.state.value;
+		if (this.state.dirty && batchDepth === 0) {
+			runEffect(this.state.effect);
 		}
+
+		return this.state.value;
+	}
+
+	/**
+	 * Get the value _(without reactivity)_
+	 */
+	peek(): Value {
+		return this.state.value;
+	}
+
+	/**
+	 * Subscribe to changes
+	 */
+	subscribe(callback: (value: Value) => void): Unsubscribe {
+		return subscribe(this.state, callback);
+	}
+
+	/**
+	 * Unsubscribe from changes
+	 */
+	unsubscribe(callback: (value: Value) => void): void {
+		unsubscribe(this.state, callback);
 	}
+}
 
 /**
  * Create a computed value

package/src/effect.ts

@@ -46,5 +46,3 @@ export function effect(callback: GenericCallback): Effect {
 }
 
 export let activeEffect: Effect | undefined;
-
-export const dirtyEffects = new Set<Effect>();

package/src/signal.ts

@@ -1,83 +1,110 @@
-import {batchDepth, flushEffects} from './batch';
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {batchDepth, batchedHandlers, flushEffects} from './batch';
 import {type Computed, type InternalComputed, activeComputed} from './computed';
-import {type Effect, activeEffect, dirtyEffects} from './effect';
-
-type SignalState<Value> = {
+import {type Effect, activeEffect} from './effect';
+import {
+	type Subscription,
+	type Unsubscribe,
+	subscribe,
+	unsubscribe,
+} from './subscription';
+
+export type SignalState<Value> = {
 	computeds: Set<Computed<unknown>>;
 	effects: Set<Effect>;
+	subscriptions: Map<GenericCallback, Subscription>;
 	value: Value;
 };
 
 export class Signal<Value> {
-		private declare readonly $mora: string;
+	private declare readonly $mora: string;
+
+	private readonly state: SignalState<Value>;
 
-		private readonly state: SignalState<Value>;
+	constructor(value: Value) {
+		Object.defineProperty(this, '$mora', {
+			value: 'signal',
+		});
 
-		constructor(value: Value) {
-			Object.defineProperty(this, '$mora', {
-				value: 'signal',
-			});
+		this.state = {
+			value,
+			computeds: new Set(),
+			effects: new Set(),
+			subscriptions: new Map(),
+		};
+	}
 
-			this.state = {
-				value,
-				computeds: new Set(),
-				effects: new Set(),
-			};
+	/**
+	 * Get the value
+	 */
+	get(): Value {
+		if (activeComputed != null) {
+			this.state.computeds.add(activeComputed);
 		}
 
-		/**
-		 * Get the value
-		 */
-		get(): Value {
-			if (activeComputed != null) {
-				this.state.computeds.add(activeComputed);
-			}
+		if (activeEffect != null) {
+			this.state.effects.add(activeEffect);
+		}
 
-			if (activeEffect != null) {
-				this.state.effects.add(activeEffect);
-			}
+		return this.state.value;
+	}
 
-			return this.state.value;
-		}
+	/**
+	 * Get the value _(without reactivity)_
+	 */
+	peek(): Value {
+		return this.state.value;
+	}
 
-		/**
-		 * Get the value _(without reactivity)_
-		 */
-		peek(): Value {
-			return this.state.value;
+	/**
+	 * Set the value
+	 */
+	set(value: Value): void {
+		if (Object.is(this.state.value, value)) {
+			return;
 		}
 
-		/**
-		 * Set the value
-		 */
-		set(value: Value): void {
-			if (Object.is(this.state.value, value)) {
-				return;
-			}
+		this.state.value = value;
 
-			this.state.value = value;
-
-			for (const computed of this.state.computeds) {
-				(computed as unknown as InternalComputed).state.dirty = true;
-			}
+		for (const computed of this.state.computeds) {
+			(computed as unknown as InternalComputed).state.dirty = true;
+		}
 
-			for (const effect of this.state.effects) {
-				dirtyEffects.add(effect);
-			}
+		for (const effect of this.state.effects) {
+			batchedHandlers.add(effect);
+		}
 
-			if (batchDepth === 0) {
-				flushEffects();
-			}
+		for (const [, subscription] of this.state.subscriptions) {
+			batchedHandlers.add(subscription);
 		}
 
-		/**
-		 * Update the value
-		 */
-		update(callback: (value: Value) => Value): void {
-			this.set(callback(this.state.value));
+		if (batchDepth === 0) {
+			flushEffects();
 		}
 	}
 
+	/**
+	 * Subscribe to changes
+	 */
+	subscribe(callback: (value: Value) => void): Unsubscribe {
+		return subscribe(this.state, callback);
+	}
+
+	/**
+	 * Unsubscribe from changes
+	 */
+	unsubscribe(callback: (value: Value) => void): void {
+		unsubscribe(this.state, callback);
+	}
+
+	/**
+	 * Update the value
+	 */
+	update(callback: (value: Value) => Value): void {
+		this.set(callback(this.state.value));
+	}
+}
+
 export function signal<Value>(value: Value): Signal<Value> {
 	return new Signal(value);
 }

package/src/subscription.ts

@@ -0,0 +1,45 @@
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import type {ComputedState} from './computed';
+import type {SignalState} from './signal';
+
+export class Subscription {
+	constructor(
+		public state: ComputedState<unknown> | SignalState<unknown>,
+		public callback: GenericCallback,
+	) {
+		callback(state.value);
+	}
+}
+
+export type Unsubscribe = () => void;
+
+export function noop(): void {}
+
+export function subscribe(
+	state: ComputedState<unknown> | SignalState<unknown>,
+	callback: GenericCallback,
+): Unsubscribe {
+	if (typeof callback !== 'function' || state.subscriptions.has(callback)) {
+		return noop;
+	}
+
+	state.subscriptions.set(callback, new Subscription(state, callback));
+
+	return () => {
+		unsubscribe(state, callback);
+	};
+}
+
+export function unsubscribe(
+	state: ComputedState<unknown> | SignalState<unknown>,
+	callback: GenericCallback,
+): void {
+	const subscription = state.subscriptions.get(callback);
+
+	state.subscriptions.delete(callback);
+
+	if (subscription != null) {
+		subscription.callback = noop;
+		subscription.state = undefined as never;
+	}
+}

package/types/batch.d.cts

@@ -1,5 +1,52 @@
 // 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);
+}
+export type ComputedState<Value> = {
+	computeds: Set<Computed<unknown>>;
+	dirty: boolean;
+	effect: Effect;
+	effects: Set<Effect>;
+	subscriptions: Map<GenericCallback, Subscription>;
+	value: Value;
+};
+declare class Computed<Value> {
+	private readonly $mora;
+	private readonly state;
+	constructor(callback: () => Value);
+	/**
+	 * Get the value
+	 */
+	get(): Value;
+	/**
+	 * Get the value _(without reactivity)_
+	 */
+	peek(): Value;
+	/**
+	 * Subscribe to changes
+	 */
+	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * Unsubscribe from changes
+	 */
+	unsubscribe(callback: (value: Value) => void): void;
+}
+export type SignalState<Value> = {
+	computeds: Set<Computed<unknown>>;
+	effects: Set<Effect>;
+	subscriptions: Map<GenericCallback, Subscription>;
+	value: Value;
+};
+declare class Subscription {
+	state: ComputedState<unknown> | SignalState<unknown>;
+	callback: GenericCallback;
+	constructor(state: ComputedState<unknown> | SignalState<unknown>, callback: GenericCallback);
+}
+export type Unsubscribe = () => void;
 export declare function flushEffects(): void;
 /**
  * Start batching effects _(use `stopBatch` to flush and run batched effects)_
@@ -9,6 +56,7 @@ export declare function startBatch(): void;
  * Stop batching effects and flush _(run)_ them
  */
 export declare function stopBatch(): void;
+export declare const batchedHandlers: Set<Effect | Subscription>;
 export declare let batchDepth: number;
 
 export {};

package/types/batch.d.ts

@@ -1,3 +1,5 @@
+import { type Effect } from './effect';
+import type { Subscription } from './subscription';
 export declare function flushEffects(): void;
 /**
  * Start batching effects _(use `stopBatch` to flush and run batched effects)_
@@ -7,4 +9,5 @@ export declare function startBatch(): void;
  * Stop batching effects and flush _(run)_ them
  */
 export declare function stopBatch(): void;
+export declare const batchedHandlers: Set<Effect | Subscription>;
 export declare let batchDepth: number;

package/types/computed.d.cts

@@ -11,6 +11,7 @@ export type ComputedState<Value> = {
 	dirty: boolean;
 	effect: Effect;
 	effects: Set<Effect>;
+	subscriptions: Map<GenericCallback, Subscription>;
 	value: Value;
 };
 export type InternalComputed = {
@@ -29,10 +30,30 @@ export declare class Computed<Value> {
 	 * Get the value _(without reactivity)_
 	 */
 	peek(): Value;
+	/**
+	 * Subscribe to changes
+	 */
+	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * Unsubscribe from changes
+	 */
+	unsubscribe(callback: (value: Value) => void): void;
 }
 /**
  * Create a computed value
  */
 export declare function computed<Value>(callback: () => Value): Computed<Value>;
+export type SignalState<Value> = {
+	computeds: Set<Computed<unknown>>;
+	effects: Set<Effect>;
+	subscriptions: Map<GenericCallback, Subscription>;
+	value: Value;
+};
+declare class Subscription {
+	state: ComputedState<unknown> | SignalState<unknown>;
+	callback: GenericCallback;
+	constructor(state: ComputedState<unknown> | SignalState<unknown>, callback: GenericCallback);
+}
+export type Unsubscribe = () => void;
 
 export {};

package/types/computed.d.ts

@@ -1,9 +1,12 @@
+import type { GenericCallback } from '@oscarpalmer/atoms/models';
 import { type Effect } from './effect';
-type ComputedState<Value> = {
+import { type Subscription, type Unsubscribe } from './subscription';
+export type ComputedState<Value> = {
     computeds: Set<Computed<unknown>>;
     dirty: boolean;
     effect: Effect;
     effects: Set<Effect>;
+    subscriptions: Map<GenericCallback, Subscription>;
     value: Value;
 };
 export type InternalComputed = {
@@ -22,9 +25,16 @@ export declare class Computed<Value> {
      * Get the value _(without reactivity)_
      */
     peek(): Value;
+    /**
+     * Subscribe to changes
+     */
+    subscribe(callback: (value: Value) => void): Unsubscribe;
+    /**
+     * Unsubscribe from changes
+     */
+    unsubscribe(callback: (value: Value) => void): void;
 }
 /**
  * Create a computed value
  */
 export declare function computed<Value>(callback: () => Value): Computed<Value>;
-export {};

package/types/effect.d.cts

@@ -12,6 +12,5 @@ export declare function runEffect(effect: Effect): void;
  */
 export declare function effect(callback: GenericCallback): Effect;
 export declare let activeEffect: Effect | undefined;
-export declare const dirtyEffects: Set<Effect>;
 
 export {};

package/types/effect.d.ts

@@ -10,4 +10,3 @@ export declare function runEffect(effect: Effect): void;
  */
 export declare function effect(callback: GenericCallback): Effect;
 export declare let activeEffect: Effect | undefined;
-export declare const dirtyEffects: Set<Effect>;

package/types/index.d.cts

@@ -1,9 +1,19 @@
 // Generated by dts-bundle-generator v9.5.1
 
-export declare class Signal<Value> {
+export type GenericCallback = (...args: any[]) => any;
+export declare class Effect {
 	private readonly $mora;
 	private readonly state;
-	constructor(value: Value);
+	constructor(callback: GenericCallback);
+}
+/**
+ * Create an effect
+ */
+export declare function effect(callback: GenericCallback): Effect;
+export declare class Computed<Value> {
+	private readonly $mora;
+	private readonly state;
+	constructor(callback: () => Value);
 	/**
 	 * Get the value
 	 */
@@ -13,29 +23,22 @@ export declare class Signal<Value> {
 	 */
 	peek(): Value;
 	/**
-	 * Set the value
+	 * Subscribe to changes
 	 */
-	set(value: Value): void;
+	subscribe(callback: (value: Value) => void): Unsubscribe;
 	/**
-	 * Update the value
+	 * Unsubscribe from changes
 	 */
-	update(callback: (value: Value) => Value): void;
-}
-export declare function signal<Value>(value: Value): Signal<Value>;
-export type GenericCallback = (...args: any[]) => any;
-export declare class Effect {
-	private readonly $mora;
-	private readonly state;
-	constructor(callback: GenericCallback);
+	unsubscribe(callback: (value: Value) => void): void;
 }
 /**
- * Create an effect
+ * Create a computed value
  */
-export declare function effect(callback: GenericCallback): Effect;
-export declare class Computed<Value> {
+export declare function computed<Value>(callback: () => Value): Computed<Value>;
+export declare class Signal<Value> {
 	private readonly $mora;
 	private readonly state;
-	constructor(callback: () => Value);
+	constructor(value: Value);
 	/**
 	 * Get the value
 	 */
@@ -44,11 +47,25 @@ export declare class Computed<Value> {
 	 * Get the value _(without reactivity)_
 	 */
 	peek(): Value;
+	/**
+	 * Set the value
+	 */
+	set(value: Value): void;
+	/**
+	 * Subscribe to changes
+	 */
+	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * Unsubscribe from changes
+	 */
+	unsubscribe(callback: (value: Value) => void): void;
+	/**
+	 * Update the value
+	 */
+	update(callback: (value: Value) => Value): void;
 }
-/**
- * Create a computed value
- */
-export declare function computed<Value>(callback: () => Value): Computed<Value>;
+export declare function signal<Value>(value: Value): Signal<Value>;
+export type Unsubscribe = () => void;
 /**
  * Is the value a computed signal?
  */