@rohal12/spindle 0.51.3 → 0.52.0

package/src/components/macros/Checkbox.tsx

@@ -1,15 +1,21 @@
 import { defineMacro } from '../../define-macro';
+import { readWholeQuoted, stripLooseQuotes } from './arg-utils';
 
-function parseLabel(rawArgs: string): string {
-  const match = rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+["']?(.+?)["']?\s*$/);
-  return match?.[1] ?? '';
+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]!.trimEnd() || match[1]!;
+  return readWholeQuoted(rest) ?? stripLooseQuotes(rest);
 }
 
 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/Dialog.tsx

@@ -1,5 +1,6 @@
 import { defineMacro } from '../../define-macro';
 import { PassageDialog } from '../PassageDialog';
+import { readWholeQuoted } from './arg-utils';
 
 defineMacro({
   name: 'dialog',
@@ -11,7 +12,9 @@ defineMacro({
     const noclose = /\bnoclose\s*$/.test(rawArgs);
     const labelRaw = rawArgs.replace(/\bnoclose\s*$/, '').trim();
     const label =
-      ctx.resolve?.(labelRaw.replace(/^["']|["']$/g, '')) ?? labelRaw;
+      ctx.resolve?.(
+        readWholeQuoted(labelRaw) ?? labelRaw.replace(/^["']|["']$/g, ''),
+      ) ?? labelRaw;
     const passageName = ctx
       .collectText(children)
       .trim()

package/src/components/macros/For.tsx

@@ -9,11 +9,19 @@ import {
   LocalsValuesContext,
   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"
@@ -44,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,
@@ -79,7 +90,7 @@ function ForIteration({
   );
 
   const localState = useMemo(
-    () => ({ ...parentValues, ...ownKeys, ...localMutations }),
+    () => createNamespace(parentValues, ownKeys, localMutations),
     [parentValues, ownKeys, localMutations],
   );
 
@@ -91,17 +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, locals: localState })}
+        {renderNodes(children, { nobr, inline, raw, locals: localState })}
       </LocalsValuesContext.Provider>
     </LocalsUpdateContext.Provider>
   );
@@ -151,7 +165,7 @@ defineMacro({
 
     const content = list.map((item, i) => (
       <ForIteration
-        key={`${i}-${JSON.stringify(item)}`}
+        key={`${i}-${stableKey(item)}`}
         parentValues={parentValues}
         itemVar={itemVar}
         itemValue={item}
@@ -163,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,6 +3,7 @@ import { tokenize } from '../../markup/tokenizer';
 import { buildAST } from '../../markup/ast';
 import { NobrContext } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
+import { endsWithOperator, isWhitespace, topLevelIndices } from './arg-utils';
 
 const FLAG = 'inline';
 
@@ -12,49 +13,39 @@ 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;
 } {
   const trimmed = rawArgs.trim();
 
   // First and last whitespace runs at depth 0, as [start, end) offsets.
+  const spaces = topLevelIndices(trimmed, isWhitespace);
   let first: [number, number] | null = null;
   let last: [number, number] | null = null;
-  let depth = 0;
-  let inString: string | null = null;
-  for (let i = 0; i < trimmed.length; i++) {
-    const ch = trimmed[i]!;
-    if (inString) {
-      if (ch === '\\') i++;
-      else if (ch === inString) inString = null;
-      continue;
-    }
-    if (ch === '"' || ch === "'" || ch === '`') inString = ch;
-    else if (ch === '(' || ch === '[' || ch === '{') depth++;
-    else if (ch === ')' || ch === ']' || ch === '}') depth--;
-    else if (depth === 0 && /\s/.test(ch)) {
-      let end = i + 1;
-      while (end < trimmed.length && /\s/.test(trimmed[end]!)) end++;
-      last = [i, end];
-      first ??= last;
-      i = end - 1;
-    }
+  if (spaces.length > 0) {
+    let s = 0;
+    while (s + 1 < spaces.length && spaces[s + 1] === spaces[s]! + 1) s++;
+    first = [spaces[0]!, spaces[s]! + 1];
+    let e = spaces.length - 1;
+    while (e > 0 && spaces[e - 1] === spaces[e]! - 1) e--;
+    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,16 +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;
 } {
@@ -20,7 +13,7 @@ function parseArgs(rawArgs: string): {
   const re = /(["'])((?:\\[^]|(?!\1)[^\\])*)\1/g;
   let m;
   while ((m = re.exec(rawArgs)) !== null) {
-    parts.push(m[2]!.replace(/\\(["'\\])/g, '$1'));
+    parts.push(unescapeQuoted(m[2]!));
   }
   if (parts.length >= 2) {
     return { display: parts[0]!, passage: parts[1]! };
@@ -32,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,63 +1,49 @@
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
+import {
+  endsWithOperator,
+  isWhitespace,
+  readWholeQuoted,
+  splitTopLevel,
+} from './arg-utils';
 
-function parseArgs(rawArgs: string): {
+/**
+ * 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. A string after an operator (`$a ?? "5"`) is an
+ * operand of the max expression, not the label.
+ */
+export function parseMeterArgs(rawArgs: string): {
   currentExpr: string;
   maxExpr: string;
   labelMode: string;
 } {
-  const trimmed = rawArgs.trim();
+  const tokens = splitTopLevel(rawArgs.trim(), isWhitespace).filter(Boolean);
 
-  // Extract quoted label mode from the end if present
   let labelMode = '';
-  let rest = trimmed;
-  const quoteMatch = rest.match(/\s+(?:"([^"]*)"|'([^']*)')$/);
-  if (quoteMatch) {
-    labelMode = quoteMatch[1] ?? quoteMatch[2] ?? '';
-    rest = rest.slice(0, quoteMatch.index ?? rest.length).trim();
+  const label =
+    tokens.length >= 2 && !endsWithOperator(tokens.slice(0, -1).join(' '))
+      ? readWholeQuoted(tokens[tokens.length - 1]!)
+      : null;
+  if (label !== null) {
+    labelMode = label;
+    tokens.pop();
   }
 
-  // Split remaining into two expressions.
-  const exprs = splitExpressions(rest);
-  if (exprs.length < 2) {
+  if (tokens.length < 2) {
     throw new Error(
       'meter requires two arguments: {meter currentExpr maxExpr}',
     );
   }
 
   return {
-    currentExpr: exprs[0]!,
-    maxExpr: exprs.slice(1).join(' '),
+    currentExpr: tokens[0]!,
+    maxExpr: tokens.slice(1).join(' '),
     labelMode,
   };
 }
 
-function splitExpressions(input: string): string[] {
-  const result: string[] = [];
-  let current = '';
-  let depth = 0;
-
-  for (let i = 0; i < input.length; i++) {
-    const ch = input[i]!;
-    if (ch === '(' || ch === '[') {
-      depth++;
-      current += ch;
-    } else if (ch === ')' || ch === ']') {
-      depth--;
-      current += ch;
-    } else if (/\s/.test(ch) && depth === 0 && current.length > 0) {
-      result.push(current);
-      current = '';
-      // Skip additional whitespace
-      while (i + 1 < input.length && /\s/.test(input[i + 1]!)) i++;
-    } else {
-      current += ch;
-    }
-  }
-  if (current.length > 0) result.push(current);
-  return result;
-}
-
 function formatLabel(
   current: number,
   max: number,
@@ -76,7 +62,7 @@ defineMacro({
   merged: true,
   render({ rawArgs }, ctx) {
     try {
-      const { currentExpr, maxExpr, labelMode } = parseArgs(rawArgs);
+      const { currentExpr, maxExpr, labelMode } = parseMeterArgs(rawArgs);
       const current = Number(ctx.evaluate!(currentExpr));
       const max = Number(ctx.evaluate!(maxExpr));
       const pct =

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

@@ -1,8 +1,33 @@
 import { defineMacro } from '../../define-macro';
+import {
+  isWhitespace,
+  readQuoted,
+  readWholeQuoted,
+  stripLooseQuotes,
+} from './arg-utils';
+
+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+/);
+  if (head) {
+    const rest = rawArgs.slice(head[0].length).trim();
+    const value = readQuoted(rest, 0);
+    if (
+      value &&
+      (value.end === rest.length || isWhitespace(rest[value.end]!))
+    ) {
+      const labelRaw = rest.slice(value.end).trim();
+      const label = readWholeQuoted(labelRaw) ?? stripLooseQuotes(labelRaw);
+      return { value: value.value, label };
+    }
+  }
 
-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);