@rohal12/spindle 0.59.1 → 0.59.2

package/src/execute-mutation.ts

@@ -10,13 +10,18 @@ import { useStoryStore } from './store';
 import type { StoryState, VariableNamespaces } from './store';
 import { execute } from './expression';
 import {
+  aliasChanges,
   applyChange,
   deepClone,
   deepEqual,
   diffPaths,
+  existingObjects,
   isApplied,
   isMergeable,
+  locateObjects,
   mergeKeys,
+  pathKey,
+  underChange,
   type PathChange,
 } from './structural';
 import { getByPath } from './utils/object-path';
@@ -71,6 +76,39 @@ export function readState(): StoryState {
 const cloneValue = <T>(value: T): T =>
   deepClone(value, { keepUnregistered: true });
 
+/** Copies values for one target, so what they share they share there too. */
+type Cloner = <T>(value: T) => T;
+
+/**
+ * A cloner of values written into `target`. The references among the values
+ * it copies are kept (`$b = $a` writes one array twice: the two paths get
+ * one copy), and, given where the objects of the source are (see
+ * locateObjects), an object that is one the target holds already is that
+ * one, not a copy: `$a.self = $a` refers to the root of `a` in the store.
+ */
+function clonerFor(
+  target: Record<string, unknown>,
+  paths?: ReadonlyMap<object, string[]>,
+): Cloner {
+  const seen = paths ? existingObjects(paths, target) : new Map();
+  return (value) => deepClone(value, { keepUnregistered: true, seen });
+}
+
+/** One cloner per target copy, made when first used. */
+const clonersFor = (
+  paths?: (target: Record<string, unknown>) => ReadonlyMap<object, string[]>,
+) => {
+  const made = new Map<object, Cloner>();
+  return (target: Record<string, unknown>): Cloner => {
+    let cloner = made.get(target);
+    if (!cloner) {
+      cloner = clonerFor(target, paths?.(target));
+      made.set(target, cloner);
+    }
+    return cloner;
+  };
+};
+
 /**
  * A frozen copy of a value read from a working copy, matching what reads
  * from the (frozen) store return: writing to it fails instead of changing
@@ -94,6 +132,7 @@ function mirror(
   ns: NamespaceName,
   change: PathChange,
   scopes: readonly MutationScope[] = activeScopes,
+  cloner: (target: Record<string, unknown>) => Cloner = clonerOf,
 ): void {
   const root = change.path[0]!;
   for (const scope of scopes) {
@@ -103,7 +142,7 @@ function mirror(
           copy,
           change.deleted
             ? change
-            : { ...change, value: cloneValue(change.value) },
+            : { ...change, value: cloner(copy)(change.value) },
         );
       } catch {
         const stored = draft[ns][root];
@@ -119,6 +158,9 @@ function mirror(
   }
 }
 
+/** A cloner of a copy of its own (no references shared with others). */
+const clonerOf = (target: Record<string, unknown>): Cloner => clonerFor(target);
+
 const NAMESPACE_KEYS: ReadonlySet<string> = new Set(NAMESPACES);
 
 /**
@@ -244,10 +286,19 @@ export function routeStoreUpdate<S extends VariableNamespaces>(
       own.length ? writtenPaths(view[ns], next[ns], own) : [],
     ] as const;
   });
-  const owned = (change: PathChange): PathChange =>
-    change.deleted ? change : { ...change, value: cloneValue(change.value) };
+  // Each target takes its own copies, which share what the written values do
+  const cloners = clonersFor();
+  const owned = (
+    change: PathChange,
+    target: Record<string, unknown>,
+  ): PathChange =>
+    change.deleted
+      ? change
+      : { ...change, value: cloners(target)(change.value) };
   for (const [ns, list] of changes) {
-    for (const change of list) applyChange(inner.work[ns], owned(change));
+    for (const change of list) {
+      applyChange(inner.work[ns], owned(change, inner.work[ns]));
+    }
   }
 
   return (draft) => {
@@ -266,7 +317,7 @@ export function routeStoreUpdate<S extends VariableNamespaces>(
       for (const change of list) {
         const root = change.path[0]!;
         try {
-          applyChange(namespaces[ns], owned(change));
+          applyChange(namespaces[ns], owned(change, namespaces[ns]));
         } catch {
           if (hasOwn(inner.work[ns], root)) {
             namespaces[ns][root] = cloneValue(inner.work[ns][root]);
@@ -274,7 +325,7 @@ export function routeStoreUpdate<S extends VariableNamespaces>(
             delete namespaces[ns][root];
           }
         }
-        mirror(namespaces, ns, change);
+        mirror(namespaces, ns, change, activeScopes, cloners);
       }
     }
   };
@@ -312,7 +363,7 @@ function commitScopes(commits: readonly Commit[]): void {
     scope,
     keepRunning,
     changes: NAMESPACES.map(
-      (ns) => [ns, diffPaths(scope.base[ns], scope.work[ns])] as const,
+      (ns) => [ns, changesOf(scope.base[ns], scope.work[ns])] as const,
     ),
   }));
   const changed = all.filter(({ changes }) =>
@@ -336,35 +387,84 @@ function commitScopes(commits: readonly Commit[]): void {
   }
 
   function commitRecipe(draft: VariableNamespaces): void {
-    all.forEach(({ scope, keepRunning, changes }, i) => {
-      const own = <T>(value: T): T => (keepRunning ? cloneValue(value) : value);
+    all.forEach(({ scope, changes }, i) => {
+      // The copies the store and the enclosing mutations take are their own,
+      // and keep the references of the values written (one object written
+      // at two paths is one object there) and to the objects they hold
+      // already (see clonerFor). The code's working copy stays its own.
+      const paths = new Map(
+        changes.map(([ns, list]) => [ns, locateObjects(scope.work[ns], list)]),
+      );
+      const own = new Map(
+        changes.map(([ns]) => [ns, clonerFor(draft[ns], paths.get(ns))]),
+      );
+      const enclosing = all.slice(0, i).map((c) => c.scope);
+      const enclosingCloners = new Map(
+        changes.map(([ns]) => [ns, clonersFor(() => paths.get(ns)!)]),
+      );
       for (const [ns, list] of changes) {
         const replaced = new Set<string>();
         for (const change of list) {
           const root = change.path[0]!;
-          // A changed path already holding the value keeps its reference
-          if (replaced.has(root) || isApplied(draft[ns], change)) continue;
+          if (replaced.has(root)) continue;
           try {
-            applyChange(
-              draft[ns],
-              change.deleted ? change : { ...change, value: own(change.value) },
-            );
+            if (change.deleted) {
+              if (!isApplied(draft[ns], change)) applyChange(draft[ns], change);
+              continue;
+            }
+            // A changed path already holding the value keeps its reference;
+            // an alias change is one of reference only: it holds when the
+            // very object is there.
+            const value = change.alias ? own.get(ns)!(change.value) : undefined;
+            if (
+              change.alias
+                ? Object.is(getByPath(draft[ns], change.path), value)
+                : isApplied(draft[ns], change)
+            ) {
+              continue;
+            }
+            applyChange(draft[ns], {
+              ...change,
+              value: change.alias ? value : own.get(ns)!(change.value),
+            });
           } catch {
             // An intermediate object the code wrote into is gone from the
             // store: the code's view of the whole root wins.
-            draft[ns][root] = own(scope.work[ns][root]);
+            draft[ns][root] = own.get(ns)!(scope.work[ns][root]);
             replaced.add(root);
           }
         }
         // Hand the changes to the mutations this one runs inside, before
         // watchers fired by this update run.
-        const enclosing = all.slice(0, i).map((c) => c.scope);
-        for (const change of list) mirror(draft, ns, change, enclosing);
+        for (const change of list) {
+          mirror(draft, ns, change, enclosing, enclosingCloners.get(ns)!);
+        }
       }
     });
   }
 }
 
+/**
+ * The changes of the code to a namespace: its property paths that differ
+ * (see diffPaths), and those that hold equal content but another object
+ * than they did (see aliasChanges), those first.
+ */
+function changesOf(
+  base: Record<string, unknown>,
+  work: Record<string, unknown>,
+): PathChange[] {
+  const written = diffPaths(base, work);
+  const keys = new Set(written.map((c) => pathKey(c.path)));
+  const aliases: PathChange[] = [];
+  for (const change of aliasChanges(base, work)) {
+    // Written whole by a change at it or above it
+    if (underChange(change.path, keys)) continue;
+    keys.add(pathKey(change.path));
+    aliases.push(change);
+  }
+  return [...aliases, ...written];
+}
+
 /** Every running mutation, to commit with its code going on. */
 const running = (): Commit[] =>
   activeScopes.map((scope) => ({ scope, keepRunning: true }));

package/src/saves/save-manager.ts

@@ -7,6 +7,7 @@ import type {
   SaveExport,
   StorageInfo,
 } from './types';
+import { randomUUID } from '../utils/uuid';
 import { checkSaveExport, estimatePayloadBytes } from './types';
 import {
   decodePayload,
@@ -130,7 +131,7 @@ export const startNewPlaythrough = queued(startNewPlaythroughNow);
 
 async function startNewPlaythroughNow(
   ifid: string,
-  id: string = crypto.randomUUID(),
+  id: string = randomUUID(),
 ): Promise<string> {
   const backend = await getBackend();
   const num = await nextPlaythroughNumber(ifid);
@@ -296,7 +297,7 @@ async function createSaveNow(
 ): Promise<SaveRecord> {
   const now = new Date().toISOString();
   const meta: SaveMeta = {
-    id: crypto.randomUUID(),
+    id: randomUUID(),
     ifid,
     playthroughId,
     createdAt: now,
@@ -774,7 +775,7 @@ async function prepareImport(data: unknown, ifid: string): Promise<SaveRecord> {
 
   // Re-assign a new ID to avoid collisions
   const record = deepClone(data.save);
-  record.meta.id = crypto.randomUUID();
+  record.meta.id = randomUUID();
   record.meta.updatedAt = new Date().toISOString();
   // The save now belongs to this story: it is listed, loaded and cleared
   // with it, whatever its own metadata says

package/src/saves/storage.ts

@@ -289,7 +289,16 @@ function createIDBBackend(): StorageBackend {
         }
       };
 
-      req.onsuccess = () => resolve(req.result);
+      req.onsuccess = () => {
+        const db = req.result;
+        // Let another tab delete or upgrade the database: close at once and
+        // reopen on the next use.
+        db.onversionchange = () => {
+          db.close();
+          dbPromise = null;
+        };
+        resolve(db);
+      };
       req.onerror = () => reject(req.error);
     });
 
@@ -361,6 +370,12 @@ function createIDBBackend(): StorageBackend {
       const req = indexedDB.deleteDatabase(IDB_DB_NAME);
       req.onsuccess = () => resolve();
       req.onerror = () => reject(req.error);
+      req.onblocked = () =>
+        reject(
+          new Error(
+            'Cannot clear the saved data: another tab or window of this site still has it open. Close the other tabs and try again.',
+          ),
+        );
     });
   });
 }

