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

package/src/loaders/legacy.ts

@@ -33,6 +33,7 @@ import {
 	toProduct,
 	toProductPage,
 } from "../utils/transform";
+import type { ProductOptions } from "../utils/transform";
 import type { LegacyFacet, LegacyItem, LegacyProduct, LegacySort, PageType } from "../utils/types";
 
 // ---------------------------------------------------------------------------
@@ -158,6 +159,23 @@ export interface LegacyProductListOptions {
 	query: LegacyProductListQuery;
 	baseUrl: string;
 	priceCurrency?: string;
+	/**
+	 * Payload-shaping options, forwarded verbatim to `toProduct`. Same set the
+	 * PLP loader already accepts, and for the same reason: a shelf renders a
+	 * CARD, but this loader built the full product for every entry. Measured on
+	 * a real home shelf (`count: 28`), 1095 KB — 39.1 KB per product, of which
+	 * `isVariantOf` 19.1 KB and the 48-rung `offers.priceSpecification` 12.8 KB.
+	 *
+	 * All default to undefined, which keeps the previous output byte for byte.
+	 * See the matching fields on {@link ProductOptions}.
+	 */
+	leanVariants?: ProductOptions["leanVariants"];
+	displayedVariantId?: ProductOptions["displayedVariantId"];
+	variantPropertyNames?: ProductOptions["variantPropertyNames"];
+	variantIncludeImage?: ProductOptions["variantIncludeImage"];
+	variantIncludeInventory?: ProductOptions["variantIncludeInventory"];
+	maxImages?: ProductOptions["maxImages"];
+	priceSpecifications?: ProductOptions["priceSpecifications"];
 }
 
 function isCollectionQuery(
@@ -233,7 +251,18 @@ function queryToSearchParams(
  * Ported from: vtex/loaders/legacy/productList.ts
  */
 export async function legacyProductList(opts: LegacyProductListOptions): Promise<Product[] | null> {
-	const { query, baseUrl, priceCurrency = "BRL" } = opts;
+	const {
+		query,
+		baseUrl,
+		priceCurrency = "BRL",
+		leanVariants,
+		displayedVariantId,
+		variantPropertyNames,
+		variantIncludeImage,
+		variantIncludeInventory,
+		maxImages,
+		priceSpecifications,
+	} = opts;
 	const searchArgs = queryToSearchParams(query);
 	const qs = buildSearchParams(searchArgs);
 
@@ -254,7 +283,17 @@ export async function legacyProductList(opts: LegacyProductListOptions): Promise
 	};
 
 	let products = vtexProducts.map((p) =>
-		toProduct(p, preferredSKU(p.items), 0, { baseUrl, priceCurrency }),
+		toProduct(p, preferredSKU(p.items), 0, {
+			baseUrl,
+			priceCurrency,
+			leanVariants,
+			displayedVariantId,
+			variantPropertyNames,
+			variantIncludeImage,
+			variantIncludeInventory,
+			maxImages,
+			priceSpecifications,
+		}),
 	);
 
 	if (isSkuIdsQuery(query)) {
@@ -342,6 +381,28 @@ export interface LegacyPLPOptions {
 	/** Ignore case when checking if a facet is selected */
 	ignoreCaseSelected?: boolean;
 	includeOriginalAttributes?: string[];
+	/**
+	 * Build `isVariantOf.hasVariant[]` with the lean variant transform instead of
+	 * a full nested `toProduct` per SKU. Off by default (unchanged behaviour).
+	 *
+	 * `productDetailsPage` (intelligent search) already exposes this, but the
+	 * legacy PLP never plumbed it — so a listing always paid the full variant
+	 * tree. Measured on a real store (36 products, 26 variants each): ~9.6 MB
+	 * per page, 96% of each product in `isVariantOf.hasVariant`, because every
+	 * variant carries the whole 48-entry payment ladder plus a copy of the
+	 * parent `description` — none of which a listing card reads.
+	 */
+	leanVariants?: boolean;
+	/** Keep the ladder on the ONE variant the card renders — see ProductOptions.displayedVariantId. */
+	displayedVariantId?: ProductOptions["displayedVariantId"];
+	/** Forwarded to the lean variant transform. */
+	variantPropertyNames?: Set<string>;
+	variantIncludeImage?: boolean;
+	variantIncludeInventory?: boolean;
+	/** Cap image[] to the first N entries — see ProductOptions.maxImages. */
+	maxImages?: number;
+	/** Rewrite priceSpecification on emitted offers — see ProductOptions.priceSpecifications. */
+	priceSpecifications?: ProductOptions["priceSpecifications"];
 }
 
 /**
@@ -362,6 +423,13 @@ export async function legacyProductListingPage(
 		ignoreCaseSelected,
 		useCollectionName,
 		includeOriginalAttributes,
+		leanVariants,
+		displayedVariantId,
+		variantPropertyNames,
+		variantIncludeImage,
+		variantIncludeInventory,
+		maxImages,
+		priceSpecifications,
 	} = opts;
 
 	const currentPageOffset = opts.pageOffset ?? 1;
@@ -447,6 +515,13 @@ export async function legacyProductListingPage(
 			baseUrl,
 			priceCurrency,
 			includeOriginalAttributes,
+			leanVariants,
+			displayedVariantId,
+			variantPropertyNames,
+			variantIncludeImage,
+			variantIncludeInventory,
+			maxImages,
+			priceSpecifications,
 		}),
 	);
 

package/src/loaders/productListFull.ts

@@ -7,7 +7,7 @@
  */
 
 import type { Product } from "@decocms/apps-commerce/types";
-import { getVtexConfig, intelligentSearch, toFacetPath } from "../client";
+import { getVtexConfig, intelligentSearch, storefrontBaseUrl, toFacetPath } from "../client";
 import { pickSku, sortProducts, toProduct } from "../utils/transform";
 import type { Product as ProductVTEX } from "../utils/types";
 
@@ -135,9 +135,7 @@ export default async function vtexProductList(props: ProductListProps): Promise<
 		const data = await intelligentSearch<{ products: ProductVTEX[] }>(endpoint, params);
 
 		const vtexProducts = data.products ?? [];
-		const baseUrl = config.publicUrl
-			? `https://${config.publicUrl}`
-			: `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
+		const baseUrl = storefrontBaseUrl(config);
 
 		let products = vtexProducts.map((p) => {
 			const fetchedSkus = ids ? new Set(ids) : null;

package/src/loaders/workflow/products.ts

@@ -4,7 +4,7 @@
  */
 
 import type { Product } from "@decocms/apps-commerce/types";
-import { getVtexConfig, intelligentSearch, toFacetPath } from "../../client";
+import { getVtexConfig, intelligentSearch, storefrontBaseUrl, toFacetPath } from "../../client";
 import { pickSku, toProduct } from "../../utils/transform";
 import type { Product as ProductVTEX } from "../../utils/types";
 
@@ -49,9 +49,7 @@ export default async function vtexWorkflowProducts(
 		const data = await intelligentSearch<{ products: ProductVTEX[] }>(endpoint, params);
 
 		const products = data.products ?? [];
-		const baseUrl = config.publicUrl
-			? `https://${config.publicUrl}`
-			: `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
+		const baseUrl = storefrontBaseUrl(config);
 
 		return products.map((p) => {
 			const sku = pickSku(p);

package/src/middleware.cacheHeaders.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { vtexMiddleware } from "./mod";
+
+/**
+ * The VTEX app middleware wraps the framework's entire edge-cache layer, so it
+ * is the last writer of Cache-Control on every response — including cache HITs.
+ * These tests pin the two things that made that dangerous.
+ */
+
+// A response as the framework's cache layer would hand it over: public headers
+// resolved from the page's cache profile, plus the CDN header.
+function cachedResponse(): Response {
+  return new Response("page", {
+    headers: {
+      "Cache-Control": "public, max-age=120, s-maxage=900, stale-while-revalidate=1800",
+      "CDN-Cache-Control": "public, max-age=900",
+    },
+  });
+}
+
+const next = async () => cachedResponse();
+
+describe("vtexMiddleware cache headers", () => {
+  it("leaves the cache layer's headers alone for an anonymous request", async () => {
+    const res = await vtexMiddleware(new Request("https://store.com/"), next);
+    // Used to be downgraded to vtexCacheControl's generic `s-maxage=60`,
+    // throwing away the profile the cache layer had resolved.
+    expect(res.headers.get("Cache-Control")).toContain("s-maxage=900");
+  });
+
+  it("forces private headers and clears the CDN header when logged in", async () => {
+    const req = new Request("https://store.com/", {
+      // extractVtexContext treats any VtexIdclientAutCookie* as authenticated.
+      headers: { cookie: "VtexIdclientAutCookie_store=abc123" },
+    });
+    const res = await vtexMiddleware(req, next);
+
+    expect(res.headers.get("Cache-Control")).toContain("no-store");
+    // Cloudflare gives CDN-Cache-Control precedence, so leaving the public
+    // value behind would cache a personalized page at the CDN regardless of
+    // the private Cache-Control next to it.
+    expect(res.headers.get("CDN-Cache-Control")).toBeNull();
+  });
+});

package/src/mod.ts

@@ -96,10 +96,26 @@ export interface VtexState {
 // Middleware
 // -------------------------------------------------------------------------
 
-const vtexMiddleware: AppMiddleware = async (request, next) => {
+export const vtexMiddleware: AppMiddleware = async (request, next) => {
 	const ctx = extractVtexContext(request);
 	const response = await next();
-	response.headers.set("Cache-Control", vtexCacheControl(ctx));
+
+	// This middleware wraps the framework's whole edge-cache layer, so it is the
+	// LAST writer of Cache-Control — including on a cache HIT. It used to
+	// overwrite unconditionally, which downgraded a home page the cache layer had
+	// resolved as `s-maxage=900` to vtexCacheControl's generic `s-maxage=60`.
+	//
+	// Now it only speaks up for the case it actually knows better about: a
+	// personalized request, which must not be cached anywhere. And when it does,
+	// it clears CDN-Cache-Control too — otherwise a response can go out as
+	// `Cache-Control: private, no-store` alongside `CDN-Cache-Control: public,
+	// max-age=300`, and Cloudflare gives the CDN header precedence. Same pairing
+	// the worker's own bypasses use, and utils/proxy.ts's hardenProxyCacheHeaders.
+	if (ctx.isLoggedIn || ctx.hasCustomPricing) {
+		response.headers.set("Cache-Control", vtexCacheControl(ctx));
+		response.headers.delete("CDN-Cache-Control");
+	}
+
 	propagateISCookies(ctx, response);
 	return response;
 };

package/src/utils/__tests__/cookieSanitizer.test.ts

@@ -19,7 +19,7 @@ describe("sanitizeOutboundCookieHeader", () => {
 		expect(cookies).toBe("checkout.vtex.com=__ofid=abc; vtex_segment=eyJ0b2tlbiI6IjEyMyJ9");
 	});
 
-	it("drops a cookie whose value contains non-ASCII bytes — the casaevideo repro", () => {
+	it("drops a cookie whose value contains non-ASCII bytes — a production VTEX storefront repro", () => {
 		// `á` is the UTF-8 encoding of `á` interpreted as Latin-1 — bytes 0xC3 0xA1.
 		// VTEX's janus gateway returns 503 deterministically when this reaches it.
 		const raw = "checkout.vtex.com=__ofid=abc; category_click=Eletroportáteis; vtex_segment=ok";

package/src/utils/__tests__/storefrontBaseUrl.test.ts

@@ -0,0 +1,61 @@
+import { RequestContext } from "@decocms/blocks/sdk/requestContext";
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { configureVtex, storefrontBaseUrl } from "../../client";
+
+const ACCOUNT = { account: "examplestore" } as const;
+
+describe("storefrontBaseUrl", () => {
+	beforeEach(() => {
+		configureVtex({ ...ACCOUNT });
+	});
+
+	it("uses the origin of the request being served", () => {
+		configureVtex({ ...ACCOUNT, publicUrl: "https://secure.example.com/" });
+
+		const origin = RequestContext.run(new Request("https://www.example.com/camisas?page=2"), () =>
+			storefrontBaseUrl(),
+		);
+
+		expect(origin).toBe("https://www.example.com");
+	});
+
+	it("never returns the double-scheme origin a full publicUrl used to produce", () => {
+		// `https://${publicUrl}` on "https://secure.example.com/" parsed with
+		// host "https", so every product URL came out as https://https/<slug>/p.
+		configureVtex({ ...ACCOUNT, publicUrl: "https://secure.example.com/" });
+
+		const origin = storefrontBaseUrl();
+
+		expect(origin).toBe("https://secure.example.com");
+		expect(new URL("/camisa-paris/p", origin).href).toBe("https://secure.example.com/camisa-paris/p");
+	});
+
+	it("accepts a publicUrl stored without a scheme", () => {
+		configureVtex({ ...ACCOUNT, publicUrl: "secure.example.com" });
+
+		expect(storefrontBaseUrl()).toBe("https://secure.example.com");
+	});
+
+	it("falls back to the account host when publicUrl is absent", () => {
+		expect(storefrontBaseUrl()).toBe("https://examplestore.vtexcommercestable.com.br");
+	});
+
+	it("honours a configured domain in the account-host fallback", () => {
+		configureVtex({ ...ACCOUNT, domain: "com" });
+
+		expect(storefrontBaseUrl()).toBe("https://examplestore.vtexcommercestable.com");
+	});
+
+	it("falls back to the account host rather than publish an unparseable publicUrl", () => {
+		configureVtex({ ...ACCOUNT, publicUrl: "://" });
+
+		expect(storefrontBaseUrl()).toBe("https://examplestore.vtexcommercestable.com.br");
+	});
+
+	it("returns an origin with no trailing slash", () => {
+		configureVtex({ ...ACCOUNT, publicUrl: "https://secure.example.com/" });
+
+		expect(storefrontBaseUrl()).not.toMatch(/\/$/);
+	});
+});