@rohal12/spindle 0.52.6 → 0.52.8

package/dist/pkg/macro-registry.json

@@ -182,6 +182,13 @@
       "next"
     ],
     "interpolate": true,
+    "parameters": [
+      {
+        "name": "delay",
+        "type": "delay",
+        "required": true
+      }
+    ],
     "source": "builtin"
   },
   {
@@ -208,6 +215,17 @@
     "name": "widget",
     "block": true,
     "subMacros": [],
+    "parameters": [
+      {
+        "name": "name",
+        "type": "text",
+        "required": true
+      },
+      {
+        "name": "parameters",
+        "type": "expression"
+      }
+    ],
     "source": "builtin"
   },
   {

package/dist/pkg/story-variables.js

@@ -248,6 +248,13 @@ var UNCLOSED = -1;
 var MALFORMED = -2;
 /** A frame result: the scan stops at index `s` inside it (`STOPPED - s`). */
 var STOPPED = -3;
+/**
+* The result of a frame that closes at `end`. `bodyStarted`: the code inside
+* started a function or class body. That body replaced the one to come, and
+* is gone once the frame is closed, so after the frame no body is to come —
+* a scan that skips the frame must know, as must the frames around it.
+*/
+var frameEnd = (end, bodyStarted) => end * 2 + +bodyStarted;
 /** The closers whose search for their frame a frame result may depend on. */
 var CLOSERS = [
 	")",
@@ -480,14 +487,30 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 	]] : void 0;
 	/**
 	* How many function or class bodies to come the scan has started, and with
-	* `parens`, that count when each open frame opened. Code in a `(…)` or
-	* `[…]` that starts one replaces the one to come, and the new one can't
-	* follow once the frame is closed: none is to come then.
+	* `braces` or `parens`, that count when each open frame opened. Code in a
+	* frame that starts one replaces the one to come, and the new one can't
+	* follow once the frame is closed: none is to come then. A scan skipping
+	* the frame learns this from its result (`frameEnd`, `resume`), and counts
+	* the body as started too, for the frames around it to record.
 	*/
 	let bodyStarts = 0;
-	const startsAt = parens ? [0] : void 0;
+	const startsAt = braces || parens ? [0] : void 0;
 	/** A `(…)` or `[…]` frame result found in `parens`, to skip to. */
 	let parenTo;
+	/** The result of the frame at index `k`, closing at `i`. */
+	const closedAt = (k) => frameEnd(i, startsAt !== void 0 && bodyStarts !== startsAt[k]);
+	/**
+	* Go on after a frame an earlier scan lexed, whose result (`frameEnd`) is
+	* `result`: returns the index it closes at. A body started in it is gone
+	* after it, with the one it replaced.
+	*/
+	function resume(result) {
+		if (result % 2 === 1) {
+			pendingBody = void 0;
+			bodyStarts++;
+		}
+		return Math.floor(result / 2);
+	}
 	/** The closer `c` looked for its frame and found index `k`. */
 	function lookedFor(c, k) {
 		if (!lowest) return;
@@ -635,8 +658,8 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 		if (lowest) {
 			for (let j = frames.length - 1; j >= k; j--) foldLowest(j);
 			lowest.length = k;
-			startsAt.length = k;
 		}
+		if (startsAt) startsAt.length = k;
 		frames.length = k;
 		if (stackIds) stackIds.length = k;
 		for (const list of Object.values(closers)) while (list.length && list[list.length - 1] >= k) list.pop();
@@ -713,6 +736,18 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 		stmtNext = f.kind === "block";
 		keyNext = f.kind === "object" || f.kind === "class";
 	}
+	/**
+	* Go past frame `f` if an earlier scan lexed it: to just after it, or to
+	* the end of the source when it never closes. Whether it did, or
+	* MALFORMED when that scan found the code malformed.
+	*/
+	function skipLexed(f) {
+		const end = known(f);
+		if (end === void 0) return false;
+		if (end === MALFORMED) return MALFORMED;
+		i = end === UNCLOSED ? src.length : resume(end) + 1;
+		return true;
+	}
 	function openBrace() {
 		let f;
 		if (pendingBody?.depth === frames.length) {
@@ -756,10 +791,10 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 			return;
 		}
 		const closed = frames[k];
+		const result = closedAt(k);
 		if (lowest && c !== "}") {
 			for (let j = frames.length - 1; j > k; j--) foldLowest(j);
-			const bodyStarted = bodyStarts !== startsAt[k];
-			recordParen(k, i * 2 + +bodyStarted);
+			recordParen(k, result);
 		}
 		truncate(k);
 		if (c === "]" && !ctx.lookahead) ctx.brackets.set(closed.open, i);
@@ -768,7 +803,7 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 			stmtNext = closed.header;
 		} else if (c === "]") endPunct(c, false);
 		else {
-			record(closed, i);
+			record(closed, result);
 			afterBrace(closed);
 		}
 	}
