@shopify/shop-minis-react 0.4.16 → 0.4.17

package/src/utils/image.ts

@@ -18,6 +18,44 @@ export function getThumbhashDataURL(thumbhash?: string): string | undefined {
   }
 }
 
+/**
+ * Converts a data URL to a Blob
+ * @param dataURL The data URL to convert
+ * @returns A Blob object
+ */
+export function dataURLToBlob(dataURL: string): Blob {
+  const [header, base64Data] = dataURL.split(',')
+  const mimeMatch = header.match(/:(.*?);/)
+  const mime = mimeMatch ? mimeMatch[1] : 'image/png'
+  const binary = atob(base64Data)
+  const array = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    array[i] = binary.charCodeAt(i)
+  }
+  return new Blob([array], {type: mime})
+}
+
+/**
+ * Converts a thumbhash string to a blob URL for use as an image placeholder
+ * This is useful when CSP restrictions prevent data URLs
+ * @param thumbhash Base64 encoded thumbhash string
+ * @returns Blob URL that can be used as image source or undefined if conversion fails
+ */
+export function getThumbhashBlobURL(thumbhash?: string): string | undefined {
+  if (!thumbhash) return
+
+  try {
+    const dataURL = getThumbhashDataURL(thumbhash)
+    if (!dataURL) return
+
+    const blob = dataURLToBlob(dataURL)
+    return URL.createObjectURL(blob)
+  } catch (error) {
+    console.warn('Failed to create thumbhash blob URL', error)
+    return undefined
+  }
+}
+
 /** Converts a file to a data URI
  * @param file The file to convert
  * @returns A promise that resolves to the data URI string