@decocms/apps 1.1.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/apps",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "type": "module",
   "description": "Deco commerce apps for TanStack Start - Shopify, VTEX, commerce types, analytics utils",
   "exports": {
@@ -47,7 +47,18 @@
     "./resend/mod": "./resend/mod.ts",
     "./resend/client": "./resend/client.ts",
     "./resend/types": "./resend/types.ts",
-    "./resend/actions/send": "./resend/actions/send.ts"
+    "./resend/actions/send": "./resend/actions/send.ts",
+    "./website": "./website/index.ts",
+    "./website/mod": "./website/mod.ts",
+    "./website/client": "./website/client.ts",
+    "./website/types": "./website/types.ts",
+    "./website/components/*": "./website/components/*.tsx",
+    "./website/loaders/*": "./website/loaders/*.ts",
+    "./website/loaders/fonts/*": "./website/loaders/fonts/*.ts",
+    "./website/matchers/*": "./website/matchers/*.ts",
+    "./website/flags/*": "./website/flags/*.ts",
+    "./website/flags/multivariate/*": "./website/flags/multivariate/*.ts",
+    "./website/utils/*": "./website/utils/*.ts"
   },
   "scripts": {
     "generate:manifests": "tsx scripts/generate-manifests.ts",
@@ -80,6 +91,7 @@
     "shopify/",
     "vtex/",
     "resend/",
+    "website/",
     "!**/__tests__/",
     "!scripts/"
   ],

package/vtex/client.ts

