@rohal12/spindle 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/components/Passage.tsx

@@ -3,6 +3,7 @@ import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
 import { renderNodes } from '../markup/render';
 import type { Passage as PassageData } from '../parser';
+import { sourceLocationOf } from '../utils/source-location';
 
 interface PassageProps {
   passage: PassageData;
@@ -17,8 +18,8 @@ export function Passage({ passage }: PassageProps) {
     } catch (err) {
       return (
         <div class="error">
-          Error parsing passage &ldquo;{passage.name}&rdquo;:{' '}
-          {(err as Error).message}
+          Error parsing passage &ldquo;{passage.name}&rdquo;
+          {sourceLocationOf(passage)}: {(err as Error).message}
         </div>
       );
     }

package/src/components/PassageLink.tsx

@@ -1,5 +1,6 @@
 import { useStoryStore } from '../store';
 import { useAction } from '../hooks/use-action';
+import { useInterpolate } from '../hooks/use-interpolate';
 
 interface PassageLinkProps {
   target: string;
@@ -15,6 +16,9 @@ export function PassageLink({
   children,
 }: PassageLinkProps) {
   const navigate = useStoryStore((s) => s.navigate);
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
 
   const handleClick = (e: MouseEvent) => {
     e.preventDefault();

package/src/components/macros/Button.tsx

@@ -6,6 +6,8 @@ import { deepClone } from '../../class-registry';
 import { collectText } from '../../utils/extract-text';
 import { useAction } from '../../hooks/use-action';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { useInterpolate } from '../../hooks/use-interpolate';
+import { currentSourceLocation } from '../../utils/source-location';
 import type { ASTNode } from '../../markup/ast';
 
 interface ButtonProps {
@@ -16,6 +18,9 @@ interface ButtonProps {
 }
 
 export function Button({ rawArgs, children, className, id }: ButtonProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const scope = useContext(LocalsContext);
   const [, , mergedLocals] = useMergedLocals();
 
@@ -28,7 +33,10 @@ export function Button({ rawArgs, children, className, id }: ButtonProps) {
     try {
       execute(rawArgs, vars, temps, localsClone);
     } catch (err) {
-      console.error(`spindle: Error in {button ${rawArgs}}:`, err);
+      console.error(
+        `spindle: Error in {button ${rawArgs}}${currentSourceLocation()}:`,
+        err,
+      );
       return;
     }
 

package/src/components/macros/Computed.tsx

@@ -1,7 +1,8 @@
-import { useLayoutEffect } from 'preact/hooks';
+import { useLayoutEffect, useRef } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import { evaluate } from '../../expression';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { currentSourceLocation } from '../../utils/source-location';
 
 interface ComputedProps {
   rawArgs: string;
@@ -58,6 +59,34 @@ function valuesEqual(a: unknown, b: unknown): boolean {
   return false;
 }
 
+function computeAndApply(
+  expr: string,
+  name: string,
+  isTemp: boolean,
+  variables: Record<string, unknown>,
+  temporary: Record<string, unknown>,
+  locals: Record<string, unknown>,
+  rawArgs: string,
+): void {
+  const state = useStoryStore.getState();
+  let newValue: unknown;
+  try {
+    newValue = evaluate(expr, variables, temporary, locals);
+  } catch (err) {
+    console.error(
+      `spindle: Error in {computed ${rawArgs}}${currentSourceLocation()}:`,
+      err,
+    );
+    return;
+  }
+
+  const current = isTemp ? state.temporary[name] : state.variables[name];
+  if (!valuesEqual(current, newValue)) {
+    if (isTemp) state.setTemporary(name, newValue);
+    else state.setVariable(name, newValue);
+  }
+}
+
 export function Computed({ rawArgs }: ComputedProps) {
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
@@ -71,35 +100,41 @@ export function Computed({ rawArgs }: ComputedProps) {
         class="error"
         title={String(err)}
       >
-        {`{computed error: ${err instanceof Error ? err.message : String(err)}}`}
+        {`{computed error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }
   const isTemp = target.startsWith('_');
   const name = target.slice(1);
 
-  // Evaluate in useLayoutEffect so preceding {set} effects have already run
-  useLayoutEffect(() => {
+  // Synchronous first evaluation — sees preceding synchronous {set} mutations
+  const ran = useRef(false);
+  if (!ran.current) {
+    ran.current = true;
     const state = useStoryStore.getState();
+    computeAndApply(
+      expr,
+      name,
+      isTemp,
+      state.variables,
+      state.temporary,
+      mergedLocals,
+      rawArgs,
+    );
+  }
 
-    let newValue: unknown;
-    try {
-      newValue = evaluate(expr, mergedVars, mergedTemps, mergedLocals);
-    } catch (err) {
-      console.error(`spindle: Error in {computed ${rawArgs}}:`, err);
-      return;
-    }
-
-    const current = isTemp ? state.temporary[name] : state.variables[name];
-
-    if (!valuesEqual(current, newValue)) {
-      if (isTemp) {
-        state.setTemporary(name, newValue);
-      } else {
-        state.setVariable(name, newValue);
-      }
-    }
-  });
+  // Reactive re-evaluation when dependencies change (via useMergedLocals subscription)
+  useLayoutEffect(() => {
+    computeAndApply(
+      expr,
+      name,
+      isTemp,
+      mergedVars,
+      mergedTemps,
+      mergedLocals,
+      rawArgs,
+    );
+  }, [mergedVars, mergedTemps, mergedLocals]);
 
   return null;
 }

package/src/components/macros/Do.tsx

@@ -5,6 +5,7 @@ import type { ASTNode } from '../../markup/ast';
 import { deepClone } from '../../class-registry';
 import { LocalsContext } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { currentSourceLocation } from '../../utils/source-location';
 
 interface DoProps {
   children: ASTNode[];
@@ -31,7 +32,7 @@ export function Do({ children }: DoProps) {
     try {
       execute(code, vars, temps, localsClone);
     } catch (err) {
-      console.error(`spindle: Error in {do}:`, err);
+      console.error(`spindle: Error in {do}${currentSourceLocation()}:`, err);
       return;
     }
 

package/src/components/macros/For.tsx

@@ -3,6 +3,8 @@ import { evaluate } from '../../expression';
 import { LocalsContext, renderNodes } from '../../markup/render';
 import type { LocalsScope } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { useInterpolate } from '../../hooks/use-interpolate';
+import { currentSourceLocation } from '../../utils/source-location';
 import type { ASTNode } from '../../markup/ast';
 
 interface ForProps {
@@ -75,6 +77,9 @@ function ForIteration({
 }
 
 export function For({ rawArgs, children, className, id }: ForProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const parentScope = useContext(LocalsContext);
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
@@ -87,7 +92,7 @@ export function For({ rawArgs, children, className, id }: ForProps) {
         class="error"
         title={String(err)}
       >
-        {`{for error: ${err instanceof Error ? err.message : String(err)}}`}
+        {`{for error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }
@@ -100,7 +105,7 @@ export function For({ rawArgs, children, className, id }: ForProps) {
     if (!Array.isArray(result)) {
       return (
         <span class="error">
-          {`{for error: expression did not evaluate to an array}`}
+          {`{for error${currentSourceLocation()}: expression did not evaluate to an array}`}
         </span>
       );
     }
@@ -111,7 +116,7 @@ export function For({ rawArgs, children, className, id }: ForProps) {
         class="error"
         title={String(err)}
       >
-        {`{for error: ${err instanceof Error ? err.message : String(err)}}`}
+        {`{for error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }

package/src/components/macros/If.tsx

@@ -1,6 +1,8 @@
 import { evaluate } from '../../expression';
 import { renderNodes } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { useInterpolate } from '../../hooks/use-interpolate';
+import { currentSourceLocation } from '../../utils/source-location';
 import type { Branch } from '../../markup/ast';
 
 interface IfProps {
@@ -8,15 +10,18 @@ interface IfProps {
 }
 
 export function If({ branches }: IfProps) {
+  const resolve = useInterpolate();
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
   function renderBranch(branch: Branch) {
     const children = renderNodes(branch.children);
-    if (branch.className || branch.id)
+    const cls = resolve(branch.className);
+    const branchId = resolve(branch.id);
+    if (cls || branchId)
       return (
         <span
-          id={branch.id}
-          class={branch.className}
+          id={branchId}
+          class={cls}
         >
           {children}
         </span>
@@ -46,7 +51,7 @@ export function If({ branches }: IfProps) {
           class="error"
           title={String(err)}
         >
-          {`{if error: ${err instanceof Error ? err.message : String(err)}}`}
+          {`{if error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
         </span>
       );
     }

package/src/components/macros/Include.tsx

@@ -4,6 +4,8 @@ import { tokenize } from '../../markup/tokenizer';
 import { buildAST } from '../../markup/ast';
 import { renderNodes } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { useInterpolate } from '../../hooks/use-interpolate';
+import { currentSourceLocation } from '../../utils/source-location';
 
 interface IncludeProps {
   rawArgs: string;
@@ -12,6 +14,9 @@ interface IncludeProps {
 }
 
 export function Include({ rawArgs, className, id }: IncludeProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const storyData = useStoryStore((s) => s.storyData);
   const [variables, temporary, locals] = useMergedLocals();
 
@@ -31,7 +36,7 @@ export function Include({ rawArgs, className, id }: IncludeProps) {
   }
   if (!passage) {
     return (
-      <span class="error">{`{include: passage "${passageName}" not found}`}</span>
+      <span class="error">{`{include${currentSourceLocation()}: passage "${passageName}" not found}`}</span>
     );
   }
 

package/src/components/macros/MacroLink.tsx

@@ -5,6 +5,8 @@ import type { ASTNode } from '../../markup/ast';
 import { deepClone } from '../../class-registry';
 import { LocalsContext } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { useInterpolate } from '../../hooks/use-interpolate';
+import { currentSourceLocation } from '../../utils/source-location';
 
 interface MacroLinkProps {
   rawArgs: string;
@@ -56,14 +58,20 @@ function executeChildren(
       try {
         execute(node.rawArgs, vars, temps, localsClone);
       } catch (err) {
-        console.error(`spindle: Error in {link} child {set}:`, err);
+        console.error(
+          `spindle: Error in {link} child {set}${currentSourceLocation()}:`,
+          err,
+        );
       }
     } else if (node.name === 'do') {
       const code = collectText(node.children);
       try {
         execute(code, vars, temps, localsClone);
       } catch (err) {
-        console.error(`spindle: Error in {link} child {do}:`, err);
+        console.error(
+          `spindle: Error in {link} child {do}${currentSourceLocation()}:`,
+          err,
+        );
       }
     }
   }
@@ -92,6 +100,9 @@ export function MacroLink({
   className,
   id,
 }: MacroLinkProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const { display, passage } = parseArgs(rawArgs);
   const scope = useContext(LocalsContext);
   const [, , mergedLocals] = useMergedLocals();

package/src/components/macros/Meter.tsx

@@ -1,5 +1,6 @@
 import { evaluate } from '../../expression';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { useInterpolate } from '../../hooks/use-interpolate';
 
 interface MeterProps {
   rawArgs: string;
@@ -83,6 +84,9 @@ function formatLabel(
 }
 
 export function Meter({ rawArgs, className, id }: MeterProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
   try {

package/src/components/macros/PassageDisplay.tsx

@@ -1,5 +1,6 @@
 import { useStoryStore } from '../../store';
 import { Passage } from '../Passage';
+import { useInterpolate } from '../../hooks/use-interpolate';
 
 interface PassageDisplayProps {
   className?: string;
@@ -7,6 +8,9 @@ interface PassageDisplayProps {
 }
 
 export function PassageDisplay({ className, id }: PassageDisplayProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const currentPassage = useStoryStore((s) => s.currentPassage);
   const storyData = useStoryStore((s) => s.storyData);
 

package/src/components/macros/Print.tsx

@@ -1,5 +1,7 @@
 import { evaluate } from '../../expression';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { useInterpolate } from '../../hooks/use-interpolate';
+import { currentSourceLocation } from '../../utils/source-location';
 
 interface PrintProps {
   rawArgs: string;
@@ -8,6 +10,9 @@ interface PrintProps {
 }
 
 export function Print({ rawArgs, className, id }: PrintProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
   try {
@@ -29,7 +34,7 @@ export function Print({ rawArgs, className, id }: PrintProps) {
         class="error"
         title={String(err)}
       >
-        {`{print error: ${err instanceof Error ? err.message : String(err)}}`}
+        {`{print error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }

package/src/components/macros/Repeat.tsx

@@ -1,7 +1,9 @@
 import { createContext } from 'preact';
-import { useState, useEffect, useCallback } from 'preact/hooks';
+import { useState, useEffect, useCallback, useMemo } from 'preact/hooks';
 import { renderNodes } from '../../markup/render';
 import { parseDelay } from '../../utils/parse-delay';
+import { hasInterpolation, interpolate } from '../../interpolation';
+import { useStoryStore } from '../../store';
 import type { ASTNode } from '../../markup/ast';
 
 export const RepeatContext = createContext<{ stop: () => void }>({
@@ -15,7 +17,21 @@ interface RepeatProps {
   id?: string;
 }
 
-export function Repeat({ rawArgs, children, className, id }: RepeatProps) {
+export function Repeat({
+  rawArgs,
+  children,
+  className: rawClassName,
+  id: rawId,
+}: RepeatProps) {
+  const [className, id] = useMemo(() => {
+    const resolveOnce = (s: string | undefined) => {
+      if (!s || !hasInterpolation(s)) return s;
+      const st = useStoryStore.getState();
+      return interpolate(s, st.variables, st.temporary, {});
+    };
+    return [resolveOnce(rawClassName), resolveOnce(rawId)];
+  }, [rawClassName, rawId]);
+
   const delay = parseDelay(rawArgs);
   const [count, setCount] = useState(0);
   const [stopped, setStopped] = useState(false);
@@ -36,7 +52,7 @@ export function Repeat({ rawArgs, children, className, id }: RepeatProps) {
 
   const content = (
     <RepeatContext.Provider value={{ stop }}>
-      {renderNodes(children)}
+      <span key={count}>{renderNodes(children)}</span>
     </RepeatContext.Provider>
   );
 

package/src/components/macros/Set.tsx

@@ -1,9 +1,10 @@
-import { useLayoutEffect, useContext } from 'preact/hooks';
+import { useRef, useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import { execute } from '../../expression';
 import { deepClone } from '../../class-registry';
 import { LocalsContext } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { currentSourceLocation } from '../../utils/source-location';
 
 interface SetProps {
   rawArgs: string;
@@ -12,8 +13,10 @@ interface SetProps {
 export function Set({ rawArgs }: SetProps) {
   const scope = useContext(LocalsContext);
   const [, , mergedLocals] = useMergedLocals();
+  const ran = useRef(false);
 
-  useLayoutEffect(() => {
+  if (!ran.current) {
+    ran.current = true;
     const state = useStoryStore.getState();
     const vars = deepClone(state.variables);
     const temps = deepClone(state.temporary);
@@ -22,8 +25,11 @@ export function Set({ rawArgs }: SetProps) {
     try {
       execute(rawArgs, vars, temps, localsClone);
     } catch (err) {
-      console.error(`spindle: Error in {set ${rawArgs}}:`, err);
-      return;
+      console.error(
+        `spindle: Error in {set ${rawArgs}}${currentSourceLocation()}:`,
+        err,
+      );
+      return null;
     }
 
     // Diff and apply store changes
@@ -44,7 +50,7 @@ export function Set({ rawArgs }: SetProps) {
         scope.update(`@${key}`, localsClone[key]);
       }
     }
-  }, []);
+  }
 
   return null;
 }

package/src/components/macros/Switch.tsx

@@ -1,6 +1,7 @@
 import { evaluate } from '../../expression';
 import { renderNodes } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { currentSourceLocation } from '../../utils/source-location';
 import type { Branch } from '../../markup/ast';
 
 interface SwitchProps {
@@ -20,7 +21,7 @@ export function Switch({ rawArgs, branches }: SwitchProps) {
         class="error"
         title={String(err)}
       >
-        {`{switch error: ${err instanceof Error ? err.message : String(err)}}`}
+        {`{switch error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }
@@ -52,7 +53,7 @@ export function Switch({ rawArgs, branches }: SwitchProps) {
           class="error"
           title={String(err)}
         >
-          {`{case error: ${err instanceof Error ? err.message : String(err)}}`}
+          {`{case error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
         </span>
       );
     }

package/src/components/macros/Timed.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo } from 'preact/hooks';
 import { renderNodes } from '../../markup/render';
 import { parseDelay } from '../../utils/parse-delay';
+import { useInterpolate } from '../../hooks/use-interpolate';
 import type { ASTNode, Branch } from '../../markup/ast';
 
 interface TimedProps {
@@ -18,6 +19,9 @@ export function Timed({
   className,
   id,
 }: TimedProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   // Section 0 = initial children, sections 1..N = {next} branches
   // Each section has its own delay
   const sections = useMemo(() => {

package/src/components/macros/Type.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'preact/hooks';
 import { renderInlineNodes } from '../../markup/render';
 import { parseDelay } from '../../utils/parse-delay';
+import { useInterpolate } from '../../hooks/use-interpolate';
 import type { ASTNode } from '../../markup/ast';
 
 interface TypeProps {
@@ -11,6 +12,9 @@ interface TypeProps {
 }
 
 export function Type({ rawArgs, children, className, id }: TypeProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const speed = parseDelay(rawArgs);
   const containerRef = useRef<HTMLSpanElement>(null);
   const [totalChars, setTotalChars] = useState(0);

package/src/components/macros/Unset.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'preact/hooks';
+import { useRef } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 
 interface UnsetProps {
@@ -6,7 +6,10 @@ interface UnsetProps {
 }
 
 export function Unset({ rawArgs }: UnsetProps) {
-  useLayoutEffect(() => {
+  const ran = useRef(false);
+
+  if (!ran.current) {
+    ran.current = true;
     const state = useStoryStore.getState();
     const name = rawArgs.trim();
 
@@ -19,7 +22,7 @@ export function Unset({ rawArgs }: UnsetProps) {
         `spindle: {unset} expects a variable ($name or _name), got "${name}"`,
       );
     }
-  }, []);
+  }
 
   return null;
 }

package/src/components/macros/VarDisplay.tsx

@@ -1,6 +1,7 @@
 import { useStoryStore } from '../../store';
 import { useContext } from 'preact/hooks';
 import { LocalsContext } from '../../markup/render';
+import { useInterpolate } from '../../hooks/use-interpolate';
 
 interface VarDisplayProps {
   name: string;
@@ -10,6 +11,9 @@ interface VarDisplayProps {
 }
 
 export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
+  const resolve = useInterpolate();
+  className = resolve(className);
+  id = resolve(id);
   const localsScope = useContext(LocalsContext);
   const parts = name.split('.');
   const root = parts[0]!;

package/src/components/macros/option-utils.ts

@@ -7,7 +7,10 @@ export function extractOptions(children: ASTNode[]): string[] {
   const options: string[] = [];
   for (const node of children) {
     if (node.type === 'macro' && node.name === 'option') {
-      options.push(node.rawArgs.trim());
+      const raw = node.rawArgs.trim();
+      // Strip surrounding quotes so {option "Long Sword"} gives "Long Sword"
+      const stripped = raw.replace(/^(["'])(.+)\1$/, '$2');
+      options.push(stripped);
     }
   }
   return options;