@rohal12/spindle 0.14.0 → 0.16.0

package/package.json

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

package/src/components/macros/Back.tsx

@@ -1,12 +1,9 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface BackProps {
-  className?: string;
-  id?: string;
-}
-
-export function Back({ className, id }: BackProps) {
+export function Back({ className, id }: MacroProps) {
   const goBack = useStoryStore((s) => s.goBack);
   const canGoBack = useStoryStore((s) => s.historyIndex > 0);
   const cls = className ? `menubar-button ${className}` : 'menubar-button';
@@ -31,3 +28,5 @@ export function Back({ className, id }: BackProps) {
     </button>
   );
 }
+
+registerMacro('back', Back);

package/src/components/macros/Button.tsx

@@ -2,20 +2,13 @@ import { useContext } from 'preact/hooks';
 import { renderInlineNodes, LocalsUpdateContext } from '../../markup/render';
 import { collectText } from '../../utils/extract-text';
 import { useAction } from '../../hooks/use-action';
-import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
-import type { ASTNode } from '../../markup/ast';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface ButtonProps {
-  rawArgs: string;
-  children: ASTNode[];
-  className?: string;
-  id?: string;
-}
-
-export function Button({ rawArgs, children, className, id }: ButtonProps) {
+export function Button({ rawArgs, children = [], className, id }: MacroProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
@@ -23,7 +16,7 @@ export function Button({ rawArgs, children, className, id }: ButtonProps) {
 
   const handleClick = () => {
     try {
-      executeMutation(rawArgs, stripLocalsPrefix(getValues()), update);
+      executeMutation(rawArgs, getValues(), update);
     } catch (err) {
       console.error(
         `spindle: Error in {button ${rawArgs}}${currentSourceLocation()}:`,
@@ -52,3 +45,5 @@ export function Button({ rawArgs, children, className, id }: ButtonProps) {
     </button>
   );
 }
+
+registerMacro('button', Button);

package/src/components/macros/Checkbox.tsx

@@ -1,11 +1,7 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
-
-interface CheckboxProps {
-  rawArgs: string;
-  className?: string;
-  id?: string;
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 function parseArgs(rawArgs: string): { varName: string; label: string } {
   const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s+["']?(.+?)["']?\s*$/);
@@ -17,7 +13,7 @@ function parseArgs(rawArgs: string): { varName: string; label: string } {
   return { varName, label };
 }
 
-export function Checkbox({ rawArgs, className, id }: CheckboxProps) {
+export function Checkbox({ rawArgs, className, id }: MacroProps) {
   const { varName, label } = parseArgs(rawArgs);
   const name = varName.startsWith('$') ? varName.slice(1) : varName;
 
@@ -50,3 +46,5 @@ export function Checkbox({ rawArgs, className, id }: CheckboxProps) {
     </label>
   );
 }
+
+registerMacro('checkbox', Checkbox);

package/src/components/macros/Computed.tsx

@@ -3,10 +3,8 @@ 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;
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 function parseComputedArgs(rawArgs: string): { target: string; expr: string } {
   const trimmed = rawArgs.trim();
@@ -87,7 +85,7 @@ function computeAndApply(
   }
 }
 
-export function Computed({ rawArgs }: ComputedProps) {
+export function Computed({ rawArgs }: MacroProps) {
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
   let target: string;
@@ -138,3 +136,5 @@ export function Computed({ rawArgs }: ComputedProps) {
 
   return null;
 }
+
+registerMacro('computed', Computed);

package/src/components/macros/Cycle.tsx

@@ -1,16 +1,10 @@
 import { useStoryStore } from '../../store';
 import { extractOptions } from './option-utils';
 import { useAction } from '../../hooks/use-action';
-import type { ASTNode } from '../../markup/ast';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface CycleProps {
-  rawArgs: string;
-  children: ASTNode[];
-  className?: string;
-  id?: string;
-}
-
-export function Cycle({ rawArgs, children, className, id }: CycleProps) {
+export function Cycle({ rawArgs, children = [], className, id }: MacroProps) {
   const varName = rawArgs.trim().replace(/["']/g, '');
   const name = varName.startsWith('$') ? varName.slice(1) : varName;
 
@@ -55,3 +49,5 @@ export function Cycle({ rawArgs, children, className, id }: CycleProps) {
     </button>
   );
 }
+
+registerMacro('cycle', Cycle);

package/src/components/macros/Do.tsx

@@ -1,22 +1,18 @@
 import { useLayoutEffect, useContext } from 'preact/hooks';
-import type { ASTNode } from '../../markup/ast';
 import { LocalsUpdateContext } from '../../markup/render';
-import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
 import { collectText } from '../../utils/extract-text';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface DoProps {
-  children: ASTNode[];
-}
-
-export function Do({ children }: DoProps) {
+export function Do({ children = [] }: MacroProps) {
   const code = collectText(children);
   const { update, getValues } = useContext(LocalsUpdateContext);
 
   useLayoutEffect(() => {
     try {
-      executeMutation(code, stripLocalsPrefix(getValues()), update);
+      executeMutation(code, getValues(), update);
     } catch (err) {
       console.error(`spindle: Error in {do}${currentSourceLocation()}:`, err);
     }
@@ -24,3 +20,5 @@ export function Do({ children }: DoProps) {
 
   return null;
 }
+
+registerMacro('do', Do);

package/src/components/macros/For.tsx

@@ -14,15 +14,10 @@ import {
 import { useMergedLocals } from '../../hooks/use-merged-locals';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { currentSourceLocation } from '../../utils/source-location';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 import type { ASTNode } from '../../markup/ast';
 
-interface ForProps {
-  rawArgs: string;
-  children: ASTNode[];
-  className?: string;
-  id?: string;
-}
-
 /**
  * Parse for-loop args: "@item, @i of $list" or "@item of $list"
  */
@@ -52,7 +47,11 @@ function parseForArgs(rawArgs: string): {
     );
   }
 
-  return { itemVar, indexVar, listExpr };
+  return {
+    itemVar: itemVar.slice(1),
+    indexVar: indexVar ? indexVar.slice(1) : null,
+    listExpr,
+  };
 }
 
 function ForIteration({
@@ -90,7 +89,7 @@ function ForIteration({
   );
 }
 
-export function For({ rawArgs, children, className, id }: ForProps) {
+export function For({ rawArgs, children = [], className, id }: MacroProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
@@ -163,3 +162,5 @@ export function For({ rawArgs, children, className, id }: ForProps) {
     );
   return <>{content}</>;
 }
+
+registerMacro('for', For);

package/src/components/macros/Forward.tsx

@@ -1,12 +1,9 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface ForwardProps {
-  className?: string;
-  id?: string;
-}
-
-export function Forward({ className, id }: ForwardProps) {
+export function Forward({ className, id }: MacroProps) {
   const goForward = useStoryStore((s) => s.goForward);
   const canGoForward = useStoryStore(
     (s) => s.historyIndex < s.history.length - 1,
@@ -33,3 +30,5 @@ export function Forward({ className, id }: ForwardProps) {
     </button>
   );
 }
+
+registerMacro('forward', Forward);

package/src/components/macros/Goto.tsx

@@ -2,12 +2,10 @@ import { useLayoutEffect } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import { evaluate } from '../../expression';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface GotoProps {
-  rawArgs: string;
-}
-
-export function Goto({ rawArgs }: GotoProps) {
+export function Goto({ rawArgs }: MacroProps) {
   const [variables, temporary, locals] = useMergedLocals();
 
   useLayoutEffect(() => {
@@ -23,3 +21,5 @@ export function Goto({ rawArgs }: GotoProps) {
 
   return null;
 }
+
+registerMacro('goto', Goto);

package/src/components/macros/If.tsx

@@ -3,13 +3,11 @@ 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 { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 import type { Branch } from '../../markup/ast';
 
-interface IfProps {
-  branches: Branch[];
-}
-
-export function If({ branches }: IfProps) {
+export function If({ branches = [] }: MacroProps) {
   const resolve = useInterpolate();
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
@@ -59,3 +57,5 @@ export function If({ branches }: IfProps) {
 
   return null;
 }
+
+registerMacro('if', If);

package/src/components/macros/Include.tsx

@@ -6,14 +6,10 @@ 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 { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface IncludeProps {
-  rawArgs: string;
-  className?: string;
-  id?: string;
-}
-
-export function Include({ rawArgs, className, id }: IncludeProps) {
+export function Include({ rawArgs, className, id }: MacroProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
@@ -55,3 +51,5 @@ export function Include({ rawArgs, className, id }: IncludeProps) {
     );
   return <>{content}</>;
 }
+
+registerMacro('include', Include);

package/src/components/macros/Listbox.tsx

@@ -1,16 +1,10 @@
 import { useStoryStore } from '../../store';
 import { extractOptions } from './option-utils';
 import { useAction } from '../../hooks/use-action';
-import type { ASTNode } from '../../markup/ast';
+import { registerMacro, registerSubMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface ListboxProps {
-  rawArgs: string;
-  children: ASTNode[];
-  className?: string;
-  id?: string;
-}
-
-export function Listbox({ rawArgs, children, className, id }: ListboxProps) {
+export function Listbox({ rawArgs, children = [], className, id }: MacroProps) {
   const varName = rawArgs.trim().replace(/["']/g, '');
   const name = varName.startsWith('$') ? varName.slice(1) : varName;
 
@@ -52,3 +46,6 @@ export function Listbox({ rawArgs, children, className, id }: ListboxProps) {
     </select>
   );
 }
+
+registerMacro('listbox', Listbox);
+registerSubMacro('option');

package/src/components/macros/MacroLink.tsx

@@ -2,17 +2,11 @@ import { useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import type { ASTNode } from '../../markup/ast';
 import { LocalsUpdateContext } from '../../markup/render';
-import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
-
-interface MacroLinkProps {
-  rawArgs: string;
-  children: ASTNode[];
-  className?: string;
-  id?: string;
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 function parseArgs(rawArgs: string): {
   display: string;
@@ -73,10 +67,10 @@ function executeChildren(
 
 export function MacroLink({
   rawArgs,
-  children,
+  children = [],
   className,
   id,
-}: MacroLinkProps) {
+}: MacroProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
@@ -85,7 +79,7 @@ export function MacroLink({
 
   const handleClick = (e: Event) => {
     e.preventDefault();
-    executeChildren(children, stripLocalsPrefix(getValues()), update);
+    executeChildren(children, getValues(), update);
     if (passage) {
       useStoryStore.getState().navigate(passage);
     }
@@ -98,7 +92,7 @@ export function MacroLink({
     label: display,
     target: passage ?? undefined,
     perform: () => {
-      executeChildren(children, stripLocalsPrefix(getValues()), update);
+      executeChildren(children, getValues(), update);
       if (passage) {
         useStoryStore.getState().navigate(passage);
       }
@@ -118,3 +112,5 @@ export function MacroLink({
     </a>
   );
 }
+
+registerMacro('link', MacroLink);

package/src/components/macros/Meter.tsx

@@ -1,12 +1,8 @@
 import { evaluate } from '../../expression';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
 import { useInterpolate } from '../../hooks/use-interpolate';
-
-interface MeterProps {
-  rawArgs: string;
-  className?: string;
-  id?: string;
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 /**
  * Parse rawArgs into currentExpr, maxExpr, and optional labelMode.
@@ -83,7 +79,7 @@ function formatLabel(
   return `${current} / ${max}`;
 }
 
-export function Meter({ rawArgs, className, id }: MeterProps) {
+export function Meter({ rawArgs, className, id }: MacroProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
@@ -126,3 +122,5 @@ export function Meter({ rawArgs, className, id }: MeterProps) {
     );
   }
 }
+
+registerMacro('meter', Meter);

package/src/components/macros/Numberbox.tsx

@@ -1,11 +1,7 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
-
-interface NumberboxProps {
-  rawArgs: string;
-  className?: string;
-  id?: string;
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
@@ -17,7 +13,7 @@ function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   return { varName, placeholder };
 }
 
-export function Numberbox({ rawArgs, className, id }: NumberboxProps) {
+export function Numberbox({ rawArgs, className, id }: MacroProps) {
   const { varName, placeholder } = parseArgs(rawArgs);
   const name = varName.startsWith('$') ? varName.slice(1) : varName;
 
@@ -50,3 +46,5 @@ export function Numberbox({ rawArgs, className, id }: NumberboxProps) {
     />
   );
 }
+
+registerMacro('numberbox', Numberbox);

package/src/components/macros/PassageDisplay.tsx

@@ -1,13 +1,10 @@
 import { useStoryStore } from '../../store';
 import { Passage } from '../Passage';
 import { useInterpolate } from '../../hooks/use-interpolate';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface PassageDisplayProps {
-  className?: string;
-  id?: string;
-}
-
-export function PassageDisplay({ className, id }: PassageDisplayProps) {
+export function PassageDisplay({ className, id }: MacroProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
@@ -35,3 +32,5 @@ export function PassageDisplay({ className, id }: PassageDisplayProps) {
     </div>
   );
 }
+
+registerMacro('passage', PassageDisplay);

package/src/components/macros/Print.tsx

@@ -2,14 +2,10 @@ import { evaluate } from '../../expression';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { currentSourceLocation } from '../../utils/source-location';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface PrintProps {
-  rawArgs: string;
-  className?: string;
-  id?: string;
-}
-
-export function Print({ rawArgs, className, id }: PrintProps) {
+export function Print({ rawArgs, className, id }: MacroProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
@@ -39,3 +35,5 @@ export function Print({ rawArgs, className, id }: PrintProps) {
     );
   }
 }
+
+registerMacro('print', Print);

package/src/components/macros/QuickLoad.tsx

@@ -1,12 +1,9 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface QuickLoadProps {
-  className?: string;
-  id?: string;
-}
-
-export function QuickLoad({ className, id }: QuickLoadProps) {
+export function QuickLoad({ className, id }: MacroProps) {
   const load = useStoryStore((s) => s.load);
   const hasSave = useStoryStore((s) => s.hasSave);
   // Subscribe to saveVersion so we re-render when a save is created
@@ -41,3 +38,5 @@ export function QuickLoad({ className, id }: QuickLoadProps) {
     </button>
   );
 }
+
+registerMacro('quickload', QuickLoad);

package/src/components/macros/QuickSave.tsx

@@ -1,12 +1,9 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface QuickSaveProps {
-  className?: string;
-  id?: string;
-}
-
-export function QuickSave({ className, id }: QuickSaveProps) {
+export function QuickSave({ className, id }: MacroProps) {
   const save = useStoryStore((s) => s.save);
   const cls = className ? `menubar-button ${className}` : 'menubar-button';
 
@@ -29,3 +26,5 @@ export function QuickSave({ className, id }: QuickSaveProps) {
     </button>
   );
 }
+
+registerMacro('quicksave', QuickSave);

package/src/components/macros/Radiobutton.tsx

@@ -1,11 +1,7 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
-
-interface RadiobuttonProps {
-  rawArgs: string;
-  className?: string;
-  id?: string;
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 function parseArgs(rawArgs: string): {
   varName: string;
@@ -32,7 +28,7 @@ function parseArgs(rawArgs: string): {
   };
 }
 
-export function Radiobutton({ rawArgs, className, id }: RadiobuttonProps) {
+export function Radiobutton({ rawArgs, className, id }: MacroProps) {
   const { varName, value: radioValue, label } = parseArgs(rawArgs);
   const name = varName.startsWith('$') ? varName.slice(1) : varName;
 
@@ -68,3 +64,5 @@ export function Radiobutton({ rawArgs, className, id }: RadiobuttonProps) {
     </label>
   );
 }
+
+registerMacro('radiobutton', Radiobutton);

package/src/components/macros/Repeat.tsx

@@ -4,25 +4,19 @@ 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';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 export const RepeatContext = createContext<{ stop: () => void }>({
   stop: () => {},
 });
 
-interface RepeatProps {
-  rawArgs: string;
-  children: ASTNode[];
-  className?: string;
-  id?: string;
-}
-
 export function Repeat({
   rawArgs,
-  children,
+  children = [],
   className: rawClassName,
   id: rawId,
-}: RepeatProps) {
+}: MacroProps) {
   const [className, id] = useMemo(() => {
     const resolveOnce = (s: string | undefined) => {
       if (!s || !hasInterpolation(s)) return s;
@@ -67,3 +61,5 @@ export function Repeat({
     );
   return content;
 }
+
+registerMacro('repeat', Repeat);

package/src/components/macros/Restart.tsx

@@ -1,12 +1,9 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface RestartProps {
-  className?: string;
-  id?: string;
-}
-
-export function Restart({ className, id }: RestartProps) {
+export function Restart({ className, id }: MacroProps) {
   const restart = useStoryStore((s) => s.restart);
   const cls = className ? `menubar-button ${className}` : 'menubar-button';
 
@@ -34,3 +31,5 @@ export function Restart({ className, id }: RestartProps) {
     </button>
   );
 }
+
+registerMacro('restart', Restart);

package/src/components/macros/Saves.tsx

@@ -1,12 +1,9 @@
 import { useState } from 'preact/hooks';
 import { SaveLoadDialog } from '../SaveLoadDialog';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface SavesProps {
-  className?: string;
-  id?: string;
-}
-
-export function Saves({ className, id }: SavesProps) {
+export function Saves({ className, id }: MacroProps) {
   const [open, setOpen] = useState(false);
   const cls = className ? `menubar-button ${className}` : 'menubar-button';
 
@@ -23,3 +20,5 @@ export function Saves({ className, id }: SavesProps) {
     </>
   );
 }
+
+registerMacro('saves', Saves);