@@ -242,7 +242,7 @@ export async function vtexCachedFetch<T>(
 export async function vtexFetchWithCookies<T>(path: string, init?: RequestInit): Promise<T> {
 	// Auto-inject request cookies from RequestContext
 	const existingHeaders = init?.headers as Record<string, string> | undefined;
-	if (!existingHeaders?.["cookie"]) {
+	if (!existingHeaders?.cookie) {
 		const ctx = RequestContext.current;
 		const cookies = ctx?.request.headers.get("cookie");
 		if (cookies) {

package/vtex/commerceLoaders.ts

@@ -92,7 +92,7 @@ export function createVtexCommerceLoaders(
 		static: options?.cacheProfiles?.static ?? "static",
 	};
 
-	const cachedProductList = createCachedLoader(
+	const _cachedProductList = createCachedLoader(
 		"vtex/productList",
 		vtexProductList,
 		profiles.listing,

package/vtex/inline-loaders/productDetailsPage.ts

@@ -53,6 +53,7 @@ export default async function vtexProductDetailsPage(
 		const page = toProductPage(product, sku, kitItems, {
 			baseUrl,
 			priceCurrency: "BRL",
+			leanVariants: true,
 		});
 
 		return {

package/vtex/manifest.gen.ts

@@ -13,6 +13,7 @@ import * as actions_session from "./actions/session";
 import * as actions_trigger from "./actions/trigger";
 import * as actions_wishlist from "./actions/wishlist";
 import * as loaders_address from "./loaders/address";
+import * as loaders_autocomplete from "./loaders/autocomplete";
 import * as loaders_brands from "./loaders/brands";
 import * as loaders_cart from "./loaders/cart";
 import * as loaders_catalog from "./loaders/catalog";
@@ -36,6 +37,7 @@ const manifest = {
 	name: "vtex",
 	loaders: {
 		"vtex/loaders/address": loaders_address,
+		"vtex/loaders/autocomplete": loaders_autocomplete,
 		"vtex/loaders/brands": loaders_brands,
 		"vtex/loaders/cart": loaders_cart,
 		"vtex/loaders/catalog": loaders_catalog,

package/vtex/utils/transform.ts

@@ -105,6 +105,10 @@ interface ProductOptions {
 	imagesByKey?: Map<string, string>;
 	/** Original attributes to be included in the transformed product */
 	includeOriginalAttributes?: string[];
+	/** Use lean toProductVariant for hasVariant[] instead of full toProduct at level=1 */
+	leanVariants?: boolean;
+	/** Property names to keep on lean variant additionalProperty. Defaults to VARIANT_PROPERTY_NAMES. */
+	variantPropertyNames?: Set<string>;
 }
 
 /** Returns first available sku */
@@ -389,7 +393,9 @@ export const toProduct = <P extends LegacyProductVTEX | ProductVTEX>(
 			? ({
 					"@type": "ProductGroup",
 					productGroupID: productId,
-					hasVariant: items.map((sku) => toProduct(product, sku, 1, variantOptions)),
+					hasVariant: options.leanVariants
+						? items.map((sku) => toProductVariant(product, sku, variantOptions))
+						: items.map((sku) => toProduct(product, sku, 1, variantOptions)),
 					url: getProductGroupURL(baseUrl, product).href,
 					name: product.productName,
 					additionalProperty: [
@@ -659,6 +665,70 @@ export const toProductShelf = <P extends LegacyProductVTEX | ProductVTEX>(
 	};
 };
 
+/** Property names that differentiate SKU variants (used by variant selectors) */
+const VARIANT_PROPERTY_NAMES = new Set(["Cor", "Voltagem", "Tamanho"]);
+
+/**
+ * Build a minimal offer for variant display. Keeps only availability and seller.
+ * No priceSpecification, no inventoryLevel, no teasers.
+ */
+const buildOfferVariant = (offer: Offer): Offer => ({
+	"@type": "Offer",
+	identifier: offer.identifier,
+	price: offer.price,
+	seller: offer.seller,
+	availability: offer.availability,
+	priceSpecification: [],
+	inventoryLevel: { value: 0 },
+});
+
+/**
+ * Minimal product transform for variant entries inside isVariantOf.hasVariant[].
+ *
+ * Keeps only what variant selectors need:
+ * - url, productID, sku, name, inProductGroupWithID
+ * - additionalProperty filtered to variant-differentiating props (Cor, Voltagem, Tamanho)
+ * - offers with availability + seller only (no price specs)
+ *
+ * Drops: images, description, video, brand, category, gtin, releaseDate,
+ *        alternateName, isAccessoryOrSparePartFor, isVariantOf
+ */
+export const toProductVariant = <P extends LegacyProductVTEX | ProductVTEX>(
+	product: P,
+	sku: P["items"][number],
+	options: ProductOptions,
+): Product => {
+	const { baseUrl, priceCurrency } = options;
+	const { productId } = product;
+	const { name, itemId: skuId } = sku;
+	const variantProps = options.variantPropertyNames ?? VARIANT_PROPERTY_NAMES;
+
+	// additionalProperty: only variant-differentiating specs
+	const specificationsAdditionalProperty = isLegacySku(sku)
+		? toAdditionalPropertiesLegacy(sku)
+		: toAdditionalProperties(sku);
+	const additionalProperty = specificationsAdditionalProperty.filter((prop) =>
+		variantProps.has(prop.name ?? ""),
+	);
+
+	// Offers: all sellers but lean (availability + seller only)
+	const offerConverter = isLegacyProduct(product) ? toOfferLegacy : toOffer;
+	const allOffers = (sku.sellers ?? []).map(offerConverter).sort(bestOfferFirst);
+	const bestOffer = allOffers[0];
+	const leanOffers = bestOffer ? [buildOfferVariant(bestOffer)] : [];
+
+	return {
+		"@type": "Product",
+		productID: skuId,
+		sku: skuId,
+		name,
+		url: getProductURL(baseUrl, product, sku.itemId).href,
+		inProductGroupWithID: productId,
+		additionalProperty,
+		offers: aggregateOffers(leanOffers, priceCurrency),
+	};
+};
+
 const toBreadcrumbList = (
 	product: ProductVTEX | LegacyProductVTEX,
 	{ baseUrl }: ProductOptions,

package/website/client.ts

@@ -0,0 +1,20 @@
+/**
+ * Website app singleton configuration.
+ *
+ * Follows the same pattern as vtex/client.ts and resend/client.ts.
+ */
+
+import type { WebsiteConfig } from "./types";
+
+let _config: WebsiteConfig | null = null;
+
+export function configureWebsite(config: WebsiteConfig): void {
+	_config = config;
+}
+
+export function getWebsiteConfig(): WebsiteConfig {
+	if (!_config) {
+		throw new Error("Website app not configured. Call configureWebsite() first.");
+	}
+	return _config;
+}

package/website/components/Analytics.tsx

@@ -0,0 +1,146 @@
+declare global {
+	interface Window {
+		dataLayer: unknown[];
+		DECO: { events: { subscribe: (fn: (event: any) => void) => void } };
+	}
+}
+
+export const getGTMIdFromSrc = (src: string | undefined) => {
+	if (!src) return undefined;
+	try {
+		return new URL(src).searchParams.get("id") ?? undefined;
+	} catch {
+		return undefined;
+	}
+};
+
+interface TagManagerProps {
+	trackingId: string;
+	src?: string;
+}
+
+export function GoogleTagManager(props: TagManagerProps) {
+	const _isOnPremises = !!props.src;
+	const hasTrackingId = "trackingId" in props;
+	const id = _isOnPremises ? props.src : props.trackingId;
+	const hostname = _isOnPremises ? props.src : "https://www.googletagmanager.com";
+	const src = new URL(`/gtm.js?id=${hasTrackingId ? props.trackingId : ""}`, hostname);
+	const noscript = new URL(`/ns.html?id=${hasTrackingId ? props.trackingId : ""}`, hostname);
+
+	return (
+		<>
+			<script
+				id={`gtm-script-${id}`}
+				dangerouslySetInnerHTML={{
+					__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s);j.async=true;j.src=i;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer', '${src.href}');`,
+				}}
+			/>
+			<noscript>
+				<iframe
+					title="Google Tag Manager"
+					src={noscript.href}
+					height="0"
+					width="0"
+					style={{ display: "none", visibility: "hidden" }}
+				/>
+			</noscript>
+		</>
+	);
+}
+
+export function GTAG({ trackingId }: Pick<TagManagerProps, "trackingId">) {
+	const safeId = trackingId.replace(/[^a-zA-Z0-9_-]/g, "");
+	return (
+		<>
+			<script async src={`https://www.googletagmanager.com/gtag/js?id=${safeId}`} />
+			<script
+				dangerouslySetInnerHTML={{
+					__html: `window.dataLayer = window.dataLayer || [];
+function gtag() {
+  dataLayer.push(arguments);
+}
+gtag("js", new Date());
+gtag("config", '${safeId}');`,
+				}}
+			/>
+		</>
+	);
+}
+
+/**
+ * DataLayer event forwarding snippet.
+ * Subscribes to DECO events and pushes them to the GTM dataLayer.
+ */
+const snippetCode = `
+(function() {
+  if (typeof globalThis.window !== "undefined" && globalThis.window.DECO && globalThis.window.DECO.events) {
+    globalThis.window.DECO.events.subscribe(function(event) {
+      globalThis.window.dataLayer = globalThis.window.dataLayer || [];
+      if (!event || !globalThis.window.dataLayer || typeof globalThis.window.dataLayer.push !== "function") {
+        return;
+      }
+      if (event.name === "deco") {
+        globalThis.window.dataLayer.push({ event: event.name, deco: event.params });
+        return;
+      }
+      globalThis.window.dataLayer.push({ ecommerce: null });
+      globalThis.window.dataLayer.push({ event: event.name, ecommerce: event.params });
+    });
+  }
+})();
+`;
+
+export interface Props {
+	/**
+	 * @description google tag manager container id. For more info: https://developers.google.com/tag-platform/tag-manager/web#standard_web_page_installation .
+	 */
+	trackingIds?: string[];
+	/**
+	 * @title GA Measurement Ids
+	 * @label measurement id
+	 * @description the google analytics property measurement id. For more info: https://support.google.com/analytics/answer/9539598
+	 */
+	googleAnalyticsIds?: string[];
+	/**
+	 * @description custom url for serving google tag manager.
+	 */
+	src?: string;
+	/**
+	 * @description Disable forwarding events into dataLayer
+	 */
+	disableAutomaticEventPush?: boolean;
+}
+
+export default function Analytics({
+	trackingIds,
+	src,
+	googleAnalyticsIds,
+	disableAutomaticEventPush,
+}: Props) {
+	const isDeploy = process.env.NODE_ENV === "production";
+	// Backwards compat: extract GTM ID from src URL
+	const trackingId = getGTMIdFromSrc(src) ?? "";
+
+	return (
+		<>
+			{isDeploy && (
+				<>
+					{trackingIds?.map((id) => (
+						<GoogleTagManager key={id} src={src} trackingId={id.trim()} />
+					))}
+					{googleAnalyticsIds?.map((id) => (
+						<GTAG key={id} trackingId={id.trim()} />
+					))}
+					{src && !trackingIds?.length && <GoogleTagManager src={src} trackingId={trackingId} />}
+				</>
+			)}
+
+			{disableAutomaticEventPush !== true && (
+				<script defer id="analytics-script" dangerouslySetInnerHTML={{ __html: snippetCode }} />
+			)}
+		</>
+	);
+}

package/website/components/Seo.tsx

@@ -0,0 +1,139 @@
+import type { ImageWidget, OGType } from "../types";
+import { stripHTML } from "../utils/html";
+
+export const renderTemplateString = (template: string, value: string) =>
+	template.replace("%s", value);
+
+export type SEOSection = React.JSX.Element;
+
+export interface Props {
+	title?: string;
+	/**
+	 * @title Title template
+	 * @description add a %s whenever you want it to be replaced with the product name, category name or search term
+	 * @default %s
+	 */
+	titleTemplate?: string;
+	description?: string;
+	/**
+	 * @title Description template
+	 * @description add a %s whenever you want it to be replaced with the product name, category name or search term
+	 * @default %s
+	 */
+	descriptionTemplate?: string;
+	/** @default website */
+	type?: OGType;
+	/** @description Recommended: 1200 x 630 px (up to 5MB) */
+	image?: ImageWidget;
+	/** @description Recommended: 16 x 16 px */
+	favicon?: ImageWidget;
+	/** @description Suggested color that browsers should use to customize the display of the page or of the surrounding user interface */
+	themeColor?: string;
+	/** @title Canonical URL */
+	canonical?: string;
+	/**
+	 * @title Disable indexing
+	 * @description In testing, you can use this to prevent search engines from indexing your site
+	 */
+	noIndexing?: boolean;
+
+	/** @title Open Graph Config */
+	openGraphConfig?: {
+		title?: string;
+		description?: string;
+		image?: ImageWidget;
+		url?: string;
+	};
+
+	/** @title Twitter Config */
+	twitterConfig?: {
+		title?: string;
+		description?: string;
+		image?: ImageWidget;
+	};
+
+	jsonLDs?: unknown[];
+}
+
+/**
+ * SEO component — renders meta tags that React 19 / TanStack Start
+ * automatically hoists into <head>.
+ */
+function Seo({
+	title: t = "",
+	titleTemplate = "%s",
+	description: desc,
+	descriptionTemplate = "%s",
+	type,
+	image,
+	favicon,
+	themeColor,
+	canonical,
+	noIndexing,
+	openGraphConfig,
+	twitterConfig,
+	jsonLDs = [],
+}: Props) {
+	const twitterCard = type === "website" ? "summary" : "summary_large_image";
+
+	const title = stripHTML(t);
+	const description = stripHTML(desc || "");
+
+	const twitterImage = twitterConfig?.image ?? image;
+	const twitterTitle = twitterConfig?.title ? stripHTML(twitterConfig.title) : title;
+	const twitterDescription = twitterConfig?.description
+		? stripHTML(twitterConfig.description)
+		: description;
+
+	const openGraphImage = openGraphConfig?.image ?? image;
+	const openGraphTitle = openGraphConfig?.title ? stripHTML(openGraphConfig.title) : title;
+	const openGraphDescription = openGraphConfig?.description
+		? stripHTML(openGraphConfig.description)
+		: description;
+
+	return (
+		<>
+			<title>{renderTemplateString(titleTemplate, title)}</title>
+			<meta name="description" content={renderTemplateString(descriptionTemplate, description)} />
+			<meta name="theme-color" content={themeColor} />
+			<link rel="icon" href={favicon} />
+
+			{/* Twitter tags */}
+			<meta property="twitter:title" content={twitterTitle} />
+			<meta property="twitter:description" content={twitterDescription} />
+			<meta property="twitter:image" content={twitterImage} />
+			<meta property="twitter:card" content={twitterCard} />
+
+			{/* OpenGraph tags */}
+			<meta property="og:title" content={openGraphTitle} />
+			<meta property="og:description" content={openGraphDescription} />
+			<meta property="og:type" content={type} />
+			<meta property="og:image" content={openGraphImage} />
+			{Boolean(openGraphConfig?.url || canonical) && (
+				<meta property="og:url" content={openGraphConfig?.url ?? canonical} />
+			)}
+
+			{/* Link tags */}
+			{canonical && <link rel="canonical" href={canonical} />}
+
+			{/* No index, no follow */}
+			{noIndexing && <meta name="robots" content="noindex, nofollow" />}
+			{!noIndexing && <meta name="robots" content="index, follow" />}
+
+			{jsonLDs.map((json, idx) => (
+				<script
+					key={idx}
+					type="application/ld+json"
+					dangerouslySetInnerHTML={{
+						__html: JSON.stringify({
+							"@context": "https://schema.org",
+							...(json as Record<string, unknown>),
+						}),
+					}}
+				/>
+			))}
+		</>
+	);
+}
+
+export default Seo;

package/website/components/Theme.tsx

@@ -0,0 +1,47 @@
+import { useId } from "react";
+import type { Font, Variable } from "../types";
+
+export interface Props {
+	variables?: Variable[];
+	fonts?: Font[];
+	colorScheme?: "light" | "dark";
+}
+
+const withPrefersColorScheme = (scheme: "light" | "dark", css: string) =>
+	`@media (prefers-color-scheme: ${scheme}) { ${css} }`;
+
+/**
+ * Theme component — injects CSS custom properties and font stylesheets.
+ * React 19 / TanStack Start automatically hoists <style> into <head>.
+ */
+function Theme({ fonts = [], variables = [], colorScheme }: Props) {
+	const id = useId();
+
+	const family = fonts.reduce((acc, { family }) => (acc ? `${acc}, ${family}` : family), "");
+
+	const vars = [{ name: "--font-family", value: family }, ...variables]
+		.map(({ name, value }) => `${name}: ${value}`)
+		.join(";");
+
+	const css = `* {${vars}}`;
+	const html = colorScheme ? withPrefersColorScheme(colorScheme, css) : css;
+
+	return (
+		<>
+			{fonts?.map(({ styleSheet }, idx) =>
+				styleSheet ? (
+					<style key={idx} type="text/css" dangerouslySetInnerHTML={{ __html: styleSheet }} />
+				) : null,
+			)}
+			{html && (
+				<style
+					type="text/css"
+					id={`__DESIGN_SYSTEM_VARS-${id}`}
+					dangerouslySetInnerHTML={{ __html: html }}
+				/>
+			)}
+		</>
+	);
+}
+
+export default Theme;

package/website/components/Video.tsx

@@ -0,0 +1,44 @@
+/**
+ * TODO: Implement video preload with link[rel="preload"] tags once
+ * browsers support it. More info at: https://stackoverflow.com/a/68368601
+ */
+import { forwardRef } from "react";
+
+import { getOptimizedMediaUrl } from "../../commerce/components/Image";
+
+export interface Props {
+	src: string;
+	/** @description Improves Web Vitals (CLS|LCP) */
+	width: number;
+	/** @description Improves Web Vitals (CLS|LCP) */
+	height: number;
+	/** @description Force video through the optimization engine */
+	forceOptimizedSrc?: boolean;
+	className?: string;
+	style?: React.CSSProperties;
+	autoPlay?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+	playsInline?: boolean;
+	controls?: boolean;
+	poster?: string;
+}
+
+const Video = forwardRef<HTMLVideoElement, Props>((props, ref) => {
+	const { forceOptimizedSrc, src: originalSrc, width, height, ...rest } = props;
+
+	const src = forceOptimizedSrc
+		? getOptimizedMediaUrl({
+				originalSrc,
+				width,
+				height,
+				fit: "cover",
+			})
+		: originalSrc;
+
+	return <video {...rest} preload={undefined} src={src} width={width} height={height} ref={ref} />;
+});
+
+Video.displayName = "Video";
+
+export default Video;

package/website/flags/audience.ts

@@ -0,0 +1,56 @@
+import type { FlagObj, Matcher } from "../types";
+import Flag from "./flag";
+
+/**
+ * @title Site Route
+ * @titleBy pathTemplate
+ */
+export interface Route {
+	pathTemplate: string;
+	/**
+	 * @description if true so the path will be checked against the coming from request instead of using urlpattern.
+	 */
+	isHref?: boolean;
+	handler: {
+		value: unknown;
+	};
+	/**
+	 * @title Priority
+	 * @description higher priority means that this route will be used in favor of other routes with less or none priority
+	 */
+	highPriority?: boolean;
+}
+
+/**
+ * @title Routes
+ * @description Used to configure your site routes
+ */
+export type Routes = Route[];
+
+/**
+ * @titleBy name
+ */
+export interface Audience {
+	matcher: Matcher;
+	/**
+	 * @title The audience name (will be used on cookies).
+	 * @description Add a meaningful short word for the audience name.
+	 * @minLength 3
+	 * @pattern ^[A-Za-z0-9_-]+$
+	 */
+	name: string;
+	routes?: Routes;
+}
+
+/**
+ * @title Audience
+ * @description Select routes based on the matched audience.
+ */
+export default function Audience({ matcher, routes, name }: Audience): FlagObj<Route[]> {
+	return Flag<Route[]>({
+		matcher,
+		true: routes ?? [],
+		false: [],
+		name,
+	});
+}

package/website/flags/everyone.ts

@@ -0,0 +1,19 @@
+import MatchAlways from "../matchers/always";
+import type { FlagObj } from "../types";
+import Audience, { type Route, type Routes } from "./audience";
+
+export interface EveryoneConfig {
+	routes?: Routes;
+}
+
+/**
+ * @title Audience Everyone
+ * @description Always match regardless of the current user
+ */
+export default function Everyone({ routes }: EveryoneConfig): FlagObj<Route[]> {
+	return Audience({
+		matcher: MatchAlways,
+		routes: routes ?? [],
+		name: "Everyone",
+	});
+}

package/website/flags/flag.ts

@@ -0,0 +1,15 @@
+import type { FlagObj } from "../types";
+
+export type Props<T> = FlagObj<T>;
+
+/**
+ * @title Flag
+ */
+export default function Flag<T>({ matcher, name, true: T, false: F }: Props<T>): FlagObj<T> {
+	return {
+		matcher,
+		true: T,
+		false: F,
+		name,
+	};
+}

package/website/flags/multivariate/image.ts

@@ -0,0 +1,11 @@
+import type { ImageWidget, MultivariateFlag } from "../../types";
+import multivariate, { type MultivariateProps } from "../../utils/multivariate";
+
+/**
+ * @title Image Variants
+ */
+export default function Image(
+	props: MultivariateProps<ImageWidget>,
+): MultivariateFlag<ImageWidget> {
+	return multivariate(props);
+}

package/website/flags/multivariate/message.ts

@@ -0,0 +1,11 @@
+import type { MultivariateFlag } from "../../types";
+import multivariate, { type MultivariateProps } from "../../utils/multivariate";
+
+export type Message = string;
+
+/**
+ * @title Message Variants
+ */
+export default function Message(props: MultivariateProps<Message>): MultivariateFlag<Message> {
+	return multivariate(props);
+}