opshot 0.3.1 → 0.3.4

package/README.md

@@ -28,6 +28,12 @@ const user = useMutableState({ name: "Ada", age: 36 });
 user.age = 37;
 ```
 
+The state is created once, on the first render. Pass a function to build the properties once as well, exactly as `useState` does:
+
+```tsx
+const navigation = useMutableState(createNavigation);
+```
+
 ## Bounded re-renders
 
 React re-renders a component and its children when its state changes.
@@ -122,9 +128,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.d.ts

@@ -180,6 +180,6 @@ declare function scope<P extends object>(Component: ComponentType<P>, options?:
 
 declare function useGroup(): Group;
 
-declare function useMutableState<T extends object>(properties: T, group?: Group): T;
+declare function useMutableState<T extends object>(properties: (() => T) | T, group?: Group): T;
 
 export { type AddOperation, type Channel, type Context, type Group, type GroupListener, type Ignored, type Op, type Operation, type OperationPath, type RemoveOperation, type ReplaceOperation, type ScopeOptions, type StateListener, TrackedDate, TrackedMap, TrackedSet, type UnsafeTracked, applyOps, createChannel, createGroup, createMutableState, diffSnapshots, identify, ignore, isSameIdentity, isState, scope, subscribe, transact, unsafeTrack, useGroup, useMutableState };

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,24 +2329,28 @@ 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];
 }
 function useMutableState(properties, group) {
   const [{ proxy: proxy2, boundary }] = useState(() => ({
-    proxy: createMutableState(properties, group),
+    proxy: createMutableState(typeof properties === "function" ? properties() : properties, group),
     boundary: createBoundary()
   }));
   const [, bump] = useReducer((value) => value + 1, 0);
   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.4",
 	"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": {