@rohal12/spindle 0.59.7 → 0.59.8

package/src/components/macros/detached-body.tsx

@@ -1,5 +1,5 @@
 import { render } from 'preact';
-import { useContext } from 'preact/hooks';
+import { useContext, useEffect, useRef } from 'preact/hooks';
 import {
   renderNodes,
   LocalsUpdateContext,
@@ -19,7 +19,10 @@ import { DialogCloseContext } from '../PassageDialog';
  * Return a function that runs a macro body once, outside the passage tree:
  * it renders `children` into a detached node, so the body's macros ({set},
  * {if}, {goto}, ...) fire their side effects through the normal Preact
- * pipeline, then unmounts it. Used by {button} and {link} on click.
+ * pipeline. Used by {button} and {link} on click. The body stays mounted
+ * until the owning macro unmounts (its passage changes, say), so work it
+ * starts in an effect, such as the timer of a {timed} or {repeat}, can
+ * finish; the passage leaving cancels it.
  *
  * A detached render starts with no contexts, so the hook captures the ones
  * the owning macro sees and provides them again: the locals scope (read
@@ -41,6 +44,16 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
   const repeat = useContext(RepeatContext);
   const closeDialog = useContext(DialogCloseContext);
 
+  const mounted = useRef<HTMLElement[]>([]);
+  useEffect(
+    () => () => {
+      for (const container of mounted.current.splice(0)) {
+        render(null, container);
+      }
+    },
+    [],
+  );
+
   const run = (children: ASTNode[]) => {
     const locals = liveLocalsView(updater.getValues);
     const container = document.createElement('div');
@@ -62,7 +75,7 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
       </LocalsUpdateContext.Provider>,
       container,
     );
-    render(null, container);
+    mounted.current.push(container);
   };
   return (children) => runWithCommittedMutations(() => run(children));
 }

package/src/expression.ts

@@ -123,32 +123,22 @@ export function historyQueries(
 }
 
 let cachedFns: ExpressionFns | null = null;
-let cachedVisitCounts: Counts | null = null;
-let cachedRenderCounts: Counts | null = null;
 
+/**
+ * The functions compiled code calls. The history queries read the counters
+ * when called, not when the functions were built: mutation code that
+ * navigates (`Story.goto()`) goes on with the counters of the new state,
+ * as the Story API does.
+ */
 export function buildExpressionFns() {
-  const state = useStoryStore.getState();
-  const { visitCounts, renderCounts } = state;
-
-  if (
-    cachedFns &&
-    cachedVisitCounts === visitCounts &&
-    cachedRenderCounts === renderCounts
-  ) {
-    return cachedFns;
-  }
-
-  cachedFns = {
+  cachedFns ??= {
     ...historyQueries(
-      () => visitCounts,
-      () => renderCounts,
+      () => useStoryStore.getState().visitCounts,
+      () => useStoryStore.getState().renderCounts,
     ),
     random,
     randomInt,
   };
-  cachedVisitCounts = visitCounts;
-  cachedRenderCounts = renderCounts;
-
   return cachedFns;
 }
 
@@ -221,8 +211,6 @@ export function clearExpressionCache(): void {
   fnCache.clear();
   clearTransformCache();
   cachedFns = null;
-  cachedVisitCounts = null;
-  cachedRenderCounts = null;
 }
 
 export function evaluateWithState(expr: string, state: StoryState): unknown {

package/src/hooks/use-modal-focus.ts

@@ -13,9 +13,23 @@ const FOCUSABLE = [
   '[tabindex]:not([tabindex="-1"])',
 ].join(',');
 
+/**
+ * Whether CSS leaves `el` in the tab sequence: not `visibility: hidden`
+ * (inherited, so the computed value covers ancestors) and not inside a
+ * `display: none` element.
+ */
+function isRendered(el: HTMLElement): boolean {
+  const { visibility } = getComputedStyle(el);
+  if (visibility === 'hidden' || visibility === 'collapse') return false;
+  for (let e: HTMLElement | null = el; e; e = e.parentElement) {
+    if (getComputedStyle(e).display === 'none') return false;
+  }
+  return true;
+}
+
 function focusables(root: HTMLElement): HTMLElement[] {
   return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
-    (el) => !el.hidden && !el.closest('[hidden], [inert]'),
+    (el) => !el.hidden && !el.closest('[hidden], [inert]') && isRendered(el),
   );
 }
 

package/src/quick-actions.ts

@@ -0,0 +1,23 @@
+import { useStoryStore } from './store';
+import { showRuntimeError } from './runtime-errors';
+
+/**
+ * QuickSave and QuickLoad as the built-in buttons and hotkeys perform them:
+ * a failure is shown on the page (the Story API's save() and load() only
+ * reject, for the code that awaits them).
+ */
+export async function quickSave(): Promise<void> {
+  try {
+    await useStoryStore.getState().save();
+  } catch (error) {
+    showRuntimeError('The game could not be saved:', error);
+  }
+}
+
+export async function quickLoad(): Promise<void> {
+  try {
+    await useStoryStore.getState().load();
+  } catch (error) {
+    showRuntimeError('The saved game could not be loaded:', error);
+  }
+}

package/src/saves/save-manager.ts

@@ -713,14 +713,22 @@ const SESSION_KEY_PREFIX = 'spindle.session.';
  * encodePayload). Throws, like a save, when the state holds a value a save
  * cannot (a function, an instance of an unregistered class, a unique
  * symbol); the session then keeps its previous copy.
