@rohal12/spindle 0.16.1 → 0.18.1

package/src/components/macros/Switch.tsx

@@ -1,68 +1,50 @@
-import { evaluate } from '../../expression';
-import { renderNodes } from '../../markup/render';
-import { useMergedLocals } from '../../hooks/use-merged-locals';
-import { currentSourceLocation } from '../../utils/source-location';
-import { registerMacro, registerSubMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
-import type { Branch } from '../../markup/ast';
-
-export function Switch({ rawArgs, branches = [] }: MacroProps) {
-  const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
-
-  let switchValue: unknown;
-  try {
-    switchValue = evaluate(rawArgs, mergedVars, mergedTemps, mergedLocals);
-  } catch (err) {
-    return (
-      <span
-        class="error"
-        title={String(err)}
-      >
-        {`{switch error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
-      </span>
-    );
-  }
-
-  // Find matching {case} branch or {default}
-  // Skip first branch (index 0) — it holds the switch expression, not a case
-  let defaultBranch: Branch | null = null;
-  for (let i = 1; i < branches.length; i++) {
-    const branch = branches[i]!;
-    // {default} has empty rawArgs
-    if (branch.rawArgs === '') {
-      defaultBranch = branch;
-      continue;
-    }
+import { defineMacro } from '../../define-macro';
+import { MacroError } from './MacroError';
 
+defineMacro({
+  name: 'switch',
+  subMacros: ['case', 'default'],
+  merged: true,
+  render({ rawArgs, branches = [] }, ctx) {
+    let switchValue: unknown;
     try {
-      const caseValue = evaluate(
-        branch.rawArgs,
-        mergedVars,
-        mergedTemps,
-        mergedLocals,
-      );
-      if (switchValue === caseValue) {
-        return <>{renderNodes(branch.children)}</>;
-      }
+      switchValue = ctx.evaluate!(rawArgs);
     } catch (err) {
       return (
-        <span
-          class="error"
-          title={String(err)}
-        >
-          {`{case error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
-        </span>
+        <MacroError
+          macro="switch"
+          error={err}
+        />
       );
     }
-  }
 
-  if (defaultBranch) {
-    return <>{renderNodes(defaultBranch.children)}</>;
-  }
+    let defaultBranch: (typeof branches)[number] | null = null;
+    for (let i = 1; i < branches.length; i++) {
+      const branch = branches[i]!;
+      if (branch.rawArgs === '') {
+        defaultBranch = branch;
+        continue;
+      }
 
-  return null;
-}
+      try {
+        const caseValue = ctx.evaluate!(branch.rawArgs);
+        if (switchValue === caseValue) {
+          return <>{ctx.renderNodes(branch.children)}</>;
+        }
+      } catch (err) {
+        return (
+          <MacroError
+            macro="case"
+            error={err}
+          />
+        );
+      }
+    }
+
+    if (defaultBranch) {
+      return <>{ctx.renderNodes(defaultBranch.children)}</>;
+    }
 
-registerMacro('switch', Switch);
-registerSubMacro('case');
-registerSubMacro('default');
+    return null;
+  },
+});

package/src/components/macros/Textarea.tsx

