@vue-storefront/nuxt 11.0.0-next.4 → 11.0.0-next.7

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { ImageOptimizerConfig } from '../dist/runtime/image-optimizer/types.js';
 
 interface MiddlewareConfig {
     /**
@@ -33,6 +34,12 @@ type LoggerOptions = Partial<{
     verbosity: LogVerbosity;
 }>;
 interface AlokaiModuleOptions {
+    /**
+     * Opt-in Alokai Image Optimizer config. When set with at least one host, the
+     * module registers an `@nuxt/image` provider and a `/img-proxy` route that
+     * proxy matching media-host images through the optimizer CDN.
+     */
+    imageOptimizer?: ImageOptimizerConfig;
     logger?: LoggerOptions;
     middleware: MiddlewareConfig;
     multistore?: MultistoreConfig;

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "alokai",
   "name": "@vue-storefront/nuxt",
-  "version": "11.0.0-next.4",
+  "version": "11.0.0-next.7",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,7 +1,9 @@
-import { defineNuxtModule, createResolver, installModule, addTypeTemplate, addImports, addTemplate, addPluginTemplate, addImportsSources, addServerHandler } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addServerHandler, addTypeTemplate, addImports, addTemplate, addPluginTemplate, addImportsSources } from '@nuxt/kit';
 import { defu } from 'defu';
 import { genInlineTypeImport } from 'knitwork';
 import { readFileSync } from 'node:fs';
