@shopify/shop-minis-react 0.0.0-snapshot.20251216185714 → 0.0.0-snapshot.20251217193626

package/dist/_virtual/index4.js

@@ -1,5 +1,5 @@
-var r = {};
+var e = { exports: {} };
 export {
-  r as __exports
+  e as __module
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index5.js

@@ -1,5 +1,6 @@
-var e = { exports: {} };
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
+var i = r();
 export {
-  e as __module
+  i as l
 };
 //# sourceMappingURL=index5.js.map

package/dist/_virtual/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index6.js

@@ -1,6 +1,5 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
-var i = r();
+var r = {};
 export {
-  i as l
+  r as __exports
 };
 //# sourceMappingURL=index6.js.map

package/dist/_virtual/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js

@@ -1,4 +1,4 @@
-import { __module as q } from "../../../../../../../../_virtual/index5.js";
+import { __module as q } from "../../../../../../../../_virtual/index4.js";
 import { __require as F } from "../../../../../global@4.4.0/node_modules/global/window.js";
 import { __require as N } from "../../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/extends.js";
 import { __require as J } from "../../../../../is-function@1.0.2/node_modules/is-function/index.js";

package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js

@@ -2,7 +2,7 @@ import L from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-ut
 import T from "../../../../../../../_virtual/window.js";
 import { forEachMediaGroup as Z } from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js";
 import J from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js";
-import { l as Q } from "../../../../../../../_virtual/index6.js";
+import { l as Q } from "../../../../../../../_virtual/index5.js";
 /*! @name mpd-parser @version 1.3.1 @license Apache-2.0 */
 const w = (e) => !!e && typeof e == "object", E = (...e) => e.reduce((n, t) => (typeof t != "object" || Object.keys(t).forEach((r) => {
   Array.isArray(n[r]) && Array.isArray(t[r]) ? n[r] = n[r].concat(t[r]) : w(n[r]) && w(t[r]) ? n[r] = E(n[r], t[r]) : n[r] = t[r];

package/dist/shop-minis-react/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js

@@ -1,4 +1,4 @@
-import { __exports as i } from "../../../../../../_virtual/index4.js";
+import { __exports as i } from "../../../../../../_virtual/index6.js";
 var c;
 function d() {
   if (c) return i;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.0-snapshot.20251216185714",
+  "version": "0.0.0-snapshot.20251217193626",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -46,7 +46,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.0.0-snapshot.20251216185714",
+    "@shopify/shop-minis-platform": "0.0.0-snapshot.20251217193626",
     "@tailwindcss/vite": "4.1.8",
     "@tanstack/react-query": "5.86.0",
     "@types/color": "3.0.6",

package/src/components/atoms/image.test.tsx

@@ -1,13 +1,18 @@
-import {describe, expect, it, vi} from 'vitest'
+import {describe, expect, it, vi, beforeAll} from 'vitest'
 
 import {render, screen, waitFor} from '../../test-utils'
 
 import {Image} from './image'
 
+// Mock URL.revokeObjectURL for jsdom
+beforeAll(() => {
+  URL.revokeObjectURL = vi.fn()
+})
+
 // Mock the util functions
 vi.mock('../../utils', () => ({
-  getThumbhashDataURL: vi.fn((thumbhash?: string) =>
-    thumbhash ? `data:image/png;base64,${thumbhash}` : null
+  getThumbhashBlobURL: vi.fn((thumbhash?: string) =>
+    thumbhash ? `blob:http://localhost/${thumbhash}` : undefined
   ),
   getResizedImageUrl: vi.fn((url?: string) => url),
 }))
@@ -76,7 +81,7 @@ describe('Image', () => {
     expect(wrapper.style.aspectRatio).toBe('16/9')
   })
 
-  it('uses thumbhash as background when provided with fixed aspect ratio', () => {
+  it('uses thumbhash as placeholder when provided with fixed aspect ratio', () => {
     const {container} = render(
       <Image
         src="https://example.com/image.jpg"
@@ -86,10 +91,15 @@ describe('Image', () => {
       />
     )
 
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper.style.backgroundImage).toContain(
-      'data:image/png;base64,testThumbhash'
+    // Thumbhash is now rendered as a separate img element (placeholder)
+    const images = container.querySelectorAll('img')
+    expect(images).toHaveLength(2) // placeholder + main image
+    const placeholderImg = images[0]
+    expect(placeholderImg).toHaveAttribute(
+      'src',
+      'blob:http://localhost/testThumbhash'
     )
+    expect(placeholderImg).toHaveAttribute('aria-hidden', 'true')
   })
 
   it('renders with natural sizing when aspectRatio is auto', () => {
@@ -122,13 +132,17 @@ describe('Image', () => {
       />
     )
 
-    const wrapper = container.firstChild as HTMLElement
-    const img = screen.getByRole('img')
-
-    expect(wrapper.style.backgroundImage).toContain(
-      'data:image/png;base64,testThumbhash'
+    // Thumbhash is now rendered as a separate img element (placeholder)
+    const images = container.querySelectorAll('img')
+    expect(images).toHaveLength(2) // placeholder + main image
+    const placeholderImg = images[0]
+    expect(placeholderImg).toHaveAttribute(
+      'src',
+      'blob:http://localhost/testThumbhash'
     )
-    expect(img).toHaveClass('w-full', 'h-auto')
+
+    const mainImg = images[1]
+    expect(mainImg).toHaveClass('w-full', 'h-auto')
   })
 
   it('passes additional props to img element', () => {