@doswiftly/storefront-sdk 22.8.0 → 22.8.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 22.8.1
+
+### Patch Changes
+
+- 61a2841: Fix: images imported in code are optimized again when your build serves static assets from a CDN domain.
+
+  An image you import in code (`import hero from './hero.webp'`) becomes a content-hashed file under `/_next/static/media/`. When your build serves static assets from a CDN domain (`assetPrefix` / `getAssetPrefix()`), Next.js rewrites the `<Image>` `src` to an absolute CDN URL before the loader runs. The loader did not recognize that form, so every `srcset` entry pointed at the full-size original — no resizing or format negotiation.
+
+  The loader now recognizes code-imported images in that absolute form and routes them through the image CDN, so each `srcset` width is resized again — the same behavior as a build without `assetPrefix`. Product images and `public/` images were never affected.
+
+  No API changes — update the package and redeploy.
+
+  (`@doswiftly/storefront-operations` is version-synced with the SDK; no operation changes.)
+
 ## 22.8.0
 
 ### Minor Changes

package/dist/core/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/core/image.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,gFAAgF;IAChF,GAAG,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,eAAe;IACf,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,6BAA6B,CAAC;AAE7D,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC,kFAAkF;IAClF,MAAM,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,OAAO,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACxC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,uDAAwD,CAAC;AA2C9F,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,iBAAiB,EACzB,IAAI,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACnC,MAAM,CAwDR;AAOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAiD5F"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/core/image.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,gFAAgF;IAChF,GAAG,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,eAAe;IACf,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,6BAA6B,CAAC;AAE7D,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC,kFAAkF;IAClF,MAAM,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,OAAO,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACxC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,uDAAwD,CAAC;AAmF9F,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,iBAAiB,EACzB,IAAI,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACnC,MAAM,CAiER;AAOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAiD5F"}

package/dist/core/image.js

@@ -69,6 +69,44 @@ const NEXT_STATIC_MEDIA_PREFIX = '/_next/static/media/';
 function nextStaticMediaSuffix(pathname) {
     return pathname.startsWith(NEXT_STATIC_MEDIA_PREFIX) ? pathname.slice(NEXT_STATIC_MEDIA_PREFIX.length) : null;
 }
