@shopify/shopify-app-remix 4.0.0 → 4.0.2

package/README.md

@@ -5,8 +5,15 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)
 [![npm version](https://badge.fury.io/js/%40shopify%2Fshopify-app-remix.svg)](https://badge.fury.io/js/%40shopify%2Fshopify-app-remix)
 
-This package makes it easy to use [Remix](https://remix.run/) to build Shopify apps.
-It builds on the `@shopify/shopify-api` package and exposes a `shopifyApp` function. You can use `shopifyApp` to configure your app and then authenticate requests from Shopify.
+This package makes it easy to use [Remix](https://remix.run/) to build Shopify apps. 
+
+## Upgrade to React Router
+
+You should only use this Remix package if you have an existing Remix app and have not yet upgraded.
+
+If you are building a new Shopify app you should use React Router and not Remix.  Please see the [Quick start guide for React Router](https://github.com/Shopify/shopify-app-template-react-router?tab=readme-ov-file#quick-start).
+
+If you already have a Remix app, you should upgrade to React Router.  Please see the [Upgrading to React Router guide](https://github.com/Shopify/shopify-app-template-react-router/wiki/Upgrading-from-Remix).
 
 Visit the [`shopify.dev` documentation](https://shopify.dev/docs/api/shopify-app-remix) for more details on the Remix app package.
 
@@ -75,7 +82,7 @@ SHOPIFY_API_SECRET="[Copy from partners dashboard]"
 SHOPIFY_APP_URL="[The tunnel URL you are using to run your app]"
 ```
 
-`shopifyApp` needs to reserve a [splat route](https://remix.run/docs/en/main/guides/routing#splats) for auth.
+`shopifyApp` needs to reserve a [splat route](https://v2.remix.run/docs/file-conventions/routes#splat-routes) for auth.
 It should export a loader that uses `shopifyApp` to authenticate:
 
 ```ts

package/dist/cjs/react/components/AppProvider/AppProvider.js

@@ -3,6 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var polaris = require('@shopify/polaris');
 var englishI18n = require('@shopify/polaris/locales/en.json');
+var react = require('@remix-run/react');
+var React = require('react');
 var _const = require('../../const.js');
 var RemixPolarisLink = require('../RemixPolarisLink.js');
 
@@ -71,6 +73,19 @@ var RemixPolarisLink = require('../RemixPolarisLink.js');
  */
 function AppProvider(props) {
     const { children, apiKey, i18n, isEmbeddedApp = true, __APP_BRIDGE_URL = _const.APP_BRIDGE_URL, ...polarisProps } = props;
+    const navigate = react.useNavigate();
+    React.useEffect(() => {
+        const handleNavigate = (event) => {
+            const href = event.target?.getAttribute('href');
+            if (href) {
+                navigate(href);
+            }
+        };
+        addEventListener('shopify:navigate', handleNavigate);
+        return () => {
+            removeEventListener('shopify:navigate', handleNavigate);
+        };
+    }, [navigate]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isEmbeddedApp && jsxRuntime.jsx("script", { src: __APP_BRIDGE_URL, "data-api-key": apiKey }), jsxRuntime.jsx(polaris.AppProvider, { ...polarisProps, linkComponent: RemixPolarisLink.RemixPolarisLink, i18n: i18n || englishI18n, children: children })] }));
 }
 

package/dist/cjs/react/components/AppProvider/AppProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppProvider.js","sources":["../../../../../../src/react/components/AppProvider/AppProvider.tsx"],"sourcesContent":["import {\n  AppProvider as PolarisAppProvider,\n  AppProviderProps as PolarisAppProviderProps,\n} from '@shopify/polaris';\n// This leads to some TS errors, but it does compile to something that works\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport englishI18n from '@shopify/polaris/locales/en.json' with {type: 'json'};\n\nimport {APP_BRIDGE_URL} from '../../const';\nimport {RemixPolarisLink} from '../RemixPolarisLink';\n\nexport interface AppProviderProps\n  extends Omit<PolarisAppProviderProps, 'linkComponent' | 'i18n'> {\n  /**\n   * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.\n   *\n   * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment\n   * variable, then you need to pass it from the loader to the component.\n   */\n  apiKey: string;\n  /**\n   * Whether the app is loaded inside the Shopify Admin. Default is `true`.\n   *\n   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n   */\n  isEmbeddedApp?: boolean;\n  /**\n   * The internationalization (i18n) configuration for your Polaris provider.\n   *\n   * {@link https://polaris.shopify.com/components/utilities/app-provider}\n   */\n  i18n?: PolarisAppProviderProps['i18n'];\n  /**\n   * Used internally by Shopify. You don't need to set this.\n   * @private\n   */\n  __APP_BRIDGE_URL?: string;\n}\n\n/**\n * Sets up the Polaris `AppProvider` and injects the App Bridge script.\n *\n * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component\n * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`\n * component.\n *\n * {@link https://polaris.shopify.com/components/utilities/app-provider}\n * {@link https://shopify.dev/tools/app-bridge}\n *\n * @example\n * <caption>Set up AppProvider.</caption>\n * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return json({ apiKey: process.env.SHOPIFY_API_KEY });\n * }\n *\n * export default function App() {\n *   const { apiKey } = useLoaderData();\n *\n *   return (\n *     <AppProvider isEmbeddedApp apiKey={apiKey}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n *\n * @example\n * <caption>Localize Polaris components.</caption>\n * <description>Pass in a different locale for Polaris to translate its components.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return json({\n *     apiKey: process.env.SHOPIFY_API_KEY,\n *     polarisTranslations: require(\"@shopify/polaris/locales/fr.json\"),\n *   });\n * }\n *\n * export default function App() {\n *   const { apiKey, polarisTranslations } = useLoaderData();\n *\n *   return (\n *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n */\nexport function AppProvider(props: AppProviderProps) {\n  const {\n    children,\n    apiKey,\n    i18n,\n    isEmbeddedApp = true,\n    __APP_BRIDGE_URL = APP_BRIDGE_URL,\n    ...polarisProps\n  } = props;\n\n  return (\n    <>\n      {isEmbeddedApp && <script src={__APP_BRIDGE_URL} data-api-key={apiKey} />}\n      <PolarisAppProvider\n        {...polarisProps}\n        linkComponent={RemixPolarisLink}\n        i18n={i18n || englishI18n}\n      >\n        {children}\n      </PolarisAppProvider>\n    </>\n  );\n}\n"],"names":["APP_BRIDGE_URL","_jsxs","_Fragment","_jsx","PolarisAppProvider","RemixPolarisLink"],"mappings":";;;;;;;;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACG,SAAU,WAAW,CAAC,KAAuB,EAAA;IACjD,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,aAAa,GAAG,IAAI,EACpB,gBAAgB,GAAGA,qBAAc,EACjC,GAAG,YAAY,EAChB,GAAG,KAAK;AAET,IAAA,QACEC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACG,aAAa,IAAIC,cAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,gBAAgB,EAAA,cAAA,EAAgB,MAAM,EAAA,CAAI,EACzEA,eAACC,mBAAkB,EAAA,EAAA,GACb,YAAY,EAChB,aAAa,EAAEC,iCAAgB,EAC/B,IAAI,EAAE,IAAI,IAAI,WAAW,EAAA,QAAA,EAExB,QAAQ,EAAA,CACU,CAAA,EAAA,CACpB;AAEP;;;;"}
+{"version":3,"file":"AppProvider.js","sources":["../../../../../../src/react/components/AppProvider/AppProvider.tsx"],"sourcesContent":["import {\n  AppProvider as PolarisAppProvider,\n  AppProviderProps as PolarisAppProviderProps,\n} from '@shopify/polaris';\n// This leads to some TS errors, but it does compile to something that works\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport englishI18n from '@shopify/polaris/locales/en.json' with {type: 'json'};\nimport {useNavigate} from '@remix-run/react';\nimport {useEffect} from 'react';\n\nimport {APP_BRIDGE_URL} from '../../const';\nimport {RemixPolarisLink} from '../RemixPolarisLink';\n\nexport interface AppProviderProps\n  extends Omit<PolarisAppProviderProps, 'linkComponent' | 'i18n'> {\n  /**\n   * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.\n   *\n   * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment\n   * variable, then you need to pass it from the loader to the component.\n   */\n  apiKey: string;\n  /**\n   * Whether the app is loaded inside the Shopify Admin. Default is `true`.\n   *\n   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n   */\n  isEmbeddedApp?: boolean;\n  /**\n   * The internationalization (i18n) configuration for your Polaris provider.\n   *\n   * {@link https://polaris.shopify.com/components/utilities/app-provider}\n   */\n  i18n?: PolarisAppProviderProps['i18n'];\n  /**\n   * Used internally by Shopify. You don't need to set this.\n   * @private\n   */\n  __APP_BRIDGE_URL?: string;\n}\n\n/**\n * Sets up the Polaris `AppProvider` and injects the App Bridge script.\n *\n * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component\n * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`\n * component.\n *\n * {@link https://polaris.shopify.com/components/utilities/app-provider}\n * {@link https://shopify.dev/tools/app-bridge}\n *\n * @example\n * <caption>Set up AppProvider.</caption>\n * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return json({ apiKey: process.env.SHOPIFY_API_KEY });\n * }\n *\n * export default function App() {\n *   const { apiKey } = useLoaderData();\n *\n *   return (\n *     <AppProvider isEmbeddedApp apiKey={apiKey}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n *\n * @example\n * <caption>Localize Polaris components.</caption>\n * <description>Pass in a different locale for Polaris to translate its components.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return json({\n *     apiKey: process.env.SHOPIFY_API_KEY,\n *     polarisTranslations: require(\"@shopify/polaris/locales/fr.json\"),\n *   });\n * }\n *\n * export default function App() {\n *   const { apiKey, polarisTranslations } = useLoaderData();\n *\n *   return (\n *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n */\nexport function AppProvider(props: AppProviderProps) {\n  const {\n    children,\n    apiKey,\n    i18n,\n    isEmbeddedApp = true,\n    __APP_BRIDGE_URL = APP_BRIDGE_URL,\n    ...polarisProps\n  } = props;\n\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    const handleNavigate = (event: Event) => {\n      const href = (event.target as HTMLElement)?.getAttribute('href');\n      if (href) {\n        navigate(href);\n      }\n    };\n\n    addEventListener('shopify:navigate', handleNavigate);\n\n    return () => {\n      removeEventListener('shopify:navigate', handleNavigate);\n    };\n  }, [navigate]);\n\n  return (\n    <>\n      {isEmbeddedApp && <script src={__APP_BRIDGE_URL} data-api-key={apiKey} />}\n      <PolarisAppProvider\n        {...polarisProps}\n        linkComponent={RemixPolarisLink}\n        i18n={i18n || englishI18n}\n      >\n        {children}\n      </PolarisAppProvider>\n    </>\n  );\n}\n"],"names":["APP_BRIDGE_URL","useNavigate","useEffect","_jsxs","_Fragment","_jsx","PolarisAppProvider","RemixPolarisLink"],"mappings":";;;;;;;;;;AA0CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACG,SAAU,WAAW,CAAC,KAAuB,EAAA;IACjD,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,aAAa,GAAG,IAAI,EACpB,gBAAgB,GAAGA,qBAAc,EACjC,GAAG,YAAY,EAChB,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAGC,iBAAW,EAAE;IAE9BC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,CAAC,KAAY,KAAI;YACtC,MAAM,IAAI,GAAI,KAAK,CAAC,MAAsB,EAAE,YAAY,CAAC,MAAM,CAAC;YAChE,IAAI,IAAI,EAAE;gBACR,QAAQ,CAAC,IAAI,CAAC;YAChB;AACF,QAAA,CAAC;AAED,QAAA,gBAAgB,CAAC,kBAAkB,EAAE,cAAc,CAAC;AAEpD,QAAA,OAAO,MAAK;AACV,YAAA,mBAAmB,CAAC,kBAAkB,EAAE,cAAc,CAAC;AACzD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,QACEC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACG,aAAa,IAAIC,cAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,gBAAgB,EAAA,cAAA,EAAgB,MAAM,EAAA,CAAI,EACzEA,eAACC,mBAAkB,EAAA,EAAA,GACb,YAAY,EAChB,aAAa,EAAEC,iCAAgB,EAC/B,IAAI,EAAE,IAAI,IAAI,WAAW,EAAA,QAAA,EAExB,QAAQ,EAAA,CACU,CAAA,EAAA,CACpB;AAEP;;;;"}

package/dist/cjs/server/version.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const SHOPIFY_REMIX_LIBRARY_VERSION = '4.0.0';
+const SHOPIFY_REMIX_LIBRARY_VERSION = '4.0.2';
 
 exports.SHOPIFY_REMIX_LIBRARY_VERSION = SHOPIFY_REMIX_LIBRARY_VERSION;
 //# sourceMappingURL=version.js.map

package/dist/cjs/server/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../../../../src/server/version.ts"],"sourcesContent":["export const SHOPIFY_REMIX_LIBRARY_VERSION = '4.0.0';\n"],"names":[],"mappings":";;AAAO,MAAM,6BAA6B,GAAG;;;;"}
+{"version":3,"file":"version.js","sources":["../../../../src/server/version.ts"],"sourcesContent":["export const SHOPIFY_REMIX_LIBRARY_VERSION = '4.0.2';\n"],"names":[],"mappings":";;AAAO,MAAM,6BAA6B,GAAG;;;;"}

package/dist/esm/react/components/AppProvider/AppProvider.mjs

@@ -1,6 +1,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { AppProvider as AppProvider$1 } from '@shopify/polaris';
 import englishI18n from '@shopify/polaris/locales/en.json' with { type: 'json' };
+import { useNavigate } from '@remix-run/react';
+import { useEffect } from 'react';
 import { APP_BRIDGE_URL } from '../../const.mjs';
 import { RemixPolarisLink } from '../RemixPolarisLink.mjs';
 
@@ -69,6 +71,19 @@ import { RemixPolarisLink } from '../RemixPolarisLink.mjs';
  */
 function AppProvider(props) {
     const { children, apiKey, i18n, isEmbeddedApp = true, __APP_BRIDGE_URL = APP_BRIDGE_URL, ...polarisProps } = props;
+    const navigate = useNavigate();
+    useEffect(() => {
+        const handleNavigate = (event) => {
+            const href = event.target?.getAttribute('href');
+            if (href) {
+                navigate(href);
+            }
+        };
+        addEventListener('shopify:navigate', handleNavigate);
+        return () => {
+            removeEventListener('shopify:navigate', handleNavigate);
+        };
+    }, [navigate]);
     return (jsxs(Fragment, { children: [isEmbeddedApp && jsx("script", { src: __APP_BRIDGE_URL, "data-api-key": apiKey }), jsx(AppProvider$1, { ...polarisProps, linkComponent: RemixPolarisLink, i18n: i18n || englishI18n, children: children })] }));
 }
 

package/dist/esm/react/components/AppProvider/AppProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppProvider.mjs","sources":["../../../../../../src/react/components/AppProvider/AppProvider.tsx"],"sourcesContent":["import {\n  AppProvider as PolarisAppProvider,\n  AppProviderProps as PolarisAppProviderProps,\n} from '@shopify/polaris';\n// This leads to some TS errors, but it does compile to something that works\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport englishI18n from '@shopify/polaris/locales/en.json' with {type: 'json'};\n\nimport {APP_BRIDGE_URL} from '../../const';\nimport {RemixPolarisLink} from '../RemixPolarisLink';\n\nexport interface AppProviderProps\n  extends Omit<PolarisAppProviderProps, 'linkComponent' | 'i18n'> {\n  /**\n   * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.\n   *\n   * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment\n   * variable, then you need to pass it from the loader to the component.\n   */\n  apiKey: string;\n  /**\n   * Whether the app is loaded inside the Shopify Admin. Default is `true`.\n   *\n   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n   */\n  isEmbeddedApp?: boolean;\n  /**\n   * The internationalization (i18n) configuration for your Polaris provider.\n   *\n   * {@link https://polaris.shopify.com/components/utilities/app-provider}\n   */\n  i18n?: PolarisAppProviderProps['i18n'];\n  /**\n   * Used internally by Shopify. You don't need to set this.\n   * @private\n   */\n  __APP_BRIDGE_URL?: string;\n}\n\n/**\n * Sets up the Polaris `AppProvider` and injects the App Bridge script.\n *\n * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component\n * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`\n * component.\n *\n * {@link https://polaris.shopify.com/components/utilities/app-provider}\n * {@link https://shopify.dev/tools/app-bridge}\n *\n * @example\n * <caption>Set up AppProvider.</caption>\n * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return json({ apiKey: process.env.SHOPIFY_API_KEY });\n * }\n *\n * export default function App() {\n *   const { apiKey } = useLoaderData();\n *\n *   return (\n *     <AppProvider isEmbeddedApp apiKey={apiKey}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n *\n * @example\n * <caption>Localize Polaris components.</caption>\n * <description>Pass in a different locale for Polaris to translate its components.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return json({\n *     apiKey: process.env.SHOPIFY_API_KEY,\n *     polarisTranslations: require(\"@shopify/polaris/locales/fr.json\"),\n *   });\n * }\n *\n * export default function App() {\n *   const { apiKey, polarisTranslations } = useLoaderData();\n *\n *   return (\n *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n */\nexport function AppProvider(props: AppProviderProps) {\n  const {\n    children,\n    apiKey,\n    i18n,\n    isEmbeddedApp = true,\n    __APP_BRIDGE_URL = APP_BRIDGE_URL,\n    ...polarisProps\n  } = props;\n\n  return (\n    <>\n      {isEmbeddedApp && <script src={__APP_BRIDGE_URL} data-api-key={apiKey} />}\n      <PolarisAppProvider\n        {...polarisProps}\n        linkComponent={RemixPolarisLink}\n        i18n={i18n || englishI18n}\n      >\n        {children}\n      </PolarisAppProvider>\n    </>\n  );\n}\n"],"names":["_jsxs","_Fragment","_jsx","PolarisAppProvider"],"mappings":";;;;;;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACG,SAAU,WAAW,CAAC,KAAuB,EAAA;IACjD,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,aAAa,GAAG,IAAI,EACpB,gBAAgB,GAAG,cAAc,EACjC,GAAG,YAAY,EAChB,GAAG,KAAK;AAET,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,aAAa,IAAIC,GAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,gBAAgB,EAAA,cAAA,EAAgB,MAAM,EAAA,CAAI,EACzEA,IAACC,aAAkB,EAAA,EAAA,GACb,YAAY,EAChB,aAAa,EAAE,gBAAgB,EAC/B,IAAI,EAAE,IAAI,IAAI,WAAW,EAAA,QAAA,EAExB,QAAQ,EAAA,CACU,CAAA,EAAA,CACpB;AAEP;;;;"}
+{"version":3,"file":"AppProvider.mjs","sources":["../../../../../../src/react/components/AppProvider/AppProvider.tsx"],"sourcesContent":["import {\n  AppProvider as PolarisAppProvider,\n  AppProviderProps as PolarisAppProviderProps,\n} from '@shopify/polaris';\n// This leads to some TS errors, but it does compile to something that works\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport englishI18n from '@shopify/polaris/locales/en.json' with {type: 'json'};\nimport {useNavigate} from '@remix-run/react';\nimport {useEffect} from 'react';\n\nimport {APP_BRIDGE_URL} from '../../const';\nimport {RemixPolarisLink} from '../RemixPolarisLink';\n\nexport interface AppProviderProps\n  extends Omit<PolarisAppProviderProps, 'linkComponent' | 'i18n'> {\n  /**\n   * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.\n   *\n   * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment\n   * variable, then you need to pass it from the loader to the component.\n   */\n  apiKey: string;\n  /**\n   * Whether the app is loaded inside the Shopify Admin. Default is `true`.\n   *\n   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n   */\n  isEmbeddedApp?: boolean;\n  /**\n   * The internationalization (i18n) configuration for your Polaris provider.\n   *\n   * {@link https://polaris.shopify.com/components/utilities/app-provider}\n   */\n  i18n?: PolarisAppProviderProps['i18n'];\n  /**\n   * Used internally by Shopify. You don't need to set this.\n   * @private\n   */\n  __APP_BRIDGE_URL?: string;\n}\n\n/**\n * Sets up the Polaris `AppProvider` and injects the App Bridge script.\n *\n * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component\n * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`\n * component.\n *\n * {@link https://polaris.shopify.com/components/utilities/app-provider}\n * {@link https://shopify.dev/tools/app-bridge}\n *\n * @example\n * <caption>Set up AppProvider.</caption>\n * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return json({ apiKey: process.env.SHOPIFY_API_KEY });\n * }\n *\n * export default function App() {\n *   const { apiKey } = useLoaderData();\n *\n *   return (\n *     <AppProvider isEmbeddedApp apiKey={apiKey}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n *\n * @example\n * <caption>Localize Polaris components.</caption>\n * <description>Pass in a different locale for Polaris to translate its components.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return json({\n *     apiKey: process.env.SHOPIFY_API_KEY,\n *     polarisTranslations: require(\"@shopify/polaris/locales/fr.json\"),\n *   });\n * }\n *\n * export default function App() {\n *   const { apiKey, polarisTranslations } = useLoaderData();\n *\n *   return (\n *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n */\nexport function AppProvider(props: AppProviderProps) {\n  const {\n    children,\n    apiKey,\n    i18n,\n    isEmbeddedApp = true,\n    __APP_BRIDGE_URL = APP_BRIDGE_URL,\n    ...polarisProps\n  } = props;\n\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    const handleNavigate = (event: Event) => {\n      const href = (event.target as HTMLElement)?.getAttribute('href');\n      if (href) {\n        navigate(href);\n      }\n    };\n\n    addEventListener('shopify:navigate', handleNavigate);\n\n    return () => {\n      removeEventListener('shopify:navigate', handleNavigate);\n    };\n  }, [navigate]);\n\n  return (\n    <>\n      {isEmbeddedApp && <script src={__APP_BRIDGE_URL} data-api-key={apiKey} />}\n      <PolarisAppProvider\n        {...polarisProps}\n        linkComponent={RemixPolarisLink}\n        i18n={i18n || englishI18n}\n      >\n        {children}\n      </PolarisAppProvider>\n    </>\n  );\n}\n"],"names":["_jsxs","_Fragment","_jsx","PolarisAppProvider"],"mappings":";;;;;;;;AA0CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACG,SAAU,WAAW,CAAC,KAAuB,EAAA;IACjD,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,aAAa,GAAG,IAAI,EACpB,gBAAgB,GAAG,cAAc,EACjC,GAAG,YAAY,EAChB,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;IAE9B,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,CAAC,KAAY,KAAI;YACtC,MAAM,IAAI,GAAI,KAAK,CAAC,MAAsB,EAAE,YAAY,CAAC,MAAM,CAAC;YAChE,IAAI,IAAI,EAAE;gBACR,QAAQ,CAAC,IAAI,CAAC;YAChB;AACF,QAAA,CAAC;AAED,QAAA,gBAAgB,CAAC,kBAAkB,EAAE,cAAc,CAAC;AAEpD,QAAA,OAAO,MAAK;AACV,YAAA,mBAAmB,CAAC,kBAAkB,EAAE,cAAc,CAAC;AACzD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,aAAa,IAAIC,GAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,gBAAgB,EAAA,cAAA,EAAgB,MAAM,EAAA,CAAI,EACzEA,IAACC,aAAkB,EAAA,EAAA,GACb,YAAY,EAChB,aAAa,EAAE,gBAAgB,EAC/B,IAAI,EAAE,IAAI,IAAI,WAAW,EAAA,QAAA,EAExB,QAAQ,EAAA,CACU,CAAA,EAAA,CACpB;AAEP;;;;"}

package/dist/esm/server/version.mjs

@@ -1,4 +1,4 @@
-const SHOPIFY_REMIX_LIBRARY_VERSION = '4.0.0';
+const SHOPIFY_REMIX_LIBRARY_VERSION = '4.0.2';
 
 export { SHOPIFY_REMIX_LIBRARY_VERSION };
 //# sourceMappingURL=version.mjs.map

package/dist/esm/server/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../../../../src/server/version.ts"],"sourcesContent":["export const SHOPIFY_REMIX_LIBRARY_VERSION = '4.0.0';\n"],"names":[],"mappings":"AAAO,MAAM,6BAA6B,GAAG;;;;"}
+{"version":3,"file":"version.mjs","sources":["../../../../src/server/version.ts"],"sourcesContent":["export const SHOPIFY_REMIX_LIBRARY_VERSION = '4.0.2';\n"],"names":[],"mappings":"AAAO,MAAM,6BAA6B,GAAG;;;;"}

package/dist/ts/react/components/AppProvider/AppProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppProvider.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProvider/AppProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,gBAAgB,IAAI,uBAAuB,EAC5C,MAAM,kBAAkB,CAAC;AAS1B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,uBAAuB,EAAE,eAAe,GAAG,MAAM,CAAC;IAC/D;;;;;OAKG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IACvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsBlD"}
+{"version":3,"file":"AppProvider.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProvider/AppProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,gBAAgB,IAAI,uBAAuB,EAC5C,MAAM,kBAAkB,CAAC;AAW1B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,uBAAuB,EAAE,eAAe,GAAG,MAAM,CAAC;IAC/D;;;;;OAKG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IACvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAuClD"}

package/dist/ts/server/version.d.ts

@@ -1,2 +1,2 @@
-export declare const SHOPIFY_REMIX_LIBRARY_VERSION = "4.0.0";
+export declare const SHOPIFY_REMIX_LIBRARY_VERSION = "4.0.2";
 //# sourceMappingURL=version.d.ts.map