@shopify/shop-minis-react 0.1.7 → 0.1.8

package/dist/_virtual/index4.js

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

package/dist/_virtual/index5.js

@@ -1,5 +1,6 @@
-var e = { exports: {} };
+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 {
-  e as __module
+  i as l
 };
 //# 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,6 +1,6 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
+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 {
-  i as l
+  i as s
 };
 //# sourceMappingURL=index6.js.map

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/hooks/navigation/useDeeplink.js

@@ -1,23 +1,23 @@
-import { useMemo as e } from "react";
-import { parseUrl as s } from "../../utils/parseUrl.js";
-const t = () => {
-  const { initialUrl: r } = window.minisParams;
-  return e(() => {
+import { useMemo as i } from "react";
+import { parseUrl as n } from "../../utils/parseUrl.js";
+const m = () => {
+  const { initialUrl: r, handle: e } = window.minisParams;
+  return i(() => {
     if (!r)
       return {
         path: void 0,
         queryParams: void 0,
         hash: void 0
       };
-    const a = s(r);
+    const a = n(r), t = `/mini/${e}`;
     return {
-      path: a.pathname,
+      path: a.pathname.startsWith(t) ? a.pathname.replace(t, "") : a.pathname,
       queryParams: a.query,
       hash: a.hash
     };
-  }, [r]);
+  }, [e, r]);
 };
 export {
-  t as useDeeplink
+  m as useDeeplink
 };
 //# sourceMappingURL=useDeeplink.js.map

package/dist/hooks/navigation/useDeeplink.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDeeplink.js","sources":["../../../src/hooks/navigation/useDeeplink.ts"],"sourcesContent":["import {useMemo} from 'react'\n\nimport {parseUrl} from '../../utils/parseUrl'\n\ninterface UseDeeplinkReturnType {\n  /**\n   * The path of the deeplink.\n   */\n  path?: string\n  /**\n   * The query parameters of the deeplink.\n   */\n  queryParams?: {[key: string]: string | undefined}\n  /**\n   * The hash of the deeplink.\n   */\n  hash?: string\n}\n\nexport const useDeeplink = (): UseDeeplinkReturnType => {\n  const {initialUrl} = window.minisParams\n\n  return useMemo(() => {\n    if (!initialUrl) {\n      return {\n        path: undefined,\n        queryParams: undefined,\n        hash: undefined,\n      }\n    }\n\n    const parsedUrl = parseUrl(initialUrl)\n\n    return {\n      path: parsedUrl.pathname,\n      queryParams: parsedUrl.query,\n      hash: parsedUrl.hash,\n    }\n  }, [initialUrl])\n}\n"],"names":["useDeeplink","initialUrl","useMemo","parsedUrl","parseUrl"],"mappings":";;AAmBO,MAAMA,IAAc,MAA6B;AAChD,QAAA,EAAC,YAAAC,MAAc,OAAO;AAE5B,SAAOC,EAAQ,MAAM;AACnB,QAAI,CAACD;AACI,aAAA;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,MAAM;AAAA,MACR;AAGI,UAAAE,IAAYC,EAASH,CAAU;AAE9B,WAAA;AAAA,MACL,MAAME,EAAU;AAAA,MAChB,aAAaA,EAAU;AAAA,MACvB,MAAMA,EAAU;AAAA,IAClB;AAAA,EAAA,GACC,CAACF,CAAU,CAAC;AACjB;"}
+{"version":3,"file":"useDeeplink.js","sources":["../../../src/hooks/navigation/useDeeplink.ts"],"sourcesContent":["import {useMemo} from 'react'\n\nimport {parseUrl} from '../../utils/parseUrl'\n\ninterface UseDeeplinkReturnType {\n  /**\n   * The path of the deeplink.\n   */\n  path?: string\n  /**\n   * The query parameters of the deeplink.\n   */\n  queryParams?: {[key: string]: string | undefined}\n  /**\n   * The hash of the deeplink.\n   */\n  hash?: string\n}\n\nexport const useDeeplink = (): UseDeeplinkReturnType => {\n  const {initialUrl, handle} = window.minisParams\n\n  return useMemo(() => {\n    if (!initialUrl) {\n      return {\n        path: undefined,\n        queryParams: undefined,\n        hash: undefined,\n      }\n    }\n\n    const parsedUrl = parseUrl(initialUrl)\n    const deeplinkPathnamePrefix = `/mini/${handle}`\n\n    return {\n      path: parsedUrl.pathname.startsWith(deeplinkPathnamePrefix)\n        ? parsedUrl.pathname.replace(deeplinkPathnamePrefix, '')\n        : parsedUrl.pathname,\n      queryParams: parsedUrl.query,\n      hash: parsedUrl.hash,\n    }\n  }, [handle, initialUrl])\n}\n"],"names":["useDeeplink","initialUrl","handle","useMemo","parsedUrl","parseUrl","deeplinkPathnamePrefix"],"mappings":";;AAmBO,MAAMA,IAAc,MAA6B;AACtD,QAAM,EAAC,YAAAC,GAAY,QAAAC,EAAM,IAAI,OAAO;AAEpC,SAAOC,EAAQ,MAAM;AACnB,QAAI,CAACF;AACI,aAAA;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,MAAM;AAAA,MACR;AAGI,UAAAG,IAAYC,EAASJ,CAAU,GAC/BK,IAAyB,SAASJ,CAAM;AAEvC,WAAA;AAAA,MACL,MAAME,EAAU,SAAS,WAAWE,CAAsB,IACtDF,EAAU,SAAS,QAAQE,GAAwB,EAAE,IACrDF,EAAU;AAAA,MACd,aAAaA,EAAU;AAAA,MACvB,MAAMA,EAAU;AAAA,IAClB;AAAA,EAAA,GACC,CAACF,GAAQD,CAAU,CAAC;AACzB;"}

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/index6.js";
 function s() {
   return r.useSyncExternalStore(
     e,

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/index5.js";
+import { __module as q } from "../../../../../../../../_virtual/index4.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/index6.js";
+import { l as Q } from "../../../../../../../_virtual/index5.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/index4.js";
+import { __exports as i } from "../../../../../../_virtual/index7.js";
 var c;
 function d() {
   if (c) return i;

package/eslint/README.md

@@ -0,0 +1,201 @@
+# Shop Minis ESLint Plugin
+
+Custom ESLint rules for Shop Minis apps. ESLint is included with the SDK.
+
+## Quick Setup
+
+Create **`eslint.config.js`** (NOT `.eslintrc.js`):
+
+```javascript
+const shopMinisConfig = require('@shopify/shop-minis-react/eslint/config')
+
+module.exports = [shopMinisConfig]
+```
+
+**That's it!** TypeScript and JSX are supported out of the box.
+
+**Important:**
+- File must be named `eslint.config.js` (no dot, no "rc")
+- This will lint all `.js`, `.jsx`, `.ts`, `.tsx` files in your project
+- TypeScript and JSX parsing is configured automatically
+
+## Usage
+
+```bash
+# Check for errors
+npx eslint .
+
+# Auto-fix (converts <img> to <Image> AND adds import!)
+npx eslint . --fix
+```
+
+## What You Get
+
+- ✅ No internal imports allowed
+- ✅ Warnings for `<img>`, `<button>`, `<label>` tags (auto-fixes with imports)
+- ✅ Manifest scope validation - ensures manifest.json has scopes for hooks you use (auto-fixes manifest)
+
+## Rules
+
+### `no-internal-imports`
+
+Prevents importing from internal SDK directories.
+
+```tsx
+// ❌ Error
+import {something} from '@shopify/shop-minis-react/internal'
+
+// ✅ Correct
+import {Component} from '@shopify/shop-minis-react'
+```
+
+### `prefer-sdk-components`
+
+Suggests using SDK components instead of native HTML elements. **Fully auto-fixable** - fixes both tags and imports!
+
+**Before:**
+```tsx
+const MyComponent = () => (
+  <img src="product.jpg" alt="Product" />
+)
+```
+
+**After running `npx eslint . --fix`:**
+```tsx
+import {Image} from '@shopify/shop-minis-react'
+
+const MyComponent = () => (
+  <Image src="product.jpg" alt="Product" />
+)
+```
+
+**Supported Components:**
+- `<img>` → `<Image>`
+- `<button>` → `<Button>`
+- `<label>` → `<Label>`
+
+**Auto-fix does TWO things:**
+1. ✅ Replaces native element with SDK component
+2. ✅ Adds import statement automatically (or adds to existing import)
+
+### `validate-manifest`
+
+Validates `src/manifest.json` configuration for scopes and permissions. **Auto-fixable** - adds missing values to manifest!
+
+#### Scopes
+
+Checks that hooks have required scopes:
+
+```tsx
+// If you use this hook:
+import {useCurrentUser} from '@shopify/shop-minis-react'
+
+// Manifest must include:
+{
+  "scopes": ["USER_SETTINGS_READ"]
+}
+```
+
+**Scope Requirements:**
+- `useCurrentUser` → `USER_SETTINGS_READ`
+- `useSavedProducts` → `FAVORITES`
+- `useOrders` → `ORDERS`
+
+#### Permissions
+
+Checks for native permission usage:
+
+```tsx
+// If you use this hook:
+import {useImagePicker} from '@shopify/shop-minis-react'
+
+// Or browser APIs:
+navigator.mediaDevices.getUserMedia({video: true})
+
+// Manifest must include:
+{
+  "permissions": ["CAMERA"]
+}
+```
+
+**Supported Permissions:**
+- `CAMERA` - Required for `useImagePicker` hook or getUserMedia video
+- `MICROPHONE` - Required for getUserMedia audio
+- `MOTION` - Required for DeviceOrientation/DeviceMotion events
+
+#### Trusted Domains
+
+Checks that external URLs are in trusted_domains. Detects:
+
+**Network Requests:**
+- `fetch('https://api.example.com/data')`
+- `new XMLHttpRequest().open('GET', 'https://...')`
+- `new WebSocket('wss://api.example.com')`
+- `new EventSource('https://api.example.com/events')`
+- `navigator.sendBeacon('https://analytics.example.com')`
+- `window.open('https://external.com')`
+
+**Media & Resources:**
+- `<img src="https://cdn.shopify.com/image.jpg" />`
+- `<video src="https://videos.example.com/video.mp4" />`
+- `<video poster="https://cdn.example.com/poster.jpg" />`
+- `<audio src="https://audio.example.com/sound.mp3" />`
+- `<source src="https://media.example.com/video.mp4" />`
+- `<track src="https://cdn.example.com/captions.vtt" />`
+- `<object data="https://cdn.example.com/file.pdf" />`
+- `<embed src="https://cdn.example.com/file.swf" />`
+- `<form action="https://api.example.com/submit" />`
+
+**Note:** External scripts (`<script>`), stylesheets (`<link>`), and iframes are not supported and excluded from validation.
+
+**Example manifest:**
+```json
+{
+  "trusted_domains": [
+    "api.example.com",
+    "cdn.shopify.com",
+    "videos.example.com"
+  ]
+}
+```
+
+**Wildcard support:**
+```json
+{
+  "trusted_domains": [
+    "*.shopify.com",     // Matches any Shopify subdomain
+    "api.example.com",   // Exact domain
+    "cdn.example.com/assets"  // Specific path
+  ]
+}
+```
+
+**Auto-fix:**
+```bash
+npx eslint . --fix
+# Automatically updates src/manifest.json
+```
+
+**Example errors:**
+```
+Hook "useCurrentUser" requires scope "USER_SETTINGS_READ" in src/manifest.json.
+Hook "useImagePicker" requires permission "CAMERA" in src/manifest.json.
+fetch() call loads from "api.example.com" which is not in trusted_domains.
+<img> src attribute loads from "cdn.shopify.com" which is not in trusted_domains.
+```
+
+## Extending Rules
+
+To add more component mappings to `prefer-sdk-components`, edit `eslint/rules/prefer-sdk-components.cjs`:
+
+```javascript
+const defaultComponents = {
+  img: 'Image',
+  button: 'Button',
+  label: 'Label',
+  input: 'Input', // Add this
+  a: 'TransitionLink', // Add this
+}
+```
+
+All consumers automatically get new rules - no config changes needed!

package/eslint/config.cjs

@@ -0,0 +1,32 @@
+/* eslint-disable import/extensions */
+/**
+ * ESLint config for projects using @shopify/shop-minis-react
+ * @fileoverview Recommended ESLint configuration for Shop Minis apps
+ *
+ * This config uses ESLint flat config format (supported in ESLint 8.57+)
+ */
+
+// Import the plugin directly so consumers don't need to install it separately
+const shopMinisPlugin = require('./index.cjs')
+
+module.exports = {
+  files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+  languageOptions: {
+    parser: require('@typescript-eslint/parser'),
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+  plugins: {
+    'shop-minis': shopMinisPlugin,
+  },
+  rules: {
+    'shop-minis/no-internal-imports': 'error',
+    'shop-minis/prefer-sdk-components': 'warn',
+    'shop-minis/validate-manifest': 'error',
+  },
+}

package/eslint/index.cjs

@@ -0,0 +1,17 @@
+/* eslint-disable import/extensions */
+/**
+ * ESLint plugin for @shopify/shop-minis-react
+ * @fileoverview Custom ESLint rules for Shop Minis React SDK
+ */
+
+const noInternalImports = require('./rules/no-internal-imports.cjs')
+const preferSdkComponents = require('./rules/prefer-sdk-components.cjs')
+const validateManifest = require('./rules/validate-manifest.cjs')
+
+module.exports = {
+  rules: {
+    'no-internal-imports': noInternalImports,
+    'prefer-sdk-components': preferSdkComponents,
+    'validate-manifest': validateManifest,
+  },
+}

package/eslint/rules/no-internal-imports.cjs

@@ -0,0 +1,43 @@
+/**
+ * ESLint rule to prevent importing from internal directories
+ * @fileoverview Disallow importing from @shopify/shop-minis-react/internal
+ */
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow importing from internal directories of @shopify/shop-minis-react',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    messages: {
+      noInternalImports:
+        'Do not import from "{{importPath}}". Internal APIs are not part of the public API and may change without notice. Use the public exports from @shopify/shop-minis-react instead.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        const importPath = node.source.value
+
+        // Check if importing from internal directory
+        if (
+          importPath.includes('@shopify/shop-minis-react/internal') ||
+          importPath.includes('@shopify/shop-minis-react/src/internal')
+        ) {
+          context.report({
+            node: node.source,
+            messageId: 'noInternalImports',
+            data: {
+              importPath,
+            },
+          })
+        }
+      },
+    }
+  },
+}

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

@@ -0,0 +1,153 @@
+/**
+ * ESLint rule to prefer SDK components over native HTML elements
+ * @fileoverview Enforce using Shop Minis SDK components instead of native HTML
+ */
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Prefer Shop Minis SDK components over native HTML elements for better functionality and styling',
+      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.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          components: {
+            type: 'object',
+            description: 'Map of native elements to SDK components',
+            additionalProperties: {
+              type: 'string',
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+
+  create(context) {
+    // Default component mappings
+    const defaultComponents = {
+      img: 'Image',
+      button: 'Button',
+      label: 'Label',
+      // Future additions will go here:
+      // input: 'Input',
+      // a: 'Link',
+    }
+
+    // Get user configuration or use defaults
+    const options = context.options[0] || {}
+    const componentMap = {
+      ...defaultComponents,
+      ...(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
+
+        // Check if this is a native element we want to replace
+        if (componentMap[elementName]) {
+          const sdkComponent = componentMap[elementName]
+
+          context.report({
+            node,
+            messageId: 'preferSdkComponent',
+            data: {
+              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
+            },
+          })
+        }
+      },
+    }
+  },
+}