@vue-storefront/next 7.0.2 → 8.0.0-next.3

package/dist/index.cjs

@@ -20,6 +20,231 @@ const createLogger = (options) => {
 	return injectMetadata(_alokai_connect_logger.LoggerFactory.create(_alokai_connect_logger.LoggerType.ConsolaGcp, options), { alokai: { context: "storefront" } });
 };
 //#endregion
+//#region src/image-optimizer/constants.ts
+/**
+* URL prefix the loader emits and the route folder must use:
+* `app/img-proxy/[host]/[...path]/route.ts`.
+*/
+const IMG_PROXY_PREFIX = "/img-proxy";
+/**
+* Cache-Control applied to successful (2xx) upstream responses unless
+* overridden per host via `cacheControl`.
+*/
+const DEFAULT_CACHE_CONTROL = "public, max-age=3600, s-maxage=86400";
+/**
+* Cache-Control applied to every non-2xx or failed response so errors are
+* never cached by the browser or the CDN.
+*/
+const ERROR_CACHE_CONTROL = "no-store, no-cache, must-revalidate";
+const variants = {
+	default: {
+		buildUpstreamUrl: (mediaHost, segments) => `${mediaHost}/${joinEncoded(segments)}`,
+		encodePath: (pathname) => pathname === "" ? void 0 : pathname
+	},
+	sapcc: {
+		buildUpstreamUrl: (mediaHost, segments) => {
+			const [context = "", ...path] = segments;
+			return `${mediaHost}/${joinEncoded(path)}?context=${encodeURIComponent(context)}`;
+		},
+		encodePath: (pathname, searchParams) => {
+			var _pathname$split$pop;
+			const context = searchParams.get("context");
+			if (!context) return;
+			const hasExtension = ((_pathname$split$pop = pathname.split("/").pop()) !== null && _pathname$split$pop !== void 0 ? _pathname$split$pop : "").includes(".");
+			const separator = pathname.endsWith("/") ? "" : "/";
+			const safePathname = hasExtension ? pathname : `${pathname}${separator}image.png`;
+			return `/${encodeURIComponent(context)}${safePathname}`;
+		}
+	}
+};
+function joinEncoded(segments) {
+	return segments.map((segment) => encodeURIComponent(segment)).join("/");
+}
+//#endregion
+//#region src/image-optimizer/resolve-hosts.ts
+/**
+* Normalizes the `hosts` config into an ordered list of fully-resolved host
+* configs. Throws on misconfiguration so mistakes surface at module init
+* instead of as silently unoptimized images.
+*
+* @internal
+*/
+function resolveHosts(hosts) {
+	return Object.entries(hosts).map(([key, config]) => resolveHost(key, config));
+}
+/**
+* Derives the conventional env variable name from a host key, e.g.
+* `ct` -> `NEXT_PUBLIC_CT_MEDIA_HOST`, `my-cms` -> `NEXT_PUBLIC_MY_CMS_MEDIA_HOST`.
+*
+* @internal
+*/
+function deriveMediaHostEnvName(hostKey) {
+	return `NEXT_PUBLIC_${hostKey.replaceAll("-", "_").toUpperCase()}_MEDIA_HOST`;
+}
+const HOST_KEY_PATTERN = /^(?=.*[a-z])[a-z0-9-]+$/;
+const ENV_NAME_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+function resolveHost(key, config) {
+	var _config$mediaHostEnvN, _config$variant, _config$buildUpstream, _config$cacheControl, _config$encodePath;
+	if (!HOST_KEY_PATTERN.test(key)) throw new Error(`Invalid image optimizer host key "${key}". Use lowercase letters, digits and hyphens only - the key becomes a URL segment and an env variable name fragment.`);
+	const mediaHostEnvName = (_config$mediaHostEnvN = config.mediaHostEnvName) !== null && _config$mediaHostEnvN !== void 0 ? _config$mediaHostEnvN : deriveMediaHostEnvName(key);
+	if (!ENV_NAME_PATTERN.test(mediaHostEnvName)) throw new Error(`Invalid mediaHostEnvName "${mediaHostEnvName}" for host "${key}". Pass the NAME of the env variable (e.g. "NEXT_PUBLIC_CT_MEDIA_HOST"), not its value.`);
+	const variant = variants[(_config$variant = config.variant) !== null && _config$variant !== void 0 ? _config$variant : "default"];
+	return {
+		buildUpstreamUrl: (_config$buildUpstream = config.buildUpstreamUrl) !== null && _config$buildUpstream !== void 0 ? _config$buildUpstream : variant.buildUpstreamUrl,
+		cacheControl: (_config$cacheControl = config.cacheControl) !== null && _config$cacheControl !== void 0 ? _config$cacheControl : DEFAULT_CACHE_CONTROL,
+		encodePath: (_config$encodePath = config.encodePath) !== null && _config$encodePath !== void 0 ? _config$encodePath : variant.encodePath,
+		key,
+		loader: config.loader,
+		mediaHostEnvName
+	};
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.115.0/helpers/asyncToGenerator.js
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+	try {
+		var i = n[a](c), u = i.value;
+	} catch (n) {
+		e(n);
+		return;
+	}
+	i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+	return function() {
+		var t = this, e = arguments;
+		return new Promise(function(r, o) {
+			var a = n.apply(t, e);
+			function _next(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+			}
+			function _throw(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+			}
+			_next(void 0);
+		});
+	};
+}
+//#endregion
+//#region src/image-optimizer/create-image-optimizer.ts
+/**
+* Creates a Next.js custom image `loader` and a proxy route-handler `GET`
+* that together let an image CDN in front of the storefront (the Alokai
+* Image Optimizer)
+* optimize media-host images.
+*
+* The loader rewrites `src` values matching a configured media host to
+* `/img-proxy/{key}/{path}?width=&quality=&format=auto`; the route handler
+* proxies that path back to the media host and streams the body so the CDN
+* can transform it on the way to the browser. Non-matching `src` values are
+* returned unchanged.
+*
+* @example
+* ```ts
+* // config/image-optimizer.ts - the single place the config exists; the
+* // default export lets `images.loaderFile` point straight at this file
+* import { createImageOptimizer } from "@vue-storefront/next";
+*
+* export const { GET, loader } = createImageOptimizer({ hosts: { ct: {} } });
+*
+* export default loader;
+*
+* // app/img-proxy/[host]/[...path]/route.ts
+* export { GET } from "@/config/image-optimizer";
+* ```
+*/
+function createImageOptimizer(config) {
+	if (Object.keys(config.hosts).length === 0) throw new Error([
+		"createImageOptimizer requires at least one host in \"hosts\".",
+		"Add the media hosts whose images the loader should optimize, e.g.:",
+		"",
+		"  createImageOptimizer({",
+		"    hosts: {",
+		"      ct: {},",
+		"      sapcc: { variant: \"sapcc\" },",
+		"    },",
+		"  });",
+		"",
+		"Each key becomes a URL segment and derives the env variable holding",
+		"the media host URL, e.g. \"ct\" reads NEXT_PUBLIC_CT_MEDIA_HOST."
+	].join("\n"));
+	const hosts = resolveHosts(config.hosts);
+	function loader({ quality, src, width }) {
+		for (const host of hosts) {
+			const mediaHost = require_env.env(host.mediaHostEnvName);
+			if (!mediaHost) {
+				getLogger().warning(`${host.mediaHostEnvName} is not defined, skipping image optimization for host "${host.key}".`);
+				continue;
+			}
+			const normalizedHost = mediaHost.replace(/\/$/, "");
+			if (!matchesMediaHost(src, normalizedHost)) continue;
+			if (host.loader) return host.loader({
+				quality,
+				src,
+				width
+			});
+			const localPath = src.slice(normalizedHost.length);
+			const queryIndex = localPath.indexOf("?");
+			const pathname = queryIndex === -1 ? localPath : localPath.slice(0, queryIndex);
+			const queryString = queryIndex === -1 ? "" : localPath.slice(queryIndex + 1);
+			const proxyPath = host.encodePath(pathname, new URLSearchParams(queryString));
+			if (proxyPath === void 0) return src;
+			return `${IMG_PROXY_PREFIX}/${host.key}${proxyPath}?width=${width}&quality=${quality || 85}&format=auto`;
+		}
+		return src;
+	}
+	function GET(_x, _x2) {
+		return _GET.apply(this, arguments);
+	}
+	function _GET() {
+		_GET = _asyncToGenerator(function* (_request, { params }) {
+			var _env, _upstream$headers$get;
+			const { host: hostKey, path } = yield params;
+			const host = hosts.find((entry) => entry.key === hostKey);
+			if (!host) return errorResponse(`Unknown image proxy host "${hostKey}"`, 404);
+			if (path.length === 0 || path.some(isUnsafeSegment)) return errorResponse("Invalid image path", 400);
+			const mediaHost = (_env = require_env.env(host.mediaHostEnvName)) === null || _env === void 0 ? void 0 : _env.replace(/\/$/, "");
+			if (!mediaHost) return errorResponse(`${host.mediaHostEnvName} is not defined`, 500);
+			let upstream;
+			try {
+				upstream = yield fetch(host.buildUpstreamUrl(mediaHost, path));
+			} catch (error) {
+				getLogger().error(`Failed to fetch upstream image for host "${hostKey}": ${String(error)}`);
+				return errorResponse("Failed to fetch upstream image", 502);
+			}
+			return new Response(upstream.body, {
+				headers: {
+					"cache-control": upstream.ok ? host.cacheControl : ERROR_CACHE_CONTROL,
+					"content-type": (_upstream$headers$get = upstream.headers.get("content-type")) !== null && _upstream$headers$get !== void 0 ? _upstream$headers$get : "application/octet-stream"
+				},
+				status: upstream.status
+			});
+		});
+		return _GET.apply(this, arguments);
+	}
+	return {
+		GET,
+		loader
+	};
+}
+let logger;
+function getLogger() {
+	var _logger;
+	(_logger = logger) !== null && _logger !== void 0 || (logger = createLogger());
+	return logger;
+}
+function matchesMediaHost(src, normalizedHost) {
+	return src === normalizedHost || src.startsWith(`${normalizedHost}/`) || src.startsWith(`${normalizedHost}?`);
+}
+function isUnsafeSegment(segment) {
+	return segment === "" || segment === "." || segment === "..";
+}
+function errorResponse(message, status) {
+	return new Response(message, {
+		headers: { "cache-control": ERROR_CACHE_CONTROL },
+		status
+	});
+}
+//#endregion
 //#region src/middleware.ts
 /**
 * Creates an Alokai middleware wrapper that adds pathname information to request headers.
@@ -64,32 +289,6 @@ const defaultMethodsRequestConfig = {
 	} }
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.115.0/helpers/asyncToGenerator.js
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-	try {
-		var i = n[a](c), u = i.value;
-	} catch (n) {
-		e(n);
-		return;
-	}
-	i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-	return function() {
-		var t = this, e = arguments;
-		return new Promise(function(r, o) {
-			var a = n.apply(t, e);
-			function _next(n) {
-				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-			}
-			function _throw(n) {
-				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-			}
-			_next(void 0);
-		});
-	};
-}
-//#endregion
 //#region src/sdk/helpers/resolveDynamicContext.ts
 const BLACKLISTED_HEADERS = new Set(["host"]);
 function isAppRouterHeaders(headers) {
@@ -237,6 +436,7 @@ function buildModules(modules) {
 }
 //#endregion
 exports.createAlokaiMiddleware = createAlokaiMiddleware;
+exports.createImageOptimizer = createImageOptimizer;
 exports.createLogger = createLogger;
 exports.createSdk = createSdk;
 Object.defineProperty(exports, "defineGetConfigSwitcherHeader", {

package/dist/index.d.cts

@@ -1,8 +1,137 @@
 import { a as CreateSdkReturn, i as CreateSdkOptions, n as Config, o as InjectedContext, t as env } from "./index-w0GzdXwC.cjs";
 import { buildModule, defineGetConfigSwitcherHeader } from "@alokai/connect/sdk";
+import { ImageLoaderProps } from "next/image";
 import * as _alokai_connect_logger0 from "@alokai/connect/logger";
 import { NextRequest, NextResponse } from "next/server";
 
+//#region src/image-optimizer/types.d.ts
+/**
+ * Next.js custom image loader produced by `createImageOptimizer`. Pass it as
+ * the default export of the file referenced by `images.loaderFile`.
+ */
+type ImageOptimizerLoader = (props: ImageLoaderProps) => string;
+/**
+ * Route handler produced by `createImageOptimizer`. Re-export it as `GET`
+ * from `app/img-proxy/[host]/[...path]/route.ts`.
+ */
+type ImageOptimizerRouteHandler = (request: Request, context: ImageOptimizerRouteContext) => Promise<Response>;
+interface ImageOptimizer {
+  GET: ImageOptimizerRouteHandler;
+  loader: ImageOptimizerLoader;
+}
+interface CreateImageOptimizerConfig {
+  /**
+   * Media hosts whose images should be optimized, keyed by host key. An
+   * empty object means all defaults. The key becomes the `[host]` URL
+   * segment and derives the default env variable name:
+   * `NEXT_PUBLIC_{KEY}_MEDIA_HOST`.
+   */
+  hosts: ImageOptimizerHosts;
+}
+type ImageOptimizerHosts = Record<string, ImageOptimizerHostConfig>;
+type ImageOptimizerHostConfig = ImageOptimizerDelegatedHostConfig | ImageOptimizerProxiedHostConfig;
+/**
+ * Host with its own image CDN (e.g. Contentful): matching `src` values are
+ * delegated to the given loader and never proxied, so the proxy-side options
+ * do not apply.
+ */
+interface ImageOptimizerDelegatedHostConfig extends ImageOptimizerHostBaseConfig {
+  buildUpstreamUrl?: never;
+  cacheControl?: never;
+  encodePath?: never;
+  /**
+   * Rewrites a matching `src` directly to the host's own CDN. Same signature
+   * as a Next.js image loader, so existing loader implementations plug in.
+   */
+  loader: ImageOptimizerLoader;
+  variant?: never;
+}
+/**
+ * Host proxied through `/img-proxy/{key}/...` so the image CDN in front of
+ * the storefront (Alokai Image Optimizer) can transform the response.
+ */
+interface ImageOptimizerProxiedHostConfig extends ImageOptimizerHostBaseConfig {
+  /** Server-side hook overriding the variant's upstream URL reconstruction. */
+  buildUpstreamUrl?: BuildUpstreamUrlHook;
+  /**
+   * Cache-Control for successful (2xx) upstream responses.
+   *
+   * @default "public, max-age=3600, s-maxage=86400"
+   */
+  cacheControl?: string;
+  /** Client-side hook overriding the variant's path encoding. */
+  encodePath?: EncodePathHook;
+  loader?: never;
+  /**
+   * Built-in URL scheme. `sapcc` encodes the `?context=` query parameter as
+   * a path segment and appends a synthetic filename when the path has none.
+   * Ignored for a side when the corresponding hook is provided.
+   *
+   * @default "default"
+   */
+  variant?: ImageOptimizerVariant;
+}
+interface ImageOptimizerHostBaseConfig {
+  /**
+   * NAME of the env variable holding the media host URL (not the URL
+   * itself).
+   *
+   * @default `NEXT_PUBLIC_{KEY}_MEDIA_HOST` derived from the host key
+   */
+  mediaHostEnvName?: string;
+}
+type ImageOptimizerVariant = "default" | "sapcc";
+/**
+ * Builds the path emitted after `/img-proxy/{key}` on the loader (client)
+ * side. Receives the pathname relative to the media host (with leading
+ * slash, without query string) and the parsed query string of the original
+ * `src`. Return the proxy path (starting with `/`), or `undefined` to skip
+ * proxying and return the original `src` unchanged.
+ */
+type EncodePathHook = (pathname: string, searchParams: URLSearchParams) => string | undefined;
+/**
+ * Rebuilds the upstream URL on the route-handler (server) side. Receives the
+ * media host (without trailing slash) and the decoded `[...path]` segments
+ * from the route params. Must return an absolute URL.
+ */
+type BuildUpstreamUrlHook = (mediaHost: string, segments: string[]) => string;
+interface ImageOptimizerRouteContext {
+  params: Promise<ImageOptimizerRouteParams>;
+}
+interface ImageOptimizerRouteParams {
+  host: string;
+  path: string[];
+}
+//#endregion
+//#region src/image-optimizer/create-image-optimizer.d.ts
+/**
+ * Creates a Next.js custom image `loader` and a proxy route-handler `GET`
+ * that together let an image CDN in front of the storefront (the Alokai
+ * Image Optimizer)
+ * optimize media-host images.
+ *
+ * The loader rewrites `src` values matching a configured media host to
+ * `/img-proxy/{key}/{path}?width=&quality=&format=auto`; the route handler
+ * proxies that path back to the media host and streams the body so the CDN
+ * can transform it on the way to the browser. Non-matching `src` values are
+ * returned unchanged.
+ *
+ * @example
+ * ```ts
+ * // config/image-optimizer.ts - the single place the config exists; the
+ * // default export lets `images.loaderFile` point straight at this file
+ * import { createImageOptimizer } from "@vue-storefront/next";
+ *
+ * export const { GET, loader } = createImageOptimizer({ hosts: { ct: {} } });
+ *
+ * export default loader;
+ *
+ * // app/img-proxy/[host]/[...path]/route.ts
+ * export { GET } from "@/config/image-optimizer";
+ * ```
+ */
+declare function createImageOptimizer(config: CreateImageOptimizerConfig): ImageOptimizer;
+//#endregion
 //#region src/logger/types.d.ts
 type LogVerbosity = "alert" | "critical" | "debug" | "emergency" | "error" | "info" | "notice" | "warning";
 type LoggerOptions = Partial<{
@@ -176,4 +305,4 @@ type DefineSdkModule = (context: InjectedContext) => ReturnType<typeof buildModu
  */
 declare function defineSdkModule<TModuleDefinition extends DefineSdkModule>(moduleDefinition: TModuleDefinition): TModuleDefinition;
 //#endregion
-export { type CreateSdkOptions, createAlokaiMiddleware, createLogger, createSdk, defineGetConfigSwitcherHeader, defineSdkConfig, defineSdkModule, env, resolveSdkOptions };
+export { BuildUpstreamUrlHook, CreateImageOptimizerConfig, type CreateSdkOptions, EncodePathHook, ImageOptimizer, ImageOptimizerDelegatedHostConfig, ImageOptimizerHostConfig, ImageOptimizerHosts, ImageOptimizerLoader, ImageOptimizerProxiedHostConfig, ImageOptimizerRouteContext, ImageOptimizerRouteHandler, ImageOptimizerRouteParams, ImageOptimizerVariant, createAlokaiMiddleware, createImageOptimizer, createLogger, createSdk, defineGetConfigSwitcherHeader, defineSdkConfig, defineSdkModule, env, resolveSdkOptions };

package/dist/index.d.mts

@@ -1,8 +1,137 @@
 import { a as CreateSdkReturn, i as CreateSdkOptions, n as Config, o as InjectedContext, t as env } from "./index-BPhD221E.mjs";
 import * as _alokai_connect_logger0 from "@alokai/connect/logger";
 import { buildModule, defineGetConfigSwitcherHeader } from "@alokai/connect/sdk";
+import { ImageLoaderProps } from "next/image";
 import { NextRequest, NextResponse } from "next/server";
 
+//#region src/image-optimizer/types.d.ts
+/**
+ * Next.js custom image loader produced by `createImageOptimizer`. Pass it as
+ * the default export of the file referenced by `images.loaderFile`.
+ */
+type ImageOptimizerLoader = (props: ImageLoaderProps) => string;
+/**
+ * Route handler produced by `createImageOptimizer`. Re-export it as `GET`
+ * from `app/img-proxy/[host]/[...path]/route.ts`.
+ */
+type ImageOptimizerRouteHandler = (request: Request, context: ImageOptimizerRouteContext) => Promise<Response>;
+interface ImageOptimizer {
+  GET: ImageOptimizerRouteHandler;
+  loader: ImageOptimizerLoader;
+}
+interface CreateImageOptimizerConfig {
+  /**
+   * Media hosts whose images should be optimized, keyed by host key. An
+   * empty object means all defaults. The key becomes the `[host]` URL
+   * segment and derives the default env variable name:
+   * `NEXT_PUBLIC_{KEY}_MEDIA_HOST`.
+   */
+  hosts: ImageOptimizerHosts;
+}
+type ImageOptimizerHosts = Record<string, ImageOptimizerHostConfig>;
+type ImageOptimizerHostConfig = ImageOptimizerDelegatedHostConfig | ImageOptimizerProxiedHostConfig;
+/**
+ * Host with its own image CDN (e.g. Contentful): matching `src` values are
+ * delegated to the given loader and never proxied, so the proxy-side options
+ * do not apply.
+ */
+interface ImageOptimizerDelegatedHostConfig extends ImageOptimizerHostBaseConfig {
+  buildUpstreamUrl?: never;
+  cacheControl?: never;
+  encodePath?: never;
+  /**
+   * Rewrites a matching `src` directly to the host's own CDN. Same signature
+   * as a Next.js image loader, so existing loader implementations plug in.
+   */
+  loader: ImageOptimizerLoader;
+  variant?: never;
+}
+/**
+ * Host proxied through `/img-proxy/{key}/...` so the image CDN in front of
+ * the storefront (Alokai Image Optimizer) can transform the response.
+ */
+interface ImageOptimizerProxiedHostConfig extends ImageOptimizerHostBaseConfig {
+  /** Server-side hook overriding the variant's upstream URL reconstruction. */
+  buildUpstreamUrl?: BuildUpstreamUrlHook;
+  /**
+   * Cache-Control for successful (2xx) upstream responses.
+   *
+   * @default "public, max-age=3600, s-maxage=86400"
+   */
+  cacheControl?: string;
+  /** Client-side hook overriding the variant's path encoding. */
+  encodePath?: EncodePathHook;
+  loader?: never;
+  /**
+   * Built-in URL scheme. `sapcc` encodes the `?context=` query parameter as
+   * a path segment and appends a synthetic filename when the path has none.
+   * Ignored for a side when the corresponding hook is provided.
+   *
+   * @default "default"
+   */
+  variant?: ImageOptimizerVariant;
+}
+interface ImageOptimizerHostBaseConfig {
+  /**
+   * NAME of the env variable holding the media host URL (not the URL
+   * itself).
+   *
+   * @default `NEXT_PUBLIC_{KEY}_MEDIA_HOST` derived from the host key
+   */
+  mediaHostEnvName?: string;
+}
+type ImageOptimizerVariant = "default" | "sapcc";
+/**
+ * Builds the path emitted after `/img-proxy/{key}` on the loader (client)
+ * side. Receives the pathname relative to the media host (with leading
+ * slash, without query string) and the parsed query string of the original
+ * `src`. Return the proxy path (starting with `/`), or `undefined` to skip
+ * proxying and return the original `src` unchanged.
+ */
+type EncodePathHook = (pathname: string, searchParams: URLSearchParams) => string | undefined;
+/**
+ * Rebuilds the upstream URL on the route-handler (server) side. Receives the
+ * media host (without trailing slash) and the decoded `[...path]` segments
+ * from the route params. Must return an absolute URL.
+ */
+type BuildUpstreamUrlHook = (mediaHost: string, segments: string[]) => string;
+interface ImageOptimizerRouteContext {
+  params: Promise<ImageOptimizerRouteParams>;
+}
+interface ImageOptimizerRouteParams {
+  host: string;
+  path: string[];
+}
+//#endregion
+//#region src/image-optimizer/create-image-optimizer.d.ts
+/**
+ * Creates a Next.js custom image `loader` and a proxy route-handler `GET`
+ * that together let an image CDN in front of the storefront (the Alokai
+ * Image Optimizer)
+ * optimize media-host images.
+ *
+ * The loader rewrites `src` values matching a configured media host to
+ * `/img-proxy/{key}/{path}?width=&quality=&format=auto`; the route handler
+ * proxies that path back to the media host and streams the body so the CDN
+ * can transform it on the way to the browser. Non-matching `src` values are
+ * returned unchanged.
+ *
+ * @example
+ * ```ts
+ * // config/image-optimizer.ts - the single place the config exists; the
+ * // default export lets `images.loaderFile` point straight at this file
+ * import { createImageOptimizer } from "@vue-storefront/next";
+ *
+ * export const { GET, loader } = createImageOptimizer({ hosts: { ct: {} } });
+ *
+ * export default loader;
+ *
+ * // app/img-proxy/[host]/[...path]/route.ts
+ * export { GET } from "@/config/image-optimizer";
+ * ```
+ */
+declare function createImageOptimizer(config: CreateImageOptimizerConfig): ImageOptimizer;
+//#endregion
 //#region src/logger/types.d.ts
 type LogVerbosity = "alert" | "critical" | "debug" | "emergency" | "error" | "info" | "notice" | "warning";
 type LoggerOptions = Partial<{
@@ -176,4 +305,4 @@ type DefineSdkModule = (context: InjectedContext) => ReturnType<typeof buildModu
  */
 declare function defineSdkModule<TModuleDefinition extends DefineSdkModule>(moduleDefinition: TModuleDefinition): TModuleDefinition;
 //#endregion
-export { type CreateSdkOptions, createAlokaiMiddleware, createLogger, createSdk, defineGetConfigSwitcherHeader, defineSdkConfig, defineSdkModule, env, resolveSdkOptions };
+export { BuildUpstreamUrlHook, CreateImageOptimizerConfig, type CreateSdkOptions, EncodePathHook, ImageOptimizer, ImageOptimizerDelegatedHostConfig, ImageOptimizerHostConfig, ImageOptimizerHosts, ImageOptimizerLoader, ImageOptimizerProxiedHostConfig, ImageOptimizerRouteContext, ImageOptimizerRouteHandler, ImageOptimizerRouteParams, ImageOptimizerVariant, createAlokaiMiddleware, createImageOptimizer, createLogger, createSdk, defineGetConfigSwitcherHeader, defineSdkConfig, defineSdkModule, env, resolveSdkOptions };

package/dist/index.mjs

@@ -18,6 +18,231 @@ const createLogger = (options) => {
 	return injectMetadata(LoggerFactory.create(LoggerType.ConsolaGcp, options), { alokai: { context: "storefront" } });
 };
 //#endregion
+//#region src/image-optimizer/constants.ts
+/**
+* URL prefix the loader emits and the route folder must use:
+* `app/img-proxy/[host]/[...path]/route.ts`.
+*/
+const IMG_PROXY_PREFIX = "/img-proxy";
+/**
+* Cache-Control applied to successful (2xx) upstream responses unless
+* overridden per host via `cacheControl`.
+*/
+const DEFAULT_CACHE_CONTROL = "public, max-age=3600, s-maxage=86400";
+/**
+* Cache-Control applied to every non-2xx or failed response so errors are
+* never cached by the browser or the CDN.
+*/
+const ERROR_CACHE_CONTROL = "no-store, no-cache, must-revalidate";
+const variants = {
+	default: {
+		buildUpstreamUrl: (mediaHost, segments) => `${mediaHost}/${joinEncoded(segments)}`,
+		encodePath: (pathname) => pathname === "" ? void 0 : pathname
+	},
+	sapcc: {
+		buildUpstreamUrl: (mediaHost, segments) => {
+			const [context = "", ...path] = segments;
+			return `${mediaHost}/${joinEncoded(path)}?context=${encodeURIComponent(context)}`;
+		},
+		encodePath: (pathname, searchParams) => {
+			var _pathname$split$pop;
+			const context = searchParams.get("context");
+			if (!context) return;
+			const hasExtension = ((_pathname$split$pop = pathname.split("/").pop()) !== null && _pathname$split$pop !== void 0 ? _pathname$split$pop : "").includes(".");
+			const separator = pathname.endsWith("/") ? "" : "/";
+			const safePathname = hasExtension ? pathname : `${pathname}${separator}image.png`;
+			return `/${encodeURIComponent(context)}${safePathname}`;
+		}
+	}
+};
+function joinEncoded(segments) {
+	return segments.map((segment) => encodeURIComponent(segment)).join("/");
+}
+//#endregion
+//#region src/image-optimizer/resolve-hosts.ts
+/**
+* Normalizes the `hosts` config into an ordered list of fully-resolved host
+* configs. Throws on misconfiguration so mistakes surface at module init
+* instead of as silently unoptimized images.
+*
+* @internal
+*/
+function resolveHosts(hosts) {
+	return Object.entries(hosts).map(([key, config]) => resolveHost(key, config));
+}
+/**
+* Derives the conventional env variable name from a host key, e.g.
+* `ct` -> `NEXT_PUBLIC_CT_MEDIA_HOST`, `my-cms` -> `NEXT_PUBLIC_MY_CMS_MEDIA_HOST`.
+*
+* @internal
+*/
+function deriveMediaHostEnvName(hostKey) {
+	return `NEXT_PUBLIC_${hostKey.replaceAll("-", "_").toUpperCase()}_MEDIA_HOST`;
+}
+const HOST_KEY_PATTERN = /^(?=.*[a-z])[a-z0-9-]+$/;
+const ENV_NAME_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+function resolveHost(key, config) {
+	var _config$mediaHostEnvN, _config$variant, _config$buildUpstream, _config$cacheControl, _config$encodePath;
+	if (!HOST_KEY_PATTERN.test(key)) throw new Error(`Invalid image optimizer host key "${key}". Use lowercase letters, digits and hyphens only - the key becomes a URL segment and an env variable name fragment.`);
+	const mediaHostEnvName = (_config$mediaHostEnvN = config.mediaHostEnvName) !== null && _config$mediaHostEnvN !== void 0 ? _config$mediaHostEnvN : deriveMediaHostEnvName(key);
+	if (!ENV_NAME_PATTERN.test(mediaHostEnvName)) throw new Error(`Invalid mediaHostEnvName "${mediaHostEnvName}" for host "${key}". Pass the NAME of the env variable (e.g. "NEXT_PUBLIC_CT_MEDIA_HOST"), not its value.`);
+	const variant = variants[(_config$variant = config.variant) !== null && _config$variant !== void 0 ? _config$variant : "default"];
+	return {
+		buildUpstreamUrl: (_config$buildUpstream = config.buildUpstreamUrl) !== null && _config$buildUpstream !== void 0 ? _config$buildUpstream : variant.buildUpstreamUrl,
+		cacheControl: (_config$cacheControl = config.cacheControl) !== null && _config$cacheControl !== void 0 ? _config$cacheControl : DEFAULT_CACHE_CONTROL,
+		encodePath: (_config$encodePath = config.encodePath) !== null && _config$encodePath !== void 0 ? _config$encodePath : variant.encodePath,
+		key,
+		loader: config.loader,
+		mediaHostEnvName
+	};
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.115.0/helpers/asyncToGenerator.js
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+	try {
+		var i = n[a](c), u = i.value;
+	} catch (n) {
+		e(n);
+		return;
+	}
+	i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+	return function() {
+		var t = this, e = arguments;
+		return new Promise(function(r, o) {
+			var a = n.apply(t, e);
+			function _next(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+			}
+			function _throw(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+			}
+			_next(void 0);
+		});
+	};
+}
+//#endregion
+//#region src/image-optimizer/create-image-optimizer.ts
+/**
+* Creates a Next.js custom image `loader` and a proxy route-handler `GET`
+* that together let an image CDN in front of the storefront (the Alokai
+* Image Optimizer)
+* optimize media-host images.
+*
+* The loader rewrites `src` values matching a configured media host to
+* `/img-proxy/{key}/{path}?width=&quality=&format=auto`; the route handler
+* proxies that path back to the media host and streams the body so the CDN
+* can transform it on the way to the browser. Non-matching `src` values are
+* returned unchanged.
+*
+* @example
+* ```ts
+* // config/image-optimizer.ts - the single place the config exists; the
+* // default export lets `images.loaderFile` point straight at this file
+* import { createImageOptimizer } from "@vue-storefront/next";
+*
+* export const { GET, loader } = createImageOptimizer({ hosts: { ct: {} } });
+*
+* export default loader;
+*
+* // app/img-proxy/[host]/[...path]/route.ts
+* export { GET } from "@/config/image-optimizer";
+* ```
+*/
+function createImageOptimizer(config) {
+	if (Object.keys(config.hosts).length === 0) throw new Error([
+		"createImageOptimizer requires at least one host in \"hosts\".",
+		"Add the media hosts whose images the loader should optimize, e.g.:",
+		"",
+		"  createImageOptimizer({",
+		"    hosts: {",
+		"      ct: {},",
+		"      sapcc: { variant: \"sapcc\" },",
+		"    },",
+		"  });",
+		"",
+		"Each key becomes a URL segment and derives the env variable holding",
+		"the media host URL, e.g. \"ct\" reads NEXT_PUBLIC_CT_MEDIA_HOST."
+	].join("\n"));
+	const hosts = resolveHosts(config.hosts);
+	function loader({ quality, src, width }) {
+		for (const host of hosts) {
+			const mediaHost = env(host.mediaHostEnvName);
+			if (!mediaHost) {
+				getLogger().warning(`${host.mediaHostEnvName} is not defined, skipping image optimization for host "${host.key}".`);
+				continue;
+			}
+			const normalizedHost = mediaHost.replace(/\/$/, "");
+			if (!matchesMediaHost(src, normalizedHost)) continue;
+			if (host.loader) return host.loader({
+				quality,
+				src,
+				width
+			});
+			const localPath = src.slice(normalizedHost.length);
+			const queryIndex = localPath.indexOf("?");
+			const pathname = queryIndex === -1 ? localPath : localPath.slice(0, queryIndex);
+			const queryString = queryIndex === -1 ? "" : localPath.slice(queryIndex + 1);
+			const proxyPath = host.encodePath(pathname, new URLSearchParams(queryString));
+			if (proxyPath === void 0) return src;
+			return `${IMG_PROXY_PREFIX}/${host.key}${proxyPath}?width=${width}&quality=${quality || 85}&format=auto`;
+		}
+		return src;
+	}
+	function GET(_x, _x2) {
+		return _GET.apply(this, arguments);
+	}
+	function _GET() {
+		_GET = _asyncToGenerator(function* (_request, { params }) {
+			var _env, _upstream$headers$get;
+			const { host: hostKey, path } = yield params;
+			const host = hosts.find((entry) => entry.key === hostKey);
+			if (!host) return errorResponse(`Unknown image proxy host "${hostKey}"`, 404);
+			if (path.length === 0 || path.some(isUnsafeSegment)) return errorResponse("Invalid image path", 400);
+			const mediaHost = (_env = env(host.mediaHostEnvName)) === null || _env === void 0 ? void 0 : _env.replace(/\/$/, "");
+			if (!mediaHost) return errorResponse(`${host.mediaHostEnvName} is not defined`, 500);
+			let upstream;
+			try {
+				upstream = yield fetch(host.buildUpstreamUrl(mediaHost, path));
+			} catch (error) {
+				getLogger().error(`Failed to fetch upstream image for host "${hostKey}": ${String(error)}`);
+				return errorResponse("Failed to fetch upstream image", 502);
+			}
+			return new Response(upstream.body, {
+				headers: {
+					"cache-control": upstream.ok ? host.cacheControl : ERROR_CACHE_CONTROL,
+					"content-type": (_upstream$headers$get = upstream.headers.get("content-type")) !== null && _upstream$headers$get !== void 0 ? _upstream$headers$get : "application/octet-stream"
+				},
+				status: upstream.status
+			});
+		});
+		return _GET.apply(this, arguments);
+	}
+	return {
+		GET,
+		loader
+	};
+}
+let logger;
+function getLogger() {
+	var _logger;
+	(_logger = logger) !== null && _logger !== void 0 || (logger = createLogger());
+	return logger;
+}
+function matchesMediaHost(src, normalizedHost) {
+	return src === normalizedHost || src.startsWith(`${normalizedHost}/`) || src.startsWith(`${normalizedHost}?`);
+}
+function isUnsafeSegment(segment) {
+	return segment === "" || segment === "." || segment === "..";
+}
+function errorResponse(message, status) {
+	return new Response(message, {
+		headers: { "cache-control": ERROR_CACHE_CONTROL },
+		status
+	});
+}
+//#endregion
 //#region src/middleware.ts
 /**
 * Creates an Alokai middleware wrapper that adds pathname information to request headers.
@@ -62,32 +287,6 @@ const defaultMethodsRequestConfig = {
 	} }
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.115.0/helpers/asyncToGenerator.js
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-	try {
-		var i = n[a](c), u = i.value;
-	} catch (n) {
-		e(n);
-		return;
-	}
-	i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-	return function() {
-		var t = this, e = arguments;
-		return new Promise(function(r, o) {
-			var a = n.apply(t, e);
-			function _next(n) {
-				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-			}
-			function _throw(n) {
-				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-			}
-			_next(void 0);
-		});
-	};
-}
-//#endregion
 //#region src/sdk/helpers/resolveDynamicContext.ts
 const BLACKLISTED_HEADERS = new Set(["host"]);
 function isAppRouterHeaders(headers) {
@@ -234,4 +433,4 @@ function buildModules(modules) {
 	return (context) => Object.fromEntries(Object.entries(modules).map(([key, module]) => [key, module(context)]));
 }
 //#endregion
-export { createAlokaiMiddleware, createLogger, createSdk, defineGetConfigSwitcherHeader, defineSdkConfig, defineSdkModule, env, resolveSdkOptions };
+export { createAlokaiMiddleware, createImageOptimizer, createLogger, createSdk, defineGetConfigSwitcherHeader, defineSdkConfig, defineSdkModule, env, resolveSdkOptions };

package/package.json

@@ -6,7 +6,7 @@
     "type": "git",
     "url": "git+https://github.com/vuestorefront/enterprise.git"
   },
-  "version": "7.0.2",
+  "version": "8.0.0-next.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
@@ -31,11 +31,11 @@
     "version": "cp CHANGELOG.md ../../docs/enterprise/content/storefront/6.change-log/next.md"
   },
   "dependencies": {
-    "@alokai/instrumentation-next-component": "1.0.3",
+    "@alokai/instrumentation-next-component": "1.0.4-next.0",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@alokai/connect": "^2.1.0",
+    "@alokai/connect": "2.3.0-next.7",
     "@shared/typescript-config": "1.0.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -50,13 +50,12 @@
     "vitest": "4.0.18"
   },
   "peerDependencies": {
-    "@alokai/connect": "^2.1.0",
+    "@alokai/connect": "2.3.0-next.7",
     "next": "^16.0.0",
     "react": "^19.0.0"
   },
   "engines": {
-    "npm": ">=8.0.0",
-    "node": ">=18.0.0"
+    "node": "^20.10.0 || >=22.14.0"
   },
   "publishConfig": {
     "access": "public"