@rohal12/spindle 0.50.0 → 0.51.0

package/src/markup/render.tsx

@@ -124,6 +124,43 @@ const INLINE_ELEMENTS = new Set([
   'wbr',
 ]);
 
+/**
+ * HTML boolean attributes. Their presence means "on", but a parsed bare or
+ * `=""` attribute has the value '', which Preact would assign to the DOM
+ * property as a falsy value — so present ones are passed as `true` (#177).
+ */
+const BOOLEAN_ATTRIBUTES = new Set([
+  'allowfullscreen',
+  'async',
+  'autofocus',
+  'autoplay',
+  'checked',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'formnovalidate',
+  'hidden',
+  'inert',
+  'ismap',
+  'itemscope',
+  'loop',
+  'multiple',
+  'muted',
+  'nomodule',
+  'novalidate',
+  'open',
+  'playsinline',
+  'readonly',
+  'required',
+  'reversed',
+  'selected',
+]);
+
+function isPresentBooleanAttribute(name: string, value: string): boolean {
+  return value === '' && BOOLEAN_ATTRIBUTES.has(name.toLowerCase());
+}
+
 function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const resolve = useInterpolate();
   const nobr = useContext(NobrContext);
@@ -131,7 +168,7 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const inSvg = useContext(SvgContext);
   const attrs: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(node.attributes)) {
-    attrs[k] = resolve(v) ?? v;
+    attrs[k] = isPresentBooleanAttribute(k, v) ? true : (resolve(v) ?? v);
   }
   const isSvgRoot = node.tag.toLowerCase() === 'svg';
   const isInline = INLINE_ELEMENTS.has(node.tag.toLowerCase());
@@ -161,7 +198,26 @@ function ChildrenSlot() {
   return <>{renderNodes(childrenAST, { nobr, locals })}</>;
 }
 
