@oscarpalmer/mora 0.9.0 → 0.11.0

package/dist/batch.cjs

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const effect = require("./effect.cjs");
+const is = require("./is.cjs");
 function flushEffects() {
-  while (exports.batchDepth === 0 && effect.dirtyEffects.size > 0) {
-    const effects = [...effect.dirtyEffects];
-    effect.dirtyEffects.clear();
-    for (const effect$1 of effects) {
-      effect.runEffect(effect$1);
+  while (exports.batchDepth === 0 && batchedHandlers.size > 0) {
+    const handlers = [...batchedHandlers];
+    batchedHandlers.clear();
+    for (const handler of handlers) {
+      if (is.isEffect(handler)) {
+        effect.runEffect(handler);
+      } else {
+        handler.callback(handler.state.value);
+      }
     }
   }
 }
@@ -19,7 +24,9 @@ function stopBatch() {
   }
   flushEffects();
 }
+const batchedHandlers = /* @__PURE__ */ new Set();
 exports.batchDepth = 0;
+exports.batchedHandlers = batchedHandlers;
 exports.flushEffects = flushEffects;
 exports.startBatch = startBatch;
 exports.stopBatch = stopBatch;

package/dist/batch.js

@@ -1,10 +1,15 @@
-import { dirtyEffects, runEffect } from "./effect.js";
+import { runEffect } from "./effect.js";
+import { isEffect } from "./is.js";
 function flushEffects() {
-  while (batchDepth === 0 && dirtyEffects.size > 0) {
-    const effects = [...dirtyEffects];
-    dirtyEffects.clear();
-    for (const effect of effects) {
-      runEffect(effect);
+  while (batchDepth === 0 && batchedHandlers.size > 0) {
+    const handlers = [...batchedHandlers];
+    batchedHandlers.clear();
+    for (const handler of handlers) {
+      if (isEffect(handler)) {
+        runEffect(handler);
+      } else {
+        handler.callback(handler.state.value);
+      }
     }
   }
 }
@@ -17,9 +22,11 @@ function stopBatch() {
   }
   flushEffects();
 }
+const batchedHandlers = /* @__PURE__ */ new Set();
 let batchDepth = 0;
 export {
   batchDepth,
+  batchedHandlers,
   flushEffects,
   startBatch,
   stopBatch

package/dist/computed.cjs

@@ -5,22 +5,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const batch = require("./batch.cjs");
 const effect = require("./effect.cjs");
+const reactive = require("./reactive.cjs");
 exports.activeComputed = void 0;
-class Computed {
+class Computed extends reactive.Reactive {
   constructor(callback) {
-    __publicField(this, "state");
-    Object.defineProperty(this, "$mora", {
-      value: "computed"
-    });
-    this.state = {
-      computeds: /* @__PURE__ */ new Set(),
+    super("computed", void 0);
+    __publicField(this, "effect", {
       dirty: true,
-      effect: void 0,
-      effects: /* @__PURE__ */ new Set(),
-      value: void 0
-    };
-    this.state.effect = effect.effect(() => {
-      if (this.state.dirty) {
+      instance: void 0
+    });
+    this.effect.instance = effect.effect(() => {
+      if (this.effect.dirty) {
         const previousComputed = exports.activeComputed;
         exports.activeComputed = this;
         const value = callback();
@@ -28,13 +23,16 @@ class Computed {
         if (!Object.is(this.state.value, value)) {
           this.state.value = value;
           for (const computed2 of this.state.computeds) {
-            computed2.state.dirty = true;
+            computed2.effect.dirty = true;
           }
           for (const effect2 of this.state.effects) {
-            effect.dirtyEffects.add(effect2);
+            batch.batchedHandlers.add(effect2);
+          }
+          for (const [, subscription] of this.state.subscriptions) {
+            subscription.callback(value);
           }
         }
-        this.state.dirty = false;
+        this.effect.dirty = false;
       }
     });
   }
@@ -45,20 +43,14 @@ class Computed {
     if (exports.activeComputed != null && exports.activeComputed !== this) {
       this.state.computeds.add(exports.activeComputed);
     }
-    if (effect.activeEffect != null && effect.activeEffect !== this.state.effect) {
+    if (effect.activeEffect != null && effect.activeEffect !== this.effect.instance) {
       this.state.effects.add(effect.activeEffect);
     }
-    if (this.state.dirty && batch.batchDepth === 0) {
-      effect.runEffect(this.state.effect);
+    if (this.effect.dirty && batch.batchDepth === 0) {
+      effect.runEffect(this.effect.instance);
     }
     return this.state.value;
   }
-  /**
-   * Get the value _(without reactivity)_
-   */
-  peek() {
-    return this.state.value;
-  }
 }
 function computed(callback) {
   return new Computed(callback);

package/dist/computed.js

@@ -1,24 +1,19 @@
 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 { batchDepth } from "./batch.js";
-import { effect, dirtyEffects, activeEffect, runEffect } from "./effect.js";
+import { batchedHandlers, batchDepth } from "./batch.js";
+import { effect, activeEffect, runEffect } from "./effect.js";
+import { Reactive } from "./reactive.js";
 let activeComputed;
-class Computed {
+class Computed extends Reactive {
   constructor(callback) {
-    __publicField(this, "state");
-    Object.defineProperty(this, "$mora", {
-      value: "computed"
-    });
-    this.state = {
-      computeds: /* @__PURE__ */ new Set(),
+    super("computed", void 0);
+    __publicField(this, "effect", {
       dirty: true,
-      effect: void 0,
-      effects: /* @__PURE__ */ new Set(),
-      value: void 0
-    };
-    this.state.effect = effect(() => {
-      if (this.state.dirty) {
+      instance: void 0
+    });
+    this.effect.instance = effect(() => {
+      if (this.effect.dirty) {
         const previousComputed = activeComputed;
         activeComputed = this;
         const value = callback();
@@ -26,13 +21,16 @@ class Computed {
         if (!Object.is(this.state.value, value)) {
           this.state.value = value;
           for (const computed2 of this.state.computeds) {
-            computed2.state.dirty = true;
+            computed2.effect.dirty = true;
           }
           for (const effect2 of this.state.effects) {
-            dirtyEffects.add(effect2);
+            batchedHandlers.add(effect2);
+          }
+          for (const [, subscription] of this.state.subscriptions) {
+            subscription.callback(value);
           }
         }
-        this.state.dirty = false;
+        this.effect.dirty = false;
       }
     });
   }
@@ -43,20 +41,14 @@ class Computed {
     if (activeComputed != null && activeComputed !== this) {
       this.state.computeds.add(activeComputed);
     }
-    if (activeEffect != null && activeEffect !== this.state.effect) {
+    if (activeEffect != null && activeEffect !== this.effect.instance) {
       this.state.effects.add(activeEffect);
     }
-    if (this.state.dirty && batchDepth === 0) {
-      runEffect(this.state.effect);
+    if (this.effect.dirty && batchDepth === 0) {
+      runEffect(this.effect.instance);
     }
     return this.state.value;
   }
-  /**
-   * Get the value _(without reactivity)_
-   */
-  peek() {
-    return this.state.value;
-  }
 }
 function computed(callback) {
   return new Computed(callback);

package/dist/effect.cjs

@@ -24,8 +24,6 @@ function effect(callback) {
   return new Effect(callback);
 }
 exports.activeEffect = void 0;
-const dirtyEffects = /* @__PURE__ */ new Set();
 exports.Effect = Effect;
-exports.dirtyEffects = dirtyEffects;
 exports.effect = effect;
 exports.runEffect = runEffect;

package/dist/effect.js

@@ -22,11 +22,9 @@ function effect(callback) {
   return new Effect(callback);
 }
 let activeEffect;
-const dirtyEffects = /* @__PURE__ */ new Set();
 export {
   Effect,
   activeEffect,
-  dirtyEffects,
   effect,
   runEffect
 };

package/dist/is.cjs

@@ -9,9 +9,13 @@ function isEffect(value) {
 function isMora(value, name) {
   return typeof value === "object" && value != null && "$mora" in value && value.$mora === name;
 }
+function isReactive(value) {
+  return isComputed(value) || isSignal(value);
+}
 function isSignal(value) {
   return isMora(value, "signal");
 }
 exports.isComputed = isComputed;
 exports.isEffect = isEffect;
+exports.isReactive = isReactive;
 exports.isSignal = isSignal;

package/dist/is.js

@@ -7,11 +7,15 @@ function isEffect(value) {
 function isMora(value, name) {
   return typeof value === "object" && value != null && "$mora" in value && value.$mora === name;
 }
+function isReactive(value) {
+  return isComputed(value) || isSignal(value);
+}
 function isSignal(value) {
   return isMora(value, "signal");
 }
 export {
   isComputed,
   isEffect,
+  isReactive,
   isSignal
 };

package/dist/mora.full.js

@@ -26,14 +26,43 @@ function effect(callback) {
     return new Effect(callback);
 }
 let activeEffect;
-const dirtyEffects = new Set();
+
+/**
+ * Is the value a computed signal?
+ */
+function isComputed(value) {
+    return isMora(value, 'computed');
+}
+/**
+ * Is the value an effect?
+ */
+function isEffect(value) {
+    return isMora(value, 'effect');
+}
+function isMora(value, name) {
+    return (typeof value === 'object' &&
+        value != null &&
+        '$mora' in value &&
+        value.$mora === name);
+}
+/**
+ * Is the value a signal?
+ */
+function isSignal(value) {
+    return isMora(value, 'signal');
+}
 
 function flushEffects() {
-    while (batchDepth === 0 && dirtyEffects.size > 0) {
-        const effects = [...dirtyEffects];
-        dirtyEffects.clear();
-        for (const effect of effects) {
-            runEffect(effect);
+    while (batchDepth === 0 && batchedHandlers.size > 0) {
+        const handlers = [...batchedHandlers];
+        batchedHandlers.clear();
+        for (const handler of handlers) {
+            if (isEffect(handler)) {
+                runEffect(handler);
+            }
+            else {
+                handler.callback(handler.state.value);
+            }
         }
     }
 }
@@ -52,24 +81,80 @@ function stopBatch() {
     }
     flushEffects();
 }
+const batchedHandlers = new Set();
 let batchDepth = 0;
 
-let activeComputed;
-class Computed {
+class Subscription {
     state;
-    constructor(callback) {
+    callback;
+    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 = undefined;
+    }
+}
+
+class Reactive {
+    state = {
+        computeds: new Set(),
+        effects: new Set(),
+        subscriptions: new Map(),
+        value: undefined,
+    };
+    constructor(name, value) {
+        this.state.value = value;
         Object.defineProperty(this, '$mora', {
-            value: 'computed',
+            value: name,
         });
-        this.state = {
-            computeds: new Set(),
-            dirty: true,
-            effect: undefined,
-            effects: new Set(),
-            value: undefined,
-        };
-        this.state.effect = effect(() => {
-            if (this.state.dirty) {
+    }
+    /**
+     * Get the value _(without reactivity)_
+     */
+    peek() {
+        return this.state.value;
+    }
+    /**
+     * Subscribe to changes
+     */
+    subscribe(callback) {
+        return subscribe(this.state, callback);
+    }
+    /**
+     * Unsubscribe from changes
+     */
+    unsubscribe(callback) {
+        unsubscribe(this.state, callback);
+    }
+}
+
+let activeComputed;
+class Computed extends Reactive {
+    effect = {
+        dirty: true,
+        instance: undefined,
+    };
+    constructor(callback) {
+        super('computed', undefined);
+        this.effect.instance = effect(() => {
+            if (this.effect.dirty) {
                 const previousComputed = activeComputed;
                 activeComputed = this;
                 const value = callback();
@@ -77,13 +162,16 @@ class Computed {
                 if (!Object.is(this.state.value, value)) {
                     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) {
+                        subscription.callback(value);
                     }
                 }
-                this.state.dirty = false;
+                this.effect.dirty = false;
             }
         });
     }
@@ -94,20 +182,14 @@ class Computed {
         if (activeComputed != null && activeComputed !== this) {
             this.state.computeds.add(activeComputed);
         }
-        if (activeEffect != null && activeEffect !== this.state.effect) {
+        if (activeEffect != null && activeEffect !== this.effect.instance) {
             this.state.effects.add(activeEffect);
         }
-        if (this.state.dirty && batchDepth === 0) {
-            runEffect(this.state.effect);
+        if (this.effect.dirty && batchDepth === 0) {
+            runEffect(this.effect.instance);
         }
         return this.state.value;
     }
-    /**
-     * Get the value _(without reactivity)_
-     */
-    peek() {
-        return this.state.value;
-    }
 }
 /**
  * Create a computed value
@@ -116,42 +198,9 @@ function computed(callback) {
     return new Computed(callback);
 }
 
-/**
- * Is the value a computed signal?
- */
-function isComputed(value) {
-    return isMora(value, 'computed');
-}
-/**
- * Is the value an effect?
- */
-function isEffect(value) {
-    return isMora(value, 'effect');
-}
-function isMora(value, name) {
-    return (typeof value === 'object' &&
-        value != null &&
-        '$mora' in value &&
-        value.$mora === name);
-}
-/**
- * Is the value a signal?
- */
-function isSignal(value) {
-    return isMora(value, 'signal');
-}
-
-class Signal {
-    state;
+class Signal extends Reactive {
     constructor(value) {
-        Object.defineProperty(this, '$mora', {
-            value: 'signal',
-        });
-        this.state = {
-            value,
-            computeds: new Set(),
-            effects: new Set(),
-        };
+        super('signal', value);
     }
     /**
      * Get the value
@@ -165,12 +214,6 @@ class Signal {
         }
         return this.state.value;
     }
-    /**
-     * Get the value _(without reactivity)_
-     */
-    peek() {
-        return this.state.value;
-    }
     /**
      * Set the value
      */
@@ -180,10 +223,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/reactive.cjs

@@ -0,0 +1,39 @@
+"use strict";
+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);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const subscription = require("./subscription.cjs");
+class Reactive {
+  constructor(name, value) {
+    __publicField(this, "state", {
+      computeds: /* @__PURE__ */ new Set(),
+      effects: /* @__PURE__ */ new Set(),
+      subscriptions: /* @__PURE__ */ new Map(),
+      value: void 0
+    });
+    this.state.value = value;
+    Object.defineProperty(this, "$mora", {
+      value: name
+    });
+  }
+  /**
+   * Get the value _(without reactivity)_
+   */
+  peek() {
+    return this.state.value;
+  }
+  /**
+   * Subscribe to changes
+   */
+  subscribe(callback) {
+    return subscription.subscribe(this.state, callback);
+  }
+  /**
+   * Unsubscribe from changes
+   */
+  unsubscribe(callback) {
+    subscription.unsubscribe(this.state, callback);
+  }
+}
+exports.Reactive = Reactive;

package/dist/reactive.js

@@ -0,0 +1,39 @@
+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 { subscribe, unsubscribe } from "./subscription.js";
+class Reactive {
+  constructor(name, value) {
+    __publicField(this, "state", {
+      computeds: /* @__PURE__ */ new Set(),
+      effects: /* @__PURE__ */ new Set(),
+      subscriptions: /* @__PURE__ */ new Map(),
+      value: void 0
+    });
+    this.state.value = value;
+    Object.defineProperty(this, "$mora", {
+      value: name
+    });
+  }
+  /**
+   * Get the value _(without reactivity)_
+   */
+  peek() {
+    return this.state.value;
+  }
+  /**
+   * Subscribe to changes
+   */
+  subscribe(callback) {
+    return subscribe(this.state, callback);
+  }
+  /**
+   * Unsubscribe from changes
+   */
+  unsubscribe(callback) {
+    unsubscribe(this.state, callback);
+  }
+}
+export {
+  Reactive
+};

package/dist/signal.cjs

@@ -1,22 +1,12 @@
 "use strict";
-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);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const batch = require("./batch.cjs");
 const computed = require("./computed.cjs");
 const effect = require("./effect.cjs");
-class Signal {
+const reactive = require("./reactive.cjs");
+class Signal extends reactive.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
@@ -30,12 +20,6 @@ class Signal {
     }
     return this.state.value;
   }
-  /**
-   * Get the value _(without reactivity)_
-   */
-  peek() {
-    return this.state.value;
-  }
   /**
    * Set the value
    */
@@ -45,10 +29,13 @@ class Signal {
     }
     this.state.value = value;
     for (const computed2 of this.state.computeds) {
-      computed2.state.dirty = true;
+      computed2.effect.dirty = true;
+    }
+    for (const effect2 of this.state.effects) {
+      batch.batchedHandlers.add(effect2);
     }
-    for (const effect$1 of this.state.effects) {
-      effect.dirtyEffects.add(effect$1);
+    for (const [, subscription] of this.state.subscriptions) {
+      batch.batchedHandlers.add(subscription);
     }
     if (batch.batchDepth === 0) {
       batch.flushEffects();