@rohal12/spindle 0.51.1 → 0.51.2

package/dist/pkg/headless.js

@@ -4825,16 +4825,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 +5129,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();
 					}
@@ -7152,7 +7152,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 +7210,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 +7458,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.2",
   "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/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/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();
             }