@zappie/foundations 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @zappie/foundations
 
+## 0.1.9
+
+### Patch Changes
+
+- c1ffb88: Images resize only from `RESIZE_HOSTS` (or your `resizeHosts`), never as `.avif`, `.jxl` or `.svg`. `Image` falls back once to the original when a resized image fails.
+- Updated dependencies [c1ffb88]
+  - @zappie/sdk@0.1.22
+
 ## 0.1.8
 
 ### Patch Changes

package/dist/index.d.ts

@@ -686,9 +686,11 @@ type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet"> &
     priority?: boolean;
     quality?: number;
     mode?: "resize" | "direct";
+    /** Lowercase hosts your zone resizes. Defaults to `RESIZE_HOSTS` from `@zappie/sdk/template`. */
+    resizeHosts?: readonly string[];
 };
-/** Render an image through same-origin resizing, or directly when unavailable. */
-declare function Image({ src, sizes, priority, quality, mode, alt, ...props }: ImageProps): react.JSX.Element;
+/** Render an image through same-origin resizing, falling back once to `src` if that fails. */
+declare function Image({ src, sizes, priority, quality, mode, resizeHosts, alt, onError, ...props }: ImageProps): react.JSX.Element;
 
 /**
  * Render formatted SDK money in a data element, with the minor-unit amount as its value.

package/dist/media/image.js

@@ -1,5 +1,6 @@
 // src/media/image.tsx
-import { resized, srcSet } from "@zappie/sdk/template";
+import { canResize, resized, srcSet } from "@zappie/sdk/template";
+import { useCallback, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 function Image({
   src,
@@ -7,20 +8,38 @@ function Image({
   priority = false,
   quality,
   mode = "resize",
+  resizeHosts,
   alt,
+  onError,
   ...props
 }) {
-  const responsive = mode === "resize" && /^https?:\/\//.test(src);
+  const [failed, setFailed] = useState(null);
+  const responsive = mode === "resize" && failed !== src && canResize(src, resizeHosts);
+  const checkLoaded = useCallback(
+    (image) => {
+      if (responsive && image?.complete && image.naturalWidth === 0) {
+        setFailed(src);
+      }
+    },
+    [responsive, src]
+  );
   return /* @__PURE__ */ jsx(
     "img",
     {
       ...props,
+      ref: checkLoaded,
       alt,
-      src: responsive ? resized(src, 960, quality) : src,
-      ...responsive ? { srcSet: srcSet(src, quality), sizes } : {},
+      src: responsive ? resized(src, 960, quality, resizeHosts) : src,
+      ...responsive ? { srcSet: srcSet(src, quality, resizeHosts), sizes } : {},
       loading: priority ? "eager" : "lazy",
       decoding: priority ? "sync" : "async",
-      ...priority ? { fetchPriority: "high" } : {}
+      ...priority ? { fetchPriority: "high" } : {},
+      onError: (event) => {
+        if (responsive) {
+          setFailed(src);
+        }
+        onError?.(event);
+      }
     }
   );
 }

