cursedbelt 5.89.0 → 5.90.0

package/src/react/optimistic/revert.ts

@@ -0,0 +1,238 @@
+/**
+ * The rollback half of an optimistic change, DERIVED from the change itself.
+ *
+ * A caller writes only the forward edit (`rows => rows.filter(r => r.id !== id)`); this works out
+ * what that edit touched by comparing the state before and after it, and returns an inverse that
+ * undoes exactly that — applied to whatever the state is when the request fails, not to a
+ * snapshot. That difference is the whole reason this file exists:
+ *
+ *   delete A, delete B, A fails → restoring the snapshot taken before A would bring back B too
+ *   (or, taken before B, drop a rename made since). The inverse instead puts A back where it
+ *   was and leaves B gone and the rename standing.
+ *
+ * The rules, by shape (recursing through plain objects and arrays, so a patch three levels down
+ * reverts three levels down):
+ *
+ * | shape | the change | its inverse, against the current state |
+ * |---|---|---|
+ * | array of records (`id`) or primitives | item removed | put back after its nearest surviving neighbor, unless it is back already |
+ * | | item added | taken out by id |
+ * | | item changed | recurse into it by id (only fields still holding the optimistic value revert) |
+ * | | reordered | the old order back, only if the current order is still the optimistic one |
+ * | plain object | key changed / added / removed | per key, recursing |
+ * | `Set` / `Map` | member added / removed | the member out / back |
+ * | anything else | replaced | the old value back only if the current one is still the optimistic one |
+ *
+ * "Only if it still holds the optimistic value" is what lets two edits race: rename to "B", then
+ * to "C" — if the first request fails, the title is "C" by now, so it stays "C".
+ *
+ * Returns the current state UNCHANGED (same reference) when nothing needs reverting, so a React
+ * setter given the inverse does not re-render.
+ */
+
+/** How an array item is identified. Records by `id` (or `key`), primitives by value. */
+export type IdOf = (item: unknown) => unknown;
+
+const NO_ID = Symbol('no-id');
+
+export const defaultIdOf: IdOf = (item) => {
+  if (item === null || typeof item !== 'object') return item;
+  const record = item as { id?: unknown; key?: unknown };
+  if (record.id !== undefined) return record.id;
+  if (record.key !== undefined) return record.key;
+  return NO_ID;
+};
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  if (value === null || typeof value !== 'object') return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+};
+
+/**
+ * The inverse of the change `before → after`, as a function of the state at revert time.
+ * `idOf` names array items; the default reads `id`, then `key`, and uses a primitive's value.
+ */
+export function inverseOf<S>(before: S, after: S, idOf: IdOf = defaultIdOf): (current: S) => S {
+  return (current) => revertValue(before, after, current, idOf) as S;
+}
+
+function revertValue(before: unknown, after: unknown, current: unknown, idOf: IdOf): unknown {
+  if (Object.is(before, after)) return current;
+  if (Array.isArray(before) && Array.isArray(after) && Array.isArray(current)) {
+    const reverted = revertArray(before, after, current, idOf);
+    if (reverted !== undefined) return reverted;
+  }
+  if (before instanceof Set && after instanceof Set && current instanceof Set) {
+    return revertSet(before, after, current);
+  }
+  if (before instanceof Map && after instanceof Map && current instanceof Map) {
+    return revertMap(before, after, current, idOf);
+  }
+  if (isPlainObject(before) && isPlainObject(after) && isPlainObject(current)) {
+    return revertObject(before, after, current, idOf);
+  }
+  return Object.is(current, after) ? before : current;
+}
+
+function revertObject(
+  before: Record<string, unknown>,
+  after: Record<string, unknown>,
+  current: Record<string, unknown>,
+  idOf: IdOf,
+): Record<string, unknown> {
+  let out: Record<string, unknown> | undefined;
+  const write = (key: string, value: unknown, remove = false) => {
+    out ??= { ...current };
+    if (remove) delete out[key];
+    else out[key] = value;
+  };
+  for (const key of new Set([...Object.keys(before), ...Object.keys(after)])) {
+    const had = Object.hasOwn(before, key);
+    const has = Object.hasOwn(after, key);
+    if (had && has) {
+      if (Object.is(before[key], after[key])) continue;
+      if (!Object.hasOwn(current, key)) continue; // removed since — not ours to bring back
+      const next = revertValue(before[key], after[key], current[key], idOf);
+      if (!Object.is(next, current[key])) write(key, next);
+    } else if (has) {
+      // Added by the change: take it out if it is still what the change put there.
+      if (Object.hasOwn(current, key) && Object.is(current[key], after[key])) write(key, undefined, true);
+    } else if (!Object.hasOwn(current, key)) {
+      write(key, before[key]); // removed by the change, and still gone
+    }
+  }
+  return out ?? current;
+}
+
+/** `undefined` when the items cannot be identified — the caller falls back to whole-value. */
+function revertArray(before: unknown[], after: unknown[], current: unknown[], idOf: IdOf): unknown[] | undefined {
+  const ids = (list: unknown[]) => list.map(idOf);
+  const beforeIds = ids(before);
+  const afterIds = ids(after);
+  const unique = (list: unknown[]) => !list.includes(NO_ID) && new Set(list).size === list.length;
+  if (!unique(beforeIds) || !unique(afterIds)) return undefined;
+
+  const beforeById = new Map(beforeIds.map((id, i) => [id, before[i]]));
+  const afterById = new Map(afterIds.map((id, i) => [id, after[i]]));
+  let out = current;
+  let touched = false;
+  const edit = () => {
+    if (!touched) {
+      out = [...current];
+      touched = true;
+    }
+  };
+
+  // 1 · Items the change ADDED go, if they are still there.
+  const added = afterIds.filter((id) => !beforeById.has(id));
+  if (added.length > 0) {
+    const drop = new Set(added);
+    const kept = out.filter((item) => !drop.has(idOf(item)));
+    if (kept.length !== out.length) {
+      out = kept;
+      touched = true;
+    }
+  }
+
+  // 2 · Items the change CHANGED revert field by field.
+  for (const [id, was] of beforeById) {
+    const now = afterById.get(id);
+    if (now === undefined || Object.is(was, now)) continue;
+    const at = out.findIndex((item) => Object.is(idOf(item), id));
+    if (at < 0) continue;
+    const next = revertValue(was, now, out[at], idOf);
+    if (!Object.is(next, out[at])) {
+      edit();
+      out[at] = next;
+    }
+  }
+
+  // 3 · Items the change REMOVED come back beside the neighbor they had.
+  const removed = beforeIds.flatMap((id, index) => (afterById.has(id) ? [] : [{ id, index }]));
+  for (const { id, index } of removed) {
+    if (out.some((item) => Object.is(idOf(item), id))) continue;
+    edit();
+    let at = 0;
+    for (let i = index - 1; i >= 0; i--) {
+      const neighbor = out.findIndex((item) => Object.is(idOf(item), beforeIds[i]));
+      if (neighbor >= 0) {
+        at = neighbor + 1;
+        break;
+      }
+    }
+    out.splice(at, 0, beforeById.get(id));
+  }
+
+  // 4 · A REORDER: the old order back, only where the optimistic order still stands.
+  const kept = beforeIds.filter((id) => afterById.has(id));
+  const keptAfter = afterIds.filter((id) => beforeById.has(id));
+  if (kept.some((id, i) => !Object.is(id, keptAfter[i]))) {
+    const keep = new Set(kept);
+    const positions: number[] = [];
+    out.forEach((item, i) => {
+      if (keep.has(idOf(item))) positions.push(i);
+    });
+    const nowOrder = positions.map((i) => idOf(out[i]));
+    if (nowOrder.length === keptAfter.length && nowOrder.every((id, i) => Object.is(id, keptAfter[i]))) {
+      const byId = new Map(positions.map((i) => [idOf(out[i]), out[i]]));
+      edit();
+      positions.forEach((slot, i) => {
+        out[slot] = byId.get(kept[i]);
+      });
+    }
+  }
+
+  return touched ? out : current;
+}
+
+function revertSet(before: Set<unknown>, after: Set<unknown>, current: Set<unknown>): Set<unknown> {
+  let out: Set<unknown> | undefined;
+  const copy = () => {
+    out ??= new Set(current);
+    return out;
+  };
+  for (const member of after) {
+    if (!before.has(member) && current.has(member)) copy().delete(member);
+  }
+  for (const member of before) {
+    if (!after.has(member) && !current.has(member)) copy().add(member);
+  }
+  return out ?? current;
+}
+
+function revertMap(
+  before: Map<unknown, unknown>,
+  after: Map<unknown, unknown>,
+  current: Map<unknown, unknown>,
+  idOf: IdOf,
+): Map<unknown, unknown> {
+  let out: Map<unknown, unknown> | undefined;
+  const copy = () => {
+    out ??= new Map(current);
+    return out;
+  };
+  for (const key of new Set([...before.keys(), ...after.keys()])) {
+    const had = before.has(key);
+    const has = after.has(key);
+    if (had && has) {
+      if (Object.is(before.get(key), after.get(key)) || !current.has(key)) continue;
+      const next = revertValue(before.get(key), after.get(key), current.get(key), idOf);
+      if (!Object.is(next, current.get(key))) copy().set(key, next);
+    } else if (has) {
+      if (current.has(key) && Object.is(current.get(key), after.get(key))) copy().delete(key);
+    } else if (!current.has(key)) {
+      copy().set(key, before.get(key));
+    }
+  }
+  return out ?? current;
+}
+
+/**
+ * A counter's inverse: give back the difference the change made, whatever has happened since.
+ * The whole-value rule is wrong for a count — two deletes take a total 10 → 9 → 8, and when the
+ * first fails the total is 8, not 9, so "revert only if still optimistic" would never fire. Pass
+ * it as a target's `revert`: `{ set: setTotal, apply: (n) => n - 1, revert: counterRevert }`.
+ */
+export const counterRevert = (current: number, before: number, after: number): number =>
+  current + (before - after);

