@decocms/tanstack 7.77.4 → 7.77.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/tanstack",
-  "version": "7.77.4",
+  "version": "7.77.6",
   "type": "module",
   "description": "Deco framework binding for TanStack Start + Cloudflare Workers",
   "repository": {
@@ -27,9 +27,9 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.77.4",
-    "@decocms/blocks-admin": "7.77.4",
-    "@decocms/blocks-cli": "7.77.4",
+    "@decocms/blocks": "7.77.6",
+    "@decocms/blocks-admin": "7.77.6",
+    "@decocms/blocks-cli": "7.77.6",
     "@deco-cx/warp-node": "^0.3.16",
     "fast-json-patch": "^3.1.0",
     "ws": "^8.18.0"

package/src/hooks/DecoPageRenderer.tsx

@@ -247,6 +247,34 @@ interface DeferredSectionWrapperProps {
   }) => Promise<ResolvedSection | null>;
 }
 
+/**
+ * Whether an observation should trigger the deferred load.
+ *
+ * `IntersectionObserver` only fires on ENTERING. A section the reader is
+ * already past when the observer attaches gets exactly one callback, with
+ * `isIntersecting: false`, and never fires again while the reader keeps
+ * scrolling down — so it stays a skeleton for the rest of the visit. That is
+ * reachable on every load that does not start at the top: browser scroll
+ * restoration on reload, back/forward, an `#anchor`, or a programmatic
+ * `scrollTo`.
+ *
+ * `bottom < 0` means the element sits entirely above the viewport. It cannot
+ * collide with the thundering herd the frame gate in the observer effect
+ * guards against: that herd is sections BELOW a stale scroll offset, and by
+ * the time the observer attaches the router has reset scroll to the top,
+ * where nothing is above the viewport.
+ *
+ * Exported for tests — jsdom has no layout and never fires a real
+ * `IntersectionObserver`, so the interesting case cannot be produced by
+ * rendering the component.
+ */
+export function shouldLoadOnObservation(entry: {
+  isIntersecting: boolean;
+  boundingClientRect: { bottom: number };
+}): boolean {
+  return entry.isIntersecting || entry.boundingClientRect.bottom < 0;
+}
+
 function DeferredSectionWrapper({
   deferred,
   pagePath,
@@ -346,7 +374,8 @@ function DeferredSectionWrapper({
       if (triggered.current) return;
       observer = new IntersectionObserver(
         ([entry]) => {
-          if (entry?.isIntersecting && !triggered.current) {
+          if (!entry || triggered.current) return;
+          if (shouldLoadOnObservation(entry)) {
             observer?.disconnect();
             load();
           }

package/src/hooks/deferredObserverPassed.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+
+import { shouldLoadOnObservation } from "./DecoPageRenderer";
+
+/**
+ * Guards the "reader is already past the section" branch of
+ * `DeferredSectionWrapper`'s IntersectionObserver callback.
+ *
+ * `IntersectionObserver` fires on ENTERING. The observer is attached one frame
+ * after hydration (see `deferredObserverTiming.test.tsx` for why), and at that
+ * moment the reader is not necessarily at the top of the document: browser
+ * scroll restoration on reload, back/forward, an `#anchor`, or a programmatic
+ * `scrollTo` all land below the fold. A deferred section left above the
+ * viewport then receives exactly one callback with `isIntersecting: false` and
+ * never fires again while the reader keeps going down — it stays a skeleton
+ * for the whole visit.
+ *
+ * Measured on a storefront `/prime` before the fix: landing at `y=5200` with
+ * the product shelf at 3164–3829 left the shelf empty at 8s, 43s and 83s, and
+ * it only filled after scrolling back up into it.
+ *
+ * jsdom has no layout and never fires a real IntersectionObserver, so this
+ * asserts the decision directly rather than rendering the component.
+ */
+const rect = (bottom: number) => ({ bottom });
+
+describe("deferred observer — section already scrolled past", () => {
+  it("loads a section left above the viewport", () => {
+    // Reader reloaded below it; the element is entirely above the fold.
+    expect(shouldLoadOnObservation({ isIntersecting: false, boundingClientRect: rect(-400) })).toBe(
+      true,
+    );
+  });
+
+  it("loads a section in view", () => {
+    expect(shouldLoadOnObservation({ isIntersecting: true, boundingClientRect: rect(500) })).toBe(
+      true,
+    );
+  });
+
+  it("does NOT load a section still below the viewport", () => {
+    // The normal case deferral exists for — must keep waiting for the scroll,
+    // otherwise every below-the-fold section fires its POST on mount.
+    expect(shouldLoadOnObservation({ isIntersecting: false, boundingClientRect: rect(2400) })).toBe(
+      false,
+    );
+  });
+
+  it("does NOT load a section sitting exactly at the viewport top", () => {
+    // bottom === 0 is the boundary: nothing of it is visible yet, but it has
+    // not been passed either. `rootMargin: 300px` means the real observer
+    // already reports this one as intersecting, so the predicate must not
+    // double-count it as passed.
+    expect(shouldLoadOnObservation({ isIntersecting: false, boundingClientRect: rect(0) })).toBe(
+      false,
+    );
+  });
+});

package/src/sdk/workerEntry.test.ts

@@ -15,6 +15,7 @@ import {
   DEFAULT_SECURITY_HEADERS,
   detectLocationMatcher,
   injectGeoCookies,
+  setCookieIdentity,
 } from "./workerEntry";
 
 const EMPTY_ENV = {};
@@ -1031,3 +1032,53 @@ describe("fast-deploy hydration ordering", () => {
     }
   });
 });
+
+describe("Set-Cookie deduplication keys on name + Domain + Path", () => {
+  it("setCookieIdentity: same name, different scope → different identities", () => {
+    expect(setCookieIdentity("a=1; Path=/")).not.toBe(
+      setCookieIdentity("a=1; Path=/; Domain=example.com"),
+    );
+    expect(setCookieIdentity("a=1; Path=/; Domain=www.example.com")).not.toBe(
+      setCookieIdentity("a=1; Path=/; Domain=example.com"),
+    );
+    expect(setCookieIdentity("a=1; Path=/")).not.toBe(setCookieIdentity("a=1; Path=/account"));
+  });
+
+  it("setCookieIdentity: Domain is case-insensitive, a leading dot is ignored, value is not part of the key", () => {
+    expect(setCookieIdentity("a=1; Path=/; Domain=Example.COM")).toBe(
+      setCookieIdentity("a=2; path=/; domain=.example.com; Secure"),
+    );
+  });
+
+  it("keeps every scope of a multi-scope clear (sign-out) and still collapses true duplicates", async () => {
+    setBlocks({});
+    const clears = [
+      "VtexIdclientAutCookie=; Path=/; Max-Age=0",
+      "VtexIdclientAutCookie=; Path=/; Max-Age=0; Domain=www.example.com",
+      "VtexIdclientAutCookie=; Path=/; Max-Age=0; Domain=example.com",
+    ];
+    const entry = {
+      fetch: async () => {
+        const headers = new Headers({ "content-type": "text/plain" });
+        // A true duplicate (same name, same scope): only the last one survives.
+        headers.append("set-cookie", "checkout.vtex.com=__ofid=old; Path=/");
+        for (const sc of clears) headers.append("set-cookie", sc);
+        headers.append("set-cookie", "checkout.vtex.com=__ofid=new; Path=/");
+        return new Response("ok", { status: 200, headers });
+      },
+    };
+    const worker = createDecoWorkerEntry(entry, { observability: false });
+    const res = await worker.fetch(
+      new Request("https://www.example.com/telesales/sign-out"),
+      EMPTY_ENV,
+      MOCK_CTX,
+    );
+    const out = (res.headers as unknown as { getSetCookie: () => string[] }).getSetCookie();
+    // Order is not part of the contract; the set of surviving headers is.
+    expect(out).toHaveLength(4);
+    expect(out).toEqual(
+      expect.arrayContaining([...clears, "checkout.vtex.com=__ofid=new; Path=/"]),
+    );
+    expect(out).not.toContain("checkout.vtex.com=__ofid=old; Path=/");
+  });
+});

package/src/sdk/workerEntry.ts

@@ -930,20 +930,45 @@ function stripSafeCookiesForCache(response: Response, safeCookieSet: Set<string>
 }
 
 /**
- * Deduplicate Set-Cookie headers — keep only the LAST occurrence of
- * each cookie name. Multiple layers (VTEX middleware, invoke handlers,
- * etc.) may independently append the same cookie.
+ * Identity of a `Set-Cookie` header for deduplication: the browser keys its
+ * cookie jar by name + Domain + Path (RFC 6265 §5.3 step 11), so two headers
+ * that differ in scope address two different cookies — a clear for the
+ * host-only cookie does not touch the `Domain=example.com` one. The domain is
+ * case-insensitive and a leading dot is ignored (§5.2.3); the path is
+ * compared as sent.
+ */
+export function setCookieIdentity(setCookie: string): string {
+  const [nameValue = "", ...attrs] = setCookie.split(";");
+  const eqIdx = nameValue.indexOf("=");
+  const name = eqIdx > 0 ? nameValue.slice(0, eqIdx).trim() : nameValue.trim();
+  let domain = "";
+  let path = "";
+  for (const attr of attrs) {
+    const sep = attr.indexOf("=");
+    const key = (sep >= 0 ? attr.slice(0, sep) : attr).trim().toLowerCase();
+    const value = sep >= 0 ? attr.slice(sep + 1).trim() : "";
+    if (key === "domain") domain = value.replace(/^\./, "").toLowerCase();
+    else if (key === "path") path = value;
+  }
+  return `${name}\u0000${domain}\u0000${path}`;
+}
+
+/**
+ * Deduplicate Set-Cookie headers — keep only the LAST occurrence of each
+ * cookie identity (name + Domain + Path, see {@link setCookieIdentity}).
+ * Multiple layers (VTEX middleware, invoke handlers, etc.) may independently
+ * append the same cookie. Keying by name alone collapsed deliberate clears of
+ * the same cookie under different scopes (host-only / `Domain=host` /
+ * `Domain=parent`) into whichever came last, leaving the other scopes alive.
  */
 function deduplicateSetCookies(response: Response): void {
   const setCookies = (response.headers as any).getSetCookie?.() as string[] | undefined;
   if (!setCookies || setCookies.length <= 1) return;
 
-  // Build map: cookie name → last Set-Cookie value
+  // Build map: cookie identity → last Set-Cookie value
   const seen = new Map<string, string>();
   for (const sc of setCookies) {
-    const eqIdx = sc.indexOf("=");
-    const name = eqIdx > 0 ? sc.slice(0, eqIdx).trim() : sc;
-    seen.set(name, sc);
+    seen.set(setCookieIdentity(sc), sc);
   }
 
   // If no duplicates, nothing to do