fix: avoid reload for user-code history changes (#3045) (#3048)

The Fresh partials popstate handler causes page reloads when user code
makes use of navigation history state. This can lead to a loss of user
data in a browsing context.
To fix this behavior, FreshHistoryState now has a flag which validates
partials functionality/explicitly opts-in to any partial related
location management.

Author: ch2i5

src/runtime/client/partials.ts

@@ -27,7 +27,11 @@ export const PARTIAL_ATTR = "f-partial";
 
 class NoPartialsError extends Error {}
 
+// Fresh partials history updates set the fClientNav flag
+// and prevent reloads in the popstate handler when
+// user-code triggers history navigation events.
 export interface FreshHistoryState {
+  fClientNav: boolean;
   index: number;
   scrollX: number;
   scrollY: number;
@@ -43,6 +47,7 @@ function checkClientNavEnabled(el: HTMLElement) {
 let index = history.state?.index || 0;
 if (!history.state) {
   const state: FreshHistoryState = {
+    fClientNav: true,
     index,
     scrollX,
     scrollY,
@@ -56,6 +61,7 @@ function maybeUpdateHistory(nextUrl: URL) {
   // "refresh" the current page.
   if (nextUrl.href !== globalThis.location.href) {
     const state: FreshHistoryState = {
+      fClientNav: true,
       index,
       scrollX: globalThis.scrollX,
       scrollY: globalThis.scrollY,
@@ -164,6 +170,9 @@ addEventListener("popstate", async (e) => {
     }
     return;
   }
+  // Do nothing if Fresh navigation is not explicitly opted-in.
+  // Other applications might manage scrollRestoration individually.
+  if (!e.state.fClientNav) return;
 
   const state: FreshHistoryState = history.state;
   const nextIdx = state.index ?? index + 1;

tests/partials_test.tsx

@@ -2712,3 +2712,35 @@ Deno.test({
     });
   },
 });
+
+Deno.test({
+  name: "partials - independent user popstate",
+  fn: async () => {
+    const app = testApp()
+      .get("/", (ctx) => {
+        return ctx.render(
+          <Doc>
+            <div class="container">
+            </div>
+          </Doc>,
+        );
+      });
+
+    await withBrowserApp(app, async (page, address) => {
+      await page.goto(address, { waitUntil: "load" });
+      await page.locator<HTMLDivElement>(".container").evaluate((el) => {
+        const dynamicContent = document.createElement("span");
+        dynamicContent.classList.add("dynamic-content");
+        el.appendChild(dynamicContent);
+      });
+      await page.evaluate(() => {
+        window.history.replaceState({ custom: true }, "", "#");
+        window.history.pushState({ custom: true }, "", "#custom");
+      });
+      // Fresh partials popstate gets called on back navigation and
+      // should exit early/avoid reload due to custom user history entries
+      await page.evaluate(() => window.history.go(-1));
+      await page.locator(".dynamic-content").wait();
+    });
+  },
+});