+ *
+ * A storage that is unavailable or full is returned, not thrown: the session
+ * keeps its previous copy then too, but the story can go on, so the caller
+ * decides how to tell the player.
  */
-export function saveSession(ifid: string, payload: SavePayload): void {
+export function saveSession(
+  ifid: string,
+  payload: SavePayload,
+): { error: unknown } | undefined {
   const text = JSON.stringify(encodePayload(payload));
   try {
     sessionStorage.setItem(`${SESSION_KEY_PREFIX}${ifid}`, text);
-  } catch {
-    // sessionStorage unavailable or full — silently ignore
+  } catch (error) {
+    return { error };
   }
+  return undefined;
 }
 
 /**
@@ -889,13 +897,15 @@ async function clearAllDataNow(): Promise<void> {
   resetBackend();
 
   // Clear all Spindle session keys from sessionStorage
-  if (typeof sessionStorage !== 'undefined') {
+  try {
     const toRemove: string[] = [];
     for (let i = 0; i < sessionStorage.length; i++) {
       const key = sessionStorage.key(i);
       if (key?.startsWith('spindle.session.')) toRemove.push(key);
     }
     for (const key of toRemove) sessionStorage.removeItem(key);
+  } catch {
+    // no sessionStorage (or access denied): nothing to clear
   }
 }
 

package/src/saves/storage.ts

@@ -410,8 +410,10 @@ function createIDBBackend(): StorageBackend {
 let _backend: StorageBackend | null = null;
 
 async function detectBackend(): Promise<StorageBackend> {
-  if (typeof indexedDB !== 'undefined') {
-    try {
+  // Even looking up a storage API can throw (a sandboxed frame without
+  // allow-same-origin denies the localStorage property), hence the try.
+  try {
+    if (typeof indexedDB !== 'undefined') {
       await new Promise<void>((resolve, reject) => {
         const req = indexedDB.open('__spindle_probe__', 1);
         req.onsuccess = () => {
@@ -422,21 +424,21 @@ async function detectBackend(): Promise<StorageBackend> {
         req.onerror = () => reject(req.error);
       });
       return createIDBBackend();
-    } catch {
-      // fall through
     }
+  } catch {
+    // fall through
   }
 
-  if (typeof localStorage !== 'undefined') {
-    try {
+  try {
+    if (typeof localStorage !== 'undefined') {
       const probeKey = '__spindle_probe__';
       localStorage.setItem(probeKey, '1');
       const val = localStorage.getItem(probeKey);
       localStorage.removeItem(probeKey);
       if (val === '1') return createLocalStorageBackend();
-    } catch {
-      // fall through
     }
+  } catch {
+    // fall through
   }
 
   return createMemoryBackend();

package/src/settings.ts

@@ -39,7 +39,11 @@ function storageKey(): string {
 }
 
 function persist(): void {
-  localStorage.setItem(storageKey(), JSON.stringify(values));
+  try {
+    localStorage.setItem(storageKey(), JSON.stringify(values));
+  } catch {
+    // storage unavailable or full: the setting holds for this session only
+  }
 }
 
 function loadFromStorage(): void {

package/src/store.ts

@@ -259,7 +259,7 @@ let sessionMoments: SaveHistoryMoment[] = [];
  * Write the game to the session: the whole payload, encoded in one piece
  * on every navigation.
  */
-function persistSession(get: () => StoryState): void {
+function persistSession(get: () => StoryState): { error: unknown } | undefined {
   const {
     storyData,
     currentPassage,
@@ -269,7 +269,7 @@ function persistSession(get: () => StoryState): void {
     visitCounts,
     renderCounts,
   } = get();
-  if (!storyData) return;
+  if (!storyData) return undefined;
 
   // Trim cache when history shrank (navigate() drops discarded forward
   // moments itself, since a replacement branch may keep the same length)
@@ -294,7 +294,7 @@ function persistSession(get: () => StoryState): void {
     }
   }
 
-  saveSession(storyData.ifid, {
+  return saveSession(storyData.ifid, {
     passage: currentPassage,
     variables,
     history: sessionMoments,
@@ -324,7 +324,11 @@ const NAVIGATION_ERROR_CONTEXT = 'The story could not go to another passage:';
 function persistSessionThen(get: () => StoryState, after?: () => void): void {
   let failure: { error: unknown } | undefined;
   try {
-    persistSession(get);
+    const storageFailure = persistSession(get);
+    // The story goes on, but a reload would go back to the last copy
+    if (storageFailure) {
+      showRuntimeError(SESSION_ERROR_CONTEXT, storageFailure.error);
+    }
   } catch (error) {
     failure = { error };
     // The player sees it too: a reload would go back to the last moment

package/src/styles.css

@@ -261,6 +261,11 @@ tw-storydata {
   max-width: 400px;
 }
 
+/* Keep the first control clear of the close button above it */
+.dialog-settings .dialog-body {
+  padding-top: 2.25em;
+}
+
 .dialog-close {
   position: absolute;
   top: 0.75em;

package/src/widgets/widget-def.ts

@@ -36,7 +36,14 @@ export function parseWidgetDef(rawArgs: string): WidgetDef {
   return widgetDef(parseMacroArgs(rawArgs, WIDGET_PARAMETERS));
 }
 
-const BLOCK_WIDGET = /\{widget\s+["']?(\w+)["']?[^}]*\}([\s\S]*?)\{\/widget\}/g;
+/**
+ * A definition: its arguments (read like a {widget} macro's, see
+ * parseWidgetDef) and its body. Macro names are not case-sensitive.
+ */
+const WIDGET_DEFINITION = /\{widget\s+([^}]*)\}([\s\S]*?)\{\/widget\}/gi;
+
+/** `{@children}`, also with selectors such as `{.highlight @children}`. */
+const CHILDREN_PLACEHOLDER = /\{[^{}]*@children\s*\}/;
 
 /**
  * The names of the block widgets (those whose body renders `{@children}`)
@@ -52,8 +59,13 @@ export function blockWidgetNames(
     if (passage.name !== 'StoryInit' && !passage.tags?.includes('widget')) {
       continue;
     }
-    for (const match of passage.content.matchAll(BLOCK_WIDGET)) {
-      if (/\{@children\}/.test(match[2]!)) names.push(match[1]!);
+    for (const match of passage.content.matchAll(WIDGET_DEFINITION)) {
+      if (!CHILDREN_PLACEHOLDER.test(match[2]!)) continue;
+      try {
+        names.push(parseWidgetDef(match[1]!).name);
+      } catch {
+        // The {widget} macro reports a definition it cannot read
+      }
     }
   }
   return names;