@@ -1,48 +1,29 @@
-import { useStoryStore } from '../../store';
-import { useAction } from '../../hooks/use-action';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
-  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
-  if (!match) {
-    return { varName: rawArgs.trim(), placeholder: '' };
-  }
-  const varName = match[1]!.replace(/["']/g, '');
-  const placeholder = match[2] || '';
-  return { varName, placeholder };
-}
+defineMacro({
+  name: 'textarea',
+  storeVar: true,
+  render({ rawArgs }, ctx) {
+    const { placeholder } = ctx.parseVarArgs(rawArgs);
 
-export function Textarea({ rawArgs, className, id }: MacroProps) {
-  const { varName, placeholder } = parseArgs(rawArgs);
-  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+    ctx.useAction({
+      type: 'textarea',
+      key: `$${ctx.varName}`,
+      authorId: ctx.id,
+      label: placeholder || ctx.varName!,
+      variable: ctx.varName,
+      value: ctx.value,
+      perform: (v) => ctx.setValue!(v !== undefined ? String(v) : ''),
+    });
 
-  const value = useStoryStore((s) => s.variables[name]);
-  const setVariable = useStoryStore((s) => s.setVariable);
-
-  useAction({
-    type: 'textarea',
-    key: `$${name}`,
-    authorId: id,
-    label: placeholder || name,
-    variable: name,
-    value,
-    perform: (v) => setVariable(name, v !== undefined ? String(v) : ''),
-  });
-
-  const cls = className ? `macro-textarea ${className}` : 'macro-textarea';
-
-  return (
-    <textarea
-      id={id}
-      class={cls}
-      value={value == null ? '' : String(value)}
-      placeholder={placeholder}
-      onInput={(e) =>
-        setVariable(name, (e.target as HTMLTextAreaElement).value)
-      }
-    />
-  );
-}
-
-registerMacro('textarea', Textarea);
+    return (
+      <textarea
+        id={ctx.id}
+        class={ctx.cls}
+        value={ctx.value == null ? '' : String(ctx.value)}
+        placeholder={placeholder}
+        onInput={(e) => ctx.setValue!((e.target as HTMLTextAreaElement).value)}
+      />
+    );
+  },
+});

package/src/components/macros/Textbox.tsx

@@ -1,47 +1,30 @@
-import { useStoryStore } from '../../store';
-import { useAction } from '../../hooks/use-action';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
-  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
-  if (!match) {
-    return { varName: rawArgs.trim(), placeholder: '' };
-  }
-  const varName = match[1]!.replace(/["']/g, '');
-  const placeholder = match[2] || '';
-  return { varName, placeholder };
-}
+defineMacro({
+  name: 'textbox',
+  storeVar: true,
+  render({ rawArgs }, ctx) {
+    const { placeholder } = ctx.parseVarArgs(rawArgs);
 
-export function Textbox({ rawArgs, className, id }: MacroProps) {
-  const { varName, placeholder } = parseArgs(rawArgs);
-  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+    ctx.useAction({
+      type: 'textbox',
+      key: `$${ctx.varName}`,
+      authorId: ctx.id,
+      label: placeholder || ctx.varName!,
+      variable: ctx.varName,
+      value: ctx.value,
+      perform: (v) => ctx.setValue!(v !== undefined ? String(v) : ''),
+    });
 
-  const value = useStoryStore((s) => s.variables[name]);
-  const setVariable = useStoryStore((s) => s.setVariable);
-
-  useAction({
-    type: 'textbox',
-    key: `$${name}`,
-    authorId: id,
-    label: placeholder || name,
-    variable: name,
-    value,
-    perform: (v) => setVariable(name, v !== undefined ? String(v) : ''),
-  });
-
-  const cls = className ? `macro-textbox ${className}` : 'macro-textbox';
-
-  return (
-    <input
-      type="text"
-      id={id}
-      class={cls}
-      value={value == null ? '' : String(value)}
-      placeholder={placeholder}
-      onInput={(e) => setVariable(name, (e.target as HTMLInputElement).value)}
-    />
-  );
-}
-
-registerMacro('textbox', Textbox);
+    return (
+      <input
+        type="text"
+        id={ctx.id}
+        class={ctx.cls}
+        value={ctx.value == null ? '' : String(ctx.value)}
+        placeholder={placeholder}
+        onInput={(e) => ctx.setValue!((e.target as HTMLInputElement).value)}
+      />
+    );
+  },
+});

package/src/components/macros/Timed.tsx

@@ -1,56 +1,55 @@
-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 { registerMacro, registerSubMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
-
-export function Timed({ branches = [] }: MacroProps) {
-  const resolve = useInterpolate();
-  // For branching blocks, className/id from the opening tag goes on branches[0],
-  // so the component-level className/id is unused. Each branch carries its own.
-  const sections = useMemo(() => {
-    return branches.map((branch) => ({
-      delay: branch.rawArgs ? parseDelay(branch.rawArgs) : 0,
-      nodes: branch.children,
-      className: branch.className,
-      id: branch.id,
-    }));
-  }, [branches]);
-
-  const [visibleIndex, setVisibleIndex] = useState(-1);
-
-  useEffect(() => {
-    if (visibleIndex >= sections.length - 1) return;
-
-    const nextIndex = visibleIndex + 1;
-    const delay = sections[nextIndex]!.delay;
-
-    const timer = setTimeout(() => {
-      setVisibleIndex(nextIndex);
-    }, delay);
-
-    return () => clearTimeout(timer);
-  }, [visibleIndex, sections]);
-
-  if (visibleIndex < 0) return null;
-
-  const section = sections[visibleIndex]!;
-  const content = renderNodes(section.nodes);
-  const sectionClass = resolve(section.className);
-  const sectionId = resolve(section.id);
-
-  if (sectionClass || sectionId)
-    return (
-      <span
-        id={sectionId}
-        class={sectionClass}
-      >
-        {content}
-      </span>
-    );
-  return <>{content}</>;
-}
-
-registerMacro('timed', Timed);
-registerSubMacro('next');
+import { defineMacro } from '../../define-macro';
+
+defineMacro({
+  name: 'timed',
+  subMacros: ['next'],
+  interpolate: true,
+  render({ branches = [] }, ctx) {
+    const { useState, useEffect, useMemo } = ctx.hooks;
+
+    const sections = useMemo(() => {
+      return branches.map((branch) => ({
+        delay: branch.rawArgs ? parseDelay(branch.rawArgs) : 0,
+        nodes: branch.children,
+        className: branch.className,
+        id: branch.id,
+      }));
+    }, [branches]);
+
+    const [visibleIndex, setVisibleIndex] = useState(-1);
+
+    useEffect(() => {
+      if (visibleIndex >= sections.length - 1) return;
+
+      const nextIndex = visibleIndex + 1;
+      const delay = sections[nextIndex]!.delay;
+
+      const timer = setTimeout(() => {
+        setVisibleIndex(nextIndex);
+      }, delay);
+
+      return () => clearTimeout(timer);
+    }, [visibleIndex, sections]);
+
+    if (visibleIndex < 0) return ctx.wrap(null);
+
+    const section = sections[visibleIndex]!;
+    const content = ctx.renderNodes(section.nodes);
+    const sectionClass = ctx.resolve!(section.className);
+    const sectionId = ctx.resolve!(section.id);
+
+    const inner =
+      sectionClass || sectionId ? (
+        <span
+          id={sectionId}
+          class={sectionClass}
+        >
+          {content}
+        </span>
+      ) : (
+        content
+      );
+    return ctx.wrap(inner);
+  },
+});

package/src/components/macros/Type.tsx

@@ -1,76 +1,75 @@
-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 { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-export function Type({ rawArgs, children = [], className, id }: MacroProps) {
-  const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-  const speed = parseDelay(rawArgs);
-  const containerRef = useRef<HTMLSpanElement>(null);
-  const [totalChars, setTotalChars] = useState(0);
-  const [visibleChars, setVisibleChars] = useState(0);
+defineMacro({
+  name: 'type',
+  interpolate: true,
+  render({ rawArgs, children = [] }, ctx) {
+    const { useState, useEffect, useRef } = ctx.hooks;
+    const speed = parseDelay(rawArgs);
+    const containerRef = useRef<HTMLSpanElement>(null);
+    const [totalChars, setTotalChars] = useState(0);
+    const [visibleChars, setVisibleChars] = useState(0);
 
-  // After first render, measure total text length
-  useEffect(() => {
-    if (containerRef.current) {
-      const text = containerRef.current.textContent || '';
-      setTotalChars(text.length);
-    }
-  }, []);
+    useEffect(() => {
+      if (containerRef.current) {
+        const text = containerRef.current.textContent || '';
+        setTotalChars(text.length);
+      }
+    }, []);
 
-  // Typewriter interval
-  useEffect(() => {
-    if (totalChars === 0) return;
-    if (visibleChars >= totalChars) return;
+    // Typewriter interval
+    useEffect(() => {
+      if (totalChars === 0) return;
+      if (visibleChars >= totalChars) return;
 
-    const timer = setInterval(() => {
-      setVisibleChars((c) => {
-        if (c >= totalChars) {
-          clearInterval(timer);
-          return c;
-        }
-        return c + 1;
-      });
-    }, speed);
+      const timer = setInterval(() => {
+        setVisibleChars((c) => {
+          if (c >= totalChars) {
+            clearInterval(timer);
+            return c;
+          }
+          return c + 1;
+        });
+      }, speed);
 
-    return () => clearInterval(timer);
-  }, [totalChars, speed]);
+      return () => clearInterval(timer);
+    }, [totalChars, speed]);
 
-  const done = visibleChars >= totalChars && totalChars > 0;
+    const done = visibleChars >= totalChars && totalChars > 0;
 
-  const cls = ['macro-type', done ? 'macro-type-done' : '', className || '']
-    .filter(Boolean)
-    .join(' ');
+    const cls = [
+      'macro-type',
+      done ? 'macro-type-done' : '',
+      ctx.className || '',
+    ]
+      .filter(Boolean)
+      .join(' ');
 
-  return (
-    <span
-      id={id}
-      class={cls}
-      ref={containerRef}
-      style={{
-        clipPath: totalChars > 0 && !done ? undefined : undefined,
-      }}
-    >
+    return (
       <span
-        class="macro-type-inner"
+        id={ctx.id}
+        class={cls}
+        ref={containerRef}
         style={{
-          display: 'inline',
-          visibility: totalChars === 0 ? 'hidden' : 'visible',
-          clipPath:
-            totalChars > 0 && !done
-              ? `inset(0 ${((totalChars - visibleChars) / totalChars) * 100}% 0 0)`
-              : undefined,
+          clipPath: totalChars > 0 && !done ? undefined : undefined,
         }}
       >
-        {renderInlineNodes(children)}
+        <span
+          class="macro-type-inner"
+          style={{
+            display: 'inline',
+            visibility: totalChars === 0 ? 'hidden' : 'visible',
+            clipPath:
+              totalChars > 0 && !done
+                ? `inset(0 ${((totalChars - visibleChars) / totalChars) * 100}% 0 0)`
+                : undefined,
+          }}
+        >
+          {ctx.renderInlineNodes(children)}
+        </span>
+        {!done && totalChars > 0 && <span class="macro-type-cursor" />}
       </span>
-      {!done && totalChars > 0 && <span class="macro-type-cursor" />}
-    </span>
-  );
-}
-
-registerMacro('type', Type);
+    );
+  },
+});

package/src/components/macros/Unset.tsx

@@ -1,28 +1,27 @@
-import { useRef } from 'preact/hooks';
 import { useStoryStore } from '../../store';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-export function Unset({ rawArgs }: MacroProps) {
-  const ran = useRef(false);
+defineMacro({
+  name: 'unset',
+  render({ rawArgs }, ctx) {
+    const ran = ctx.hooks.useRef(false);
 
-  if (!ran.current) {
-    ran.current = true;
-    const state = useStoryStore.getState();
-    const name = rawArgs.trim();
+    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 {
-      console.error(
-        `spindle: {unset} expects a variable ($name or _name), got "${name}"`,
-      );
+      if (name.startsWith('$')) {
+        state.deleteVariable(name.slice(1));
+      } else if (name.startsWith('_')) {
+        state.deleteTemporary(name.slice(1));
+      } else {
+        console.error(
+          `spindle: {unset} expects a variable ($name or _name), got "${name}"`,
+        );
+      }
     }
-  }
 
-  return null;
-}
-
-registerMacro('unset', Unset);
+    return null;
+  },
+});

package/src/components/macros/Widget.tsx

@@ -1,11 +1,6 @@
-import { useLayoutEffect } from 'preact/hooks';
 import { registerWidget } from '../../widgets/widget-registry';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-/**
- * Parse widget definition args: "WidgetName" or "WidgetName" $param1 $param2
- */
 function parseWidgetDef(rawArgs: string): { name: string; params: string[] } {
   const tokens = rawArgs.trim().split(/\s+/);
   const name = tokens[0]!.replace(/["']/g, '');
@@ -13,14 +8,15 @@ function parseWidgetDef(rawArgs: string): { name: string; params: string[] } {
   return { name, params };
 }
 
-export function Widget({ rawArgs, children = [] }: MacroProps) {
-  const { name, params } = parseWidgetDef(rawArgs);
+defineMacro({
+  name: 'widget',
+  render({ rawArgs, children = [] }, ctx) {
+    const { name, params } = parseWidgetDef(rawArgs);
 
-  useLayoutEffect(() => {
-    registerWidget(name, children, params);
-  }, []);
+    ctx.hooks.useLayoutEffect(() => {
+      registerWidget(name, children, params);
+    }, []);
 
-  return null;
-}
-
-registerMacro('widget', Widget);
+    return null;
+  },
+});

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

@@ -1,5 +1,18 @@
 import type { ASTNode } from '../../markup/ast';
 
+export function parseVarArgs(rawArgs: string): {
+  varName: string;
+  placeholder: string;
+} {
+  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
+  if (!match) {
+    return { varName: rawArgs.trim(), placeholder: '' };
+  }
+  const varName = match[1]!.replace(/["']/g, '');
+  const placeholder = match[2] || '';
+  return { varName, placeholder };
+}
+
 /**
  * Walk AST children to find {option} macro nodes, returning their rawArgs as values.
  */