@rohal12/spindle 0.59.16 → 0.59.17

package/dist/pkg/headless.js

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, u
 import { useSyncExternalStore } from "preact/compat";
 import { createStore } from "zustand/vanilla";
 import { immer } from "zustand/middleware/immer";
-import { Immer, current, enableMapSet, enablePatches, freeze, isDraft } from "immer";
+import { Immer, current, enableMapSet, enablePatches, freeze, isDraft, original } from "immer";
 import { shallow } from "zustand/vanilla/shallow";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 import { micromark } from "micromark";
@@ -10900,6 +10900,13 @@ function registerWidgetDefinitions(nodes, passageName) {
 */
 var FrozenStateContext = createContext(null);
 /**
+* Tells a timer ({repeat}, {timed}) whether the passage it belongs to has
+* been left: it must not run a new body then, for that would write into the
+* destination's state until the outgoing tree unmounts (#410). Null outside
+* a passage.
+*/
+var OutgoingContext = createContext(null);
+/**
 * Story state fields `keys`, re-rendering when any of them changes (as one
 * useStoryStore() selector per field would). The result keeps its identity
 * while the fields don't change, as the store's snapshot must.
@@ -14417,7 +14424,12 @@ function getByPath(obj, segments) {
 	for (const seg of segments) {
 		if (current == null) return void 0;
 		if (seg in Object.prototype && !hasOwn(Object(current), seg)) return;
-		current = current[seg];
+		const holder = current;
+		current = holder[seg];
+		if (current === void 0 && isDraft(holder) && (holder instanceof Map || holder instanceof Set)) {
+			const base = original(holder);
+			if (base && hasOwn(base, seg)) current = base[seg];
+		}
 	}
 	return current;
 }
@@ -15048,6 +15060,18 @@ function setEntryValue(root, path, value) {
 	return true;
 }
 /**
+* The own enumerable fields of a Map, Set, Date or RegExp (an instance of a
+* registered subclass may hold some besides its built-in content, #412);
+* none for any other value.
+*/
+function builtinFields(value) {
+	return value instanceof Map || value instanceof Set || value instanceof Date || value instanceof RegExp ? extraKeys(value) : [];
+}
+/** Whether `x` and `y` are built-ins of one class that may hold fields. */
+function sameBuiltin(x, y) {
+	return Object.getPrototypeOf(x) === Object.getPrototypeOf(y) && (builtinFields(x).length > 0 || builtinFields(y).length > 0);
+}
+/**
 * Every path each object (or array, or other value) of `root` is at, the
 * first appearance first, in depth-first order. Plain objects and arrays are
 * entered, where first met only (an object held in an array is one object,
@@ -15071,10 +15095,13 @@ function objectPaths(root, skip = /* @__PURE__ */ new Set(), entries = false) {
 		}
 		all.set(value, [at]);
 		if (isMergeable(value) || Array.isArray(value)) walk(value, at);
-		else if (entries && entryChildren(value)) collections.push([value, at]);
+		else {
+			walk(value, at, builtinFields(value));
+			if (entries && entryChildren(value)) collections.push([value, at]);
+		}
 	}