-function renderMacro(node: MacroNode, key: number) {
+/**
+ * Stable per-node keys. Keying rendered children by AST node identity (not
+ * by position) makes Preact remount components when different content
+ * occupies the same slot — e.g. when an {if}/{switch} branch or an included
+ * passage changes — so mount-only macros like {set} and {do} run for the new
+ * content, while re-rendering the same AST keeps existing instances (#175).
+ */
+const nodeKeys = new WeakMap<ASTNode, string>();
+let nextNodeKey = 0;
+
+function nodeKey(node: ASTNode): string {
+  let key = nodeKeys.get(node);
+  if (key === undefined) {
+    key = `n${nextNodeKey++}`;
+    nodeKeys.set(node, key);
+  }
+  return key;
+}
+
+function renderMacro(node: MacroNode, key: string) {
   if (isSubMacro(node.name)) return null;
 
   const widget = getWidget(node.name);
@@ -204,14 +260,10 @@ function renderMacro(node: MacroNode, key: number) {
 /**
  * Render a non-text AST node to a Preact element.
  */
-function renderSingleNode(
-  node: ASTNode,
-  key: number,
-): preact.ComponentChildren {
+function renderSingleNode(node: ASTNode): preact.ComponentChildren {
+  if (node.type === 'text') return node.value;
+  const key = nodeKey(node);
   switch (node.type) {
-    case 'text':
-      return node.value;
-
     case 'variable':
       if (node.scope === 'local' && node.name === 'children') {
         return <ChildrenSlot key={key} />;
@@ -261,7 +313,7 @@ function renderSingleNode(
  */
 export function renderInlineNodes(nodes: ASTNode[]): preact.ComponentChildren {
   if (nodes.length === 0) return null;
-  return nodes.map((node, i) => renderSingleNode(node, i));
+  return nodes.map((node) => renderSingleNode(node));
 }
 
 function hasUnclosedBacktick(s: string): boolean {
@@ -298,8 +350,11 @@ function getVariableTextValue(
  * Characters/patterns that trigger CommonMark or GFM transformations.
  * Any match → fall through to the full micromark pipeline.
  * False positives (e.g. `-` used as text, not list) just use the slower path.
+ * Includes character references (`&amp;`, `&#123;`) and two-space hard line
+ * breaks, which micromark decodes / turns into <br> (#171).
  */
-const MARKDOWN_SYNTAX_RE = /[*_`#|~\[>\\\-+=]|!\[|\d+\./;
+const MARKDOWN_SYNTAX_RE =
+  /[*_`#|~\[>\\\-+=]|!\[|\d+\.|&#?[a-zA-Z0-9]+;| {2}\n/;
 const BLANK_LINE_RE = /\n\s*\n/;
 const PLACEHOLDER_SPLIT_RE = /(<span data-tw="\d+"><\/span>)/;
 const PLACEHOLDER_IDX_RE = /^<span data-tw="(\d+)"><\/span>$/;
@@ -358,7 +413,7 @@ export function renderNodes(
       n.type === 'text' && (n.value.trim() !== '' || /\n\s*\n/.test(n.value)),
   );
   if (!needsMarkdown) {
-    return nodes.map((node, i) => renderSingleNode(node, i));
+    return nodes.map((node) => renderSingleNode(node));
   }
 
   // Build combined markdown string with placeholders for non-text nodes
@@ -375,7 +430,7 @@ export function renderNodes(
       combined += getVariableTextValue(node, locals);
     } else {
       const phIdx = components.length;
-      components.push(renderSingleNode(node, i));
+      components.push(renderSingleNode(node));
       combined += `<span data-tw="${phIdx}"></span>`;
     }
   }

package/src/markup/tokenizer.ts

@@ -66,7 +66,26 @@ export type Token =
 /** Tag name must start with a letter (covers standard and custom elements). */
 const VALID_TAG_START = /[a-zA-Z]/;
 
-const HTML_VOID_TAGS = new Set(['br', 'col', 'hr', 'img', 'wbr']);
+/** HTML void elements: never have children or a closing tag. */
+const HTML_VOID_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+
+/** Macros whose body is JavaScript source, kept verbatim instead of tokenized. */
+const RAW_BODY_MACROS = new Set(['do']);
 
 /**
  * Parse a Twine link interior into display and target.
@@ -219,11 +238,15 @@ function parseHtmlAttributes(
         const quote = input[j]!;
         j++; // skip opening quote
         const valStart = j;
-        let braceDepth = 0;
         while (j < input.length) {
-          if (input[j] === '{') braceDepth++;
-          else if (input[j] === '}') braceDepth--;
-          else if (input[j] === quote && braceDepth <= 0) break;
+          if (input[j] === '{') {
+            // Skip a whole {…} interpolation so quotes inside it don't end the value
+            const closeIdx = scanBalancedBrace(input, j + 1);
+            if (closeIdx !== -1) {
+              j = closeIdx + 1;
+              continue;
+            }
+          } else if (input[j] === quote) break;
           j++;
         }
         attributes[attrName] = input.slice(valStart, j);
@@ -243,18 +266,86 @@ function parseHtmlAttributes(
   return { attributes, endIdx: j };
 }
 
+/**
+ * Skip a '…' or "…" string literal opening at i.
+ * Returns the index just past the closing quote, or -1 if the string is
+ * not closed on the same line (JS strings can't span lines unescaped).
+ */
+function skipQuoted(input: string, i: number): number {
+  const quote = input[i];
+  let j = i + 1;
+  while (j < input.length) {
+    const c = input[j];
+    if (c === '\\') j += 2;
+    else if (c === quote) return j + 1;
+    else if (c === '\n') return -1;
+    else j++;
+  }
+  return -1;
+}
+
+/**
+ * Skip a `…` template literal opening at i, including ${…} parts.
+ * Returns the index just past the closing backtick, or -1 if unclosed.
+ */
+function skipTemplate(input: string, i: number): number {
+  let j = i + 1;
+  while (j < input.length) {
+    const c = input[j];
+    if (c === '\\') {
+      j += 2;
+    } else if (c === '`') {
+      return j + 1;
+    } else if (c === '$' && input[j + 1] === '{') {
+      const closeIdx = scanBalancedBrace(input, j + 2);
+      if (closeIdx === -1) return -1;
+      j = closeIdx + 1;
+    } else {
+      j++;
+    }
+  }
+  return -1;
+}
+
+/**
+ * A quote directly after a letter/digit is an apostrophe (don't), not a
+ * string; after a backslash it is an escaped attribute delimiter (\").
+ */
+const NON_STRING_QUOTE_PREFIX = /[\p{L}\p{N}_\\]/u;
+
 /**
  * Scan for the balanced closing } starting at position i (just past the {).
+ * Braces inside string and template literals are ignored. A quote that
+ * can't start a string (apostrophe, escaped, unterminated) counts as text.
  * Returns the index of the closing } or -1 if unbalanced.
  */
-function scanBalancedBrace(input: string, i: number): number {
+export function scanBalancedBrace(input: string, i: number): number {
   let depth = 1;
-  while (i < input.length && depth > 0) {
-    if (input[i] === '{') depth++;
-    else if (input[i] === '}') depth--;
-    if (depth > 0) i++;
+  while (i < input.length) {
+    const c = input[i]!;
+    if (c === '{') {
+      depth++;
+    } else if (c === '}') {
+      if (--depth === 0) return i;
+    } else if (
+      (c === '"' || c === "'") &&
+      !(i > 0 && NON_STRING_QUOTE_PREFIX.test(input[i - 1]!))
+    ) {
+      const end = skipQuoted(input, i);
+      if (end !== -1) {
+        i = end;
+        continue;
+      }
+    } else if (c === '`') {
+      const end = skipTemplate(input, i);
+      if (end !== -1) {
+        i = end;
+        continue;
+      }
+    }
+    i++;
   }
-  return depth === 0 ? i : -1;
+  return -1;
 }
 
 /**
@@ -277,6 +368,32 @@ export function tokenize(input: string): Token[] {
     }
   }
 
+  /**
+   * After an opening raw-body macro ({do}), emit everything up to the
+   * first {/name} as a single text token so JavaScript source is not
+   * parsed as markup. A literal "{/do}" inside the code would end it early.
+   * Without a closer, nothing is consumed and the AST builder reports it.
+   */
+  function consumeRawBody(name: string, isClose: boolean) {
+    const lower = name.toLowerCase();
+    if (isClose || !RAW_BODY_MACROS.has(lower)) return;
+    const closeRe = new RegExp(`\\{/${lower}\\s*\\}`, 'gi');
+    closeRe.lastIndex = i;
+    const m = closeRe.exec(input);
+    if (!m) return;
+    const closeStart = m.index;
+    const closeEnd = closeStart + m[0].length;
+    flushText(closeStart);
+    tokens.push({
+      type: 'macro',
+      ...parseMacroContent(input.slice(closeStart + 1, closeEnd - 1)),
+      start: closeStart,
+      end: closeEnd,
+    });
+    i = closeEnd;
+    textStart = closeEnd;
+  }
+
   while (i < input.length) {
     // Handle escaped braces: \{ and \}
     if (input[i] === '\\' && (input[i + 1] === '{' || input[i + 1] === '}')) {
@@ -546,25 +663,18 @@ export function tokenize(input: string): Token[] {
 
         if (charAfter !== undefined && /[a-zA-Z]/.test(charAfter)) {
           // {.class#id macroName args}
-          i = afterSelectors;
-
-          // Scan to closing }, tracking brace nesting
-          let depth = 1;
-          const contentStart = i;
-          while (i < input.length && depth > 0) {
-            if (input[i] === '{') depth++;
-            else if (input[i] === '}') depth--;
-            if (depth > 0) i++;
-          }
+          // Scan to closing }, tracking brace nesting and string literals
+          const contentStart = afterSelectors;
+          const closeIdx = scanBalancedBrace(input, contentStart);
 
-          if (depth !== 0) {
+          if (closeIdx === -1) {
             i = start + 1;
             textStart = start;
             continue;
           }
 
-          const content = input.slice(contentStart, i);
-          i++; // skip closing }
+          const content = input.slice(contentStart, closeIdx);
+          i = closeIdx + 1; // skip closing }
 
           const { name, rawArgs, isClose } = parseMacroContent(content);
           const token: MacroToken = {
@@ -579,6 +689,7 @@ export function tokenize(input: string): Token[] {
           if (id) token.id = id;
           tokens.push(token);
           textStart = i;
+          consumeRawBody(name, isClose);
           continue;
         }
 
@@ -755,26 +866,21 @@ export function tokenize(input: string): Token[] {
         (nextChar === '/' || /[a-zA-Z]/.test(nextChar))
       ) {
         flushText(i);
-        i++; // skip {
-
-        // Scan to closing }, tracking brace nesting for object literals
-        let depth = 1;
-        const contentStart = i;
-        while (i < input.length && depth > 0) {
-          if (input[i] === '{') depth++;
-          else if (input[i] === '}') depth--;
-          if (depth > 0) i++;
-        }
 
-        if (depth !== 0) {
+        // Scan to closing }, tracking brace nesting (object literals)
+        // and string literals
+        const contentStart = i + 1;
+        const closeIdx = scanBalancedBrace(input, contentStart);
+
+        if (closeIdx === -1) {
           // Unclosed macro — treat as text
           i = start + 1;
           textStart = start;
           continue;
         }
 
-        const content = input.slice(contentStart, i);
-        i++; // skip closing }
+        const content = input.slice(contentStart, closeIdx);
+        i = closeIdx + 1; // skip closing }
 
         const { name, rawArgs, isClose } = parseMacroContent(content);
         tokens.push({
@@ -786,6 +892,7 @@ export function tokenize(input: string): Token[] {
           end: i,
         });
         textStart = i;
+        consumeRawBody(name, isClose);
         continue;
       }
 
@@ -817,6 +924,12 @@ export function tokenize(input: string): Token[] {
           if (input[j] === '>') {
             j++;
             flushText(start);
+            if (HTML_VOID_TAGS.has(tagLower)) {
+              // Void elements never take a closer; drop a redundant </input>
+              textStart = j;
+              i = j;
+              continue;
+            }
             tokens.push({
               type: 'html',
               tag,

package/src/saves/save-manager.ts

@@ -10,6 +10,7 @@ import type {
 import { isSavePayload } from './types';
 import { getBackend, resetBackend } from './storage';
 import { deepClone, serialize, deserialize } from '../class-registry';
+import { emit } from '../event-emitter';
 
 type TitleGenerator = (payload: SavePayload) => string;
 
@@ -94,6 +95,28 @@ export async function getCurrentPlaythroughId(
   return (await getBackend()).getMeta<string>(`currentPlaythroughId.${ifid}`);
 }
 
+// --- Save Hooks ---
+
+/**
+ * Run a save through the `beforesave` / `aftersave` hooks. `beforesave` fires
+ * before `getPayload()` captures the state, so data a hook sets is part of the
+ * save; `aftersave` fires once `write` has stored it. Every user-facing save
+ * path goes through here.
+ */
+export function saveWithHooks<T>(
+  slot: string | undefined,
+  custom: Record<string, unknown> | undefined,
+  getPayload: () => SavePayload,
+  write: (payload: SavePayload) => Promise<T>,
+): Promise<T> {
+  emit('beforesave', slot, custom);
+  const payload = getPayload();
+  return write(payload).then((result) => {
+    emit('aftersave', slot);
+    return result;
+  });
+}
+
 // --- Save CRUD ---
 
 export async function createSave(
@@ -157,18 +180,28 @@ export async function overwriteSave(
   return updated;
 }
 
+/**
+ * Turn a stored (serialized) payload into a live one, restoring class
+ * instances and built-ins. Returns a new payload; the stored one is left
+ * untouched. Payloads handed to the store's `loadFromPayload()` must be live.
+ */
+export function deserializePayload(payload: SavePayload): SavePayload {
+  return {
+    ...payload,
+    variables: deserialize(payload.variables),
+    history: payload.history.map((m) => ({
+      ...m,
+      variables: deserialize(m.variables),
+    })),
+  };
+}
+
 export async function loadSave(
   saveId: string,
 ): Promise<SavePayload | undefined> {
   const record = await (await getBackend()).getSave(saveId);
   if (!record) return undefined;
-  const payload = record.payload;
-  payload.variables = deserialize(payload.variables);
-  payload.history = payload.history.map((m) => ({
-    ...m,
-    variables: deserialize(m.variables),
-  }));
-  return payload;
+  return deserializePayload(record.payload);
 }
 
 export async function deleteSaveById(saveId: string): Promise<void> {
@@ -267,26 +300,66 @@ const AUTOSAVE_KEY_PREFIX = 'autosave.';
 const SLOT_KEY_PREFIX = 'slot.';
 const SLOT_INDEX_KEY_PREFIX = 'slotIndex.';
 
+/**
+ * Whether `slot` names a slot. The default (autosave) slot is addressed by
+ * omitting `slot` or by `''`, the identifier its SaveInfo reports.
+ */
+function isNamedSlot(slot: string | undefined): slot is string {
+  return slot != null && slot !== '';
+}
+
 function slotMetaKey(ifid: string, slot?: string): string {
-  return slot != null
+  return isNamedSlot(slot)
     ? `${SLOT_KEY_PREFIX}${slot}.${ifid}`
     : `${AUTOSAVE_KEY_PREFIX}${ifid}`;
 }
 
+/** Tail of the queue that serializes slot index updates. */
+let slotIndexQueue: Promise<unknown> = Promise.resolve();
+
+/**
+ * Read-modify-write the per-story slot index. Updates are queued so that
+ * concurrent saves, imports and deletes can't overwrite each other's change.
+ */
+function updateSlotIndex(
+  ifid: string,
+  update: (slots: string[]) => string[],
+): Promise<void> {
+  const run = slotIndexQueue.then(async () => {
+    const backend = await getBackend();
+    const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
+    const existing = (await backend.getMeta<string[]>(indexKey)) ?? [];
+    const updated = update(existing);
+    if (updated !== existing) await backend.setMeta(indexKey, updated);
+  });
+  slotIndexQueue = run.catch(() => {});
+  return run;
+}
+
 /** Record a named slot in the per-story slot index (no-op for the default slot). */
-async function addToSlotIndex(ifid: string, slot?: string): Promise<void> {
-  if (slot == null) return;
-  const backend = await getBackend();
+function addToSlotIndex(ifid: string, slot?: string): Promise<void> {
+  if (!isNamedSlot(slot)) return Promise.resolve();
+  return updateSlotIndex(ifid, (slots) =>
+    slots.includes(slot) ? slots : [...slots, slot],
+  );
+}
+
+/** Remove a named slot from the per-story slot index (no-op for the default slot). */
+function removeFromSlotIndex(ifid: string, slot?: string): Promise<void> {
+  if (!isNamedSlot(slot)) return Promise.resolve();
+  return updateSlotIndex(ifid, (slots) => slots.filter((s) => s !== slot));
+}
+
+/** Named slots in the per-story slot index. */
+async function getIndexedSlots(ifid: string): Promise<string[]> {
   const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-  const existing = (await backend.getMeta<string[]>(indexKey)) ?? [];
-  if (!existing.includes(slot)) {
-    await backend.setMeta(indexKey, [...existing, slot]);
-  }
+  const slots = (await (await getBackend()).getMeta<string[]>(indexKey)) ?? [];
+  return slots.filter(isNamedSlot);
 }
 
 function toSaveInfo(record: SaveRecord, slot?: string): SaveInfo {
   return {
-    slot: slot ?? '',
+    slot: isNamedSlot(slot) ? slot : '',
     title: record.meta.title,
     passage: record.meta.passage,
     createdAt: record.meta.createdAt,
@@ -313,8 +386,8 @@ export async function quickSave(
 
   // Create new save
   const record = await createSave(ifid, playthroughId, payload, {
-    isAutosave: !slot,
-    ...(slot != null ? { slot } : {}),
+    isAutosave: !isNamedSlot(slot),
+    ...(isNamedSlot(slot) ? { slot } : {}),
     ...custom,
   });
   await backend.setMeta(metaKey, record.meta.id);
@@ -360,9 +433,7 @@ export async function populateKnownSaves(
   }
 
   // Check named slots from the index
-  const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-  const slots = (await (await getBackend()).getMeta<string[]>(indexKey)) ?? [];
-  for (const slot of slots) {
+  for (const slot of await getIndexedSlots(ifid)) {
     if (await hasQuickSave(ifid, slot)) {
       result[slot] = true;
     }
@@ -399,9 +470,7 @@ export async function listSlotSaves(ifid: string): Promise<SaveInfo[]> {
   if (defaultInfo) result.push(defaultInfo);
 
   // Check named slots from the index
-  const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-  const slots = (await (await getBackend()).getMeta<string[]>(indexKey)) ?? [];
-  for (const slot of slots) {
+  for (const slot of await getIndexedSlots(ifid)) {
     const info = await getSlotSaveInfo(ifid, slot);
     if (info) result.push(info);
   }
@@ -425,12 +494,7 @@ export async function deleteSlotSave(
   await backend.deleteMeta(metaKey);
 
   // Remove from slot index if named
-  if (slot != null) {
-    const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-    const existing = (await backend.getMeta<string[]>(indexKey)) ?? [];
-    const updated = existing.filter((s) => s !== slot);
-    await backend.setMeta(indexKey, updated);
-  }
+  await removeFromSlotIndex(ifid, slot);
 }
 
 // --- Session Persistence (survives F5, cleared on tab close) ---
@@ -458,13 +522,7 @@ export function loadSession(ifid: string): SavePayload | undefined {
     if (!raw) return undefined;
     const parsed: unknown = JSON.parse(raw);
     if (!isSavePayload(parsed)) return undefined;
-    const payload = parsed;
-    payload.variables = deserialize(payload.variables);
-    payload.history = payload.history.map((m) => ({
-      ...m,
-      variables: deserialize(m.variables),
-    }));
-    return payload;
+    return deserializePayload(parsed);
   } catch {
     return undefined;
   }
@@ -578,8 +636,8 @@ export async function importSlotSave(
   const { slot: _exportedSlot, ...custom } = record.meta.custom ?? {};
   record.meta.custom = {
     ...custom,
-    isAutosave: !slot,
-    ...(slot != null ? { slot } : {}),
+    isAutosave: !isNamedSlot(slot),
+    ...(isNamedSlot(slot) ? { slot } : {}),
   };
 
   const backend = await getBackend();

package/src/settings.ts

@@ -27,6 +27,7 @@ export type SettingDef =
 const definitions = new Map<string, SettingDef>();
 let values: Record<string, unknown> = {};
 let storageLoaded = false;
+let unsubscribeStoryData: (() => void) | null = null;
 
 function storageKey(): string {
   const storyData = useStoryStore.getState().storyData;
@@ -40,6 +41,20 @@ function persist(): void {
 
 function loadFromStorage(): void {
   if (storageLoaded) return;
+  // Settings registered from Story JavaScript run before store.init(), when
+  // the IFID (and thus the storage key) is not known yet. Defer the load
+  // until story data arrives instead of reading `spindle.unknown.settings`.
+  if (!useStoryStore.getState().storyData?.ifid) {
+    if (!unsubscribeStoryData) {
+      unsubscribeStoryData = useStoryStore.subscribe((state) => {
+        if (!state.storyData?.ifid) return;
+        unsubscribeStoryData?.();
+        unsubscribeStoryData = null;
+        loadFromStorage();
+      });
+    }
+    return;
+  }
   storageLoaded = true;
   try {
     const raw = localStorage.getItem(storageKey());