+/** Scheme + authority of an absolute http(s) URL — everything up to the first path `/`. */
+const ABSOLUTE_URL_AUTHORITY = /^https?:\/\/[^/]+/i;
+/**
+ * Suffix after this shop's `/s/{shopId}/_next/static/media/` when `src` is an ABSOLUTE URL — a
+ * code-imported image whose `src` carries the storefront's Next.js `assetPrefix`
+ * (`{assetPrefixBase}/s/{shopId}/_next/static/media/{suffix}`, which Next prepends before the loader
+ * runs). `null` for relative srcs, other shops' assets, and foreign hosts. Anchored on `/s/{shopId}/`
+ * so a foreign host that merely embeds the marker mid-path is rejected; matched on path structure, not
+ * host — the asset-prefix CDN host is not part of the loader config, only the resize base is.
+ *
+ * The path is taken from the RAW `src` (strip scheme/authority + query/hash), NOT via `URL.pathname`:
+ * that percent-encodes the path, which would double-encode in {@link buildNextMediaCdnUrl}. The
+ * root-relative counterpart {@link nextStaticMediaSuffix} likewise feeds a raw path, so both `src`
+ * forms of one import — relative (no `assetPrefix`) and absolute (with it) — encode identically.
+ */
+function absoluteNextMediaSuffix(src, shopId) {
+    // Fast reject before any allocation: must be an absolute http(s) URL that mentions the media segment.
+    if (!ABSOLUTE_URL_AUTHORITY.test(src) || !src.includes(NEXT_STATIC_MEDIA_PREFIX))
+        return null;
+    const path = src.replace(ABSOLUTE_URL_AUTHORITY, '').replace(/[?#].*$/, '');
+    const prefix = `/s/${shopId}${NEXT_STATIC_MEDIA_PREFIX}`;
+    return path.startsWith(prefix) ? path.slice(prefix.length) : null;
+}
+/**
+ * Image-CDN URL for a Next build-output media image (content-hashed → the hash IS the version, so the
+ * key is immutable: only the per-srcset `width`, no `?v=`). The same key shape the deploy mirror
+ * writes, so the resize CDN finds the file. Shared by both `src` forms of one import: root-relative
+ * ({@link nextStaticMediaSuffix}) and absolute `assetPrefix` ({@link absoluteNextMediaSuffix}).
+ *
+ * `encodeURIComponent` keeps `..` (unreserved) — harmless while the image CDN is unsigned + public;
+ * if HMAC signing is ever added, strip `..` segments here AND in the public/ branch.
+ *
+ * @sync-with backend deploy mirror (`_next/static/media/` mirrored 1:1 into the image-CDN key)
+ */
+function buildNextMediaCdnUrl(base, shopId, suffix, width) {
+    const encoded = suffix.split('/').map(encodeURIComponent).join('/');
+    return `${base}/s/${shopId}/_next/static/media/${encoded}?width=${width}`;
+}
 export function buildImageLoaderUrl(config, args) {
     // `||` (not `??`): an empty injected base must still fall back to the platform default.
     const base = (config.cdnBase || IMAGE_CDN_BASE_URL).replace(/\/+$/, '');
@@ -84,6 +122,18 @@ export function buildImageLoaderUrl(config, args) {
             return src;
         }
     }
+    // (1b) Absolute build-output media URL — a code-imported image whose `src` carries the storefront's
+    //      next.config `assetPrefix` (`{base}/s/{shopId}/_next/static/media/...`, prepended by Next
+    //      before this loader). Routed to the SAME image-CDN key as the root-relative case (2a) — the two
+    //      are just the assetPrefix / no-assetPrefix forms of one import. Fonts (`.woff2`) share
+    //      `_next/static/media/` but are not images, so the extension gate leaves them to load raw from
+    //      the asset CDN (they are not mirrored to the resize CDN).
+    if (config.shopId) {
+        const mediaSuffix = absoluteNextMediaSuffix(src, config.shopId);
+        if (mediaSuffix !== null && LOADER_IMAGE_EXTENSIONS.test(mediaSuffix)) {
+            return buildNextMediaCdnUrl(base, config.shopId, mediaSuffix, width);
+        }
+    }
     // (2) Local root-relative image — NOT protocol-relative (`//host`). Two sub-cases:
     //     (2a) a Next build-output media image (`/_next/static/media/*`), and (2b) a `public/` image.
     if (src.startsWith('/') && !src.startsWith('//')) {
@@ -96,14 +146,10 @@ export function buildImageLoaderUrl(config, args) {
         // extension gate is the safety that keeps framework build chunks out of the resize CDN.
         if (!LOADER_IMAGE_EXTENSIONS.test(pathname))
             return src;
-        // (2a) Next build-output media image. The content hash in the filename IS the version, so
-        // the CDN key is immutable → no `?v=`. The deploy mirrors these to `s/{shopId}/_next/static/media/`.
+        // (2a) Next build-output media image — same image-CDN key as the absolute (assetPrefix) form (1b).
         const mediaSuffix = nextStaticMediaSuffix(pathname);
         if (mediaSuffix !== null) {
-            // `encodeURIComponent` keeps `..` (unreserved) — harmless while the image CDN is unsigned +
-            // public; if HMAC signing is ever added, strip `..` segments here AND in the public/ branch.
-            const encoded = mediaSuffix.split('/').map(encodeURIComponent).join('/');
-            return `${base}/s/${config.shopId}/_next/static/media/${encoded}?width=${width}`;
+            return buildNextMediaCdnUrl(base, config.shopId, mediaSuffix, width);
         }
         // Any other framework build output (hashed/immutable, NOT mirrored) → untouched.
         const buildPrefixes = config.buildAssetPrefixes ?? FRAMEWORK_BUILD_PREFIXES;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doswiftly/storefront-sdk",
-  "version": "22.8.0",
+  "version": "22.8.1",
   "description": "Storefront runtime SDK for DoSwiftly Commerce — layered transport, middleware pipeline, React providers, Zustand stores, cache strategies. 0 runtime dependencies in core.",
   "type": "module",
   "sideEffects": false,