@rohal12/spindle 0.29.2 → 0.31.0

package/package.json

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

package/src/action-registry.ts

@@ -53,6 +53,15 @@ export function registerAction(action: StoryAction): () => void {
   };
 }
 
+export function updateAction(action: StoryAction): () => void {
+  actions.set(action.id, action);
+  notify();
+  return () => {
+    actions.delete(action.id);
+    notify();
+  };
+}
+
 export function getActions(): StoryAction[] {
   return Array.from(actions.values());
 }

package/src/class-registry.ts

@@ -49,6 +49,24 @@ export function deepClone<T>(value: T): T {
       return arr;
     }
 
+    if (val instanceof Map) {
+      const copy = new Map();
+      seen.set(obj, copy);
+      for (const [k, v] of val) {
+        copy.set(clone(k), clone(v));
+      }
+      return copy;
+    }
+
+    if (val instanceof Set) {
+      const copy = new Set();
+      seen.set(obj, copy);
+      for (const v of val) {
+        copy.add(clone(v));
+      }
+      return copy;
+    }
+
     // Registered class instance
     const ctor = obj.constructor as Constructor;
     const name = ctorToName.get(ctor);
@@ -119,6 +137,18 @@ export function serialize<T>(value: T): T {
       return result;
     }
 
+    if (val instanceof Map) {
+      const entries = [...val].map(([k, v]) => [ser(k), ser(v)]);
+      seen.delete(obj);
+      return { [CLASS_TAG]: '__Map__', [DATA_TAG]: { entries } };
+    }
+
+    if (val instanceof Set) {
+      const entries = [...val].map((v) => ser(v));
+      seen.delete(obj);
+      return { [CLASS_TAG]: '__Set__', [DATA_TAG]: { entries } };
+    }
+
     // Registered class instance
     const ctor = obj.constructor as Constructor;
     const name = ctorToName.get(ctor);
