@rohal12/spindle 0.51.1 → 0.51.3

package/dist/pkg/headless.js

@@ -2809,18 +2809,23 @@ async function getCurrentPlaythroughId(ifid) {
 }
 /**
 * 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.
+* before the payload is captured, 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.
+*
+* `beginCapture` is called just before the hooks and returns the function
+* that captures the payload after them, so the capture can tell which
+* variables the hooks changed (the store's `beginSave`).
 *
 * The hook and capture run synchronously, but an error they throw (a failing
 * hook, an unserializable payload) rejects the returned promise like a failed
 * write rather than escaping to the caller.
 */
-function saveWithHooks(slot, custom, getPayload, write) {
+function saveWithHooks(slot, custom, beginCapture, write) {
 	try {
+		const capture = beginCapture();
 		emit("beforesave", slot, custom);
-		return write(getPayload()).then((result) => {
+		return write(capture()).then((result) => {
 			emit("aftersave", slot);
 			return result;
 		});
@@ -3703,6 +3708,22 @@ function loadedEntryMoment(payload) {
 	if (typeof moment.variables !== "object" || moment.variables === null) return;
 	return moment;
 }
+/**
+* Copy the variables that changed between `before` and `after` (the live
+* variables around the `beforesave` hooks) into the payload's snapshot of the
+* saved moment. A load restores that snapshot, the state on entering the
+* passage, and runs the passage again, so data a hook adds to a save would
+* otherwise be lost on load (#227). Only the payload's copy changes: the live
+* history keeps the recorded snapshot (#159). Store updates are immutable, so
+* a value a hook did not touch keeps its identity.
+*/
+function keepHookWrites(payload, before, after) {
+	const moment = payload.history[payload.historyIndex];
+	if (!moment) return;
+	const has = (vars, key) => Object.prototype.hasOwnProperty.call(vars, key);
+	for (const key of new Set([...Object.keys(before), ...Object.keys(after)])) if (!has(after, key)) delete moment.variables[key];
+	else if (!has(before, key) || after[key] !== before[key]) moment.variables[key] = deepClone(after[key]);
+}
 /** Restore or reset PRNG from a history moment's snapshot. */
 function restorePRNGFromMoment(moment) {
 	if (moment?.prng) restorePRNG(moment.prng.seed, moment.prng.pull);
@@ -3985,7 +4006,7 @@ var useStoryStore = create()(immer((set, get) => ({
 	save: (slot, custom) => {
 		const { storyData, playthroughId } = get();
 		if (!storyData) return Promise.resolve();
-		return handled(saveWithHooks(slot, custom, () => get().getSavePayload(), async (payload) => {
+		return handled(saveWithHooks(slot, custom, get().beginSave, async (payload) => {
 			set((state) => {
 				state.saveError = null;
 			});
@@ -4127,6 +4148,14 @@ var useStoryStore = create()(immer((set, get) => ({
 			prng: snapshotPRNG()
 		};
 	},
+	beginSave: () => {
+		const before = get().variables;
+		return () => {
+			const payload = get().getSavePayload();
+			keepHookWrites(payload, before, get().variables);
+			return payload;
+		};
+	},
 	loadFromPayload: (payload, slot) => {
 		if (payload.history.length === 0) {
 			console.warn("loadFromPayload: rejecting payload with empty history");
@@ -4825,16 +4854,17 @@ function defineMacro(config, source = "builtin") {
 //#endregion
 //#region src/passage-render-state.ts
 /**
-* Name of the passage most recently mounted by <Passage> (null until the
-* first render, e.g. when the story interface has no {passage}).
-* Lets Story.waitForActions() tell whether the current passage is on screen.
+* Navigation id (the store's `navigationId`) of the passage most recently
+* mounted by <Passage> (null until the first render, e.g. when the story
+* interface has no {passage}). Lets Story.waitForActions() tell whether the
+* current navigation is on screen, also when it revisits the passage shown.
 */
-var renderedPassage = null;
-function markPassageRendered(name) {
-	renderedPassage = name;
+var renderedNavigationId = null;
+function markPassageRendered(navigationId) {
+	renderedNavigationId = navigationId;
 }
-function getRenderedPassage() {
-	return renderedPassage;
+function getRenderedNavigationId() {
+	return renderedNavigationId;
 }
 //#endregion
 //#region src/story-api.ts
@@ -5128,11 +5158,10 @@ function createStoryAPI() {
 			await new Promise((resolve) => {
 				requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
 			});
-			const { currentPassage, renderDeferred } = useStoryStore.getState();
-			const rendered = getRenderedPassage();
-			if (rendered !== null && rendered !== currentPassage && !renderDeferred) await new Promise((resolve) => {
-				const off = on("passagerender", (name) => {
-					if (name === useStoryStore.getState().currentPassage) {
+			const isRendered = () => getRenderedNavigationId() === useStoryStore.getState().navigationId;
+			if (getRenderedNavigationId() !== null && !isRendered() && !useStoryStore.getState().renderDeferred) await new Promise((resolve) => {
+				const off = on("passagerender", () => {
+					if (isRendered()) {
 						off();
 						resolve();
 					}
@@ -6424,7 +6453,7 @@ function SaveManagerContent() {
 	const closeDialog = useContext(DialogCloseContext);
 	const storyData = useStoryStore((s) => s.storyData);
 	const playthroughId = useStoryStore((s) => s.playthroughId);
-	const getSavePayload = useStoryStore((s) => s.getSavePayload);
+	const beginSave = useStoryStore((s) => s.beginSave);
 	const loadFromPayload = useStoryStore((s) => s.loadFromPayload);
 	const ifid = storyData?.ifid ?? "";
 	const refresh = useCallback(async () => {
@@ -6464,7 +6493,7 @@ function SaveManagerContent() {
 	const handleNewSave = async () => {
 		if (!ifid || !playthroughId) return;
 		try {
-			await saveWithHooks(void 0, void 0, getSavePayload, (payload) => createSave(ifid, playthroughId, payload));
+			await saveWithHooks(void 0, void 0, beginSave, (payload) => createSave(ifid, playthroughId, payload));
 			showStatus("Save created");
 			await refresh();
 		} catch {
@@ -6473,7 +6502,7 @@ function SaveManagerContent() {
 	};
 	const handleOverwrite = async (saveId) => {
 		try {
-			await saveWithHooks(void 0, void 0, getSavePayload, async (payload) => {
+			await saveWithHooks(void 0, void 0, beginSave, async (payload) => {
 				if (!await overwriteSave(saveId, payload)) throw new Error("Save not found");
 			});
 			showStatus("Save overwritten");
@@ -7152,7 +7181,7 @@ var CODE_PASSAGES = new Set([
 	"PassageFooter",
 	"PassageDone"
 ]);
-function Passage({ passage, dataTransition }) {
+function Passage({ passage, dataTransition, navigationId }) {
 	const storyData = useStoryStore((s) => s.storyData);
 	const isCodePassage = CODE_PASSAGES.has(passage.name);
 	const [doneReady, setDoneReady] = useState(false);
@@ -7210,9 +7239,9 @@ function Passage({ passage, dataTransition }) {
 	}, [doneReady, donePassage?.content]);
 	const elRef = useRef(null);
 	useLayoutEffect(() => {
-		markPassageRendered(passage.name);
+		if (navigationId !== void 0) markPassageRendered(navigationId);
 		if (elRef.current) emitFromRender("passagerender", passage.name, elRef.current);
-	}, [passage.name]);
+	}, [passage.name, navigationId]);
 	const nobr = passage.tags.includes("nobr");
 	const inner = /* @__PURE__ */ jsxs("div", {
 		ref: elRef,
@@ -7458,7 +7487,8 @@ defineMacro({
 				ref: containerRef,
 				children: effectivePassage && /* @__PURE__ */ jsx(Passage, {
 					passage: effectivePassage,
-					dataTransition: renderDeferred ? "none" : resolvedTypeRef.current
+					dataTransition: renderDeferred ? "none" : resolvedTypeRef.current,
+					navigationId: renderDeferred ? void 0 : displayed.id
 				}, renderDeferred ? "loading" : `nav-${displayed.id}`)
 			})]
 		});

package/package.json

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

package/src/components/Passage.tsx

@@ -42,6 +42,8 @@ export function renderPassageContent(passage: PassageData) {
 interface PassageProps {
   passage: PassageData;
   dataTransition?: string;
+  /** The navigation this passage displays; omitted for placeholders. */
+  navigationId?: number;
 }
 
 const CODE_PASSAGES = new Set([
@@ -51,7 +53,11 @@ const CODE_PASSAGES = new Set([
   'PassageDone',
 ]);
 
-export function Passage({ passage, dataTransition }: PassageProps) {
+export function Passage({
+  passage,
+  dataTransition,
+  navigationId,
+}: PassageProps) {
   const storyData = useStoryStore((s) => s.storyData);
   const isCodePassage = CODE_PASSAGES.has(passage.name);
   const [doneReady, setDoneReady] = useState(false);
@@ -121,11 +127,11 @@ export function Passage({ passage, dataTransition }: PassageProps) {
   // Passage so every navigation that shows a passage mounts a new one.
   const elRef = useRef<HTMLDivElement>(null);
   useLayoutEffect(() => {
-    markPassageRendered(passage.name);
+    if (navigationId !== undefined) markPassageRendered(navigationId);
     if (elRef.current) {
       emitFromRender('passagerender', passage.name, elRef.current);
     }
-  }, [passage.name]);
+  }, [passage.name, navigationId]);
 
   const nobr = passage.tags.includes('nobr');
 

package/src/components/macros/PassageDisplay.tsx

@@ -292,6 +292,7 @@ defineMacro({
               passage={effectivePassage}
               key={renderDeferred ? 'loading' : `nav-${displayed.id}`}
               dataTransition={renderDeferred ? 'none' : resolvedTypeRef.current}
+              navigationId={renderDeferred ? undefined : displayed.id}
             />
           )}
         </div>

package/src/components/macros/SaveManager.tsx

@@ -62,7 +62,7 @@ export function SaveManagerContent() {
 
   const storyData = useStoryStore((s) => s.storyData);
   const playthroughId = useStoryStore((s) => s.playthroughId);
-  const getSavePayload = useStoryStore((s) => s.getSavePayload);
+  const beginSave = useStoryStore((s) => s.beginSave);
   const loadFromPayload = useStoryStore((s) => s.loadFromPayload);
   const ifid = storyData?.ifid ?? '';
 
@@ -108,7 +108,7 @@ export function SaveManagerContent() {
   const handleNewSave = async () => {
     if (!ifid || !playthroughId) return;
     try {
-      await saveWithHooks(undefined, undefined, getSavePayload, (payload) =>
+      await saveWithHooks(undefined, undefined, beginSave, (payload) =>
         createSave(ifid, playthroughId, payload),
       );
       showStatus('Save created');
@@ -120,16 +120,11 @@ export function SaveManagerContent() {
 
   const handleOverwrite = async (saveId: string) => {
     try {
-      await saveWithHooks(
-        undefined,
-        undefined,
-        getSavePayload,
-        async (payload) => {
-          if (!(await overwriteSave(saveId, payload))) {
-            throw new Error('Save not found');
-          }
-        },
-      );
+      await saveWithHooks(undefined, undefined, beginSave, async (payload) => {
+        if (!(await overwriteSave(saveId, payload))) {
+          throw new Error('Save not found');
+        }
+      });
       showStatus('Save overwritten');
       await refresh();
     } catch {

package/src/passage-render-state.ts

@@ -1,14 +1,15 @@
 /**
- * Name of the passage most recently mounted by <Passage> (null until the
- * first render, e.g. when the story interface has no {passage}).
- * Lets Story.waitForActions() tell whether the current passage is on screen.
+ * Navigation id (the store's `navigationId`) of the passage most recently
+ * mounted by <Passage> (null until the first render, e.g. when the story
+ * interface has no {passage}). Lets Story.waitForActions() tell whether the
+ * current navigation is on screen, also when it revisits the passage shown.
  */
-let renderedPassage: string | null = null;
+let renderedNavigationId: number | null = null;
 
-export function markPassageRendered(name: string): void {
-  renderedPassage = name;
+export function markPassageRendered(navigationId: number): void {
+  renderedNavigationId = navigationId;
 }
 
-export function getRenderedPassage(): string | null {
-  return renderedPassage;
+export function getRenderedNavigationId(): number | null {
+  return renderedNavigationId;
 }

package/src/saves/save-manager.ts

@@ -99,9 +99,13 @@ export async function getCurrentPlaythroughId(
 
 /**
  * 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.
+ * before the payload is captured, 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.
+ *
+ * `beginCapture` is called just before the hooks and returns the function
+ * that captures the payload after them, so the capture can tell which
+ * variables the hooks changed (the store's `beginSave`).
  *
  * The hook and capture run synchronously, but an error they throw (a failing
  * hook, an unserializable payload) rejects the returned promise like a failed
@@ -110,12 +114,13 @@ export async function getCurrentPlaythroughId(
 export function saveWithHooks<T>(
   slot: string | undefined,
   custom: Record<string, unknown> | undefined,
-  getPayload: () => SavePayload,
+  beginCapture: () => () => SavePayload,
   write: (payload: SavePayload) => Promise<T>,
 ): Promise<T> {
   try {
+    const capture = beginCapture();
     emit('beforesave', slot, custom);
-    const payload = getPayload();
+    const payload = capture();
     return write(payload).then((result) => {
       emit('aftersave', slot);
       return result;

package/src/store.ts

@@ -297,6 +297,33 @@ function loadedEntryMoment(
   return moment;
 }
 
+/**
+ * Copy the variables that changed between `before` and `after` (the live
+ * variables around the `beforesave` hooks) into the payload's snapshot of the
+ * saved moment. A load restores that snapshot, the state on entering the
+ * passage, and runs the passage again, so data a hook adds to a save would
+ * otherwise be lost on load (#227). Only the payload's copy changes: the live
+ * history keeps the recorded snapshot (#159). Store updates are immutable, so
+ * a value a hook did not touch keeps its identity.
+ */
+function keepHookWrites(
+  payload: SavePayload,
+  before: Record<string, unknown>,
+  after: Record<string, unknown>,
+): void {
+  const moment = payload.history[payload.historyIndex];
+  if (!moment) return;
+  const has = (vars: Record<string, unknown>, key: string) =>
+    Object.prototype.hasOwnProperty.call(vars, key);
+  for (const key of new Set([...Object.keys(before), ...Object.keys(after)])) {
+    if (!has(after, key)) {
+      delete moment.variables[key];
+    } else if (!has(before, key) || after[key] !== before[key]) {
+      moment.variables[key] = deepClone(after[key]);
+    }
+  }
+}
+
 /** Restore or reset PRNG from a history moment's snapshot. */
 function restorePRNGFromMoment(moment: HistoryMoment | undefined): void {
   if (moment?.prng) {
@@ -384,6 +411,12 @@ export interface StoryState {
   clearAllData: () => void;
   deletePlaythrough: (playthroughId: string) => void;
   getSavePayload: () => SavePayload;
+  /**
+   * Start capturing a save, before the `beforesave` hooks run. The returned
+   * function builds the payload after them, and keeps the variables the
+   * hooks changed in the saved moment's snapshot, so a load restores them.
+   */
+  beginSave: () => () => SavePayload;
   /**
    * Replace the game state with a live (deserialized) payload. `slot` is
    * passed to the `beforeload`/`afterload` events.
@@ -799,29 +832,18 @@ export const useStoryStore = create<StoryState>()(
       if (!storyData) return Promise.resolve();
 
       return handled(
-        saveWithHooks(
-          slot,
-          custom,
-          () => get().getSavePayload(),
-          async (payload) => {
-            set((state) => {
-              state.saveError = null;
-            });
-            await quickSave(
-              storyData.ifid,
-              playthroughId,
-              payload,
-              slot,
-              custom,
-            );
-            set((state) => {
-              state.knownSaves = {
-                ...state.knownSaves,
-                [slot ?? '']: true,
-              };
-            });
-          },
-        ).catch((err) => {
+        saveWithHooks(slot, custom, get().beginSave, async (payload) => {
+          set((state) => {
+            state.saveError = null;
+          });
+          await quickSave(storyData.ifid, playthroughId, payload, slot, custom);
+          set((state) => {
+            state.knownSaves = {
+              ...state.knownSaves,
+              [slot ?? '']: true,
+            };
+          });
+        }).catch((err) => {
           console.error('spindle: failed to save', err);
           set((state) => {
             state.saveError =
@@ -997,6 +1019,15 @@ export const useStoryStore = create<StoryState>()(
       };
     },
 
+    beginSave: () => {
+      const before = get().variables;
+      return () => {
+        const payload = get().getSavePayload();
+        keepHookWrites(payload, before, get().variables);
+        return payload;
+      };
+    },
+
     loadFromPayload: (payload: SavePayload, slot?: string) => {
       if (payload.history.length === 0) {
         console.warn('loadFromPayload: rejecting payload with empty history');

package/src/story-api.ts

@@ -30,7 +30,7 @@ import type { MacroDefinition } from './define-macro';
 import { getMacroRegistry as _getMacroRegistry } from './registry';
 import type { MacroMetadata } from './registry';
 import { getActions, getAction, type StoryAction } from './action-registry';
-import { getRenderedPassage } from './passage-render-state';
+import { getRenderedNavigationId } from './passage-render-state';
 import {
   initPRNG,
   isPRNGEnabled,
@@ -548,13 +548,19 @@ function createStoryAPI(): StoryAPI {
       });
       // A navigation can still be rendering: the passage display mounts the
       // new passage from an effect, after a fade-through's outgoing phase.
-      // Its actions exist only once it is mounted, so wait for that.
-      const { currentPassage, renderDeferred } = useStoryStore.getState();
-      const rendered = getRenderedPassage();
-      if (rendered !== null && rendered !== currentPassage && !renderDeferred) {
+      // Its actions exist only once it is mounted, so wait for that. Compare
+      // navigations, not passage names: revisiting the passage shown mounts
+      // it anew (#228).
+      const isRendered = () =>
+        getRenderedNavigationId() === useStoryStore.getState().navigationId;
+      if (
+        getRenderedNavigationId() !== null &&
+        !isRendered() &&
+        !useStoryStore.getState().renderDeferred
+      ) {
         await new Promise<void>((resolve) => {
-          const off = emitterOn('passagerender', (name) => {
-            if (name === useStoryStore.getState().currentPassage) {
+          const off = emitterOn('passagerender', () => {
+            if (isRendered()) {
               off();
               resolve();
             }