package/src/react/optimistic/staysOffTheEntry.spec.ts

@@ -0,0 +1,38 @@
+/**
+ * 🔴 `optimistic()` is on every app's busiest paths, so whatever it imports STATICALLY lands on
+ * their entry chunks. Its first version imported `../Toast.js` at the top, which put sonner
+ * (~10 kB gzip) back on flix's and roms' entries — the bytes cursedbelt 5.64 took off them
+ * (forge task 2900) — and both apps had to raise their asset budgets (forge task 3583).
+ *
+ * The toast is loaded at the first refusal instead. This fails if any file of the module reaches
+ * the toast or sonner without `import()`.
+ */
+import { describe, expect, test } from 'bun:test';
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const dir = import.meta.dir;
+// `LazyToaster` is the other half: the stack an app mounts must not pull sonner in statically either.
+const sources = [
+  ...readdirSync(dir)
+    .filter((f) => /\.tsx?$/.test(f) && !/\.spec\.tsx?$/.test(f))
+    .map((f) => join(dir, f)),
+  join(dir, '..', 'LazyToaster.tsx'),
+];
+const STATIC = /^\s*import\s+(?!type\b)[^;]*?from\s+['"]([^'"]+)['"]/gm;
+
+describe('the optimistic module stays off the entry chunk', () => {
+  test('no file imports the toast or sonner statically', () => {
+    const offenders = sources.flatMap((file) =>
+      [...readFileSync(file, 'utf8').matchAll(STATIC)]
+        .map((m) => m[1] ?? '')
+        .filter((spec) => spec === 'sonner' || /Toast(\.js)?$/.test(spec))
+        .map((spec) => `${file} → ${spec}`),
+    );
+    expect(offenders).toEqual([]);
+  });
+
+  test('the check sees a static import when there is one', () => {
+    expect([..."import { toast } from '../Toast.js';".matchAll(STATIC)].map((m) => m[1])).toEqual(['../Toast.js']);
+  });
+});