@rohal12/spindle 0.3.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",
@@ -46,7 +46,8 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "prepublishOnly": "bun run test && bun run build"
+    "prepublishOnly": "bun run test && bun run build",
+    "prepare": "husky"
   },
   "dependencies": {
     "immer": "^11.1.4",
@@ -56,13 +57,18 @@
     "preact": "^10.28.4",
     "zustand": "^5.0.11"
   },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
+  },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.3",
     "@rohal12/twee-ts": "^1.1.2",
     "@types/js-yaml": "^4.0.9",
     "@vitest/coverage-v8": "^4.0.18",
     "happy-dom": "^20.8.3",
+    "husky": "^9.1.7",
     "js-yaml": "^4.1.1",
+    "lint-staged": "^16.3.2",
     "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "typescript": "^5.9.3",

package/src/automation/runner.ts

@@ -27,7 +27,7 @@ export async function runAutomation(
   }
 
   for (let i = 0; i < script.steps.length; i++) {
-    const step = script.steps[i];
+    const step = script.steps[i]!;
     options.onStep?.(i, step);
 
     try {

package/src/components/SaveLoadDialog.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
 import { useStoryStore } from '../store';
-import type { SaveRecord } from '../saves/types';
+import { isSaveExport, type SaveRecord } from '../saves/types';
 import {
   getSavesGrouped,
   createSave,
@@ -45,7 +45,7 @@ export function SaveLoadDialog({ onClose }: SaveLoadDialogProps) {
     text: string;
     type: 'success' | 'error';
   } | null>(null);
-  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState('');
   const renameInputRef = useRef<HTMLInputElement>(null);
@@ -75,9 +75,11 @@ export function SaveLoadDialog({ onClose }: SaveLoadDialogProps) {
     }
   }, [renamingId]);
 
+  const statusTimer = useRef<number>();
   const showStatus = (text: string, type: 'success' | 'error' = 'success') => {
+    clearTimeout(statusTimer.current);
     setStatus({ text, type });
-    setTimeout(() => setStatus(null), 3000);
+    statusTimer.current = window.setTimeout(() => setStatus(null), 3000);
   };
 
   const toggleCollapse = (id: string) => {
@@ -187,6 +189,9 @@ export function SaveLoadDialog({ onClose }: SaveLoadDialogProps) {
     try {
       const text = await file.text();
       const data = JSON.parse(text);
+      if (!isSaveExport(data)) {
+        throw new Error('Invalid save file format');
+      }
       await importSave(data, ifid);
       showStatus('Save imported');
       await refresh();

package/src/components/macros/Checkbox.tsx

@@ -12,8 +12,8 @@ function parseArgs(rawArgs: string): { varName: string; label: string } {
   if (!match) {
     return { varName: rawArgs.trim(), label: '' };
   }
-  const varName = match[1].replace(/["']/g, '');
-  const label = match[2];
+  const varName = match[1]!.replace(/["']/g, '');
+  const label = match[2]!;
   return { varName, label };
 }
 

package/src/components/macros/Computed.tsx

@@ -1,8 +1,7 @@
 import { useLayoutEffect } from 'preact/hooks';
-import { useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import { evaluate } from '../../expression';
-import { LocalsContext } from '../../markup/render';
+import { useMergedLocals } from '../../hooks/use-merged-locals';
 
 interface ComputedProps {
   rawArgs: string;
@@ -50,18 +49,32 @@ function valuesEqual(a: unknown, b: unknown): boolean {
     typeof b === 'object' &&
     b !== null
   ) {
-    return JSON.stringify(a) === JSON.stringify(b);
+    try {
+      return JSON.stringify(a) === JSON.stringify(b);
+    } catch {
+      return false;
+    }
   }
   return false;
 }
 
 export function Computed({ rawArgs }: ComputedProps) {
-  // Subscribe to trigger re-renders when store changes
-  useStoryStore((s) => s.variables);
-  useStoryStore((s) => s.temporary);
-  const locals = useContext(LocalsContext);
-
-  const { target, expr } = parseComputedArgs(rawArgs);
+  const [mergedVars, mergedTemps] = useMergedLocals();
+
+  let target: string;
+  let expr: string;
+  try {
+    ({ target, expr } = parseComputedArgs(rawArgs));
+  } catch (err) {
+    return (
+      <span
+        class="error"
+        title={String(err)}
+      >
+        {`{computed error: ${err instanceof Error ? err.message : String(err)}}`}
+      </span>
+    );
+  }
   const isTemp = target.startsWith('_');
   const name = target.slice(1);
 
@@ -69,14 +82,6 @@ export function Computed({ rawArgs }: ComputedProps) {
   useLayoutEffect(() => {
     const state = useStoryStore.getState();
 
-    // Merge locals from for-loops
-    const mergedVars = { ...state.variables };
-    const mergedTemps = { ...state.temporary };
-    for (const [key, val] of Object.entries(locals)) {
-      if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
-      else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
-    }
-
     let newValue: unknown;
     try {
       newValue = evaluate(expr, mergedVars, mergedTemps);

package/src/components/macros/For.tsx

@@ -1,8 +1,7 @@
-import { useStoryStore } from '../../store';
 import { useContext } from 'preact/hooks';
 import { evaluate } from '../../expression';
-import { LocalsContext } from '../../markup/render';
-import { renderNodes } from '../../markup/render';
+import { LocalsContext, renderNodes } from '../../markup/render';
+import { useMergedLocals } from '../../hooks/use-merged-locals';
 import type { ASTNode } from '../../markup/ast';
 
 interface ForProps {
@@ -29,24 +28,15 @@ function parseForArgs(rawArgs: string): {
   const listExpr = rawArgs.slice(ofIdx + 4).trim();
 
   const vars = varsPart.split(',').map((v) => v.trim());
-  const itemVar = vars[0];
-  const indexVar = vars.length > 1 ? vars[1] : null;
+  const itemVar = vars[0]!;
+  const indexVar = vars.length > 1 ? vars[1]! : null;
 
   return { itemVar, indexVar, listExpr };
 }
 
 export function For({ rawArgs, children, className, id }: ForProps) {
-  const variables = useStoryStore((s) => s.variables);
-  const temporary = useStoryStore((s) => s.temporary);
   const parentLocals = useContext(LocalsContext);
-
-  // Merge parent locals for expression evaluation
-  const mergedVars = { ...variables };
-  const mergedTemps = { ...temporary };
-  for (const [key, val] of Object.entries(parentLocals)) {
-    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
-    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
-  }
+  const [mergedVars, mergedTemps] = useMergedLocals();
 
   let parsed: ReturnType<typeof parseForArgs>;
   try {
@@ -57,7 +47,7 @@ export function For({ rawArgs, children, className, id }: ForProps) {
         class="error"
         title={String(err)}
       >
-        {`{for error: ${(err as Error).message}}`}
+        {`{for error: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }
@@ -81,14 +71,17 @@ export function For({ rawArgs, children, className, id }: ForProps) {
         class="error"
         title={String(err)}
       >
-        {`{for error: ${(err as Error).message}}`}
+        {`{for error: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }
 
   const content = list.map((item, i) => {
-    const locals = { ...parentLocals, [itemVar]: item };
-    if (indexVar) locals[indexVar] = i;
+    const locals = {
+      ...parentLocals,
+      [itemVar]: item,
+      ...(indexVar ? { [indexVar]: i } : undefined),
+    };
 
     return (
       <LocalsContext.Provider

package/src/components/macros/If.tsx

@@ -1,8 +1,6 @@
-import { useStoryStore } from '../../store';
-import { useContext } from 'preact/hooks';
 import { evaluate } from '../../expression';
-import { LocalsContext } from '../../markup/render';
 import { renderNodes } from '../../markup/render';
+import { useMergedLocals } from '../../hooks/use-merged-locals';
 import type { Branch } from '../../markup/ast';
 
 interface IfProps {
@@ -10,17 +8,7 @@ interface IfProps {
 }
 
 export function If({ branches }: IfProps) {
-  const variables = useStoryStore((s) => s.variables);
-  const temporary = useStoryStore((s) => s.temporary);
-  const locals = useContext(LocalsContext);
-
-  // Merge locals for expression evaluation
-  const mergedVars = { ...variables };
-  const mergedTemps = { ...temporary };
-  for (const [key, val] of Object.entries(locals)) {
-    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
-    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
-  }
+  const [mergedVars, mergedTemps] = useMergedLocals();
 
   function renderBranch(branch: Branch) {
     const children = renderNodes(branch.children);
@@ -53,7 +41,7 @@ export function If({ branches }: IfProps) {
           class="error"
           title={String(err)}
         >
-          {`{if error: ${(err as Error).message}}`}
+          {`{if error: ${err instanceof Error ? err.message : String(err)}}`}
         </span>
       );
     }

package/src/components/macros/MacroLink.tsx

@@ -19,13 +19,13 @@ function parseArgs(rawArgs: string): {
   const re = /["']([^"']+)["']/g;
   let m;
   while ((m = re.exec(rawArgs)) !== null) {
-    parts.push(m[1]);
+    parts.push(m[1]!);
   }
   if (parts.length >= 2) {
-    return { display: parts[0], passage: parts[1] };
+    return { display: parts[0]!, passage: parts[1]! };
   }
   if (parts.length === 1) {
-    return { display: parts[0], passage: null };
+    return { display: parts[0]!, passage: null };
   }
   // Fallback: treat entire rawArgs as display text
   return { display: rawArgs.trim(), passage: null };

package/src/components/macros/Meter.tsx

@@ -1,7 +1,5 @@
-import { useStoryStore } from '../../store';
-import { useContext } from 'preact/hooks';
 import { evaluate } from '../../expression';
-import { LocalsContext } from '../../markup/render';
+import { useMergedLocals } from '../../hooks/use-merged-locals';
 
 interface MeterProps {
   rawArgs: string;
@@ -25,8 +23,8 @@ function parseArgs(rawArgs: string): {
   let rest = trimmed;
   const quoteMatch = rest.match(/\s+(?:"([^"]*)"|'([^']*)')$/);
   if (quoteMatch) {
-    labelMode = quoteMatch[1] ?? quoteMatch[2];
-    rest = rest.slice(0, quoteMatch.index!).trim();
+    labelMode = quoteMatch[1] ?? quoteMatch[2] ?? '';
+    rest = rest.slice(0, quoteMatch.index ?? rest.length).trim();
   }
 
   // Split remaining into two expressions.
@@ -40,7 +38,7 @@ function parseArgs(rawArgs: string): {
   }
 
   return {
-    currentExpr: exprs[0],
+    currentExpr: exprs[0]!,
     maxExpr: exprs.slice(1).join(' '),
     labelMode,
   };
@@ -52,7 +50,7 @@ function splitExpressions(input: string): string[] {
   let depth = 0;
 
   for (let i = 0; i < input.length; i++) {
-    const ch = input[i];
+    const ch = input[i]!;
     if (ch === '(' || ch === '[') {
       depth++;
       current += ch;
@@ -63,7 +61,7 @@ function splitExpressions(input: string): string[] {
       result.push(current);
       current = '';
       // Skip additional whitespace
-      while (i + 1 < input.length && /\s/.test(input[i + 1])) i++;
+      while (i + 1 < input.length && /\s/.test(input[i + 1]!)) i++;
     } else {
       current += ch;
     }
@@ -78,29 +76,21 @@ function formatLabel(
   labelMode: string,
 ): string | null {
   if (labelMode === 'none') return null;
-  if (labelMode === '%') return `${Math.round((current / max) * 100)}%`;
+  if (labelMode === '%')
+    return `${max === 0 ? 0 : Math.round((current / max) * 100)}%`;
   if (labelMode) return `${current} ${labelMode} / ${max} ${labelMode}`;
   return `${current} / ${max}`;
 }
 
 export function Meter({ rawArgs, className, id }: MeterProps) {
-  const variables = useStoryStore((s) => s.variables);
-  const temporary = useStoryStore((s) => s.temporary);
-  const locals = useContext(LocalsContext);
-
-  // Merge locals into variables for expression evaluation
-  const mergedVars = { ...variables };
-  const mergedTemps = { ...temporary };
-  for (const [key, val] of Object.entries(locals)) {
-    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
-    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
-  }
+  const [mergedVars, mergedTemps] = useMergedLocals();
 
   try {
     const { currentExpr, maxExpr, labelMode } = parseArgs(rawArgs);
     const current = Number(evaluate(currentExpr, mergedVars, mergedTemps));
     const max = Number(evaluate(maxExpr, mergedVars, mergedTemps));
-    const pct = Math.max(0, Math.min(100, (current / max) * 100));
+    const pct =
+      max === 0 ? 0 : Math.max(0, Math.min(100, (current / max) * 100));
     const label = formatLabel(current, max, labelMode);
 
     const classes = ['macro-meter', className].filter(Boolean).join(' ');
@@ -123,7 +113,7 @@ export function Meter({ rawArgs, className, id }: MeterProps) {
         class="error"
         title={String(err)}
       >
-        {`{meter error: ${(err as Error).message}}`}
+        {`{meter error: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }

package/src/components/macros/Numberbox.tsx

@@ -12,7 +12,7 @@ function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   if (!match) {
     return { varName: rawArgs.trim(), placeholder: '' };
   }
-  const varName = match[1].replace(/["']/g, '');
+  const varName = match[1]!.replace(/["']/g, '');
   const placeholder = match[2] || '';
   return { varName, placeholder };
 }

package/src/components/macros/Print.tsx

@@ -1,7 +1,5 @@
-import { useStoryStore } from '../../store';
-import { useContext } from 'preact/hooks';
 import { evaluate } from '../../expression';
-import { LocalsContext } from '../../markup/render';
+import { useMergedLocals } from '../../hooks/use-merged-locals';
 
 interface PrintProps {
   rawArgs: string;
@@ -10,17 +8,7 @@ interface PrintProps {
 }
 
 export function Print({ rawArgs, className, id }: PrintProps) {
-  const variables = useStoryStore((s) => s.variables);
-  const temporary = useStoryStore((s) => s.temporary);
-  const locals = useContext(LocalsContext);
-
-  // Merge locals into variables for expression evaluation
-  const mergedVars = { ...variables };
-  const mergedTemps = { ...temporary };
-  for (const [key, val] of Object.entries(locals)) {
-    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
-    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
-  }
+  const [mergedVars, mergedTemps] = useMergedLocals();
 
   try {
     const result = evaluate(rawArgs, mergedVars, mergedTemps);
@@ -41,7 +29,7 @@ export function Print({ rawArgs, className, id }: PrintProps) {
         class="error"
         title={String(err)}
       >
-        {`{print error: ${(err as Error).message}}`}
+        {`{print error: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }

package/src/components/macros/Radiobutton.tsx

@@ -20,15 +20,15 @@ function parseArgs(rawArgs: string): {
     // Try simpler: $var value label
     const parts = rawArgs.trim().split(/\s+/);
     return {
-      varName: (parts[0] || '').replace(/["']/g, ''),
-      value: parts[1] || '',
+      varName: (parts[0] ?? '').replace(/["']/g, ''),
+      value: parts[1] ?? '',
       label: parts.slice(2).join(' '),
     };
   }
   return {
-    varName: match[1].replace(/["']/g, ''),
-    value: match[2],
-    label: match[3],
+    varName: match[1]!.replace(/["']/g, ''),
+    value: match[2]!,
+    label: match[3]!,
   };
 }
 

package/src/components/macros/Switch.tsx

@@ -1,7 +1,6 @@
-import { useStoryStore } from '../../store';
-import { useContext } from 'preact/hooks';
 import { evaluate } from '../../expression';
-import { LocalsContext, renderNodes } from '../../markup/render';
+import { renderNodes } from '../../markup/render';
+import { useMergedLocals } from '../../hooks/use-merged-locals';
 import type { Branch } from '../../markup/ast';
 
 interface SwitchProps {
@@ -10,16 +9,7 @@ interface SwitchProps {
 }
 
 export function Switch({ rawArgs, branches }: SwitchProps) {
-  const variables = useStoryStore((s) => s.variables);
-  const temporary = useStoryStore((s) => s.temporary);
-  const locals = useContext(LocalsContext);
-
-  const mergedVars = { ...variables };
-  const mergedTemps = { ...temporary };
-  for (const [key, val] of Object.entries(locals)) {
-    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
-    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
-  }
+  const [mergedVars, mergedTemps] = useMergedLocals();
 
   let switchValue: unknown;
   try {
@@ -30,7 +20,7 @@ export function Switch({ rawArgs, branches }: SwitchProps) {
         class="error"
         title={String(err)}
       >
-        {`{switch error: ${(err as Error).message}}`}
+        {`{switch error: ${err instanceof Error ? err.message : String(err)}}`}
       </span>
     );
   }
@@ -55,7 +45,7 @@ export function Switch({ rawArgs, branches }: SwitchProps) {
           class="error"
           title={String(err)}
         >
-          {`{case error: ${(err as Error).message}}`}
+          {`{case error: ${err instanceof Error ? err.message : String(err)}}`}
         </span>
       );
     }

package/src/components/macros/Textarea.tsx

@@ -12,7 +12,7 @@ function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   if (!match) {
     return { varName: rawArgs.trim(), placeholder: '' };
   }
-  const varName = match[1].replace(/["']/g, '');
+  const varName = match[1]!.replace(/["']/g, '');
   const placeholder = match[2] || '';
   return { varName, placeholder };
 }

package/src/components/macros/Textbox.tsx

@@ -12,7 +12,7 @@ function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   if (!match) {
     return { varName: rawArgs.trim(), placeholder: '' };
   }
-  const varName = match[1].replace(/["']/g, '');
+  const varName = match[1]!.replace(/["']/g, '');
   const placeholder = match[2] || '';
   return { varName, placeholder };
 }

package/src/components/macros/Timed.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useMemo } from 'preact/hooks';
 import { renderNodes } from '../../markup/render';
 import { parseDelay } from '../../utils/parse-delay';
 import type { ASTNode, Branch } from '../../markup/ast';
@@ -20,16 +20,15 @@ export function Timed({
 }: TimedProps) {
   // Section 0 = initial children, sections 1..N = {next} branches
   // Each section has its own delay
-  const sections: { delay: number; nodes: ASTNode[] }[] = [];
-
-  // Initial content with the timed delay
-  sections.push({ delay: parseDelay(rawArgs), nodes: children });
-
-  // {next} branches
-  for (const branch of branches) {
-    const delay = branch.rawArgs ? parseDelay(branch.rawArgs) : 0;
-    sections.push({ delay, nodes: branch.children });
-  }
+  const sections = useMemo(() => {
+    const result: { delay: number; nodes: ASTNode[] }[] = [];
+    result.push({ delay: parseDelay(rawArgs), nodes: children });
+    for (const branch of branches) {
+      const delay = branch.rawArgs ? parseDelay(branch.rawArgs) : 0;
+      result.push({ delay, nodes: branch.children });
+    }
+    return result;
+  }, [rawArgs, children, branches]);
 
   const [visibleIndex, setVisibleIndex] = useState(-1);
 
@@ -37,18 +36,18 @@ export function Timed({
     if (visibleIndex >= sections.length - 1) return;
 
     const nextIndex = visibleIndex + 1;
-    const delay = sections[nextIndex].delay;
+    const delay = sections[nextIndex]!.delay;
 
     const timer = setTimeout(() => {
       setVisibleIndex(nextIndex);
     }, delay);
 
     return () => clearTimeout(timer);
-  }, [visibleIndex, sections.length]);
+  }, [visibleIndex, sections]);
 
   if (visibleIndex < 0) return null;
 
-  const content = renderNodes(sections[visibleIndex].nodes);
+  const content = renderNodes(sections[visibleIndex]!.nodes);
 
   if (className || id)
     return (

package/src/components/macros/VarDisplay.tsx

@@ -12,7 +12,7 @@ interface VarDisplayProps {
 export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
   const locals = useContext(LocalsContext);
   const parts = name.split('.');
-  const root = parts[0];
+  const root = parts[0]!;
   const storeValue = useStoryStore((s) =>
     scope === 'variable' ? s.variables[root] : s.temporary[root],
   );
@@ -27,7 +27,8 @@ export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
       value = undefined;
       break;
     }
-    value = (value as Record<string, unknown>)[parts[i]];
+    const part = parts[i] as string;
+    value = (value as Record<string, unknown>)[part];
   }
 
   const display = value == null ? '' : String(value);