@doswiftly/storefront-sdk 4.2.0 → 4.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -14
- package/dist/core/image.d.ts +4 -37
- package/dist/core/image.d.ts.map +1 -1
- package/dist/core/image.js +4 -45
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/index.js +0 -2
- package/package.json +1 -1
- package/src/core/image.ts +4 -57
- package/src/core/index.ts +2 -6
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ Layered runtime SDK for DoSwiftly Commerce storefronts. Hydrogen-aligned archite
|
|
|
7
7
|
```
|
|
8
8
|
@doswiftly/storefront-sdk
|
|
9
9
|
├── core (.) — Framework-agnostic: transport, middleware, CartClient, AuthClient,
|
|
10
|
-
│ cache, format utilities, image
|
|
10
|
+
│ cache, format utilities, image types, sanitizeHtml,
|
|
11
11
|
│ normalizeConnection, auth cookie config/handlers/token client, route matching
|
|
12
12
|
├── react (./react) — React adapter: providers, Zustand stores (Context-based), hooks,
|
|
13
13
|
│ useHydrated, useDebouncedValue, createStoreContext
|
|
@@ -93,7 +93,7 @@ const { currency, setCurrency } = useCurrencyStore();
|
|
|
93
93
|
|
|
94
94
|
| Path | Description | Dependencies |
|
|
95
95
|
|------|-------------|-------------|
|
|
96
|
-
| `@doswiftly/storefront-sdk` | Core: transport, middleware, clients, errors, format, image
|
|
96
|
+
| `@doswiftly/storefront-sdk` | Core: transport, middleware, clients, errors, format, image types, sanitize, auth handlers, route matching | **0** |
|
|
97
97
|
| `@doswiftly/storefront-sdk/react` | Providers, hooks, store hooks, useHydrated, useDebouncedValue, createStoreContext | react, zustand |
|
|
98
98
|
| `@doswiftly/storefront-sdk/react/server` | Server-side client factory | react |
|
|
99
99
|
| `@doswiftly/storefront-sdk/cache` | Cache strategy functions | **0** |
|
|
@@ -213,19 +213,11 @@ formatDate(new Date()); // "Dec 9, 2025"
|
|
|
213
213
|
formatPercentage(0.15); // "15%"
|
|
214
214
|
```
|
|
215
215
|
|
|
216
|
-
### Image
|
|
216
|
+
### Image Types
|
|
217
217
|
|
|
218
|
-
|
|
218
|
+
GraphQL API returns ready-to-use CDN URLs via `url(transform: { maxWidth: 800 })`. No client-side loader needed.
|
|
219
219
|
|
|
220
|
-
|
|
221
|
-
// For custom frameworks (Svelte, Astro, etc.) — import the loader function directly:
|
|
222
|
-
import { storefrontImageLoader } from '@doswiftly/storefront-sdk';
|
|
223
|
-
|
|
224
|
-
const url = storefrontImageLoader({ src: image.url, width: 800, quality: 85 });
|
|
225
|
-
// → image.url + "?width=800&quality=85&format=webp"
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
Width quantized to Next.js-aligned breakpoints for CDN cache efficiency. `ImageData` type matches GraphQL `Image` fragment: `{ url, altText?, width?, height?, id? }`.
|
|
220
|
+
`ImageData` type matches GraphQL `Image` fragment: `{ url, altText?, width?, height?, id? }`.
|
|
229
221
|
|
|
230
222
|
### HTML Sanitizer
|
|
231
223
|
|
|
@@ -456,7 +448,7 @@ SDK provides: Template owns:
|
|
|
456
448
|
├── Providers + Zustand stores ├── lib/graphql/fragments/
|
|
457
449
|
├── Format utilities ├── hooks/use-cart-di.ts (CartActions DI impl)
|
|
458
450
|
├── sanitizeHtml ├── hooks/use-cart-actions.ts (UX wrapper)
|
|
459
|
-
├──
|
|
451
|
+
├── ImageData type ├── components/product/product-image.tsx
|
|
460
452
|
├── normalizeConnection ├── stores/ (checkout, wishlist via createStoreContext)
|
|
461
453
|
├── Auth handlers + token client ├── lib/auth/routes.ts (route config)
|
|
462
454
|
├── useHydrated + useDebouncedValue
|
package/dist/core/image.d.ts
CHANGED
|
@@ -1,21 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Image
|
|
2
|
+
* Image types for DoSwiftly storefronts.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```typescript
|
|
9
|
-
* import { storefrontImageLoader, type ImageData } from '@doswiftly/storefront-sdk';
|
|
10
|
-
*
|
|
11
|
-
* <Image loader={storefrontImageLoader} src={product.featuredImage.url} width={800} alt="..." />
|
|
12
|
-
* ```
|
|
4
|
+
* GraphQL API returns ready-to-use CDN URLs with transform query params.
|
|
5
|
+
* No client-side loader needed — use `url(transform: { maxWidth: 800 })` in queries.
|
|
13
6
|
*/
|
|
14
7
|
/**
|
|
15
8
|
* Image data from GraphQL API (matches Image type in storefront schema).
|
|
16
9
|
*/
|
|
17
10
|
export interface ImageData {
|
|
18
|
-
/** Image URL from GraphQL (ready-to-use CDN URL) */
|
|
11
|
+
/** Image URL from GraphQL (ready-to-use CDN URL, optionally with transform query params) */
|
|
19
12
|
url: string;
|
|
20
13
|
/** Alt text for accessibility + SEO */
|
|
21
14
|
altText?: string | null;
|
|
@@ -26,30 +19,4 @@ export interface ImageData {
|
|
|
26
19
|
/** Image ID */
|
|
27
20
|
id?: string | null;
|
|
28
21
|
}
|
|
29
|
-
/**
|
|
30
|
-
* Next.js Image loader function signature.
|
|
31
|
-
*/
|
|
32
|
-
export interface ImageLoaderParams {
|
|
33
|
-
src: string;
|
|
34
|
-
width: number;
|
|
35
|
-
quality?: number;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Next.js image loader for DoSwiftly storefronts.
|
|
39
|
-
*
|
|
40
|
-
* Zero configuration — works out of the box with GraphQL image URLs.
|
|
41
|
-
* Appends resize query params (?width=&quality=&format=) to the URL
|
|
42
|
-
* that backend already returned via GraphQL.
|
|
43
|
-
*
|
|
44
|
-
* Width is quantized to preset breakpoints for optimal CDN cache.
|
|
45
|
-
* No HMAC, no env vars, no setup — like Shopify Hydrogen's image loader.
|
|
46
|
-
*
|
|
47
|
-
* @example
|
|
48
|
-
* ```tsx
|
|
49
|
-
* import { storefrontImageLoader } from '@doswiftly/storefront-sdk';
|
|
50
|
-
*
|
|
51
|
-
* <Image loader={storefrontImageLoader} src={image.url} width={800} alt="..." />
|
|
52
|
-
* ```
|
|
53
|
-
*/
|
|
54
|
-
export declare function storefrontImageLoader({ src, width, quality }: ImageLoaderParams): string;
|
|
55
22
|
//# sourceMappingURL=image.d.ts.map
|
package/dist/core/image.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/core/image.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/core/image.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,4FAA4F;IAC5F,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"}
|
package/dist/core/image.js
CHANGED
|
@@ -1,48 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Image
|
|
2
|
+
* Image types for DoSwiftly storefronts.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```typescript
|
|
9
|
-
* import { storefrontImageLoader, type ImageData } from '@doswiftly/storefront-sdk';
|
|
10
|
-
*
|
|
11
|
-
* <Image loader={storefrontImageLoader} src={product.featuredImage.url} width={800} alt="..." />
|
|
12
|
-
* ```
|
|
13
|
-
*/
|
|
14
|
-
/**
|
|
15
|
-
* Preset widths for CDN cache optimization.
|
|
16
|
-
* Loader quantizes requested width to the nearest preset — limits cache variants.
|
|
17
|
-
*/
|
|
18
|
-
const PRESET_WIDTHS = [150, 320, 640, 750, 828, 1080, 1200, 1600, 1920, 2048];
|
|
19
|
-
function nearestPresetWidth(requested) {
|
|
20
|
-
for (const w of PRESET_WIDTHS) {
|
|
21
|
-
if (w >= requested)
|
|
22
|
-
return w;
|
|
23
|
-
}
|
|
24
|
-
return PRESET_WIDTHS[PRESET_WIDTHS.length - 1];
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Next.js image loader for DoSwiftly storefronts.
|
|
28
|
-
*
|
|
29
|
-
* Zero configuration — works out of the box with GraphQL image URLs.
|
|
30
|
-
* Appends resize query params (?width=&quality=&format=) to the URL
|
|
31
|
-
* that backend already returned via GraphQL.
|
|
32
|
-
*
|
|
33
|
-
* Width is quantized to preset breakpoints for optimal CDN cache.
|
|
34
|
-
* No HMAC, no env vars, no setup — like Shopify Hydrogen's image loader.
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* ```tsx
|
|
38
|
-
* import { storefrontImageLoader } from '@doswiftly/storefront-sdk';
|
|
39
|
-
*
|
|
40
|
-
* <Image loader={storefrontImageLoader} src={image.url} width={800} alt="..." />
|
|
41
|
-
* ```
|
|
4
|
+
* GraphQL API returns ready-to-use CDN URLs with transform query params.
|
|
5
|
+
* No client-side loader needed — use `url(transform: { maxWidth: 800 })` in queries.
|
|
42
6
|
*/
|
|
43
|
-
export
|
|
44
|
-
const w = nearestPresetWidth(width);
|
|
45
|
-
const q = quality || 85;
|
|
46
|
-
const separator = src.includes('?') ? '&' : '?';
|
|
47
|
-
return `${src}${separator}width=${w}&quality=${q}&format=webp`;
|
|
48
|
-
}
|
|
7
|
+
export {};
|
package/dist/core/index.d.ts
CHANGED
|
@@ -61,7 +61,7 @@ export { CART_COOKIE_NAME, CART_COOKIE_MAX_AGE } from './cart/cookie-config';
|
|
|
61
61
|
export { matchesRoute, type RouteProtectionConfig } from './auth/routes';
|
|
62
62
|
export { createSetTokenHandler, createClearTokenHandler } from './auth/handlers';
|
|
63
63
|
export { createAuthTokenClient, type AuthTokenClient } from './auth/token-client';
|
|
64
|
-
export {
|
|
64
|
+
export { type ImageData } from './image';
|
|
65
65
|
export { getOperationName } from './client/operation-name';
|
|
66
66
|
export { hashQuery } from './client/hash';
|
|
67
67
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/core/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAGH,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGhE,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,UAAU,EACV,SAAS,EACT,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,aAAa,EACb,YAAY,EACZ,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,2BAA2B,EAChC,KAAK,8BAA8B,EACnC,KAAK,YAAY,GAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAGjF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,KAAK,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGpF,OAAO,EACL,SAAS,EACT,UAAU,EACV,SAAS,EACT,YAAY,EACZ,WAAW,EACX,0BAA0B,EAC1B,KAAK,cAAc,GACpB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EACV,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,sBAAsB,EACtB,KAAK,GACN,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EACV,QAAQ,EACR,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACL,mBAAmB,EACnB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,GAC1B,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,UAAU,GAChB,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,KAAK,gBAAgB,GACtB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAG/G,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAG/G,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAG7E,OAAO,EAAE,YAAY,EAAE,KAAK,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGzE,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAGjF,OAAO,EAAE,qBAAqB,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGlF,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"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"}
|
package/dist/core/index.js
CHANGED
|
@@ -74,8 +74,6 @@ export { matchesRoute } from './auth/routes';
|
|
|
74
74
|
export { createSetTokenHandler, createClearTokenHandler } from './auth/handlers';
|
|
75
75
|
// Auth token client (client-side fetch helpers)
|
|
76
76
|
export { createAuthTokenClient } from './auth/token-client';
|
|
77
|
-
// Image utilities
|
|
78
|
-
export { storefrontImageLoader, } from './image';
|
|
79
77
|
// Utilities
|
|
80
78
|
export { getOperationName } from './client/operation-name';
|
|
81
79
|
export { hashQuery } from './client/hash';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@doswiftly/storefront-sdk",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.0",
|
|
4
4
|
"description": "Storefront runtime SDK for DoSwiftly Commerce — layered transport, middleware pipeline, React providers, Zustand stores, cache strategies. 0 runtime dependencies in core.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "dist/core/index.d.ts",
|
package/src/core/image.ts
CHANGED
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Image
|
|
2
|
+
* Image types for DoSwiftly storefronts.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```typescript
|
|
9
|
-
* import { storefrontImageLoader, type ImageData } from '@doswiftly/storefront-sdk';
|
|
10
|
-
*
|
|
11
|
-
* <Image loader={storefrontImageLoader} src={product.featuredImage.url} width={800} alt="..." />
|
|
12
|
-
* ```
|
|
4
|
+
* GraphQL API returns ready-to-use CDN URLs with transform query params.
|
|
5
|
+
* No client-side loader needed — use `url(transform: { maxWidth: 800 })` in queries.
|
|
13
6
|
*/
|
|
14
7
|
|
|
15
8
|
/**
|
|
16
9
|
* Image data from GraphQL API (matches Image type in storefront schema).
|
|
17
10
|
*/
|
|
18
11
|
export interface ImageData {
|
|
19
|
-
/** Image URL from GraphQL (ready-to-use CDN URL) */
|
|
12
|
+
/** Image URL from GraphQL (ready-to-use CDN URL, optionally with transform query params) */
|
|
20
13
|
url: string;
|
|
21
14
|
/** Alt text for accessibility + SEO */
|
|
22
15
|
altText?: string | null;
|
|
@@ -27,49 +20,3 @@ export interface ImageData {
|
|
|
27
20
|
/** Image ID */
|
|
28
21
|
id?: string | null;
|
|
29
22
|
}
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Next.js Image loader function signature.
|
|
33
|
-
*/
|
|
34
|
-
export interface ImageLoaderParams {
|
|
35
|
-
src: string;
|
|
36
|
-
width: number;
|
|
37
|
-
quality?: number;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Preset widths for CDN cache optimization.
|
|
42
|
-
* Loader quantizes requested width to the nearest preset — limits cache variants.
|
|
43
|
-
*/
|
|
44
|
-
const PRESET_WIDTHS = [150, 320, 640, 750, 828, 1080, 1200, 1600, 1920, 2048] as const;
|
|
45
|
-
|
|
46
|
-
function nearestPresetWidth(requested: number): number {
|
|
47
|
-
for (const w of PRESET_WIDTHS) {
|
|
48
|
-
if (w >= requested) return w;
|
|
49
|
-
}
|
|
50
|
-
return PRESET_WIDTHS[PRESET_WIDTHS.length - 1];
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Next.js image loader for DoSwiftly storefronts.
|
|
55
|
-
*
|
|
56
|
-
* Zero configuration — works out of the box with GraphQL image URLs.
|
|
57
|
-
* Appends resize query params (?width=&quality=&format=) to the URL
|
|
58
|
-
* that backend already returned via GraphQL.
|
|
59
|
-
*
|
|
60
|
-
* Width is quantized to preset breakpoints for optimal CDN cache.
|
|
61
|
-
* No HMAC, no env vars, no setup — like Shopify Hydrogen's image loader.
|
|
62
|
-
*
|
|
63
|
-
* @example
|
|
64
|
-
* ```tsx
|
|
65
|
-
* import { storefrontImageLoader } from '@doswiftly/storefront-sdk';
|
|
66
|
-
*
|
|
67
|
-
* <Image loader={storefrontImageLoader} src={image.url} width={800} alt="..." />
|
|
68
|
-
* ```
|
|
69
|
-
*/
|
|
70
|
-
export function storefrontImageLoader({ src, width, quality }: ImageLoaderParams): string {
|
|
71
|
-
const w = nearestPresetWidth(width);
|
|
72
|
-
const q = quality || 85;
|
|
73
|
-
const separator = src.includes('?') ? '&' : '?';
|
|
74
|
-
return `${src}${separator}width=${w}&quality=${q}&format=webp`;
|
|
75
|
-
}
|
package/src/core/index.ts
CHANGED
|
@@ -166,12 +166,8 @@ export { createSetTokenHandler, createClearTokenHandler } from './auth/handlers'
|
|
|
166
166
|
// Auth token client (client-side fetch helpers)
|
|
167
167
|
export { createAuthTokenClient, type AuthTokenClient } from './auth/token-client';
|
|
168
168
|
|
|
169
|
-
// Image
|
|
170
|
-
export {
|
|
171
|
-
storefrontImageLoader,
|
|
172
|
-
type ImageData,
|
|
173
|
-
type ImageLoaderParams,
|
|
174
|
-
} from './image';
|
|
169
|
+
// Image types (loaders removed — GraphQL returns ready-to-use CDN URLs with transform params)
|
|
170
|
+
export { type ImageData } from './image';
|
|
175
171
|
|
|
176
172
|
// Utilities
|
|
177
173
|
export { getOperationName } from './client/operation-name';
|