opshot 0.3.1 → 0.3.3

package/README.md

@@ -122,9 +122,10 @@ It can't track:
 
 - Internal slots (language level features like in Map)
 - #private fields (hidden at the language level)
-- Arrow methods on classes (they write to the original object, not the tracked one)
 - Array subclasses (the prototype is lost when copied)
 
+And `this` for arrow methods on classes refers to the original and **not** the tracked state.
+
 Use `ignore` or `unsafeTrack` when dealing with these.
 
 ## Tracked collections

package/dist/index.js

@@ -337,65 +337,6 @@ function unstable_replaceInternalFunction(name, fn) {
   }
 }
 
-// src/react/wrapperRegistry.ts
-var wrapperTargets = /* @__PURE__ */ new WeakMap();
-var registerWrapperTarget = (wrapper, target) => {
-  wrapperTargets.set(wrapper, target);
-};
-var getRegisteredWrapperTarget = (wrapper) => wrapperTargets.get(wrapper);
-
-// src/identity.ts
-var isObjectLike = (value) => value !== null && (typeof value === "object" || typeof value === "function");
-var targetRegistry = /* @__PURE__ */ new WeakMap();
-var identityTokenRegistry = /* @__PURE__ */ new WeakMap();
-var { proxyStateMap: proxyStateMap2 } = unstable_getInternalStates();
-function registerSnapshotCopy(copy, target) {
-  targetRegistry.set(copy, target);
-}
-function getRegisteredTarget(copy) {
-  return targetRegistry.get(copy);
-}
-function peelIdentityLayer(current) {
-  const untracked = getUntracked(current);
-  if (untracked !== null && untracked !== current) return untracked;
-  const wrapperTarget = getRegisteredWrapperTarget(current);
-  if (wrapperTarget !== void 0 && wrapperTarget !== current) return wrapperTarget;
-  const registeredTarget = targetRegistry.get(current);
-  if (registeredTarget !== void 0 && registeredTarget !== current) return registeredTarget;
-  return void 0;
-}
-function resolveIdentity(value) {
-  let current = value;
-  while (isObjectLike(current)) {
-    const peeled = peelIdentityLayer(current);
-    if (peeled !== void 0) {
-      current = peeled;
-      continue;
-    }
-    const proxyState = proxyStateMap2.get(current);
-    if (proxyState !== void 0 && proxyState[0] !== current) {
-      current = proxyState[0];
-      continue;
-    }
-    break;
-  }
-  return current;
-}
-function identify(value) {
-  const target = resolveIdentity(value);
-  if (!isObjectLike(target)) return value;
-  const existing = identityTokenRegistry.get(target);
-  if (existing !== void 0) return existing;
-  const token = Object.freeze({});
-  identityTokenRegistry.set(target, token);
-  return token;
-}
-function isSameIdentity(first, second) {
-  const resolvedFirst = resolveIdentity(first);
-  const resolvedSecond = resolveIdentity(second);
-  return resolvedFirst === resolvedSecond || resolvedFirst !== resolvedFirst && resolvedSecond !== resolvedSecond;
-}
-
 // src/unsafeTrack.ts
 var unsafeTrackedSet = /* @__PURE__ */ new WeakSet();
 function unsafeTrack(value) {
@@ -512,6 +453,65 @@ var cloneValue = (value, memo2, path) => {
   return clone;
 };
 
+// src/react/wrapperRegistry.ts
+var wrapperTargets = /* @__PURE__ */ new WeakMap();
+var registerWrapperTarget = (wrapper, target) => {
+  wrapperTargets.set(wrapper, target);
+};
+var getRegisteredWrapperTarget = (wrapper) => wrapperTargets.get(wrapper);
+
+// src/identity.ts
+var isObjectLike = (value) => value !== null && (typeof value === "object" || typeof value === "function");
+var targetRegistry = /* @__PURE__ */ new WeakMap();
+var identityTokenRegistry = /* @__PURE__ */ new WeakMap();
+var { proxyStateMap: proxyStateMap2 } = unstable_getInternalStates();
+function registerSnapshotCopy(copy, target) {
+  targetRegistry.set(copy, target);
+}
+function getRegisteredTarget(copy) {
+  return targetRegistry.get(copy);
+}
+function peelIdentityLayer(current) {
+  const untracked = getUntracked(current);
+  if (untracked !== null && untracked !== current) return untracked;
+  const wrapperTarget = getRegisteredWrapperTarget(current);
+  if (wrapperTarget !== void 0 && wrapperTarget !== current) return wrapperTarget;
+  const registeredTarget = targetRegistry.get(current);
+  if (registeredTarget !== void 0 && registeredTarget !== current) return registeredTarget;
+  return void 0;
+}
+function resolveIdentity(value) {
+  let current = value;
+  while (isObjectLike(current)) {
+    const peeled = peelIdentityLayer(current);
+    if (peeled !== void 0) {
+      current = peeled;
+      continue;
+    }
+    const proxyState = proxyStateMap2.get(current);
+    if (proxyState !== void 0 && proxyState[0] !== current) {
+      current = proxyState[0];
+      continue;
+    }
+    break;
+  }
+  return current;
+}
+function identify(value) {
+  const target = resolveIdentity(value);
+  if (!isObjectLike(target)) return value;
+  const existing = identityTokenRegistry.get(target);
+  if (existing !== void 0) return existing;
+  const token = Object.freeze({});
+  identityTokenRegistry.set(target, token);
+  return token;
+}
+function isSameIdentity(first, second) {
+  const resolvedFirst = resolveIdentity(first);
+  const resolvedSecond = resolveIdentity(second);
+  return resolvedFirst === resolvedSecond || resolvedFirst !== resolvedFirst && resolvedSecond !== resolvedSecond;
+}
+
 // src/ops/operation.ts
 var operationBrand = /* @__PURE__ */ Symbol.for("opshot.operation");
 var valueOriginals = /* @__PURE__ */ new WeakMap();
@@ -773,17 +773,17 @@ function diffSnapshots(before, after) {
   return ops;
 }
 
-// src/emitter.ts
-var emitters = /* @__PURE__ */ new WeakMap();
+// src/emit/emitterDeliver.ts
+var deliver = (record, ops, meta) => {
+  const groupDelivers = [...record.groupListeners?.values() ?? []].flatMap((byChannel) => [...byChannel.values()]);
+  for (const deliverToListener of groupDelivers) deliverToListener(record.target, ops, meta);
+  const ownDelivers = [...record.listeners.values()].flatMap((byChannel) => [...byChannel.values()]);
+  for (const deliverToListener of ownDelivers) deliverToListener(ops, meta);
+};
+
+// src/emit/resolveEmitterTarget.ts
 var { proxyStateMap: proxyStateMap3 } = unstable_getInternalStates();
 var isObjectLike3 = (value) => value !== null && (typeof value === "object" || typeof value === "function");
-var augmentBareCycleError = (error) => {
-  const path = getCyclicPath(error);
-  if (path === void 0) return void 0;
-  return new Error(
-    `opshot: a bare write created a cyclic value at ${formatOperationPath(path)}. Cycles cannot be tracked. This surfaced asynchronously because the write was not inside transact. Use transact for catchable cycle errors, ignore() for back-linked structures, or ids.`
-  );
-};
 function resolveEmitterTarget(state) {
   let current = state;
   while (isObjectLike3(current)) {
@@ -795,10 +795,43 @@ function resolveEmitterTarget(state) {
   if (!isObjectLike3(current) || !proxyStateMap3.has(current)) throw new Error("opshot: expected a state object");
   return current;
 }
+
+// src/emit/emitterRegistry.ts
+var emitters = /* @__PURE__ */ new WeakMap();
 function getEmitter(state) {
   return emitters.get(resolveEmitterTarget(state));
 }
 var hasListeners = (record) => record.listeners.size > 0 || (record.groupListeners?.size ?? 0) > 0;
+function getOrCreateEmitter(target, groupListeners) {
+  const resolved = resolveEmitterTarget(target);
+  const existing = emitters.get(resolved);
+  if (existing !== void 0) return existing;
+  const record = {
+    listeners: /* @__PURE__ */ new Map(),
+    groupListeners,
+    lastReported: snapshot(resolved),
+    isMutating: false,
+    target: resolved
+  };
+  emitters.set(resolved, record);
+  return record;
+}
+function deleteEmitter(target) {
+  emitters.delete(target);
+}
+
+// src/emit/emitterBare.ts
+var augmentBareCycleError = (error) => {
+  const path = getCyclicPath(error);
+  if (path === void 0) return void 0;
+  return new Error(
+    `opshot: a bare write created a cyclic value at ${formatOperationPath(path)}. Cycles cannot be tracked. This surfaced asynchronously because the write was not inside transact. Use transact for catchable cycle errors, ignore() for back-linked structures, or ids.`
+  );
+};
+var requireObjectSnapshot = (value) => {
+  if (value !== null && (typeof value === "object" || typeof value === "function")) return value;
+  throw new Error("opshot: state snapshots must have an object root");
+};
 var armWatchdog = (record) => {
   if (record.disarm !== void 0) return;
   record.lastReported = snapshot(record.target);
@@ -810,14 +843,6 @@ var disarmWatchdog = (record) => {
   record.disarm?.();
   record.disarm = void 0;
 };
-var deliver = (record, ops, meta) => {
-  for (const listener of [...record.groupListeners ?? []]) listener(record.target, ops, meta);
-  for (const listener of [...record.listeners]) listener(ops, meta);
-};
-var requireObjectSnapshot = (value) => {
-  if (value !== null && (typeof value === "object" || typeof value === "function")) return value;
-  throw new Error("opshot: state snapshots must have an object root");
-};
 var reportBareDiff = (record) => {
   const current = snapshot(record.target);
   if (current === record.lastReported) return;
@@ -835,53 +860,15 @@ var reportBareDiff = (record) => {
 var settlePendingBare = (record) => {
   reportBareDiff(record);
 };
-function getOrCreateEmitter(target, groupListeners) {
-  const resolved = resolveEmitterTarget(target);
-  const existing = emitters.get(resolved);
-  if (existing !== void 0) return existing;
-  const record = {
-    listeners: /* @__PURE__ */ new Set(),
-    groupListeners,
-    lastReported: snapshot(resolved),
-    isMutating: false,
-    target: resolved
-  };
-  emitters.set(resolved, record);
-  return record;
-}
-function mintGroupedEmitter(target, groupListeners) {
-  const record = getOrCreateEmitter(target, groupListeners);
-  armWatchdog(record);
-  return record;
-}
 function emitBareFlush(target) {
   const record = getEmitter(target);
   if (record === void 0) return;
   reportBareDiff(record);
 }
-function addStateListener(state, listener) {
-  const target = resolveEmitterTarget(state);
-  let record = emitters.get(target);
-  if (record === void 0) {
-    record = getOrCreateEmitter(target);
-    armWatchdog(record);
-  } else if (record.disarm === void 0 && record.groupListeners === void 0) {
-    armWatchdog(record);
-  }
-  record.listeners.add(listener);
-  return () => {
-    if (!record.listeners.delete(listener)) return;
-    if (record.groupListeners === void 0 && record.listeners.size === 0) {
-      disarmWatchdog(record);
-      emitters.delete(target);
-    }
-  };
-}
-function addGroupListener(groupListeners, listener) {
-  groupListeners.add(listener);
-  return () => {
-    groupListeners.delete(listener);
-  };
+function mintGroupedEmitter(target, groupListeners) {
+  const record = getOrCreateEmitter(target, groupListeners);
+  armWatchdog(record);
+  return record;
 }
 
 // src/utils/constructorName.ts
@@ -1231,7 +1218,7 @@ function getGroupListeners(group) {
   return listeners;
 }
 function createGroup() {
-  const listeners = /* @__PURE__ */ new Set();
+  const listeners = /* @__PURE__ */ new Map();
   const group = {
     createMutableState(properties) {
       return createMutableState(properties, group);
@@ -1241,6 +1228,46 @@ function createGroup() {
   return group;
 }
 
+// src/emit/emitterListeners.ts
+function addStateListener(state, listener, channelId, deliver2) {
+  const target = resolveEmitterTarget(state);
+  const record = getOrCreateEmitter(target);
+  if (record.disarm === void 0 && record.groupListeners === void 0) {
+    armWatchdog(record);
+  }
+  let byChannel = record.listeners.get(listener);
+  if (byChannel === void 0) {
+    byChannel = /* @__PURE__ */ new Map();
+    record.listeners.set(listener, byChannel);
+  }
+  byChannel.set(channelId, deliver2);
+  return () => {
+    const channels = record.listeners.get(listener);
+    if (channels?.has(channelId) !== true) return;
+    settlePendingBare(record);
+    channels.delete(channelId);
+    if (channels.size === 0) record.listeners.delete(listener);
+    if (record.groupListeners === void 0 && record.listeners.size === 0) {
+      disarmWatchdog(record);
+      deleteEmitter(target);
+    }
+  };
+}
+function addGroupListener(groupListeners, listener, channelId, deliver2) {
+  let byChannel = groupListeners.get(listener);
+  if (byChannel === void 0) {
+    byChannel = /* @__PURE__ */ new Map();
+    groupListeners.set(listener, byChannel);
+  }
+  byChannel.set(channelId, deliver2);
+  return () => {
+    const channels = groupListeners.get(listener);
+    if (channels?.has(channelId) !== true) return;
+    channels.delete(channelId);
+    if (channels.size === 0) groupListeners.delete(listener);
+  };
+}
+
 // src/transact.ts
 function transact(state, mutate, meta) {
   const record = getEmitter(state);
@@ -1440,11 +1467,11 @@ function applyOps(state, operations, meta) {
 // src/subscribe.ts
 function subscribe2(target, listener) {
   if (isGroup(target)) {
-    return addGroupListener(getGroupListeners(target), (state, ops, meta) => {
+    return addGroupListener(getGroupListeners(target), listener, void 0, (state, ops, meta) => {
       listener(state, ops, unwrapTransportMeta(meta));
     });
   }
-  return addStateListener(target, (ops, meta) => {
+  return addStateListener(target, listener, void 0, (ops, meta) => {
     listener(ops, unwrapTransportMeta(meta));
   });
 }
@@ -1477,7 +1504,7 @@ function createChannel(defaults) {
   }
   function subscribe3(target, listener) {
     if (isGroup(target)) {
-      return addGroupListener(getGroupListeners(target), (state, ops, meta) => {
+      return addGroupListener(getGroupListeners(target), listener, channelId, (state, ops, meta) => {
         listener(
           state,
           ops,
@@ -1485,7 +1512,7 @@ function createChannel(defaults) {
         );
       });
     }
-    return addStateListener(target, (ops, meta) => {
+    return addStateListener(target, listener, channelId, (ops, meta) => {
       listener(
         ops,
         toChannelContext(channelId, defaults, meta)
@@ -1986,6 +2013,7 @@ var bindMethodToWrapper = (wrapper, method) => {
 function createBoundary() {
   const partitions = /* @__PURE__ */ new Map();
   const targets = /* @__PURE__ */ new Map();
+  let afterRender = false;
   const getPartition = (sourceProxy) => {
     let partition = partitions.get(sourceProxy);
     if (partition === void 0) {
@@ -2000,7 +2028,9 @@ function createBoundary() {
     }
     return partition;
   };
+  const trackUsage = (partition, liveProxy) => afterRender ? {} : getUsage(partition.affected, liveProxy);
   const ensureBaseline = (partition, liveProxy) => {
+    if (afterRender) return snapshot(liveProxy);
     const existing = partition.baselines.get(liveProxy);
     if (existing !== void 0) return existing;
     const baseline = snapshot(liveProxy);
@@ -2008,6 +2038,7 @@ function createBoundary() {
     return baseline;
   };
   const ensureRootBaseline = (partition) => {
+    if (afterRender) return partition.previousRootSnapshot ?? snapshot(partition.sourceProxy);
     if (partition.previousRootSnapshot === void 0) {
       partition.previousRootSnapshot = snapshot(partition.sourceProxy);
       partition.baselines.set(partition.sourceProxy, partition.previousRootSnapshot);
@@ -2032,7 +2063,7 @@ function createBoundary() {
         ensureRootBaseline(partition);
         const value = Reflect.get(liveProxy, prop, liveProxy);
         const wrapper2 = wrapperBox.current;
-        const used = getUsage(partition.affected, liveProxy);
+        const used = trackUsage(partition, liveProxy);
         recordKey(used, KEYS_PROPERTY2, prop);
         ensureBaseline(partition, liveProxy);
         if (typeof value === "function") {
@@ -2048,19 +2079,19 @@ function createBoundary() {
         return wrapLive(value, partition);
       },
       has(_target, prop) {
-        const used = getUsage(partition.affected, liveProxy);
+        const used = trackUsage(partition, liveProxy);
         recordKey(used, HAS_KEY_PROPERTY2, prop);
         ensureBaseline(partition, liveProxy);
         return Reflect.has(liveProxy, prop);
       },
       getOwnPropertyDescriptor(_target, prop) {
-        const used = getUsage(partition.affected, liveProxy);
+        const used = trackUsage(partition, liveProxy);
         recordKey(used, HAS_OWN_KEY_PROPERTY2, prop);
         ensureBaseline(partition, liveProxy);
         return Reflect.getOwnPropertyDescriptor(liveProxy, prop);
       },
       ownKeys() {
-        const used = getUsage(partition.affected, liveProxy);
+        const used = trackUsage(partition, liveProxy);
         used[ALL_OWN_KEYS_PROPERTY2] = true;
         ensureBaseline(partition, liveProxy);
         return Reflect.ownKeys(liveProxy);
@@ -2104,6 +2135,9 @@ function createBoundary() {
       const nextRoot = snapshot(sourceProxy);
       return isChanged(partition.previousRootSnapshot, nextRoot, translated, /* @__PURE__ */ new WeakMap());
     },
+    captureReads() {
+      afterRender = true;
+    },
     evictChangedTargets() {
       for (const [liveProxy, entry] of targets) {
         const current = snapshot(liveProxy);
@@ -2116,11 +2150,21 @@ function createBoundary() {
       }
     },
     resetReads() {
+      afterRender = false;
       for (const partition of partitions.values()) {
         partition.previousRootSnapshot = void 0;
         partition.affected.clear();
         partition.baselines.clear();
       }
+    },
+    advanceBaselines() {
+      for (const partition of partitions.values()) {
+        for (const liveProxy of [...partition.baselines.keys()]) {
+          partition.baselines.set(liveProxy, snapshot(liveProxy));
+        }
+        partition.previousRootSnapshot = snapshot(partition.sourceProxy);
+        partition.baselines.set(partition.sourceProxy, partition.previousRootSnapshot);
+      }
     }
   };
 }
@@ -2207,6 +2251,22 @@ function setAtPath(object, path, value) {
   return clone;
 }
 var sourcesKey = (sources) => `${sources.length}:${sources.map((source) => addressOf(source)).join(",")}`;
+var arePropsEqual = (previous, next) => {
+  const previousRecord = previous;
+  const nextRecord = next;
+  const keys = Object.keys(previousRecord);
+  if (keys.length !== Object.keys(nextRecord).length) return false;
+  for (const key of keys) {
+    const before = previousRecord[key];
+    const after = nextRecord[key];
+    if (Object.is(before, after)) continue;
+    if (typeof before === "object" && before !== null && typeof after === "object" && after !== null && isState(before) && isState(after) && isSameIdentity(before, after)) {
+      continue;
+    }
+    return false;
+  }
+  return true;
+};
 function scope(Component, options) {
   const maxDepth = options?.maxDepth ?? 10;
   const Scoped = (props) => {
@@ -2233,6 +2293,9 @@ function scope(Component, options) {
     }
     const renderedProps = changed ? nextProps : props;
     const versionsAtRender = sources.map((source) => getVersion(source));
+    useEffect(() => {
+      boundary.captureReads();
+    });
     useEffect(() => {
       const unsubscribes = sources.map(
         (source) => subscribe(
@@ -2240,6 +2303,7 @@ function scope(Component, options) {
           () => {
             boundary.evictChangedTargets();
             if (boundary.readsChanged(source)) bump();
+            else boundary.advanceBaselines();
           },
           true
         )
@@ -2265,7 +2329,7 @@ function scope(Component, options) {
   };
   const baseName = Component.displayName ?? Component.name;
   Scoped.displayName = `scope(${typeof baseName === "string" && baseName !== "" ? baseName : "Component"})`;
-  return memo(Scoped);
+  return memo(Scoped, arePropsEqual);
 }
 function useGroup() {
   return useState(() => createGroup())[0];
@@ -2279,10 +2343,14 @@ function useMutableState(properties, group) {
   const versionAtRender = getVersion(proxy2);
   boundary.resetReads();
   const wrapper = boundary.wrap(proxy2);
+  useEffect(() => {
+    boundary.captureReads();
+  });
   useEffect(() => {
     const onSignal = () => {
       boundary.evictChangedTargets();
       if (boundary.readsChanged(proxy2)) bump();
+      else boundary.advanceBaselines();
     };
     return subscribe(proxy2, onSignal, true);
   }, [proxy2, boundary]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "opshot",
-	"version": "0.3.1",
+	"version": "0.3.3",
 	"description": "Plain-object state for React: mutate it directly, re-render only the components that read what changed, and track every change operation",
 	"type": "module",
 	"exports": {