@esmj/signals 0.0.5 → 0.1.2

package/dist/index.d.mts

@@ -1,6 +1,10 @@
 import { Observable, Observer } from '@esmj/observable';
 
 let context = null;
+let batchDepth = 0;
+let batchQueue = new Set();
+let flushScheduled = false;
+let flushCallbacks = [];
 
 function untrack(callback) {
   const prevContext = context;
@@ -11,6 +15,57 @@ function untrack(callback) {
   return result;
 }
 
+function flushPending() {
+  flushScheduled = false;
+  const pendings = getPending();
+  for (const pending of pendings) {
+    pending.get();
+  }
+
+  // Run all onFlush callbacks once, then clear
+  const callbacks = flushCallbacks;
+  flushCallbacks = [];
+  for (const cb of callbacks) {
+    cb();
+  }
+}
+
+function scheduleFlush() {
+  if (!flushScheduled) {
+    flushScheduled = true;
+    queueMicrotask(flushPending);
+  }
+}
+
+function onFlush(callback) {
+  flushCallbacks.push(callback);
+
+  // Ensure a flush is scheduled so the callback actually runs
+  scheduleFlush();
+}
+
+function afterFlush() {
+  return new Promise((resolve) => onFlush(resolve));
+}
+
+function batch(callback) {
+  batchDepth++;
+  try {
+    callback();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0) {
+      const queue = batchQueue;
+      batchQueue = new Set();
+      for (const observable of queue) {
+        observable.next();
+      }
+
+      scheduleFlush();
+    }
+  }
+}
+
 const INTERNAL_OBSERVABLE = Symbol('internal observable');
 const ORIGINAL_FUNCTION = Symbol('original function');
 
@@ -75,29 +130,37 @@ class Watcher extends Observable {
   }
 
   getPending() {
-    const pendings = Array.from(this.#pendings).map((pending) => {
+    const pendings = [];
+    for (const pending of this.#pendings) {
       if (!pending.get[ORIGINAL_FUNCTION]) {
-        const originalGet = pending.get.bind(pending);
+        const originalGet = pending.get;
+        const boundGet = originalGet.bind(pending);
 
         pending.get = () => {
           return untrack(() => {
             this.#pendings.delete(pending);
-            return originalGet();
+            return boundGet();
           });
         };
 
         pending.get[ORIGINAL_FUNCTION] = originalGet;
       }
 
-      return pending;
-    });
+      pendings.push(pending);
+    }
 
     return pendings;
   }
 
   unwatch(signal) {
-    signal.next = signal.next[ORIGINAL_FUNCTION];
-    signal.get = signal.get[ORIGINAL_FUNCTION];
+    signal.next = signal.next[ORIGINAL_FUNCTION]
+      ? signal.next[ORIGINAL_FUNCTION]
+      : signal.next;
+    signal.get = signal.get[ORIGINAL_FUNCTION]
+      ? signal.get[ORIGINAL_FUNCTION]
+      : signal.get;
+
+    this.#pendings.delete(signal);
 
     return this.unsubscribe(signal);
   }
@@ -108,15 +171,9 @@ let w = null;
 function createWatcher(notify) {
   w = new Watcher(notify);
 }