package/src/store.ts

@@ -1,4 +1,5 @@
 import { create } from './preact-store';
+import { randomUUID } from './utils/uuid';
 import { immer } from 'zustand/middleware/immer';
 import type { StateCreator } from 'zustand/vanilla';
 import {
@@ -595,7 +596,7 @@ function switchToPlaythrough(id: string, stored: Promise<unknown>): void {
 
 /** Move the running game to a new playthrough at once (see restart). */
 function switchToNewPlaythrough(ifid: string): void {
-  const id = crypto.randomUUID();
+  const id = randomUUID();
   const stored = startNewPlaythrough(ifid, id).catch((err) => {
     console.error('spindle: failed to start new playthrough', err);
   });
@@ -1484,7 +1485,7 @@ export const useStoryStore = create<StoryState>()(
       const ifid = storyData.ifid;
       const current = knownPlaythroughId();
       const established = playthroughSetup;
-      const replacementId = crypto.randomUUID();
+      const replacementId = randomUUID();
       const deletion = smDeletePlaythroughData(ifid, playthroughId, {
         current: current || established,
         id: replacementId,

package/src/story-variables.ts

@@ -333,6 +333,8 @@ function collectTokenRefs(
     const token = tokens[t]!;
     if (token.type === 'variable') {
       if (token.scope === 'variable' && token.name) onRef(token.name);
+    } else if (token.type === 'link') {
+      scanInterpolations(token.display, onRef);
     } else if (token.type === 'expression') {
       scanCode(token.expression, onRef);
     } else if (token.type === 'html') {
@@ -342,6 +344,9 @@ function collectTokenRefs(
       }
     } else if (token.type === 'macro' && !token.isClose) {
       scanArgs(token, parametersOf(token.name), onRef);
+      // Selectors (`{.{$cls} button}`) are interpolated when rendered
+      if (token.className) scanInterpolations(token.className, onRef);
+      if (token.id) scanInterpolations(token.id, onRef);
 
       if (storeVarMacros.has(token.name.toLowerCase())) {
         const first = token.rawArgs.trim().split(/\s+/)[0] ?? '';
@@ -351,13 +356,19 @@ function collectTokenRefs(
         else if (!/^["'`]/.test(first)) scanCode(first, onRef);
       }
 
-      if (token.name === 'do') {
+      if (token.name.toLowerCase() === 'do') {
         // A {do} body is JavaScript: scan its source text as code, however
         // the markup tokens split it up.
         let close = t + 1;
         while (close < tokens.length) {
           const c = tokens[close]!;
-          if (c.type === 'macro' && c.isClose && c.name === 'do') break;
+          if (
+            c.type === 'macro' &&
+            c.isClose &&
+            c.name.toLowerCase() === 'do'
+          ) {
+            break;
+          }
           close++;
         }
         if (close < tokens.length) {

package/src/structural.ts

@@ -334,9 +334,17 @@ function equalBuiltin(
 ): boolean | undefined {
   if (a instanceof Date) return Object.is(a.getTime(), (b as Date).getTime());
   if (a instanceof RegExp) return String(a) === String(b);
-  if (ArrayBuffer.isView(a) || a instanceof ArrayBuffer) {
-    return equalBytes(a, b as ArrayBuffer);
+  if (ArrayBuffer.isView(a)) {
+    // A view is its place in its backing buffer, and the whole buffer (which
+    // other views can share): equal only if both match.
+    const v = b as ArrayBufferView;
+    return (
+      a.byteOffset === v.byteOffset &&
+      a.byteLength === v.byteLength &&
+      equal(a.buffer, v.buffer, assumed)
+    );
   }
+  if (a instanceof ArrayBuffer) return equalBytes(a, b as ArrayBuffer);
   if (a instanceof URL || a instanceof URLSearchParams) {
     return String(a) === String(b);
   }
@@ -521,7 +529,17 @@ export function keyChanges(
 
 /** A write to one property path of an object, or its deletion. */
 export type PathChange =
-  | { path: string[]; deleted: false; value: unknown }
+  | {
+      path: string[];
+      deleted: false;
+      value: unknown;
+      /**
+       * Set where the value is the same content as before and only which
+       * object the path refers to changed (see aliasChanges), so a store
+       * holding equal content there still takes the write.
+       */
+      alias?: true;
+    }
   | { path: string[]; deleted: true };
 
 /**
@@ -560,6 +578,130 @@ export function diffPaths(
   return changes;
 }
 
+export const pathKey = (path: readonly string[]): string =>
+  JSON.stringify(path);
+
+/** Whether `path`, or one of its ancestors, is one of `keys`. */
+export function underChange(
+  path: readonly string[],
+  keys: ReadonlySet<string>,
+): boolean {
+  for (let n = 1; n <= path.length; n++) {
+    if (keys.has(pathKey(path.slice(0, n)))) return true;
+  }
+  return false;
+}
+
+/**
+ * Where each object (or array, or other value) of `root` first appears, in
+ * depth-first order. Plain objects are entered; arrays and other values are
+ * leaves. A path at or below one of `skip` is left out.
+ */
+function firstPaths(
+  root: Record<string, unknown>,
+  skip: ReadonlySet<string> = new Set(),
+): Map<object, string[]> {
+  const found = new Map<object, string[]>();
+  (function walk(node: Record<string, unknown>, path: string[]): void {
+    for (const key of Object.keys(node)) {
+      const value = node[key];
+      if (!isObjectValue(value) || found.has(value)) continue;
+      const at = [...path, key];
+      if (skip.has(pathKey(at))) continue;
+      found.set(value, at);
+      if (isMergeable(value)) walk(value, at);
+    }
+  })(root, []);
+  return found;
+}
+
+/**
+ * The paths whose object is another one in the references of `after` than in
+ * `before`, as to where its first appearance is: `$a = $b` makes `a` another
+ * name for the object of `b` even where both hold equal content, and a
+ * `diffPaths` over the content finds nothing. Only paths both hold an object
+ * at are reported, parents before children; each is a write of the object
+ * `after` holds.
+ */
+export function aliasChanges(
+  before: Record<string, unknown>,
+  after: Record<string, unknown>,
+): PathChange[] {
+  const earlier = firstPaths(before);
+  const later = firstPaths(after);
+  const changes: PathChange[] = [];
+  (function walk(
+    b: Record<string, unknown>,
+    a: Record<string, unknown>,
+    path: string[],
+  ): void {
+    for (const key of Object.keys(a)) {
+      if (!hasOwn(b, key)) continue;
+      const x = b[key];
+      const y = a[key];
+      if (!isObjectValue(x) || !isObjectValue(y)) continue;
+      const at = [...path, key];
+      const wasAt = earlier.get(x)!;
+      const isAt = later.get(y)!;
+      const k = pathKey(at);
+      if (pathKey(wasAt) !== pathKey(isAt)) {
+        changes.push({ path: at, deleted: false, value: y, alias: true });
+      }
+      // Only paths that are first appearances are entered: elsewhere the
+      // contents are those of the object met first.
+      if (
+        isMergeable(x) &&
+        mergesWith(x, y, false) &&
+        pathKey(isAt) === k &&
+        pathKey(wasAt) === k
+      ) {
+        walk(x, y as Record<string, unknown>, at);
+      }
+    }
+  })(before, after, []);
+  return changes;
+}
+
+/**
+ * Where the objects of `source` are, other than at or below the paths of
+ * `changes` (which write something new there), for `existingObjects`.
+ */
+export function locateObjects(
+  source: Record<string, unknown>,
+  changes: readonly PathChange[],
+): Map<object, string[]> {
+  return firstPaths(source, new Set(changes.map((c) => pathKey(c.path))));
+}
+
+/**
+ * A map for `deepClone`'s `seen`: an object of the source `paths` locate
+ * (see locateObjects) is copied as the object at the same path in `target`,
+ * so a value that refers to an object the store holds refers to it again
+ * after the copy, not to a copy of it. Objects are looked up in `target`
+ * when met, not up front.
+ */
+export function existingObjects(
+  paths: ReadonlyMap<object, string[]>,
+  target: Record<string, unknown>,
+): Map<object, object> {
+  return new (class extends Map<object, object> {
+    override has(obj: object): boolean {
+      if (super.has(obj)) return true;
+      const path = paths.get(obj);
+      if (!path) return false;
+      const found = getByPath(target, path);
+      const like =
+        isObjectValue(found) &&
+        (Array.isArray(found)
+          ? Array.isArray(obj)
+          : Object.getPrototypeOf(found) === Object.getPrototypeOf(obj));
+      if (!like) return false;
+      super.set(obj, found as object);
+      return true;
+    }
+  })();
+}
+
 /** Whether `target` already holds what `change` would write. */
 export function isApplied(
   target: Record<string, unknown>,

package/src/triggers.ts

@@ -305,15 +305,35 @@ export function registerDialogHost(callbacks: DialogHostCallbacks): () => void {
   };
 }
 
+/**
+ * The dialogs on display, bottom first, whoever opened them: the trigger
+ * host, `{dialog}` or a menubar button (each PassageDialog registers itself
+ * while mounted), as the function that closes each.
+ */
+const openDialogs: Array<() => void> = [];
+
+/** Register a displayed dialog; returns the function that unregisters it. */
+export function registerOpenDialog(close: () => void): () => void {
+  openDialogs.push(close);
+  return () => {
+    const i = openDialogs.lastIndexOf(close);
+    if (i >= 0) openDialogs.splice(i, 1);
+  };
+}
+
+/** Close the topmost dialog. */
 export function closeCurrentDialog(): void {
-  dialogHostCallbacks?.close();
+  const top = openDialogs[openDialogs.length - 1];
+  if (top) top();
+  else dialogHostCallbacks?.close();
 }
 
 export function closeAllOpenDialogs(): void {
   clearDialogQueue();
+  for (const close of [...openDialogs].reverse()) close();
   dialogHostCallbacks?.closeAll();
 }
 
 export function isDialogShowing(): boolean {
-  return dialogHostCallbacks?.isOpen() ?? false;
+  return openDialogs.length > 0 || (dialogHostCallbacks?.isOpen() ?? false);
 }

package/src/utils/uuid.ts

@@ -0,0 +1,18 @@
+/**
+ * A random UUID (v4). `crypto.randomUUID` exists only in secure contexts, so
+ * on a plain HTTP origin the ID is built from `crypto.getRandomValues`.
+ */
+export function randomUUID(): string {
+  if (typeof crypto.randomUUID === 'function') return crypto.randomUUID();
+  const bytes = crypto.getRandomValues(new Uint8Array(16));
+  bytes[6] = (bytes[6]! & 0x0f) | 0x40;
+  bytes[8] = (bytes[8]! & 0x3f) | 0x80;
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0'));
+  return [
+    hex.slice(0, 4).join(''),
+    hex.slice(4, 6).join(''),
+    hex.slice(6, 8).join(''),
+    hex.slice(8, 10).join(''),
+    hex.slice(10).join(''),
+  ].join('-');
+}