@rohal12/spindle 0.51.4 → 0.52.0

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,11 @@
 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';
 
 function parseComputedArgs(rawArgs: string): { target: string; expr: string } {
   const trimmed = rawArgs.trim();
@@ -29,6 +31,7 @@ function parseComputedArgs(rawArgs: string): { target: string; expr: string } {
         );
       }
 
+      checkVariableName(target.slice(1), target);
       return { target, expr };
     }
   }
@@ -38,22 +41,29 @@ 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 changed. 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()}:`,
@@ -114,26 +124,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/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 || '',
 });

package/src/components/macros/Switch.tsx

@@ -47,4 +47,17 @@ defineMacro({
 
     return null;
   },
+  text({ rawArgs, branches = [] }, ctx) {
+    const switchValue = ctx.evaluate(rawArgs);
+    let defaultBranch: (typeof branches)[number] | null = null;
+    for (let i = 1; i < branches.length; i++) {
+      const branch = branches[i]!;
+      if (branch.rawArgs === '') {
+        defaultBranch = branch;
+      } else if (switchValue === ctx.evaluate(branch.rawArgs)) {
+        return ctx.renderText(branch.children);
+      }
+    }
+    return defaultBranch ? ctx.renderText(defaultBranch.children) : '';
+  },
 });

package/src/components/macros/Unset.tsx

@@ -1,31 +1,51 @@
 import { useStoryStore } from '../../store';
 import { defineMacro } from '../../define-macro';
+import { MacroError } from './MacroError';
 
 defineMacro({
   name: 'unset',
   render({ rawArgs }, ctx) {
     const ran = ctx.hooks.useRef(false);
+    const error = ctx.hooks.useRef<unknown>(null);
 
     if (!ran.current) {
       ran.current = true;
       const state = useStoryStore.getState();
       const name = rawArgs.trim();
 
-      if (name.startsWith('$')) {
-        state.deleteVariable(name.slice(1));
-      } else if (name.startsWith('_')) {
-        state.deleteTemporary(name.slice(1));
-      } else if (name.startsWith('%')) {
-        state.deleteTransient(name.slice(1));
-      } else if (name.startsWith('@')) {
-        ctx.update(name.slice(1), undefined);
-      } else {
+      try {
+        if (name.startsWith('$')) {
+          state.deleteVariable(name.slice(1));
+        } else if (name.startsWith('_')) {
+          state.deleteTemporary(name.slice(1));
+        } else if (name.startsWith('%')) {
+          state.deleteTransient(name.slice(1));
+        } else if (name.startsWith('@')) {
+          // Throws outside a locals scope ({for}, widget, {link}, {button})
+          ctx.update(name.slice(1), undefined);
+        } else {
+          throw new Error(
+            `{unset} expects a variable ($name, _name, %name, or @name), got "${name}"`,
+          );
+        }
+      } catch (err) {
+        error.current = err;
         console.error(
-          `spindle: {unset} expects a variable ($name, _name, %name, or @name), got "${name}"`,
+          `spindle: Error in {unset ${rawArgs}}${ctx.sourceLocation()}:`,
+          err,
         );
       }
     }
 
+    if (error.current) {
+      return (
+        <MacroError
+          macro="unset"
+          error={error.current}
+        />
+      );
+    }
+
     return null;
   },
 });

package/src/components/macros/VarDisplay.tsx

@@ -2,6 +2,14 @@ import { useStoryStore } from '../../store';
 import { useContext } from 'preact/hooks';
 import { LocalsValuesContext } from '../../markup/render';
 import { useInterpolate } from '../../hooks/use-interpolate';
+import { RESERVED_NAME, ownValue } from '../../utils/namespace';
+
+const SIGILS = {
+  variable: '$',
+  temporary: '_',
+  local: '@',
+  transient: '%',
+} as const;
 
 interface VarDisplayProps {
   name: string;
@@ -17,19 +25,28 @@ export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
   const localsValues = useContext(LocalsValuesContext);
   const parts = name.split('.');
   const root = parts[0]!;
+  // Own entries only, as the expression engine reads them
   const storeValue = useStoryStore((s) =>
     scope === 'variable'
-      ? s.variables[root]
+      ? ownValue(s.variables, root)
       : scope === 'temporary'
-        ? s.temporary[root]
+        ? ownValue(s.temporary, root)
         : scope === 'transient'
-          ? s.transient[root]
+          ? ownValue(s.transient, root)
           : undefined,
   );
 
+  if (root === RESERVED_NAME) {
+    return (
+      <span class="error">
+        {`{${SIGILS[scope]}${name} error: "${SIGILS[scope]}${root}" cannot be used as a variable name (${RESERVED_NAME} is reserved)}`}
+      </span>
+    );
+  }
+
   let value: unknown;
   if (scope === 'local') {
-    value = root in localsValues ? localsValues[root] : undefined;
+    value = ownValue(localsValues, root);
   } else {
     value = storeValue;
   }