@decocms/apps-website 7.65.1 → 7.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/apps-website",
-  "version": "7.65.1",
+  "version": "7.66.0",
   "type": "module",
   "description": "Deco generic-site app: SEO, analytics, theme, and content utilities shared across every commerce backend",
   "repository": {
@@ -32,8 +32,8 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.65.1",
-    "@decocms/apps-commerce": "7.65.1"
+    "@decocms/blocks": "7.66.0",
+    "@decocms/apps-commerce": "7.66.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/OneDollarStats.test.ts

@@ -216,3 +216,44 @@ describe("initOneDollarStats", () => {
 		expect(event).toHaveBeenCalledWith("ev", { keep: "x" });
 	});
 });
+
+describe("async tracker readiness", () => {
+	// The tracker <script> is `async`, so it can resolve after the 10s poll
+	// window closes. Its `load` event is the second, unbounded trigger.
+	let tracker: HTMLScriptElement;
+
+	beforeEach(() => {
+		tracker = document.createElement("script");
+		tracker.id = "onedollarstats-tracker";
+		document.head.appendChild(tracker);
+	});
+
+	afterEach(() => {
+		tracker.remove();
+	});
+
+	it("fires the initial pageview on the tracker's load event after the poll window closes", () => {
+		const view = vi.fn();
+		initOneDollarStats();
+
+		// Poll window (200 * 50ms) elapses with no stonks — pageview would be lost.
+		vi.advanceTimersByTime(11_000);
+		expect(view).not.toHaveBeenCalled();
+
+		(window as Window & { stonks?: unknown }).stonks = { view };
+		tracker.dispatchEvent(new Event("load"));
+
+		expect(view).toHaveBeenCalledTimes(1);
+	});
+
+	it("does not double-fire when both the poll and the load event resolve", () => {
+		const view = vi.fn();
+		initOneDollarStats();
+
+		(window as Window & { stonks?: unknown }).stonks = { view };
+		vi.advanceTimersByTime(100); // poll wins
+		tracker.dispatchEvent(new Event("load"));
+
+		expect(view).toHaveBeenCalledTimes(1);
+	});
+});

package/src/components/OneDollarStats.tsx

@@ -24,10 +24,11 @@
  * 2. **`useEffect` for client logic.** All side-effects (initial pageview,
  *    pushState wrap, DECO event subscribe) run inside a `useEffect`,
  *    which fires after hydration. By then `<ScriptOnce>` in
- *    `DecoRootLayout` has bootstrapped `window.DECO.events`, and the SDK
- *    `<script>` (rendered as a sibling) has loaded and set
- *    `window.stonks`. No inline `dangerouslySetInnerHTML` snippet, no
- *    fragile script-execution-order dependency.
+ *    `DecoRootLayout` has bootstrapped `window.DECO.events`. The SDK
+ *    `<script>` (rendered as a sibling) is `async`, so `window.stonks`
+ *    may or may not exist yet — see (4) and (5). No inline
+ *    `dangerouslySetInnerHTML` snippet, no fragile script-execution-order
+ *    dependency.
  *
  * 3. **Module-level guards.** `window.DECO.events.subscribe()` returns no
  *    unsubscribe handle, so we cannot clean up on unmount. We use a
@@ -39,6 +40,18 @@
  *    load). We poll every 50 ms for up to 10 s. Production: resolves
  *    within one tick.
  *
+ * 5. **The tracker `<script>` is `async`, never `defer`.** A third-party
+ *    analytics tag must not be able to hold the host page's lifecycle
+ *    hostage: with `defer`, an unreachable `s.lilstts.com` (adblock,
+ *    blocked route, DNS/CDN outage) delays DOMContentLoaded/load until
+ *    the TCP timeout — a real client saw the browser spin for ~5 min
+ *    with the page already painted. `async` is non-blocking for both
+ *    parsing and DOMContentLoaded. Because the tracker can then resolve
+ *    at any point, the first pageview is fired from whichever comes
+ *    first: the readiness poll, or the tracker's own `load` event
+ *    (which also covers a tracker that arrives after the 10 s poll
+ *    window closes). See `deco-cx/apps@e0af145` for the Fresh-side fix.
+ *
  * ## Behavioural parity vs Fresh `deco-cx/apps`
  *
  * Mirrors the Path B snippet (`analytics/loaders/OneDollarScript.ts`):
@@ -69,6 +82,9 @@ export interface Props {
 	staticScriptUrl?: string;
 }
 
+/** DOM id of the tracker `<script>`; we listen to its `load` event. */
+const TRACKER_ID = "onedollarstats-tracker";
+
 export const DEFAULT_COLLECTOR_ADDRESS = "https://d.lilstts.com/events";
 export const DEFAULT_ANALYTICS_SCRIPT_URL = "https://s.lilstts.com/deco.js";
 
@@ -91,12 +107,12 @@ function OneDollarStats({ collectorAddress, staticScriptUrl }: Props) {
 			<link rel="dns-prefetch" href={collector} />
 			<link rel="preconnect" href={collector} crossOrigin="anonymous" />
 			<script
-				id="onedollarstats-tracker"
+				id={TRACKER_ID}
 				data-autocollect="false"
 				data-hash-routing="true"
 				data-url={collector}
 				src={staticScript}
-				defer
+				async
 			/>
 			<OneDollarStatsClient />
 		</>
@@ -199,6 +215,14 @@ function whenReady<T>(
 	}, intervalMs);
 }
 
+type StonksView = NonNullable<NonNullable<Window["stonks"]>["view"]>;
+
+function getStonksView(): StonksView | undefined {
+	return typeof window.stonks?.view === "function"
+		? window.stonks.view.bind(window.stonks)
+		: undefined;
+}
+
 /**
  * Wire up the analytics integration. Idempotent — only the first call has
  * any effect.
@@ -212,16 +236,29 @@ export function initOneDollarStats(): void {
 	const flags = readFlagsFromCookie();
 
 	// 1) Initial pageview + SPA nav tracking, with flag enrichment.
-	whenReady(
-		() =>
-			typeof window.stonks?.view === "function"
-				? window.stonks.view.bind(window.stonks)
-				: undefined,
-		(view) => {
-			view(flags);
-			wrapHistoryPushState(() => view(flags));
-			addEventListener("popstate", () => view(flags));
+	//
+	// The tracker is `async`, so `window.stonks` may land before hydration,
+	// after it, or after the poll window closes. Two independent triggers,
+	// first one wins (`started` guard) — otherwise a slow tracker silently
+	// drops the landing pageview, since `data-autocollect="false"` means the
+	// SDK will never send one for us.
+	let started = false;
+	const start = (view: StonksView) => {
+		if (started) return;
+		started = true;
+		view(flags);
+		wrapHistoryPushState(() => view(flags));
+		addEventListener("popstate", () => view(flags));
+	};
+
+	whenReady(getStonksView, start);
+	document.getElementById(TRACKER_ID)?.addEventListener(
+		"load",
+		() => {
+			const view = getStonksView();
+			if (view) start(view);
 		},
+		{ once: true },
 	);
 
 	// 2) Forward DECO events to stonks.event with flag enrichment.