@rohal12/spindle 0.29.1 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.29.1",
+  "version": "0.30.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/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/index.tsx

@@ -108,7 +108,27 @@ function boot() {
     useStoryStore.getState().loadFromPayload(sessionPayload);
   }
 
-  // Register widgets from passages tagged "widget"
+  // Pass 1: Pre-scan all widget passages to discover block widgets.
+  // Register them as block macros BEFORE any tokenize/buildAST calls,
+  // so that widget bodies using other block widgets parse correctly
+  // regardless of passage order.
+  const blockWidgetPattern =
+    /\{widget\s+["']?(\w+)["']?[^}]*\}([\s\S]*?)\{\/widget\}/g;
+  for (const [, passage] of storyData.passages) {
+    if (passage.tags.includes('widget')) {
+      let match;
+      while ((match = blockWidgetPattern.exec(passage.content)) !== null) {
+        const name = match[1]!;
+        const body = match[2]!;
+        if (/\{@children\}/.test(body)) {
+          registerBlockMacro(name);
+        }
+      }
+      blockWidgetPattern.lastIndex = 0;
+    }
+  }
+
+  // Pass 2: Full parse and register widgets from passages tagged "widget"
   for (const [, passage] of storyData.passages) {
     if (passage.tags.includes('widget')) {
       const widgetTokens = tokenize(passage.content);

package/src/story-api.ts

@@ -383,6 +383,12 @@ function createStoryAPI(): StoryAPI {
   };
 }
 
+declare global {
+  interface Window {
+    Story: StoryAPI;
+  }
+}
+
 export function installStoryAPI(): void {
-  (window as any).Story = createStoryAPI();
+  window.Story = createStoryAPI();
 }