@shopify/shop-minis-react 0.1.6 → 0.1.8

package/generated-hook-maps/hook-actions-map.json

@@ -0,0 +1,130 @@
+{
+  "useAsyncStorage": [
+    "GET_PERSISTED_ITEM",
+    "SET_PERSISTED_ITEM",
+    "REMOVE_PERSISTED_ITEM",
+    "GET_ALL_PERSISTED_KEYS",
+    "CLEAR_PERSISTED_ITEMS"
+  ],
+  "useBuyerAttributes": [
+    "GET_BUYER_ATTRIBUTES"
+  ],
+  "useCloseMini": [
+    "CLOSE_MINI"
+  ],
+  "useContent": [
+    "GET_CONTENT"
+  ],
+  "useCreateImageContent": [
+    "CREATE_CONTENT"
+  ],
+  "useCuratedProducts": [
+    "GET_CURATED_PRODUCTS"
+  ],
+  "useCurrentUser": [
+    "GET_CURRENT_USER"
+  ],
+  "useErrorScreen": [
+    "SHOW_ERROR_SCREEN"
+  ],
+  "useErrorToast": [
+    "SHOW_ERROR_TOAST"
+  ],
+  "useFollowedShops": [
+    "GET_FOLLOWED_SHOPS"
+  ],
+  "useFollowedShopsActions": [
+    "FOLLOW_SHOP",
+    "UNFOLLOW_SHOP"
+  ],
+  "useGenerateUserToken": [
+    "GENERATE_USER_TOKEN"
+  ],
+  "useImageUpload": [
+    "CREATE_IMAGE_UPLOAD_LINK",
+    "COMPLETE_IMAGE_UPLOAD"
+  ],
+  "useKeyboardAvoidingView": [
+    "TRANSLATE_CONTENT_UP",
+    "TRANSLATE_CONTENT_DOWN"
+  ],
+  "useOrders": [
+    "GET_ORDERS"
+  ],
+  "usePopularProducts": [
+    "GET_POPULAR_PRODUCTS"
+  ],
+  "useProduct": [
+    "GET_PRODUCT"
+  ],
+  "useProductList": [
+    "GET_PRODUCT_LIST"
+  ],
+  "useProductListActions": [
+    "ADD_PRODUCT_LIST",
+    "REMOVE_PRODUCT_LIST",
+    "RENAME_PRODUCT_LIST",
+    "ADD_PRODUCT_LIST_ITEM",
+    "REMOVE_PRODUCT_LIST_ITEM"
+  ],
+  "useProductLists": [
+    "GET_PRODUCT_LISTS"
+  ],
+  "useProductMedia": [
+    "GET_PRODUCT_MEDIA"
+  ],
+  "useProductSearch": [
+    "GET_PRODUCT_SEARCH"
+  ],
+  "useProductVariants": [
+    "GET_PRODUCT_VARIANTS"
+  ],
+  "useProducts": [
+    "GET_PRODUCTS"
+  ],
+  "useRecentProducts": [
+    "GET_RECENT_PRODUCTS"
+  ],
+  "useRecentShops": [
+    "GET_RECENT_SHOPS"
+  ],
+  "useRecommendedProducts": [
+    "GET_RECOMMENDED_PRODUCTS"
+  ],
+  "useRecommendedShops": [
+    "GET_RECOMMENDED_SHOPS"
+  ],
+  "useRequestPermissions": [
+    "REQUEST_PERMISSION"
+  ],
+  "useSavedProducts": [
+    "GET_SAVED_PRODUCTS"
+  ],
+  "useSavedProductsActions": [
+    "FAVORITE",
+    "UNFAVORITE"
+  ],
+  "useSecureStorage": [
+    "GET_SECRET",
+    "SET_SECRET",
+    "REMOVE_SECRET"
+  ],
+  "useShare": [
+    "SHARE",
+    "SHARE_SINGLE"
+  ],
+  "useShop": [
+    "GET_SHOP"
+  ],
+  "useShopCartActions": [
+    "ADD_TO_CART",
+    "BUY_PRODUCT"
+  ],
+  "useShopNavigation": [
+    "NAVIGATE_TO_PRODUCT",
+    "NAVIGATE_TO_SHOP",
+    "NAVIGATE_TO_ORDER",
+    "NAVIGATE_TO_CHECKOUT",
+    "NAVIGATE_TO_CART"
+  ]
+}

package/generated-hook-maps/hook-scopes-map.json

