@shopify/shop-minis-react 0.2.2 → 0.2.3

package/dist/_virtual/index10.js

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

package/dist/_virtual/index4.js

@@ -1,5 +1,6 @@
-var r = {};
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
+var i = r();
 export {
-  r as __exports
+  i as s
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index4.js.map

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

package/dist/_virtual/index7.js

@@ -1,6 +1,5 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
-var i = r();
+var r = {};
 export {
-  i as s
+  r as __exports
 };
 //# sourceMappingURL=index7.js.map

package/dist/_virtual/index7.js.map

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

package/dist/_virtual/index9.js

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

package/dist/shop-minis-react/node_modules/.pnpm/@radix-ui_react-use-is-hydrated@0.1.0_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../../../../../../../_virtual/index7.js";
+import { s as r } from "../../../../../../../../_virtual/index4.js";
 function s() {
   return r.useSyncExternalStore(
     e,

package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js

@@ -1,4 +1,4 @@
-import { __exports as r } from "../../../../../../../../_virtual/index9.js";
+import { __exports as r } from "../../../../../../../../_virtual/index10.js";
 import { __require as a } from "./dom.js";
 import { __require as o } from "./dom-parser.js";
 var i;

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/index7.js";
 var c;
 function d() {
   if (c) return i;

package/dist/shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js

@@ -1,4 +1,4 @@
-import { __module as r } from "../../../../../../../_virtual/index10.js";
+import { __module as r } from "../../../../../../../_virtual/index9.js";
 import { __require as o } from "../cjs/use-sync-external-store-shim.production.js";
 import { __require as i } from "../cjs/use-sync-external-store-shim.development.js";
 var e;

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

@@ -12,7 +12,6 @@ module.exports = {
       category: 'Best Practices',
       recommended: true,
     },
-    fixable: 'code',
     messages: {
       preferSdkComponent:
         'Use <{{sdkComponent}}> from @shopify/shop-minis-react instead of <{{nativeElement}}>. The SDK component provides optimized performance, consistent styling, and additional features.',
@@ -52,9 +51,6 @@ module.exports = {
       ...(options.components || {}),
     }
 
-    // eslint-disable-next-line @shopify/prefer-module-scope-constants
-    const SDK_PACKAGE = '@shopify/shop-minis-react'
-
     return {
       JSXOpeningElement(node) {
         const elementName = node.name.name
@@ -70,81 +66,6 @@ module.exports = {
               nativeElement: elementName,
               sdkComponent,
             },
-            fix(fixer) {
-              const sourceCode = context.getSourceCode()
-              const openingElement = node
-              const jsxElement = node.parent
-
-              // Get the closing element if it exists
-              const closingElement = jsxElement.closingElement
-
-              const fixes = []
-
-              // Fix opening tag
-              const openingTagStart = openingElement.name.range[0]
-              const openingTagEnd = openingElement.name.range[1]
-              fixes.push(
-                fixer.replaceTextRange(
-                  [openingTagStart, openingTagEnd],
-                  sdkComponent
-                )
-              )
-
-              // Fix closing tag if it exists (not self-closing)
-              if (closingElement) {
-                const closingTagStart = closingElement.name.range[0]
-                const closingTagEnd = closingElement.name.range[1]
-                fixes.push(
-                  fixer.replaceTextRange(
-                    [closingTagStart, closingTagEnd],
-                    sdkComponent
-                  )
-                )
-              }
-
-              // Add import if it doesn't exist
-              const program = sourceCode.ast
-              const imports = program.body.filter(
-                importNode => importNode.type === 'ImportDeclaration'
-              )
-
-              // Check if we already import from the SDK
-              const sdkImport = imports.find(
-                importNode => importNode.source.value === SDK_PACKAGE
-              )
-
-              if (sdkImport) {
-                // Check if this component is already imported
-                const hasComponent = sdkImport.specifiers.some(
-                  spec =>
-                    spec.type === 'ImportSpecifier' &&
-                    spec.imported.name === sdkComponent
-                )
-
-                if (!hasComponent) {
-                  // Add component to existing import
-                  const lastSpecifier =
-                    sdkImport.specifiers[sdkImport.specifiers.length - 1]
-                  fixes.push(
-                    fixer.insertTextAfter(lastSpecifier, `, ${sdkComponent}`)
-                  )
-                }
-              } else {
-                // Add new import statement
-                const firstNode = program.body[0]
-                const importStatement = `import {${sdkComponent}} from '${SDK_PACKAGE}'\n`
-
-                if (firstNode) {
-                  fixes.push(fixer.insertTextBefore(firstNode, importStatement))
-                } else {
-                  fixes.push(
-                    fixer.insertTextAfterRange([0, 0], importStatement)
-                  )
-                }
-              }
-
-              return fixes
-            },
           })
         }
       },

package/eslint/rules/validate-manifest.cjs

@@ -9,6 +9,14 @@ const path = require('path')
 // Load the hook-scopes map
 const hookScopesMap = require('../../generated-hook-maps/hook-scopes-map.json')
 
+// Load the component-scopes map (may not exist yet)
+let componentScopesMap = {}
+try {
+  componentScopesMap = require('../../generated-hook-maps/component-scopes-map.json')
+} catch (err) {
+  // Component scopes map doesn't exist yet, that's okay
+}
+
 // Module-level cache for manifest.json to avoid repeated file I/O
 // ESLint reuses the same rule module across all files, so this cache
 // persists for the entire lint run, dramatically improving performance
@@ -73,7 +81,7 @@ module.exports = {
     fixable: 'code',
     messages: {
       missingScope:
-        'Hook "{{hookName}}" requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array.',
+        '{{source}} requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array.',
       missingPermission:
         '{{reason}} requires permission "{{permission}}" in src/manifest.json. Add "{{permission}}" to the "permissions" array.',
       missingTrustedDomain:
@@ -93,6 +101,7 @@ module.exports = {
     let manifest = null
     let manifestParseError = null
     const usedHooks = new Set()
+    const usedComponents = new Set()
     const requiredPermissions = new Set()
     const requiredDomains = new Set()
     const fixedIssues = new Set()
@@ -171,6 +180,35 @@ module.exports = {
                   })
                 })
               }
+
+              // Check if it's a component that requires scopes
+              // We need to check all possible paths where the component might be defined
+              const possibleComponentPaths = Object.keys(
+                componentScopesMap
+              ).filter(componentPath => {
+                // Extract the component name from the path (e.g., "commerce/add-to-cart" -> "AddToCartButton")
+                // We'll check if the import name matches common component naming patterns
+                const pathParts = componentPath.split('/')
+                const fileName = pathParts[pathParts.length - 1]
+                // Convert kebab-case or snake_case to PascalCase
+                const componentName = fileName
+                  .split(/[-_]/)
+                  .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                  .join('')
+                return (
+                  componentName === importedName || fileName === importedName
+                )
+              })
+
+              if (possibleComponentPaths.length > 0) {
+                possibleComponentPaths.forEach(componentPath => {
+                  usedComponents.add({
+                    path: componentPath,
+                    name: importedName,
+                    node,
+                  })
+                })
+              }
             }
           })
         }