@@ -870,23 +905,16 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 			} else if (ch === "`") {
 				literal(ch, i);
 				if (frames.length === 1) return i + 1;
-				record(top(), i);
+				record(top(), closedAt(frames.length - 1));
 				i++;
 				truncate(frames.length - 1);
 				endOperand();
 			} else if (ch === "$" && src.charAt(i + 1) === "{") {
 				const f = frame("expr", "}", i);
 				f.interpolation = true;
-				const end = known(f);
-				if (end === MALFORMED) return malformed();
-				if (end === UNCLOSED) {
-					i = src.length;
-					break;
-				}
-				if (end !== void 0) {
-					i = end + 1;
-					continue;
-				}
+				const skipped = skipLexed(f);
+				if (skipped === MALFORMED) return malformed();
+				if (skipped) continue;
 				literal("${", i);
 				i += 2;
 				nesting++;
@@ -913,14 +941,9 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 		if (ch === "`") {
 			endWord();
 			const f = frame("template", "`", i);
-			const end = known(f);
-			if (end === MALFORMED) return malformed();
-			if (end === UNCLOSED) {
-				i = src.length;
-				break;
-			}
-			if (end !== void 0) {
-				i = end + 1;
+			const skipped = skipLexed(f);
+			if (skipped === MALFORMED) return malformed();
+			if (skipped) {
 				endOperand();
 				continue;
 			}
@@ -939,7 +962,7 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 			lookedFor("}", k);
 			if (frames[k].interpolation) {
 				endWord();
-				record(frames[k], i);
+				record(frames[k], closedAt(k));
 				truncate(k);
 				nesting--;
 				literal(ch, i);
@@ -1021,7 +1044,7 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 				continue;
 			}
 		}
-		if (ch === outer.closer && frames.length === 1) break;
+		if (ch === outer.closer && (frames.length === 1 || ch === "]" && innermost("]") === 0 && innermost("}") === 0)) break;
 		trackCode(ch);
 		if (skipTo) {
 			const { frame: skipped, end } = skipTo;
@@ -1031,7 +1054,7 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 				i = src.length;
 				break;
 			}
-			i = end;
+			i = resume(end);
 			afterBrace(skipped);
 			i++;
 			continue;
@@ -1049,8 +1072,7 @@ function scan(src, handlers, start, nesting, outer, ctx) {
 				strict.stopped = true;
 				return STOPPED - result;
 			}
-			i = Math.floor(result / 2);
-			if (result % 2 === 1) pendingBody = void 0;
+			i = resume(result);
 			if (skipped.closer === ")") {
 				endPunct(")", skipped.header);
 				stmtNext = skipped.header;

package/package.json

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

package/src/action-registry.ts

@@ -29,6 +29,15 @@ export interface StoryAction {
   perform: (value?: unknown) => void;
 }
 
+/** The fields of a StoryAction that are left out when unset. */
+export const OPTIONAL_ACTION_FIELDS = [
+  'target',
+  'variable',
+  'options',
+  'value',
+  'disabled',
+] as const;
+
 /** A mounted control's hold on its action ID. */
 export interface ActionRegistration {
   /**

package/src/class-registry.ts

@@ -1,10 +1,6 @@
 // Class registry for preserving class instances across clone/save/load cycles.
 
-import { setOwn } from './structural';
-import { hasOwn } from './utils/namespace';
-
-// Copying and comparing story values live with the structural diff
-export { deepClone, deepEqual, type DeepCloneOptions } from './structural';
+import { hasOwn, setOwn } from './utils/namespace';
 
 type Constructor = new (...args: any[]) => any;
 

package/src/components/Passage.tsx

@@ -8,7 +8,7 @@ import {
 import { tokenize } from '../markup/tokenizer';
 import { buildAST, type ASTNode } from '../markup/ast';
 import { renderNodes, NobrContext } from '../markup/render';
-import { useStoryStore } from '../store';
+import { useStoryFields } from '../hooks/use-story-fields';
 import type { Passage as PassageData } from '../parser';
 import { sourceLocationOf } from '../utils/source-location';
 import { emitFromRender } from '../event-emitter';
@@ -40,6 +40,21 @@ export function renderPassageContent(passage: PassageData) {
   return renderNodes(ast, nobr ? { nobr: true } : undefined);
 }
 
+/**
+ * The content of a special passage shown with every passage (PassageHeader,
+ * PassageFooter, PassageDone), or null. One that fails to render is logged
+ * and left out, so it can't take the passage down with it.
+ */
+function renderSpecialPassage(passage: PassageData | undefined) {
+  if (!passage) return null;
+  try {
+    return renderPassageContent(passage);
+  } catch (err) {
+    console.error(`spindle: Error in ${passage.name}:`, err);
+    return null;
+  }
+}
+
 interface PassageProps {
   passage: PassageData;
   dataTransition?: string;
@@ -59,7 +74,7 @@ export function Passage({
   dataTransition,
   navigationId,
 }: PassageProps) {
-  const storyData = useStoryStore((s) => s.storyData);
+  const { storyData } = useStoryFields('storyData');
   const isCodePassage = CODE_PASSAGES.has(passage.name);
   const [doneReady, setDoneReady] = useState(false);
 
@@ -76,35 +91,21 @@ export function Passage({
     }
   }, [passage.content, passage.name]);
 
-  const headerPassage = isCodePassage
-    ? undefined
-    : storyData?.passages.get('PassageHeader');
-  const footerPassage = isCodePassage
-    ? undefined
-    : storyData?.passages.get('PassageFooter');
-  const donePassage = isCodePassage
-    ? undefined
-    : storyData?.passages.get('PassageDone');
-
-  const headerContent = useMemo(() => {
-    if (!headerPassage) return null;
-    try {
-      return renderPassageContent(headerPassage);
-    } catch (err) {
-      console.error('spindle: Error in PassageHeader:', err);
-      return null;
-    }
-  }, [headerPassage?.content]);
+  // Code passages are shown without the special passages
+  const special = (name: string) =>
+    isCodePassage ? undefined : storyData?.passages.get(name);
+  const headerPassage = special('PassageHeader');
+  const footerPassage = special('PassageFooter');
+  const donePassage = special('PassageDone');
 
-  const footerContent = useMemo(() => {
-    if (!footerPassage) return null;
-    try {
-      return renderPassageContent(footerPassage);
-    } catch (err) {
-      console.error('spindle: Error in PassageFooter:', err);
-      return null;
-    }
-  }, [footerPassage?.content]);
+  const headerContent = useMemo(
+    () => renderSpecialPassage(headerPassage),
+    [headerPassage?.content],
+  );
+  const footerContent = useMemo(
+    () => renderSpecialPassage(footerPassage),
+    [footerPassage?.content],
+  );
 
   // Defer PassageDone to after DOM commit
   useEffect(() => {
@@ -112,15 +113,10 @@ export function Passage({
     return () => setDoneReady(false);
   }, [passage.name]);
 
-  const doneContent = useMemo(() => {
-    if (!doneReady || !donePassage) return null;
-    try {
-      return renderPassageContent(donePassage);
-    } catch (err) {
-      console.error('spindle: Error in PassageDone:', err);
-      return null;
-    }
-  }, [doneReady, donePassage?.content]);
+  const doneContent = useMemo(
+    () => (doneReady ? renderSpecialPassage(donePassage) : null),
+    [doneReady, donePassage?.content],
+  );
 
   // Signal that this passage's DOM is committed (after descendants' layout
   // effects, before paint). Runs once per mount: PassageDisplay keys the

package/src/components/PassageDialog.tsx

@@ -3,7 +3,7 @@ import { useCallback, useLayoutEffect, useMemo, useRef } from 'preact/hooks';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
 import { renderNodes, NobrContext } from '../markup/render';
-import { useStoryStore } from '../store';
+import { useStoryFields } from '../hooks/use-story-fields';
 import { emitFromRender } from '../event-emitter';
 import { useModalFocus } from '../hooks/use-modal-focus';
 import { errorMessage } from '../utils/error-message';
@@ -38,7 +38,7 @@ export function PassageDialog({
   onCloseRef.current = onClose;
   const stableOnClose = useCallback(() => onCloseRef.current(), []);
 
-  const storyData = useStoryStore((s) => s.storyData);
+  const { storyData } = useStoryFields('storyData');
 
   const passage = passageName
     ? storyData?.passages.get(passageName)

package/src/components/StoryInterface.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'preact/hooks';
-import { useStoryStore } from '../store';
+import { useStoryFields } from '../hooks/use-story-fields';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
 import { renderInlineNodes, NobrContext } from '../markup/render';
@@ -9,7 +9,7 @@ const DEFAULT_MARKUP =
   '<header class="story-menubar">{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}</header>\n{passage}';
 
 export function StoryInterface() {
-  const storyData = useStoryStore((s) => s.storyData);
+  const { storyData } = useStoryFields('storyData');
 
   const overridePassage = storyData?.passages.get('StoryInterface');
   const markup =

package/src/components/macros/Checkbox.tsx

@@ -1,21 +1,16 @@
 import { defineMacro } from '../../define-macro';
+import { VARIABLE_PARAMETER, useVariableAction } from './input-macro';
 
 defineMacro({
   name: 'checkbox',
   storeVar: true,
-  parameters: [
-    { name: 'variable', type: 'variable', required: true },
-    { name: 'label', type: 'text' },
-  ],
+  parameters: [VARIABLE_PARAMETER, { name: 'label', type: 'text' }],
   render(_props, ctx) {
     const label = ctx.args.label ?? '';
 
-    ctx.useAction({
+    useVariableAction(ctx, {
       type: 'checkbox',
-      key: `$${ctx.varName}`,
-      authorId: ctx.id,
       label: label || ctx.varName || '',
-      variable: ctx.varName,
       value: !!ctx.value,
       perform: (v) => ctx.setValue!(v !== undefined ? !!v : !ctx.value),
     });

package/src/components/macros/Computed.tsx

@@ -1,7 +1,7 @@
 import { useStoryStore } from '../../store';
 import { evaluate } from '../../expression';
 import { readState } from '../../execute-mutation';
-import { deepEqual } from '../../class-registry';
+import { deepEqual } from '../../structural';
 import { defineMacro } from '../../define-macro';
 import { MacroError, logMacroError } from './MacroError';
 import { checkVariableName } from '../../utils/namespace';

package/src/components/macros/Cycle.tsx

@@ -1,10 +1,11 @@
 import { defineMacro } from '../../define-macro';
+import { VARIABLE_PARAMETER, useVariableAction } from './input-macro';
 
 defineMacro({
   name: 'cycle',
   block: true,
   storeVar: true,
-  parameters: [{ name: 'variable', type: 'variable', required: true }],
+  parameters: [VARIABLE_PARAMETER],
   render({ children = [] }, ctx) {
     const options = ctx.extractOptions(children);
 
@@ -16,14 +17,10 @@ defineMacro({
       ctx.setValue!(options[nextIndex]);
     };
 
-    ctx.useAction({
+    useVariableAction(ctx, {
       type: 'cycle',
-      key: `$${ctx.varName}`,
-      authorId: ctx.id,
       label: ctx.value == null ? options[0] || '' : String(ctx.value),
-      variable: ctx.varName,
       options,
-      value: ctx.value,
       perform: (v) => {
         if (v !== undefined) {
           ctx.setValue!(v);

package/src/components/macros/ExprDisplay.tsx

@@ -1,41 +1,24 @@
 import { evaluate } from '../../expression';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { display, wrapContent } from './display';
+import type { ExpressionNode } from '../../markup/ast';
 
-interface ExprDisplayProps {
-  expression: string;
-  className?: string;
-  id?: string;
-}
-
-export function ExprDisplay({ expression, className, id }: ExprDisplayProps) {
+/** An expression display: `{$hp + 1}`. */
+export function ExprDisplay({ node }: { node: ExpressionNode }) {
+  const { expression } = node;
   const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
+  const className = resolve(node.className);
+  const id = resolve(node.id);
   const [variables, temporary, localsValues, transient] = useMergedLocals();
 
-  let display: string;
+  let text: string;
   try {
-    const value = evaluate(
-      expression,
-      variables,
-      temporary,
-      localsValues,
-      transient,
+    text = display(
+      evaluate(expression, variables, temporary, localsValues, transient),
     );
-    display = value == null ? '' : String(value);
   } catch {
-    display = `{error: ${expression}}`;
+    text = `{error: ${expression}}`;
   }
-
-  if (className || id)
-    return (
-      <span
-        id={id}
-        class={className}
-      >
-        {display}
-      </span>
-    );
-  return <>{display}</>;
+  return wrapContent(className, id, text);
 }

package/src/components/macros/If.tsx

@@ -1,6 +1,23 @@
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
 import type { Branch } from '../../markup/ast';
+import { selectBranch } from './branches';
+import { wrapContent } from './display';
+
+/**
+ * The {if}/{elseif}/{else} branch whose condition holds, else the {else}
+ * branch, else null: the chain ends at its first bare branch. Throws what a
+ * condition throws.
+ */
+function selectIfBranch(
+  branches: Branch[],
+  evaluate: (expr: string) => unknown,
+): Branch | null {
+  const end = branches.findIndex((branch) => branch.rawArgs === '');
+  return selectBranch(end < 0 ? branches : branches.slice(0, end + 1), (expr) =>
+    Boolean(evaluate(expr)),
+  );
+}
 
 defineMacro({
   name: 'if',
@@ -8,49 +25,26 @@ defineMacro({
   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}</>;
-    }
-
-    for (const branch of branches) {
-      if (branch.rawArgs === '') {
-        return renderBranch(branch);
-      }
-
-      try {
-        if (ctx.evaluate!(branch.rawArgs)) {
-          return renderBranch(branch);
-        }
-      } catch (err) {
-        return (
-          <MacroError
-            macro="if"
-            error={err}
-          />
-        );
-      }
+    let branch: Branch | null;
+    try {
+      branch = selectIfBranch(branches, ctx.evaluate!);
+    } catch (err) {
+      return (
+        <MacroError
+          macro="if"
+          error={err}
+        />
+      );
     }
-
-    return null;
+    if (!branch) return null;
+    return wrapContent(
+      ctx.resolve!(branch.className),
+      ctx.resolve!(branch.id),
+      ctx.renderNodes(branch.children),
+    );
   },
   text({ branches = [] }, ctx) {
-    for (const branch of branches) {
-      if (branch.rawArgs === '' || ctx.evaluate(branch.rawArgs)) {
-        return ctx.renderText(branch.children);
-      }
-    }
-    return '';
+    const branch = selectIfBranch(branches, ctx.evaluate);
+    return branch ? ctx.renderText(branch.children) : '';
   },
 });

package/src/components/macros/Include.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useStoryFields } from '../../hooks/use-story-fields';
 import { tokenize } from '../../markup/tokenizer';
 import { buildAST } from '../../markup/ast';
 import { NobrContext } from '../../markup/render';
@@ -16,7 +17,7 @@ defineMacro({
     { name: 'passage', type: 'expression', required: true },
   ],
   render(_props, ctx) {
-    const storyData = useStoryStore((s) => s.storyData);
+    const { storyData } = useStoryFields('storyData');
 
     const { inline } = ctx.args;
     const passageName = evaluatePassageName(ctx.args.passage, ctx.evaluate!);

package/src/components/macros/Listbox.tsx

@@ -1,21 +1,19 @@
 import { defineMacro } from '../../define-macro';
+import { VARIABLE_PARAMETER, useVariableAction } from './input-macro';
+import { display } from './display';
 
 defineMacro({
   name: 'listbox',
   subMacros: ['option'],
   storeVar: true,
-  parameters: [{ name: 'variable', type: 'variable', required: true }],
+  parameters: [VARIABLE_PARAMETER],
   render({ children = [] }, ctx) {
     const options = ctx.extractOptions(children);
 
-    ctx.useAction({
+    useVariableAction(ctx, {
       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));
       },
@@ -25,7 +23,7 @@ defineMacro({
       <select
         id={ctx.id}
         class={ctx.cls}
-        value={ctx.value == null ? '' : String(ctx.value)}
+        value={display(ctx.value)}
         onChange={(e) => ctx.setValue!((e.target as HTMLSelectElement).value)}
       >
         {options.map((opt) => (