@rohal12/spindle 0.51.4 → 0.52.1

package/src/components/PassageDialog.tsx

@@ -6,6 +6,7 @@ import { renderNodes, NobrContext } from '../markup/render';
 import { useStoryStore } from '../store';
 import { emitFromRender } from '../event-emitter';
 import { useModalFocus } from '../hooks/use-modal-focus';
+import { errorMessage } from '../utils/error-message';
 
 export const DialogCloseContext = createContext<(() => void) | null>(null);
 
@@ -61,11 +62,7 @@ export function PassageDialog({
         nodes
       );
     } catch (err) {
-      return (
-        <div class="error">
-          Error in dialog: {err instanceof Error ? err.message : String(err)}
-        </div>
-      );
+      return <div class="error">Error in dialog: {errorMessage(err)}</div>;
     }
   }, [markup, nobr]);
 

package/src/components/StoryInterface.tsx

@@ -3,6 +3,7 @@ import { useStoryStore } from '../store';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
 import { renderInlineNodes, NobrContext } from '../markup/render';
+import { errorMessage } from '../utils/error-message';
 
 const DEFAULT_MARKUP =
   '<header class="story-menubar">{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}</header>\n{passage}';
@@ -22,10 +23,7 @@ export function StoryInterface() {
       return <>{renderInlineNodes(ast)}</>;
     } catch (err) {
       return (
-        <span class="error">
-          Error in StoryInterface:{' '}
-          {err instanceof Error ? err.message : String(err)}
-        </span>
+        <span class="error">Error in StoryInterface: {errorMessage(err)}</span>
       );
     }
   }, [markup]);

package/src/components/macros/Button.tsx

@@ -1,14 +1,6 @@
-import { h, render } from 'preact';
-import { useContext } from 'preact/hooks';
 import { defineMacro } from '../../define-macro';
 import { readWholeQuoted } from './arg-utils';