-	function walk(node, path) {
-		for (const key of Object.keys(node)) {
+	function walk(node, path, keys = Object.keys(node)) {
+		for (const key of keys) {
 			const value = node[key];
 			if (!isObjectValue(value)) continue;
 			const at = [...path, key];
@@ -15122,13 +15149,13 @@ function aliasMoved(x, y, at, earlier, later) {
 			a,
 			held.get(segment)
 		]);
-	} else if ((isMergeable(x) || Array.isArray(x)) && mergesWith(x, y, true)) {
-		for (const key of Object.keys(y)) if (hasOwn(x, key)) pairs.push([
-			key,
-			x[key],
-			y[key]
-		]);
 	}
+	const keys = mergesWith(x, y, true) ? Object.keys(y) : sameBuiltin(x, y) ? builtinFields(y) : [];
+	for (const key of keys) if (hasOwn(x, key)) pairs.push([
+		key,
+		x[key],
+		y[key]
+	]);
 	return pairs.some(([segment, a, b]) => {
 		if (!isObjectValue(a) || !isObjectValue(b)) return false;
 		const here = [...at, segment];
@@ -15149,7 +15176,7 @@ function aliasChanges(before, after) {
 	const later = firstPaths(after, void 0, true);
 	const changes = [];
 	(function walk(b, a, path) {
-		for (const key of Object.keys(a)) {
+		for (const key of Array.isArray(a) || isMergeable(a) ? Object.keys(a) : builtinFields(a)) {
 			if (!hasOwn(b, key)) continue;
 			const x = b[key];
 			const y = a[key];
@@ -15170,7 +15197,7 @@ function aliasChanges(before, after) {
 				value: y,
 				alias: true
 			});
-			if ((isMergeable(x) || Array.isArray(x)) && mergesWith(x, y, true) && pathKey(isAt) === k && pathKey(wasAt) === k) walk(x, y, at);
+			if (((isMergeable(x) || Array.isArray(x)) && mergesWith(x, y, true) || sameBuiltin(x, y)) && pathKey(isAt) === k && pathKey(wasAt) === k) walk(x, y, at);
 		}
 	})(before, after, []);
 	return changes;
@@ -17923,6 +17950,8 @@ var FOCUSABLE = [
 	"select:not([disabled])",
 	"textarea:not([disabled])",
 	"iframe",
+	"audio[controls]",
+	"video[controls]",
 	"summary",
 	"[contenteditable]",
 	"[tabindex]"
@@ -18822,7 +18851,12 @@ function defineMacro(config, source = "builtin") {
 		}
 		if (config.storeVar) {
 			const firstToken = readBoundVariable(props.rawArgs).replace(/["']/g, "");
-			if (firstToken.startsWith("%")) return h("span", { class: "error" }, `{${config.name}}: transient variables (%${firstToken.slice(1)}) cannot be bound to input macros`);
+			const kind = {
+				"%": "transient variables",
+				_: "temporary variables",
+				"@": "locals"
+			}[firstToken.charAt(0)];
+			if (kind) return h("span", { class: "error" }, `{${config.name}}: ${kind} (${firstToken}) cannot be bound to input macros`);
 			const varExpr = firstToken.replace(/["']/g, "").replace(/^\$/, "");
 			const segments = varExpr.split(".");
 			if (segments.includes("__proto__")) return h("span", { class: "error" }, `{${config.name}}: "$${varExpr}" cannot be bound: ${RESERVED_NAME} is reserved`);
@@ -20406,14 +20440,16 @@ defineMacro({
 	interpolate: true,
 	parameters: [DELAY_PARAMETER],
 	render({ children = [] }, ctx) {
-		const { useState, useEffect, useCallback } = ctx.hooks;
+		const { useState, useEffect, useCallback, useContext } = ctx.hooks;
 		const delay = ctx.args.delay ?? 0;
 		const [count, setCount] = useState(0);
 		const [stopped, setStopped] = useState(false);
+		const hasLeft = useContext(OutgoingContext);
 		const stop = useCallback(() => setStopped(true), []);
 		useEffect(() => {
 			if (stopped) return;
 			const interval = setInterval(() => {
+				if (hasLeft?.()) return;
 				setCount((c) => c + 1);
 			}, delay);
 			return () => clearInterval(interval);
@@ -20450,7 +20486,8 @@ var frozenAlways = () => true;
 * the owning macro sees and provides them again: the locals scope (read
 * through a live view, so a local assigned earlier in the body is visible),
 * nobr/inline rendering, the enclosing block widget's {@children}, the
-* enclosing {repeat}'s {stop} and the enclosing dialog's close callback.
+* enclosing {repeat}'s {stop} and the enclosing dialog's close callback and whether it runs in a {for} iteration
+* (#411) and the owning passage's departure (#410).
 * The body then behaves as if it rendered in place.
 *
 * The body's macros read story state from the store. Run from mutation code
@@ -20465,6 +20502,8 @@ function useDetachedBody() {
 	const widgetChildren = useContext(WidgetChildrenContext);
 	const repeat = useContext(RepeatContext);
 	const closeDialog = useContext(DialogCloseContext);
+	const inIteration = useContext(ItemEditContext);
+	const hasLeft = useContext(OutgoingContext);
 	const mounted = useRef([]);
 	useEffect(() => {
 		const unsubscribe = subscribeStateReplacement(() => {
@@ -20497,10 +20536,16 @@ function useDetachedBody() {
 									value: repeat,
 									children: /* @__PURE__ */ jsx(DialogCloseContext.Provider, {
 										value: closeDialog,
-										children: renderNodes(children, {
-											nobr,
-											inline,
-											locals
+										children: /* @__PURE__ */ jsx(ItemEditContext.Provider, {
+											value: inIteration,
+											children: /* @__PURE__ */ jsx(OutgoingContext.Provider, {
+												value: hasLeft,
+												children: renderNodes(children, {
+													nobr,
+													inline,
+													locals
+												})
+											})
 										})
 									})
 								})
@@ -20659,7 +20704,8 @@ defineMacro({
 	interpolate: true,
 	parameters: TIMED_PARAMETERS,
 	render({ branches = [] }, ctx) {
-		const { useState, useEffect, useMemo } = ctx.hooks;
+		const { useState, useEffect, useMemo, useContext } = ctx.hooks;
+		const hasLeft = useContext(OutgoingContext);
 		const sections = useMemo(() => {
 			return branches.map((branch) => ({
 				delay: parseMacroArgs(branch.rawArgs, TIMED_PARAMETERS).delay ?? 0,
@@ -20674,6 +20720,7 @@ defineMacro({
 			const nextIndex = visibleIndex + 1;
 			const delay = sections[nextIndex].delay;
 			const timer = setTimeout(() => {
+				if (hasLeft?.()) return;
 				setVisibleIndex(nextIndex);
 			}, delay);
 			return () => clearTimeout(timer);
@@ -21981,6 +22028,7 @@ defineMacro({
 		const prevHistoryLenRef = useRef(0);
 		const displayedId = displayed.id;
 		const isOutgoing = useCallback((state) => state.navigationId !== displayedId, [displayedId]);
+		const hasLeft = useCallback(() => isOutgoing(useStoryStore.getState()), [isOutgoing]);
 		const lastElement = useRef(null);
 		const containerRef = useRef(null);
 		const timeoutsRef = useRef([]);
@@ -22087,7 +22135,10 @@ defineMacro({
 				ref: containerRef,
 				children: passageElement && /* @__PURE__ */ jsx(FrozenStateContext.Provider, {
 					value: isOutgoing,
-					children: passageElement
+					children: /* @__PURE__ */ jsx(OutgoingContext.Provider, {
+						value: hasLeft,
+						children: passageElement
+					})
 				})
 			})]
 		});

package/package.json

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

package/src/components/macros/PassageDisplay.tsx

@@ -9,6 +9,7 @@ import { useStoryStore, type StoryState } from '../../store';
 import {
   useStoryFields,
   FrozenStateContext,
+  OutgoingContext,
 } from '../../hooks/use-story-fields';
 import { Passage, renderPassageContent } from '../Passage';
 import { defineMacro } from '../../define-macro';
@@ -140,6 +141,11 @@ defineMacro({
       (state: StoryState) => state.navigationId !== displayedId,
       [displayedId],
     );
+    // Read live: a timer asks it before the outgoing tree has unmounted
+    const hasLeft = useCallback(
+      () => isOutgoing(useStoryStore.getState()),
+      [isOutgoing],
+    );
     const lastElement = useRef<preact.VNode | null>(null);
 
     // Container ref for snapshot insertion
@@ -350,7 +356,9 @@ defineMacro({
         >
           {passageElement && (
             <FrozenStateContext.Provider value={isOutgoing}>
-              {passageElement}
+              <OutgoingContext.Provider value={hasLeft}>
+                {passageElement}
+              </OutgoingContext.Provider>
             </FrozenStateContext.Provider>
           )}
         </div>

package/src/components/macros/Repeat.tsx

@@ -1,6 +1,7 @@
 import { createContext } from 'preact';
 import { defineMacro } from '../../define-macro';
 import { DELAY_PARAMETER } from './macro-args';
+import { OutgoingContext } from '../../hooks/use-story-fields';
 
 export const RepeatContext = createContext<{ stop: () => void }>({
   stop: () => {},
@@ -12,17 +13,21 @@ defineMacro({
   interpolate: true,
   parameters: [DELAY_PARAMETER],
   render({ children = [] }, ctx) {
-    const { useState, useEffect, useCallback } = ctx.hooks;
+    const { useState, useEffect, useCallback, useContext } = ctx.hooks;
 
     const delay = ctx.args.delay ?? 0;
     const [count, setCount] = useState(0);
     const [stopped, setStopped] = useState(false);
 
+    const hasLeft = useContext(OutgoingContext);
+
     const stop = useCallback(() => setStopped(true), []);
 
     useEffect(() => {
       if (stopped) return;
       const interval = setInterval(() => {
+        // The passage was left: its body must not run again (#410)
+        if (hasLeft?.()) return;
         setCount((c) => c + 1);
       }, delay);
       return () => clearInterval(interval);

package/src/components/macros/Timed.tsx

@@ -1,6 +1,7 @@
 import { defineMacro } from '../../define-macro';
 import { DELAY_PARAMETER, parseMacroArgs } from './macro-args';
 import { wrapContent } from './display';
+import { OutgoingContext } from '../../hooks/use-story-fields';
 
 /** The parameters of {timed} and of each {next}: the delay before it shows. */
 const TIMED_PARAMETERS = [DELAY_PARAMETER] as const;
@@ -11,7 +12,8 @@ defineMacro({
   interpolate: true,
   parameters: TIMED_PARAMETERS,
   render({ branches = [] }, ctx) {
-    const { useState, useEffect, useMemo } = ctx.hooks;
+    const { useState, useEffect, useMemo, useContext } = ctx.hooks;
+    const hasLeft = useContext(OutgoingContext);
 
     const sections = useMemo(() => {
       return branches.map((branch) => ({
@@ -31,6 +33,8 @@ defineMacro({
       const delay = sections[nextIndex]!.delay;
 
       const timer = setTimeout(() => {
+        // The passage was left: its body must not run (#410)
+        if (hasLeft?.()) return;
         setVisibleIndex(nextIndex);
       }, delay);
 

package/src/components/macros/detached-body.tsx

@@ -10,12 +10,16 @@ import {
 } from '../../markup/render';
 import type { ASTNode } from '../../markup/ast';
 import { useRenderOptions } from '../../hooks/use-render-options';
-import { FrozenStateContext } from '../../hooks/use-story-fields';
+import {
+  FrozenStateContext,
+  OutgoingContext,
+} from '../../hooks/use-story-fields';
 import { liveLocalsView } from '../../utils/live-locals';
 import { runWithCommittedMutations } from '../../execute-mutation';
 import { subscribeStateReplacement } from '../../store';
 import { RepeatContext } from './Repeat';
 import { DialogCloseContext } from '../PassageDialog';
+import { ItemEditContext } from '../../utils/control-edits';
 
 const frozenAlways = () => true;
 
@@ -35,7 +39,8 @@ const frozenAlways = () => true;
  * the owning macro sees and provides them again: the locals scope (read
  * through a live view, so a local assigned earlier in the body is visible),
  * nobr/inline rendering, the enclosing block widget's {@children}, the
- * enclosing {repeat}'s {stop} and the enclosing dialog's close callback.
+ * enclosing {repeat}'s {stop} and the enclosing dialog's close callback and whether it runs in a {for} iteration
+ * (#411) and the owning passage's departure (#410).
  * The body then behaves as if it rendered in place.
  *
  * The body's macros read story state from the store. Run from mutation code
@@ -50,6 +55,8 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
   const widgetChildren = useContext(WidgetChildrenContext);
   const repeat = useContext(RepeatContext);
   const closeDialog = useContext(DialogCloseContext);
+  const inIteration = useContext(ItemEditContext);
+  const hasLeft = useContext(OutgoingContext);
 
   const mounted = useRef<HTMLElement[]>([]);
   useEffect(() => {
@@ -81,7 +88,11 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
                 <WidgetChildrenContext.Provider value={widgetChildren}>
                   <RepeatContext.Provider value={repeat}>
                     <DialogCloseContext.Provider value={closeDialog}>
-                      {renderNodes(children, { nobr, inline, locals })}
+                      <ItemEditContext.Provider value={inIteration}>
+                        <OutgoingContext.Provider value={hasLeft}>
+                          {renderNodes(children, { nobr, inline, locals })}
+                        </OutgoingContext.Provider>
+                      </ItemEditContext.Provider>
                     </DialogCloseContext.Provider>
                   </RepeatContext.Provider>
                 </WidgetChildrenContext.Provider>

package/src/define-macro.ts

@@ -216,11 +216,19 @@ export function defineMacro<const P extends readonly ParameterDef[] = []>(
     if (config.storeVar) {
       const firstToken = readBoundVariable(props.rawArgs).replace(/["']/g, '');
 
-      if (firstToken.startsWith('%')) {
+      // Only story variables ($name) can be bound: another sigil would be
+      // read as a story key spelled with it (#414)
+      const unbindable: Record<string, string> = {
+        '%': 'transient variables',
+        _: 'temporary variables',
+        '@': 'locals',
+      };
+      const kind = unbindable[firstToken.charAt(0)];
+      if (kind) {
         return h(
           'span',
           { class: 'error' },
-          `{${config.name}}: transient variables (%${firstToken.slice(1)}) cannot be bound to input macros`,
+          `{${config.name}}: ${kind} (${firstToken}) cannot be bound to input macros`,
         );
       }
 

package/src/hooks/use-modal-focus.ts

@@ -9,6 +9,8 @@ const FOCUSABLE = [
   'select:not([disabled])',
   'textarea:not([disabled])',
   'iframe',
+  'audio[controls]',
+  'video[controls]',
   'summary',
   '[contenteditable]',
   '[tabindex]',

package/src/hooks/use-story-fields.ts

@@ -15,6 +15,14 @@ export const FrozenStateContext = createContext<
   ((state: StoryState) => boolean) | null
 >(null);
 
+/**
+ * Tells a timer ({repeat}, {timed}) whether the passage it belongs to has
+ * been left: it must not run a new body then, for that would write into the
+ * destination's state until the outgoing tree unmounts (#410). Null outside
+ * a passage.
+ */
+export const OutgoingContext = createContext<(() => boolean) | null>(null);
+
 /**
  * Story state fields `keys`, re-rendering when any of them changes (as one
  * useStoryStore() selector per field would). The result keeps its identity

package/src/structural.ts

@@ -859,6 +859,28 @@ function setEntryValue(
   return true;
 }
 
+/**
+ * The own enumerable fields of a Map, Set, Date or RegExp (an instance of a
+ * registered subclass may hold some besides its built-in content, #412);
+ * none for any other value.
+ */
+function builtinFields(value: object): string[] {
+  return value instanceof Map ||
+    value instanceof Set ||
+    value instanceof Date ||
+    value instanceof RegExp
+    ? extraKeys(value)
+    : [];
+}
+
+/** Whether `x` and `y` are built-ins of one class that may hold fields. */
+function sameBuiltin(x: object, y: object): boolean {
+  return (
+    Object.getPrototypeOf(x) === Object.getPrototypeOf(y) &&
+    (builtinFields(x).length > 0 || builtinFields(y).length > 0)
+  );
+}
+
 /**
  * Every path each object (or array, or other value) of `root` is at, the
  * first appearance first, in depth-first order. Plain objects and arrays are
@@ -888,12 +910,17 @@ function objectPaths(
     all.set(value, [at]);
     if (isMergeable(value) || Array.isArray(value)) {
       walk(value as Record<string, unknown>, at);
-    } else if (entries && entryChildren(value)) {
-      collections.push([value, at]);
+    } else {
+      walk(value as Record<string, unknown>, at, builtinFields(value));
+      if (entries && entryChildren(value)) collections.push([value, at]);
     }
   }
-  function walk(node: Record<string, unknown>, path: string[]): void {
-    for (const key of Object.keys(node)) {
+  function walk(
+    node: Record<string, unknown>,
+    path: string[],
+    keys: string[] = Object.keys(node),
+  ): void {
+    for (const key of keys) {
       const value = node[key];
       if (!isObjectValue(value)) continue;
       const at = [...path, key];
@@ -963,12 +990,16 @@ function aliasMoved(
     for (const [segment, a] of xs) {
       if (held.has(segment)) pairs.push([segment, a, held.get(segment)]);
     }
-  } else if ((isMergeable(x) || Array.isArray(x)) && mergesWith(x, y, true)) {
-    for (const key of Object.keys(y)) {
-      if (hasOwn(x, key)) {
-        pairs.push([key, (x as any)[key], (y as any)[key]]);
-      }
-    }
+  }
+  // The properties both hold: of objects that merge, and the fields of a
+  // built-in subclass instance besides its entries (#412)
+  const keys = mergesWith(x, y, true)
+    ? Object.keys(y)
+    : sameBuiltin(x, y)
+      ? builtinFields(y)
+      : [];
+  for (const key of keys) {
+    if (hasOwn(x, key)) pairs.push([key, (x as any)[key], (y as any)[key]]);
   }
   return pairs.some(([segment, a, b]) => {
     if (!isObjectValue(a) || !isObjectValue(b)) return false;
@@ -1002,7 +1033,9 @@ export function aliasChanges(
     a: Record<string, unknown>,
     path: string[],
   ): void {
-    for (const key of Object.keys(a)) {
+    for (const key of Array.isArray(a) || isMergeable(a)
+      ? Object.keys(a)
+      : builtinFields(a)) {
       if (!hasOwn(b, key)) continue;
       const x = b[key];
       const y = a[key];
@@ -1023,8 +1056,8 @@ export function aliasChanges(
       // Only paths that are first appearances are entered: elsewhere the
       // contents are those of the object met first.
       if (
-        (isMergeable(x) || Array.isArray(x)) &&
-        mergesWith(x, y, true) &&
+        (((isMergeable(x) || Array.isArray(x)) && mergesWith(x, y, true)) ||
+          sameBuiltin(x, y)) &&
         pathKey(isAt) === k &&
         pathKey(wasAt) === k
       ) {

package/src/utils/object-path.ts

@@ -1,4 +1,4 @@
-import { current as draftState, isDraft } from 'immer';
+import { current as draftState, isDraft, original } from 'immer';
 import { registeredClassName } from '../class-registry';
 import { hasOwn } from './namespace';
 import { atomicName } from './value-kinds';
@@ -18,7 +18,18 @@ export function getByPath(obj: object, segments: readonly string[]): unknown {
     if (seg in Object.prototype && !hasOwn(Object(current), seg)) {
       return undefined;
     }
-    current = (current as Record<string, unknown>)[seg];
+    const holder = current as Record<string, unknown>;
+    current = holder[seg];
+    // An Immer draft of a Map or Set does not carry the own properties of a
+    // registered subclass instance: they are those of its base (#412)
+    if (
+      current === undefined &&
+      isDraft(holder) &&
+      (holder instanceof Map || holder instanceof Set)
+    ) {
+      const base = original(holder) as Record<string, unknown> | undefined;
+      if (base && hasOwn(base, seg)) current = base[seg];
+    }
   }
   return current;
 }