@shopify/shop-minis-react 0.16.1 → 0.17.0

package/eslint/config.cjs

@@ -45,7 +45,6 @@ module.exports = {
     'shop-minis/no-javascript-files': 'error',
     'shop-minis/no-secrets': ['error'],
     'shop-minis/prefer-sdk-components': 'warn',
-    'shop-minis/prefer-sdk-hooks': 'warn',
     'shop-minis/validate-manifest': 'error',
 
     // Unsafe code execution (built-in ESLint rules)
@@ -62,6 +61,16 @@ module.exports = {
         message:
           'WebAssembly is not supported in the Shop Minis environment. Consider using alternative JavaScript implementations.',
       },
+      {
+        name: 'localStorage',
+        message:
+          'localStorage is not available in the Shop Minis environment. Use useAsyncStorage (or useSecureStorage for sensitive data) from @shopify/shop-minis-react instead.',
+      },
+      {
+        name: 'sessionStorage',
+        message:
+          'sessionStorage is not available in the Shop Minis environment. Use useAsyncStorage (or useSecureStorage for sensitive data) from @shopify/shop-minis-react instead.',
+      },
     ],
     'no-restricted-syntax': [
       'error',
@@ -108,6 +117,31 @@ module.exports = {
         message:
           'navigator.share is not available in the Shop Minis environment. Use the SDK share functionality instead.',
       },
+      // localStorage / sessionStorage access via window or globalThis
+      {
+        selector:
+          "MemberExpression[object.name='window'][property.name='localStorage']",
+        message:
+          'localStorage is not available in the Shop Minis environment. Use useAsyncStorage (or useSecureStorage for sensitive data) from @shopify/shop-minis-react instead.',
+      },
+      {
+        selector:
+          "MemberExpression[object.name='window'][property.name='sessionStorage']",
+        message:
+          'sessionStorage is not available in the Shop Minis environment. Use useAsyncStorage (or useSecureStorage for sensitive data) from @shopify/shop-minis-react instead.',
+      },
+      {
+        selector:
+          "MemberExpression[object.name='globalThis'][property.name='localStorage']",
+        message:
+          'localStorage is not available in the Shop Minis environment. Use useAsyncStorage (or useSecureStorage for sensitive data) from @shopify/shop-minis-react instead.',
+      },
+      {
+        selector:
+          "MemberExpression[object.name='globalThis'][property.name='sessionStorage']",
+        message:
+          'sessionStorage is not available in the Shop Minis environment. Use useAsyncStorage (or useSecureStorage for sensitive data) from @shopify/shop-minis-react instead.',
+      },
     ],
     'compat/compat': 'error',
   },

package/eslint/index.cjs

@@ -11,7 +11,6 @@ const noInternalImports = require('./rules/no-internal-imports.cjs')
 const noJavaScriptFiles = require('./rules/no-javascript-files.cjs')
 const noSecrets = require('./rules/no-secrets.cjs')
 const preferSdkComponents = require('./rules/prefer-sdk-components.cjs')
-const preferSdkHooks = require('./rules/prefer-sdk-hooks.cjs')
 const validateManifest = require('./rules/validate-manifest.cjs')
 
 module.exports = {
@@ -23,7 +22,6 @@ module.exports = {
     'no-javascript-files': noJavaScriptFiles,
     'no-secrets': noSecrets,
     'prefer-sdk-components': preferSdkComponents,
-    'prefer-sdk-hooks': preferSdkHooks,
     'validate-manifest': validateManifest,
   },
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -45,7 +45,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.14.1",
+    "@shopify/shop-minis-platform": "0.15.0",
     "@tailwindcss/vite": "4.1.8",
     "@tanstack/react-query": "5.86.0",
     "@types/lodash": "4.17.20",

package/src/hooks/index.ts

@@ -54,6 +54,7 @@ export * from './util/useCheckPermissions'
 
 // - Intent Hooks
 export * from './intents/useIntent'
+export * from './intents/useUserImagePicker'
 
 // - Event Hooks
 export * from './events/useOnMiniFocus'

package/src/hooks/intents/useUserImagePicker.ts

@@ -0,0 +1,36 @@
+import {useCallback} from 'react'
+
+import {useShopIntent} from '../../internal/useShopIntent'
+
+import type {
+  CreateUserImageParams,
+  CreateUserImageResponse,
+  IntentResult,
+} from '@shopify/shop-minis-platform/actions'
+
+/**
+ * Hook for minis to create a user image via the host app's
+ * camera or photo library.
+ */
+export function useUserImagePicker() {
+  const {invokeQuery} = useShopIntent()
+
+  const pickImage = useCallback(
+    async (
+      options: CreateUserImageParams
+    ): Promise<IntentResult<CreateUserImageResponse>> => {
+      const result = await invokeQuery({
+        action: 'create',
+        type: 'shop/UserImage',
+        data: options,
+      })
+
+      // The bridge returns untyped data; the host handler guarantees
+      // the shape matches CreateUserImageResponse for this action+type.
+      return result as IntentResult<CreateUserImageResponse>
+    },
+    [invokeQuery]
+  )
+
+  return {pickImage}
+}

package/src/internal/useShopIntent.ts

@@ -0,0 +1,46 @@
+import {useCallback} from 'react'
+
+import {useShopActions} from './useShopActions'
+
+import type {
+  IntentQuery,
+  InvokeIntentResponse,
+} from '@shopify/shop-minis-platform/actions'
+
+/**
+ * Internal hook that bridges minis to the host intent system
+ * via the INVOKE_INTENT shop action.
+ */
+export function useShopIntent() {
+  const {invokeIntent} = useShopActions()
+
+  const invokeQuery = useCallback(
+    async (query: IntentQuery): Promise<InvokeIntentResponse> => {
+      // The WebView bridge rejects on `*_ERROR` / `ERROR` responses, so any
+      // host-side failure (unsupported action on older hosts, middleware
+      // exceptions, transport errors) arrives here as a thrown Error rather
+      // than a resolved `{ok: false, ...}`. Catch it so `invokeQuery` always
+      // honors the declared `Promise<IntentResult>` contract.
+      try {
+        const result = await invokeIntent(query)
+
+        if (!result.ok) {
+          return {
+            code: 'error',
+            message: result.error?.message ?? 'Unknown error',
+          }
+        }
+
+        return result.data
+      } catch (error) {
+        return {
+          code: 'error',
+          message: error instanceof Error ? error.message : 'Unknown error',
+        }
+      }
+    },
+    [invokeIntent]
+  )
+
+  return {invokeQuery}
+}

package/src/mocks.ts

@@ -579,6 +579,7 @@ export function makeMockActions(): ShopActions {
     },
     reportError: undefined,
     reportFetch: undefined,
+    invokeIntent: {code: 'closed' as const},
   } as const
 
   const mock: Partial<ShopActions> = {}

