opshot 0.5.2 → 0.6.0

package/dist/react.d.ts

@@ -0,0 +1,23 @@
+import { ComponentType, FC } from 'react';
+import { M as MutableStateOptions } from './createMutableState-DJ9dmpR-.js';
+
+/**
+ * Wraps a component so it re-renders only when fields it read change.
+ *
+ * @typeParam P - Props type.
+ * @param Component - Component to wrap.
+ * @returns The wrapped component.
+ */
+declare function scope<P extends object>(Component: ComponentType<P>): FC<P>;
+
+/**
+ * Creates mutable state for a component.
+ *
+ * @typeParam T - State shape.
+ * @param properties - Initial fields, or a function that returns them.
+ * @param options - Creation options.
+ * @returns The state.
+ */
+declare function useMutableState<T extends object>(properties: (() => T) | T, options?: MutableStateOptions): T;
+
+export { scope, useMutableState };

package/dist/react.js

@@ -0,0 +1,517 @@
+import { createMutableState, handlesOf, subscribe, proxyOf, isState, isSameIdentity, rawOf, addressOf, versionOf, isDangerousKind, classifyValue, peelReadProxy, recordOf, registerReadProxyTarget, walkDataEntries, isTrackedEntry, isObjectLike } from './chunk-4JZIOHSP.js';
+import * as React from 'react';
+import { memo, useState, useReducer, useRef, useEffect, createElement, useLayoutEffect } from 'react';
+
+// src/react/propWalk.ts
+var stateKeysByContainer = /* @__PURE__ */ new WeakMap();
+var noStateKeys = /* @__PURE__ */ new Set();
+var isReactOwnNode = (value) => "$$typeof" in value || typeof Node !== "undefined" && value instanceof Node;
+var canRebuild = (container) => !isDangerousKind(classifyValue(container));
+var childRole = (value, writable, mode) => {
+  if (typeof value !== "object" || value === null) return "skip";
+  if (isReactOwnNode(value)) return "skip";
+  if (!isTrackedEntry(value, mode === "entry" || writable)) return "skip";
+  if (isState(value)) return "state";
+  if (canRebuild(value)) return "descend";
+  return "skip";
+};
+var readVerdict = (container, pass) => pass.verdicts.get(container) ?? stateKeysByContainer.get(container) ?? noStateKeys;
+var createDiscoveryPass = () => ({
+  entriesByContainer: /* @__PURE__ */ new Map(),
+  verdicts: /* @__PURE__ */ new Map(),
+  inProgress: /* @__PURE__ */ new Set(),
+  relaxable: /* @__PURE__ */ new Set()
+});
+function visitContainer(container, pass, mode) {
+  if (mode === "nested" && stateKeysByContainer.has(container)) return false;
+  if (pass.inProgress.has(container)) return true;
+  if (pass.verdicts.has(container)) return pass.relaxable.has(container);
+  pass.inProgress.add(container);
+  const entries = walkDataEntries(container);
+  const keys = /* @__PURE__ */ new Set();
+  let dependedOnBackEdge = false;
+  pass.entriesByContainer.set(container, entries);
+  for (const entry of entries) {
+    const role = childRole(entry.value, entry.writable, mode);
+    if (role === "state") {
+      keys.add(entry.key);
+      continue;
+    }
+    if (role !== "descend") continue;
+    const child = entry.value;
+    if (typeof child !== "object" || child === null) continue;
+    if (visitContainer(child, pass, "nested")) dependedOnBackEdge = true;
+    if (readVerdict(child, pass).size > 0) keys.add(entry.key);
+  }
+  pass.inProgress.delete(container);
+  pass.verdicts.set(container, keys);
+  if (dependedOnBackEdge) pass.relaxable.add(container);
+  return dependedOnBackEdge;
+}
+function relaxVerdicts(pass, entryContainer) {
+  let gained = true;
+  while (gained) {
+    gained = false;
+    for (const container of pass.relaxable) {
+      const keys = pass.verdicts.get(container);
+      const entries = pass.entriesByContainer.get(container);
+      if (keys === void 0 || entries === void 0) continue;
+      for (const entry of entries) {
+        if (keys.has(entry.key)) continue;
+        if (childRole(entry.value, entry.writable, container === entryContainer ? "entry" : "nested") !== "descend")
+          continue;
+        const child = entry.value;
+        if (typeof child !== "object" || child === null) continue;
+        if (readVerdict(child, pass).size === 0) continue;
+        keys.add(entry.key);
+        gained = true;
+      }
+    }
+  }
+}
+var cacheNestedVerdicts = (pass, skip) => {
+  for (const [visited, keys] of pass.verdicts) {
+    if (visited === skip) continue;
+    stateKeysByContainer.set(visited, keys);
+  }
+};
+function discoverStateKeys(container) {
+  const cached = stateKeysByContainer.get(container);
+  if (cached !== void 0) return cached;
+  if (isReactOwnNode(container)) return noStateKeys;
+  if (Object.isFrozen(container) || !canRebuild(container)) return noStateKeys;
+  const pass = createDiscoveryPass();
+  visitContainer(container, pass, "nested");
+  relaxVerdicts(pass);
+  cacheNestedVerdicts(pass);
+  return pass.verdicts.get(container) ?? noStateKeys;
+}
+function substituteContainer(container, substitution, wrap, mode) {
+  const rebuilt = substitution.rebuiltByContainer.get(container);
+  if (rebuilt !== void 0) return rebuilt;
+  let stateKeys;
+  if (mode === "nested") {
+    stateKeys = discoverStateKeys(container);
+  } else {
+    const pass = createDiscoveryPass();
+    visitContainer(container, pass, "entry");
+    relaxVerdicts(pass, container);
+    cacheNestedVerdicts(pass, container);
+    stateKeys = pass.verdicts.get(container) ?? noStateKeys;
+  }
+  if (stateKeys.size === 0) {
+    substitution.rebuiltByContainer.set(container, container);
+    return container;
+  }
+  const clone = Array.isArray(container) ? [] : {};
+  Reflect.setPrototypeOf(clone, Reflect.getPrototypeOf(container));
+  substitution.rebuiltByContainer.set(container, clone);
+  const descriptors = Object.getOwnPropertyDescriptors(container);
+  for (const key of stateKeys) {
+    const descriptor = descriptors[key];
+    if (descriptor === void 0 || !("value" in descriptor)) continue;
+    const value = descriptor.value;
+    const role = childRole(value, descriptor.writable === true, mode);
+    if (role === "state") {
+      const source = peelReadProxy(value);
+      if (typeof source !== "object" || source === null) continue;
+      if (!substitution.visitedSources.has(source)) {
+        substitution.visitedSources.add(source);
+        substitution.sources.push(source);
+      }
+      descriptors[key] = { ...descriptor, value: wrap(source) };
+      continue;
+    }
+    if (role !== "descend") continue;
+    if (typeof value !== "object" || value === null) continue;
+    descriptors[key] = { ...descriptor, value: substituteContainer(value, substitution, wrap, "nested") };
+  }
+  Object.defineProperties(clone, descriptors);
+  return clone;
+}
+function substituteStates(root, wrap) {
+  const substitution = {
+    rebuiltByContainer: /* @__PURE__ */ new Map(),
+    sources: [],
+    visitedSources: /* @__PURE__ */ new Set()
+  };
+  if (isReactOwnNode(root) || !canRebuild(root)) {
+    return { props: root, sources: substitution.sources };
+  }
+  return { props: substituteContainer(root, substitution, wrap, "entry"), sources: substitution.sources };
+}
+var NO_SLOT = /* @__PURE__ */ Symbol("opshot.noDispatcherSlot");
+var readDispatcher = () => {
+  const internals = React;
+  const modern = internals.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  if (modern !== void 0) return modern.H;
+  const legacy = internals.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentDispatcher;
+  if (legacy !== void 0) return legacy.current;
+  return NO_SLOT;
+};
+var nonRenderDispatcher;
+var learnNonRenderDispatcher = () => {
+  const current = readDispatcher();
+  if (current === NO_SLOT || current === null || current === void 0) return;
+  nonRenderDispatcher = current;
+};
+var isRendering = () => {
+  if (nonRenderDispatcher === void 0) return false;
+  const current = readDispatcher();
+  if (current === NO_SLOT || current === null || current === void 0) return false;
+  return current !== nonRenderDispatcher;
+};
+
+// src/react/readTracker.ts
+var KEYS_PROPERTY = "k";
+var HAS_KEY_PROPERTY = "h";
+var HAS_OWN_KEY_PROPERTY = "o";
+var ALL_OWN_KEYS_PROPERTY = "w";
+var isWriteProxy = (value) => recordOf(value)?.proxy === value;
+var getUsage = (affected, target) => {
+  let used = affected.get(target);
+  if (used === void 0) {
+    used = {};
+    affected.set(target, used);
+  }
+  return used;
+};
+var recordIn = (slot, key, value) => {
+  const map = slot ?? /* @__PURE__ */ new Map();
+  if (!map.has(key)) map.set(key, value);
+  return map;
+};
+var recordGet = (used, key, value) => {
+  used[KEYS_PROPERTY] = recordIn(used[KEYS_PROPERTY], key, value);
+};
+var recordHas = (used, key, value) => {
+  used[HAS_KEY_PROPERTY] = recordIn(used[HAS_KEY_PROPERTY], key, value);
+};
+var recordOwn = (used, key, value) => {
+  used[HAS_OWN_KEY_PROPERTY] = recordIn(used[HAS_OWN_KEY_PROPERTY], key, value);
+};
+var getPrototypeMethod = (target, prop) => {
+  let prototype = Reflect.getPrototypeOf(target);
+  while (prototype !== null) {
+    const descriptor = Reflect.getOwnPropertyDescriptor(prototype, prop);
+    if (descriptor !== void 0) {
+      const descriptorValue = "value" in descriptor ? descriptor.value : void 0;
+      return typeof descriptorValue === "function" ? descriptorValue : void 0;
+    }
+    prototype = Reflect.getPrototypeOf(prototype);
+  }
+  return void 0;
+};
+var UnregisteredReadTrackerError = class extends Error {
+  constructor() {
+    super("opshot: readsIntersectDirty received an unregistered tracker");
+    this.name = "UnregisteredReadTrackerError";
+  }
+};
+var trackerPartitions = /* @__PURE__ */ new WeakMap();
+var partitionsOf = (tracker) => {
+  const partitions = trackerPartitions.get(tracker);
+  if (partitions === void 0) throw new UnregisteredReadTrackerError();
+  return partitions;
+};
+var recordedKeysOf = (used) => {
+  const keyMaps = new Array();
+  if (used[KEYS_PROPERTY] !== void 0) keyMaps.push(used[KEYS_PROPERTY]);
+  if (used[HAS_KEY_PROPERTY] !== void 0) keyMaps.push(used[HAS_KEY_PROPERTY]);
+  if (used[HAS_OWN_KEY_PROPERTY] !== void 0) keyMaps.push(used[HAS_OWN_KEY_PROPERTY]);
+  return keyMaps;
+};
+var identityReadsChanged = (partition) => {
+  for (const [writeProxy, version] of partition.identityReads) {
+    if (partition.affected.has(writeProxy)) continue;
+    if (versionOf(rawOf(writeProxy)) !== version) return true;
+  }
+  return false;
+};
+function readsIntersectDirty(tracker, dirty) {
+  for (const partition of partitionsOf(tracker).values()) {
+    for (const [writeProxy, used] of partition.affected) {
+      const raw = rawOf(writeProxy);
+      const edges = dirty.edges.get(raw);
+      for (const keys of recordedKeysOf(used)) {
+        for (const key of keys.keys()) {
+          if (typeof key === "symbol") continue;
+          if (edges?.has(key) === true) return true;
+        }
+      }
+      if (used[ALL_OWN_KEYS_PROPERTY] !== void 0 && dirty.nodes.has(raw)) return true;
+    }
+    if (identityReadsChanged(partition)) return true;
+  }
+  return false;
+}
+function readsChanged(tracker) {
+  for (const partition of partitionsOf(tracker).values()) {
+    for (const [writeProxy, used] of partition.affected) {
+      const gets = used[KEYS_PROPERTY];
+      if (gets !== void 0) {
+        for (const [key, stored] of gets) {
+          if (!Object.is(Reflect.get(writeProxy, key, writeProxy), stored)) return true;
+        }
+      }
+      const hasKeys = used[HAS_KEY_PROPERTY];
+      if (hasKeys !== void 0) {
+        for (const [key, stored] of hasKeys) {
+          if (!Object.is(Reflect.has(writeProxy, key), stored)) return true;
+        }
+      }
+      const ownKeys = used[HAS_OWN_KEY_PROPERTY];
+      if (ownKeys !== void 0) {
+        for (const [key, stored] of ownKeys) {
+          const present = Reflect.getOwnPropertyDescriptor(writeProxy, key) !== void 0;
+          if (!Object.is(present, stored)) return true;
+        }
+      }
+      const listed = used[ALL_OWN_KEYS_PROPERTY];
+      if (listed !== void 0) {
+        const current = Reflect.ownKeys(writeProxy);
+        if (current.length !== listed.length) return true;
+        for (let index = 0; index < listed.length; index += 1) {
+          if (!Object.is(current[index], listed[index])) return true;
+        }
+      }
+    }
+    if (identityReadsChanged(partition)) return true;
+  }
+  return false;
+}
+function createReadTracker() {
+  const partitions = /* @__PURE__ */ new Map();
+  let afterRender = false;
+  let releasing = false;
+  const getPartition = (writeProxy) => {
+    let partition = partitions.get(writeProxy);
+    if (partition === void 0) {
+      partition = {
+        affected: /* @__PURE__ */ new Map(),
+        identityReads: /* @__PURE__ */ new Map(),
+        proxyCache: /* @__PURE__ */ new WeakMap()
+      };
+      partitions.set(writeProxy, partition);
+    }
+    return partition;
+  };
+  const shouldRecord = () => !afterRender || isRendering();
+  const trackUsage = (partition, writeProxy) => shouldRecord() ? getUsage(partition.affected, writeProxy) : {};
+  const recordIdentity = (partition, value) => {
+    if (!shouldRecord()) return;
+    if (isObjectLike(value) && isWriteProxy(value) && !partition.identityReads.has(value)) {
+      partition.identityReads.set(value, versionOf(rawOf(value)));
+    }
+  };
+  const toReadProxy = (writeProxy, partition) => {
+    const raw = rawOf(writeProxy);
+    const cached = partition.proxyCache.get(raw);
+    if (cached?.version === versionOf(raw)) return cached.proxy;
+    const target = raw;
+    const readProxyBox = {};
+    const boundMethods = /* @__PURE__ */ new WeakMap();
+    const bindMethodToReadProxy = (readProxy2, method) => {
+      const existing = boundMethods.get(method);
+      if (existing !== void 0) return existing;
+      const bound = Function.prototype.bind.call(method, readProxy2);
+      boundMethods.set(method, bound);
+      return bound;
+    };
+    const handler = {
+      get(_target, prop) {
+        const readProxy2 = readProxyBox.current;
+        const value = Reflect.get(writeProxy, prop, readProxy2 ?? writeProxy);
+        const used = trackUsage(partition, writeProxy);
+        recordGet(used, prop, value);
+        recordIdentity(partition, value);
+        if (typeof value === "function") {
+          const method = getPrototypeMethod(target, prop);
+          if (method !== void 0 && value === method && readProxy2 !== void 0) {
+            return bindMethodToReadProxy(readProxy2, method);
+          }
+        }
+        if (!isObjectLike(value)) return value;
+        if (typeof value === "function") return value;
+        if (!isWriteProxy(value)) return value;
+        return toReadProxy(value, partition);
+      },
+      has(_target, prop) {
+        const used = trackUsage(partition, writeProxy);
+        const result = Reflect.has(writeProxy, prop);
+        recordHas(used, prop, result);
+        return result;
+      },
+      getOwnPropertyDescriptor(_target, prop) {
+        const used = trackUsage(partition, writeProxy);
+        const descriptor = Reflect.getOwnPropertyDescriptor(writeProxy, prop);
+        recordOwn(used, prop, descriptor !== void 0);
+        return descriptor;
+      },
+      ownKeys() {
+        const used = trackUsage(partition, writeProxy);
+        const keys = Reflect.ownKeys(writeProxy);
+        used[ALL_OWN_KEYS_PROPERTY] ??= keys;
+        return keys;
+      },
+      set(_target, prop, value) {
+        return Reflect.set(writeProxy, prop, value, writeProxy);
+      },
+      deleteProperty(_target, prop) {
+        return Reflect.deleteProperty(writeProxy, prop);
+      }
+    };
+    const readProxy = new Proxy(writeProxy, handler);
+    readProxyBox.current = readProxy;
+    registerReadProxyTarget(readProxy, writeProxy);
+    partition.proxyCache.set(raw, { proxy: readProxy, version: versionOf(raw) });
+    return readProxy;
+  };
+  const tracker = {
+    wrap(writeProxy) {
+      if (!isWriteProxy(writeProxy)) {
+        throw new Error("opshot: ReadTracker.wrap requires a write proxy");
+      }
+      const partition = getPartition(writeProxy);
+      return toReadProxy(writeProxy, partition);
+    },
+    captureReads() {
+      learnNonRenderDispatcher();
+      afterRender = true;
+    },
+    resetReads() {
+      afterRender = false;
+      for (const partition of partitions.values()) {
+        partition.affected.clear();
+        partition.identityReads.clear();
+      }
+    },
+    retain() {
+      releasing = false;
+    },
+    dispose() {
+      releasing = true;
+      void Promise.resolve().then(() => {
+        if (!releasing) return;
+        releasing = false;
+        partitions.clear();
+      });
+    }
+  };
+  trackerPartitions.set(tracker, partitions);
+  return tracker;
+}
+var useCommitEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+
+// src/react/scope.tsx
+var sourcesKey = (sources) => `${sources.length}:${sources.map((source) => addressOf(source)).join(",")}`;
+var uniqueHandlesOf = (nodes) => {
+  const unique = new Array();
+  const seen = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    for (const handle of handlesOf(node)) {
+      if (seen.has(handle)) continue;
+      seen.add(handle);
+      unique.push(handle);
+    }
+  }
+  return unique;
+};
+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) {
+  const Scoped = (props) => {
+    const readTrackerRef = useRef(void 0);
+    const currentHandlesRef = useRef([]);
+    readTrackerRef.current ??= createReadTracker();
+    const readTracker = readTrackerRef.current;
+    const [, bump] = useReducer((value) => value + 1, 0);
+    readTracker.resetReads();
+    const { props: renderedProps, sources } = substituteStates(props, (source) => readTracker.wrap(source));
+    const uniqueHandles = uniqueHandlesOf(sources);
+    useCommitEffect(() => {
+      currentHandlesRef.current = uniqueHandles;
+      readTracker.captureReads();
+    });
+    useEffect(() => {
+      readTracker.retain();
+      return () => readTracker.dispose();
+    }, [readTracker]);
+    useEffect(() => {
+      let cancelled = false;
+      const subscribedHandles = uniqueHandlesOf(sources);
+      const unsubscribes = subscribedHandles.map(
+        (handle) => subscribe(proxyOf(handle.root), () => {
+          if (cancelled) return;
+          const dirty = handle.lastDirty;
+          if (dirty !== void 0 && readsIntersectDirty(readTracker, dirty)) bump();
+        })
+      );
+      if (readsChanged(readTracker)) bump();
+      return () => {
+        cancelled = true;
+        for (const unsubscribe of unsubscribes) unsubscribe();
+      };
+    }, [sourcesKey(sources), readTracker]);
+    return createElement(Component, renderedProps);
+  };
+  const baseName = Component.displayName ?? Component.name;
+  Scoped.displayName = `scope(${typeof baseName === "string" && baseName !== "" ? baseName : "Component"})`;
+  return memo(Scoped, arePropsEqual);
+}
+var isObjectLike2 = (value) => value !== null && (typeof value === "object" || typeof value === "function");
+function useMutableState(properties, options) {
+  const [{ writeProxy, readTracker }] = useState(() => {
+    const initial = typeof properties === "function" ? properties() : properties;
+    return {
+      writeProxy: createMutableState(initial, options),
+      readTracker: createReadTracker()
+    };
+  });
+  const [, bump] = useReducer((value) => value + 1, 0);
+  const currentHandlesRef = useRef([]);
+  const uniqueHandles = isObjectLike2(writeProxy) ? handlesOf(writeProxy) : [];
+  readTracker.resetReads();
+  const readProxy = isObjectLike2(writeProxy) ? readTracker.wrap(writeProxy) : writeProxy;
+  useCommitEffect(() => {
+    currentHandlesRef.current = uniqueHandles;
+    readTracker.captureReads();
+  });
+  useEffect(() => {
+    readTracker.retain();
+    return () => readTracker.dispose();
+  }, [readTracker]);
+  useEffect(() => {
+    let cancelled = false;
+    const subscribedHandles = isObjectLike2(writeProxy) ? handlesOf(writeProxy) : [];
+    const unsubscribes = subscribedHandles.map(
+      (handle) => subscribe(proxyOf(handle.root), () => {
+        if (cancelled) return;
+        const dirty = handle.lastDirty;
+        if (dirty !== void 0 && readsIntersectDirty(readTracker, dirty)) bump();
+      })
+    );
+    if (readsChanged(readTracker)) bump();
+    return () => {
+      cancelled = true;
+      for (const unsubscribe of unsubscribes) unsubscribe();
+    };
+  }, [writeProxy, readTracker]);
+  return readProxy;
+}
+
+export { scope, useMutableState };

package/package.json

@@ -1,12 +1,16 @@
 {
 	"name": "opshot",
-	"version": "0.5.2",
+	"version": "0.6.0",
 	"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": {
 		".": {
 			"import": "./dist/index.js",
 			"types": "./dist/index.d.ts"
+		},
+		"./react": {
+			"import": "./dist/react.js",
+			"types": "./dist/react.d.ts"
 		}
 	},
 	"files": [
@@ -36,6 +40,11 @@
 	"peerDependencies": {
 		"react": ">=16.8.0"
 	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		}
+	},
 	"devDependencies": {
 		"@commitlint/cli": "^19.8.1",
 		"@commitlint/config-conventional": "^19.8.1",