@@ -408,6 +446,7 @@ module.exports = {
         if (
           manifestParseError &&
           (usedHooks.size > 0 ||
+            usedComponents.size > 0 ||
             requiredPermissions.size > 0 ||
             requiredDomains.size > 0)
         ) {
@@ -447,6 +486,47 @@ module.exports = {
           })
         })
 
+        // Check scopes for components
+        usedComponents.forEach(
+          ({path: componentPath, name: componentName, node}) => {
+            const componentData = componentScopesMap[componentPath]
+            if (
+              !componentData ||
+              !componentData.scopes ||
+              componentData.scopes.length === 0
+            ) {
+              return
+            }
+
+            const requiredScopes = componentData.scopes
+
+            if (!manifest) {
+              issues.push({
+                messageId: 'manifestNotFound',
+                data: {
+                  hookName: componentName,
+                  scopes: requiredScopes.join(', '),
+                },
+              })
+              return
+            }
+
+            const manifestScopes = manifest.scopes || []
+
+            requiredScopes.forEach(requiredScope => {
+              if (!manifestScopes.includes(requiredScope)) {
+                issues.push({
+                  type: 'scope',
+                  scope: requiredScope,
+                  componentName,
+                  componentPath,
+                  node,
+                })
+              }
+            })
+          }
+        )
+
         // Check permissions
         requiredPermissions.forEach(({permission, reason, node}) => {
           if (!manifest) {
@@ -513,11 +593,15 @@ module.exports = {
 
             // Only report if not fixed
             if (!fixedIssues.has(issueKey)) {
+              // Determine if this is from a hook or component
+              const sourceName = issue.hookName || issue.componentName
+              const sourceType = issue.hookName ? 'Hook' : 'Component'
+
               context.report({
                 loc: {line: 1, column: 0},
                 messageId: 'missingScope',
                 data: {
-                  hookName: issue.hookName,
+                  source: `${sourceType} "${sourceName}"`,
                   scope: issue.scope,
                 },
               })

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

@@ -0,0 +1,18 @@
+{
+  "commerce/product-card": {
+    "scopes": [
+      "product_list:write"
+    ],
+    "hooks": [
+      "useSavedProductsActions"
+    ]
+  },
+  "commerce/product-link": {
+    "scopes": [
+      "product_list:write"
+    ],
+    "hooks": [
+      "useSavedProductsActions"
+    ]
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "sideEffects": false,
   "type": "module",
   "engines": {