@doswiftly/storefront-sdk 4.2.0 → 4.3.0

package/dist/core/image.d.ts

@@ -35,21 +35,30 @@ export interface ImageLoaderParams {
     quality?: number;
 }
 /**
- * Next.js image loader for DoSwiftly storefronts.
- *
- * Zero configuration — works out of the box with GraphQL image URLs.
- * Appends resize query params (?width=&quality=&format=) to the URL
- * that backend already returned via GraphQL.
- *
- * Width is quantized to preset breakpoints for optimal CDN cache.
- * No HMAC, no env vars, no setup — like Shopify Hydrogen's image loader.
+ * Image format for imgproxy output.
+ */
+export type ImageFormat = 'webp' | 'avif' | 'jpeg';
+/**
+ * Default image loader — WebP format. Used as global loaderFile in next.config.ts.
+ * Zero configuration: works out-of-the-box with GraphQL image URLs.
+ * Width quantized to preset breakpoints for optimal CDN cache.
  *
  * @example
  * ```tsx
  * import { storefrontImageLoader } from '@doswiftly/storefront-sdk';
- *
  * <Image loader={storefrontImageLoader} src={image.url} width={800} alt="..." />
  * ```
  */
 export declare function storefrontImageLoader({ src, width, quality }: ImageLoaderParams): string;
+/**
+ * Create a custom loader with specific format (avif, jpeg).
+ * Use as per-component override when you need a different format than default WebP.
+ *
+ * @example
+ * ```tsx
+ * const avifLoader = createImageLoader('avif');
+ * <Image loader={avifLoader} src={image.url} width={800} alt="..." />
+ * ```
+ */
+export declare function createImageLoader(format: ImageFormat): (params: ImageLoaderParams) => string;
 //# sourceMappingURL=image.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/core/image.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,oDAAoD;IACpD,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;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAeD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,iBAAiB,GAAG,MAAM,CAKxF"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/core/image.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,oDAAoD;IACpD,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;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAenD;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,iBAAiB,GAAG,MAAM,CAExF;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,WAAW,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,MAAM,CAE5F"}

package/dist/core/image.js

@@ -24,25 +24,45 @@ function nearestPresetWidth(requested) {
     return PRESET_WIDTHS[PRESET_WIDTHS.length - 1];
 }
 /**
- * Next.js image loader for DoSwiftly storefronts.
- *
- * Zero configuration — works out of the box with GraphQL image URLs.
- * Appends resize query params (?width=&quality=&format=) to the URL
- * that backend already returned via GraphQL.
- *
- * Width is quantized to preset breakpoints for optimal CDN cache.
- * No HMAC, no env vars, no setup — like Shopify Hydrogen's image loader.
+ * Default image loader — WebP format. Used as global loaderFile in next.config.ts.
+ * Zero configuration: works out-of-the-box with GraphQL image URLs.
+ * Width quantized to preset breakpoints for optimal CDN cache.
  *
  * @example
  * ```tsx
  * import { storefrontImageLoader } from '@doswiftly/storefront-sdk';
- *
  * <Image loader={storefrontImageLoader} src={image.url} width={800} alt="..." />
  * ```
  */
 export function storefrontImageLoader({ src, width, quality }) {
+    return buildImgproxyUrl(src, width, quality);
+}
+/**
+ * Create a custom loader with specific format (avif, jpeg).
+ * Use as per-component override when you need a different format than default WebP.
+ *
+ * @example
+ * ```tsx
+ * const avifLoader = createImageLoader('avif');
+ * <Image loader={avifLoader} src={image.url} width={800} alt="..." />
+ * ```
+ */
+export function createImageLoader(format) {
+    return ({ src, width, quality }) => buildImgproxyUrl(src, width, quality, format);
+}
+function buildImgproxyUrl(src, width, quality, format = 'webp') {
     const w = nearestPresetWidth(width);
-    const q = quality || 85;
-    const separator = src.includes('?') ? '&' : '?';
-    return `${src}${separator}width=${w}&quality=${q}&format=webp`;
+    const q = quality ?? 85;
+    if (!src.startsWith('http')) {
+        return src;
+    }
+    try {
+        const url = new URL(src);
+        const path = url.pathname.slice(1);
+        return `${url.origin}/rs:fit:${w}:0:0/q:${q}/f:${format}/plain/${path}`;
+    }
+    catch {
+        // Malformed URL — return as-is, let browser handle it
+        return src;
+    }
 }

package/dist/core/index.d.ts

