@oscarpalmer/mora 0.9.0 → 0.11.0

package/dist/signal.js

@@ -1,20 +1,10 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { flushEffects, batchDepth } from "./batch.js";
+import { batchedHandlers, flushEffects, batchDepth } from "./batch.js";
 import { activeComputed } from "./computed.js";
-import { activeEffect, dirtyEffects } from "./effect.js";
-class Signal {
+import { activeEffect } from "./effect.js";
+import { Reactive } from "./reactive.js";
+class Signal extends Reactive {
   constructor(value) {
-    __publicField(this, "state");
-    Object.defineProperty(this, "$mora", {
-      value: "signal"
-    });
-    this.state = {
-      value,
-      computeds: /* @__PURE__ */ new Set(),
-      effects: /* @__PURE__ */ new Set()
-    };
+    super("signal", value);
   }
   /**
    * Get the value
@@ -28,12 +18,6 @@ class Signal {
     }
     return this.state.value;
   }
-  /**
-   * Get the value _(without reactivity)_
-   */
-  peek() {
-    return this.state.value;
-  }
   /**
    * Set the value
    */
@@ -43,10 +27,13 @@ class Signal {
     }
     this.state.value = value;
     for (const computed of this.state.computeds) {
-      computed.state.dirty = true;
+      computed.effect.dirty = true;
     }
     for (const effect of this.state.effects) {
-      dirtyEffects.add(effect);
+      batchedHandlers.add(effect);
+    }
+    for (const [, subscription] of this.state.subscriptions) {
+      batchedHandlers.add(subscription);
     }
     if (batchDepth === 0) {
       flushEffects();

package/dist/subscription.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class Subscription {
+  constructor(state, callback) {
+    this.state = state;
+    this.callback = callback;
+    callback(state.value);
+  }
+}
+function noop() {
+}
+function subscribe(state, callback) {
+  if (typeof callback !== "function" || state.subscriptions.has(callback)) {
+    return noop;
+  }
+  state.subscriptions.set(callback, new Subscription(state, callback));
+  return () => {
+    unsubscribe(state, callback);
+  };
+}
+function unsubscribe(state, callback) {
+  const subscription = state.subscriptions.get(callback);
+  state.subscriptions.delete(callback);
+  if (subscription != null) {
+    subscription.callback = noop;
+    subscription.state = void 0;
+  }
+}
+exports.Subscription = Subscription;
+exports.noop = noop;
+exports.subscribe = subscribe;
+exports.unsubscribe = unsubscribe;

package/dist/subscription.js

@@ -0,0 +1,32 @@
+class Subscription {
+  constructor(state, callback) {
+    this.state = state;
+    this.callback = callback;
+    callback(state.value);
+  }
+}
+function noop() {
+}
+function subscribe(state, callback) {
+  if (typeof callback !== "function" || state.subscriptions.has(callback)) {
+    return noop;
+  }
+  state.subscriptions.set(callback, new Subscription(state, callback));
+  return () => {
+    unsubscribe(state, callback);
+  };
+}
+function unsubscribe(state, callback) {
+  const subscription = state.subscriptions.get(callback);
+  state.subscriptions.delete(callback);
+  if (subscription != null) {
+    subscription.callback = noop;
+    subscription.state = void 0;
+  }
+}
+export {
+  Subscription,
+  noop,
+  subscribe,
+  unsubscribe
+};

package/package.json

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

package/src/batch.ts

@@ -1,13 +1,19 @@
-import {dirtyEffects, runEffect} from './effect';
+import {type Effect, runEffect} from './effect';
+import {isEffect} from './is';
+import type {Subscription} from './subscription';
 
 export function flushEffects(): void {
-	while (batchDepth === 0 && dirtyEffects.size > 0) {
-		const effects = [...dirtyEffects];
+	while (batchDepth === 0 && batchedHandlers.size > 0) {
+		const handlers = [...batchedHandlers];
 
-		dirtyEffects.clear();
+		batchedHandlers.clear();
 
-		for (const effect of effects) {
-			runEffect(effect);
+		for (const handler of handlers) {
+			if (isEffect(handler)) {
+				runEffect(handler);
+			} else {
+				handler.callback(handler.state.value);
+			}
 		}
 	}
 }
@@ -30,4 +36,6 @@ export function stopBatch(): void {
 	flushEffects();
 }
 
+export const batchedHandlers = new Set<Effect | Subscription<unknown>>();
+
 export let batchDepth = 0;

package/src/computed.ts

@@ -1,97 +1,78 @@
-import {batchDepth} from './batch';
-import {
-	type Effect,
-	activeEffect,
-	dirtyEffects,
-	effect,
-	runEffect,
-} from './effect';
-
-type ComputedState<Value> = {
-	computeds: Set<Computed<unknown>>;
+import {batchDepth, batchedHandlers} from './batch';
+import {type Effect, activeEffect, effect, runEffect} from './effect';
+import {Reactive, type ReactiveState} from './reactive';
+
+type ComputedEffect = {
 	dirty: boolean;
-	effect: Effect;
-	effects: Set<Effect>;
-	value: Value;
+	instance: Effect;
 };
 
 export type InternalComputed = {
-	readonly state: ComputedState<unknown>;
+	readonly effect: ComputedEffect;
+	readonly state: ReactiveState<unknown>;
 };
 
 export let activeComputed: Computed<unknown> | undefined;
 
-export class Computed<Value> {
-		private declare readonly $mora: string;
-
-		private readonly state: ComputedState<Value>;
+export class Computed<Value> extends Reactive<Value> {
+	private readonly effect: ComputedEffect = {
+		dirty: true,
+		instance: undefined as never,
+	};
 
-		constructor(callback: () => Value) {
-			Object.defineProperty(this, '$mora', {
-				value: 'computed',
-			});
+	constructor(callback: () => Value) {
+		super('computed', undefined as never);
 
-			this.state = {
-				computeds: new Set(),
-				dirty: true,
-				effect: undefined as never,
-				effects: new Set(),
-				value: undefined as never,
-			};
+		this.effect.instance = effect(() => {
+			if (this.effect.dirty) {
+				const previousComputed = activeComputed;
 
-			this.state.effect = effect(() => {
-				if (this.state.dirty) {
-					const previousComputed = activeComputed;
+				activeComputed = this as never;
 
-					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.effect.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.effect.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.effect.instance) {
+			this.state.effects.add(activeEffect);
 		}
 
-		/**
-		 * Get the value _(without reactivity)_
-		 */
-		peek(): Value {
-			return this.state.value;
+		if (this.effect.dirty && batchDepth === 0) {
+			runEffect(this.effect.instance);
 		}
+
+		return this.state.value;
 	}
+}
 
 /**
  * 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/is.ts

@@ -1,6 +1,7 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
 import type {Computed} from './computed';
 import type {Effect} from './effect';
+import type {Reactive} from './reactive';
 import type {Signal} from './signal';
 
 /**
@@ -26,6 +27,10 @@ function isMora<T>(value: unknown, name: string): value is T {
 	);
 }
 
+export function isReactive(value: unknown): value is Reactive<unknown> {
+	return isComputed(value) || isSignal(value);
+}
+
 /**
  * Is the value a signal?
  */

package/src/reactive.ts

@@ -0,0 +1,53 @@
+import type {Computed} from './computed';
+import type {Effect} from './effect';
+import {
+	type Subscription,
+	type Unsubscribe,
+	subscribe,
+	unsubscribe,
+} from './subscription';
+
+export abstract class Reactive<Value> {
+	protected readonly state: ReactiveState<Value> = {
+		computeds: new Set(),
+		effects: new Set(),
+		subscriptions: new Map(),
+		value: undefined as never,
+	};
+
+	constructor(name: string, value: Value) {
+		this.state.value = value;
+
+		Object.defineProperty(this, '$mora', {
+			value: name,
+		});
+	}
+
+	/**
+	 * 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);
+	}
+}
+
+export type ReactiveState<Value> = {
+	computeds: Set<Computed<unknown>>;
+	effects: Set<Effect>;
+	subscriptions: Map<(value: Value) => void, Subscription<Value>>;
+	value: Value;
+};

package/src/signal.ts

@@ -1,83 +1,63 @@
-import {batchDepth, flushEffects} from './batch';
-import {type Computed, type InternalComputed, activeComputed} from './computed';
-import {type Effect, activeEffect, dirtyEffects} from './effect';
-
-type SignalState<Value> = {
-	computeds: Set<Computed<unknown>>;
-	effects: Set<Effect>;
-	value: Value;
-};
+import {batchDepth, batchedHandlers, flushEffects} from './batch';
+import {type InternalComputed, activeComputed} from './computed';
+import {activeEffect} from './effect';
+import {Reactive} from './reactive';
+
+export class Signal<Value> extends Reactive<Value> {
+	constructor(value: Value) {
+		super('signal', value);
+	}
 
-export class Signal<Value> {
-		private declare readonly $mora: string;
+	/**
+	 * Get the value
+	 */
+	get(): Value {
+		if (activeComputed != null) {
+			this.state.computeds.add(activeComputed);
+		}
 
-		private readonly state: SignalState<Value>;
+		if (activeEffect != null) {
+			this.state.effects.add(activeEffect);
+		}
 
-		constructor(value: Value) {
-			Object.defineProperty(this, '$mora', {
-				value: 'signal',
-			});
+		return this.state.value;
+	}
 
-			this.state = {
-				value,
-				computeds: new Set(),
-				effects: new Set(),
-			};
+	/**
+	 * Set the value
+	 */
+	set(value: Value): void {
+		if (Object.is(this.state.value, value)) {
+			return;
 		}
 
-		/**
-		 * Get the value
-		 */
-		get(): Value {
-			if (activeComputed != null) {
-				this.state.computeds.add(activeComputed);
-			}
-
-			if (activeEffect != null) {
-				this.state.effects.add(activeEffect);
-			}
+		this.state.value = value;
 
-			return this.state.value;
+		for (const computed of this.state.computeds) {
+			(computed as unknown as InternalComputed).effect.dirty = true;
 		}
 
-		/**
-		 * Get the value _(without reactivity)_
-		 */
-		peek(): Value {
-			return this.state.value;
+		for (const effect of this.state.effects) {
+			batchedHandlers.add(effect);
 		}
 
-		/**
-		 * Set the value
-		 */
-		set(value: Value): void {
-			if (Object.is(this.state.value, value)) {
-				return;
-			}
-
-			this.state.value = value;
-
-			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);
-			}
-
-			if (batchDepth === 0) {
-				flushEffects();
-			}
+		for (const [, subscription] of this.state.subscriptions) {
+			batchedHandlers.add(subscription as never);
 		}
 
-		/**
-		 * Update the value
-		 */
-		update(callback: (value: Value) => Value): void {
-			this.set(callback(this.state.value));
+		if (batchDepth === 0) {
+			flushEffects();
 		}
 	}
 
+	/**
+	 * 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,47 @@
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import type {ReactiveState} from './reactive';
+
+export class Subscription<Value> {
+	constructor(
+		public state: ReactiveState<Value>,
+		public callback: GenericCallback,
+	) {
+		callback(state.value);
+	}
+}
+
+/**
+ * Unsubscribe from changes
+ */
+export type Unsubscribe = () => void;
+
+export function noop(): void {}
+
+export function subscribe<Value>(
+	state: ReactiveState<Value>,
+	callback: (value: Value) => void,
+): 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<Value>(
+	state: ReactiveState<Value>,
+	callback: (value: Value) => void,
+): 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,50 @@
 // 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);
+	/**
+	 * Get the value
+	 */
+	get(): Value;
+}
+declare abstract class Reactive<Value> {
+	protected readonly state: ReactiveState<Value>;
+	constructor(name: string, value: 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 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 flushEffects(): void;
 /**
  * Start batching effects _(use `stopBatch` to flush and run batched effects)_
@@ -9,6 +54,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<unknown>>;
 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<unknown>>;
 export declare let batchDepth: number;