package/dist/media/image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/media/image.tsx"],
-  "sourcesContent": ["import { resized, srcSet } from \"@zappie/sdk/template\";\nimport type { ImgHTMLAttributes } from \"react\";\n\n/** Props for a responsive storefront image. */\nexport type ImageProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  \"src\" | \"srcSet\"\n> & {\n  src: string;\n  alt: string;\n  sizes?: string;\n  priority?: boolean;\n  quality?: number;\n  mode?: \"resize\" | \"direct\";\n};\n\n/** Render an image through same-origin resizing, or directly when unavailable. */\nexport function Image({\n  src,\n  sizes = \"100vw\",\n  priority = false,\n  quality,\n  mode = \"resize\",\n  alt,\n  ...props\n}: ImageProps) {\n  const responsive = mode === \"resize\" && /^https?:\\/\\//.test(src);\n  return (\n    <img\n      {...props}\n      alt={alt}\n      src={responsive ? resized(src, 960, quality) : src}\n      {...(responsive ? { srcSet: srcSet(src, quality), sizes } : {})}\n      loading={priority ? \"eager\" : \"lazy\"}\n      decoding={priority ? \"sync\" : \"async\"}\n      {...(priority ? { fetchPriority: \"high\" as const } : {})}\n    />\n  );\n}\n"],
-  "mappings": ";AAAA,SAAS,SAAS,cAAc;AA4B5B;AAXG,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,aAAa,SAAS,YAAY,eAAe,KAAK,GAAG;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,KAAK,aAAa,QAAQ,KAAK,KAAK,OAAO,IAAI;AAAA,MAC9C,GAAI,aAAa,EAAE,QAAQ,OAAO,KAAK,OAAO,GAAG,MAAM,IAAI,CAAC;AAAA,MAC7D,SAAS,WAAW,UAAU;AAAA,MAC9B,UAAU,WAAW,SAAS;AAAA,MAC7B,GAAI,WAAW,EAAE,eAAe,OAAgB,IAAI,CAAC;AAAA;AAAA,EACxD;AAEJ;",
+  "sourcesContent": ["import { canResize, resized, srcSet } from \"@zappie/sdk/template\";\nimport { useCallback, useState, type ImgHTMLAttributes } from \"react\";\n\n/** Props for a responsive storefront image. */\nexport type ImageProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  \"src\" | \"srcSet\"\n> & {\n  src: string;\n  alt: string;\n  sizes?: string;\n  priority?: boolean;\n  quality?: number;\n  mode?: \"resize\" | \"direct\";\n  /** Lowercase hosts your zone resizes. Defaults to `RESIZE_HOSTS` from `@zappie/sdk/template`. */\n  resizeHosts?: readonly string[];\n};\n\n/** Render an image through same-origin resizing, falling back once to `src` if that fails. */\nexport function Image({\n  src,\n  sizes = \"100vw\",\n  priority = false,\n  quality,\n  mode = \"resize\",\n  resizeHosts,\n  alt,\n  onError,\n  ...props\n}: ImageProps) {\n  const [failed, setFailed] = useState<string | null>(null);\n  const responsive =\n    mode === \"resize\" && failed !== src && canResize(src, resizeHosts);\n  // Catches an error that fired before hydration.\n  const checkLoaded = useCallback(\n    (image: HTMLImageElement | null) => {\n      if (responsive && image?.complete && image.naturalWidth === 0) {\n        setFailed(src);\n      }\n    },\n    [responsive, src],\n  );\n  return (\n    <img\n      {...props}\n      ref={checkLoaded}\n      alt={alt}\n      src={responsive ? resized(src, 960, quality, resizeHosts) : src}\n      {...(responsive\n        ? { srcSet: srcSet(src, quality, resizeHosts), sizes }\n        : {})}\n      loading={priority ? \"eager\" : \"lazy\"}\n      decoding={priority ? \"sync\" : \"async\"}\n      {...(priority ? { fetchPriority: \"high\" as const } : {})}\n      onError={(event) => {\n        if (responsive) {\n          setFailed(src);\n        }\n        onError?.(event);\n      }}\n    />\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,aAAa,gBAAwC;AA0C1D;AAxBG,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,aACJ,SAAS,YAAY,WAAW,OAAO,UAAU,KAAK,WAAW;AAEnE,QAAM,cAAc;AAAA,IAClB,CAAC,UAAmC;AAClC,UAAI,cAAc,OAAO,YAAY,MAAM,iBAAiB,GAAG;AAC7D,kBAAU,GAAG;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,YAAY,GAAG;AAAA,EAClB;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA,KAAK,aAAa,QAAQ,KAAK,KAAK,SAAS,WAAW,IAAI;AAAA,MAC3D,GAAI,aACD,EAAE,QAAQ,OAAO,KAAK,SAAS,WAAW,GAAG,MAAM,IACnD,CAAC;AAAA,MACL,SAAS,WAAW,UAAU;AAAA,MAC9B,UAAU,WAAW,SAAS;AAAA,MAC7B,GAAI,WAAW,EAAE,eAAe,OAAgB,IAAI,CAAC;AAAA,MACtD,SAAS,CAAC,UAAU;AAClB,YAAI,YAAY;AACd,oBAAU,GAAG;AAAA,QACf;AACA,kBAAU,KAAK;AAAA,MACjB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/version.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var PACKAGE_VERSION = true ? "0.1.8" : "0.0.0-development";
+var PACKAGE_VERSION = true ? "0.1.9" : "0.0.0-development";
 export {
   PACKAGE_VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zappie/foundations",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "UI-less React primitives for Zappie storefronts: behaviour, state and accessibility without styles.",
   "type": "module",
   "sideEffects": false,
@@ -33,7 +33,7 @@
   "dependencies": {
     "@base-ui/react": "^1.9.0",
     "@googlemaps/markerclusterer": "^2.6.2",
-    "@zappie/sdk": "^0.1.13"
+    "@zappie/sdk": "^0.1.22"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",