@decocms/apps-website 8.0.0 → 8.1.0-next.0

package/README.md

@@ -0,0 +1,26 @@
+# `@decocms/apps-website` (v7 only)
+
+This package is the v7 website app. It has no next-major surface: the next
+major ships no website package, and nothing new is added here.
+
+Website features move to the platform templates (starter sites you copy and
+own) or to built-ins:
+
+| v7 (code in this package) | Next major |
+|---|---|
+| SEO components and sections (`Seo`, `SeoV2`) | SEO helpers in the platform templates. |
+| `Analytics` section (Google Tag Manager, GA4) | A tag manager block in the platform template, owned by the site. |
+| `Stats`, `OneDollarStats` | The built-in `analytics` block. |
+| `website/loaders/secret.ts` | The built-in `secret` block; the migration re-encrypts each v7 secret. |
+| Fonts, theme, video and environment loaders | Platform templates and site code. |
+
+v7 saved-content keys and features that are not code in this package:
+
+| v7 | Next major |
+|---|---|
+| `website/pages/Page.tsx`, `website/flags/multivariate.ts` | The built-in `page` and `multivariate`, through the CLI alias table. |
+| Matchers | The built-in `always`, `never` and `date` matchers; others are site code. |
+| Sitemaps, redirect logic | Platform templates and site code. |
+
+See the next-major docs: *Calling APIs* (what is not in a client),
+*Built-in blocks* and *Migrating from v7*.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@decocms/apps-website",
-  "version": "8.0.0",
+  "version": "8.1.0-next.0",
   "type": "module",
-  "description": "Deco generic-site app: SEO, analytics, theme, and content utilities shared across every commerce backend",
+  "description": "v7 only: Deco website app. The next major ships no website package; website features live in the platform templates.",
   "repository": {
     "type": "git",
     "url": "https://github.com/decocms/blocks.git",
@@ -32,8 +32,8 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "8.0.0",
-    "@decocms/apps-commerce": "8.0.0"
+    "@decocms/blocks": "8.1.0-next.0",
+    "@decocms/apps-commerce": "8.1.0-next.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.

package/src/components/Stats.tsx

@@ -0,0 +1,16 @@
+/**
+ * Moved to `@decocms/blocks/hooks`, and re-exported here so nothing that already imports
+ * `@decocms/apps-website/components/Stats` breaks.
+ *
+ * It moved because `DecoRootLayout` mounts it now: `@decocms/tanstack` importing from an apps
+ * package would add an edge to a dependency graph this repo keeps one-way on purpose, and the
+ * component never needed to be here — it is a `<link>` and a `<script>` pointing at our own
+ * collector, not a vendor integration like `OneDollarStats`.
+ *
+ * Sites do not need to import it at all any more. Set `DECO_ANALYTICS_ENABLED=true`.
+ */
+export {
+	Stats as default,
+	STATS_DEFAULT_ORIGIN as DEFAULT_ORIGIN,
+	type StatsProps as Props,
+} from "@decocms/blocks/hooks";

package/src/loaders/fonts/googleFonts.ts

@@ -1,5 +1,8 @@
+import { withFetchTimeout } from "@decocms/blocks/sdk/fetchTimeout";
 import type { Font } from "../../types";
 
+const timeoutFetch = withFetchTimeout();
+
 interface Props {
 	fonts: GoogleFont[];
 }
@@ -94,13 +97,13 @@ const loader = async (props: Props): Promise<Font> => {
 	};
 
 	const sheets = await Promise.all([
-		fetch(url, { headers: OLD_BROWSER_KEY })
+		timeoutFetch(url, { headers: OLD_BROWSER_KEY })
 			.then((res) => res.text())
 			.catch((e) => {
 				logFontError("OLD_UA", url, e);
 				return "";
 			}),
-		fetch(url, { headers: NEW_BROWSER_KEY })
+		timeoutFetch(url, { headers: NEW_BROWSER_KEY })
 			.then((res) => res.text())
 			.catch((e) => {
 				logFontError("NEW_UA", url, e);

package/src/mod.ts

@@ -108,6 +108,18 @@ export interface Props {
 
 	/** @title Whilelist URL Patterns */
 	whilelistURLs?: string[];
+
+	/**
+	 * @title renderJson
+	 * @description Structured JSON rendering of pages for the mobile app (?renderJson).
+	 */
+	renderJson?: {
+		/**
+		 * @title Ignored Sections
+		 * @description App-owned sections excluded from the ?renderJson response, matched by resolveType suffix (e.g. "SeoV2.tsx"). Site-owned sections should prefer `export const renderJson = false` in their own file.
+		 */
+		sectionsToIgnore?: string[];
+	};
 }
 
 /** Alias for site app bridges that extend website Props. */