@zeix/cause-effect 0.17.1 → 0.17.3

package/index.dev.js

@@ -1,5 +1,122 @@
-// src/util.ts
+// src/system.ts
+var activeWatcher;
+var watchersMap = new WeakMap;
+var watchedCallbackMap = new WeakMap;
+var unwatchedCallbackMap = new WeakMap;
+var pendingReactions = new Set;
+var batchDepth = 0;
 var UNSET = Symbol();
+var createWatcher = (push, pull) => {
+  const cleanups = new Set;
+  const watcher = push;
+  watcher.run = () => {
+    const prev = activeWatcher;
+    activeWatcher = watcher;
+    try {
+      pull();
+    } finally {
+      activeWatcher = prev;
+    }
+  };
+  watcher.onCleanup = (cleanup) => {
+    cleanups.add(cleanup);
+  };
+  watcher.stop = () => {
+    try {
+      for (const cleanup of cleanups)
+        cleanup();
+    } finally {
+      cleanups.clear();
+    }
+  };
+  return watcher;
+};
+var untrack = (callback) => {
+  const prev = activeWatcher;
+  activeWatcher = undefined;
+  try {
+    callback();
+  } finally {
+    activeWatcher = prev;
+  }
+};
+var registerWatchCallbacks = (signal, watched, unwatched) => {
+  watchedCallbackMap.set(signal, watched);
+  if (unwatched)
+    unwatchedCallbackMap.set(signal, unwatched);
+};
+var subscribeTo = (signal) => {
+  if (!activeWatcher || watchersMap.get(signal)?.has(activeWatcher))
+    return false;
+  const watcher = activeWatcher;
+  if (!watchersMap.has(signal))
+    watchersMap.set(signal, new Set);
+  const watchers = watchersMap.get(signal);
+  assert(watchers);
+  if (!watchers.size) {
+    const watchedCallback = watchedCallbackMap.get(signal);
+    if (watchedCallback)
+      untrack(watchedCallback);
+  }
+  watchers.add(watcher);
+  watcher.onCleanup(() => {
+    watchers.delete(watcher);
+    if (!watchers.size) {
+      const unwatchedCallback = unwatchedCallbackMap.get(signal);
+      if (unwatchedCallback)
+        untrack(unwatchedCallback);
+    }
+  });
+  return true;
+};
+var unsubscribeAllFrom = (signal) => {
+  const watchers = watchersMap.get(signal);
+  if (!watchers)
+    return;
+  for (const watcher of watchers)
+    watcher.stop();
+  watchers.clear();
+};
+var notifyOf = (signal) => {
+  const watchers = watchersMap.get(signal);
+  if (!watchers?.size)
+    return false;
+  for (const react of watchers) {
+    if (batchDepth)
+      pendingReactions.add(react);
+    else
+      react();
+  }
+  return true;
+};
+var flush = () => {
+  while (pendingReactions.size) {
+    const watchers = Array.from(pendingReactions);
+    pendingReactions.clear();
+    for (const react of watchers)
+      react();
+  }
+};
+var batch = (callback) => {
+  batchDepth++;
+  try {
+    callback();
+  } finally {
+    flush();
+    batchDepth--;
+  }
+};
+var track = (watcher, run) => {
+  const prev = activeWatcher;
+  activeWatcher = watcher || undefined;
+  try {
+    run();
+  } finally {
+    activeWatcher = prev;
+  }
+};
+
+// src/util.ts
 var isString = (value) => typeof value === "string";
 var isNumber = (value) => typeof value === "number";
 var isSymbol = (value) => typeof value === "symbol";
@@ -101,128 +218,66 @@ var diff = (oldObj, newObj) => {
   };
 };
 