@@ -167,6 +197,14 @@ export function deserialize<T>(value: T): T {
       if (name === '__RegExp__') {
         return new RegExp(data.source as string, data.flags as string);
       }
+      if (name === '__Map__') {
+        const entries = data.entries as [unknown, unknown][];
+        return new Map(entries.map(([k, v]) => [deser(k), deser(v)]));
+      }
+      if (name === '__Set__') {
+        const entries = data.entries as unknown[];
+        return new Set(entries.map((v) => deser(v)));
+      }
 
       const ctor = registry.get(name);
       if (!ctor) {

package/src/components/PassageDialog.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'preact';
-import { useMemo } from 'preact/hooks';
+import { useCallback, useMemo, useRef } from 'preact/hooks';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
 import { renderNodes } from '../markup/render';
@@ -22,6 +22,11 @@ export function PassageDialog({
   onClose,
   showCloseButton = true,
 }: PassageDialogProps) {
+  // Stabilize onClose so DialogCloseContext value doesn't change identity
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const stableOnClose = useCallback(() => onCloseRef.current(), []);
+
   const storyData = useStoryStore((s) => s.storyData);
 
   const passage = passageName
@@ -48,14 +53,14 @@ export function PassageDialog({
 
   const handleBackdrop = (e: MouseEvent) => {
     if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
-      onClose();
+      stableOnClose();
     }
   };
 
   const cls = panelClass ? `dialog-panel ${panelClass}` : 'dialog-panel';
 
   return (
-    <DialogCloseContext.Provider value={onClose}>
+    <DialogCloseContext.Provider value={stableOnClose}>
       <div
         class="dialog-overlay"
         onClick={handleBackdrop}
@@ -64,7 +69,7 @@ export function PassageDialog({
           {showCloseButton && (
             <button
               class="dialog-close"
-              onClick={onClose}
+              onClick={stableOnClose}
             >
               ✕
             </button>

package/src/components/TriggerDialogHost.tsx

@@ -9,47 +9,58 @@ import {
 import type { QueuedDialog } from '../triggers';
 
 export function TriggerDialogHost() {
-  const [current, setCurrent] = useState<QueuedDialog | null>(null);
-  const currentRef = useRef(current);
-  currentRef.current = current;
+  const [stack, setStack] = useState<QueuedDialog[]>([]);
+  const stackRef = useRef(stack);
+  stackRef.current = stack;
 
-  const advance = useCallback(() => {
-    const next = shiftDialogQueue();
-    setCurrent(next ?? null);
+  const push = useCallback((item: QueuedDialog) => {
+    setStack((prev) => [...prev, item]);
   }, []);
 
   const handleClose = useCallback(() => {
-    setCurrent(null);
-    // Show next queued dialog after a tick
-    if (dialogQueueLength() > 0) {
-      requestAnimationFrame(advance);
-    }
-  }, [advance]);
+    setStack((prev) => prev.slice(0, -1));
+  }, []);
+
+  const handleCloseAll = useCallback(() => {
+    setStack([]);
+  }, []);
 
   useEffect(() => {
     return registerDialogHost({
       close: handleClose,
-      isOpen: () => currentRef.current !== null,
+      closeAll: handleCloseAll,
+      push,
+      isOpen: () => stackRef.current.length > 0,
     });
-  }, [handleClose]);
+  }, [handleClose, handleCloseAll, push]);
 
+  // Flush any dialogs that were queued before the host mounted
   useEffect(() => {
     return subscribeTriggerDialogs(() => {
-      setCurrent((prev) => {
-        if (prev !== null) return prev; // already showing one
-        return shiftDialogQueue() ?? null;
-      });
+      const items: QueuedDialog[] = [];
+      while (dialogQueueLength() > 0) {
+        const next = shiftDialogQueue();
+        if (next) items.push(next);
+      }
+      if (items.length > 0) {
+        setStack((prev) => [...prev, ...items]);
+      }
     });
   }, []);
 
-  if (!current) return null;
+  if (stack.length === 0) return null;
 
   return (
-    <PassageDialog
-      passageName={current.passageName}
-      panelClass={current.panelClass}
-      onClose={handleClose}
-      showCloseButton={current.showCloseButton}
-    />
+    <>
+      {stack.map((dialog, i) => (
+        <PassageDialog
+          key={`${dialog.passageName}-${i}`}
+          passageName={dialog.passageName}
+          panelClass={dialog.panelClass}
+          onClose={handleClose}
+          showCloseButton={dialog.showCloseButton}
+        />
+      ))}
+    </>
   );
 }

package/src/components/macros/Unset.tsx

@@ -15,9 +15,11 @@ defineMacro({
         state.deleteVariable(name.slice(1));
       } else if (name.startsWith('_')) {
         state.deleteTemporary(name.slice(1));
+      } else if (name.startsWith('@')) {
+        ctx.update(name.slice(1), undefined);
       } else {
         console.error(
-          `spindle: {unset} expects a variable ($name or _name), got "${name}"`,
+          `spindle: {unset} expects a variable ($name, _name, or @name), got "${name}"`,
         );
       }
     }

package/src/define-macro.ts

@@ -130,7 +130,11 @@ export function defineMacro(config: MacroDefinition): void {
       mutate: (code: string) => executeMutation(code, getValues(), update),
       update,
       getValues,
-      wrap: undefined as any,
+      wrap: (content: ComponentChildren): VNode<any> => {
+        if (className || id)
+          return h('span', { id, class: className }, content);
+        return h(Fragment, null, content);
+      },
     };
 
     if (config.merged) {
@@ -149,12 +153,6 @@ export function defineMacro(config: MacroDefinition): void {
       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);
   }
 

package/src/expression.ts

@@ -323,6 +323,14 @@ export function execute(
 /**
  * Convenience: evaluate using store state directly.
  */
+/** Clear the compiled expression cache. Useful for testing and HMR. */
+export function clearExpressionCache(): void {
+  fnCache.clear();
+  cachedFns = null;
+  cachedVisitCounts = null;
+  cachedRenderCounts = null;
+}
+
 export function evaluateWithState(expr: string, state: StoryState): unknown {
   return evaluate(expr, state.variables, state.temporary, {});
 }

package/src/hooks/use-action.ts

@@ -21,6 +21,8 @@ export interface UseActionOptions {
 
 export function useAction(opts: UseActionOptions): string {
   const idRef = useRef<string>('');
+  const performRef = useRef(opts.perform);
+  performRef.current = opts.perform;
 
   // Generate ID only once on first call
   if (!idRef.current) {
@@ -34,7 +36,7 @@ export function useAction(opts: UseActionOptions): string {
       id,
       type: opts.type,
       label: opts.label,
-      perform: opts.perform,
+      perform: (...args) => performRef.current(...args),
     };
     if (opts.target !== undefined) action.target = opts.target;
     if (opts.variable !== undefined) action.variable = opts.variable;
@@ -43,7 +45,16 @@ export function useAction(opts: UseActionOptions): string {
     if (opts.disabled !== undefined) action.disabled = opts.disabled;
 
     return registerAction(action);
-  });
+  }, [
+    id,
+    opts.type,
+    opts.label,
+    opts.target,
+    opts.variable,
+    opts.disabled,
+    opts.value,
+    JSON.stringify(opts.options),
+  ]);
 
   return id;
 }

package/src/story-api.ts

@@ -25,8 +25,8 @@ import {
   addTrigger,
   removeTrigger,
   pushDialog,
-  clearDialogQueue,
   closeCurrentDialog,
+  closeAllOpenDialogs,
   isDialogShowing,
 } from './triggers';
 import type { WatchOptions } from './triggers';
@@ -316,8 +316,7 @@ function createStoryAPI(): StoryAPI {
     },
 
     closeAllDialogs(): void {
-      clearDialogQueue();
-      closeCurrentDialog();
+      closeAllOpenDialogs();
     },
 
     isDialogOpen(): boolean {
@@ -383,6 +382,12 @@ function createStoryAPI(): StoryAPI {
   };
 }
 
+declare global {
+  interface Window {
+    Story: StoryAPI;
+  }
+}
+
 export function installStoryAPI(): void {
-  (window as any).Story = createStoryAPI();
+  window.Story = createStoryAPI();
 }

package/src/triggers.ts

@@ -36,6 +36,8 @@ let dialogNotify: DialogCallback | null = null;
 
 interface DialogHostCallbacks {
   close: () => void;
+  closeAll: () => void;
+  push: (item: QueuedDialog) => void;
   isOpen: () => boolean;
 }
 let dialogHostCallbacks: DialogHostCallbacks | null = null;
@@ -153,7 +155,7 @@ export function resetTriggers(): void {
   triggers = [];
   dialogQueue = [];
   nextId = 0;
-  dialogHostCallbacks?.close();
+  dialogHostCallbacks?.closeAll();
 }
 
 export function subscribeTriggerDialogs(cb: () => void): () => void {
@@ -174,8 +176,12 @@ export function dialogQueueLength(): number {
 }
 
 export function pushDialog(item: QueuedDialog): void {
-  dialogQueue.push(item);
-  dialogNotify?.();
+  if (dialogHostCallbacks) {
+    dialogHostCallbacks.push(item);
+  } else {
+    dialogQueue.push(item);
+    dialogNotify?.();
+  }
 }
 
 export function clearDialogQueue(): void {
@@ -193,6 +199,11 @@ export function closeCurrentDialog(): void {
   dialogHostCallbacks?.close();
 }
 
+export function closeAllOpenDialogs(): void {
+  clearDialogQueue();
+  dialogHostCallbacks?.closeAll();
+}
+
 export function isDialogShowing(): boolean {
   return dialogHostCallbacks?.isOpen() ?? false;
 }