@rohal12/spindle 0.16.1 → 0.17.0

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,53 @@
-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 null;
+
+    const section = sections[visibleIndex]!;
+    const content = ctx.renderNodes(section.nodes);
+    const sectionClass = ctx.resolve!(section.className);
+    const sectionId = ctx.resolve!(section.id);
+
+    if (sectionClass || sectionId)
+      return (
+        <span
+          id={sectionId}
+          class={sectionClass}
+        >
+          {content}
+        </span>
+      );
+    return <>{content}</>;
+  },
+});

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.
  */

package/src/define-macro.ts

@@ -0,0 +1,154 @@
+import { h, Fragment } from 'preact';
+import type { VNode, ComponentChildren } from 'preact';
+import {
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useMemo,
+} from 'preact/hooks';
+import { useInterpolate } from './hooks/use-interpolate';
+import { useMergedLocals } from './hooks/use-merged-locals';
+import {
+  LocalsUpdateContext,
+  renderNodes,
+  renderInlineNodes,
+} from './markup/render';
+import { executeMutation } from './execute-mutation';
+import { evaluate } from './expression';
+import { useStoryStore } from './store';
+import { useAction } from './hooks/use-action';
+import type { UseActionOptions } from './hooks/use-action';
+import { collectText } from './utils/extract-text';
+import { currentSourceLocation } from './utils/source-location';
+import { parseVarArgs, extractOptions } from './components/macros/option-utils';
+import { registerMacro, registerSubMacro } from './registry';
+import type { MacroProps } from './registry';
+
+export function macroClass(type: string, className?: string): string {
+  const base = `macro-${type}`;
+  return className ? `${base} ${className}` : base;
+}
+
+export interface MacroContext {
+  className?: string;
+  id?: string;
+  resolve?: (s: string | undefined) => string | undefined;
+  cls: string;
+  mutate: (code: string) => void;
+  update: (key: string, value: unknown) => void;
+  getValues: () => Record<string, unknown>;
+  merged?: readonly [
+    Record<string, unknown>,
+    Record<string, unknown>,
+    Record<string, unknown>,
+  ];
+  varName?: string;
+  value?: unknown;
+  setValue?: (value: unknown) => void;
+  evaluate?: (expr: string) => unknown;
+  collectText: typeof collectText;
+  sourceLocation: typeof currentSourceLocation;
+  parseVarArgs: typeof parseVarArgs;
+  extractOptions: typeof extractOptions;
+  wrap: (content: ComponentChildren) => VNode<any>;
+  useAction: (opts: UseActionOptions) => string;
+  h: typeof h;
+  renderNodes: typeof renderNodes;
+  renderInlineNodes: typeof renderInlineNodes;
+  hooks: {
+    useState: typeof useState;
+    useRef: typeof useRef;
+    useEffect: typeof useEffect;
+    useLayoutEffect: typeof useLayoutEffect;
+    useCallback: typeof useCallback;
+    useMemo: typeof useMemo;
+    useContext: typeof useContext;
+  };
+}
+
+export interface MacroDefinition {
+  name: string;
+  subMacros?: string[];
+  interpolate?: boolean;
+  merged?: boolean;
+  storeVar?: boolean;
+  render: (props: MacroProps, ctx: MacroContext) => VNode | null;
+}
+
+const sharedHooks = {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useMemo,
+  useContext,
+};
+
+export function defineMacro(config: MacroDefinition): void {
+  function Wrapper(props: MacroProps) {
+    // className/id resolved first (interpolate may transform them)
+    let className = props.className;
+    let id = props.id;
+    let resolve: ((s: string | undefined) => string | undefined) | undefined;
+    if (config.interpolate) {
+      resolve = useInterpolate();
+      className = resolve(className);
+      id = resolve(id);
+    }
+
+    // Always-on: cssClass + mutation
+    const { update, getValues } = useContext(LocalsUpdateContext);
+    const ctx: MacroContext = {
+      collectText,
+      sourceLocation: currentSourceLocation,
+      parseVarArgs,
+      extractOptions,
+      h,
+      renderNodes,
+      renderInlineNodes,
+      hooks: sharedHooks,
+      useAction,
+      className,
+      id,
+      resolve,
+      cls: macroClass(config.name, className),
+      mutate: (code: string) => executeMutation(code, getValues(), update),
+      update,
+      getValues,
+      wrap: undefined as any,
+    };
+
+    if (config.merged) {
+      ctx.merged = useMergedLocals();
+      const merged = ctx.merged;
+      ctx.evaluate = (expr: string) =>
+        evaluate(expr, merged[0], merged[1], merged[2]);
+    }
+
+    if (config.storeVar) {
+      const firstToken = props.rawArgs.trim().split(/[\s"']+/)[0] ?? '';
+      const varName = firstToken.replace(/["']/g, '').replace(/^\$/, '');
+      ctx.varName = varName;
+      ctx.value = useStoryStore((s) => s.variables[varName]);
+      const setVariable = useStoryStore((s) => s.setVariable);
+      ctx.setValue = (value: unknown) => setVariable(varName, value);
+    }
+
+    ctx.wrap = (content: ComponentChildren): VNode<any> => {
+      if (ctx.className || ctx.id)
+        return h('span', { id: ctx.id, class: ctx.className }, content);
+      return h(Fragment, null, content);
+    };
+
+    return config.render(props, ctx);
+  }
+
+  registerMacro(config.name, Wrapper);
+  if (config.subMacros) {
+    for (const sub of config.subMacros) registerSubMacro(sub);
+  }
+}