@panphora/clayjs 1.23.0 → 1.24.1

package/src/plugins/visitor-drafts/store.js

@@ -4,6 +4,18 @@ import { draftSlot, setDraftStoreFailed } from "../../core/draft-mode.js";
 export const KEY_PREFIX = "clay:visitor-drafts:";
 export const RECORD_VERSION = 1;
 const LINEAGE = 32;
+// What one tab's journal slot in `localStorage` may hold, and what its unconfirmed
+// operations may hold in memory, in characters of JSON.
+export const SLOT_LIMIT = 512 * 1024;
+export const PENDING_LIMIT = 16 * 1024 * 1024;
+
+export const newRecordId = () => Math.random().toString(36).slice(2, 10) + Math.random().toString(36).slice(2, 6);
+
+function textMark(text) {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < text.length; i++) hash = Math.imul(hash ^ text.charCodeAt(i), 0x01000193);
+  return (hash >>> 0).toString(36) + "." + text.length.toString(36);
+}
 
 // The document a pathname names, spelled the way the hosts resolve it: the path up to
 // and including the first segment that ends in .html or .htmlclay (anything after it is
@@ -55,10 +67,39 @@ export function fitsInto(wanted, got) {
   return wanted === got;
 }
 
-function same(a, b) {
+export function same(a, b) {
   return fitsInto(a, b) && fitsInto(b, a);
 }
 
+const STORE_SEL = 'script[type="application/json"][merge][clay~="live"]';
+const ARTICLE_SEL = "article[data-blockeditor]";
+const isPagePart = (name) => name === "blockeditor" || /^blockeditor\.\d+$/.test(name);
+const canonical = (live) => JSON.stringify(Object.keys(live).sort().map((name) => [name, live[name]]));
+
+// A page document's page: every live store's value and the article the save projected
+// from them. Null for a document that is not one page, or whose store does not parse.
+function readUnit(source) {
+  const articles = source.querySelectorAll(ARTICLE_SEL);
+  if (articles.length !== 1) return null;
+  const live = {};
+  for (const tag of source.querySelectorAll(STORE_SEL)) {
+    try { live[tag.getAttribute("merge")] = JSON.parse(tag.textContent); } catch { return null; }
+  }
+  return { live, blockeditor: { rev: articles[0].getAttribute("data-rev") || "", html: articles[0].innerHTML } };
+}
+
+const sameUnit = (a, b) => (!a || !b ? a === b : a.blockeditor.rev === b.blockeditor.rev && canonical(a.live) === canonical(b.live));
+
+// One page content, one mark: two pages `sameUnit` calls the same carry the same one.
+export const unitMark = (unit) => (isPlain(unit?.live) && isPlain(unit?.blockeditor) ? `${unit.blockeditor.rev}:${textMark(canonical(unit.live))}` : null);
+
+function unitOf(record) {
+  if (!isPlain(record?.live) || !isPlain(record?.blockeditor)) return null;
+  const { live, blockeditor } = record;
+  if (!Object.keys(live).length || typeof blockeditor.rev !== "string" || typeof blockeditor.html !== "string") return null;
+  return { live, blockeditor };
+}
+
 const hasIds = (rows) => Array.isArray(rows)
   && rows.every((row) => isPlain(row) && (typeof row.id === "string" || typeof row.id === "number"))
   && new Set(rows.map((row) => row.id)).size === rows.length;
@@ -163,7 +204,7 @@ export function merge3(base, mine, theirs) {
   return merged;
 }
 
-function storageFailure(doc, error) {
+export function storageFailure(doc, error) {
   setDraftStoreFailed(true);
   doc.dispatchEvent(new CustomEvent("clay:drafts-store-failed", { detail: { error } }));
   const failure = new Error("Couldn't save in this browser. Storage is full or turned off.");
@@ -220,21 +261,85 @@ export function adoptLegacy(slot, { path = draftPath(), storage = safeStorage()
   }
 }
 
-export function createStore({ doc = document, storage = safeStorage(), now = () => new Date(), path = draftPath(), fallback = null } = {}) {
+// The `site` key holds values the server writes into every page of a multi-page site from its
+// site.json. A draft must never capture or replay them, or a returning visitor would see stale ones.
+function withoutSiteKey(value) {
+  if (!isPlain(value) || !("site" in value)) return value;
+  const { site, ...rest } = value;
+  return rest;
+}
+
+export function createStore({ doc = document, storage = safeStorage(), now = () => new Date(), path = draftPath(), fallback = null, slotLimit = SLOT_LIMIT, pendingLimit = PENDING_LIMIT } = {}) {
   const slot = draftSlot(doc);
   const key = draftKey(slot, path);
-  const rules = engine.findRulesIn(doc, "api").rules;
+  const rules = withoutSiteKey(engine.findRulesIn(doc, "api").rules);
 
   let lastRaw = null;
   let base = null;
+  // The served page's data, read before any restore, and the stored data this tab's next
+  // operation is built on: the record it restored or last took in with its own operations
+  // laid over, or the served page's while nothing is stored.
+  let seed = null;
+  let tip = null;
+  // Nothing of a draft is on this page yet: no restore, no operation, nothing taken in.
+  let fresh = true;
   let unparked = null;
   let stopped = false;
   // This tab's own last write: its record id, its ancestry, and the data of the record it
   // was built on. A read in one tab can miss a write another tab made a few milliseconds
   // earlier, so a record whose ancestry lacks this write never saw it.
   let own = null;
+  // The page as the served file states it, read once before any restore: an untouched
+  // page is never recorded, so the owner's later page reaches a visitor who never wrote in it.
+  let served;
+  // The page this tab's editor holds as its starting point, and the page in the record
+  // this tab last read or wrote. Null when no page is recorded.
+  let editorUnit = null;
+  let seenUnit = null;
+
+  const readServed = () => { if (served === undefined) served = readUnit(doc); };
+  function recordable(unit) {
+    if (!unit) return null;
+    readServed();
+    if (!served) return unit;
+    const differs = unit.blockeditor.rev !== served.blockeditor.rev ||
+      Object.keys(unit.live).some((name) => !isPagePart(name) && JSON.stringify(unit.live[name]) !== JSON.stringify(served.live[name]));
+    // An untouched page is never recorded, so the owner's later page reaches a visitor who
+    // never wrote in it. Once this tab has held a recorded page, every page is recorded,
+    // even one returned to the served text, so a deletion reaches the other tabs too.
+    return differs || editorUnit || seenUnit ? unit : null;
+  }
+
+  // Runs once the article exists. The visitor-drafts module runs before the page and live
+  // plugins and registers first, so on a page still parsing this listener runs before theirs.
+  function whenArticle(fn) {
+    if (doc.querySelector(ARTICLE_SEL) || doc.readyState !== "loading") return fn();
+    doc.addEventListener("DOMContentLoaded", fn, { once: true });
+  }
+
+  // The stored values go into the store tags as JSON text with `<` escaped, so a value
+  // cannot close its tag. The article is left alone: the editor renders from the store.
+  function placeUnit(unit) {
+    readServed();
+    const article = doc.querySelector(ARTICLE_SEL);
+    if (!article) return false;
+    const tags = new Map([...doc.querySelectorAll(STORE_SEL)].map((tag) => [tag.getAttribute("merge"), tag]));
+    for (const [name, tag] of tags) if (isPagePart(name) && !(name in unit.live)) tag.remove();
+    for (const [name, value] of Object.entries(unit.live)) {
+      let tag = tags.get(name);
+      if (!tag) {
+        tag = doc.createElement("script");
+        tag.setAttribute("type", "application/json");
+        tag.setAttribute("merge", name);
+        tag.setAttribute("clay", "live");
+        article.parentNode.insertBefore(tag, article);
+      }
+      tag.textContent = JSON.stringify(value).replace(/</g, "\\u003c");
+    }
+    return true;
+  }
 
-  const newId = () => Math.random().toString(36).slice(2, 10) + Math.random().toString(36).slice(2, 6);
+  const newId = newRecordId;
 
   // A record's ancestry is the ids it descends from, nearest first, ending at the empty
   // slot it grew from, or at a record from a runtime that kept no ids, named by its bytes.
@@ -245,11 +350,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     try { return "root:" + (storage?.getItem(resetKey) ?? ""); } catch { return "root:"; }
   }
 
-  function legacyId(raw) {
-    let hash = 0x811c9dc5;
-    for (let i = 0; i < raw.length; i++) hash = Math.imul(hash ^ raw.charCodeAt(i), 0x01000193);
-    return "legacy:" + (hash >>> 0).toString(36) + "." + raw.length.toString(36);
-  }
+  const legacyId = (raw) => "legacy:" + textMark(raw);
 
   function lineageOf(record, raw) {
     if (!record) return null;
@@ -373,30 +474,53 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     return null;
   }
 
-  function parkedResult(raw) {
+  function parkedResult({ raw, record }) {
     const parkedKey = park(raw);
     if (!parkedKey) lastRaw = raw;
     base = live();
+    tip = record?.data ?? base;
     return parkedKey
       ? { restored: false, hadDraft: true, parked: true }
       : { restored: false, hadDraft: true, parked: false, blocked: true };
   }
 
-  function restore() {
-    const found = read();
+  const seedData = () => (seed ??= live());
+
+  // `found` is the record to put on the page: the one `localStorage` holds, or the
+  // database's when the page waited for it (null: it holds none).
+  function restore(found = read()) {
+    seedData();
     if (!found) {
-      base = live();
+      base = tip = seed;
+      whenArticle(readServed);
       return { restored: false, hadDraft: false };
     }
-    if (!found.record) return parkedResult(found.raw);
-    const fitted = fit(found.record.data);
-    if (!fitted || !Object.keys(fitted.data).length) return parkedResult(found.raw);
-    applyData(doc, fitted.data, rules);
+    fresh = false;
+    if (!found.record) return parkedResult(found);
+    const unit = unitOf(found.record);
+    const hasData = Object.keys(found.record.data).length > 0;
+    const fitted = hasData ? fit(found.record.data) : { data: {}, dropped: [] };
+    const dataFits = Boolean(fitted) && (!hasData || Object.keys(fitted.data).length > 0);
+    // The page does not depend on the rules: a page is placed even when no saved field fits,
+    // and the whole record is kept aside as well.
+    if (!unit && !dataFits) return parkedResult(found);
+    if (!unit && !hasData) return parkedResult(found);
+    if (hasData && dataFits) applyData(doc, fitted.data, rules);
+    if (unit) {
+      whenArticle(() => {
+        if (placeUnit(unit)) return;
+        console.warn("visitor-drafts: this browser's saved page has no page to go into; it was kept aside");
+        park(found.raw, { keepSlot: true });
+      });
+      editorUnit = unit;
+      seenUnit = unit;
+    }
     lastRaw = found.raw;
     base = live();
-    if (fitted.dropped.length) {
+    tip = found.record.data;
+    if (!dataFits || fitted.dropped.length) {
       const parkedKey = park(found.raw, { keepSlot: true });
-      return { restored: true, hadDraft: true, data: fitted.data, partial: true, parked: Boolean(parkedKey), blocked: !parkedKey };
+      return { restored: true, hadDraft: true, data: dataFits ? fitted.data : {}, partial: true, parked: Boolean(parkedKey), blocked: !parkedKey };
     }
     return { restored: true, hadDraft: true, data: fitted.data };
   }
@@ -405,7 +529,14 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   // rules), so only what the page captures is compared.
   function changed() {
     if (stopped) return false;
-    try { return !fitsInto(captured(), base); } catch { return true; }
+    try {
+      const getHTML = window.clay?.getHTML;
+      if (typeof getHTML !== "function") return !fitsInto(live(), base);
+      const parsed = new DOMParser().parseFromString(getHTML.call(window.clay), "text/html");
+      const unit = recordable(readUnit(parsed));
+      // A page equal to the one another tab recorded and this tab took in is not this tab's change.
+      return !fitsInto(extractData(parsed, rules), base) || (!sameUnit(unit, editorUnit) && !sameUnit(unit, seenUnit));
+    } catch { return true; }
   }
 
   // One copy, the latest: a save that would replace another tab's change keeps it
@@ -446,22 +577,161 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     return fitted.data;
   }
 
+  // With the database as the record, a save is an operation: for each key the page changed,
+  // the stored value it was built on (`b`, absent when nothing was) and the value now (`m`).
+  // `tab.ops` are the ones the database has not confirmed, oldest first, under the Start
+  // over marker this page booted on; `sizes` runs beside them. A copy that fits goes into
+  // this tab's journal slot at once, so closing the tab loses nothing: `journaled` is the
+  // last sequence number the slot holds.
+  const tab = { id: newId(), reset: "", acked: 0, seq: 0, journaled: 0, ops: [], sizes: [] };
+  try { tab.reset = storage?.getItem(resetKey) ?? ""; } catch {}
+  try {
+    const known = JSON.parse(window.sessionStorage.getItem(key + ":generation"));
+    if (known?.marker === tab.reset && typeof known.reset === "string") tab.reset = known.reset;
+  } catch {}
+  const slotKey = `${key}:op:${tab.id}`;
+  const chain = () => ({ tab: tab.id, reset: tab.reset, acked: tab.acked, at: now().getTime(), ops: tab.ops });
+
+  function journal() {
+    try {
+      if (!tab.ops.length) {
+        tab.journaled = tab.seq;
+        storage.removeItem(slotKey);
+        return;
+      }
+      const text = JSON.stringify(chain());
+      if (text.length > slotLimit) return;
+      storage.setItem(slotKey, text);
+      tab.journaled = tab.seq;
+    } catch {}
+  }
+
+  // What the page held before its unconfirmed operations, for a page load that falls back
+  // to `localStorage` after it made some.
+  let before = null;
+
+  function capture(html) {
+    if (stopped) return null;
+    if (unparked != null && park(unparked, { keepSlot: true }) === null) {
+      throw storageFailure(doc, new Error("an earlier saved copy could not be kept aside"));
+    }
+    // Too much is waiting: nothing more is taken until it drains, and the page keeps it.
+    if (tab.sizes.reduce((sum, size) => sum + size, 0) >= pendingLimit) throw storageFailure(doc, new Error("too many changes are waiting to be saved"));
+    const parsed = new DOMParser().parseFromString(html, "text/html");
+    const mine = extractData(parsed, rules);
+    const mineUnit = recordable(readUnit(parsed));
+    const unitChanged = !sameUnit(mineUnit, editorUnit);
+    const keys = {};
+    for (const name of Object.keys(mine)) {
+      if (name in base && fitsInto(mine[name], base[name])) continue;
+      // Fields the stored value has and this page's rules lack are carried through.
+      keys[name] = name in tip ? { b: tip[name], m: complete(mine[name], tip[name]) } : { m: mine[name] };
+    }
+    if (!Object.keys(keys).length && !unitChanged) {
+      if (!tab.ops.length) {
+        setDraftStoreFailed(false);
+        doc.dispatchEvent(new CustomEvent("clay:drafts-saved", { detail: { data: mine, unchanged: true } }));
+      }
+      return null;
+    }
+    if (!tab.ops.length) before = { base, editorUnit, seenUnit };
+    const op = { seq: ++tab.seq, savedAt: now().toISOString(), keys, ...(unitChanged && { unit: { seen: unitMark(seenUnit), to: mineUnit } }) };
+    base = { ...base };
+    tip = { ...tip };
+    for (const name of Object.keys(keys)) {
+      base[name] = mine[name];
+      tip[name] = keys[name].m;
+    }
+    if (unitChanged) editorUnit = seenUnit = mineUnit;
+    fresh = false;
+    tab.ops.push(op);
+    tab.sizes.push(JSON.stringify(op).length);
+    journal();
+    return op;
+  }
+
+  // A hide's synchronous half of a save. False while an operation is neither in the
+  // journal slot nor confirmed: closing the tab now could lose it.
+  function keep() {
+    if (stopped) return true;
+    try {
+      if (changed()) capture(window.clay.getHTML());
+    } catch { return false; }
+    return tab.journaled === tab.seq;
+  }
+
+  function acknowledge(seq) {
+    if (seq <= tab.acked) return false;
+    tab.acked = seq;
+    const done = tab.ops.filter((op) => op.seq <= seq).length;
+    tab.ops.splice(0, done);
+    tab.sizes.splice(0, done);
+    journal();
+    return done > 0;
+  }
+
+  function drop() {
+    tab.ops.length = 0;
+    tab.sizes.length = 0;
+    journal();
+  }
+
+  // The database did not open: what the journal holds goes back to being this page's
+  // unsaved changes, for `write` to save.
+  function release() {
+    if (tab.ops.length) ({ base, editorUnit, seenUnit } = before);
+    drop();
+  }
+
+  // A page with nothing unsaved takes in what the database holds: the keys whose stored
+  // value is no longer the one this tab was built on.
+  function take(data) {
+    const moved = Object.fromEntries(Object.entries(data).filter(([name, value]) => !same(value, tip[name])));
+    if (!Object.keys(moved).length) return false;
+    const shown = adopt(moved);
+    tip = { ...tip, ...moved };
+    if (shown) base = { ...base, ...shown };
+    fresh = false;
+    return true;
+  }
+
+  // The generation this page shows has ended, by this tab's Start over or another tab's:
+  // nothing more is saved from it.
+  function stop({ keepPending = false } = {}) {
+    stopped = true;
+    if (!keepPending) drop();
+  }
+
+  const journalSlots = () => storedKeys().filter((name) => name.startsWith(key + ":op:"));
+
   function write(html) {
     if (stopped) return null;
     if (unparked != null && park(unparked, { keepSlot: true }) === null) {
       throw storageFailure(doc, new Error("an earlier saved copy could not be kept aside"));
     }
-    const mine = extractData(new DOMParser().parseFromString(html, "text/html"), rules);
+    const parsed = new DOMParser().parseFromString(html, "text/html");
+    const mine = extractData(parsed, rules);
+    const mineUnit = recordable(readUnit(parsed));
+    const mineChanged = !sameUnit(mineUnit, editorUnit);
     const current = getRaw();
-    if (fitsInto(mine, base) && (current === lastRaw || current == null)) {
+    if (fitsInto(mine, base) && !mineChanged && (current === lastRaw || current == null)) {
       setDraftStoreFailed(false);
       doc.dispatchEvent(new CustomEvent("clay:drafts-saved", { detail: { data: mine, unchanged: true } }));
       return mine;
     }
     const { data, stored, ancestry, parentData } = merge(mine);
+    const record = current == null ? null : parse(current);
+    const theirs = unitOf(record);
+    // A tab whose page did not change keeps the recorded page: its editor may hold an older one.
+    // Both tabs changed it: this tab's page is written and the other is kept aside, as
+    // for any field both tabs changed.
+    const unit = mineChanged ? mineUnit : (record ? theirs : mineUnit);
+    if (mineChanged && record && !sameUnit(theirs, seenUnit)) keepConflict(current);
     const id = newId();
-    const raw = stored ?? JSON.stringify({ v: RECORD_VERSION, savedAt: now().toISOString(), id, ancestry, data });
-    if (!stored) {
+    const raw = stored && sameUnit(unit, theirs)
+      ? stored
+      : JSON.stringify({ v: RECORD_VERSION, savedAt: now().toISOString(), id, ancestry, reset: tab.reset, data, ...(unit && { live: unit.live, blockeditor: unit.blockeditor }) });
+    if (raw !== stored) {
       try {
         if (!storage) throw new Error("no storage");
         storage.setItem(key, raw);
@@ -474,6 +744,10 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     if (taken.length) adopt(Object.fromEntries(taken.map((name) => [name, data[name]])));
     lastRaw = raw;
     base = data;
+    if (mineChanged) editorUnit = mineUnit;
+    // Only a page this tab wrote, or the first record, is one this tab has seen: a page kept
+    // from another tab is not in this tab's editor yet.
+    if (mineChanged || !record) seenUnit = unit;
     setDraftStoreFailed(false);
     doc.dispatchEvent(new CustomEvent("clay:drafts-saved", { detail: { data } }));
     return data;
@@ -506,19 +780,64 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     // adopting a record that dropped its own work.
     if (forked(record) && typeof window.clay?.getHTML === "function") return writeLive();
     const adopted = record && adopt(record.data);
-    if (!adopted) return false;
+    if (!adopted && !unitOf(record)) return false;
     lastRaw = raw;
-    base = { ...base, ...adopted };
+    base = { ...base, ...(adopted || {}) };
     return true;
   }
 
+  // The page another tab recorded since this tab last read or wrote one, or null. `record`
+  // is the database's; without one the copy in `localStorage` is read.
+  function externalUnit(record) {
+    if (stopped) return null;
+    if (record === undefined) {
+      const raw = getRaw();
+      record = raw == null ? null : parse(raw);
+    }
+    const theirs = unitOf(record);
+    return theirs && !sameUnit(theirs, seenUnit) ? theirs : null;
+  }
+
+  // This tab's editor took that page in beside its own: it is no longer another tab's.
+  function adoptedUnit(unit) {
+    seenUnit = unit;
+  }
+
   function clear() {
-    stopped = true;
+    stop();
     unparked = null;
     setDraftStoreFailed(false);
     try { storage.removeItem(key); } catch {}
-    try { storage.setItem(resetKey, newId()); } catch {}
-  }
-
-  return { slot, key, rules, read, restore, write, writeLive, flush, changed, adoptExternal, park, clear, snapshot };
+    const match = /^(\d+)~/.exec(tab.reset);
+    const gen = match ? Number(match[1]) : tab.reset === "" ? 1 : null;
+    try { storage.setItem(resetKey, gen === null ? newId() : `${gen + 1}~${newId()}`); } catch {}
+  }
+
+  return {
+    slot, key, rules, read, restore, write, writeLive, flush, changed, adoptExternal, externalUnit, adoptedUnit, park, clear, snapshot,
+    tab: tab.id, slotKey, chain, capture, keep, acknowledge, release, take, stop, journalSlots,
+    seed: seedData,
+    // For the session, which is fetched after the boot and imports nothing from here.
+    merge3,
+    unitMark,
+    newId,
+    failed: (error) => storageFailure(doc, error),
+    generation: () => tab.reset,
+    enter: (reset) => { tab.reset = reset; },
+    fresh: () => fresh,
+    shown: () => base !== null,
+    pending: () => tab.ops.length,
+    unsafe: () => tab.journaled < tab.seq,
+    stopped: () => stopped,
+    // What `localStorage` holds at the draft's key, whatever wrote it: a record, the head of
+    // a draft whose full record is only in the database (`idb`), or nothing readable.
+    held() {
+      try {
+        const held = JSON.parse(getRaw());
+        return isPlain(held) ? held : null;
+      } catch { return null; }
+    },
+    // A draft is kept when `localStorage` holds its copy or head, or any tab's journal.
+    kept: () => Boolean(read()) || tab.ops.length > 0 || journalSlots().length > 0,
+  };
 }