@rohal12/spindle 0.29.0 → 0.29.1

package/package.json

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

package/src/class-registry.ts

@@ -99,12 +99,18 @@ export function serialize<T>(value: T): T {
 
     if (val instanceof Date) {
       seen.delete(obj);
-      return val.toISOString();
+      return {
+        [CLASS_TAG]: '__Date__',
+        [DATA_TAG]: { iso: val.toISOString() },
+      };
     }
 
     if (val instanceof RegExp) {
       seen.delete(obj);
-      return val.toString();
+      return {
+        [CLASS_TAG]: '__RegExp__',
+        [DATA_TAG]: { source: val.source, flags: val.flags },
+      };
     }
 
     if (Array.isArray(val)) {
@@ -153,6 +159,15 @@ export function deserialize<T>(value: T): T {
     if (CLASS_TAG in obj && DATA_TAG in obj) {
       const name = obj[CLASS_TAG] as string;
       const data = obj[DATA_TAG] as Record<string, unknown>;
+
+      // Built-in types
+      if (name === '__Date__') {
+        return new Date(data.iso as string);
+      }
+      if (name === '__RegExp__') {
+        return new RegExp(data.source as string, data.flags as string);
+      }
+
       const ctor = registry.get(name);
       if (!ctor) {
         console.warn(

package/src/components/Passage.tsx

@@ -37,7 +37,8 @@ export function Passage({ passage, dataTransition }: PassageProps) {
       return (
         <div class="error">
           Error parsing passage &ldquo;{passage.name}&rdquo;
-          {sourceLocationOf(passage)}: {(err as Error).message}
+          {sourceLocationOf(passage)}:{' '}
+          {err instanceof Error ? err.message : String(err)}
         </div>
       );
     }

package/src/components/PassageDialog.tsx

@@ -38,7 +38,11 @@ export function PassageDialog({
       const ast = buildAST(tokens);
       return renderNodes(ast);
     } catch (err) {
-      return <div class="error">Error in dialog: {(err as Error).message}</div>;
+      return (
+        <div class="error">
+          Error in dialog: {err instanceof Error ? err.message : String(err)}
+        </div>
+      );
     }
   }, [markup]);
 

package/src/components/macros/Button.tsx

@@ -1,9 +1,11 @@
 import { h, render } from 'preact';
+import { useContext } from 'preact/hooks';
 import { defineMacro } from '../../define-macro';
 import {
   renderNodes,
   LocalsUpdateContext,
   LocalsValuesContext,
+  NobrContext,
 } from '../../markup/render';
 
 defineMacro({
@@ -11,6 +13,7 @@ defineMacro({
   interpolate: true,
   render({ rawArgs, children = [] }, ctx) {
     const label = ctx.resolve?.(rawArgs.replace(/^["']|["']$/g, '')) ?? rawArgs;
+    const nobr = useContext(NobrContext);
 
     const handleClick = () => {
       // Render children into a detached DOM node — all macro side effects
@@ -18,12 +21,16 @@ defineMacro({
       // Wrap with locals context so @local variables from for-loops are available.
       const container = document.createElement('div');
       const vnode = h(
-        LocalsUpdateContext.Provider,
-        { value: { update: ctx.update, getValues: ctx.getValues } },
+        NobrContext.Provider,
+        { value: nobr },
         h(
-          LocalsValuesContext.Provider,
-          { value: ctx.getValues() },
-          renderNodes(children),
+          LocalsUpdateContext.Provider,
+          { value: { update: ctx.update, getValues: ctx.getValues } },
+          h(
+            LocalsValuesContext.Provider,
+            { value: ctx.getValues() },
+            renderNodes(children),
+          ),
         ),
       );
       render(vnode, container);

package/src/components/macros/Computed.tsx

@@ -63,7 +63,6 @@ function computeAndApply(
   locals: Record<string, unknown>,
   rawArgs: string,
 ): void {
-  const state = useStoryStore.getState();
   let newValue: unknown;
   try {
     newValue = evaluate(expr, variables, temporary, locals);
@@ -75,8 +74,9 @@ function computeAndApply(
     return;
   }
 
-  const current = isTemp ? state.temporary[name] : state.variables[name];
+  const current = isTemp ? temporary[name] : variables[name];
   if (!valuesEqual(current, newValue)) {
+    const state = useStoryStore.getState();
     if (isTemp) state.setTemporary(name, newValue);
     else state.setVariable(name, newValue);
   }
@@ -106,13 +106,12 @@ defineMacro({
     const ran = ctx.hooks.useRef(false);
     if (!ran.current) {
       ran.current = true;
-      const state = useStoryStore.getState();
       computeAndApply(
         expr,
         name,
         isTemp,
-        state.variables,
-        state.temporary,
+        mergedVars,
+        mergedTemps,
         mergedLocals,
         rawArgs,
       );

package/src/components/macros/For.tsx

@@ -62,18 +62,19 @@ function ForIteration({
   initialValues: Record<string, unknown>;
   children: ASTNode[];
 }) {
-  const [localState, setLocalState] = useState<Record<string, unknown>>(() => ({
-    ...parentValues,
-    ...ownKeys,
-    ...initialValues,
-  }));
+  const [localMutations, setLocalMutations] = useState<Record<string, unknown>>(
+    () => ({ ...initialValues }),
+  );
+
+  // Recomputed every render — picks up new parentValues/ownKeys from parent
+  const localState = { ...parentValues, ...ownKeys, ...localMutations };
 
   const valuesRef = useRef(localState);
   valuesRef.current = localState;
 
   const getValues = useCallback(() => valuesRef.current, []);
   const update = useCallback((key: string, value: unknown) => {
-    setLocalState((prev) => ({ ...prev, [key]: value }));
+    setLocalMutations((prev) => ({ ...prev, [key]: value }));
   }, []);
   const updater = useMemo(() => ({ update, getValues }), [update, getValues]);
 

package/src/components/macros/MacroLink.tsx

@@ -1,9 +1,11 @@
 import { h, render } from 'preact';
+import { useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import {
   renderNodes,
   LocalsUpdateContext,
   LocalsValuesContext,
+  NobrContext,
 } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 
@@ -32,15 +34,20 @@ function renderChildrenDetached(
   children: import('../../markup/ast').ASTNode[],
   getValues: () => Record<string, unknown>,
   update: (key: string, value: unknown) => void,
+  nobr: boolean,
 ) {
   const container = document.createElement('div');
   const vnode = h(
-    LocalsUpdateContext.Provider,
-    { value: { update, getValues } },
+    NobrContext.Provider,
+    { value: nobr },
     h(
-      LocalsValuesContext.Provider,
-      { value: getValues() },
-      renderNodes(children),
+      LocalsUpdateContext.Provider,
+      { value: { update, getValues } },
+      h(
+        LocalsValuesContext.Provider,
+        { value: getValues() },
+        renderNodes(children),
+      ),
     ),
   );
   render(vnode, container);
@@ -52,10 +59,11 @@ defineMacro({
   interpolate: true,
   render({ rawArgs, children = [] }, ctx) {
     const { display, passage } = parseArgs(rawArgs);
+    const nobr = useContext(NobrContext);
 
     const handleClick = (e: Event) => {
       e.preventDefault();
-      renderChildrenDetached(children, ctx.getValues, ctx.update);
+      renderChildrenDetached(children, ctx.getValues, ctx.update, nobr);
       if (passage) {
         useStoryStore.getState().navigate(passage);
       }
@@ -68,7 +76,7 @@ defineMacro({
       label: display,
       target: passage ?? undefined,
       perform: () => {
-        renderChildrenDetached(children, ctx.getValues, ctx.update);
+        renderChildrenDetached(children, ctx.getValues, ctx.update, nobr);
         if (passage) {
           useStoryStore.getState().navigate(passage);
         }

package/src/components/macros/SaveManager.tsx

@@ -88,6 +88,10 @@ export function SaveManagerContent() {
     statusTimer.current = window.setTimeout(() => setStatus(null), 3000);
   };
 
+  useEffect(() => {
+    return () => clearTimeout(statusTimer.current);
+  }, []);
+
   const toggleCollapse = (id: string) => {
     setCollapsed((prev) => {
       const next = new Set(prev);

package/src/components/macros/Type.tsx

@@ -10,6 +10,8 @@ defineMacro({
     const containerRef = useRef<HTMLSpanElement>(null);
     const [totalChars, setTotalChars] = useState(0);
     const [visibleChars, setVisibleChars] = useState(0);
+    const visibleCharsRef = useRef(0);
+    visibleCharsRef.current = visibleChars;
 
     useEffect(() => {
       if (containerRef.current) {
@@ -21,7 +23,7 @@ defineMacro({
     // Typewriter interval
     useEffect(() => {
       if (totalChars === 0) return;
-      if (visibleChars >= totalChars) return;
+      if (visibleCharsRef.current >= totalChars) return;
 
       const timer = setInterval(() => {
         setVisibleChars((c) => {

package/src/components/macros/Widget.tsx

@@ -13,9 +13,12 @@ defineMacro({
   render({ rawArgs, children = [] }, ctx) {
     const { name, params } = parseWidgetDef(rawArgs);
 
+    const childrenKey = JSON.stringify(children);
+    const paramsKey = params.join(',');
+
     ctx.hooks.useLayoutEffect(() => {
       registerWidget(name, children, params);
-    }, []);
+    }, [name, childrenKey, paramsKey]);
 
     return null;
   },

package/src/expression.ts

@@ -118,6 +118,57 @@ function transform(expr: string): string {
             } else if (ic === '\\' && i + 1 < expr.length) {
               inner += ic + expr.charAt(i + 1);
               i++;
+            } else if (ic === '"' || ic === "'") {
+              // Skip quoted strings — braces inside are not depth-relevant
+              inner += ic;
+              i++;
+              while (i < expr.length) {
+                const sc = expr.charAt(i);
+                if (sc === '\\' && i + 1 < expr.length) {
+                  inner += sc + expr.charAt(i + 1);
+                  i += 2;
+                } else if (sc === ic) {
+                  inner += sc;
+                  i++;
+                  break;
+                } else {
+                  inner += sc;
+                  i++;
+                }
+              }
+              continue; // skip the i++ at the end
+            } else if (ic === '`') {
+              // Nested template literal — consume entirely
+              inner += ic;
+              i++;
+              while (i < expr.length) {
+                const tc = expr.charAt(i);
+                if (tc === '\\' && i + 1 < expr.length) {
+                  inner += tc + expr.charAt(i + 1);
+                  i += 2;
+                } else if (tc === '$' && expr.charAt(i + 1) === '{') {
+                  // Nested interpolation — track brace depth
+                  inner += '${';
+                  i += 2;
+                  let nestedDepth = 1;
+                  while (i < expr.length && nestedDepth > 0) {
+                    const nc = expr.charAt(i);
+                    if (nc === '{') nestedDepth++;
+                    else if (nc === '}') nestedDepth--;
+                    if (nestedDepth > 0) inner += nc;
+                    i++;
+                  }
+                  inner += '}';
+                } else if (tc === '`') {
+                  inner += tc;
+                  i++;
+                  break;
+                } else {
+                  inner += tc;
+                  i++;
+                }
+              }
+              continue; // skip the i++ at the end
             } else {
               inner += ic;
             }

package/src/markup/markdown.ts

@@ -12,7 +12,11 @@ import {
 export function markdownToHtml(text: string): string {
   return micromark(text, {
     allowDangerousHtml: true,
-    extensions: [gfmTable(), gfmStrikethrough()],
+    extensions: [
+      gfmTable(),
+      gfmStrikethrough(),
+      { disable: { null: ['codeIndented'] } },
+    ],
     htmlExtensions: [gfmTableHtml(), gfmStrikethroughHtml()],
   });
 }

package/src/markup/render.tsx

@@ -259,7 +259,7 @@ export function renderNodes(
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i]!;
     if (node.type === 'text') {
-      combined += node.value.replace(/^[ \t]{4,}/gm, ' ');
+      combined += node.value;
     } else if (node.type === 'variable' && hasUnclosedBacktick(combined)) {
       // Inline variable value to avoid placeholder inside code span
       combined += getVariableTextValue(node, locals);

package/src/saves/types.ts

@@ -69,7 +69,8 @@ export function isSaveExport(value: unknown): value is SaveExport {
 
   const payload = save.payload as Record<string, unknown>;
   if (typeof payload.passage !== 'string') return false;
-  if (!Array.isArray(payload.history)) return false;
+  if (!Array.isArray(payload.history) || payload.history.length === 0)
+    return false;
   if (typeof payload.historyIndex !== 'number') return false;
   if (typeof payload.variables !== 'object' || payload.variables === null)
     return false;
@@ -82,7 +83,7 @@ export function isSavePayload(value: unknown): value is SavePayload {
   const obj = value as Record<string, unknown>;
   if (typeof obj.passage !== 'string') return false;
   if (typeof obj.variables !== 'object' || obj.variables === null) return false;
-  if (!Array.isArray(obj.history)) return false;
+  if (!Array.isArray(obj.history) || obj.history.length === 0) return false;
   if (typeof obj.historyIndex !== 'number') return false;
   return true;
 }

package/src/store.ts

@@ -576,6 +576,10 @@ export const useStoryStore = create<StoryState>()(
     },
 
     loadFromPayload: (payload: SavePayload) => {
+      if (payload.history.length === 0) {
+        console.warn('loadFromPayload: rejecting payload with empty history');
+        return;
+      }
       // Convert full snapshots to patch entries
       const base = deserialize(payload.history[0]?.variables ?? {}) as Record<
         string,

package/src/story-init.ts

@@ -19,12 +19,16 @@ export function executeStoryInit() {
     const tokens = tokenize(storyInit.content);
     const ast = buildAST(tokens);
 
+    // Mount into a persistent hidden container. We intentionally do NOT
+    // unmount — this lets async effects (useEffect, setTimeout, etc.)
+    // inside StoryInit macros fire through the normal Preact pipeline.
     const container = document.createElement('div');
+    container.style.display = 'none';
+    document.body.appendChild(container);
     render(
       h(() => renderNodes(ast) as any, null),
       container,
     );
-    render(null, container);
   }
 
   // Register SaveTitle passage if it exists