@doswiftly/storefront-sdk 22.7.0 → 22.8.1

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # 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
+
+- 9039ba1: Add `getAssetPrefix()` for serving your build's static assets from a CDN domain.
+
+  **Why**: A build's JavaScript, CSS, and font files (`/_next/static/*`) are content-hashed and immutable. Serving them from a CDN domain — rather than your app origin — makes them cache-friendly and keeps them off your storefront server's request path.
+
+  **Additive (backward-compatible)**: a new export from `@doswiftly/storefront-sdk/next`. Nothing changes until you opt in.
+
+  **Usage** — add two lines to `next.config`:
+
+  ```ts
+  // next.config.ts
+  import { getAssetPrefix } from "@doswiftly/storefront-sdk/next";
+
+  const nextConfig = {
+    assetPrefix: getAssetPrefix(),
+    crossOrigin: "anonymous",
+    // ...your existing config
+  };
+  export default nextConfig;
+  ```
+
+  `getAssetPrefix()` returns the CDN base injected by the deploy pipeline (namespaced to your shop), or `undefined` in development and on deploys without a CDN configured — so `next dev` and un-provisioned deploys keep serving assets from the app origin. Pair it with `crossOrigin: 'anonymous'`: the assets then load cross-origin and the CDN sends the matching CORS header (required for fonts).
+
+  **Migration checklist for existing storefronts**:
+  - [ ] Add `assetPrefix: getAssetPrefix()` and `crossOrigin: 'anonymous'` to `next.config`.
+  - [ ] Redeploy — the next build's static assets are served from the CDN.
+
+  (`@doswiftly/storefront-operations` is version-synced with the SDK; no operation changes in this release.)
+
 ## 22.7.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

@@ -59,16 +59,54 @@ const LOADER_IMAGE_EXTENSIONS = /\.(png|jpe?g|webp|avif|gif)$/i;
  * Path prefix of Next.js build-output **media** (images imported in code, e.g.
  * `import hero from './hero.webp'` → content-hashed bundle). UNLIKE the rest of `/_next/*`
  * (JS/CSS chunks, left untouched), media images ARE routed through the resize CDN: the deploy
- * mirrors them to `s/{shopId}/_next-media/{suffix}`. The content hash in the filename is the
- * version, so the CDN key is immutable (no `?v=` cache-bust).
+ * mirrors them to `s/{shopId}/_next/static/media/{suffix}` (the path is kept 1:1). The content
+ * hash in the filename is the version, so the CDN key is immutable (no `?v=` cache-bust).
  *
- * @sync-with backend deploy mirror (`_next/static/media/` prefix → `_next-media/` R2 key)
+ * @sync-with backend deploy mirror (`_next/static/media/` path mirrored 1:1 into the R2 key)
  */
 const NEXT_STATIC_MEDIA_PREFIX = '/_next/static/media/';
 /** Suffix after {@link NEXT_STATIC_MEDIA_PREFIX}, or `null` if `pathname` is not a Next media path. */
 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-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-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/dist/next/asset-prefix.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Next.js `assetPrefix` for DoSwiftly storefronts.
+ *
+ * Wire it once:
+ * ```ts
+ * // next.config.ts
+ * import { getAssetPrefix } from '@doswiftly/storefront-sdk/next';
+ * const nextConfig = { assetPrefix: getAssetPrefix(), crossOrigin: 'anonymous' };
+ * ```
+ *
+ * Your static assets (`/_next/static/*` — JavaScript, CSS, and fonts) are then served from your
+ * storefront's own CDN domain instead of the app origin: cache-friendly, immutable, and off the
+ * request path of your storefront server. The CDN base is injected by the DoSwiftly deploy
+ * pipeline — you don't configure it.
+ *
+ * Returns `undefined` in development (so `doswiftly dev` serves assets locally for fast refresh) and
+ * whenever the pipeline hasn't injected a CDN base (so an un-provisioned deploy keeps serving
+ * assets from the app origin). Either way there is no setup and nothing to break.
+ *
+ * Pair it with `crossOrigin: 'anonymous'`: assets then load cross-origin and the CDN sends the
+ * matching CORS header (required for fonts).
+ */
+export declare function getAssetPrefix(): string | undefined;
+//# sourceMappingURL=asset-prefix.d.ts.map

package/dist/next/asset-prefix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset-prefix.d.ts","sourceRoot":"","sources":["../../src/next/asset-prefix.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,IAAI,MAAM,GAAG,SAAS,CAKnD"}

package/dist/next/asset-prefix.js

@@ -0,0 +1,29 @@
+/**
+ * Next.js `assetPrefix` for DoSwiftly storefronts.
+ *
+ * Wire it once:
+ * ```ts
+ * // next.config.ts
+ * import { getAssetPrefix } from '@doswiftly/storefront-sdk/next';
+ * const nextConfig = { assetPrefix: getAssetPrefix(), crossOrigin: 'anonymous' };
+ * ```
+ *
+ * Your static assets (`/_next/static/*` — JavaScript, CSS, and fonts) are then served from your
+ * storefront's own CDN domain instead of the app origin: cache-friendly, immutable, and off the
+ * request path of your storefront server. The CDN base is injected by the DoSwiftly deploy
+ * pipeline — you don't configure it.
+ *
+ * Returns `undefined` in development (so `doswiftly dev` serves assets locally for fast refresh) and
+ * whenever the pipeline hasn't injected a CDN base (so an un-provisioned deploy keeps serving
+ * assets from the app origin). Either way there is no setup and nothing to break.
+ *
+ * Pair it with `crossOrigin: 'anonymous'`: assets then load cross-origin and the CDN sends the
+ * matching CORS header (required for fonts).
+ */
+export function getAssetPrefix() {
+    // Development must serve assets from the dev server (fast refresh) — never the CDN.
+    if (process.env.NODE_ENV === "development")
+        return undefined;
+    // Literal member access (read at build time inside next.config). Empty / unset → app origin.
+    return process.env.DOSWIFTLY_ASSET_PREFIX || undefined;
+}

package/dist/next/index.d.ts

@@ -6,4 +6,5 @@
  * core stays portable to Node, Edge, Deno, and Bun.
  */
 export { createImageLoader, type NextImageLoaderArgs } from './image-loader';
+export { getAssetPrefix } from './asset-prefix';
 //# sourceMappingURL=index.d.ts.map

package/dist/next/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/next/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/next/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/next/index.js

@@ -6,6 +6,7 @@
  * core stays portable to Node, Edge, Deno, and Bun.
  */
 export { createImageLoader } from './image-loader';
+export { getAssetPrefix } from './asset-prefix';
 // The pure builder + its config/base (`buildImageLoaderUrl`, `IMAGE_CDN_BASE_URL`,
 // `ImageLoaderConfig`) are framework-agnostic and live on the core entry
 // (`@doswiftly/storefront-sdk`) — import them from there, not from `/next`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doswiftly/storefront-sdk",
-  "version": "22.7.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,