-let timer = null;
+
 createWatcher(() => {
-  // TODO performance improvement
-  clearTimeout(timer);
-  timer = setTimeout(() => {
-    getPending().forEach((pending) => {
-      pending.get();
-    });
-  }, 0);
+  scheduleFlush();
 });
 
 function getPending() {
@@ -131,13 +188,18 @@ function unwatch(signal) {
   return w.unwatch(signal);
 }
 
+const NO_ERROR = Symbol('no error');
+
 class Computed extends Observer {
   #dirty = true;
-  #prevContext = null;
+  #running = false;
   #signal = null;
   #context = this.#createNewContext();
   #callback = null;
   #options = null;
+  #revision = 0;
+  #sourceRevisions = new Map();
+  #error = NO_ERROR;
 
   constructor(callback, options) {
     super();
@@ -151,85 +213,144 @@ class Computed extends Observer {
   }
 
   #clearContextDependencies() {
-    Array.from(this.#context.dependencies.values()).forEach(
-      ({ unsubscribe }) => {
-        unsubscribe();
-      },
-    );
+    for (const { unsubscribe } of this.#context.dependencies.values()) {
+      unsubscribe();
+    }
     this.#context.dependencies.clear();
   }
 
   #createNewContext() {
     const context = {
       dependencies: new Map(),
+      sourceRevisions: new Map(),
       observer: this,
     };
 
     return context;
   }
 
-  #savePrevContext() {
-    this.#prevContext = context;
-    context = this.#context;
+  getRevision() {
+    return this.#revision;
   }
 
-  #restorePrevContext() {
-    context = this.#prevContext;
+  #needsRecompute() {
+    for (const [source, savedRevision] of this.#sourceRevisions) {
+      if (source instanceof Computed) {
+        untrack(() => source.get());
+      }
+
+      if (source.getRevision() !== savedRevision) {
+        return true;
+      }
+    }
+    return false;
   }
 
   next() {
     this.#dirty = true;
+    watch(this);
     this.#signal[INTERNAL_OBSERVABLE].next();
   }
 
   get() {
+    if (this.#running) {
+      throw new Error('Cycle detected in computed signal');
+    }
+
     if (!this.#signal) {
       this.#signal = createSignal(this.#run(), this.#options);
     }
 
-    if (this.#dirty) {
-      this.#run();
+    if (this.#dirty || this.#error !== NO_ERROR) {
+      if (this.#sourceRevisions.size === 0 || this.#needsRecompute()) {
+        unwatch(this);
+        this.#run();
+      } else {
+        this.#dirty = false;
+      }
+    }
+
+    if (context) {
+      context.sourceRevisions.set(this, this.#revision);
+    }
+
+    if (this.#error !== NO_ERROR) {
+      throw this.#error;
     }
 
     return this.#signal.get();
   }
 
+  peek() {
+    if (!this.#signal) {
+      this.#signal = createSignal(this.#run(), this.#options);
+    }
+
+    if (this.#dirty || this.#error !== NO_ERROR) {
+      if (this.#sourceRevisions.size === 0 || this.#needsRecompute()) {
+        unwatch(this);
+        this.#run();
+      } else {
+        this.#dirty = false;
+      }
+    }
+
+    if (this.#error !== NO_ERROR) {
+      throw this.#error;
+    }
+
+    return this.#signal.peek();
+  }
+
   #run() {
+    this.#running = true;
     this.#dirty = false;
+    this.#error = NO_ERROR;
 
     this.#clearContextDependencies();
-    this.#savePrevContext();
+    this.#context.sourceRevisions.clear();
+
+    const prevContext = context;
+    context = this.#context;
 
     let result;
     try {
       result = this.#callback();
     } catch (e) {
-      result = e;
+      this.#error = e;
     }
 
-    this.#restorePrevContext();
+    context = prevContext;
+    this.#sourceRevisions = this.#context.sourceRevisions;
+    this.#context.sourceRevisions = new Map();
+    this.#running = false;
 
-    // todo test it
     if (result instanceof Promise) {
       result = result
         .then((value) => {
-          return value;
+          this.#error = NO_ERROR;
+          this.#signal.set(value);
         })
         .catch((e) => {
-          throw e;
+          this.#error = e;
         });
     }
 
-    if (this.#signal) {
+    if (this.#error === NO_ERROR && this.#signal) {
       this.#signal.set(result);
     }
 
-    if (result instanceof Error) {
-      throw result;
-    }
+    this.#revision++;
 
     return result;
   }
+
+  destroy() {
+    this.#clearContextDependencies();
+    this.#sourceRevisions.clear();
+    this.#dirty = true;
+    this.#error = NO_ERROR;
+  }
 }
 
 function computed(callback, options) {
@@ -251,46 +372,71 @@ function effect(callback, options) {
   c.get();
 
   watch(c);
-  return () => {
+
+  const dispose = () => {
     destructor?.();
+    c.destroy();
     unwatch(c);
   };
+
+  dispose[Symbol.dispose] = dispose;
+
+  return dispose;
 }
 
 function createSignal(value, options = {}) {
   const equals = options?.equals ?? Object.is;
+  let revision = 0;
 
   const observable = new Observable();
   function get() {
-    if (typeof context === 'object' && context !== null) {
+    if (context) {
       context.dependencies.set(
         observable,
         observable.subscribe(context.observer),
       );
-    }
 
-    if (value instanceof Error) {
-      throw value;
+      context.sourceRevisions.set(signal, revision);
     }
 
     return value;
   }
 
-  // TODO implement batch updates
+  function peek() {
+    return value;
+  }
+
   function set(_value) {
     if (!equals(value, _value)) {
       value = _value;
+      revision++;
 
-      observable.next();
+      if (batchDepth > 0) {
+        batchQueue.add(observable);
+      } else {
+        observable.next();
+      }
     }
 
     return value;
   }
 
-  return { get, set, [INTERNAL_OBSERVABLE]: observable };
+  function getRevision() {
+    return revision;
+  }
+
+  const signal = {
+    get,
+    set,
+    peek,
+    getRevision,
+    [INTERNAL_OBSERVABLE]: observable,
+  };
+
+  return signal;
 }
 
 // alias
 const state = createSignal;
 
-export { computed, createSignal, createWatcher, effect, getPending, state, untrack, unwatch, watch };
+export { afterFlush, batch, computed, createSignal, createWatcher, effect, getPending, onFlush, state, untrack, unwatch, watch };