+import { IMG_PROXY_PREFIX } from '../dist/runtime/image-optimizer/constants.js';
+import { resolveHosts } from '../dist/runtime/image-optimizer/resolve-hosts.js';
 
 const RUNTIME_CONFIG = {
   public: {}
@@ -38,6 +40,30 @@ const module$1 = defineNuxtModule({
       nuxt.options.runtimeConfig.public?.alokai,
       options
     );
+    if (options.imageOptimizer && Object.keys(options.imageOptimizer.hosts).length > 0) {
+      const resolvedHosts = resolveHosts(options.imageOptimizer.hosts);
+      for (const host of resolvedHosts) {
+        nuxt.options.runtimeConfig.public[host.runtimeConfigKey] = nuxt.options.runtimeConfig.public[host.runtimeConfigKey] ?? "";
+      }
+      nuxt.options.runtimeConfig.public.alokaiImageOptimizer = { hosts: resolvedHosts };
+      const nuxtOptions = nuxt.options;
+      nuxtOptions.image = {
+        ...nuxtOptions.image,
+        provider: "alokai",
+        providers: {
+          ...nuxtOptions.image?.providers,
+          alokai: {
+            provider: localResolver.resolve(
+              "./runtime/image-optimizer/provider"
+            )
+          }
+        }
+      };
+      addServerHandler({
+        handler: localResolver.resolve("./runtime/image-optimizer/handler"),
+        route: `${IMG_PROXY_PREFIX}/:host/**:path`
+      });
+    }
     Object.assign(
       nuxt.options.appConfig,
       defu(nuxt.options.appConfig, {

package/dist/runtime/image-optimizer/constants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * URL prefix the provider emits and the server route is mounted on:
+ * `/img-proxy/:host/**:path`.
+ */
+export declare const IMG_PROXY_PREFIX = "/img-proxy";
+/**
+ * Cache-Control applied to successful (2xx) upstream responses unless
+ * overridden per host via `cacheControl`.
+ */
+export declare 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.
+ */
+export declare const ERROR_CACHE_CONTROL = "no-store, no-cache, must-revalidate";
+export declare const DEFAULT_QUALITY = 85;

package/dist/runtime/image-optimizer/constants.js

@@ -0,0 +1,4 @@
+export const IMG_PROXY_PREFIX = "/img-proxy";
+export const DEFAULT_CACHE_CONTROL = "public, max-age=3600, s-maxage=86400";
+export const ERROR_CACHE_CONTROL = "no-store, no-cache, must-revalidate";
+export const DEFAULT_QUALITY = 85;

package/dist/runtime/image-optimizer/handler.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Proxy route for `/img-proxy/:host/**:path`. Reconstructs the upstream media
+ * URL the provider encoded and streams the response body back so the Alokai
+ * Image Optimizer CDN can transform it on the way to the browser.
+ */
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<Response>>;
+export default _default;

package/dist/runtime/image-optimizer/handler.js

@@ -0,0 +1,65 @@
+import { useRuntimeConfig } from "#imports";
+import { defineEventHandler, getRouterParam } from "h3";
+import { ERROR_CACHE_CONTROL } from "./constants.js";
+import { logger } from "./logger.js";
+import { variants } from "./variants.js";
+export default defineEventHandler(async (event) => {
+  const hostKey = getRouterParam(event, "host");
+  const rawPath = getRouterParam(event, "path") ?? "";
+  const publicConfig = useRuntimeConfig(event).public;
+  const host = (publicConfig.alokaiImageOptimizer?.hosts ?? []).find(
+    (entry) => entry.key === hostKey
+  );
+  if (!host) {
+    return errorResponse(`Unknown image proxy host "${hostKey}"`, 404);
+  }
+  const segments = decodeSegments(rawPath);
+  if (segments === void 0 || segments.length === 0 || segments.some(isUnsafeSegment)) {
+    return errorResponse("Invalid image path", 400);
+  }
+  const mediaHost = publicConfig[host.runtimeConfigKey]?.replace(/\/$/, "");
+  if (!mediaHost) {
+    return errorResponse(
+      `${host.runtimeConfigKey} runtime config is empty`,
+      500
+    );
+  }
+  let upstream;
+  try {
+    upstream = await fetch(
+      variants[host.variant].buildUpstreamUrl(mediaHost, segments),
+      { redirect: "manual" }
+    );
+  } catch (error) {
+    logger.error(
+      `Failed to fetch upstream image for host "${hostKey}": ${String(error)}`
+    );
+    return errorResponse("Failed to fetch upstream image", 502);
+  }
+  if (upstream.status >= 300 && upstream.status < 400) {
+    return errorResponse("Upstream redirect is not allowed", 502);
+  }
+  return new Response(upstream.body, {
+    headers: {
+      "cache-control": upstream.ok ? host.cacheControl : ERROR_CACHE_CONTROL,
+      "content-type": upstream.headers.get("content-type") ?? "application/octet-stream"
+    },
+    status: upstream.status
+  });
+});
+function decodeSegments(rawPath) {
+  try {
+    return rawPath.split("/").map((segment) => decodeURIComponent(segment));
+  } catch {
+    return void 0;
+  }
+}
+function isUnsafeSegment(segment) {
+  return segment === "" || segment === "." || segment === "..";
+}
+function errorResponse(message, status) {
+  return new Response(message, {
+    headers: { "cache-control": ERROR_CACHE_CONTROL },
+    status
+  });
+}

package/dist/runtime/image-optimizer/loader.d.ts

@@ -0,0 +1,20 @@
+import type { ResolvedImageOptimizerHost } from "./types.js";
+export interface BuildProxyUrlParams {
+    /** Resolved hosts, matched in order; first match wins. */
+    hosts: ResolvedImageOptimizerHost[];
+    /** Invoked once per host whose media host is unset, before skipping it. */
+    onMissingHost?: (host: ResolvedImageOptimizerHost) => void;
+    quality?: number | string;
+    /** Reads the media host value for a host, or `undefined`/empty when unset. */
+    resolveMediaHost: (host: ResolvedImageOptimizerHost) => string | undefined;
+    src: string;
+    width?: number | string;
+}
+/**
+ * Rewrites a media-host `src` to its `/img-proxy/{key}/...` proxy URL so the
+ * Alokai Image Optimizer CDN can transform it. Returns a non-matching `src`
+ * unchanged. Framework-agnostic so it can be unit-tested in isolation and
+ * shared between the `@nuxt/image` provider and any other caller.
+ */
+export declare function buildProxyUrl({ hosts, onMissingHost, quality, resolveMediaHost, src, width, }: BuildProxyUrlParams): string;
+export declare function matchesMediaHost(src: string, normalizedHost: string): boolean;

package/dist/runtime/image-optimizer/loader.js

@@ -0,0 +1,44 @@
+import { DEFAULT_QUALITY, IMG_PROXY_PREFIX } from "./constants.js";
+import { variants } from "./variants.js";
+export function buildProxyUrl({
+  hosts,
+  onMissingHost,
+  quality,
+  resolveMediaHost,
+  src,
+  width
+}) {
+  for (const host of hosts) {
+    const mediaHost = resolveMediaHost(host);
+    if (!mediaHost) {
+      onMissingHost?.(host);
+      continue;
+    }
+    const normalizedHost = mediaHost.replace(/\/$/, "");
+    if (!matchesMediaHost(src, normalizedHost)) {
+      continue;
+    }
+    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 = variants[host.variant].encodePath(
+      pathname,
+      new URLSearchParams(queryString)
+    );
+    if (proxyPath === void 0) {
+      return src;
+    }
+    const params = new URLSearchParams();
+    if (width) {
+      params.set("width", String(width));
+    }
+    params.set("quality", String(quality || DEFAULT_QUALITY));
+    params.set("format", "auto");
+    return `${IMG_PROXY_PREFIX}/${host.key}${proxyPath}?${params.toString()}`;
+  }
+  return src;
+}
+export function matchesMediaHost(src, normalizedHost) {
+  return src === normalizedHost || src.startsWith(`${normalizedHost}/`) || src.startsWith(`${normalizedHost}?`);
+}

package/dist/runtime/image-optimizer/logger.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Dedicated Alokai logger for the image optimizer. The provider runs in both
+ * the Vue and Nitro contexts, where the module's auto-imported `logger` is not
+ * uniformly available, so a self-contained instance keeps logging consistent
+ * (and avoids `console.*`) on both sides.
+ */
+export declare const logger: import("@alokai/connect/logger").LoggerInterface;

package/dist/runtime/image-optimizer/logger.js

@@ -0,0 +1,2 @@
+import { LoggerFactory, LoggerType } from "@alokai/connect/logger";
+export const logger = LoggerFactory.create(LoggerType.ConsolaGcp);

package/dist/runtime/image-optimizer/provider.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("@nuxt/image").ImageProvider<unknown>;
+export default _default;

package/dist/runtime/image-optimizer/provider.js

@@ -0,0 +1,28 @@
+import { useRuntimeConfig } from "#imports";
+import { defineProvider } from "@nuxt/image/runtime";
+import { buildProxyUrl } from "./loader.js";
+import { logger } from "./logger.js";
+const warnedMissingHosts = /* @__PURE__ */ new Set();
+export default defineProvider({
+  getImage(src, { modifiers = {} }) {
+    const publicConfig = useRuntimeConfig().public;
+    const hosts = publicConfig.alokaiImageOptimizer?.hosts ?? [];
+    const url = buildProxyUrl({
+      hosts,
+      onMissingHost: (host) => {
+        if (warnedMissingHosts.has(host.runtimeConfigKey)) {
+          return;
+        }
+        warnedMissingHosts.add(host.runtimeConfigKey);
+        logger.warning(
+          `${host.runtimeConfigKey} runtime config is empty, skipping image optimization for host "${host.key}".`
+        );
+      },
+      quality: modifiers.quality,
+      resolveMediaHost: (host) => publicConfig[host.runtimeConfigKey],
+      src,
+      width: modifiers.width
+    });
+    return { url };
+  }
+});

package/dist/runtime/image-optimizer/resolve-hosts.d.ts

@@ -0,0 +1,19 @@
+import type { ImageOptimizerHosts, ResolvedImageOptimizerHost } from "./types.js";
+/**
+ * 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
+ */
+export declare function resolveHosts(hosts: ImageOptimizerHosts): ResolvedImageOptimizerHost[];
+/**
+ * Derives the public runtime config key that holds the media host, e.g.
+ * `commerce` -> `commerceMediaHost`, `my-cms` -> `myCmsMediaHost`. Nuxt
+ * overrides this key at runtime from the matching `NUXT_PUBLIC_{KEY}_MEDIA_HOST`
+ * env variable, so the value is configurable per deployment without the env
+ * variable name having to be declared anywhere.
+ *
+ * @internal
+ */
+export declare function deriveRuntimeConfigKey(hostKey: string): string;

package/dist/runtime/image-optimizer/resolve-hosts.js

@@ -0,0 +1,24 @@
+import { DEFAULT_CACHE_CONTROL } from "./constants.js";
+export function resolveHosts(hosts) {
+  return Object.entries(hosts).map(([key, config]) => resolveHost(key, config));
+}
+export function deriveRuntimeConfigKey(hostKey) {
+  const camelKey = hostKey.split("-").filter(Boolean).map(
+    (word, index) => index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
+  ).join("");
+  return `${camelKey}MediaHost`;
+}
+const HOST_KEY_PATTERN = /^(?=.*[a-z])[a-z0-9-]+$/;
+function resolveHost(key, config) {
+  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 a runtime config key.`
+    );
+  }
+  return {
+    cacheControl: config.cacheControl ?? DEFAULT_CACHE_CONTROL,
+    key,
+    runtimeConfigKey: deriveRuntimeConfigKey(key),
+    variant: config.variant ?? "default"
+  };
+}

package/dist/runtime/image-optimizer/types.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Built-in URL scheme. `sapcc` encodes the `?context=` query parameter as a
+ * path segment and appends a synthetic filename when the path has none.
+ */
+export type ImageOptimizerVariant = "default" | "sapcc";
+export interface ImageOptimizerHostConfig {
+    /**
+     * Cache-Control for successful (2xx) upstream responses.
+     *
+     * @default "public, max-age=3600, s-maxage=86400"
+     */
+    cacheControl?: string;
+    /**
+     * Built-in URL scheme used to encode and reconstruct the proxied path.
+     *
+     * @default "default"
+     */
+    variant?: ImageOptimizerVariant;
+}
+/**
+ * Media hosts whose images should be optimized, keyed by host key. The key
+ * becomes the `:host` URL segment and the media host value is read at runtime
+ * from the matching `NUXT_PUBLIC_{KEY}_MEDIA_HOST` env variable.
+ */
+export type ImageOptimizerHosts = Record<string, ImageOptimizerHostConfig>;
+export interface ImageOptimizerConfig {
+    hosts: ImageOptimizerHosts;
+}
+/**
+ * Fully-resolved per-host config. Serialized into the public runtime config so
+ * both the `@nuxt/image` provider and the proxy server route can read it.
+ *
+ * @internal
+ */
+export interface ResolvedImageOptimizerHost {
+    cacheControl: string;
+    key: string;
+    /** Public runtime config key holding the resolved media host value. */
+    runtimeConfigKey: string;
+    variant: ImageOptimizerVariant;
+}
+/**
+ * Shape of `useRuntimeConfig().public` as the image optimizer reads it: the
+ * resolved hosts plus the dynamically-keyed media host values.
+ *
+ * @internal
+ */
+export interface ImageOptimizerPublicConfig {
+    [runtimeConfigKey: string]: unknown;
+    alokaiImageOptimizer?: {
+        hosts?: ResolvedImageOptimizerHost[];
+    };
+}
+/**
+ * Builds the path emitted after `/img-proxy/{key}` on the provider (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`.
+ * Returns the proxy path (starting with `/`), or `undefined` to skip proxying
+ * and return the original `src` unchanged.
+ *
+ * @internal
+ */
+export type EncodePathHook = (pathname: string, searchParams: URLSearchParams) => string | undefined;
+/**
+ * Rebuilds the upstream URL on the server-route side. Receives the media host
+ * (without trailing slash) and the decoded path segments. Returns an absolute
+ * URL.
+ *
+ * @internal
+ */
+export type BuildUpstreamUrlHook = (mediaHost: string, segments: string[]) => string;

package/dist/runtime/image-optimizer/variants.d.ts

@@ -0,0 +1,7 @@
+import type { BuildUpstreamUrlHook, EncodePathHook, ImageOptimizerVariant } from "./types.js";
+interface VariantImplementation {
+    buildUpstreamUrl: BuildUpstreamUrlHook;
+    encodePath: EncodePathHook;
+}
+export declare const variants: Record<ImageOptimizerVariant, VariantImplementation>;
+export {};

package/dist/runtime/image-optimizer/variants.js

@@ -0,0 +1,29 @@
+const defaultVariant = {
+  buildUpstreamUrl: (mediaHost, segments) => `${mediaHost}/${joinEncoded(segments)}`,
+  // An empty pathname (src equal to the bare media host) could never match
+  // the route, so pass it through instead of emitting a dead URL.
+  encodePath: (pathname) => pathname === "" ? void 0 : pathname
+};
+const sapccVariant = {
+  buildUpstreamUrl: (mediaHost, segments) => {
+    const [context = "", ...path] = segments;
+    return `${mediaHost}/${joinEncoded(path)}?context=${encodeURIComponent(context)}`;
+  },
+  encodePath: (pathname, searchParams) => {
+    const context = searchParams.get("context");
+    if (!context) {
+      return void 0;
+    }
+    const hasExtension = (pathname.split("/").pop() ?? "").includes(".");
+    const separator = pathname.endsWith("/") ? "" : "/";
+    const safePathname = hasExtension ? pathname : `${pathname}${separator}image.png`;
+    return `/${encodeURIComponent(context)}${safePathname}`;
+  }
+};
+export const variants = {
+  default: defaultVariant,
+  sapcc: sapccVariant
+};
+function joinEncoded(segments) {
+  return segments.map((segment) => encodeURIComponent(segment)).join("/");
+}

package/dist/runtime/types.template

@@ -42,8 +42,20 @@ export type LoggerOptions = Partial<{
   includeStackTrace: boolean;
 }>;
 
+export type ImageOptimizerVariant = "default" | "sapcc";
+
+export interface ImageOptimizerHostConfig {
+  variant?: ImageOptimizerVariant;
+  cacheControl?: string;
+}
+
+export interface ImageOptimizerConfig {
+  hosts: Record<string, ImageOptimizerHostConfig>;
+}
+
 export interface AlokaiModuleOptions {
   middleware: MiddlewareConfig;
   multistore?: MultistoreConfig;
   logger?: LoggerOptions;
+  imageOptimizer?: ImageOptimizerConfig;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/nuxt",
-  "version": "11.0.0-next.4",
+  "version": "11.0.0-next.7",
   "description": "Alokai dedicated features for Nuxt",
   "license": "MIT",
   "repository": {
@@ -24,6 +24,7 @@
     "lint:fix": "eslint --fix",
     "format": "prettier --write .",
     "prepare": "nuxi prepare",
+    "test:unit": "vitest run",
     "version": "cp CHANGELOG.md ../../docs/enterprise/content/storefront/6.change-log/nuxt.md"
   },
   "dependencies": {
@@ -36,17 +37,25 @@
     "pinia": "^3.0.4"
   },
   "devDependencies": {
-    "@alokai/connect": "2.3.0-next.7",
+    "@alokai/connect": "2.3.0-next.10",
     "@nuxt/devtools": "^3.0.0",
+    "@nuxt/image": "^2.0.0",
     "@nuxt/module-builder": "^1.0.2",
     "@types/node": "^22.0.0",
     "eslint": "9.23.0",
     "nuxt": "4.3.0",
     "prettier": "3.3.2",
-    "typescript": "5.6.2"
+    "typescript": "5.6.2",
+    "vitest": "4.0.18"
   },
   "peerDependencies": {
-    "@alokai/connect": "2.3.0-next.7"
+    "@alokai/connect": "2.3.0-next.10",
+    "@nuxt/image": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/image": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"