@@ -61,7 +61,7 @@ export { CART_COOKIE_NAME, CART_COOKIE_MAX_AGE } from './cart/cookie-config';
 export { matchesRoute, type RouteProtectionConfig } from './auth/routes';
 export { createSetTokenHandler, createClearTokenHandler } from './auth/handlers';
 export { createAuthTokenClient, type AuthTokenClient } from './auth/token-client';
-export { storefrontImageLoader, type ImageData, type ImageLoaderParams, } from './image';
+export { storefrontImageLoader, createImageLoader, type ImageData, type ImageLoaderParams, type ImageFormat, } from './image';
 export { getOperationName } from './client/operation-name';
 export { hashQuery } from './client/hash';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"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"}

package/dist/core/index.js

@@ -75,7 +75,7 @@ export { createSetTokenHandler, createClearTokenHandler } from './auth/handlers'
 // Auth token client (client-side fetch helpers)
 export { createAuthTokenClient } from './auth/token-client';
 // Image utilities
-export { storefrontImageLoader, } from './image';
+export { storefrontImageLoader, createImageLoader, } from './image';
 // Utilities
 export { getOperationName } from './client/operation-name';
 export { hashQuery } from './client/hash';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doswiftly/storefront-sdk",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Storefront runtime SDK for DoSwiftly Commerce — layered transport, middleware pipeline, React providers, Zustand stores, cache strategies. 0 runtime dependencies in core.",
   "type": "module",
   "types": "dist/core/index.d.ts",

package/src/core/image.ts

@@ -37,6 +37,11 @@ export interface ImageLoaderParams {
   quality?: number;
 }
 
+/**
+ * Image format for imgproxy output.
+ */
+export type ImageFormat = 'webp' | 'avif' | 'jpeg';
+
 /**
  * Preset widths for CDN cache optimization.
  * Loader quantizes requested width to the nearest preset — limits cache variants.
@@ -51,25 +56,48 @@ function nearestPresetWidth(requested: number): number {
 }
 
 /**
- * Next.js image loader for DoSwiftly storefronts.
- *
- * Zero configuration — works out of the box with GraphQL image URLs.
- * Appends resize query params (?width=&quality=&format=) to the URL
- * that backend already returned via GraphQL.
- *
- * Width is quantized to preset breakpoints for optimal CDN cache.
- * No HMAC, no env vars, no setup — like Shopify Hydrogen's image loader.
+ * Default image loader — WebP format. Used as global loaderFile in next.config.ts.
+ * Zero configuration: works out-of-the-box with GraphQL image URLs.
+ * Width quantized to preset breakpoints for optimal CDN cache.
  *
  * @example
  * ```tsx
  * import { storefrontImageLoader } from '@doswiftly/storefront-sdk';
- *
  * <Image loader={storefrontImageLoader} src={image.url} width={800} alt="..." />
  * ```
  */
 export function storefrontImageLoader({ src, width, quality }: ImageLoaderParams): string {
+  return buildImgproxyUrl(src, width, quality);
+}
+
+/**
+ * Create a custom loader with specific format (avif, jpeg).
+ * Use as per-component override when you need a different format than default WebP.
+ *
+ * @example
+ * ```tsx
+ * const avifLoader = createImageLoader('avif');
+ * <Image loader={avifLoader} src={image.url} width={800} alt="..." />
+ * ```
+ */
+export function createImageLoader(format: ImageFormat): (params: ImageLoaderParams) => string {
+  return ({ src, width, quality }) => buildImgproxyUrl(src, width, quality, format);
+}
+
+function buildImgproxyUrl(src: string, width: number, quality?: number, format: ImageFormat = 'webp'): string {
   const w = nearestPresetWidth(width);
-  const q = quality || 85;
-  const separator = src.includes('?') ? '&' : '?';
-  return `${src}${separator}width=${w}&quality=${q}&format=webp`;
+  const q = quality ?? 85;
+
+  if (!src.startsWith('http')) {
+    return src;
+  }
+
+  try {
+    const url = new URL(src);
+    const path = url.pathname.slice(1);
+    return `${url.origin}/rs:fit:${w}:0:0/q:${q}/f:${format}/plain/${path}`;
+  } catch {
+    // Malformed URL — return as-is, let browser handle it
+    return src;
+  }
 }

package/src/core/index.ts

@@ -169,8 +169,10 @@ export { createAuthTokenClient, type AuthTokenClient } from './auth/token-client
 // Image utilities
 export {
   storefrontImageLoader,
+  createImageLoader,
   type ImageData,
   type ImageLoaderParams,
+  type ImageFormat,
 } from './image';
 
 // Utilities