-// src/system.ts
-var activeWatcher;
-var pendingReactions = new Set;
-var batchDepth = 0;
-var createWatcher = (react) => {
-  const cleanups = new Set;
-  const watcher = react;
-  watcher.onCleanup = (cleanup) => {
-    cleanups.add(cleanup);
-  };
-  watcher.stop = () => {
-    for (const cleanup of cleanups)
-      cleanup();
-    cleanups.clear();
-  };
-  return watcher;
-};
-var subscribeActiveWatcher = (watchers) => {
-  if (activeWatcher && !watchers.has(activeWatcher)) {
-    const watcher = activeWatcher;
-    watcher.onCleanup(() => watchers.delete(watcher));
-    watchers.add(watcher);
-  }
-};
-var notifyWatchers = (watchers) => {
-  for (const react of watchers) {
-    if (batchDepth)
-      pendingReactions.add(react);
-    else
-      react();
-  }
-};
-var flushPendingReactions = () => {
-  while (pendingReactions.size) {
-    const watchers = Array.from(pendingReactions);
-    pendingReactions.clear();
-    for (const watcher of watchers)
-      watcher();
-  }
-};
-var batchSignalWrites = (callback) => {
-  batchDepth++;
-  try {
-    callback();
-  } finally {
-    flushPendingReactions();
-    batchDepth--;
-  }
-};
-var trackSignalReads = (watcher, run) => {
-  const prev = activeWatcher;
-  activeWatcher = watcher || undefined;
-  try {
-    run();
-  } finally {
-    activeWatcher = prev;
-  }
-};
-var emitNotification = (listeners, payload) => {
-  for (const listener of listeners) {
-    if (batchDepth)
-      pendingReactions.add(() => listener(payload));
-    else
-      listener(payload);
-  }
-};
-
 // src/classes/computed.ts
 var TYPE_COMPUTED = "Computed";
 
 class Memo {
-  #watchers = new Set;
   #callback;
   #value;
   #error;
   #dirty = true;
   #computing = false;
   #watcher;
-  constructor(callback, initialValue = UNSET) {
-    validateCallback("memo", callback, isMemoCallback);
-    validateSignalValue("memo", initialValue);
+  constructor(callback, options) {
+    validateCallback(this.constructor.name, callback, isMemoCallback);
+    const initialValue = options?.initialValue ?? UNSET;
+    validateSignalValue(this.constructor.name, initialValue, options?.guard);
     this.#callback = callback;
     this.#value = initialValue;
-    this.#watcher = createWatcher(() => {
+    if (options?.watched)
+      registerWatchCallbacks(this, options.watched, options.unwatched);
+  }
+  #getWatcher() {
+    this.#watcher ||= createWatcher(() => {
       this.#dirty = true;
-      if (this.#watchers.size)
-        notifyWatchers(this.#watchers);
-      else
-        this.#watcher.stop();
+      if (!notifyOf(this))
+        this.#watcher?.stop();
+    }, () => {
+      if (this.#computing)
+        throw new CircularDependencyError("memo");
+      let result;
+      this.#computing = true;
+      try {
+        result = this.#callback(this.#value);
+      } catch (e) {
+        this.#value = UNSET;
+        this.#error = createError(e);
+        this.#computing = false;
+        return;
+      }
+      if (result == null || UNSET === result) {
+        this.#value = UNSET;
+        this.#error = undefined;
+      } else {
+        this.#value = result;
+        this.#error = undefined;
+        this.#dirty = false;
+      }
+      this.#computing = false;
+    });
+    this.#watcher.onCleanup(() => {
+      this.#watcher = undefined;
     });
+    return this.#watcher;
   }
   get [Symbol.toStringTag]() {
     return TYPE_COMPUTED;
   }
   get() {
-    subscribeActiveWatcher(this.#watchers);
-    flushPendingReactions();
-    if (this.#dirty) {
-      trackSignalReads(this.#watcher, () => {
-        if (this.#computing)
-          throw new CircularDependencyError("memo");
-        let result;
-        this.#computing = true;
-        try {
-          result = this.#callback(this.#value);
-        } catch (e) {
-          this.#value = UNSET;
-          this.#error = createError(e);
-          this.#computing = false;
-          return;
-        }
-        if (result == null || UNSET === result) {
-          this.#value = UNSET;
-          this.#error = undefined;
-        } else {
-          this.#value = result;
-          this.#error = undefined;
-          this.#dirty = false;
-        }
-        this.#computing = false;
-      });
-    }
+    subscribeTo(this);
+    flush();
+    if (this.#dirty)
+      this.#getWatcher().run();
     if (this.#error)
       throw this.#error;
     return this.#value;
@@ -230,7 +285,6 @@ class Memo {
 }
 
 class Task {
-  #watchers = new Set;
   #callback;
   #value;
   #error;
@@ -239,245 +293,137 @@ class Task {
   #changed = false;
   #watcher;
   #controller;
-  constructor(callback, initialValue = UNSET) {
-    validateCallback("task", callback, isTaskCallback);
-    validateSignalValue("task", initialValue);
+  constructor(callback, options) {
+    validateCallback(this.constructor.name, callback, isTaskCallback);
+    const initialValue = options?.initialValue ?? UNSET;
+    validateSignalValue(this.constructor.name, initialValue, options?.guard);
     this.#callback = callback;
     this.#value = initialValue;
-    this.#watcher = createWatcher(() => {
-      this.#dirty = true;
-      this.#controller?.abort();
-      if (this.#watchers.size)
-        notifyWatchers(this.#watchers);
-      else
-        this.#watcher.stop();
-    });
-    this.#watcher.onCleanup(() => {
-      this.#controller?.abort();
-    });
-  }
-  get [Symbol.toStringTag]() {
-    return TYPE_COMPUTED;
-  }
-  get() {
-    subscribeActiveWatcher(this.#watchers);
-    flushPendingReactions();
-    const ok = (v) => {
-      if (!isEqual(v, this.#value)) {
-        this.#value = v;
-        this.#changed = true;
-      }
-      this.#error = undefined;
-      this.#dirty = false;
-    };
-    const nil = () => {
-      this.#changed = UNSET !== this.#value;
-      this.#value = UNSET;
-      this.#error = undefined;
-    };
-    const err = (e) => {
-      const newError = createError(e);
-      this.#changed = !this.#error || newError.name !== this.#error.name || newError.message !== this.#error.message;
-      this.#value = UNSET;
-      this.#error = newError;
-    };
-    const settle = (fn) => (arg) => {
-      this.#computing = false;
-      this.#controller = undefined;
-      fn(arg);
-      if (this.#changed)
-        notifyWatchers(this.#watchers);
-    };
-    const compute = () => trackSignalReads(this.#watcher, () => {
-      if (this.#computing)
-        throw new CircularDependencyError("task");
-      this.#changed = false;
-      if (this.#controller)
-        return this.#value;
-      this.#controller = new AbortController;
-      this.#controller.signal.addEventListener("abort", () => {
+    if (options?.watched)
+      registerWatchCallbacks(this, options.watched, options.unwatched);
+  }
+  #getWatcher() {
+    if (!this.#watcher) {
+      const ok = (v) => {
+        if (!isEqual(v, this.#value)) {
+          this.#value = v;
+          this.#changed = true;
+        }
+        this.#error = undefined;
+        this.#dirty = false;
+      };
+      const nil = () => {
+        this.#changed = UNSET !== this.#value;
+        this.#value = UNSET;
+        this.#error = undefined;
+      };
+      const err = (e) => {
+        const newError = createError(e);
+        this.#changed = !this.#error || newError.name !== this.#error.name || newError.message !== this.#error.message;
+        this.#value = UNSET;
+        this.#error = newError;
+      };
+      const settle = (fn) => (arg) => {
         this.#computing = false;
         this.#controller = undefined;
-        compute();
-      }, {
-        once: true
-      });
-      let result;
-      this.#computing = true;
-      try {
-        result = this.#callback(this.#value, this.#controller.signal);
-      } catch (e) {
-        if (isAbortError(e))
+        fn(arg);
+        if (this.#changed && !notifyOf(this))
+          this.#watcher?.stop();
+      };
+      this.#watcher = createWatcher(() => {
+        this.#dirty = true;
+        this.#controller?.abort();
+        if (!notifyOf(this))
+          this.#watcher?.stop();
+      }, () => {
+        if (this.#computing)
+          throw new CircularDependencyError("task");
+        this.#changed = false;
+        if (this.#controller)
+          return this.#value;
+        this.#controller = new AbortController;
+        this.#controller.signal.addEventListener("abort", () => {
+          this.#computing = false;
+          this.#controller = undefined;
+          this.#getWatcher().run();
+        }, {
+          once: true
+        });
+        let result;
+        this.#computing = true;
+        try {
+          result = this.#callback(this.#value, this.#controller.signal);
+        } catch (e) {
+          if (isAbortError(e))
+            nil();
+          else
+            err(e);
+          this.#computing = false;
+          return;
+        }
+        if (result instanceof Promise)
+          result.then(settle(ok), settle(err));
+        else if (result == null || UNSET === result)
           nil();
         else
-          err(e);
+          ok(result);
         this.#computing = false;
-        return;
-      }
-      if (result instanceof Promise)
-        result.then(settle(ok), settle(err));
-      else if (result == null || UNSET === result)
-        nil();
-      else
-        ok(result);
-      this.#computing = false;
-    });
+      });
+      this.#watcher.onCleanup(() => {
+        this.#controller?.abort();
+        this.#controller = undefined;
+        this.#watcher = undefined;
+      });
+    }
+    return this.#watcher;
+  }
+  get [Symbol.toStringTag]() {
+    return TYPE_COMPUTED;
+  }
+  get() {
+    subscribeTo(this);
+    flush();
     if (this.#dirty)
-      compute();
+      this.#getWatcher().run();
     if (this.#error)
       throw this.#error;
     return this.#value;
   }
 }
-var createComputed = (callback, initialValue = UNSET) => isAsyncFunction(callback) ? new Task(callback, initialValue) : new Memo(callback, initialValue);
+var createComputed = (callback, options) => isAsyncFunction(callback) ? new Task(callback, options) : new Memo(callback, options);
 var isComputed = (value) => isObjectOfType(value, TYPE_COMPUTED);
 var isMemoCallback = (value) => isSyncFunction(value) && value.length < 2;
 var isTaskCallback = (value) => isAsyncFunction(value) && value.length < 3;
 
-// src/classes/composite.ts
-class Composite {
-  signals = new Map;
-  #validate;
-  #create;
-  #watchers = new Map;
-  #listeners = {
-    add: new Set,
-    change: new Set,
-    remove: new Set
-  };
-  #batching = false;
-  constructor(values, validate, create) {
-    this.#validate = validate;
-    this.#create = create;
-    this.change({
-      add: values,
-      change: {},
-      remove: {},
-      changed: true
-    }, true);
-  }
-  #addWatcher(key) {
-    const watcher = createWatcher(() => {
-      trackSignalReads(watcher, () => {
-        this.signals.get(key)?.get();
-        if (!this.#batching)
-          emitNotification(this.#listeners.change, [key]);
-      });
-    });
-    this.#watchers.set(key, watcher);
-    watcher();
-  }
-  add(key, value) {
-    if (!this.#validate(key, value))
-      return false;
-    this.signals.set(key, this.#create(value));
-    if (this.#listeners.change.size)
-      this.#addWatcher(key);
-    if (!this.#batching)
-      emitNotification(this.#listeners.add, [key]);
-    return true;
-  }
-  remove(key) {
-    const ok = this.signals.delete(key);
-    if (!ok)
-      return false;
-    const watcher = this.#watchers.get(key);
-    if (watcher) {
-      watcher.stop();
-      this.#watchers.delete(key);
-    }
-    if (!this.#batching)
-      emitNotification(this.#listeners.remove, [key]);
-    return true;
-  }
-  change(changes, initialRun) {
-    this.#batching = true;
-    if (Object.keys(changes.add).length) {
-      for (const key in changes.add)
-        this.add(key, changes.add[key]);
-      const notify = () => emitNotification(this.#listeners.add, Object.keys(changes.add));
-      if (initialRun)
-        setTimeout(notify, 0);
-      else
-        notify();
-    }
-    if (Object.keys(changes.change).length) {
-      batchSignalWrites(() => {
-        for (const key in changes.change) {
-          const value = changes.change[key];
-          if (!this.#validate(key, value))
-            continue;
-          const signal = this.signals.get(key);
-          if (guardMutableSignal(`list item "${key}"`, value, signal))
-            signal.set(value);
-        }
-      });
-      emitNotification(this.#listeners.change, Object.keys(changes.change));
-    }
-    if (Object.keys(changes.remove).length) {
-      for (const key in changes.remove)
-        this.remove(key);
-      emitNotification(this.#listeners.remove, Object.keys(changes.remove));
-    }
-    this.#batching = false;
-    return changes.changed;
-  }
-  clear() {
-    const keys = Array.from(this.signals.keys());
-    this.signals.clear();
-    this.#watchers.clear();
-    emitNotification(this.#listeners.remove, keys);
-    return true;
-  }
-  on(type, listener) {
-    this.#listeners[type].add(listener);
-    if (type === "change" && !this.#watchers.size) {
-      this.#batching = true;
-      for (const key of this.signals.keys())
-        this.#addWatcher(key);
-      this.#batching = false;
-    }
-    return () => {
-      this.#listeners[type].delete(listener);
-      if (type === "change" && !this.#listeners.change.size) {
-        if (this.#watchers.size) {
-          for (const watcher of this.#watchers.values())
-            watcher.stop();
-          this.#watchers.clear();
-        }
-      }
-    };
-  }
-}
-
 // src/classes/state.ts
 var TYPE_STATE = "State";
 
 class State {
-  #watchers = new Set;
   #value;
-  constructor(initialValue) {
-    validateSignalValue("state", initialValue);
+  constructor(initialValue, options) {
+    validateSignalValue(TYPE_STATE, initialValue, options?.guard);
     this.#value = initialValue;
+    if (options?.watched)
+      registerWatchCallbacks(this, options.watched, options.unwatched);
   }
   get [Symbol.toStringTag]() {
     return TYPE_STATE;
   }
   get() {
-    subscribeActiveWatcher(this.#watchers);
+    subscribeTo(this);
     return this.#value;
   }
   set(newValue) {
-    validateSignalValue("state", newValue);
+    validateSignalValue(TYPE_STATE, newValue);
     if (isEqual(this.#value, newValue))
       return;
     this.#value = newValue;
-    notifyWatchers(this.#watchers);
+    notifyOf(this);
     if (UNSET === this.#value)
-      this.#watchers.clear();
+      unsubscribeAllFrom(this);
   }
   update(updater) {
-    validateCallback("state update", updater);
+    validateCallback(`${TYPE_STATE} update`, updater);
     this.set(updater(this.#value));
   }
 }
@@ -487,21 +433,27 @@ var isState = (value) => isObjectOfType(value, TYPE_STATE);
 var TYPE_LIST = "List";
 
 class List {
-  #composite;
-  #watchers = new Set;
-  #listeners = {
-    sort: new Set
-  };
-  #order = [];
+  #signals = new Map;
+  #keys = [];
   #generateKey;
-  constructor(initialValue, keyConfig) {
-    validateSignalValue("list", initialValue, Array.isArray);
+  #validate;
+  constructor(initialValue, options) {
+    validateSignalValue(TYPE_LIST, initialValue, Array.isArray);
     let keyCounter = 0;
+    const keyConfig = options?.keyConfig;
     this.#generateKey = isString(keyConfig) ? () => `${keyConfig}${keyCounter++}` : isFunction(keyConfig) ? (item) => keyConfig(item) : () => String(keyCounter++);
-    this.#composite = new Composite(this.#toRecord(initialValue), (key, value) => {
-      validateSignalValue(`list for key "${key}"`, value);
+    this.#validate = (key, value) => {
+      validateSignalValue(`${TYPE_LIST} item for key "${key}"`, value, options?.guard);
       return true;
-    }, (value) => new State(value));
+    };
+    this.#change({
+      add: this.#toRecord(initialValue),
+      change: {},
+      remove: {},
+      changed: true
+    });
+    if (options?.watched)
+      registerWatchCallbacks(this, options.watched, options.unwatched);
   }
   #toRecord(array) {
     const record = {};
@@ -509,17 +461,51 @@ class List {
       const value = array[i];
       if (value === undefined)
         continue;
-      let key = this.#order[i];
+      let key = this.#keys[i];
       if (!key) {
         key = this.#generateKey(value);
-        this.#order[i] = key;
+        this.#keys[i] = key;
       }
       record[key] = value;
     }
     return record;
   }
+  #add(key, value) {
+    if (!this.#validate(key, value))
+      return false;
+    this.#signals.set(key, new State(value));
+    return true;
+  }
+  #change(changes) {
+    if (Object.keys(changes.add).length) {
+      for (const key in changes.add)
+        this.#add(key, changes.add[key]);
+    }
+    if (Object.keys(changes.change).length) {
+      batch(() => {
+        for (const key in changes.change) {
+          const value = changes.change[key];
+          if (!this.#validate(key, value))
+            continue;
+          const signal = this.#signals.get(key);
+          if (guardMutableSignal(`${TYPE_LIST} item "${key}"`, value, signal))
+            signal.set(value);
+        }
+      });
+    }
+    if (Object.keys(changes.remove).length) {
+      for (const key in changes.remove) {
+        this.#signals.delete(key);
+        const index = this.#keys.indexOf(key);
+        if (index !== -1)
+          this.#keys.splice(index, 1);
+      }
+      this.#keys = this.#keys.filter(() => true);
+    }
+    return changes.changed;
+  }
   get #value() {
-    return this.#order.map((key) => this.#composite.signals.get(key)?.get()).filter((v) => v !== undefined);
+    return this.#keys.map((key) => this.#signals.get(key)?.get()).filter((v) => v !== undefined);
   }
   get [Symbol.toStringTag]() {
     return TYPE_LIST;
@@ -528,136 +514,117 @@ class List {
     return true;
   }
   *[Symbol.iterator]() {
-    for (const key of this.#order) {
-      const signal = this.#composite.signals.get(key);
+    for (const key of this.#keys) {
+      const signal = this.#signals.get(key);
       if (signal)
         yield signal;
     }
   }
   get length() {
-    subscribeActiveWatcher(this.#watchers);
-    return this.#order.length;
+    subscribeTo(this);
+    return this.#keys.length;
   }
   get() {
-    subscribeActiveWatcher(this.#watchers);
+    subscribeTo(this);
     return this.#value;
   }
   set(newValue) {
     if (UNSET === newValue) {
-      this.#composite.clear();
-      notifyWatchers(this.#watchers);
-      this.#watchers.clear();
+      this.#signals.clear();
+      notifyOf(this);
+      unsubscribeAllFrom(this);
       return;
     }
-    const oldValue = this.#value;
-    const changes = diff(this.#toRecord(oldValue), this.#toRecord(newValue));
-    const removedKeys = Object.keys(changes.remove);
-    const changed = this.#composite.change(changes);
-    if (changed) {
-      for (const key of removedKeys) {
-        const index = this.#order.indexOf(key);
-        if (index !== -1)
-          this.#order.splice(index, 1);
-      }
-      this.#order = this.#order.filter(() => true);
-      notifyWatchers(this.#watchers);
-    }
+    const changes = diff(this.#toRecord(this.#value), this.#toRecord(newValue));
+    if (this.#change(changes))
+      notifyOf(this);
   }
   update(fn) {
     this.set(fn(this.get()));
   }
   at(index) {
-    return this.#composite.signals.get(this.#order[index]);
+    return this.#signals.get(this.#keys[index]);
   }
   keys() {
-    return this.#order.values();
+    subscribeTo(this);
+    return this.#keys.values();
   }
   byKey(key) {
-    return this.#composite.signals.get(key);
+    return this.#signals.get(key);
   }
   keyAt(index) {
-    return this.#order[index];
+    return this.#keys[index];
   }
   indexOfKey(key) {
-    return this.#order.indexOf(key);
+    return this.#keys.indexOf(key);
   }
   add(value) {
     const key = this.#generateKey(value);
-    if (this.#composite.signals.has(key))
+    if (this.#signals.has(key))
       throw new DuplicateKeyError("store", key, value);
-    if (!this.#order.includes(key))
-      this.#order.push(key);
-    const ok = this.#composite.add(key, value);
+    if (!this.#keys.includes(key))
+      this.#keys.push(key);
+    const ok = this.#add(key, value);
     if (ok)
-      notifyWatchers(this.#watchers);
+      notifyOf(this);
     return key;
   }
   remove(keyOrIndex) {
-    const key = isNumber(keyOrIndex) ? this.#order[keyOrIndex] : keyOrIndex;
-    const ok = this.#composite.remove(key);
+    const key = isNumber(keyOrIndex) ? this.#keys[keyOrIndex] : keyOrIndex;
+    const ok = this.#signals.delete(key);
     if (ok) {
-      const index = isNumber(keyOrIndex) ? keyOrIndex : this.#order.indexOf(key);
+      const index = isNumber(keyOrIndex) ? keyOrIndex : this.#keys.indexOf(key);
       if (index >= 0)
-        this.#order.splice(index, 1);
-      this.#order = this.#order.filter(() => true);
-      notifyWatchers(this.#watchers);
+        this.#keys.splice(index, 1);
+      this.#keys = this.#keys.filter(() => true);
+      notifyOf(this);
     }
   }
   sort(compareFn) {
-    const entries = this.#order.map((key) => [key, this.#composite.signals.get(key)?.get()]).sort(isFunction(compareFn) ? (a, b) => compareFn(a[1], b[1]) : (a, b) => String(a[1]).localeCompare(String(b[1])));
+    const entries = this.#keys.map((key) => [key, this.#signals.get(key)?.get()]).sort(isFunction(compareFn) ? (a, b) => compareFn(a[1], b[1]) : (a, b) => String(a[1]).localeCompare(String(b[1])));
     const newOrder = entries.map(([key]) => key);
-    if (!isEqual(this.#order, newOrder)) {
-      this.#order = newOrder;
-      notifyWatchers(this.#watchers);
-      emitNotification(this.#listeners.sort, this.#order);
+    if (!isEqual(this.#keys, newOrder)) {
+      this.#keys = newOrder;
+      notifyOf(this);
     }
   }
   splice(start, deleteCount, ...items) {
-    const length = this.#order.length;
+    const length = this.#keys.length;
     const actualStart = start < 0 ? Math.max(0, length + start) : Math.min(start, length);
     const actualDeleteCount = Math.max(0, Math.min(deleteCount ?? Math.max(0, length - Math.max(0, actualStart)), length - actualStart));
     const add = {};
     const remove = {};
     for (let i = 0;i < actualDeleteCount; i++) {
       const index = actualStart + i;
-      const key = this.#order[index];
+      const key = this.#keys[index];
       if (key) {
-        const signal = this.#composite.signals.get(key);
+        const signal = this.#signals.get(key);
         if (signal)
           remove[key] = signal.get();
       }
     }
-    const newOrder = this.#order.slice(0, actualStart);
+    const newOrder = this.#keys.slice(0, actualStart);
     for (const item of items) {
       const key = this.#generateKey(item);
       newOrder.push(key);
       add[key] = item;
     }
-    newOrder.push(...this.#order.slice(actualStart + actualDeleteCount));
+    newOrder.push(...this.#keys.slice(actualStart + actualDeleteCount));
     const changed = !!(Object.keys(add).length || Object.keys(remove).length);
     if (changed) {
-      this.#composite.change({
+      this.#change({
         add,
         change: {},
         remove,
         changed
       });
-      this.#order = newOrder.filter(() => true);
-      notifyWatchers(this.#watchers);
+      this.#keys = newOrder.filter(() => true);
+      notifyOf(this);
     }
     return Object.values(remove);
   }
-  on(type, listener) {
-    if (type === "sort") {
-      this.#listeners.sort.add(listener);
-      return () => {
-        this.#listeners.sort.delete(listener);
-      };
-    }
-    return this.#composite.on(type, listener);
-  }
-  deriveCollection(callback) {
-    return new DerivedCollection(this, callback);
+  deriveCollection(callback, options) {
+    return new DerivedCollection(this, callback, options);
   }
 }
 var isList = (value) => isObjectOfType(value, TYPE_LIST);
@@ -666,21 +633,57 @@ var isList = (value) => isObjectOfType(value, TYPE_LIST);
 var TYPE_STORE = "Store";
 
 class BaseStore {
-  #composite;
-  #watchers = new Set;
-  constructor(initialValue) {
-    validateSignalValue("store", initialValue, isRecord);
-    this.#composite = new Composite(initialValue, (key, value) => {
-      validateSignalValue(`store for key "${key}"`, value);
-      return true;
-    }, (value) => createMutableSignal(value));
+  #signals = new Map;
+  constructor(initialValue, options) {
+    validateSignalValue(TYPE_STORE, initialValue, options?.guard ?? isRecord);
+    this.#change({
+      add: initialValue,
+      change: {},
+      remove: {},
+      changed: true
+    });
+    if (options?.watched)
+      registerWatchCallbacks(this, options.watched, options.unwatched);
   }
   get #value() {
     const record = {};
-    for (const [key, signal] of this.#composite.signals.entries())
+    for (const [key, signal] of this.#signals.entries())
       record[key] = signal.get();
     return record;
   }
+  #validate(key, value) {
+    validateSignalValue(`${TYPE_STORE} for key "${key}"`, value);
+    return true;
+  }
+  #add(key, value) {
+    if (!this.#validate(key, value))
+      return false;
+    this.#signals.set(key, createMutableSignal(value));
+    return true;
+  }
+  #change(changes) {
+    if (Object.keys(changes.add).length) {
+      for (const key in changes.add)
+        this.#add(key, changes.add[key]);
+    }
+    if (Object.keys(changes.change).length) {
+      batch(() => {
+        for (const key in changes.change) {
+          const value = changes.change[key];
+          if (!this.#validate(key, value))
+            continue;
+          const signal = this.#signals.get(key);
+          if (guardMutableSignal(`list item "${key}"`, value, signal))
+            signal.set(value);
+        }
+      });
+    }
+    if (Object.keys(changes.remove).length) {
+      for (const key in changes.remove)
+        this.remove(key);
+    }
+    return changes.changed;
+  }
   get [Symbol.toStringTag]() {
     return TYPE_STORE;
   }
@@ -688,53 +691,50 @@ class BaseStore {
     return false;
   }
   *[Symbol.iterator]() {
-    for (const [key, signal] of this.#composite.signals.entries())
+    for (const [key, signal] of this.#signals.entries())
       yield [key, signal];
   }
+  keys() {
+    subscribeTo(this);
+    return this.#signals.keys();
+  }
+  byKey(key) {
+    return this.#signals.get(key);
+  }
   get() {
-    subscribeActiveWatcher(this.#watchers);
+    subscribeTo(this);
     return this.#value;
   }
   set(newValue) {
     if (UNSET === newValue) {
-      this.#composite.clear();
-      notifyWatchers(this.#watchers);
-      this.#watchers.clear();
+      this.#signals.clear();
+      notifyOf(this);
+      unsubscribeAllFrom(this);
       return;
     }
-    const oldValue = this.#value;
-    const changed = this.#composite.change(diff(oldValue, newValue));
+    const changed = this.#change(diff(this.#value, newValue));
     if (changed)
-      notifyWatchers(this.#watchers);
-  }
-  keys() {
-    return this.#composite.signals.keys();
-  }
-  byKey(key) {
-    return this.#composite.signals.get(key);
+      notifyOf(this);
   }
   update(fn) {
     this.set(fn(this.get()));
   }
   add(key, value) {
-    if (this.#composite.signals.has(key))
-      throw new DuplicateKeyError("store", key, value);
-    const ok = this.#composite.add(key, value);
+    if (this.#signals.has(key))
+      throw new DuplicateKeyError(TYPE_STORE, key, value);
+    const ok = this.#add(key, value);
     if (ok)
-      notifyWatchers(this.#watchers);
+      notifyOf(this);
     return key;
   }
   remove(key) {
-    const ok = this.#composite.remove(key);
+    const ok = this.#signals.delete(key);
     if (ok)
-      notifyWatchers(this.#watchers);
-  }
-  on(type, listener) {
-    return this.#composite.on(type, listener);
+      notifyOf(this);
   }
 }
-var createStore = (initialValue) => {
-  const instance = new BaseStore(initialValue);
+var createStore = (initialValue, options) => {
+  const instance = new BaseStore(initialValue, options);
   return new Proxy(instance, {
     get(target, prop) {
       if (prop in target) {
@@ -806,6 +806,13 @@ class DuplicateKeyError extends Error {
   }
 }
 
+class FailedAssertionError extends Error {
+  constructor(message = "unexpected condition") {
+    super(`Assertion failed: ${message}`);
+    this.name = "FailedAssertionError";
+  }
+}
+
 class InvalidCallbackError extends TypeError {
   constructor(where, value) {
     super(`Invalid ${where} callback ${valueString(value)}`);
@@ -840,6 +847,10 @@ class ReadonlySignalError extends Error {
     this.name = "ReadonlySignalError";
   }
 }
+function assert(condition, msg) {
+  if (!condition)
+    throw new FailedAssertionError(msg);
+}
 var createError = (reason) => reason instanceof Error ? reason : Error(String(reason));
 var validateCallback = (where, value, guard = isFunction) => {
   if (!guard(value))
@@ -861,24 +872,18 @@ var guardMutableSignal = (what, value, signal) => {
 var TYPE_COLLECTION = "Collection";
 
 class DerivedCollection {
-  #watchers = new Set;
   #source;
   #callback;
   #signals = new Map;
-  #ownWatchers = new Map;
-  #listeners = {
-    add: new Set,
-    change: new Set,
-    remove: new Set,
-    sort: new Set
-  };
-  #order = [];
-  constructor(source, callback) {
-    validateCallback("collection", callback);
+  #keys = [];
+  #dirty = true;
+  #watcher;
+  constructor(source, callback, options) {
+    validateCallback(TYPE_COLLECTION, callback);
     if (isFunction(source))
       source = source();
     if (!isCollectionSource(source))
-      throw new InvalidCollectionSourceError("derived collection", source);
+      throw new InvalidCollectionSourceError(TYPE_COLLECTION, source);
     this.#source = source;
     this.#callback = callback;
     for (let i = 0;i < this.#source.length; i++) {
@@ -887,77 +892,57 @@ class DerivedCollection {
         continue;
       this.#add(key);
     }
-    this.#source.on("add", (additions) => {
-      for (const key of additions) {
-        if (!this.#signals.has(key)) {
-          this.#add(key);
-          const signal = this.#signals.get(key);
-          if (signal && isAsyncCollectionCallback(this.#callback))
-            signal.get();
-        }
+    if (options?.watched)
+      registerWatchCallbacks(this, options.watched, options.unwatched);
+  }
+  #getWatcher() {
+    this.#watcher ||= createWatcher(() => {
+      this.#dirty = true;
+      if (!notifyOf(this))
+        this.#watcher?.stop();
+    }, () => {
+      const newKeys = Array.from(this.#source.keys());
+      const allKeys = new Set([...this.#keys, ...newKeys]);
+      const addedKeys = [];
+      const removedKeys = [];
+      for (const key of allKeys) {
+        const oldHas = this.#keys.includes(key);
+        const newHas = newKeys.includes(key);
+        if (!oldHas && newHas)
+          addedKeys.push(key);
+        else if (oldHas && !newHas)
+          removedKeys.push(key);
       }
-      notifyWatchers(this.#watchers);
-      emitNotification(this.#listeners.add, additions);
-    });
-    this.#source.on("remove", (removals) => {
-      for (const key of removals) {
-        if (!this.#signals.has(key))
-          continue;
+      for (const key of removedKeys)
         this.#signals.delete(key);
-        const index = this.#order.indexOf(key);
-        if (index >= 0)
-          this.#order.splice(index, 1);
-        const watcher = this.#ownWatchers.get(key);
-        if (watcher) {
-          watcher.stop();
-          this.#ownWatchers.delete(key);
-        }
-      }
-      this.#order = this.#order.filter(() => true);
-      notifyWatchers(this.#watchers);
-      emitNotification(this.#listeners.remove, removals);
+      for (const key of addedKeys)
+        this.#add(key);
+      this.#keys = newKeys;
+      this.#dirty = false;
     });
-    this.#source.on("sort", (newOrder) => {
-      this.#order = [...newOrder];
-      notifyWatchers(this.#watchers);
-      emitNotification(this.#listeners.sort, newOrder);
+    this.#watcher.onCleanup(() => {
+      this.#watcher = undefined;
     });
+    return this.#watcher;
   }
   #add(key) {
     const computedCallback = isAsyncCollectionCallback(this.#callback) ? async (_, abort) => {
-      const sourceSignal = this.#source.byKey(key);
-      if (!sourceSignal)
-        return UNSET;
-      const sourceValue = sourceSignal.get();
+      const sourceValue = this.#source.byKey(key)?.get();
       if (sourceValue === UNSET)
         return UNSET;
       return this.#callback(sourceValue, abort);
     } : () => {
-      const sourceSignal = this.#source.byKey(key);
-      if (!sourceSignal)
-        return UNSET;
-      const sourceValue = sourceSignal.get();
+      const sourceValue = this.#source.byKey(key)?.get();
       if (sourceValue === UNSET)
         return UNSET;
       return this.#callback(sourceValue);
     };
     const signal = createComputed(computedCallback);
     this.#signals.set(key, signal);
-    if (!this.#order.includes(key))
-      this.#order.push(key);
-    if (this.#listeners.change.size)
-      this.#addWatcher(key);
+    if (!this.#keys.includes(key))
+      this.#keys.push(key);
     return true;
   }
-  #addWatcher(key) {
-    const watcher = createWatcher(() => {
-      trackSignalReads(watcher, () => {
-        this.#signals.get(key)?.get();
-      });
-    });
-    this.#ownWatchers.set(key, watcher);
-    watcher();
-  }
   get [Symbol.toStringTag]() {
     return TYPE_COLLECTION;
   }
@@ -965,54 +950,44 @@ class DerivedCollection {
     return true;
   }
   *[Symbol.iterator]() {
-    for (const key of this.#order) {
+    for (const key of this.#keys) {
       const signal = this.#signals.get(key);
       if (signal)
         yield signal;
     }
   }
-  get length() {
-    subscribeActiveWatcher(this.#watchers);
-    return this.#order.length;
+  keys() {
+    subscribeTo(this);
+    if (this.#dirty)
+      this.#getWatcher().run();
+    return this.#keys.values();
   }
   get() {
-    subscribeActiveWatcher(this.#watchers);
-    return this.#order.map((key) => this.#signals.get(key)?.get()).filter((v) => v != null && v !== UNSET);
+    subscribeTo(this);
+    if (this.#dirty)
+      this.#getWatcher().run();
+    return this.#keys.map((key) => this.#signals.get(key)?.get()).filter((v) => v != null && v !== UNSET);
   }
   at(index) {
-    return this.#signals.get(this.#order[index]);
-  }
-  keys() {
-    return this.#order.values();
+    return this.#signals.get(this.#keys[index]);
   }
   byKey(key) {
     return this.#signals.get(key);
   }
   keyAt(index) {
-    return this.#order[index];
+    return this.#keys[index];
   }
   indexOfKey(key) {
-    return this.#order.indexOf(key);
+    return this.#keys.indexOf(key);
   }
-  on(type, listener) {
-    this.#listeners[type].add(listener);
-    if (type === "change" && !this.#ownWatchers.size) {
-      for (const key of this.#signals.keys())
-        this.#addWatcher(key);
-    }
-    return () => {
-      this.#listeners[type].delete(listener);
-      if (type === "change" && !this.#listeners.change.size) {
-        if (this.#ownWatchers.size) {
-          for (const watcher of this.#ownWatchers.values())
-            watcher.stop();
-          this.#ownWatchers.clear();
-        }
-      }
-    };
+  deriveCollection(callback, options) {
+    return new DerivedCollection(this, callback, options);
   }
-  deriveCollection(callback) {
-    return new DerivedCollection(this, callback);
+  get length() {
+    subscribeTo(this);
+    if (this.#dirty)
+      this.#getWatcher().run();
+    return this.#keys.length;
   }
 }
 var isCollection = (value) => isObjectOfType(value, TYPE_COLLECTION);
@@ -1022,21 +997,22 @@ var isAsyncCollectionCallback = (callback) => isAsyncFunction(callback);
 var TYPE_REF = "Ref";
 
 class Ref {
-  #watchers = new Set;
   #value;
-  constructor(value, guard) {
-    validateSignalValue("ref", value, guard);
+  constructor(value, options) {
+    validateSignalValue(TYPE_REF, value, options?.guard);
     this.#value = value;
+    if (options?.watched)
+      registerWatchCallbacks(this, options.watched, options.unwatched);
   }
   get [Symbol.toStringTag]() {
     return TYPE_REF;
   }
   get() {
-    subscribeActiveWatcher(this.#watchers);
+    subscribeTo(this);
     return this.#value;
   }
   notify() {
-    notifyWatchers(this.#watchers);
+    notifyOf(this);
   }
 }
 var isRef = (value) => isObjectOfType(value, TYPE_REF);
@@ -1047,7 +1023,9 @@ var createEffect = (callback) => {
   const isAsync = isAsyncFunction(callback);
   let running = false;
   let controller;
-  const watcher = createWatcher(() => trackSignalReads(watcher, () => {
+  const watcher = createWatcher(() => {
+    watcher.run();
+  }, () => {
     if (running)
       throw new CircularDependencyError("effect");
     running = true;
@@ -1063,7 +1041,7 @@ var createEffect = (callback) => {
             watcher.onCleanup(cleanup2);
         }).catch((error) => {
           if (!isAbortError(error))
-            console.error("Async effect error:", error);
+            console.error("Error in async effect callback:", error);
         });
       } else {
         cleanup = callback();
@@ -1072,14 +1050,18 @@ var createEffect = (callback) => {
       }
     } catch (error) {
       if (!isAbortError(error))
-        console.error("Effect callback error:", error);
+        console.error("Error in effect callback:", error);
     }
     running = false;
-  }));
+  });
   watcher();
   return () => {
     controller?.abort();
-    watcher.stop();
+    try {
+      watcher.stop();
+    } catch (error) {
+      console.error("Error in effect cleanup:", error);
+    }
   };
 };
 // src/match.ts
@@ -1125,10 +1107,11 @@ export {
   valueString,
   validateSignalValue,
   validateCallback,
-  trackSignalReads,
-  subscribeActiveWatcher,
+  untrack,
+  track,
+  subscribeTo,
   resolve,
-  notifyWatchers,
+  notifyOf,
   match,
   isTaskCallback,
   isSymbol,
@@ -1151,8 +1134,7 @@ export {
   isAsyncFunction,
   isAbortError,
   guardMutableSignal,
-  flushPendingReactions,
-  emitNotification,
+  flush,
   diff,
   createWatcher,
   createStore,
@@ -1160,7 +1142,7 @@ export {
   createError,
   createEffect,
   createComputed,
-  batchSignalWrites,
+  batch,
   UNSET,
   Task,
   TYPE_STORE,