@shopify/shop-minis-react 0.4.4 → 0.4.6

package/dist/_virtual/index4.js

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

package/dist/_virtual/index5.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 e = { exports: {} };
 export {
-  i as l
+  e as __module
 };
 //# 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,5 +1,6 @@
-var r = {};
+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 {
-  r as __exports
+  i as l
 };
 //# 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/index4.js";
+import { __module as q } from "../../../../../../../../_virtual/index5.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/index5.js";
+import { l as Q } from "../../../../../../../_virtual/index6.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/index6.js";
+import { __exports as i } from "../../../../../../_virtual/index4.js";
 var c;
 function d() {
   if (c) return i;

package/eslint/config.cjs

@@ -7,6 +7,7 @@
  */
 
 // Import the plugin directly so consumers don't need to install it separately
+const compatPlugin = require('eslint-plugin-compat')
 const reactPlugin = require('eslint-plugin-react')
 
 const shopMinisPlugin = require('./index.cjs')
@@ -26,6 +27,7 @@ module.exports = {
   plugins: {
     'shop-minis': shopMinisPlugin,
     react: reactPlugin,
+    compat: compatPlugin,
   },
   rules: {
     // Console usage
@@ -35,7 +37,9 @@ module.exports = {
     'react/no-danger': 'error',
 
     // Shop Minis custom rules
+    'shop-minis/no-env-without-fallback': 'error',
     'shop-minis/no-internal-imports': 'error',
+    'shop-minis/no-secrets': 'error',
     'shop-minis/prefer-sdk-components': 'warn',
     'shop-minis/prefer-sdk-hooks': 'warn',
     'shop-minis/validate-manifest': 'error',
@@ -68,5 +72,6 @@ module.exports = {
           'WebAssembly is not supported in the Shop Minis environment. Consider using alternative JavaScript implementations.',
       },
     ],
+    'compat/compat': 'error',
   },
 }

package/eslint/index.cjs

@@ -4,14 +4,18 @@
  * @fileoverview Custom ESLint rules for Shop Minis React SDK
  */
 
+const noEnvWithoutFallback = require('./rules/no-env-without-fallback.cjs')
 const noInternalImports = require('./rules/no-internal-imports.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 = {
   rules: {
+    'no-env-without-fallback': noEnvWithoutFallback,
     'no-internal-imports': noInternalImports,
+    'no-secrets': noSecrets,
     'prefer-sdk-components': preferSdkComponents,
     'prefer-sdk-hooks': preferSdkHooks,
     'validate-manifest': validateManifest,

package/eslint/rules/no-env-without-fallback.cjs

@@ -0,0 +1,148 @@
+/**
+ * ESLint rule to require fallbacks for environment variables
+ * @fileoverview Disallow using import.meta.env without a fallback value
+ *
+ * In Shop Minis, environment variables work in development but are not available
+ * in production. This rule ensures developers always provide fallback values.
+ */
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Require fallback values when using import.meta.env variables',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    messages: {
+      noFallback:
+        'Environment variable "{{ name }}" must have a fallback value. Environment variables are only available in development. Use || or ?? to provide a production fallback.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      MemberExpression(node) {
+        // Check if this is import.meta.env.SOMETHING
+        if (!isImportMetaEnv(node)) {
+          return
+        }
+
+        // Get the env variable name for the error message
+        const envName = node.property.name || node.property.value || 'unknown'
+
+        // Check if it has a fallback (|| or ??)
+        if (hasFallback(node)) {
+          return
+        }
+
+        context.report({
+          node,
+          messageId: 'noFallback',
+          data: {
+            name: `import.meta.env.${envName}`,
+          },
+        })
+      },
+    }
+  },
+}
+
+/**
+ * Check if node is import.meta.env.SOMETHING
+ */
+function isImportMetaEnv(node) {
+  // Must be a member expression with a property
+  if (node.type !== 'MemberExpression' || !node.property) {
+    return false
+  }
+
+  // The object should be import.meta.env
+  const obj = node.object
+  if (
+    obj.type === 'MemberExpression' &&
+    obj.object.type === 'MetaProperty' &&
+    obj.object.meta.name === 'import' &&
+    obj.object.property.name === 'meta' &&
+    obj.property.name === 'env'
+  ) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Check if the node has a fallback via || or ?? operator
+ */
+function hasFallback(node) {
+  let current = node.parent
+
+  // Walk up the tree to find if we're in a logical expression with fallback
+  while (current) {
+    // Direct fallback: import.meta.env.FOO || 'default' or import.meta.env.FOO ?? 'default'
+    // Also handles chains: import.meta.env.A || import.meta.env.B || 'default'
+    if (
+      current.type === 'LogicalExpression' &&
+      (current.operator === '||' || current.operator === '??')
+    ) {
+      // Check if this logical expression chain eventually has a non-env fallback
+      if (logicalChainHasFallback(current)) {
+        return true
+      }
+    }
+
+    // Conditional expression: import.meta.env.FOO ? import.meta.env.FOO : 'default'
+    if (current.type === 'ConditionalExpression') {
+      // If used in the test part, it has a fallback (the alternate)
+      if (node === current.test) {
+        return true
+      }
+      // If used in the consequent and test is an env var check, it's valid
+      if (node === current.consequent && isImportMetaEnv(current.test)) {
+        return true
+      }
+    }
+
+    current = current.parent
+  }
+
+  return false
+}
+
+/**
+ * Check if a logical expression chain has a fallback at the end
+ * For: A || B || C, we walk up to find the topmost || or ?? and check its right side
+ */
+function logicalChainHasFallback(node) {
+  // Walk up to the topmost logical expression in the chain
+  let topmost = node
+  while (
+    topmost.parent &&
+    topmost.parent.type === 'LogicalExpression' &&
+    (topmost.parent.operator === '||' || topmost.parent.operator === '??') &&
+    topmost.parent.left === topmost
+  ) {
+    topmost = topmost.parent
+  }
+
+  // The rightmost value in the chain is the fallback
+  // Check that it's not also an import.meta.env (that would mean no real fallback)
+  const rightmost = getRightmostValue(topmost)
+  return !isImportMetaEnv(rightmost)
+}
+
+/**
+ * Get the rightmost value in a logical expression chain
+ */
+function getRightmostValue(node) {
+  if (
+    node.type === 'LogicalExpression' &&
+    (node.operator === '||' || node.operator === '??')
+  ) {
+    return getRightmostValue(node.right)
+  }
+  return node
+}

package/eslint/rules/no-secrets.cjs

@@ -0,0 +1,27 @@
+/* eslint-disable import/extensions */
+/**
+ * ESLint rule wrapper for eslint-plugin-no-secrets with custom messages
+ * @fileoverview Customized messages for detecting hardcoded secrets in Shop Minis
+ */
+
+const noSecretsPlugin = require('eslint-plugin-no-secrets')
+
+// Get the original rule
+const originalRule = noSecretsPlugin.rules['no-secrets']
+
+module.exports = {
+  meta: {
+    ...originalRule.meta,
+    messages: {
+      HIGH_ENTROPY:
+        'This string may be a hardcoded credential, which should never be committed. Please check the Shop Minis documentation learn how to handle these cases. You can disable this rule if it is not a credential.',
+      PATTERN_MATCH:
+        'Potential {{ name }} detected. Hardcoded credentials should never be committed. Please check the Shop Minis documentation learn how to handle these cases. You can disable this rule if it is not a credential.',
+    },
+  },
+  create(context) {
+    // Create the original rule's visitor
+    const originalVisitor = originalRule.create(context)
+    return originalVisitor
+  },
+}

package/eslint/rules/validate-manifest.cjs

@@ -221,32 +221,84 @@ module.exports = {
       },
 
       // Detect browser API usage for permissions
-      MemberExpression(node) {
-        const sourceCode = context.getSourceCode()
-        const code = sourceCode.getText(node)
+      MemberExpression() {
+        // This visitor is kept for potential future permission detection
+        // getUserMedia detection has been moved to CallExpression for better constraint analysis
+      },
 
-        // Check for camera/microphone API
+      // Detect network requests and event listeners
+      CallExpression(node) {
+        // Check for getUserMedia calls
         if (
-          code.includes('navigator.mediaDevices.getUserMedia') ||
-          code.includes('navigator.getUserMedia')
+          node.callee.type === 'MemberExpression' &&
+          node.callee.property.name === 'getUserMedia'
         ) {
-          // Need to check the constraints to determine if it's camera or microphone
-          // For now, we'll flag both as potentially needed
-          requiredPermissions.add({
-            permission: 'CAMERA',
-            reason: 'getUserMedia API usage',
-            node,
-          })
-          requiredPermissions.add({
-            permission: 'MICROPHONE',
-            reason: 'getUserMedia API usage',
-            node,
-          })
+          // Validate it's actually navigator.getUserMedia or navigator.mediaDevices.getUserMedia
+          const sourceCode = context.getSourceCode()
+          const calleeText = sourceCode.getText(node.callee)
+
+          if (
+            calleeText.includes('navigator.mediaDevices.getUserMedia') ||
+            calleeText.includes('navigator.getUserMedia')
+          ) {
+            // Get the constraints argument (first argument)
+            const constraints = node.arguments[0]
+
+            let needsCamera = true
+            let needsMicrophone = true
+
+            if (constraints && constraints.type === 'ObjectExpression') {
+              // Check if video is explicitly set to false
+              const videoProp = constraints.properties.find(
+                prop =>
+                  prop.type === 'Property' &&
+                  prop.key &&
+                  (prop.key.name === 'video' ||
+                    (prop.key.type === 'Literal' && prop.key.value === 'video'))
+              )
+              if (
+                videoProp &&
+                videoProp.value.type === 'Literal' &&
+                videoProp.value.value === false
+              ) {
+                needsCamera = false
+              }
+
+              // Check if audio is explicitly set to false
+              const audioProp = constraints.properties.find(
+                prop =>
+                  prop.type === 'Property' &&
+                  prop.key &&
+                  (prop.key.name === 'audio' ||
+                    (prop.key.type === 'Literal' && prop.key.value === 'audio'))
+              )
+              if (
+                audioProp &&
+                audioProp.value.type === 'Literal' &&
+                audioProp.value.value === false
+              ) {
+                needsMicrophone = false
+              }
+            }
+
+            if (needsCamera) {
+              requiredPermissions.add({
+                permission: 'CAMERA',
+                reason: 'getUserMedia API usage with video',
+                node,
+              })
+            }
+
+            if (needsMicrophone) {
+              requiredPermissions.add({
+                permission: 'MICROPHONE',
+                reason: 'getUserMedia API usage with audio',
+                node,
+              })
+            }
+          }
         }
-      },
 
-      // Detect network requests and event listeners
-      CallExpression(node) {
         if (!node.arguments[0]) {
           return
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -50,14 +50,16 @@
     "@types/lodash": "4.17.20",
     "@types/react-window": "1.8.8",
     "@types/url-parse": "1.4.9",
-    "@typescript-eslint/parser": "^7.0.0",
+    "@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",
+    "eslint": "8.57.0",
+    "eslint-plugin-compat": "6.0.2",
+    "eslint-plugin-no-secrets": "2.2.1",
+    "eslint-plugin-react": "7.37.5",
     "js-base64": "3.7.7",
     "lodash": "4.17.21",
     "lucide-react": "0.513.0",