@@ -0,0 +1,48 @@
+{
+  "useBuyerAttributes": [
+    "PROFILE"
+  ],
+  "useCurrentUser": [
+    "USER_SETTINGS_READ"
+  ],
+  "useFollowedShops": [
+    "SHOPS_FOLLOWS_READ"
+  ],
+  "useFollowedShopsActions": [
+    "SHOPS_FOLLOWS_WRITE"
+  ],
+  "useGenerateUserToken": [
+    "OPENID"
+  ],
+  "useOrders": [
+    "ORDERS"
+  ],
+  "useProductList": [
+    "PRODUCT_LIST_READ"
+  ],
+  "useProductListActions": [
+    "PRODUCT_LIST_ITEM_WRITE",
+    "PRODUCT_LIST_WRITE"
+  ],
+  "useProductLists": [
+    "PRODUCT_LIST_READ"
+  ],
+  "useRecentProducts": [
+    "PRODUCTS_RECENT_READ"
+  ],
+  "useRecentShops": [
+    "SHOPS_RECENT_READ"
+  ],
+  "useRecommendedProducts": [
+    "PRODUCTS_RECOMMENDATIONS_READ"
+  ],
+  "useRecommendedShops": [
+    "SHOPS_RECOMMENDATIONS_READ"
+  ],
+  "useSavedProducts": [
+    "FAVORITES"
+  ],
+  "useSavedProductsActions": [
+    "FAVORITES_WRITE"
+  ]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -18,6 +18,9 @@
   "files": [
     "src/**/*.{ts,tsx,css}",
     "dist/**/*",
+    "eslint/**/*.cjs",
+    "eslint/**/*.md",
+    "generated-hook-maps/**/*.json",
     "README.md",
     "LICENSE.txt"
   ],
@@ -29,7 +32,9 @@
     },
     "./styles": "./src/index.css",
     "./mocks": "./src/mocks.ts",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    "./eslint": "./eslint/index.cjs",
+    "./eslint/config": "./eslint/config.cjs"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
@@ -38,7 +43,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.4.0",
+    "@shopify/shop-minis-platform": "0.5.0",
     "@tailwindcss/vite": "4.1.8",
     "@types/color": "3.0.6",
     "@types/lodash": "4.17.20",
@@ -56,6 +61,8 @@
     "motion": "12.17.3",
     "next-themes": "0.4.6",
     "radix-ui": "1.4.2",
+    "eslint": "^8.57.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "react-intersection-observer": "9.13.1",
     "react-resizable-panels": "3.0.2",
     "react-router": "7.7.0",
@@ -83,7 +90,6 @@
     "@types/react-dom": "^19.1.2",
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
-    "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^9.0.16",
     "jsdom": "^25.0.1",
     "react": "^19.1.0",

package/src/components/commerce/product-link.test.tsx

