@shopify/shop-minis-react 0.3.0 → 0.3.2

package/eslint/config.cjs

@@ -7,6 +7,8 @@
  */
 
 // Import the plugin directly so consumers don't need to install it separately
+const reactPlugin = require('eslint-plugin-react')
+
 const shopMinisPlugin = require('./index.cjs')
 
 module.exports = {
@@ -23,10 +25,14 @@ module.exports = {
   },
   plugins: {
     'shop-minis': shopMinisPlugin,
+    react: reactPlugin,
   },
   rules: {
+    'no-console': 'warn',
+    'react/no-danger': 'error',
     'shop-minis/no-internal-imports': 'error',
     'shop-minis/prefer-sdk-components': 'warn',
+    'shop-minis/prefer-sdk-hooks': 'warn',
     'shop-minis/validate-manifest': 'error',
   },
 }

package/eslint/index.cjs

@@ -6,12 +6,14 @@
 
 const noInternalImports = require('./rules/no-internal-imports.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 = {
   rules: {
     'no-internal-imports': noInternalImports,
     'prefer-sdk-components': preferSdkComponents,
+    'prefer-sdk-hooks': preferSdkHooks,
     'validate-manifest': validateManifest,
   },
 }

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

@@ -0,0 +1,129 @@
+/**
+ * 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',
+        })
+      },
+    }
+  },
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -50,19 +50,20 @@
     "@types/react-window": "1.8.8",
     "@types/url-parse": "1.4.9",
     "@types/video.js": "7.3.58",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "4.5.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "color": "4.2.3",
     "embla-carousel-react": "8.6.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.37.5",
     "js-base64": "3.7.7",
     "lodash": "4.17.21",
     "lucide-react": "0.513.0",
     "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",