@shopify/shop-minis-react 0.0.32 → 0.0.34

package/dist/utils/image.js

@@ -1,15 +1,51 @@
-import { toUint8Array as o } from "../shop-minis-react/node_modules/.pnpm/js-base64@3.7.7/node_modules/js-base64/base64.js";
-import { thumbHashToDataURL as a } from "../shop-minis-react/node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js";
-function n(r) {
-  if (r)
+import { toUint8Array as s } from "../shop-minis-react/node_modules/.pnpm/js-base64@3.7.7/node_modules/js-base64/base64.js";
+import { thumbHashToDataURL as i } from "../shop-minis-react/node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js";
+function U(t) {
+  if (t)
     try {
-      const t = o(r);
-      return a(t);
-    } catch (t) {
-      console.warn("Failed to decode thumbhash to data URL", t);
+      const e = s(t);
+      return i(e);
+    } catch (e) {
+      console.warn("Failed to decode thumbhash to data URL", e);
     }
 }
+function f(t) {
+  return new Promise((e, n) => {
+    const r = new FileReader();
+    r.onloadend = () => e(r.result), r.onerror = n, r.readAsDataURL(t);
+  });
+}
+const o = {
+  xxsUrl: 32,
+  xsUrl: 64,
+  sUrl: 128,
+  xxsmUrl: 256,
+  xsmUrl: 384,
+  smUrl: 512,
+  mUrl: 640,
+  lUrl: 1080,
+  xlUrl: 2048
+}, a = 0.05, c = Object.entries(o).sort(
+  ([, t], [, e]) => t - e
+), d = (t) => {
+  for (const [e, n] of c) {
+    const r = n + n * a;
+    if (t <= r) return e;
+  }
+  return "xlUrl";
+}, m = (t, e) => {
+  const r = new RegExp(/\?+/g).test(t) ? "&" : "?";
+  return `${t}${r}width=${e}`;
+}, u = (t) => {
+  if (!t) return "";
+  if (!t.startsWith("https://cdn.shopify.com"))
+    return t;
+  const e = window.innerWidth ?? screen.width, n = d(e);
+  return m(t, o[n]);
+};
 export {
-  n as getThumbhashDataURL
+  f as fileToDataUri,
+  u as getResizedImageUrl,
+  U as getThumbhashDataURL
 };
 //# sourceMappingURL=image.js.map

package/dist/utils/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../src/utils/image.ts"],"sourcesContent":["import {toUint8Array} from 'js-base64'\nimport {thumbHashToDataURL} from 'thumbhash'\n\n/**\n * Converts a thumbhash string to a data URL for use as an image placeholder\n * @param thumbhash Base64 encoded thumbhash string\n * @returns Data URL that can be used as image source or undefined if conversion fails\n */\nexport function getThumbhashDataURL(thumbhash?: string): string | undefined {\n  if (!thumbhash) return\n\n  try {\n    const thumbhashArray = toUint8Array(thumbhash)\n    return thumbHashToDataURL(thumbhashArray)\n  } catch (error) {\n    console.warn('Failed to decode thumbhash to data URL', error)\n  }\n}\n"],"names":["getThumbhashDataURL","thumbhash","thumbhashArray","toUint8Array","thumbHashToDataURL","error"],"mappings":";;AAQO,SAASA,EAAoBC,GAAwC;AAC1E,MAAKA;AAED,QAAA;AACI,YAAAC,IAAiBC,EAAaF,CAAS;AAC7C,aAAOG,EAAmBF,CAAc;AAAA,aACjCG,GAAO;AACN,cAAA,KAAK,0CAA0CA,CAAK;AAAA,IAAA;AAEhE;"}
+{"version":3,"file":"image.js","sources":["../../src/utils/image.ts"],"sourcesContent":["import {toUint8Array} from 'js-base64'\nimport {thumbHashToDataURL} from 'thumbhash'\n\n/**\n * Converts a thumbhash string to a data URL for use as an image placeholder\n * @param thumbhash Base64 encoded thumbhash string\n * @returns Data URL that can be used as image source or undefined if conversion fails\n */\nexport function getThumbhashDataURL(thumbhash?: string): string | undefined {\n  if (!thumbhash) return\n\n  try {\n    const thumbhashArray = toUint8Array(thumbhash)\n    return thumbHashToDataURL(thumbhashArray)\n  } catch (error) {\n    console.warn('Failed to decode thumbhash to data URL', error)\n  }\n}\n\n/** Converts a file to a data URI\n * @param file The file to convert\n * @returns A promise that resolves to the data URI string\n */\nexport function fileToDataUri(file: File): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader()\n    reader.onloadend = () => resolve(reader.result as string)\n    reader.onerror = reject\n    reader.readAsDataURL(file)\n  })\n}\n\nconst ImageSizes = {\n  xxsUrl: 32,\n  xsUrl: 64,\n  sUrl: 128,\n  xxsmUrl: 256,\n  xsmUrl: 384,\n  smUrl: 512,\n  mUrl: 640,\n  lUrl: 1080,\n  xlUrl: 2048,\n} as const\n\ntype Key = keyof typeof ImageSizes\n\n/**\n * Acceptable offset for image sizes. An image could use the size that is within this offset.\n */\nconst offsetPercentage = 0.05\n\nconst sortedImageSizes = Object.entries(ImageSizes).sort(\n  ([, firstSize], [, secondSize]) => firstSize - secondSize\n)\n\nconst getImageSizeKeyWithSize = (size: number): Key => {\n  for (const [key, imgSize] of sortedImageSizes) {\n    const upperBoundSize = imgSize + imgSize * offsetPercentage\n    if (size <= upperBoundSize) return key as Key\n  }\n\n  return 'xlUrl'\n}\n\nconst resizeImage = (imageUrl: string, width: number) => {\n  const pattern = new RegExp(/\\?+/g)\n  const delimiter = pattern.test(imageUrl) ? '&' : '?'\n  return `${imageUrl}${delimiter}width=${width}`\n}\n\n/**\n * Optimizes Shopify CDN image URLs by adding a width parameter based on screen size\n * @param url The image URL to optimize\n * @returns The optimized URL with width parameter if it's a Shopify CDN image, otherwise returns the original URL\n */\n\nexport const getResizedImageUrl = (url?: string): string => {\n  if (!url) return ''\n\n  // Only process Shopify CDN images\n  if (!url.startsWith('https://cdn.shopify.com')) {\n    return url\n  }\n\n  const width = window.innerWidth ?? screen.width\n\n  const key = getImageSizeKeyWithSize(width)\n\n  return resizeImage(url, ImageSizes[key])\n}\n"],"names":["getThumbhashDataURL","thumbhash","thumbhashArray","toUint8Array","thumbHashToDataURL","error","fileToDataUri","file","resolve","reject","reader","ImageSizes","offsetPercentage","sortedImageSizes","firstSize","secondSize","getImageSizeKeyWithSize","size","key","imgSize","upperBoundSize","resizeImage","imageUrl","width","delimiter","getResizedImageUrl","url"],"mappings":";;AAQO,SAASA,EAAoBC,GAAwC;AAC1E,MAAKA;AAED,QAAA;AACI,YAAAC,IAAiBC,EAAaF,CAAS;AAC7C,aAAOG,EAAmBF,CAAc;AAAA,aACjCG,GAAO;AACN,cAAA,KAAK,0CAA0CA,CAAK;AAAA,IAAA;AAEhE;AAMO,SAASC,EAAcC,GAA6B;AACzD,SAAO,IAAI,QAAQ,CAACC,GAASC,MAAW;AAChC,UAAAC,IAAS,IAAI,WAAW;AAC9B,IAAAA,EAAO,YAAY,MAAMF,EAAQE,EAAO,MAAgB,GACxDA,EAAO,UAAUD,GACjBC,EAAO,cAAcH,CAAI;AAAA,EAAA,CAC1B;AACH;AAEA,MAAMI,IAAa;AAAA,EACjB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT,GAOMC,IAAmB,MAEnBC,IAAmB,OAAO,QAAQF,CAAU,EAAE;AAAA,EAClD,CAAC,CAAG,EAAAG,CAAS,GAAG,GAAGC,CAAU,MAAMD,IAAYC;AACjD,GAEMC,IAA0B,CAACC,MAAsB;AACrD,aAAW,CAACC,GAAKC,CAAO,KAAKN,GAAkB;AACvC,UAAAO,IAAiBD,IAAUA,IAAUP;AACvC,QAAAK,KAAQG,EAAuB,QAAAF;AAAA,EAAA;AAG9B,SAAA;AACT,GAEMG,IAAc,CAACC,GAAkBC,MAAkB;AAEvD,QAAMC,IADU,IAAI,OAAO,MAAM,EACP,KAAKF,CAAQ,IAAI,MAAM;AACjD,SAAO,GAAGA,CAAQ,GAAGE,CAAS,SAASD,CAAK;AAC9C,GAQaE,IAAqB,CAACC,MAAyB;AACtD,MAAA,CAACA,EAAY,QAAA;AAGjB,MAAI,CAACA,EAAI,WAAW,yBAAyB;AACpC,WAAAA;AAGH,QAAAH,IAAQ,OAAO,cAAc,OAAO,OAEpCL,IAAMF,EAAwBO,CAAK;AAEzC,SAAOF,EAAYK,GAAKf,EAAWO,CAAG,CAAC;AACzC;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -38,7 +38,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.0.10",
+    "@shopify/shop-minis-platform": "0.0.11",
     "@tailwindcss/vite": "4.1.8",
     "@types/color": "3.0.6",
     "@types/lodash": "4.17.20",

package/src/components/atoms/{thumbhash-image.tsx → image.tsx}

@@ -1,22 +1,19 @@
+/* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'
 
 import {cn} from '../../lib/utils'
-import {getThumbhashDataURL} from '../../utils/image'
+import {getThumbhashDataURL, getResizedImageUrl} from '../../utils'
 
-type ThumbhashImageProps = ImgHTMLAttributes<HTMLImageElement> & {
-  src: string
-  thumbhash: string
-  alt?: string | null
+type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  src?: string
+  thumbhash?: string | null
   aspectRatio?: number | string
 }
 
-export const ThumbhashImage = memo(function ThumbhashImage(
-  props: ThumbhashImageProps
-) {
+export const Image = memo(function Image(props: ImageProps) {
   const {
     src,
-    alt,
     thumbhash,
     onLoad,
     className,
@@ -27,7 +24,7 @@ export const ThumbhashImage = memo(function ThumbhashImage(
 
   const [isLoaded, setIsLoaded] = useState(false)
 
-  const dataURL = useMemo(
+  const thumbhashDataURL = useMemo(
     () => getThumbhashDataURL(thumbhash ?? undefined),
     [thumbhash]
   )
@@ -40,24 +37,27 @@ export const ThumbhashImage = memo(function ThumbhashImage(
     [onLoad]
   )
 
+  const resizedImageSrc = useMemo(() => getResizedImageUrl(src), [src])
+
   return (
     <div
       className={cn('relative w-full ', className)}
       style={{
         ...style,
         aspectRatio,
-        backgroundImage: dataURL ? `url(${dataURL})` : undefined,
+        backgroundImage: thumbhashDataURL
+          ? `url(${thumbhashDataURL})`
+          : undefined,
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
     >
       <img
         className={cn(
-          'absolute inset-0 w-full h-full opacity-0 object-cover',
+          'absolute inset-0 opacity-0 object-cover',
           isLoaded && 'opacity-100'
         )}
-        src={src}
-        alt={alt}
+        src={resizedImageSrc}
         onLoad={handleLoad}
         {...restProps}
       />