package/eslint/rules/prefer-sdk-hooks.cjs

@@ -1,129 +0,0 @@
-/**
- * ESLint rule to prefer SDK hooks over native browser APIs
- * @fileoverview Enforce using Shop Minis SDK hooks instead of native browser APIs
- */
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description:
-        'Prefer Shop Minis SDK hooks over native browser APIs for better compatibility and functionality',
-      category: 'Best Practices',
-      recommended: true,
-    },
-    messages: {
-      preferAsyncStorage:
-        'Use useAsyncStorage (or useSecureStorage for sensitive data) from @shopify/shop-minis-react instead of localStorage. The SDK hook provides async storage that works reliably in the Shop mini-app environment.',
-    },
-    schema: [
-      {
-        type: 'object',
-        properties: {
-          apis: {
-            type: 'object',
-            description: 'Map of native APIs to SDK hooks',
-            additionalProperties: {
-              type: 'string',
-            },
-          },
-        },
-        additionalProperties: false,
-      },
-    ],
-  },
-
-  create(context) {
-    // Default API mappings
-    const defaultApis = {
-      localStorage: 'useAsyncStorage',
-      sessionStorage: 'useAsyncStorage',
-    }
-
-    // Get user configuration or use defaults
-    const options = context.options[0] || {}
-    const apiMap = {
-      ...defaultApis,
-      ...(options.apis || {}),
-    }
-
-    return {
-      MemberExpression(node) {
-        // Check for direct access: localStorage.getItem()
-        if (
-          node.object.type === 'Identifier' &&
-          Object.hasOwn(apiMap, node.object.name)
-        ) {
-          const apiName = node.object.name
-          const sdkHook = apiMap[apiName]
-
-          context.report({
-            node: node.object,
-            messageId: 'preferAsyncStorage',
-            data: {
-              nativeApi: apiName,
-              sdkHook,
-            },
-          })
-          return
-        }
-
-        // Check for global access: window.localStorage or globalThis.localStorage
-        if (
-          node.object.type === 'MemberExpression' &&
-          node.object.object.type === 'Identifier' &&
-          (node.object.object.name === 'window' ||
-            node.object.object.name === 'globalThis') &&
-          node.object.property.type === 'Identifier' &&
-          Object.hasOwn(apiMap, node.object.property.name)
-        ) {
-          const apiName = node.object.property.name
-          const sdkHook = apiMap[apiName]
-
-          context.report({
-            node: node.object,
-            messageId: 'preferAsyncStorage',
-            data: {
-              nativeApi: apiName,
-              sdkHook,
-            },
-          })
-        }
-      },
-
-      // Also catch direct references to localStorage/sessionStorage
-      Identifier(node) {
-        // Only flag if it's being used, not just referenced in imports
-        const parent = node.parent
-
-        // Skip if it's part of an import statement
-        if (
-          parent.type === 'ImportSpecifier' ||
-          parent.type === 'ImportDefaultSpecifier'
-        ) {
-          return
-        }
-
-        // Skip if it's already part of a MemberExpression (handled above)
-        if (parent.type === 'MemberExpression' && parent.object === node) {
-          return
-        }
-
-        // Check if this is a direct reference to localStorage/sessionStorage
-        if (!Object.hasOwn(apiMap, node.name)) {
-          return
-        }
-
-        // Skip if it's the variable name being declared (e.g., const localStorage = ...)
-        if (parent.type === 'VariableDeclarator' && parent.id === node) {
-          return
-        }
-
-        context.report({
-          node,
-          messageId: 'preferAsyncStorage',
-        })
-      },
-    }
-  },
-}