@@ -248,6 +248,7 @@ describe('ProductLink', () => {
         isFavorited: false,
         selectedVariant: {
           id: 'selected-variant-id',
+          title: 'Selected Variant',
           isFavorited: false,
           price: {amount: '29.99', currencyCode: 'USD'},
           compareAtPrice: null,

package/src/hooks/navigation/useDeeplink.test.ts

@@ -0,0 +1,429 @@
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
+
+import {useDeeplink} from './useDeeplink'
+
+vi.mock('../../utils/parseUrl', () => ({
+  parseUrl: vi.fn(),
+}))
+
+const {parseUrl} = await import('../../utils/parseUrl')
+
+describe('useDeeplink', () => {
+  const originalMinisParams = (window as any).minisParams
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    ;(window as any).minisParams = originalMinisParams
+  })
+
+  describe('Without initialUrl', () => {
+    beforeEach(() => {
+      ;(window as any).minisParams = {
+        initialUrl: undefined,
+        handle: 'test-mini',
+      }
+    })
+
+    it('returns undefined values when initialUrl is not provided', () => {
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: undefined,
+        queryParams: undefined,
+        hash: undefined,
+      })
+      expect(parseUrl).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('With initialUrl', () => {
+    beforeEach(() => {
+      ;(window as any).minisParams = {
+        initialUrl:
+          'https://shop.app/mini/test-mini/products?category=clothing',
+        handle: 'test-mini',
+      }
+    })
+
+    it('parses URL and strips mini handle prefix from pathname', () => {
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/products',
+        query: {category: 'clothing'},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(parseUrl).toHaveBeenCalledWith(
+        'https://shop.app/mini/test-mini/products?category=clothing'
+      )
+      expect(result.current).toEqual({
+        path: '/products',
+        queryParams: {category: 'clothing'},
+        hash: '',
+      })
+    })
+
+    it('returns pathname as-is when it does not contain mini handle prefix', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/some-other-path',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/some-other-path',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/some-other-path',
+        queryParams: {},
+        hash: '',
+      })
+    })
+
+    it('handles URL with multiple query parameters', () => {
+      ;(window as any).minisParams = {
+        initialUrl:
+          'https://shop.app/mini/test-mini/search?q=shoes&page=2&sort=price',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/search',
+        query: {q: 'shoes', page: '2', sort: 'price'},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/search',
+        queryParams: {q: 'shoes', page: '2', sort: 'price'},
+        hash: '',
+      })
+    })
+
+    it('handles URL with hash', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/page#section-2',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/page',
+        query: {},
+        hash: '#section-2',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/page',
+        queryParams: {},
+        hash: '#section-2',
+      })
+    })
+
+    it('handles URL with both query params and hash', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/products?filter=sale#top',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/products',
+        query: {filter: 'sale'},
+        hash: '#top',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/products',
+        queryParams: {filter: 'sale'},
+        hash: '#top',
+      })
+    })
+
+    it('handles root path after stripping prefix', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '',
+        queryParams: {},
+        hash: '',
+      })
+    })
+
+    it('handles root path with trailing slash', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/',
+        queryParams: {},
+        hash: '',
+      })
+    })
+
+    it('handles nested paths', () => {
+      ;(window as any).minisParams = {
+        initialUrl:
+          'https://shop.app/mini/test-mini/category/shoes/product/123',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/category/shoes/product/123',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/category/shoes/product/123',
+        queryParams: {},
+        hash: '',
+      })
+    })
+
+    it('handles different mini handle', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/another-mini/dashboard',
+        handle: 'another-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/another-mini/dashboard',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/dashboard',
+        queryParams: {},
+        hash: '',
+      })
+    })
+  })
+
+  describe('Memoization', () => {
+    it('returns same reference when dependencies do not change', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/products',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/products',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result, rerender} = renderHook(() => useDeeplink())
+      const firstResult = result.current
+
+      rerender()
+
+      expect(result.current).toBe(firstResult)
+      expect(parseUrl).toHaveBeenCalledTimes(1)
+    })
+
+    it('recomputes when initialUrl changes', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/products',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/products',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result, rerender} = renderHook(() => useDeeplink())
+      const firstResult = result.current
+
+      // Change initialUrl
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/cart',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/cart',
+        query: {},
+        hash: '',
+      } as any)
+
+      rerender()
+
+      expect(result.current).not.toBe(firstResult)
+      expect(result.current.path).toBe('/cart')
+      expect(parseUrl).toHaveBeenCalledTimes(2)
+    })
+
+    it('recomputes when handle changes', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/products',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/products',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result, rerender} = renderHook(() => useDeeplink())
+      const firstResult = result.current
+
+      // Change handle
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/products',
+        handle: 'different-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/products',
+        query: {},
+        hash: '',
+      } as any)
+
+      rerender()
+
+      expect(result.current).not.toBe(firstResult)
+      expect(parseUrl).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles empty initialUrl string', () => {
+      ;(window as any).minisParams = {
+        initialUrl: '',
+        handle: 'test-mini',
+      }
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: undefined,
+        queryParams: undefined,
+        hash: undefined,
+      })
+      expect(parseUrl).not.toHaveBeenCalled()
+    })
+
+    it('handles null initialUrl', () => {
+      ;(window as any).minisParams = {
+        initialUrl: null,
+        handle: 'test-mini',
+      }
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: undefined,
+        queryParams: undefined,
+        hash: undefined,
+      })
+      expect(parseUrl).not.toHaveBeenCalled()
+    })
+
+    it('handles query params with undefined values', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini/search?q=&page=1',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/search',
+        query: {q: undefined, page: '1'},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/search',
+        queryParams: {q: undefined, page: '1'},
+        hash: '',
+      })
+    })
+
+    it('handles pathname with special characters', () => {
+      ;(window as any).minisParams = {
+        initialUrl:
+          'https://shop.app/mini/test-mini/search?q=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini/search',
+        query: {q: 'S�kao'},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '/search',
+        queryParams: {q: 'S�kao'},
+        hash: '',
+      })
+    })
+
+    it('handles case where pathname is just the prefix', () => {
+      ;(window as any).minisParams = {
+        initialUrl: 'https://shop.app/mini/test-mini',
+        handle: 'test-mini',
+      }
+
+      vi.mocked(parseUrl).mockReturnValue({
+        pathname: '/mini/test-mini',
+        query: {},
+        hash: '',
+      } as any)
+
+      const {result} = renderHook(() => useDeeplink())
+
+      expect(result.current).toEqual({
+        path: '',
+        queryParams: {},
+        hash: '',
+      })
+    })
+  })
+})

package/src/hooks/navigation/useDeeplink.ts

@@ -18,7 +18,7 @@ interface UseDeeplinkReturnType {
 }
 
 export const useDeeplink = (): UseDeeplinkReturnType => {
-  const {initialUrl} = window.minisParams
+  const {initialUrl, handle} = window.minisParams
 
   return useMemo(() => {
     if (!initialUrl) {
@@ -30,11 +30,14 @@ export const useDeeplink = (): UseDeeplinkReturnType => {
     }
 
     const parsedUrl = parseUrl(initialUrl)
+    const deeplinkPathnamePrefix = `/mini/${handle}`
 
     return {
-      path: parsedUrl.pathname,
+      path: parsedUrl.pathname.startsWith(deeplinkPathnamePrefix)
+        ? parsedUrl.pathname.replace(deeplinkPathnamePrefix, '')
+        : parsedUrl.pathname,
       queryParams: parsedUrl.query,
       hash: parsedUrl.hash,
     }
-  }, [initialUrl])
+  }, [handle, initialUrl])
 }

package/src/mocks.ts

@@ -387,6 +387,7 @@ export function makeMockActions(): ShopActions {
       data: [
         {
           id: 'variant-1',
+          title: 'Variant 1',
           isFavorited: false,
           image: {url: 'https://example.com/variant-1.jpg'},
           price: {amount: '19.99', currencyCode: 'USD'},