@rohal12/spindle 0.16.1 → 0.17.0

package/src/components/macros/For.tsx

@@ -5,17 +5,13 @@ import {
   useRef,
   useMemo,
 } from 'preact/hooks';
-import { evaluate } from '../../expression';
 import {
   LocalsValuesContext,
   LocalsUpdateContext,
   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 { defineMacro } from '../../define-macro';
+import { MacroError } from './MacroError';
 import type { ASTNode } from '../../markup/ast';
 
 /**
@@ -89,78 +85,64 @@ function ForIteration({
   );
 }
 
-export function For({ rawArgs, children = [], className, id }: MacroProps) {
-  const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-  const parentValues = useContext(LocalsValuesContext);
-  const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
-
-  let parsed: ReturnType<typeof parseForArgs>;
-  try {
-    parsed = parseForArgs(rawArgs);
-  } catch (err) {
-    return (
-      <span
-        class="error"
-        title={String(err)}
-      >
-        {`{for error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
-      </span>
-    );
-  }
-
-  const { itemVar, indexVar, listExpr } = parsed;
+defineMacro({
+  name: 'for',
+  interpolate: true,
+  merged: true,
+  render({ rawArgs, children = [] }, ctx) {
+    const parentValues = useContext(LocalsValuesContext);
+
+    let parsed: ReturnType<typeof parseForArgs>;
+    try {
+      parsed = parseForArgs(rawArgs);
+    } catch (err) {
+      return (
+        <MacroError
+          macro="for"
+          error={err}
+        />
+      );
+    }
 
-  let list: unknown[];
-  try {
-    const result = evaluate(listExpr, mergedVars, mergedTemps, mergedLocals);
-    if (!Array.isArray(result)) {
+    const { itemVar, indexVar, listExpr } = parsed;
+
+    let list: unknown[];
+    try {
+      const result = ctx.evaluate!(listExpr);
+      if (!Array.isArray(result)) {
+        return (
+          <span class="error">
+            {`{for error: expression did not evaluate to an array}`}
+          </span>
+        );
+      }
+      list = result;
+    } catch (err) {
       return (
-        <span class="error">
-          {`{for error${currentSourceLocation()}: expression did not evaluate to an array}`}
-        </span>
+        <MacroError
+          macro="for"
+          error={err}
+        />
       );
     }
-    list = result;
-  } catch (err) {
-    return (
-      <span
-        class="error"
-        title={String(err)}
-      >
-        {`{for error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
-      </span>
-    );
-  }
 
-  const content = list.map((item, i) => {
-    const ownKeys: Record<string, unknown> = {
-      [itemVar]: item,
-      ...(indexVar ? { [indexVar]: i } : undefined),
-    };
-
-    return (
-      <ForIteration
-        key={i}
-        parentValues={parentValues}
-        ownKeys={ownKeys}
-        initialValues={{}}
-        children={children}
-      />
-    );
-  });
-
-  if (className || id)
-    return (
-      <span
-        id={id}
-        class={className}
-      >
-        {content}
-      </span>
-    );
-  return <>{content}</>;
-}
+    const content = list.map((item, i) => {
+      const ownKeys: Record<string, unknown> = {
+        [itemVar]: item,
+        ...(indexVar ? { [indexVar]: i } : undefined),
+      };
+
+      return (
+        <ForIteration
+          key={i}
+          parentValues={parentValues}
+          ownKeys={ownKeys}
+          initialValues={{}}
+          children={children}
+        />
+      );
+    });
 
-registerMacro('for', For);
+    return ctx.wrap(content);
+  },
+});

package/src/components/macros/Goto.tsx

@@ -1,25 +1,21 @@
-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';
+import { defineMacro } from '../../define-macro';
 
-export function Goto({ rawArgs }: MacroProps) {
-  const [variables, temporary, locals] = useMergedLocals();
+defineMacro({
+  name: 'goto',
+  merged: true,
+  render({ rawArgs }, ctx) {
+    ctx.hooks.useLayoutEffect(() => {
+      let passageName: string;
+      try {
+        const result = ctx.evaluate!(rawArgs);
+        passageName = String(result);
+      } catch {
+        passageName = rawArgs.replace(/^["']|["']$/g, '');
+      }
+      useStoryStore.getState().navigate(passageName);
+    }, []);
 
-  useLayoutEffect(() => {
-    let passageName: string;
-    try {
-      const result = evaluate(rawArgs, variables, temporary, locals);
-      passageName = String(result);
-    } catch {
-      passageName = rawArgs.replace(/^["']|["']$/g, '');
-    }
-    useStoryStore.getState().navigate(passageName);
-  }, []);
-
-  return null;
-}
-
-registerMacro('goto', Goto);
+    return null;
+  },
+});

package/src/components/macros/If.tsx

@@ -1,61 +1,47 @@
-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 { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
+import { MacroError } from './MacroError';
 import type { Branch } from '../../markup/ast';
 
-export function If({ branches = [] }: MacroProps) {
-  const resolve = useInterpolate();
-  const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
-
-  function renderBranch(branch: Branch) {
-    const children = renderNodes(branch.children);
-    const cls = resolve(branch.className);
-    const branchId = resolve(branch.id);
-    if (cls || branchId)
-      return (
-        <span
-          id={branchId}
-          class={cls}
-        >
-          {children}
-        </span>
-      );
-    return <>{children}</>;
-  }
-
-  for (const branch of branches) {
-    // {else} has empty rawArgs — always truthy
-    if (branch.rawArgs === '') {
-      return renderBranch(branch);
+defineMacro({
+  name: 'if',
+  interpolate: true,
+  merged: true,
+  render({ branches = [] }, ctx) {
+    function renderBranch(branch: Branch) {
+      const children = ctx.renderNodes(branch.children);
+      const cls = ctx.resolve!(branch.className);
+      const branchId = ctx.resolve!(branch.id);
+      if (cls || branchId)
+        return (
+          <span
+            id={branchId}
+            class={cls}
+          >
+            {children}
+          </span>
+        );
+      return <>{children}</>;
     }
 
-    try {
-      const result = evaluate(
-        branch.rawArgs,
-        mergedVars,
-        mergedTemps,
-        mergedLocals,
-      );
-      if (result) {
+    for (const branch of branches) {
+      if (branch.rawArgs === '') {
         return renderBranch(branch);
       }
-    } catch (err) {
-      return (
-        <span
-          class="error"
-          title={String(err)}
-        >
-          {`{if error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
-        </span>
-      );
-    }
-  }
 
-  return null;
-}
+      try {
+        if (ctx.evaluate!(branch.rawArgs)) {
+          return renderBranch(branch);
+        }
+      } catch (err) {
+        return (
+          <MacroError
+            macro="if"
+            error={err}
+          />
+        );
+      }
+    }
 
-registerMacro('if', If);
+    return null;
+  },
+});

package/src/components/macros/Include.tsx

@@ -1,55 +1,39 @@
 import { useStoryStore } from '../../store';
-import { evaluate } from '../../expression';
 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';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-export function Include({ rawArgs, className, id }: MacroProps) {
-  const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-  const storyData = useStoryStore((s) => s.storyData);
-  const [variables, temporary, locals] = useMergedLocals();
+defineMacro({
+  name: 'include',
+  interpolate: true,
+  merged: true,
+  render({ rawArgs }, ctx) {
+    const storyData = useStoryStore((s) => s.storyData);
 
-  if (!storyData) return null;
+    if (!storyData) return null;
 
-  let passageName: string;
-  try {
-    const result = evaluate(rawArgs, variables, temporary, locals);
-    passageName = String(result);
-  } catch {
-    passageName = rawArgs.replace(/^["']|["']$/g, '');
-  }
+    let passageName: string;
+    try {
+      const result = ctx.evaluate!(rawArgs);
+      passageName = String(result);
+    } catch {
+      passageName = rawArgs.replace(/^["']|["']$/g, '');
+    }
 
-  const passage = storyData.passages.get(passageName);
-  if (passage) {
-    useStoryStore.getState().trackRender(passageName);
-  }
-  if (!passage) {
-    return (
-      <span class="error">{`{include${currentSourceLocation()}: passage "${passageName}" not found}`}</span>
-    );
-  }
+    const passage = storyData.passages.get(passageName);
+    if (passage) {
+      useStoryStore.getState().trackRender(passageName);
+    }
+    if (!passage) {
+      return (
+        <span class="error">{`{include${ctx.sourceLocation()}: passage "${passageName}" not found}`}</span>
+      );
+    }
 
-  const tokens = tokenize(passage.content);
-  const ast = buildAST(tokens);
-  const content = renderNodes(ast);
+    const tokens = tokenize(passage.content);
+    const ast = buildAST(tokens);
+    const content = ctx.renderNodes(ast);
 
-  if (className || id)
-    return (
-      <span
-        id={id}
-        class={className}
-      >
-        {content}
-      </span>
-    );
-  return <>{content}</>;
-}
-
-registerMacro('include', Include);
+    return ctx.wrap(content);
+  },
+});

package/src/components/macros/Listbox.tsx

@@ -1,51 +1,41 @@
-import { useStoryStore } from '../../store';
-import { extractOptions } from './option-utils';
-import { useAction } from '../../hooks/use-action';
-import { registerMacro, registerSubMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-export function Listbox({ rawArgs, children = [], className, id }: MacroProps) {
-  const varName = rawArgs.trim().replace(/["']/g, '');
-  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+defineMacro({
+  name: 'listbox',
+  subMacros: ['option'],
+  storeVar: true,
+  render({ children = [] }, ctx) {
+    const options = ctx.extractOptions(children);
 
-  const value = useStoryStore((s) => s.variables[name]);
-  const setVariable = useStoryStore((s) => s.setVariable);
+    ctx.useAction({
+      type: 'listbox',
+      key: `$${ctx.varName}`,
+      authorId: ctx.id,
+      label: ctx.varName!,
+      variable: ctx.varName,
+      options,
+      value: ctx.value,
+      perform: (v) => {
+        if (v !== undefined) ctx.setValue!(String(v));
+      },
+    });
 
-  const options = extractOptions(children);
-
-  useAction({
-    type: 'listbox',
-    key: `$${name}`,
-    authorId: id,
-    label: name,
-    variable: name,
-    options,
-    value,
-    perform: (v) => {
-      if (v !== undefined) setVariable(name, String(v));
-    },
-  });
-
-  const cls = className ? `macro-listbox ${className}` : 'macro-listbox';
-
-  return (
-    <select
-      id={id}
-      class={cls}
-      value={value == null ? '' : String(value)}
-      onChange={(e) => setVariable(name, (e.target as HTMLSelectElement).value)}
-    >
-      {options.map((opt) => (
-        <option
-          key={opt}
-          value={opt}
-        >
-          {opt}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-registerMacro('listbox', Listbox);
-registerSubMacro('option');
+    return (
+      <select
+        id={ctx.id}
+        class={ctx.cls}
+        value={ctx.value == null ? '' : String(ctx.value)}
+        onChange={(e) => ctx.setValue!((e.target as HTMLSelectElement).value)}
+      >
+        {options.map((opt) => (
+          <option
+            key={opt}
+            value={opt}
+          >
+            {opt}
+          </option>
+        ))}
+      </select>
+    );
+  },
+});

package/src/components/macros/MacroError.tsx

@@ -0,0 +1,18 @@
+import { currentSourceLocation } from '../../utils/source-location';
+
+export function MacroError({
+  macro,
+  error,
+}: {
+  macro: string;
+  error: unknown;
+}) {
+  return (
+    <span
+      class="error"
+      title={String(error)}
+    >
+      {`{${macro} error${currentSourceLocation()}: ${error instanceof Error ? error.message : String(error)}}`}
+    </span>
+  );
+}

package/src/components/macros/MacroLink.tsx

@@ -1,12 +1,9 @@
-import { useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import type { ASTNode } from '../../markup/ast';
-import { LocalsUpdateContext } from '../../markup/render';
-import { useInterpolate } from '../../hooks/use-interpolate';
 import { executeMutation } from '../../execute-mutation';
+import { collectText } from '../../utils/extract-text';
 import { currentSourceLocation } from '../../utils/source-location';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
 function parseArgs(rawArgs: string): {
   display: string;
@@ -29,9 +26,6 @@ function parseArgs(rawArgs: string): {
   return { display: rawArgs.trim(), passage: null };
 }
 
-import { collectText } from '../../utils/extract-text';
-import { useAction } from '../../hooks/use-action';
-
 /**
  * Execute the children imperatively: walk AST for {set} and {do} macros.
  */
@@ -65,52 +59,43 @@ function executeChildren(
   }
 }
 