-import {
-  renderNodes,
-  LocalsUpdateContext,
-  LocalsValuesContext,
-  NobrContext,
-} from '../../markup/render';
-import { liveLocalsView } from '../../utils/live-locals';
+import { useDetachedBody } from './detached-body';
 
 defineMacro({
   name: 'button',
@@ -18,29 +10,11 @@ defineMacro({
     const text =
       readWholeQuoted(rawArgs.trim()) ?? rawArgs.replace(/^["']|["']$/g, '');
     const label = ctx.resolve?.(text) ?? rawArgs;
-    const nobr = useContext(NobrContext);
+    const runBody = useDetachedBody();
 
-    const handleClick = () => {
-      // Render children into a detached DOM node — all macro side effects
-      // ({set}, {if}, {unwatch}, etc.) fire through the normal Preact pipeline.
-      // Wrap with locals context so @local variables from for-loops are available.
-      const container = document.createElement('div');
-      const vnode = h(
-        NobrContext.Provider,
-        { value: nobr },
-        h(
-          LocalsUpdateContext.Provider,
-          { value: { update: ctx.update, getValues: ctx.getValues } },
-          h(
-            LocalsValuesContext.Provider,
-            { value: liveLocalsView(ctx.getValues) },
-            renderNodes(children),
-          ),
-        ),
-      );
-      render(vnode, container);
-      render(null, container);
-    };
+    // Run the body outside the passage tree: all macro side effects ({set},
+    // {if}, {unwatch}, etc.) fire through the normal Preact pipeline.
+    const handleClick = () => runBody(children);
 
     ctx.useAction({
       type: 'button',

package/src/components/macros/Checkbox.tsx

@@ -1,10 +1,13 @@
 import { defineMacro } from '../../define-macro';
 import { readWholeQuoted, stripLooseQuotes } from './arg-utils';
 
-function parseLabel(rawArgs: string): string {
-  const match = rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+(.+?)\s*$/);
+export function parseCheckboxLabel(rawArgs: string): string {
+  // `s`: a quoted label may span lines. Its trailing whitespace is trimmed
+  // here, not by the regex: `(.+?)\s*$` tries every position of a run of
+  // spaces in the label, taking time quadratic in its length.
+  const match = rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+(.+)$/s);
   if (!match) return '';
-  const rest = match[1]!;
+  const rest = match[1]!.trimEnd() || match[1]!;
   return readWholeQuoted(rest) ?? stripLooseQuotes(rest);
 }
 
@@ -12,7 +15,7 @@ defineMacro({
   name: 'checkbox',
   storeVar: true,
   render({ rawArgs }, ctx) {
-    const label = parseLabel(rawArgs);
+    const label = parseCheckboxLabel(rawArgs);
 
     ctx.useAction({
       type: 'checkbox',

package/src/components/macros/Computed.tsx

@@ -1,9 +1,18 @@
 import { useStoryStore } from '../../store';
 import { evaluate } from '../../expression';
+import { readState } from '../../execute-mutation';
 import { deepEqual } from '../../class-registry';
 import { currentSourceLocation } from '../../utils/source-location';
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
+import { checkVariableName } from '../../utils/namespace';
+
+/**
+ * The previous output before the first successful evaluation. Distinct from
+ * every value an expression can produce, so the first result is always
+ * applied, even `undefined`; a first evaluation that throws leaves it unset.
+ */
+const UNSET: unique symbol = Symbol('unset');
 
 function parseComputedArgs(rawArgs: string): { target: string; expr: string } {
   const trimmed = rawArgs.trim();
@@ -29,6 +38,7 @@ function parseComputedArgs(rawArgs: string): { target: string; expr: string } {
         );
       }
 
+      checkVariableName(target.slice(1), target);
       return { target, expr };
     }
   }
@@ -38,22 +48,30 @@ function parseComputedArgs(rawArgs: string): { target: string; expr: string } {
   );
 }
 
+/**
+ * Evaluate `expr` against the current values — the store's state and the
+ * enclosing locals scope's live values (`getLocals`) — and write the result
+ * to the target if it differs from the previous output (always, the first
+ * time). Reading live values rather than the render's snapshot means the
+ * first computation sees a local a preceding {set} just assigned (the scope's
+ * context value only catches up on its re-render), and the first computation
+ * and later recomputations read the same source.
+ */
 function computeAndApply(
   expr: string,
   name: string,
   isTemp: boolean,
   isLocal: boolean,
-  variables: Record<string, unknown>,
-  temporary: Record<string, unknown>,
-  locals: Record<string, unknown>,
-  transient: Record<string, unknown>,
+  getLocals: () => Record<string, unknown>,
   rawArgs: string,
   prevRef: { current: unknown },
   localsUpdate: ((key: string, value: unknown) => void) | null,
 ): void {
   let newValue: unknown;
   try {
-    newValue = evaluate(expr, variables, temporary, locals, transient);
+    // In program order, also when mutation code sets this off
+    const { variables, temporary, transient } = readState();
+    newValue = evaluate(expr, variables, temporary, getLocals(), transient);
   } catch (err) {
     console.error(
       `spindle: Error in {computed ${rawArgs}}${currentSourceLocation()}:`,
@@ -104,7 +122,7 @@ defineMacro({
     const name = target.slice(1);
     const localsUpdate = isLocal ? ctx.update : null;
 
-    const prevOutput = ctx.hooks.useRef<unknown>(undefined);
+    const prevOutput = ctx.hooks.useRef<unknown>(UNSET);
 
     const ran = ctx.hooks.useRef(false);
     if (!ran.current) {
@@ -114,26 +132,22 @@ defineMacro({
         name,
         isTemp,
         isLocal,
-        mergedVars,
-        mergedTemps,
-        mergedLocals,
-        mergedTrans,
+        ctx.getValues,
         rawArgs,
         prevOutput,
         localsUpdate,
       );
     }
 
+    // The merged values only decide when to recompute; computeAndApply reads
+    // the current ones.
     ctx.hooks.useLayoutEffect(() => {
       computeAndApply(
         expr,
         name,
         isTemp,
         isLocal,
-        mergedVars,
-        mergedTemps,
-        mergedLocals,
-        mergedTrans,
+        ctx.getValues,
         rawArgs,
         prevOutput,
         localsUpdate,

package/src/components/macros/For.tsx

@@ -10,12 +10,18 @@ import {
   LocalsUpdateContext,
   NobrContext,
   InlineContext,
+  RawTextContext,
   renderNodes,
 } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
 import { stableKey } from '../../utils/stable-key';
 import type { ASTNode } from '../../markup/ast';
+import {
+  checkVariableName,
+  createNamespace,
+  withEntry,
+} from '../../utils/namespace';
 
 /**
  * Parse for-loop args: "@item, @i of $list" or "@item of $list"
@@ -46,6 +52,9 @@ function parseForArgs(rawArgs: string): {
     );
   }
 
+  checkVariableName(itemVar.slice(1), itemVar);
+  if (indexVar) checkVariableName(indexVar.slice(1), indexVar);
+
   return {
     itemVar: itemVar.slice(1),
     indexVar: indexVar ? indexVar.slice(1) : null,
@@ -81,7 +90,7 @@ function ForIteration({
   );
 
   const localState = useMemo(
-    () => ({ ...parentValues, ...ownKeys, ...localMutations }),
+    () => createNamespace(parentValues, ownKeys, localMutations),
     [parentValues, ownKeys, localMutations],
   );
 
@@ -93,18 +102,20 @@ function ForIteration({
     // Apply synchronously so later macros in the same render pass (e.g. a
     // second {set}) read the new value via getValues(); the state update
     // then re-renders consumers of LocalsValuesContext.
-    valuesRef.current = { ...valuesRef.current, [key]: value };
+    checkVariableName(key, `@${key}`);
+    valuesRef.current = withEntry(valuesRef.current, key, value);
     setLocalMutations((prev) => ({ ...prev, [key]: value }));
   }, []);
   const updater = useMemo(() => ({ update, getValues }), [update, getValues]);
 
   const nobr = useContext(NobrContext);
   const inline = useContext(InlineContext);
+  const raw = useContext(RawTextContext);
 
   return (
     <LocalsUpdateContext.Provider value={updater}>
       <LocalsValuesContext.Provider value={localState}>
-        {renderNodes(children, { nobr, inline, locals: localState })}
+        {renderNodes(children, { nobr, inline, raw, locals: localState })}
       </LocalsValuesContext.Provider>
     </LocalsUpdateContext.Provider>
   );
@@ -166,4 +177,19 @@ defineMacro({
 
     return ctx.wrap(content);
   },
+  text({ rawArgs, children = [] }, ctx) {
+    const { itemVar, indexVar, listExpr } = parseForArgs(rawArgs);
+    const list = ctx.evaluate(listExpr);
+    if (!Array.isArray(list)) {
+      throw new Error('expression did not evaluate to an array');
+    }
+    return list
+      .map((item, i) =>
+        ctx.renderText(children, {
+          [itemVar]: item,
+          ...(indexVar ? { [indexVar]: i } : undefined),
+        }),
+      )
+      .join('');
+  },
 });

package/src/components/macros/If.tsx

@@ -45,4 +45,12 @@ defineMacro({
 
     return null;
   },
+  text({ branches = [] }, ctx) {
+    for (const branch of branches) {
+      if (branch.rawArgs === '' || ctx.evaluate(branch.rawArgs)) {
+        return ctx.renderText(branch.children);
+      }
+    }
+    return '';
+  },
 });

package/src/components/macros/Include.tsx

@@ -3,7 +3,7 @@ import { tokenize } from '../../markup/tokenizer';
 import { buildAST } from '../../markup/ast';
 import { NobrContext } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
-import { isWhitespace, topLevelIndices } from './arg-utils';
+import { endsWithOperator, isWhitespace, topLevelIndices } from './arg-utils';
 
 const FLAG = 'inline';
 
@@ -13,7 +13,7 @@ const FLAG = 'inline';
  * braces, separated by whitespace from the target expression, so passage
  * names and expressions containing the word stay intact (#201).
  */
-function parseIncludeArgs(rawArgs: string): {
+export function parseIncludeArgs(rawArgs: string): {
   nameExpr: string;
   inline: boolean;
 } {
@@ -32,19 +32,20 @@ function parseIncludeArgs(rawArgs: string): {
     last = [spaces[e]!, spaces[spaces.length - 1]! + 1];
   }
 
-  // Next to a binary operator the word is an operand (`"a" + inline`).
+  // Next to a binary operator the word is an operand (`"a" + inline`);
+  // the closing `/` of a regex literal is not one.
   if (
     last &&
     last[1] === trimmed.length - FLAG.length &&
     trimmed.endsWith(FLAG)
   ) {
     const rest = trimmed.slice(0, last[0]);
-    if (!/[-+*/%&|^!=<>?:,.]$/.test(rest))
-      return { nameExpr: rest, inline: true };
+    if (!endsWithOperator(rest)) return { nameExpr: rest, inline: true };
   }
   if (first && first[0] === FLAG.length && trimmed.startsWith(FLAG)) {
     const rest = trimmed.slice(first[1]);
-    if (!/^[-+*/%&|^=<>?:,.]/.test(rest))
+    // `inline %name` reads a transient variable; `inline % 2` is modulo.
+    if (!/^(?:[-+*/&|^=<>?:,.]|%(?![A-Za-z_]))/.test(rest))
       return { nameExpr: rest, inline: true };
   }
   return { nameExpr: trimmed, inline: false };

package/src/components/macros/MacroError.tsx

@@ -1,4 +1,5 @@
 import { currentSourceLocation } from '../../utils/source-location';
+import { errorMessage } from '../../utils/error-message';
 
 export function MacroError({
   macro,
@@ -12,7 +13,7 @@ export function MacroError({
       class="error"
       title={String(error)}
     >
-      {`{${macro} error${currentSourceLocation()}: ${error instanceof Error ? error.message : String(error)}}`}
+      {`{${macro} error${currentSourceLocation()}: ${errorMessage(error)}}`}
     </span>
   );
 }

package/src/components/macros/MacroLink.tsx

@@ -1,17 +1,9 @@
-import { h, render } from 'preact';
-import { useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
-import {
-  renderNodes,
-  LocalsUpdateContext,
-  LocalsValuesContext,
-  NobrContext,
-} from '../../markup/render';
 import { defineMacro } from '../../define-macro';
-import { liveLocalsView } from '../../utils/live-locals';
 import { unescapeQuoted } from './arg-utils';
+import { useDetachedBody } from './detached-body';
 
-function parseArgs(rawArgs: string): {
+export function parseLinkArgs(rawArgs: string): {
   display: string;
   passage: string | null;
 } {
@@ -33,58 +25,33 @@ function parseArgs(rawArgs: string): {
   return { display: rawArgs.trim(), passage: null };
 }
 
-function renderChildrenDetached(
-  children: import('../../markup/ast').ASTNode[],
-  getValues: () => Record<string, unknown>,
-  update: (key: string, value: unknown) => void,
-  nobr: boolean,
-) {
-  const container = document.createElement('div');
-  const vnode = h(
-    NobrContext.Provider,
-    { value: nobr },
-    h(
-      LocalsUpdateContext.Provider,
-      { value: { update, getValues } },
-      h(
-        LocalsValuesContext.Provider,
-        { value: liveLocalsView(getValues) },
-        renderNodes(children),
-      ),
-    ),
-  );
-  render(vnode, container);
-  render(null, container);
-}
-
 defineMacro({
   name: 'link',
   block: true,
   interpolate: true,
   render({ rawArgs, children = [] }, ctx) {
-    const { display, passage } = parseArgs(rawArgs);
-    const nobr = useContext(NobrContext);
+    const { display, passage } = parseLinkArgs(rawArgs);
+    const runBody = useDetachedBody();
 
-    const handleClick = (e: Event) => {
-      e.preventDefault();
-      renderChildrenDetached(children, ctx.getValues, ctx.update, nobr);
+    const perform = () => {
+      runBody(children);
       if (passage) {
         useStoryStore.getState().navigate(passage);
       }
     };
 
+    const handleClick = (e: Event) => {
+      e.preventDefault();
+      perform();
+    };
+
     ctx.useAction({
       type: 'link',
       key: passage || display,
       authorId: ctx.id,
       label: display,
       target: passage ?? undefined,
-      perform: () => {
-        renderChildrenDetached(children, ctx.getValues, ctx.update, nobr);
-        if (passage) {
-          useStoryStore.getState().navigate(passage);
-        }
-      },
+      perform,
     });
 
     return (

package/src/components/macros/Meter.tsx

@@ -1,12 +1,18 @@
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
-import { isWhitespace, readWholeQuoted, splitTopLevel } from './arg-utils';
+import {
+  endsWithOperator,
+  isWhitespace,
+  readWholeQuoted,
+  splitTopLevel,
+} from './arg-utils';
 
 /**
  * Parse `{meter currentExpr maxExpr ["label"]}`. Arguments are separated by
  * whitespace outside string and template literals and bracket pairs; a
  * trailing standalone `"…"` or `'…'` string is the label mode, with `\"`,
- * `\'` and `\\` escapes.
+ * `\'` and `\\` escapes. A string after an operator (`$a ?? "5"`) is an
+ * operand of the max expression, not the label.
  */
 export function parseMeterArgs(rawArgs: string): {
   currentExpr: string;
@@ -17,7 +23,9 @@ export function parseMeterArgs(rawArgs: string): {
 
   let labelMode = '';
   const label =
-    tokens.length >= 2 ? readWholeQuoted(tokens[tokens.length - 1]!) : null;
+    tokens.length >= 2 && !endsWithOperator(tokens.slice(0, -1).join(' '))
+      ? readWholeQuoted(tokens[tokens.length - 1]!)
+      : null;
   if (label !== null) {
     labelMode = label;
     tokens.pop();

package/src/components/macros/Nobr.tsx

@@ -13,4 +13,5 @@ defineMacro({
       ),
     );
   },
+  text: ({ children = [] }, ctx) => ctx.renderText(children),
 });

package/src/components/macros/PassageDisplay.tsx

@@ -105,6 +105,9 @@ defineMacro({
       cleanupSnapshots(containerRef.current);
     }, []);
 
+    // A transition still running on unmount must not fire into it.
+    useEffect(() => cancelTransition, [cancelTransition]);
+
     // State machine effect — triggers on every navigation
     useEffect(() => {
       const store = useStoryStore.getState();

package/src/components/macros/Print.tsx

@@ -19,4 +19,8 @@ defineMacro({
       );
     }
   },
+  text({ rawArgs }, ctx) {
+    const result = ctx.evaluate(rawArgs);
+    return result == null ? '' : String(result);
+  },
 });

package/src/components/macros/Radiobutton.tsx

@@ -6,7 +6,10 @@ import {
   stripLooseQuotes,
 } from './arg-utils';
 
-function parseRadioArgs(rawArgs: string): { value: string; label: string } {
+export function parseRadioArgs(rawArgs: string): {
+  value: string;
+  label: string;
+} {
   // $var "value" label: a quoted value accepts \" \' and \\ escapes and
   // may contain the other quote kind.
   const head = rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+/);
@@ -24,7 +27,7 @@ function parseRadioArgs(rawArgs: string): { value: string; label: string } {
   }
 
   const match = rawArgs.match(
-    /^\s*["']?\$?[\w.]+["']?\s+["'](.+?)["']\s+["']?(.+?)["']?\s*$/,
+    /^\s*["']?\$?[\w.]+["']?\s+["'](.+?)["']\s+["']?(.+?)["']?\s*$/s,
   );
   if (!match) {
     const parts = rawArgs.trim().split(/\s+/).slice(1);

package/src/components/macros/SaveManager.tsx

@@ -22,6 +22,7 @@ import {
 } from '../../saves/save-manager';
 import { DialogCloseContext } from '../PassageDialog';
 import { defineMacro } from '../../define-macro';
+import { errorMessage } from '../../utils/error-message';
 
 function relativeTime(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
@@ -84,15 +85,25 @@ export function SaveManagerContent() {
     }
   }, [renamingId]);
 
+  // Actions are async and may finish after the manager closed: once
+  // unmounted, no status is shown and no timer is left behind.
+  const mounted = useRef(true);
   const statusTimer = useRef<number>();
+  const closeTimer = useRef<number>();
   const showStatus = (text: string, type: 'success' | 'error' = 'success') => {
+    if (!mounted.current) return;
     clearTimeout(statusTimer.current);
     setStatus({ text, type });
     statusTimer.current = window.setTimeout(() => setStatus(null), 3000);
   };
 
   useEffect(() => {
-    return () => clearTimeout(statusTimer.current);
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      clearTimeout(statusTimer.current);
+      clearTimeout(closeTimer.current);
+    };
   }, []);
 
   const toggleCollapse = (id: string) => {
@@ -142,10 +153,19 @@ export function SaveManagerContent() {
 
   const handleLoad = async (save: SaveRecord) => {
     try {
-      // Stored records hold serialized variables; the store expects live ones
-      loadFromPayload(deserializePayload(save.payload));
+      // Stored records hold serialized variables; the store expects live
+      // ones. The game moves to the save's playthrough.
+      loadFromPayload(
+        deserializePayload(save.payload),
+        undefined,
+        save.meta.playthroughId,
+      );
       showStatus('Game loaded');
-      if (closeDialog) setTimeout(closeDialog, 500);
+      if (closeDialog) {
+        closeTimer.current = window.setTimeout(closeDialog, 500);
+      }
+      // A playthrough deleted since the list was read is recorded again
+      await refresh();
     } catch {
       showStatus('Failed to load save', 'error');
     }
@@ -229,10 +249,7 @@ export function SaveManagerContent() {
       showStatus('Save imported');
       await refresh();
     } catch (err) {
-      showStatus(
-        err instanceof Error ? err.message : 'Failed to import save',
-        'error',
-      );
+      showStatus(errorMessage(err, 'Failed to import save'), 'error');
     }
   };
 

package/src/components/macros/Set.tsx

@@ -5,7 +5,8 @@ defineMacro({
   name: 'set',
   render({ rawArgs }, ctx) {
     const ran = ctx.hooks.useRef(false);
-    const error = ctx.hooks.useRef<unknown>(null);
+    // Boxed: anything can be thrown, including null and other falsy values
+    const failure = ctx.hooks.useRef<{ error: unknown } | null>(null);
 
     if (!ran.current) {
       ran.current = true;
@@ -13,7 +14,7 @@ defineMacro({
       try {
         ctx.mutate(rawArgs);
       } catch (err) {
-        error.current = err;
+        failure.current = { error: err };
         console.error(
           `spindle: Error in {set ${rawArgs}}${ctx.sourceLocation()}:`,
           err,
@@ -21,11 +22,11 @@ defineMacro({
       }
     }
 
-    if (error.current) {
+    if (failure.current) {
       return (
         <MacroError
           macro="set"
-          error={error.current}
+          error={failure.current.error}
         />
       );
     }

package/src/components/macros/Span.tsx

@@ -6,4 +6,5 @@ defineMacro({
   render({ children = [] }, ctx) {
     return ctx.wrap(ctx.renderNodes(children));
   },
+  text: ({ children = [] }, ctx) => ctx.renderText(children),
 });

package/src/components/macros/StoryTitle.tsx

@@ -16,4 +16,5 @@ defineMacro({
       </span>
     );
   },
+  text: () => useStoryStore.getState().storyData?.name || '',
 });