diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx index 372c851..7c82858 100644 --- a/src/platform/StackedRouter.tsx +++ b/src/platform/StackedRouter.tsx @@ -194,11 +194,13 @@ function animateOpen(element: HTMLElement) { function serializableStack(stack: readonly StackFrame[]) { const frames = unwrap(stack); return frames.map((fr) => { - return { - path: fr.path, - rootId: fr.rootId, - state: fr.state, - }; + return fr.animateClose || fr.animateOpen + ? { + path: fr.path, + rootId: fr.rootId, + state: fr.state, + } + : fr; }); } @@ -258,11 +260,6 @@ const StackedRouter: Component = (oprops) => { } }); - /* createEffect(() => { - const length = stack.length; - console.debug("stack is changed", length, unwrap(stack)); - }); */ - createRenderEffect(() => { if (stack.length === 0) { pushFrame(window.location.pathname); @@ -271,8 +268,12 @@ const StackedRouter: Component = (oprops) => { createRenderEffect(() => { makeEventListener(window, "popstate", (event) => { - if (event.state && stack.length !== event.state.length) { + if (!event.state) return; + + if (stack.length === 0) { mutStack(event.state); + } else if (stack.length > event.state.length) { + popFrame(stack.length - event.state.length); } }); }); @@ -358,10 +359,7 @@ const StackedRouter: Component = (oprops) => { reenterableAnimation.effect!.getComputedTiming(); const totalTime = (delay || 0) + Number(activeDuration); - if ( - Number(reenterableAnimation.currentTime) / totalTime > - 0.1 - ) { + if (Number(reenterableAnimation.currentTime) / totalTime > 0.1) { reenterableAnimation.addEventListener("finish", () => { onlyPopFrame(1); });