-export function MacroLink({
-  rawArgs,
-  children = [],
-  className,
-  id,
-}: MacroProps) {
-  const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-  const { display, passage } = parseArgs(rawArgs);
-  const { update, getValues } = useContext(LocalsUpdateContext);
+defineMacro({
+  name: 'link',
+  interpolate: true,
+  render({ rawArgs, children = [] }, ctx) {
+    const { display, passage } = parseArgs(rawArgs);
 
-  const handleClick = (e: Event) => {
-    e.preventDefault();
-    executeChildren(children, getValues(), update);
-    if (passage) {
-      useStoryStore.getState().navigate(passage);
-    }
-  };
-
-  useAction({
-    type: 'link',
-    key: passage || display,
-    authorId: id,
-    label: display,
-    target: passage ?? undefined,
-    perform: () => {
-      executeChildren(children, getValues(), update);
+    const handleClick = (e: Event) => {
+      e.preventDefault();
+      executeChildren(children, ctx.getValues(), ctx.update);
       if (passage) {
         useStoryStore.getState().navigate(passage);
       }
-    },
-  });
-
-  const cls = className ? `macro-link ${className}` : 'macro-link';
+    };
 
-  return (
-    <a
-      id={id}
-      class={cls}
-      href="#"
-      onClick={handleClick}
-    >
-      {display}
-    </a>
-  );
-}
+    ctx.useAction({
+      type: 'link',
+      key: passage || display,
+      authorId: ctx.id,
+      label: display,
+      target: passage ?? undefined,
+      perform: () => {
+        executeChildren(children, ctx.getValues(), ctx.update);
+        if (passage) {
+          useStoryStore.getState().navigate(passage);
+        }
+      },
+    });
 
-registerMacro('link', MacroLink);
+    return (
+      <a
+        id={ctx.id}
+        class={ctx.cls}
+        href="#"
+        onClick={handleClick}
+      >
+        {display}
+      </a>
+    );
+  },
+});