{"version":3,"file":"AppProvider.mjs","sources":["../../../../../../src/react/components/AppProvider/AppProvider.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {useNavigate} from 'react-router';\n\ninterface BaseProps {\n  children: React.ReactNode;\n}\n\ninterface EmbeddedProps extends BaseProps {\n  /**\n   * If this route should be rendered inside the Shopify admin.\n   *\n   * Setting this to true will include the App Bridge script on the page.\n   * If true and the route is loaded outside the Shopify admin, then the user will be redirected to the Shopify admin.\n   *\n   * Setting this to false will not include the App Bridge script on the page.\n   *\n   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n   */\n  embedded: true;\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\ninterface NonEmbeddedProps extends BaseProps {\n  /**\n   * If this route should be rendered inside the Shopify admin.\n   *\n   * Setting this to false means only Polaris Web components will be added to the route, not App Bridge.\n   *\n   * Setting this to true will include the App Bridge script on the page.\n   *\n   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n   */\n  embedded?: false;\n}\n\nexport type AppProviderProps = NonEmbeddedProps | EmbeddedProps;\n\n/**\n * Sets up your app to look like the admin\n *\n * Adds Polaris Web components to the route.\n * If embedded is true and apiKey is provided, then the App Bridge script will be added to the page.\n *\n * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n * {@link https://shopify.dev/docs/api/app-home/using-polaris-components}\n * {@link https://shopify.dev/tools/app-bridge}\n *\n * @example\n * <caption>Set up AppProvider for an embedded route</caption>\n * <description>Wrap your route in the `AppProvider` component and pass in your API key.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {useLoaderData} from 'react-router';\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-react-router/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.admin(request);\n *\n *   return { apiKey: process.env.SHOPIFY_API_KEY };\n * }\n *\n * export default function App() {\n *   const { apiKey } = useLoaderData();\n *\n *   return (\n *     <AppProvider embedded apiKey={apiKey}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n *\n * @example\n * <caption>Set up AppProvider for a non-embedded route</caption>\n * <description>Add Polaris web components to the route, without adding the App Bridge script.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {AppProvider} from '@shopify/shopify-app-react-router/react';\n *\n * export default function App() {\n *   return (\n *     <AppProvider embedded={false}>\n *       <Outlet />\n *     </AppProvider>\n *   );\n * }\n * ```\n */\nexport function AppProvider(props: AppProviderProps) {\n  return (\n    <>\n      {props.embedded && <AppBridge apiKey={props.apiKey} />}\n      <script src=\"https://cdn.shopify.com/shopifycloud/polaris.js\" />\n      {props.children}\n    </>\n  );\n}\n\ninterface AppBridgeProps {\n  apiKey: EmbeddedProps['apiKey'];\n}\n\nfunction AppBridge({apiKey}: AppBridgeProps) {\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    document.addEventListener('shopify:navigate', handleNavigate);\n\n    return () => {\n      document.removeEventListener('shopify:navigate', handleNavigate);\n    };\n  }, [navigate]);\n\n  return (\n    <script\n      src=\"https://cdn.shopify.com/shopifycloud/app-bridge.js\"\n      data-api-key={apiKey}\n    />\n  );\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;AA2CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDG;AACG,SAAU,WAAW,CAAC,KAAuB,EAAA;IACjD,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,CAAC,QAAQ,IAAIC,GAAA,CAAC,SAAS,EAAA,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,CAAI,EACtDA,GAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAC,iDAAiD,EAAA,CAAG,EAC/D,KAAK,CAAC,QAAQ,CAAA,EAAA,CACd;AAEP;AAMA,SAAS,SAAS,CAAC,EAAC,MAAM,EAAiB,EAAA;AACzC,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,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,cAAc,CAAC;AAE7D,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,cAAc,CAAC;AAClE,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,QACEA,gBACE,GAAG,EAAC,oDAAoD,EAAA,cAAA,EAC1C,MAAM,EAAA,CACpB;AAEN;;;;"}